/**
 * <ModalReporPassword> — gerar um link de reposição de password.
 *
 * Serve a equipa e os clientes: muda o destino e uma frase.
 *
 * Tem os dois passos do convite, e pelo mesmo motivo: **o link só se vê uma
 * vez**. O servidor guarda a impressão do token, por isso nem nós o
 * conseguimos recuperar. O link segue por email para a pessoa e fica no
 * <LinkGerado> como recurso; sem email, é quem carrega no botão que o copia.
 *
 * Não pede confirmação antes de gerar: gerar um link não tira a password a
 * ninguém — quem tem a antiga continua a entrar até alguém usar o link. O que
 * o ecrã tem de dizer bem é o que acontece **depois** de o link ser usado.
 */
function ModalReporPassword({ aberto, pessoa, equipa, slug, onFechar, onConcluido }) {
  const [feito, setFeito] = React.useState(null);
  const [erro, setErro] = React.useState(null);
  const [aPedir, setAPedir] = React.useState(false);

  React.useEffect(() => {
    if (!aberto) return;
    setFeito(null);
    setErro(null);
    setAPedir(false);
  }, [aberto, pessoa]);

  if (!pessoa) return null;

  const destino = equipa
    ? `/api/admin/netscreen-users/${pessoa.id}/repor-password`
    : `/api/admin/accounts/${slug}/users/${pessoa.id}/repor-password`;

  async function pedir() {
    setErro(null);
    setAPedir(true);
    try {
      setFeito(await api.post(destino, {}));
    } catch (err) {
      setErro(err.message);
      setAPedir(false);
    }
  }

  function fechar() {
    if (feito) onConcluido(feito.email_enviado ? `Link de reposição enviado para ${feito.email}.` : `Link de reposição de ${feito.email} pronto.`);
    else onFechar();
  }

  if (feito) {
    return (
      <LinkGerado
        aberto={aberto}
        feito={feito}
        tituloEnviado="Link enviado"
        assunto="o link para escolher uma password nova"
        aviso="se o perderes, gera outro."
        nota="Até alguém o usar, a password antiga continua a funcionar."
        onFechar={fechar}
      />
    );
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo="Repor a password"
      acoes={
        <>
          <button
            type="button"
            onClick={onFechar}
            className="border border-border px-4 py-2 text-sm uppercase tracking-wider text-muted-foreground outline-none hover:text-foreground focus-visible:ring-1 focus-visible:ring-accent"
          >
            Cancelar
          </button>
          <button
            type="button"
            disabled={aPedir}
            onClick={pedir}
            data-foco-inicial
            className="bg-primary px-4 py-2 text-sm uppercase tracking-wider text-primary-foreground outline-none hover:bg-primary/90 focus-visible:ring-1 focus-visible:ring-accent disabled:cursor-not-allowed disabled:opacity-40"
          >
            {aPedir ? 'A gerar…' : 'Gerar link'}
          </button>
        </>
      }
    >
      <p className="text-sm text-foreground">
        {pessoa.nome} <span className="text-muted-foreground">({pessoa.email})</span>
      </p>

      <ul className="mt-4 space-y-2">
        {[
          'Gera um link para a pessoa escolher uma password nova.',
          'Até ela o usar, a password antiga continua a funcionar.',
          'Quando usar, as sessões abertas dela são fechadas.',
          equipa
            ? 'A autenticação em dois passos não é reposta — continua a precisar do mesmo telemóvel.'
            : 'Entra logo a seguir, com a password nova.',
        ].map((c) => (
          <li key={c} className="flex gap-2 text-xs text-muted-foreground">
            <span aria-hidden="true" className="mt-1.5 h-1 w-1 shrink-0 bg-primary" />
            <span>{c}</span>
          </li>
        ))}
      </ul>

      {equipa && (
        <p className="mt-4 border-l-2 border-border bg-muted px-3 py-2 text-xs text-muted-foreground">
          Se a pessoa também perdeu o acesso ao telemóvel, isto não chega — a MFA tem de ser reposta no
          servidor, e ainda não há ecrã para isso.
        </p>
      )}

      {erro && (
        <p role="alert" className="mt-4 border-l-2 border-primary bg-muted px-3 py-2 text-sm text-foreground">
          {erro}
        </p>
      )}
    </Modal>
  );
}