// Login page — two-panel layout (dark left / light right)

const PageLogin = ({ onLoggedIn, onBack, onForgot }) => {
  const [mode, setMode] = React.useState('login'); // 'login' | 'forgot'
  const [email, setEmail] = React.useState('');
  const [err, setErr] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    if (!email.trim() || !email.includes('@')) {
      setErr('Enter a valid email.');
      return;
    }
    setLoading(true);
    try {
      const res = await fetch('/api/auth/magic-link', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ email, redirectPath: '/dashboard' }),
      });
      if (!res.ok) throw new Error('Unable to send sign-in link.');
      setLoading(false);
      setMode('sent');
    } catch (error) {
      setLoading(false);
      setErr(error instanceof Error ? error.message : 'Unable to send sign-in link.');
    }
  };

  return (
    <div className="login-shell">
      {/* DARK PANEL */}
      <div className="login-dark">
        <div className="login-dark-inner">
          <div className="login-brand" onClick={onBack}>AmazingXO</div>
          <div className="login-quote">
            <p>"I sleep through the night for the first time in years. My wife noticed before I did."</p>
            <span>Marcus · 51 · member since 2025</span>
          </div>
          <div className="login-trust mono">
            Twice the potency &nbsp;·&nbsp; Cancel any time &nbsp;·&nbsp; Member dashboard
          </div>
        </div>
      </div>

      {/* LIGHT PANEL */}
      <div className="login-light">
        <div className="login-light-top">
          <a className="login-back" href="/" onClick={(e) => { e.preventDefault(); onBack(); }}>← Back</a>
          <div className="mono login-microbrand">AmazingXO</div>
        </div>

        <div className="login-card">
          {mode === 'sent' ? (
            <>
              <div className="login-eyebrow mono">— CHECK YOUR EMAIL</div>
              <h1 className="serif login-h1">A reset link is on <em>its way.</em></h1>
              <p className="login-sub">If <strong>{email}</strong> is on file, you'll have a password reset link in the next minute or two.</p>
              <button className="btn btn-primary btn-lg login-cta" onClick={() => setMode('login')}>Back to login</button>
            </>
          ) : mode === 'forgot' ? (
            <>
              <div className="login-eyebrow mono">— RESET PASSWORD</div>
              <h1 className="serif login-h1">Sign in by <em>email.</em></h1>
              <p className="login-sub">Tell us your email and we'll send a secure sign-in link.</p>

              <form onSubmit={submit} className="login-form">
                <label className="login-field">
                  <span className="mono">EMAIL</span>
                  <input type="email" autoFocus value={email} onChange={e => setEmail(e.target.value)} placeholder="you@domain.com" />
                </label>

                {err && <div className="login-err mono">{err}</div>}

                <button type="submit" className="btn btn-primary btn-lg login-cta" disabled={loading}>
                  {loading ? 'Sending…' : 'Send sign-in link'}
                </button>
              </form>

              <div className="login-foot">
                <a href="/login" onClick={(e) => { e.preventDefault(); setMode('login'); }}>Back to login</a>
              </div>
            </>
          ) : (
            <>
              <div className="login-eyebrow mono">— MEMBER LOGIN</div>
              <h1 className="serif login-h1">Welcome <em>back.</em></h1>
              <p className="login-sub">Pick up where you left off. Your dashboard, messages, next shipment.</p>

              <form onSubmit={submit} className="login-form">
                <label className="login-field">
                  <span className="mono">EMAIL</span>
                  <input type="email" autoFocus value={email} onChange={e => setEmail(e.target.value)} placeholder="you@domain.com" />
                </label>

                {err && <div className="login-err mono">{err}</div>}

                <button type="submit" className="btn btn-primary btn-lg login-cta" disabled={loading}>
                  {loading ? 'Sending…' : 'Send sign-in link'}
                </button>
              </form>

              <div className="login-foot">
                <span>Not a member yet?</span>
                <a href="/" onClick={(e) => { e.preventDefault(); onBack(); }}>Take the assessment →</a>
              </div>
            </>
          )}
        </div>

        <div className="login-legal mono">
          By signing in you agree to our terms and privacy policy. <br />
          Trouble? <a href="mailto:hello@amazingxo.com">Email hello@amazingxo.com</a>
        </div>
      </div>
    </div>
  );
};

window.PageLogin = PageLogin;