const { useState: useStateML } = React;

function MediaLoginPage({ onNav }) {
  const [email, setEmail] = useStateML('');
  const [password, setPassword] = useStateML('');
  const [loading, setLoading] = useStateML(false);
  const [errorMsg, setErrorMsg] = useStateML('');

  // Dacă deja logat și e staff activ, redirect direct la dashboard
  React.useEffect(() => {
    (async () => {
      try {
        // Așteaptă să fie disponibil clientul Supabase
        let tries = 0;
        while (!window.sb && tries < 100) {
          await new Promise(r => setTimeout(r, 50));
          tries++;
        }
        if (!window.sb) return;

        const { data: { session } } = await window.sb.auth.getSession();
        if (session) {
          const { data: profile } = await window.sb.from('staff_profiles').select('id, is_active').eq('id', session.user.id).maybeSingle();
          if (profile && profile.is_active) {
            onNav('media-admin');
          }
        }
      } catch (err) {
        console.error('[4U Media Login] Auto-redirect check error:', err);
      }
    })();
  }, []);

  const handleLogin = async (e) => {
    e.preventDefault();
    setLoading(true);
    setErrorMsg('');

    // Așteaptă să fie disponibil clientul Supabase
    let supabaseTries = 0;
    while (!window.sb && supabaseTries < 100) {
      await new Promise(r => setTimeout(r, 50));
      supabaseTries++;
    }
    if (!window.sb) {
      setErrorMsg('Eroare la încărcarea sistemului. Te rugăm să dai refresh la pagină (Ctrl+R) și încerci din nou.');
      setLoading(false);
      return;
    }

    try {
      const { data: authData, error: authError } = await window.sb.auth.signInWithPassword({
        email: email.trim().toLowerCase(),
        password: password,
      });

      if (authError) {
        console.error('[4U Media Admin] Login error:', authError);
        setErrorMsg('Email sau parolă incorectă. Te rugăm să încerci din nou.');
        setLoading(false);
        return;
      }

      // Verifică că userul e în staff_profiles și activ
      const { data: profile, error: profileError } = await window.sb
        .from('staff_profiles')
        .select('id, full_name, role, is_active')
        .eq('id', authData.user.id)
        .maybeSingle();

      if (profileError || !profile || !profile.is_active) {
        await window.sb.auth.signOut();
        setErrorMsg('Contul tău nu are acces la zona 4U Media Admin sau e dezactivat. Contactează administratorul.');
        setLoading(false);
        return;
      }

      setLoading(false);
      onNav('media-admin');
    } catch (err) {
      console.error('[4U Media Admin] Network error:', err);
      setErrorMsg('Conexiune eșuată. Verifică internetul și încearcă din nou.');
      setLoading(false);
    }
  };

  return (
    <div style={{ minHeight: '100vh', display: 'grid', placeItems: 'center', padding: 24, position: 'relative' }}>
      <Mesh />
      <div style={{ position: 'relative', zIndex: 2, width: '100%', maxWidth: 440 }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div className="pill" style={{ display: 'inline-flex', marginBottom: 20 }}>
            <span className="dot" />
            <span className="mono" style={{ fontSize: 11, letterSpacing: '0.1em' }}>4U MEDIA ADMIN</span>
          </div>
          <h1 className="display" style={{ fontSize: 'clamp(32px, 4vw, 44px)', margin: '0 0 12px' }}>
            Bun venit înapoi.
          </h1>
          <p style={{ color: 'var(--txt-2)', fontSize: 15 }}>Conectează-te ca să gestionezi aplicațiile.</p>
        </div>

        <form onSubmit={handleLogin} className="card-glass" style={{ padding: 32 }}>
          <label className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em', marginBottom: 6, display: 'block' }}>EMAIL</label>
          <input className="input" type="email" required value={email} onChange={e => setEmail(e.target.value)} placeholder="admin@4uagency.ro" style={{ marginBottom: 16 }} />

          <label className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em', marginBottom: 6, display: 'block' }}>PAROLĂ</label>
          <input className="input" type="password" required value={password} onChange={e => setPassword(e.target.value)} placeholder="••••••••" />

          {errorMsg && (
            <div style={{ marginTop: 20, padding: '12px 14px', borderRadius: 10, background: 'rgba(255,90,90,.06)', border: '.5px solid rgba(255,100,100,.3)', display: 'flex', gap: 10, fontSize: 13, color: 'var(--txt-2)' }}>
              <span>⚠️</span><span>{errorMsg}</span>
            </div>
          )}

          <button type="submit" className="btn btn-primary btn-lg" style={{ width: '100%', marginTop: 24, opacity: loading ? 0.6 : 1, cursor: loading ? 'not-allowed' : 'pointer' }} disabled={loading}>
            {loading ? (
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 14, height: 14, borderRadius: 999, border: '2px solid rgba(255,255,255,.3)', borderTopColor: '#fff', animation: 'ml-spin 0.8s linear infinite' }} />
                Se conectează...
              </span>
            ) : 'Conectează-te'}
          </button>

          <style>{`@keyframes ml-spin { to { transform: rotate(360deg); } }`}</style>
        </form>

        <p style={{ textAlign: 'center', marginTop: 16, fontSize: 13, color: 'var(--txt-3)' }}>
          Ți-ai uitat parola? Contactează ownerul agenției.
        </p>

        <p style={{ textAlign: 'center', marginTop: 24, fontSize: 13, color: 'var(--txt-3)' }}>
          Panou intern al echipei 4U Media. Pentru cont nou, contactează administratorul.
        </p>
      </div>
    </div>
  );
}

window.MediaLoginPage = MediaLoginPage;