var Login = function (props) {
  var navigate = props.navigate;

  var _s1 = React.useState(''); var email = _s1[0], setEmail = _s1[1];
  var _s2 = React.useState(''); var password = _s2[0], setPassword = _s2[1];
  var _s3 = React.useState(''); var error = _s3[0], setError = _s3[1];
  var _s4 = React.useState(false); var submitting = _s4[0], setSubmitting = _s4[1];
  var _s5 = React.useState(false); var mfaRequired = _s5[0], setMfaRequired = _s5[1];
  var _s6 = React.useState(''); var mfaPendingToken = _s6[0], setMfaPendingToken = _s6[1];
  var _s7 = React.useState(''); var mfaCode = _s7[0], setMfaCode = _s7[1];

  var wrap = { maxWidth: '480px', margin: '0 auto', padding: '48px 28px 64px', minHeight: '40vh' };
  var mono = 'var(--font-mono)';
  var display = 'var(--font-display)';

  var inputStyle = {
    width: '100%', padding: '12px 0 10px', fontFamily: mono, fontSize: '14px',
    color: 'var(--text)', background: 'transparent',
    border: 'none', borderBottom: '1px solid var(--border)',
    outline: 'none', letterSpacing: '0.04em',
  };

  var labelStyle = {
    fontFamily: mono, fontSize: '12px', color: 'var(--amber)',
    letterSpacing: '0.08em', marginBottom: '4px', display: 'block',
  };

  var btnPrimary = {
    width: '100%', padding: '14px', marginTop: '24px',
    background: 'var(--amber)', color: 'var(--bg)', border: 'none',
    fontFamily: mono, fontSize: '13px', fontWeight: 700,
    letterSpacing: '0.12em', textTransform: 'uppercase',
    cursor: 'pointer', borderRadius: '2px',
    opacity: submitting ? 0.6 : 1,
  };

  var oauthBtn = {
    flex: 1, padding: '10px 16px', background: 'transparent',
    border: '1px solid var(--border)', color: 'var(--text)',
    fontFamily: mono, fontSize: '12px', fontWeight: 400,
    letterSpacing: '0.08em', textTransform: 'uppercase',
    textDecoration: 'none', textAlign: 'center',
    borderRadius: '2px', transition: 'border-color .2s, color .2s',
    display: 'inline-block',
  };

  var handleSubmit = function (e) {
    if (e) e.preventDefault();
    if (!email || !password) { setError('email and password required'); return; }
    setError(''); setSubmitting(true);
    fetch('/api/auth', {
      method: 'POST', credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'login', payload: { email: email, password: password }, turnstileToken: '' }),
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
      setSubmitting(false);
      if (data.error) { setError(data.error); return; }
      if (data.mfaRequired) {
        setMfaRequired(true);
        setMfaPendingToken(data.mfaToken || '');
        return;
      }
      navigate('home');
    })
    .catch(function () { setSubmitting(false); setError('connection failed'); });
  };

  var handleMfa = function (e) {
    if (e) e.preventDefault();
    if (!mfaCode || mfaCode.length < 6) { setError('enter 6-digit code'); return; }
    setError(''); setSubmitting(true);
    fetch('/api/auth', {
      method: 'POST', credentials: 'include',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ action: 'mfa_verify', payload: { code: mfaCode, token: mfaPendingToken } }),
    })
    .then(function (r) { return r.json(); })
    .then(function (data) {
      setSubmitting(false);
      if (data.error) { setError(data.error); return; }
      navigate('home');
    })
    .catch(function () { setSubmitting(false); setError('verification failed'); });
  };

  // MFA step
  if (mfaRequired) {
    return (
      <div style={wrap}>
        <div style={{ fontFamily: display, fontSize: '28px', color: 'var(--text)', marginBottom: '6px', letterSpacing: '0.02em' }}>
          $ mfa challenge
        </div>
        <div style={{ fontFamily: mono, fontSize: '13px', color: 'var(--text-muted)', marginBottom: '32px' }}>
          enter your 6-digit authenticator code
        </div>
        <form onSubmit={handleMfa}>
          <label style={labelStyle}>$ mfa code:</label>
          <input type="text" inputMode="numeric" maxLength="6" autoComplete="one-time-code"
            value={mfaCode} onChange={function (e) { setMfaCode(e.target.value.replace(/\D/g, '')); }}
            style={Object.assign({}, inputStyle, { textAlign: 'center', fontSize: '24px', letterSpacing: '0.3em' })}
            autoFocus />
          {error && (
            <div style={{ fontFamily: mono, fontSize: '12px', color: 'var(--error, #ff6b35)', marginTop: '12px' }}>
              [{'>'}] {error}
            </div>
          )}
          <button type="submit" disabled={submitting} style={btnPrimary}>
            {submitting ? '...' : 'VERIFY'}
          </button>
        </form>
        <div style={{ marginTop: '16px', fontFamily: mono, fontSize: '12px' }}>
          <span onClick={function () { setMfaRequired(false); setMfaCode(''); setError(''); }}
            style={{ color: 'var(--text-muted)', cursor: 'pointer', textDecoration: 'underline' }}>
            back to login
          </span>
        </div>
      </div>
    );
  }

  // Login form
  return (
    <div style={wrap}>
      <div style={{ fontFamily: display, fontSize: '28px', color: 'var(--text)', marginBottom: '6px', letterSpacing: '0.02em' }}>
        $ ssh itsbroken.ai
      </div>
      <div style={{ fontFamily: mono, fontSize: '13px', color: 'var(--text-muted)', marginBottom: '32px' }}>
        authenticate to continue
      </div>

      <form onSubmit={handleSubmit}>
        <div style={{ marginBottom: '20px' }}>
          <label style={labelStyle}>$ email:</label>
          <input type="email" value={email} autoComplete="email"
            onChange={function (e) { setEmail(e.target.value); }}
            style={inputStyle} />
        </div>
        <div style={{ marginBottom: '8px' }}>
          <label style={labelStyle}>$ password:</label>
          <input type="password" value={password} autoComplete="current-password"
            onChange={function (e) { setPassword(e.target.value); }}
            style={inputStyle} />
        </div>

        <div id="turnstile-login" style={{ marginTop: '16px' }}></div>

        {error && (
          <div style={{ fontFamily: mono, fontSize: '12px', color: 'var(--error, #ff6b35)', marginTop: '12px' }}>
            [{'>'}] {error}
          </div>
        )}

        <button type="submit" disabled={submitting} style={btnPrimary}>
          {submitting ? '...' : 'AUTHENTICATE'}
        </button>
      </form>

      <div style={{ display: 'flex', alignItems: 'center', gap: '12px', margin: '28px 0', color: 'var(--text-muted)', fontFamily: mono, fontSize: '12px' }}>
        <div style={{ flex: 1, height: '1px', background: 'var(--border)' }}></div>
        <span>or continue with</span>
        <div style={{ flex: 1, height: '1px', background: 'var(--border)' }}></div>
      </div>

      <div style={{ display: 'flex', gap: '10px' }}>
        <a href="/auth/oauth/discord" style={oauthBtn}>Discord</a>
        <a href="/auth/oauth/github" style={oauthBtn}>GitHub</a>
        <a href="/auth/oauth/google" style={oauthBtn}>Google</a>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '28px', fontFamily: mono, fontSize: '12px' }}>
        <span onClick={function () { navigate('register'); }}
          style={{ color: 'var(--amber-dim)', cursor: 'pointer', transition: 'color .2s' }}
          onMouseEnter={function (e) { e.target.style.color = 'var(--amber)'; }}
          onMouseLeave={function (e) { e.target.style.color = 'var(--amber-dim)'; }}>
          No account?
        </span>
        <span style={{ color: 'var(--text-muted)', cursor: 'pointer', transition: 'color .2s' }}
          onMouseEnter={function (e) { e.target.style.color = 'var(--amber)'; }}
          onMouseLeave={function (e) { e.target.style.color = 'var(--text-muted)'; }}>
          Forgot password?
        </span>
      </div>
    </div>
  );
};

window.Login = Login;