/* Login & auth flows — sign-in, 2FA, first-login password, 2FA setup, forgot, lockout.
   Spec: monolith/tenant-login-and-2fa.md */
const { useState: useStateLogin, useRef: useRefLogin, useEffect: useEffectLogin } = React;

function Login({ onSuccess }) {
  const [step, setStep] = useStateLogin('credentials'); // credentials|otp|firstpwd|setup2fa|forgot|forgotSent|locked
  const [email, setEmail] = useStateLogin('maria@monolit.app');
  const [pwd, setPwd] = useStateLogin('············');
  const [err, setErr] = useStateLogin('');
  const [attempts, setAttempts] = useStateLogin(0);

  function submitCreds(e) {
    e.preventDefault();
    if (!email || !pwd) { setErr('Email and password are required.'); return; }
    // demo: typing "wrong" simulates failure & lockout escalation
    if (pwd.toLowerCase().includes('wrong')) {
      const n = attempts + 1; setAttempts(n);
      if (n >= 10) { setStep('locked'); return; }
      setErr(n >= 5 ? 'Too many attempts — temporarily rate-limited. Admin notified.' : 'Incorrect email or password.');
      return;
    }
    setErr(''); setAttempts(0); setStep('otp');
  }

  return (
    <div className="mn-login">
      <div className="mn-login-card">
        <div className="mn-login-h"><Logo /></div>

        {step === 'credentials' ? (
          <React.Fragment>
            <p className="mn-login-sub">Sign in to your tenant workspace.</p>
            <form className="mn-login-form" onSubmit={submitCreds}>
              <Field label="Email" required><Input fullWidth icon="mail" value={email} onChange={(v) => { setEmail(v); setErr(''); }} placeholder="email@company.com" autoFocus /></Field>
              <Field label="Password" required error={err || undefined}><Input fullWidth icon="lock" type="password" value={pwd} onChange={(v) => { setPwd(v); setErr(''); }} placeholder="Password" /></Field>
              <div className="mn-row" style={{ justifyContent: 'space-between' }}>
                <label className="mn-row" style={{ gap: 6, color: 'var(--text-2)', font: 'var(--font-weight-medium) 12px/16px var(--font-sans)' }}>
                  <input type="checkbox" className="mn-checkbox" defaultChecked /> Remember me
                </label>
                <span className="mn-login-link" style={{ fontSize: 12 }} onClick={() => setStep('forgot')}>Forgot password?</span>
              </div>
              <Button fullWidth size="lg" variant="primary" type="submit">Continue</Button>
            </form>
            <div className="mn-login-foot">Tenant: <span className="mn-mono" style={{ color: 'var(--text-2)' }}>monolit.app/acme</span></div>
            <AuthStatePreview step={step} setStep={setStep} />
          </React.Fragment>
        ) : step === 'otp' ? <Otp onBack={() => setStep('credentials')} onSuccess={onSuccess} onSetup={() => setStep('setup2fa')} />
          : step === 'firstpwd' ? <FirstPassword onDone={() => setStep('setup2fa')} />
          : step === 'setup2fa' ? <Setup2FA onDone={onSuccess} />
          : step === 'forgot' ? <Forgot onBack={() => setStep('credentials')} onSent={() => setStep('forgotSent')} />
          : step === 'forgotSent' ? <ForgotSent onBack={() => setStep('credentials')} />
          : <Locked onBack={() => { setStep('credentials'); setAttempts(0); setErr(''); }} />}
      </div>
    </div>
  );
}

function AuthStatePreview({ step, setStep }) {
  const states = [['credentials', 'Sign in'], ['firstpwd', 'First login'], ['setup2fa', '2FA setup'], ['forgot', 'Forgot'], ['locked', 'Locked']];
  return (
    <div style={{ marginTop: 18, paddingTop: 12, borderTop: '1px dashed var(--border-1)' }}>
      <div className="mn-eyebrow" style={{ marginBottom: 6 }}>Preview auth states</div>
      <div className="mn-row" style={{ flexWrap: 'wrap', gap: 6 }}>
        {states.map(([s, l]) => <button key={s} type="button" className={'mn-chip mn-chip--tag mn-chip--btn' + (step === s ? ' mn-chip--st-qual' : '')} onClick={() => setStep(s)}>{l}</button>)}
      </div>
      <div style={{ font: 'var(--font-weight-medium) 11px/15px var(--font-sans)', color: 'var(--text-3)', marginTop: 6 }}>Tip: type a password containing “wrong” to trigger rate-limit → lockout.</div>
    </div>
  );
}

function Otp({ onBack, onSuccess, onSetup }) {
  const [digits, setDigits] = useStateLogin(['', '', '', '', '', '']);
  const refs = [useRefLogin(), useRefLogin(), useRefLogin(), useRefLogin(), useRefLogin(), useRefLogin()];
  useEffectLogin(() => { refs[0].current && refs[0].current.focus(); }, []);
  function handleChange(i, v) {
    if (!/^\d?$/.test(v)) return;
    const next = digits.slice(); next[i] = v; setDigits(next);
    if (v && i < 5) refs[i + 1].current.focus();
    if (next.every(Boolean)) setTimeout(() => onSuccess(), 250);
  }
  function handleKey(i, e) { if (e.key === 'Backspace' && !digits[i] && i > 0) refs[i - 1].current.focus(); }
  return (
    <React.Fragment>
      <button type="button" className="mn-drawer-back" onClick={onBack} style={{ marginBottom: 12 }}><Icon name="arrow-left" size="xs" /> Back</button>
      <h3 className="title-3" style={{ margin: '0 0 4px' }}>Two-factor code</h3>
      <p className="mn-login-sub">Enter the 6-digit code from your authenticator app.</p>
      <div className="mn-2fa-grid">
        {digits.map((d, i) => <input key={i} ref={refs[i]} inputMode="numeric" maxLength={1} value={d} onChange={(e) => handleChange(i, e.target.value)} onKeyDown={(e) => handleKey(i, e)} />)}
      </div>
      <div className="mn-login-foot" style={{ marginTop: 14 }}>Didn’t get it? <span className="mn-login-link">Resend code</span> · <span className="mn-login-link" onClick={onSetup}>Set up 2FA</span></div>
    </React.Fragment>
  );
}

function FirstPassword({ onDone }) {
  const [p1, setP1] = useStateLogin('');
  const [p2, setP2] = useStateLogin('');
  const checks = [
    { ok: p1.length >= 12, t: 'At least 12 characters' },
    { ok: /[A-Z]/.test(p1) && /[a-z]/.test(p1), t: 'Upper & lower case' },
    { ok: /[0-9]/.test(p1), t: 'A number' },
    { ok: /[^A-Za-z0-9]/.test(p1), t: 'A special character' },
    { ok: p1 && p1 === p2, t: 'Passwords match' },
  ];
  const valid = checks.every(c => c.ok);
  return (
    <React.Fragment>
      <h3 className="title-3" style={{ margin: '0 0 4px' }}>Set a new password</h3>
      <p className="mn-login-sub">First login — you must change your temporary password.</p>
      <form className="mn-login-form" onSubmit={(e) => { e.preventDefault(); if (valid) onDone(); }}>
        <Field label="New password" required><Input fullWidth icon="lock" type="password" value={p1} onChange={setP1} placeholder="New password" autoFocus /></Field>
        <Field label="Confirm password" required><Input fullWidth icon="lock" type="password" value={p2} onChange={setP2} placeholder="Repeat password" /></Field>
        <div className="mn-stack" style={{ gap: 4, margin: '4px 0 8px' }}>
          {checks.map((c, i) => (
            <div key={i} className="mn-row" style={{ gap: 6, font: 'var(--font-weight-medium) 12px/16px var(--font-sans)', color: c.ok ? 'var(--success-main)' : 'var(--text-3)' }}>
              <Icon name={c.ok ? 'check-circle' : 'circle'} size="xs" stroke="2" />{c.t}
            </div>
          ))}
        </div>
        <Button fullWidth size="lg" variant="primary" type="submit" disabled={!valid}>Set password & continue</Button>
      </form>
    </React.Fragment>
  );
}

function Setup2FA({ onDone }) {
  const [phase, setPhase] = useStateLogin('scan'); // scan|backup
  const [code, setCode] = useStateLogin('');
  const backup = ['7F2A-9C11', 'B3E1-4D88', '0A9F-77C2', 'E51C-2B40', '9D03-6A1E', 'C7B8-1F52', '44E0-93AA', 'F18D-5C09'];
  return (
    <React.Fragment>
      <h3 className="title-3" style={{ margin: '0 0 4px' }}>Set up two-factor</h3>
      {phase === 'scan' ? (
        <React.Fragment>
          <p className="mn-login-sub">Scan with Google Authenticator, Authy or any TOTP app.</p>
          <div className="mn-row" style={{ gap: 16, alignItems: 'flex-start' }}>
            <div className="mn-qr" aria-label="QR code" />
            <div style={{ flex: 1 }}>
              <div className="mn-eyebrow">Or enter this key</div>
              <div className="mn-mono" style={{ fontSize: 13, color: 'var(--text-1)', wordBreak: 'break-all', margin: '4px 0 12px' }}>JBSW Y3DP EHPK 3PXP</div>
              <Field label="6-digit code"><Input fullWidth value={code} onChange={(v) => /^\d{0,6}$/.test(v) && setCode(v)} placeholder="123456" /></Field>
            </div>
          </div>
          <Button fullWidth size="lg" variant="primary" disabled={code.length !== 6} onClick={() => setPhase('backup')} style={{ marginTop: 12 }}>Verify</Button>
        </React.Fragment>
      ) : (
        <React.Fragment>
          <p className="mn-login-sub">Save these backup codes somewhere safe. Each works once.</p>
          <div className="mn-backup-grid">{backup.map(b => <span key={b} className="mn-mono">{b}</span>)}</div>
          <div className="mn-row" style={{ gap: 8, margin: '12px 0' }}>
            <Button variant="ghost" size="sm" icon="copy">Copy</Button>
            <Button variant="ghost" size="sm" icon="download">Download</Button>
          </div>
          <Button fullWidth size="lg" variant="primary" onClick={onDone}>I’ve saved my codes — finish</Button>
        </React.Fragment>
      )}
    </React.Fragment>
  );
}

function Forgot({ onBack, onSent }) {
  const [email, setEmail] = useStateLogin('');
  return (
    <React.Fragment>
      <button type="button" className="mn-drawer-back" onClick={onBack} style={{ marginBottom: 12 }}><Icon name="arrow-left" size="xs" /> Back</button>
      <h3 className="title-3" style={{ margin: '0 0 4px' }}>Reset password</h3>
      <p className="mn-login-sub">Enter your email and we’ll send a one-time reset link.</p>
      <form className="mn-login-form" onSubmit={(e) => { e.preventDefault(); onSent(); }}>
        <Field label="Email" required><Input fullWidth icon="mail" value={email} onChange={setEmail} placeholder="email@company.com" autoFocus /></Field>
        <Button fullWidth size="lg" variant="primary" type="submit">Send reset link</Button>
      </form>
    </React.Fragment>
  );
}

function ForgotSent({ onBack }) {
  return (
    <div style={{ textAlign: 'center', padding: '12px 0' }}>
      <span className="mn-modal-icon mn-modal-icon--success" style={{ margin: '0 auto 12px', width: 44, height: 44 }}><Icon name="mail-check" size="md" /></span>
      <h3 className="title-3" style={{ margin: '0 0 4px' }}>Check your inbox</h3>
      <p className="mn-login-sub" style={{ marginBottom: 16 }}>If an account exists, a one-time reset link is on its way. It expires shortly and signs out all sessions when used.</p>
      <Button fullWidth size="lg" variant="ghost" onClick={onBack}>Back to sign in</Button>
    </div>
  );
}

function Locked({ onBack }) {
  return (
    <div style={{ textAlign: 'center', padding: '12px 0' }}>
      <span className="mn-modal-icon mn-modal-icon--error" style={{ margin: '0 auto 12px', width: 44, height: 44 }}><Icon name="lock" size="md" /></span>
      <h3 className="title-3" style={{ margin: '0 0 4px' }}>Account locked</h3>
      <p className="mn-login-sub" style={{ marginBottom: 16 }}>Too many failed attempts (10). Your admin has been notified and can unlock the account and issue a temporary password.</p>
      <Button fullWidth size="lg" variant="ghost" onClick={onBack}>Back to sign in</Button>
    </div>
  );
}

Object.assign(window, { Login });