// Real login page. Variant A (centered card) wired with the NJ.gov header.
// Single email field handles both sign in and account creation — the magic link
// works for new and returning users.

const { useState: useLoginPageState } = React;

function LoginPage() {
  const t = window.tokens;
  const [email, setEmail] = useLoginPageState('');
  const [phase, setPhase] = useLoginPageState('idle'); // idle | sent
  const [error, setError] = useLoginPageState('');

  // Address comes from the home page handoff (?address=...)
  const params = new URLSearchParams(window.location.search);
  const address = params.get('address') || '';

  const submit = () => {
    const v = email.trim();
    if (!v) { setError("Enter your email so we can send the sign in link."); return; }
    if (!/^\S+@\S+\.\S+$/.test(v)) { setError("That doesn't look like a valid email address."); return; }
    setError(''); setPhase('sent');
  };

  return (
    <div style={{ minHeight: '100vh', background: t.color.surfaceLo, display: 'flex', flexDirection: 'column' }}>
      <PortalHeader />

      <div style={{
        flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: '64px 24px',
      }}>
        <div style={{ width: '100%', maxWidth: 460 }}>
          <div style={{
            width: '100%', background: t.color.bg,
            border: `1px solid ${t.color.hair}`, borderRadius: t.radius.xl,
            padding: 36, boxShadow: t.shadow.raised,
          }}>
            {phase === 'idle' ? (
              <>
                <div style={{ fontSize: 28, fontWeight: 500, letterSpacing: -0.6, color: t.color.text, lineHeight: 1.15, marginBottom: 12 }}>
                  Sign in or create an account
                </div>
                <div style={{ fontSize: 15, color: t.color.body, lineHeight: 1.55, marginBottom: 24 }}>
                  We'll email you a sign in link. New here? We'll set up your account at the same time. Your email is used for your application receipt and any followups from Montgomery.
                </div>

                <EmailRow
                  value={email}
                  onChange={(v) => { setEmail(v); if (error) setError(''); }}
                  onSubmit={submit}
                  autoFocus
                  error={error}
                />

                <div style={{ marginTop: 20, fontSize: 12, color: t.color.muted, lineHeight: 1.55 }}>
                  By continuing, you agree to GovPilot's <a href="#" style={{ color: t.color.body, textDecoration: 'underline' }}>terms</a> and <a href="#" style={{ color: t.color.body, textDecoration: 'underline' }}>privacy notice</a>.
                </div>
              </>
            ) : (
              <CheckInboxState
                email={email}
                onAdvance={() => {
                  const qs = new URLSearchParams();
                  qs.set('email', email);
                  qs.set('splash', '1');
                  if (address) qs.set('address', address);
                  window.location.href = 'Resident Portal - Apply.html?' + qs.toString();
                }}
              />
            )}
          </div>

          {/* Recognition note */}
          <div style={{
            marginTop: 20, padding: '14px 18px',
            background: t.color.paper, border: `1px solid ${t.color.hair}`,
            borderRadius: t.radius.lg,
            fontSize: 13, color: t.color.body, lineHeight: 1.5,
            display: 'flex', alignItems: 'flex-start', gap: 10,
          }}>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke={t.color.muted} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0, marginTop: 2 }}>
              <circle cx="8" cy="8" r="6.5" />
              <path d="M8 5.5v3M8 11h0" />
            </svg>
            <div>
              <div style={{ color: t.color.text, fontWeight: 500, marginBottom: 2 }}>One account, every NJ service</div>
              <div style={{ color: t.color.muted }}>
                Your NJ.gov account works across permits, taxes, voter records, and any other service in the portal, including your municipality's services.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<LoginPage />);