// auth.jsx — Pantalla de inicio de sesión para mamás.
// Magic link vía Supabase, con fallback local si no hay DB.

function ActAuthScreen({ onSession }) {
  const [email, setEmail] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [msg, setMsg] = React.useState('');
  const [err, setErr] = React.useState('');

  async function handleSubmit(e) {
    e.preventDefault();
    setErr(''); setMsg(''); setBusy(true);
    try {
      const res = await window.actSignInMagicLink(email.trim());
      if (res.local) {
        setMsg('Sesión local creada (modo prueba). Continúa.');
        setTimeout(() => onSession && onSession(), 600);
      } else {
        setMsg('Te mandamos un correo, mamá. Revisa tu bandeja.');
      }
    } catch (e) {
      setErr(e.message || 'No pudimos enviar el correo.');
    } finally {
      setBusy(false);
    }
  }

  return (
    <div className="act-auth">
      <div className="act-auth-card">
        <div className="act-logo">🦊</div>
        <h1>Aprendiendo con Thiago</h1>
        <p className="act-tag">Para mamás · cuenta gratis</p>
        <form onSubmit={handleSubmit}>
          <input
            type="email" required placeholder="tu correo"
            value={email} onChange={e => setEmail(e.target.value)}
            autoComplete="email"
          />
          <button type="submit" disabled={busy || !email}>
            {busy ? 'Enviando…' : 'Entrar'}
          </button>
        </form>
        {msg && <div className="act-ok">{msg}</div>}
        {err && <div className="act-err">{err}</div>}
        <div className="act-fineprint">
          Sin anuncios. Sin compras. Pensado para chiquitos.
        </div>
      </div>
    </div>
  );
}

window.ActAuthScreen = ActAuthScreen;