/**
 * Ecrã de login.
 *
 * Referência de layout: bloco Auth do Efferd, reescrito em JSX sobre os tokens
 * da marca. Card único centrado, cantos rectos, filete laranja no topo — a
 * mesma linguagem do indicador de página activa na sidebar. A moldura está em
 * `components/cartao_auth.jsx`, partilhada com os dois passos da MFA.
 *
 * Para a equipa NetScreen o login tem dois passos, e é este componente que
 * guarda o meio: a resposta do `/api/login` diz `{ mfa: 'configurar' }` ou
 * `{ mfa: 'verificar' }` e o ecrã troca de passo sem mudar de rota. O
 * `onEntrou` só dispara quando existe mesmo uma sessão — é por isso que o
 * `app.jsx` não precisa de saber que a MFA existe.
 */

function CampoLogin({ id, tipo, rotulo, valor, onChange, autoFocus, autoComplete, disabled }) {
  return (
    <div>
      <label htmlFor={id} className="label-eyebrow block">
        {rotulo}
      </label>
      <input
        id={id}
        name={id}
        type={tipo}
        value={valor}
        onChange={e => onChange(e.target.value)}
        autoFocus={autoFocus}
        autoComplete={autoComplete}
        disabled={disabled}
        required
        className="mt-2 w-full border border-border bg-background px-3 py-2.5 text-sm text-foreground
                   placeholder:text-muted-foreground focus:border-primary focus:outline-none
                   disabled:opacity-50"
      />
    </div>
  );
}

function ScreenLogin({ onEntrou }) {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [erro, setErro] = React.useState(null);
  const [aEntrar, setAEntrar] = React.useState(false);
  // null = ainda na password. Caso contrário, { passo, email } do segundo passo.
  const [mfa, setMfa] = React.useState(null);
  const [aRepor, setARepor] = React.useState(false);
  const [pedidoRecebido, setPedidoRecebido] = React.useState(null);

  async function pedirPassword(e) {
    e.preventDefault();
    setErro(null);
    setAEntrar(true);
    try {
      const r = await api.post('/api/repor-password', { email });
      setPedidoRecebido(r.mensagem);
    } catch (err) { setErro(err.message); }
    finally { setAEntrar(false); }
  }

  // O atalho para a conta demo só aparece quando o servidor diz que o bypass está
  // ligado (e não está em modo de apresentação, DEMO_APRESENTACAO=1). Antes bastava
  // ser localhost — e a apresentação de 12 Out corre em localhost (ensaio, E13).
  const [emDesenvolvimento, setEmDesenvolvimento] = React.useState(false);
  React.useEffect(() => {
    let vivo = true;
    fetch('/api/health')
      .then((r) => (r.ok ? r.json() : null))
      .then((r) => { if (vivo && r && r.atalho_dev === true) setEmDesenvolvimento(true); })
      .catch(() => {});
    return () => { vivo = false; };
  }, []);

  async function submeter(e) {
    e.preventDefault();
    setErro(null);
    setAEntrar(true);
    try {
      const r = await api.post('/api/login', { email, password });
      // A equipa NetScreen não entra aqui: falta o segundo passo.
      if (r && r.mfa) {
        setMfa({ passo: r.mfa, email: r.email || email });
        return;
      }
      onEntrou();
    } catch (err) {
      setErro(err.message);
      setAEntrar(false);
    }
  }

  /**
   * Desistir do segundo passo. Diz ao servidor para largar a sessão pendente:
   * sem isto ficava lá dez minutos e quem viesse a seguir ao mesmo browser
   * caía no código de outra pessoa.
   */
  function cancelarMfa() {
    api.post('/api/auth/mfa/cancel', {}).catch(() => {});
    setMfa(null);
    setPassword('');
    setAEntrar(false);
  }

  if (mfa && mfa.passo === 'configurar') {
    return <MfaConfigurar email={mfa.email} onEntrou={onEntrou} onCancelar={cancelarMfa} />;
  }
  if (mfa && mfa.passo === 'verificar') {
    return <MfaVerificar email={mfa.email} onEntrou={onEntrou} onCancelar={cancelarMfa} />;
  }

  if (aRepor) {
    return (
      <CartaoAuth sobretitulo="Entrar" titulo="Password nova">
        {pedidoRecebido ? <p role="status" className="mt-6 text-sm text-muted-foreground">{pedidoRecebido}</p> : (
          <form onSubmit={pedirPassword} className="mt-6 space-y-4">
            <p className="text-sm text-muted-foreground">Escreve o email com que entras na NetScreen AI.</p>
            <CampoLogin id="email-reposicao" tipo="email" rotulo="Email" valor={email} onChange={setEmail} autoFocus autoComplete="email" disabled={aEntrar} />
            {erro && <ErroAuth>{erro}</ErroAuth>}
            <BotaoAuth disabled={aEntrar || !email}>{aEntrar ? 'A pedir...' : 'Enviar link'}</BotaoAuth>
          </form>
        )}
        <button type="button" disabled={aEntrar} onClick={() => { setARepor(false); setErro(null); setPedidoRecebido(null); }} className="mt-6 text-sm text-primary hover:underline">Voltar ao login</button>
      </CartaoAuth>
    );
  }

  return (
    <CartaoAuth
      sobretitulo="Entrar"
      titulo="Entra na tua conta"
      rodape={
        emDesenvolvimento ? (
          <p className="mt-4 text-center text-xs text-muted-foreground">
            Em desenvolvimento:{' '}
            <a href="/?dev=demo" className="text-primary hover:underline">
              entrar como conta demo
            </a>
          </p>
        ) : null
      }
    >
      <form onSubmit={submeter} className="mt-6 space-y-4" noValidate>
        <CampoLogin
          id="email"
          tipo="email"
          rotulo="Email"
          valor={email}
          onChange={setEmail}
          autoFocus
          autoComplete="username"
          disabled={aEntrar}
        />
        <CampoLogin
          id="password"
          tipo="password"
          rotulo="Password"
          valor={password}
          onChange={setPassword}
          autoComplete="current-password"
          disabled={aEntrar}
        />

        {erro && <ErroAuth>{erro}</ErroAuth>}

        <BotaoAuth disabled={aEntrar || !email || !password}>
          {aEntrar ? 'A entrar...' : 'Entrar'}
        </BotaoAuth>
      </form>

      <p className="mt-6 text-xs text-muted-foreground">
        <button type="button" disabled={aEntrar} onClick={() => { setARepor(true); setErro(null); setPassword(''); }} className="text-primary hover:underline">Esqueci-me da password</button>
      </p>
    </CartaoAuth>
  );
}