// auth.jsx — Login / Register

const { useState: useStateA } = React;

function LoginPage({ onNav, onLogin }) {
  const [mode, setMode] = useStateA('login');
  const [email, setEmail] = useStateA('');
  const [pwd, setPwd] = useStateA('');
  const [name, setName] = useStateA('');
  const [showPwd, setShowPwd] = useStateA(false);
  const submit = (e) => { e.preventDefault(); onLogin && onLogin({ name: name || 'Andra', email: email || 'andra@4u.ro' }); };

  const pwdStrength = pwd.length === 0 ? 0 : Math.min(4, Math.floor(pwd.length / 3) + (/\d/.test(pwd) ? 1 : 0) + (/[A-Z]/.test(pwd) ? 1 : 0));
  const strengthColors = ['#27272A', '#EF4444', '#F59E0B', '#52F20F', '#52F20F'];
  const strengthLabels = ['—', 'slabă', 'medie', 'bună', 'excelentă'];

  return (
    <div className="page auth-grid" style={{ minHeight: '100vh', display: 'grid', gridTemplateColumns: '1.2fr 1fr' }}>
      {/* Left visual */}
      <div style={{ position: 'relative', overflow: 'hidden', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: 64 }} className="auth-left">
        <Mesh />
        <Particles count={20} />
        <div style={{ position: 'relative', zIndex: 2 }}><Logo size={32}/></div>
        <div style={{ position: 'relative', zIndex: 2 }}>
          <h1 className="display" style={{ fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, margin: 0 }}>
            Bine ai revenit<span style={{ background: 'var(--grad)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' }}>!</span>
          </h1>
          <p style={{ color: 'var(--txt-2)', fontSize: 18, maxWidth: 460, marginTop: 24, lineHeight: 1.5 }}>
            Continuă acolo unde ai rămas. Verifică punctele, accesează modulele, vorbește cu AI-ul tău.
          </p>
          <div style={{ display: 'flex', gap: 24, marginTop: 48, flexWrap: 'wrap' }}>
            {[['5.000+', 'creatori'], ['8', 'țări'], ['6', 'premii']].map(([v, l]) => (
              <div key={l}>
                <div className="display" style={{ fontSize: 32, color: 'var(--accent-1)' }}>{v}</div>
                <div className="mono" style={{ fontSize: 11, color: 'var(--txt-3)' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative', zIndex: 2, color: 'var(--txt-3)', fontSize: 12 }} className="mono">© 2026 4U Agency</div>
      </div>
      {/* Right form */}
      <div style={{ background: 'var(--bg-1)', display: 'grid', placeItems: 'center', padding: 48, position: 'relative' }}>
        <div style={{ position: 'absolute', top: 24, right: 32, zIndex: 50 }}>
          <BackButton onNav={onNav} />
        </div>
        <div style={{ width: '100%', maxWidth: 380 }}>
          <div style={{ display: 'flex', background: 'var(--bg-2)', border: '.5px solid var(--line)', borderRadius: 10, padding: 4, marginBottom: 32 }}>
            {['login', 'register'].map(m => (
              <button key={m} onClick={() => setMode(m)} className="btn btn-sm" style={{
                flex: 1, height: 36,
                background: mode === m ? 'var(--accent-1)' : 'transparent',
                color: mode === m ? '#0A0A0F' : 'var(--txt-2)',
                fontWeight: mode === m ? 600 : 400,
              }}>{m === 'login' ? 'Conectare' : 'Înregistrare'}</button>
            ))}
          </div>
          <h2 className="display" style={{ fontSize: 32, margin: 0 }}>{mode === 'login' ? 'Conectează-te' : 'Creează cont'}</h2>
          <p style={{ color: 'var(--txt-2)', fontSize: 14, marginTop: 8, marginBottom: 32 }}>
            {mode === 'login' ? 'Continuă-ți călătoria 4U.' : 'Începe-ți călătoria 4U în 30 secunde.'}
          </p>
          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            {mode === 'register' && (
              <AuField label="Nume complet"><input className="input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Ion Popescu" /></AuField>
            )}
            <AuField label="Email"><input className="input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="adresa@email.ro" /></AuField>
            <AuField label="Parolă">
              <div style={{ position: 'relative' }}>
                <input className="input" type={showPwd ? 'text' : 'password'} value={pwd} onChange={(e) => setPwd(e.target.value)} placeholder="••••••••" style={{ paddingRight: 56 }} />
                <button type="button" onClick={() => setShowPwd(s => !s)} className="btn btn-ghost btn-sm" style={{ position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)', height: 32, padding: '0 8px', fontSize: 11 }}>
                  {showPwd ? 'ascunde' : 'arată'}
                </button>
              </div>
              {mode === 'register' && pwd.length > 0 && (
                <div style={{ display: 'flex', gap: 4, marginTop: 8, alignItems: 'center' }}>
                  {[1,2,3,4].map(n => (
                    <div key={n} style={{ flex: 1, height: 3, borderRadius: 2, background: n <= pwdStrength ? strengthColors[pwdStrength] : 'var(--line)', transition: 'background .25s' }} />
                  ))}
                  <span className="mono" style={{ fontSize: 10, color: strengthColors[pwdStrength], marginLeft: 8, minWidth: 60, textAlign: 'right' }}>{strengthLabels[pwdStrength]}</span>
                </div>
              )}
            </AuField>
            {mode === 'login' && (
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
                <label style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'var(--txt-2)', cursor: 'pointer' }}>
                  <input type="checkbox" defaultChecked style={{ accentColor: 'var(--accent-1)' }}/> Ține-mă autentificat
                </label>
                <a className="ulink" style={{ fontSize: 12 }}>Ai uitat parola?</a>
              </div>
            )}
            <button type="submit" className="btn btn-primary btn-lg" style={{ marginTop: 8 }}>
              {mode === 'login' ? 'Conectează-te →' : 'Creează cont →'}
            </button>
          </form>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, margin: '24px 0' }}>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
            <span className="mono" style={{ fontSize: 10, color: 'var(--txt-3)' }}>SAU CONTINUĂ CU</span>
            <div style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
            <button className="btn btn-glass">Google</button>
            <button className="btn btn-glass">Facebook</button>
          </div>
          <p style={{ textAlign: 'center', fontSize: 12, color: 'var(--txt-3)', marginTop: 32 }}>
            Continuând, accepți <a className="ulink">Termenii</a> și <a className="ulink">Politica de confidențialitate</a>.
          </p>
        </div>
      </div>
      <style>{`@media (max-width: 900px) { .auth-left { display: none !important; } .auth-grid { grid-template-columns: 1fr !important; }} `}</style>
    </div>
  );
}

function AuField({ label, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span className="mono" style={{ fontSize: 10, color: 'var(--txt-3)', letterSpacing: '0.1em' }}>{label.toUpperCase()}</span>
      {children}
    </label>
  );
}

window.LoginPage = LoginPage;