/**
 * <ModalEstadoConta> — suspender, reactivar ou cancelar uma conta.
 *
 * Modal de confirmação e não página: a decisão já foi tomada antes de se abrir,
 * e o que falta é escrever o motivo e confirmar.
 *
 * **Cancelar é destrutivo e irreversível**, por isso usa `papel="alertdialog"`
 * e o foco inicial fica no botão seguro — um Enter distraído não cancela um
 * cliente. Suspender é reversível e usa o diálogo normal.
 *
 * O ecrã diz o que a acção faz **antes** de ela acontecer, e em concreto:
 * quantas sessões vai cortar, que a pessoa deixa de conseguir entrar, e que de
 * cancelada não se volta. A alternativa era descobrir isso depois.
 */

const ACCOES_ESTADO = {
  suspended: {
    titulo: 'Suspender a conta',
    verbo: 'Suspender',
    aDecorrer: 'A suspender…',
    feito: 'suspensa',
    destrutiva: false,
    /* Sem motivo o servidor recusa: fica no registo de auditoria. */
    pedeMotivo: true,
    rotuloMotivo: 'Porquê',
    exemplo: 'Ex.: três facturas por pagar desde Julho',
    consequencias: [
      'Quem estiver dentro sai imediatamente — as sessões abertas são cortadas.',
      'Ninguém desta conta consegue entrar enquanto durar.',
      'Os dados ficam todos lá. Reactivar devolve tudo como estava.',
    ],
  },
  active: {
    titulo: 'Reactivar a conta',
    verbo: 'Reactivar',
    aDecorrer: 'A reactivar…',
    feito: 'reactivada',
    destrutiva: false,
    pedeMotivo: false,
    rotuloMotivo: 'Nota (opcional)',
    exemplo: 'Ex.: regularizou os pagamentos',
    consequencias: ['A conta volta a funcionar e as pessoas voltam a poder entrar.'],
  },
  cancelled: {
    titulo: 'Cancelar a conta',
    verbo: 'Cancelar a conta',
    aDecorrer: 'A cancelar…',
    feito: 'cancelada',
    destrutiva: true,
    pedeMotivo: true,
    rotuloMotivo: 'Porquê',
    exemplo: 'Ex.: fim de contrato, não renovou',
    consequencias: [
      'Não se volta atrás. Uma conta cancelada não se reabre — seria preciso criar outra.',
      'Quem estiver dentro sai imediatamente e não volta a entrar.',
      'Os painéis da conta voltam ao stock, por atribuir.',
      'Fica registado quem cancelou, quando e porquê.',
    ],
  },
};

function ModalEstadoConta({ aberto, slug, nome, accao, 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, accao]);

  const cfg = ACCOES_ESTADO[accao];
  if (!cfg) return null;

  const pronto = !cfg.pedeMotivo || motivo.trim().length > 0;

  async function confirmar() {
    setErro(null);
    setAGuardar(true);
    try {
      const r = await api.patch(`/api/admin/accounts/${slug}/status`, {
        estado: accao,
        motivo: motivo.trim(),
      });
      const cortadas = r.sessoes_cortadas;
      // "Conta suspensa", e não "conta suspender": o particípio é o que se diz
      // depois de a coisa acontecer.
      onConcluido(
        cortadas > 0
          ? `${nome} ${cfg.feito}. ${cortadas} ${cortadas === 1 ? 'sessão cortada' : 'sessões cortadas'}.`
          : `${nome} ${cfg.feito}.`
      );
    } catch (err) {
      setErro(err.message);
      setAGuardar(false);
    }
  }

  return (
    <Modal
      aberto={aberto}
      onFechar={onFechar}
      titulo={cfg.titulo}
      papel={cfg.destrutiva ? 'alertdialog' : 'dialog'}
      acoes={
        <>
          <button
            type="button"
            onClick={onFechar}
            /* Numa acção destrutiva o foco começa aqui, no botão seguro. */
            data-foco-inicial={cfg.destrutiva ? true : undefined}
            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 ? cfg.aDecorrer : cfg.verbo}
          </button>
        </>
      }
    >
      <p className="text-sm text-foreground">
        <span className="text-muted-foreground">Conta:</span> {nome}
      </p>

      <ul className="mt-4 space-y-2">
        {cfg.consequencias.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-estado" className="label-eyebrow block">
          {cfg.rotuloMotivo}
        </label>
        <textarea
          id="motivo-estado"
          rows={2}
          value={motivo}
          onChange={(e) => setMotivo(e.target.value)}
          placeholder={cfg.exemplo}
          data-foco-inicial={cfg.destrutiva ? undefined : true}
          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>
  );
}