import { useEscapeKey } from '@/lib/hooks';
import { useConfirmDialogStore } from '@/stores/confirmDialog';

/** Mounted once at the app root (App.tsx) -- renders whatever `requestConfirm()` (confirmDialog.ts)
 *  most recently asked for. Visual language matches this app's other small action dialogs (e.g. the
 *  forward picker's outlined-gray "取消" + solid colored confirm button, `02-messages.dc.html`'s own
 *  spec for that pairing) rather than inventing a new button treatment just for this. */
export function ConfirmDialogRoot() {
  const pending = useConfirmDialogStore((s) => s.pending);
  const respond = useConfirmDialogStore((s) => s.respond);
  // Always called (hooks can't be conditional) -- a no-op onEscape while nothing is pending is
  // harmless, matching how every other modal in this app registers unconditionally too.
  useEscapeKey(() => respond(false));

  if (!pending) return null;
  const { title, message, confirmLabel = '确定', cancelLabel = '取消', danger } = pending;

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-[#22262d]/25" onClick={() => respond(false)}>
      <div className="w-[340px] rounded-xl bg-white p-5 shadow-modal" onClick={(e) => e.stopPropagation()}>
        {title ? <strong className="mb-2 block text-base font-semibold text-text-heading">{title}</strong> : null}
        <p className="m-0 text-sm leading-relaxed text-text-body">{message}</p>
        <div className="mt-5 flex justify-end gap-3">
          <button
            type="button"
            onClick={() => respond(false)}
            className="grid h-9 place-items-center rounded-lg border border-[#d5d9df] px-4 text-sm text-text-secondary"
          >
            {cancelLabel}
          </button>
          <button
            type="button"
            onClick={() => respond(true)}
            className={`grid h-9 place-items-center rounded-lg px-4 text-sm font-medium text-white ${danger ? 'bg-danger-text' : 'bg-btn'}`}
          >
            {confirmLabel}
          </button>
        </div>
      </div>
    </div>
  );
}