/**
 * <ModalPerfilEquipa> — promover a Admin ou despromover a Operador.
 *
 * Antes disto, a única forma de mudar o perfil de alguém era desactivá-la e
 * convidá-la de novo — o que lhe apagava a MFA. Trocar a segurança de uma
 * pessoa para lhe mudar um campo.
 *
 * O ecrã diz que a sessão dela vai cair, porque vai: o perfil que manda numa
 * sessão é o que foi lido no login, e sem cortar a sessão a despromoção não
 * tirava nada até a pessoa sair.
 */
function ModalPerfilEquipa({ aberto, pessoa, 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 promover = pessoa.perfil !== 'admin';
  const novo = promover ? 'admin' : 'operator';

  async function confirmar() {
    setErro(null);
    setAGuardar(true);
    try {
      await api.patch(`/api/admin/netscreen-users/${pessoa.id}/perfil`, {
        role: novo,
        motivo: motivo.trim(),
      });
      onConcluido(`${pessoa.nome} passou a ${promover ? 'Admin' : 'Operador'}.`);
    } catch (err) {
      setErro(err.message);
      setAGuardar(false);
    }
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo={promover ? 'Promover a Admin' : 'Despromover a Operador'}
      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={!motivo.trim() || 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…' : promover ? 'Promover' : 'Despromover'}
          </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">
        {[
          promover
            ? 'Passa a ver e alterar tudo, incluindo receita e cancelamentos de conta.'
            : 'Deixa de ver receita e de poder cancelar contas.',
          promover
            ? 'Passa a poder convidar e desactivar pessoas da equipa.'
            : 'Deixa de poder convidar, desactivar ou repor a MFA de ninguém.',
          'A sessão dela é fechada: o perfil novo vale a partir do login seguinte.',
          'A autenticação em dois passos não é tocada — continua com o mesmo telemóvel.',
        ].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-perfil" className="label-eyebrow block">
          Porquê
        </label>
        <textarea
          id="motivo-perfil"
          rows={2}
          value={motivo}
          onChange={(e) => setMotivo(e.target.value)}
          placeholder={promover ? 'Ex.: passou a gerir a equipa' : 'Ex.: mudou de funções'}
          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>
  );
}

/**
 * <ModalReporMfa> — apagar o segundo factor de quem perdeu o telemóvel.
 *
 * **Isto é a chave do cofre**, e o ecrã não finge o contrário. Um Admin que
 * reponha a password e a MFA de alguém entra na conta dessa pessoa. Não há
 * maneira de evitar isso sem deixar de ter Admins — o que há é o registo de
 * auditoria e o facto de a pessoa dar por isso no login seguinte.
 *
 * Por isso é `alertdialog` com o foco no botão seguro, e por isso o texto diz
 * que **quem confirma que é mesmo a pessoa é quem está a carregar no botão**.
 * O sistema não o consegue fazer: um email não prova nada a quem perdeu o
 * telemóvel, e códigos de reserva é justamente o que não existe.
 */
function ModalReporMfa({ aberto, pessoa, 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;

  async function confirmar() {
    setErro(null);
    setAGuardar(true);
    try {
      const r = await api.post(`/api/admin/netscreen-users/${pessoa.id}/repor-mfa`, {
        motivo: motivo.trim(),
      });
      const cortadas = r.sessoes_cortadas;
      onConcluido(
        cortadas > 0
          ? `MFA de ${pessoa.nome} reposta. ${cortadas} ${cortadas === 1 ? 'sessão cortada' : 'sessões cortadas'}.`
          : `MFA de ${pessoa.nome} reposta.`
      );
    } catch (err) {
      setErro(err.message);
      setAGuardar(false);
    }
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo="Repor a autenticação em dois passos"
      papel="alertdialog"
      acoes={
        <>
          <button
            type="button"
            onClick={onFechar}
            data-foco-inicial
            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={!motivo.trim() || 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 repor…' : 'Repor a MFA'}
          </button>
        </>
      }
    >
      <p className="text-sm text-foreground">
        {pessoa.nome} <span className="text-muted-foreground">({pessoa.email})</span>
      </p>

      <p className="mt-4 border-l-2 border-primary bg-muted px-3 py-2 text-xs text-foreground">
        Confirma por outro meio — telefone, pessoalmente — que estás mesmo a falar com esta pessoa. O
        sistema não o consegue fazer por ti: um email não prova nada a quem perdeu o telemóvel.
      </p>

      <ul className="mt-4 space-y-2">
        {[
          'O segundo factor é apagado. No login seguinte, esta pessoa volta a ver o QR e configura de raiz.',
          'A password não é tocada — se também a perdeu, isso é o outro botão.',
          'As sessões abertas dela são fechadas.',
          'Fica registado quem repôs, quando e porquê.',
        ].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-mfa" className="label-eyebrow block">
          Porquê
        </label>
        <textarea
          id="motivo-mfa"
          rows={2}
          value={motivo}
          onChange={(e) => setMotivo(e.target.value)}
          placeholder="Ex.: perdeu o telemóvel, confirmado por telefone"
          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>
  );
}