// login.jsx — clean access screen. Pre-auth; picks the role to enter as.
(function () {
  const { useState } = React;
  const D = window.JS_DATA;

  function Login({ onAuth }) {
    const [role, setRole] = useState('agency');
    const [email, setEmail] = useState('agency-owner@jiffyscore.ai');
    const [password, setPassword] = useState('demo-password-12345');
    const [bootstrapMode, setBootstrapMode] = useState(false);
    const [bootstrap, setBootstrap] = useState({ email: 'admin@jiffyscore.ai', password: 'strong-password-123', displayName: 'Platform Admin', organizationName: 'Jiffy Resources', setupToken: '' });
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    const testUsers = [
      ['super_admin', 'demo-admin@jiffyscore.ai', 'Super admin'],
      ['agency', 'agency-owner@jiffyscore.ai', 'Agency'],
      ['client', 'client-viewer@jiffyscore.ai', 'Client'],
    ];
    const submit = async () => {
      setLoading(true);
      setError('');
      try {
        const session = await window.JS_API.login(email, password);
        await onAuth(session);
      } catch (loginError) {
        try {
          const session = await window.JS_API.me();
          session.developmentBypass = true;
          await onAuth(session);
        } catch {
          setError(loginError.message || 'Sign in failed');
        }
      } finally {
        setLoading(false);
      }
    };

    const submitBootstrap = async () => {
      setLoading(true);
      setError('');
      try {
        const session = await window.JS_API.bootstrap(bootstrap);
        await onAuth(session);
      } catch (bootstrapError) {
        setError(bootstrapError.message || 'Bootstrap failed');
      } finally {
        setLoading(false);
      }
    };

    return (
      <div className="js-login">
        {/* brand panel */}
        <div className="js-login-brand js-artback">
          <div className="js-login-glow" />
          <img className="js-login-emblem" src="assets/logo-emblem.png" alt="" />
          <div className="row" style={{ gap: 12, position: 'relative' }}>
            <div className="js-login-mark"><img src="assets/logo-mark.png" alt="" /></div>
            <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 700 }}>JiffyScore<span style={{ color: 'var(--gold)' }}> AI</span></span>
          </div>
          <div style={{ position: 'relative', maxWidth: 460 }}>
            <p className="eyebrow">AI-search visibility platform</p>
            <h1 className="display-2" style={{ fontSize: 'clamp(38px,4.6vw,68px)', margin: '16px 0 20px' }}>Get found, <em>and cited</em>.</h1>
            <p className="lead" style={{ fontSize: 17 }}>JiffyScore audits every page the way an answer engine reads it — then shows exactly why you are, or aren’t, the source it names. Glass-box, always.</p>
            <div className="row-wrap" style={{ marginTop: 24 }}>
              <Pill tone="green">Six-dimension scoring</Pill><Pill>Glass-box reasoning</Pill><Pill tone="amber">No lock-in exports</Pill>
            </div>
          </div>
          <div className="row js-login-trust" style={{ gap: 22, position: 'relative', color: 'var(--ink-soft)', fontSize: 13 }}>
            <span className="row" style={{ gap: 8 }}><Icon name="shieldCheck" size={15} style={{ color: 'var(--emerald)' }} />SOC 2 controls</span>
            <span className="row" style={{ gap: 8 }}><Icon name="users" size={15} style={{ color: 'var(--gold)' }} />Trusted by 34 teams</span>
          </div>
        </div>

        {/* form panel */}
        <div className="js-login-form">
          <div style={{ width: '100%', maxWidth: 380 }}>
            <div className="js-login-formmark">
              <div className="js-login-mark"><img src="assets/logo-mark.png" alt="" /></div>
              <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 700 }}>JiffyScore<span style={{ color: 'var(--gold)' }}> AI</span></span>
            </div>
            <p className="eyebrow">{bootstrapMode ? 'First admin' : 'Welcome back'}</p>
            <h2 style={{ fontFamily: 'var(--font-display)', fontSize: 32, fontWeight: 700, margin: '12px 0 6px' }}>{bootstrapMode ? 'Bootstrap admin' : 'Sign in'}</h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 14, margin: '0 0 28px' }}>{bootstrapMode ? 'Create the first platform admin when the backend has no users, or when a setup token permits bootstrap.' : 'Sign in with a backend user. The role presets only fill known demo emails.'}</p>

            {!bootstrapMode ? <>
              <div className="field"><label className="field-label">Enter as</label>
              <div className="seg" style={{ width: '100%' }}>
                {testUsers.map(([r, em, label]) => (
                  <button key={r} className={'seg-opt' + (role === r ? ' is-active' : '')} style={{ flex: 1 }} onClick={() => { setRole(r); setEmail(em); }}>{label}</button>
                ))}
              </div>
            </div>
            <div className="field"><label className="field-label">Email</label><input className="input" value={email} onChange={e => setEmail(e.target.value)} /></div>
            <div className="field"><label className="field-label">Password</label><input className="input" type="password" value={password} onChange={e => setPassword(e.target.value)} /></div>
            {error && <div className="js-gap sev-high" style={{ marginBottom: 14 }}><p style={{ margin: 0, fontSize: 12.5 }}>{error}</p></div>}
            <Btn lg onClick={submit} icon="logout" style={{ width: '100%', justifyContent: 'center', marginTop: 4 }}>{loading ? 'Signing in…' : 'Sign in'}</Btn>
            </> : <>
              <div className="field"><label className="field-label">Admin email</label><input className="input" value={bootstrap.email} onChange={e => setBootstrap(b => ({ ...b, email: e.target.value }))} /></div>
              <div className="field"><label className="field-label">Admin password</label><input className="input" type="password" value={bootstrap.password} onChange={e => setBootstrap(b => ({ ...b, password: e.target.value }))} /></div>
              <div className="field"><label className="field-label">Display name</label><input className="input" value={bootstrap.displayName} onChange={e => setBootstrap(b => ({ ...b, displayName: e.target.value }))} /></div>
              <div className="field"><label className="field-label">Organization</label><input className="input" value={bootstrap.organizationName} onChange={e => setBootstrap(b => ({ ...b, organizationName: e.target.value }))} /></div>
              <div className="field"><label className="field-label">Setup token <span className="js-tag">optional</span></label><input className="input" value={bootstrap.setupToken} onChange={e => setBootstrap(b => ({ ...b, setupToken: e.target.value }))} /></div>
              {error && <div className="js-gap sev-high" style={{ marginBottom: 14 }}><p style={{ margin: 0, fontSize: 12.5 }}>{error}</p></div>}
              <Btn lg onClick={submitBootstrap} icon="shieldCheck" style={{ width: '100%', justifyContent: 'center', marginTop: 4 }}>{loading ? 'Creating admin…' : 'Create platform admin'}</Btn>
            </>}
            <div className="row" style={{ justifyContent: 'space-between', marginTop: 16 }}>
              <span className="js-link-gold" onClick={() => { setError(''); setBootstrapMode(v => !v); }}>{bootstrapMode ? 'Back to sign in' : 'Bootstrap first admin'}</span>
              <span className="js-tag">{bootstrapMode ? '/api/v1/auth/bootstrap' : '/api/v1/auth/login'}</span>
            </div>
            <div className="js-gap sev-low" style={{ marginTop: 26 }}>
              <p style={{ margin: 0, fontSize: 12.5 }}><b style={{ color: 'var(--gold)' }}>Migration ·</b> navigation is gated by the authenticated backend role.</p>
            </div>
          </div>
        </div>
      </div>
    );
  }
  window.Login = Login;
})();