/**
 * <ModalAcessoEquipa> — tirar ou devolver o acesso ao back office.
 *
 * Tirar o acesso é destrutivo o suficiente para pedir confirmação com motivo,
 * mas não é irreversível: devolve-se no clique seguinte. Por isso usa o
 * diálogo normal, e não o `alertdialog` do cancelamento de contas.
 *
 * A conta não é apagada e o ecrã diz isso, porque é a pergunta que a pessoa
 * tem na cabeça ao carregar: a pessoa fica no histórico de auditoria — quem
 * criou que conta, quem atribuiu que painel — e isso não se reescreve.
 */
function ModalAcessoEquipa({ aberto, pessoa, activo, onFechar, onConcluido }) {
  const [motivo, setMotivo] = React.useState('');
  const [erro, setErro] = React.useState(null);
  const [aGuardar, setAGuardar] = React.useState(false);

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

  if (!pessoa) return null;

  const pronto = activo || motivo.trim().length > 0;

  async function confirmar() {
    setErro(null);
    setAGuardar(true);
    try {
      const r = await api.patch(`/api/admin/netscreen-users/${pessoa.id}/estado`, {
        activo,
        motivo: motivo.trim(),
      });
      const cortadas = r.sessoes_cortadas;
      onConcluido(
        activo
          ? `${pessoa.nome} voltou a ter acesso.`
          : pessoa.convidado
            ? `Convite de ${pessoa.nome} anulado.`
          : cortadas > 0
            ? `${pessoa.nome} sem acesso. ${cortadas} ${cortadas === 1 ? 'sessão cortada' : 'sessões cortadas'}.`
            : `${pessoa.nome} sem acesso.`
      );
    } catch (err) {
      setErro(err.message);
      setAGuardar(false);
    }
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo={activo ? 'Devolver o acesso' : pessoa.convidado ? 'Anular o convite' : 'Tirar o acesso'}
      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"
          >
            Voltar atrás
          </button>
          <button
            type="button"
            disabled={!pronto || aGuardar}
            onClick={confirmar}
            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"
          >
            {aGuardar ? 'A guardar…' : activo ? 'Devolver' : pessoa.convidado ? 'Anular convite' : 'Tirar acesso'}
          </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">
        {/* Quem nunca aceitou o convite não tem sessões nem password: dizer-lhe
            que "sai imediatamente" era descrever uma coisa que não acontece. */}
        {(activo
          ? ['Volta a poder entrar no back office, com o mesmo perfil e a mesma MFA.']
          : pessoa.convidado
            ? [
                'O link do convite deixa de funcionar.',
                'A pessoa nunca chega a ter acesso — não tem password nem sessão.',
                'Podes convidá-la outra vez mais tarde, com um link novo.',
              ]
            : [
                'Sai imediatamente — as sessões abertas são cortadas.',
                'Deixa de conseguir entrar, mesmo com a password certa.',
                'A conta não é apagada: fica no histórico de auditoria do que já fez.',
                'Devolver o acesso é um clique, e a MFA continua configurada.',
              ]
        ).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>

      <div className="mt-5">
        <label htmlFor="motivo-acesso" className="label-eyebrow block">
          {activo ? 'Nota (opcional)' : 'Porquê'}
        </label>
        <textarea
          id="motivo-acesso"
          rows={2}
          value={motivo}
          onChange={(e) => setMotivo(e.target.value)}
          placeholder={
            activo
              ? 'Ex.: voltou à equipa'
              : pessoa.convidado
                ? 'Ex.: afinal não entra na equipa'
                : 'Ex.: saiu da empresa a 30 de Setembro'
          }
          data-foco-inicial
          className="mt-2 w-full resize-none border border-border bg-background px-3 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground focus-visible:border-accent"
        />
        <p className="mt-1 text-xs text-muted-foreground">
          Fica no registo de auditoria, com o teu nome e a data.
        </p>
      </div>

      {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>
  );
}