// Tela de login — magic-link, acesso restrito à gestão CHARLES (por enquanto).
// Produção: sem allowlist no cliente (o servidor decide; a resposta é sempre neutra —
// anti-enumeração, padrão VoIP). Chama POST /api/auth/link e mostra sempre "Confira seu e-mail".
// Os 3 estados de erro do link (ERROS_LINK) são acionados pelo App.jsx quando o POST do token
// volta com {erro:...} — copy verbatim aprovada no design.
const DSl = window.WiFi_eeb21e;
const { Card: CardL, CardContent: CardContentL, Button: BtnL, Input: InputL, Label: LabelL, CharlesLogoMark: LogoL, Separator: SepL } = DSl;
const { TermoDica: TermoL } = window;

const ERROS_LINK = {
 vencido: { t: 'Este link já venceu.', d: 'Links valem por 15 minutos e funcionam uma vez. Peça outro abaixo — é rápido.' },
 usado: { t: 'Este link já foi usado.', d: 'Cada link funciona uma única vez. Se não foi você quem usou, peça outro agora.' },
 substituido: { t: 'Este link foi substituído.', d: 'Você pediu um link mais novo — só o mais recente vale. Confira o último e-mail ou peça outro.' }
};
// map do rótulo do servidor (app.py) para a chave da copy:
//   expirado→vencido · ja_usado→usado · substituido→substituido
const ERRO_SERVIDOR = { expirado: 'vencido', ja_usado: 'usado', substituido: 'substituido' };

function TelaLogin({ erroInicial }) {
 const [email, setEmail] = React.useState('');
 const [fase, setFase] = React.useState(erroInicial ? (ERRO_SERVIDOR[erroInicial] || 'vencido') : 'pedir'); // pedir | enviado | vencido | usado | substituido
 const [enviando, setEnviando] = React.useState(false);
 const enviar = async e => {
  e.preventDefault();
  setEnviando(true);
  try {
   await fetch('/api/auth/link', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ email: email.trim().toLowerCase() }) });
  } catch (err) { /* resposta é sempre neutra — nem erro de rede muda a tela */ }
  setEnviando(false);
  setFase('enviado'); // sempre — não revela se o e-mail existe
 };
 return <div style={{ minHeight: '100vh', background: 'hsl(var(--background))', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 24, boxSizing: 'border-box', fontFamily: 'var(--app-font-sans)', color: 'hsl(var(--foreground))' }}>
  <div style={{ width: 400, maxWidth: '100%' }}>
   <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18, justifyContent: 'center' }}>
    <LogoL size={40} />
    <div>
     <div style={{ fontFamily: 'var(--app-font-display)', fontWeight: 800, fontSize: 17, letterSpacing: '.02em' }}>CHARLES</div>
     <div style={{ fontSize: 12.5, color: 'hsl(var(--muted-foreground))' }}>Console de gestão WiFi</div>
    </div>
   </div>
   <CardL>
    <CardContentL style={{ padding: 24 }}>
     {fase === 'pedir' ? <form onSubmit={enviar}>
      <LabelL htmlFor="lg-email">E-mail de gestão</LabelL>
      <div style={{ height: 6 }} />
      <InputL id="lg-email" type="email" placeholder="voce@charles.app.br" value={email} onChange={e => setEmail(e.target.value)} />
      <div style={{ height: 14 }} />
      <BtnL type="submit" disabled={enviando || !/^\S+@\S+\.\S+$/.test(email.trim())} style={{ width: '100%' }}>{enviando ? 'Enviando…' : 'Receber link de acesso'}</BtnL>
      <SepL style={{ margin: '16px 0 12px' }} />
      <div style={{ fontSize: 12, color: 'hsl(var(--muted-foreground))', lineHeight: 1.55 }}>Sem senha: você recebe um <TermoL dica="Link de uso único enviado por e-mail — abre a sessão sem digitar senha">link mágico</TermoL> no seu e-mail. Ele vale por 15 minutos e funciona uma única vez.</div>
     </form> : ERROS_LINK[fase] ? <div>
      <div style={{ fontFamily: 'var(--app-font-display)', fontWeight: 700, fontSize: 17 }}>{ERROS_LINK[fase].t}</div>
      <div style={{ marginTop: 8, fontSize: 13.5, lineHeight: 1.55 }}>{ERROS_LINK[fase].d}</div>
      <div style={{ height: 16 }} />
      <BtnL onClick={() => setFase('pedir')} style={{ width: '100%' }}>Pedir novo link</BtnL>
     </div> : <div>
      <div style={{ fontFamily: 'var(--app-font-display)', fontWeight: 700, fontSize: 17 }}>Confira seu e-mail.</div>
      <div style={{ marginTop: 8, fontSize: 13.5, lineHeight: 1.55 }}>Se <span style={{ fontWeight: 600 }}>{email.trim()}</span> estiver cadastrado na gestão, o link de acesso chega em instantes. Ele vale por 15 minutos e funciona uma vez.</div>
      <div style={{ height: 16 }} />
      <BtnL variant="outline" onClick={() => setFase('pedir')} style={{ width: '100%' }}>Usar outro e-mail</BtnL>
     </div>}
    </CardContentL>
   </CardL>
   <div style={{ textAlign: 'center', fontSize: 11.5, color: 'hsl(var(--muted-foreground))', marginTop: 12 }}>Acesso restrito à gestão CHARLES. Perfis para clientes chegam em breve.</div>
  </div>
 </div>;
}
window.TelaLogin = TelaLogin;