astrolabe/src/app/components/ConfirmDialog.tsx

import { useConfirmStore } from '../stores/ConfirmStore';
import { useFocusTrap } from '../hooks/useFocusTrap';
import styles from './ConfirmDialog.module.css';

/**
 * Renders the active confirmation request from ConfirmStore (one global
 * instance, mounted once at the app root). The in-app replacement for
 * `window.confirm` — see docs/architecture/03 → "Confirmation & alert dialogs".
 *
 * Dismissal follows Carbon's transactional-modal rule: the user must pick an
 * action. Escape and the Cancel button resolve `false`; a backdrop click does
 * NOT dismiss (unlike passive feature modals) so a destructive choice is never
 * made by an accidental outside click. For `danger` requests, focus defaults to
 * Cancel so a stray Enter can't destroy anything.
 */
export function ConfirmDialog() {
  const request = useConfirmStore((s) => s.request);
  const resolve = useConfirmStore((s) => s.resolve);

  // Focus Cancel first for destructive prompts, the primary action otherwise.
  const initialFocus = request?.danger ? `.${styles.cancel}` : `.${styles.confirm}`;
  const trapRef = useFocusTrap<HTMLDivElement>(request !== null, initialFocus);

  if (!request) return null;

  const { title, message, confirmLabel, cancelLabel, danger } = request;

  return (
    <div className={styles.backdrop} onKeyDown={(e) => e.key === 'Escape' && resolve(false)}>
      <div
        ref={trapRef}
        className={styles.dialog}
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="confirm-title"
        aria-describedby="confirm-message"
      >
        <h2 id="confirm-title" className={styles.title}>
          {title}
        </h2>
        <p id="confirm-message" className={styles.message}>
          {message}
        </p>
        <div className={styles.actions}>
          <button type="button" className={styles.cancel} onClick={() => resolve(false)}>
            {cancelLabel ?? 'Cancel'}
          </button>
          <button
            type="button"
            className={`${styles.confirm} ${danger ? styles.danger : ''}`}
            onClick={() => resolve(true)}
          >
            {confirmLabel ?? 'Confirm'}
          </button>
        </div>
      </div>
    </div>
  );
}