/**
 * <Modal> — diálogo centrado, para confirmações e formulários curtos.
 *
 * Regra de UI do MODULOS: acções destrutivas pedem confirmação antes. Para
 * essas, usar papel="alertdialog" e pôr data-foco-inicial no botão seguro
 * (Cancelar), para que um Enter distraído não confirme.
 *
 * Fica acima do <Drawer> (z-60 contra z-50) e pode abrir por cima dele.
 */

function Modal({ aberto, onFechar, titulo, papel = 'dialog', acoes, largo = false, children }) {
  const painelRef = React.useRef(null);
  const tituloId = React.useId();
  const descricaoId = React.useId();

  useDialogo(painelRef, aberto, onFechar);

  if (!aberto) return null;

  return ReactDOM.createPortal(
    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
      <div
        className="drawer-overlay absolute inset-0 bg-black/70"
        onClick={() => onFechar()}
        aria-hidden="true"
      />

      <div
        ref={painelRef}
        role={papel}
        aria-modal="true"
        aria-labelledby={tituloId}
        aria-describedby={descricaoId}
        tabIndex={-1}
        className={`modal-panel relative w-full ${largo ? 'max-w-3xl' : 'max-w-md'} overflow-hidden border border-border bg-card outline-none`}
      >
        {/* O conteúdo rola; o título e as acções ficam. Um formulário mais alto
            do que o ecrã empurrava os botões para fora da vista, e quem abria
            não tinha como confirmar nem cancelar sem fechar à força. */}
        <div className="max-h-[calc(100vh-8rem)] overflow-y-auto p-6">
          {/* Superfície de cartão (e não o fundo da página) e título a 18px:
              o diálogo destaca-se do que fica por trás (28 Set). */}
          <h2 id={tituloId} className="text-lg font-semibold leading-tight tracking-tight text-foreground">
            {titulo}
          </h2>
          <div id={descricaoId} className="mt-3 text-sm text-muted-foreground">
            {children}
          </div>
        </div>

        {acoes && (
          <div className="flex flex-wrap items-center justify-end gap-2 border-t border-border bg-background/40 px-6 py-4">{acoes}</div>
        )}
      </div>
    </div>,
    document.body
  );
}