// AuthScreen — magic-link sign-in.
// Calm, single-input. No passwords. The link arrives in email and lands
// the user back on app.html, where supabase-js picks up the session.

function AuthScreen({ onBack, message }) {
  const [email, setEmail] = React.useState('');
  const [status, setStatus] = React.useState('idle');   // idle | sending | sent | error
  const [error, setError] = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setStatus('sending');
    setError(null);
    try {
      await window.api.signInWithEmail(email.trim());
      setStatus('sent');
    } catch (err) {
      setError(err.message || 'Couldn\'t send the link.');
      setStatus('error');
    }
  };

  return (
    <>
      <AppHeader title="" onBack={onBack}/>
      <div style={{ padding: '40px 24px 24px' }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 24 }}>
          {eightBall(56)}
        </div>

        <Eyebrow style={{ textAlign: 'center', marginBottom: 12 }}>Sign in</Eyebrow>
        <h1 style={{
          margin: '0 auto 8px', textAlign: 'center', maxWidth: 320,
          fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 400,
          lineHeight: 1.2, color: 'var(--fg)',
        }}>
          We'll send you a one-tap link.
        </h1>
        <p style={{
          margin: '0 auto 28px', textAlign: 'center', maxWidth: 320,
          fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 15,
          color: 'var(--fg-muted)', lineHeight: 1.5,
        }}>
          {message || 'No password to remember. Open the email, tap the link, and you\'re back here.'}
        </p>

        {status === 'sent' ? (
          <div style={{
            padding: 18, borderRadius: 'var(--r-md)', border: '1px solid var(--line)',
            background: 'var(--bg-elevated)', textAlign: 'center',
          }}>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 16, color: 'var(--fg)', marginBottom: 6 }}>
              Check your inbox.
            </div>
            <div style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 13, color: 'var(--fg-muted)' }}>
              We sent a sign-in link to <strong style={{ fontStyle: 'normal' }}>{email}</strong>.
            </div>
          </div>
        ) : (
          <form onSubmit={submit}>
            <input
              type="email" required autoFocus inputMode="email"
              placeholder="you@example.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              style={{
                width: '100%', boxSizing: 'border-box', padding: '14px 16px',
                background: 'var(--bg-sunken)', border: '1px solid var(--line)',
                borderRadius: 'var(--r-sm)', fontFamily: 'var(--font-body)',
                fontSize: 16, color: 'var(--fg)', outline: 'none', marginBottom: 14,
              }}
            />
            <Button
              variant="primary" full
              disabled={status === 'sending' || !email}
              iconRight="arrowRight"
              onClick={submit}
            >
              {status === 'sending' ? 'Sending…' : 'Send the link'}
            </Button>
            {error && (
              <div style={{ marginTop: 14, fontFamily: 'var(--font-body)', fontSize: 12, color: 'var(--accent)', textAlign: 'center' }}>
                {error}
              </div>
            )}
            {!window.api?.hasBackend && (
              <div style={{ marginTop: 14, fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 12, color: 'var(--fg-faint)', textAlign: 'center' }}>
                — backend not configured. Fill in <code>config.js</code> first.
              </div>
            )}
          </form>
        )}
      </div>
    </>
  );
}

window.AuthScreen = AuthScreen;