const SignIn = ({ onSignIn }) => {
  // step: 'credentials' → 'mfa' → reload
  const [step,     setStep]     = React.useState('credentials');
  const [email,    setEmail]    = React.useState('');
  const [password, setPassword] = React.useState('');
  const [mfaToken, setMfaToken] = React.useState(null);
  const [mfaCode,  setMfaCode]  = React.useState('');
  const [methods,  setMethods]  = React.useState([]);
  const [busy,     setBusy]     = React.useState(false);
  const [error,    setError]    = React.useState(null);
  const [info,     setInfo]     = React.useState(null);

  async function postJSON(path, body) {
    const r = await fetch(window.CHVault.apiRoot + path, {
      method: 'POST',
      credentials: 'include',
      headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
      body: JSON.stringify(body),
    });
    let j = {};
    try { j = await r.json(); } catch {}
    if (!r.ok) {
      const msg = (j && (j.detail?.message || j.detail || j.message)) || `HTTP ${r.status}`;
      const err = new Error(msg); err.status = r.status; err.payload = j;
      throw err;
    }
    return j;
  }

  async function submitCredentials(e) {
    e.preventDefault();
    setBusy(true); setError(null); setInfo(null);
    try {
      const j = await postJSON('/api/v1/auth/login', { email, password });
      if (j.requires_mfa) {
        setMfaToken(j.mfa_session_token);
        setMethods(j.methods_available || (j.mfa_type ? [j.mfa_type] : ['totp']));
        setStep('mfa');
        setBusy(false);
        return;
      }
      // No MFA — cookie is set, reload into the dashboard.
      window.location.reload();
    } catch (e) {
      setError(e.message || 'Sign-in failed');
      setBusy(false);
    }
  }

  async function submitMfa(e) {
    e.preventDefault();
    setBusy(true); setError(null);
    try {
      await postJSON('/api/v1/auth/mfa-verify', {
        mfa_session_token: mfaToken,
        totp_code: mfaCode.replace(/\D/g, '').slice(0, 6),
      });
      window.location.reload();
    } catch (e) {
      setError(e.message || 'MFA verification failed');
      setBusy(false);
    }
  }

  async function sendEmailCode() {
    setInfo(null); setError(null); setBusy(true);
    try {
      await postJSON('/api/v1/auth/mfa-email/challenge', { mfa_session_token: mfaToken });
      setInfo('A 6-digit code was emailed to you. Enter it below.');
    } catch (e) { setError(e.message); }
    setBusy(false);
  }

  async function sendSmsCode() {
    setInfo(null); setError(null); setBusy(true);
    try {
      await postJSON('/api/v1/auth/mfa-sms/challenge', { mfa_session_token: mfaToken });
      setInfo('A 6-digit code was texted to you. Enter it below.');
    } catch (e) { setError(e.message); }
    setBusy(false);
  }

  const wrap = { minHeight: '100vh', display: 'grid', gridTemplateColumns: '1fr 1fr', background: 'var(--bg-bone)' };
  const left = { padding: '64px 56px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', background: 'var(--bg-parchment)', borderRight: '1px solid var(--border-1)' };
  const right = { display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 64 };
  const eyebrow = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--accent-clinical)' };
  const h1 = { fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.02em', margin: '14px 0 12px', color: 'var(--fg-1)' };
  const sub = { fontSize: 16, color: 'var(--fg-2)', maxWidth: 420, lineHeight: 1.55 };
  const eq = { marginTop: 32, fontFamily: 'var(--font-equation)', fontStyle: 'italic', color: 'var(--fg-1)', fontSize: 18, padding: 18, background: 'var(--bg-bone)', border: '1px solid var(--border-1)', borderRadius: 12 };
  const meta = { fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)' };
  const card = { width: '100%', maxWidth: 420, padding: 32, background: 'var(--bg-parchment)', border: '1px solid var(--border-1)', borderRadius: 16, boxShadow: 'var(--elev-2)' };
  const field = { display: 'flex', flexDirection: 'column', gap: 6, marginBottom: 16 };
  const label = { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--fg-3)' };
  const input = { background: 'var(--bg-bone)', border: '1px solid var(--border-1)', borderRadius: 8, padding: '12px 14px', color: 'var(--fg-1)', fontFamily: 'var(--font-sans)', fontSize: 14, outline: 'none' };
  const cta = (disabled) => ({ width: '100%', padding: '14px', borderRadius: 10, background: disabled ? 'var(--border-2)' : 'var(--accent-clinical)', color: 'white', border: 'none', fontWeight: 600, fontSize: 14, cursor: disabled ? 'wait' : 'pointer' });

  return (
    <div style={wrap} data-screen-label="Sign In">
      <div style={left}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <img src="../../assets/logo-mark.svg?v=20260520-a3b" style={{ width: 40, height: 40 }} alt=""/>
          <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: 'var(--fg-1)' }}>Conceptual Health<sup style={{ fontSize: 10, color: 'var(--accent-clinical)' }}>®</sup></div>
        </div>
        <div>
          <div style={eyebrow}>Guardian Orb™</div>
          <h1 style={h1}>Your CH score, <span style={{ fontFamily: 'var(--font-equation)', fontStyle: 'italic', color: 'var(--accent-halo)' }}>alive.</span></h1>
          <p style={sub}>Eight axes. One equation. Track your multidimensional wellness in real time. Earn HCR (HEALTHCOIN™) for every healthy behavior.</p>
          <div style={eq}>CH = (S × Sp)<sup style={{ fontSize: '0.6em' }}>C</sup> × (T + E)<sup style={{ fontSize: '0.6em' }}>p</sup> × (ER × RS)<sup style={{ fontSize: '0.6em' }}>C/3</sup></div>
        </div>
        <div style={meta}>HIPAA · AES-256-GCM · Patent Pending 63/921,717</div>
      </div>

      <div style={right}>
        {step === 'credentials' ? (
          <form style={card} onSubmit={submitCredentials} autoComplete="on">
            <div style={eyebrow}>Sign In</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24, margin: '8px 0 24px', color: 'var(--fg-1)' }}>Welcome back.</h2>

            {error && <div style={{ padding: 12, background: 'rgba(229,72,77,0.08)', border: '1px solid rgba(229,72,77,0.3)', borderRadius: 8, marginBottom: 16, color: 'var(--accent-coral)', fontSize: 13 }}>{error}</div>}

            <div style={field}>
              <label style={label}>Email</label>
              <input style={input} type="email" name="email" autoComplete="email" autoFocus required value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" />
            </div>
            <div style={field}>
              <label style={label}>Password</label>
              <input style={input} type="password" name="current-password" autoComplete="current-password" required value={password} onChange={(e) => setPassword(e.target.value)} placeholder="••••••••" />
            </div>
            <button style={cta(busy)} disabled={busy}>{busy ? 'Signing in…' : 'Launch Guardian Orb →'}</button>

            <div style={{ marginTop: 18, fontSize: 12, color: 'var(--fg-3)', textAlign: 'center', lineHeight: 1.5 }}>
              <a href="../recovery/" style={{ color: 'var(--accent-clinical)', textDecoration: 'none' }}>Forgot password →</a>
              {' · '}
              <a href="../signup/" style={{ color: 'var(--accent-clinical)', textDecoration: 'none', fontWeight: 500 }}>Create account →</a>
              <div style={{ marginTop: 6 }}>By signing in you agree to the Conceptual Health Standard.</div>
            </div>
          </form>
        ) : (
          <form style={card} onSubmit={submitMfa}>
            <div style={eyebrow}>Two-Factor Verification</div>
            <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 24, margin: '8px 0 12px', color: 'var(--fg-1)' }}>Enter your 6-digit code.</h2>
            <div style={{ fontSize: 13, color: 'var(--fg-2)', marginBottom: 18, lineHeight: 1.5 }}>
              Open your Guardian Orb Authenticator or third-party authenticator (Google Authenticator, 1Password, etc.) and enter the current code.
            </div>

            {error && <div style={{ padding: 12, background: 'rgba(229,72,77,0.08)', border: '1px solid rgba(229,72,77,0.3)', borderRadius: 8, marginBottom: 16, color: 'var(--accent-coral)', fontSize: 13 }}>{error}</div>}
            {info  && <div style={{ padding: 12, background: 'rgba(43,159,107,0.08)', border: '1px solid rgba(43,159,107,0.3)', borderRadius: 8, marginBottom: 16, color: 'var(--accent-clinical)', fontSize: 13 }}>{info}</div>}

            <div style={field}>
              <label style={label}>Verification code</label>
              <input
                style={{ ...input, fontFamily: 'var(--font-mono)', fontSize: 22, textAlign: 'center', letterSpacing: '0.4em' }}
                inputMode="numeric"
                pattern="[0-9]{6}"
                maxLength={6}
                autoFocus
                required
                value={mfaCode}
                onChange={(e) => setMfaCode(e.target.value.replace(/\D/g, '').slice(0,6))}
                placeholder="••••••"
              />
            </div>
            <button style={cta(busy || mfaCode.length !== 6)} disabled={busy || mfaCode.length !== 6}>{busy ? 'Verifying…' : 'Verify and continue →'}</button>

            <div style={{ marginTop: 18, fontSize: 12, color: 'var(--fg-3)', textAlign: 'center', lineHeight: 1.5 }}>
              {methods.includes('email') && <a onClick={sendEmailCode} style={{ color: 'var(--accent-clinical)', textDecoration: 'none', cursor: 'pointer' }}>Email me a code</a>}
              {methods.includes('email') && methods.includes('sms') && ' · '}
              {methods.includes('sms')   && <a onClick={sendSmsCode}   style={{ color: 'var(--accent-clinical)', textDecoration: 'none', cursor: 'pointer' }}>Text me a code</a>}
              <div style={{ marginTop: 10 }}>
                <a onClick={() => { setStep('credentials'); setMfaCode(''); setError(null); }} style={{ color: 'var(--fg-3)', textDecoration: 'underline', cursor: 'pointer' }}>← Use a different account</a>
              </div>
            </div>
          </form>
        )}
      </div>
    </div>
  );
};
window.SignIn = SignIn;