/* global React */
const { useState: useStateLogin } = React;

// =====================================================================
// LoginView — magic link via email (Supabase Auth)
// =====================================================================
function LoginView() {
  const [email, setEmail] = useStateLogin('');
  const [estado, setEstado] = useStateLogin('idle'); // idle | enviando | enviado | erro
  const [erro, setErro] = useStateLogin(null);

  const enviar = async (e) => {
    e.preventDefault();
    if (!email.trim()) return;
    setEstado('enviando');
    setErro(null);
    try {
      const { error } = await window.loginMagicLink(email.trim());
      if (error) throw error;
      setEstado('enviado');
    } catch (err) {
      setEstado('erro');
      setErro(err.message || 'Falha ao enviar email');
    }
  };

  return (
    <div className="bg-paper" style={{
      minHeight: '100vh',
      display: 'grid', placeItems: 'center',
      padding: 'var(--s-5)',
      background: 'var(--bg)',
    }}>
      <div style={{
        width: '100%', maxWidth: 460,
        background: 'var(--bg)',
        borderRadius: 'var(--r-xl)',
        padding: 'var(--s-7)',
        boxShadow: 'var(--shadow-md)',
        border: '1px solid var(--line)',
      }}>
        <header style={{textAlign: 'center', marginBottom: 'var(--s-6)'}}>
          <div style={{
            display: 'inline-flex', alignItems: 'baseline', gap: 8,
            marginBottom: 'var(--s-3)',
          }}>
            <h1 style={{
              fontFamily: 'var(--font-display)',
              fontSize: 36, fontWeight: 600, letterSpacing: '-0.02em',
              color: 'var(--ink)', margin: 0,
            }}>Colo Ritmo</h1>
            <span className="handwritten" style={{
              fontSize: 22, color: 'var(--colo-blue-tag)',
              transform: 'rotate(-4deg)', display:'inline-block',
            }}>pediatria</span>
          </div>
          <p className="lede" style={{fontSize: 15, color: 'var(--ink-2)', maxWidth: 360, margin: '0 auto'}}>
            {estado === 'enviado'
              ? 'Verifique seu email pra entrar.'
              : 'Sua agenda de plantões. Seu sono. Seu ritmo.'}
          </p>
        </header>

        {estado === 'enviado' ? (
          <div style={{textAlign: 'center'}}>
            <div style={{
              width: 64, height: 64, borderRadius: 999,
              background: 'var(--ok-bg)', color: 'var(--ok)',
              display: 'grid', placeItems: 'center',
              margin: '0 auto var(--s-4)',
            }}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
            </div>
            <p style={{fontSize: 15, marginBottom: 'var(--s-3)', color: 'var(--ink)'}}>
              Mandei um link pra <strong>{email}</strong>.
            </p>
            <p className="small" style={{fontSize: 13, color: 'var(--ink-2)', marginBottom: 'var(--s-5)', lineHeight: 1.5}}>
              Abre o email no celular, clica no link, e tu cai direto aqui dentro — agenda já pronta.
              Pode demorar até 1 minuto pra chegar.
            </p>
            <button
              type="button"
              onClick={() => { setEstado('idle'); setEmail(''); setErro(null); }}
              className="btn btn--ghost"
              style={{justifyContent: 'center'}}
            >
              Usar outro email
            </button>
          </div>
        ) : (
          <form onSubmit={enviar} style={{display: 'grid', gap: 'var(--s-4)'}}>
            <div>
              <label className="eyebrow" htmlFor="email" style={{display:'block', marginBottom: 6}}>
                Seu email
              </label>
              <input
                id="email"
                type="email"
                required
                autoFocus
                autoComplete="email"
                inputMode="email"
                placeholder="voce@exemplo.com"
                value={email}
                onChange={e => setEmail(e.target.value)}
                disabled={estado === 'enviando'}
                className="input"
                style={{fontSize: 16}}
              />
            </div>

            {erro && (
              <div style={{
                padding: 'var(--s-3)',
                background: 'var(--err-bg)', color: 'var(--err)',
                borderRadius: 'var(--r-md)',
                fontSize: 13, fontWeight: 600,
              }}>{erro}</div>
            )}

            <button
              type="submit"
              disabled={!email.trim() || estado === 'enviando'}
              className="btn"
              style={{
                background: 'var(--ink)', color: 'var(--bg)',
                justifyContent: 'center',
                opacity: !email.trim() || estado === 'enviando' ? 0.6 : 1,
                marginTop: 'var(--s-2)',
              }}
            >
              {estado === 'enviando' ? 'Enviando…' : 'Receber link no email'}
            </button>

            <p className="small" style={{
              textAlign: 'center', fontSize: 12, color: 'var(--ink-3)',
              marginTop: 'var(--s-3)', lineHeight: 1.5,
            }}>
              Sem senha. A gente manda um link no seu email — clica e tá dentro.
            </p>
          </form>
        )}
      </div>

      <p className="small" style={{
        textAlign: 'center', fontSize: 11, color: 'var(--ink-3)',
        marginTop: 'var(--s-5)',
      }}>
        Colo Ritmo · parte da família <strong>Colo Pediatria</strong>
      </p>
    </div>
  );
}

Object.assign(window, { LoginView });