// Login / splash screen

function LoginScreen({ dark, go }) {
  const t = useT(dark);
  const [cpf, setCpf] = React.useState('');
  const [pwd, setPwd] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const fmtCpf = (v) => {
    const d = v.replace(/\D/g, '').slice(0, 11);
    return d
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d)/, '$1.$2')
      .replace(/(\d{3})(\d{1,2})$/, '$1-$2');
  };

  const submit = () => {
    setLoading(true);
    setTimeout(() => go('home'), 900);
  };
  const canLogin = cpf.replace(/\D/g,'').length >= 11 && pwd.length >= 3;

  return (
    <div style={{
      height: '100%', background: t.bg, overflow: 'hidden', position: 'relative',
      display: 'flex', flexDirection: 'column',
    }}>
      {/* Warm gradient wash */}
      <div style={{
        position: 'absolute', top: -120, right: -100, width: 380, height: 380,
        background: `radial-gradient(circle, ${t.accentSoft}99, transparent 70%)`,
        filter: 'blur(20px)', pointerEvents: 'none',
      }} />
      <div style={{
        position: 'absolute', bottom: -140, left: -80, width: 340, height: 340,
        background: `radial-gradient(circle, ${t.sageBg}cc, transparent 70%)`,
        filter: 'blur(20px)', pointerEvents: 'none',
      }} />

      {/* Status bar */}
      <div style={{ position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10 }}>
        <IOSStatusBar dark={dark} />
      </div>

      <div style={{
        flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        padding: '70px 28px 34px', position: 'relative', zIndex: 2,
      }}>
        {/* Logo + headline */}
        <div style={{ paddingTop: 40 }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 14px 8px 10px', borderRadius: 99,
            background: t.surface, border: `1px solid ${t.border}`,
          }}>
            <div style={{
              width: 26, height: 26, borderRadius: 99, background: t.accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <div style={{ width: 12, height: 12, borderRadius: 99, background: '#FFF4E6' }} />
            </div>
            <span style={{ fontSize: 13, fontWeight: 600, color: t.text, letterSpacing: -0.1 }}>Lumen</span>
          </div>
          <h1 style={{
            margin: '32px 0 10px', fontFamily: LUMEN_FONTS.sans, fontWeight: 600,
            fontSize: 36, lineHeight: 1.05, color: t.text, letterSpacing: -1.2,
          }}>
            Seus exames,<br/>
            <span style={{ color: t.accent }}>sem filas.</span>
          </h1>
          <p style={{ margin: 0, fontSize: 15, color: t.textMuted, lineHeight: 1.5, maxWidth: 300 }}>
            Faça check-in, acompanhe a fila em tempo real e receba seus resultados aqui mesmo.
          </p>
        </div>

        {/* Form */}
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <div style={{
            background: t.surface, borderRadius: 18, padding: '14px 18px',
            border: `1px solid ${t.border}`,
          }}>
            <div style={{ fontSize: 11, color: t.textMuted, letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>CPF</div>
            <input
              value={cpf}
              onChange={e => setCpf(fmtCpf(e.target.value))}
              placeholder="000.000.000-00"
              inputMode="numeric"
              style={{
                width: '100%', border: 'none', background: 'transparent', outline: 'none',
                fontSize: 17, fontWeight: 500, color: t.text, fontFamily: LUMEN_FONTS.sans,
                letterSpacing: 0.2,
              }}
            />
          </div>
          <div style={{
            background: t.surface, borderRadius: 18, padding: '14px 18px',
            border: `1px solid ${t.border}`,
            display: 'flex', alignItems: 'center', gap: 12,
          }}>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 11, color: t.textMuted, letterSpacing: 0.8, textTransform: 'uppercase', fontWeight: 600, marginBottom: 4 }}>Senha</div>
              <input
                type="password"
                value={pwd}
                onChange={e => setPwd(e.target.value)}
                placeholder="••••••"
                style={{
                  width: '100%', border: 'none', background: 'transparent', outline: 'none',
                  fontSize: 17, fontWeight: 500, color: t.text, fontFamily: LUMEN_FONTS.sans,
                  letterSpacing: 2,
                }}
              />
            </div>
            <Icon name="lock" size={18} color={t.textMuted} />
          </div>

          <button onClick={() => { setCpf('123.456.789-00'); setPwd('demo12'); }} style={{
            background: 'transparent', border: 'none', padding: '6px 4px',
            fontSize: 12, color: t.textSubtle, cursor: 'pointer',
            fontFamily: LUMEN_FONTS.sans, textAlign: 'left',
          }}>
            Preencher com dados de demo →
          </button>

          <div style={{ height: 8 }} />

          <Button dark={dark} full size="lg" variant="primary" onClick={submit} disabled={!canLogin || loading}>
            {loading ? 'Entrando…' : 'Entrar'}
          </Button>

          <button style={{
            background: 'transparent', border: 'none', padding: '10px',
            fontSize: 14, color: t.text, fontWeight: 500, cursor: 'pointer',
            fontFamily: LUMEN_FONTS.sans,
          }}>
            Entrar com biometria
          </button>
        </div>

        {/* Footer */}
        <div style={{
          textAlign: 'center', fontSize: 12, color: t.textMuted, paddingTop: 14,
        }}>
          Primeiro acesso? <span style={{ color: t.accent, fontWeight: 500 }}>Criar conta</span>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;