"use client";

import { useEffect } from "react";

/*
  A pergunta de sim ou nao do sistema.

  O `window.confirm` do navegador mostra "localhost diz", corta o texto, ignora
  a marca e nao deixa dar cor ao botao perigoso. Esta caixa faz o mesmo trabalho
  falando a lingua da casa — e cabe explicar o que vai acontecer, que e o que
  realmente evita clique errado.
*/

export type Confirmacao = {
  titulo: string;
  texto?: string;
  confirmar?: string;
  cancelar?: string;
  tom?: "perigo" | "normal";
  aoConfirmar: () => void | Promise<void>;
};

export default function CaixaDeConfirmacao({
  pedido,
  ocupado,
  aoFechar,
}: {
  pedido: Confirmacao | null;
  ocupado?: boolean;
  aoFechar: () => void;
}) {
  useEffect(() => {
    if (!pedido) return;
    const aoTeclar = (evento: KeyboardEvent) => {
      if (evento.key === "Escape") aoFechar();
    };
    window.addEventListener("keydown", aoTeclar);
    return () => window.removeEventListener("keydown", aoTeclar);
  }, [pedido, aoFechar]);

  if (!pedido) return null;

  return (
    <div
      role="dialog"
      aria-modal="true"
      onClick={aoFechar}
      /* `pointer-events-auto` nao e enfeite: dentro de um modal do Radix o
         body inteiro fica com os cliques desligados, e sem isto a caixa
         aparece mas o clique atravessa e acerta o que estiver atras. */
      className="pointer-events-auto fixed inset-0 z-[130] flex items-center justify-center bg-[rgba(12,8,24,0.42)] p-6 backdrop-blur-[2px]"
    >
      <div
        onClick={(evento) => evento.stopPropagation()}
        className="w-[min(400px,100%)] rounded-[18px] bg-white p-5 shadow-[0_24px_60px_rgba(26,26,43,0.28)]"
      >
        <div className="text-[16px] font-extrabold text-[var(--ks-color-text-primary)]">{pedido.titulo}</div>
        {pedido.texto ? (
          <p className="mt-1.5 text-[13px] leading-5 text-[var(--ks-color-text-soft)]">{pedido.texto}</p>
        ) : null}
        <div className="mt-4 flex justify-end gap-2">
          <button
            type="button"
            onClick={aoFechar}
            className="h-9 rounded-xl bg-[#f1f0f7] px-4 text-[13px] font-bold text-[var(--ks-color-text-soft)] transition hover:bg-[#e6e6f2]"
          >
            {pedido.cancelar || "Cancelar"}
          </button>
          <button
            type="button"
            disabled={ocupado}
            onClick={() => void pedido.aoConfirmar()}
            className={`h-9 rounded-xl px-4 text-[13px] font-bold text-white transition hover:opacity-90 disabled:opacity-50 ${
              pedido.tom === "perigo" ? "bg-[#e13a58]" : "bg-[var(--ks-color-primary)]"
            }`}
          >
            {pedido.confirmar || "Confirmar"}
          </button>
        </div>
      </div>
    </div>
  );
}