<!-- #region UI.ConfirmDialog [C:2] [TYPE Component] [SEMANTICS confirm,dialog,modal,delete,action,ui,atom] -->
<!-- @ingroup UI -->
<!-- @BRIEF Confirmation dialog replacing native window.confirm() with styled modal. -->
<!-- @LAYER UI -->
<!-- @UX_STATE Open   -> Backdrop + centered dialog with message, confirm/cancel buttons. -->
<!-- @UX_STATE Closed -> Nothing rendered. -->
<!-- @UX_RECOVERY Cancel button or backdrop click to dismiss. -->
<script lang="ts">
  import { Button } from "$lib/ui";

  let {
    show = $bindable(false),
    title = "Confirm",
    message = "",
    confirmLabel = "Confirm",
    cancelLabel = "Cancel",
    variant = "primary" as "primary" | "destructive",
    onConfirm,
    onCancel,
  } = $props();

  function handleConfirm() {
    show = false;
    if (onConfirm) onConfirm();
  }

  function handleCancel() {
    show = false;
    if (onCancel) onCancel();
  }

  function handleBackdrop(e: MouseEvent) {
    if (e.target === e.currentTarget) handleCancel();
  }

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === "Escape") handleCancel();
  }
</script>

{#if show}
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
    onclick={handleBackdrop}
    onkeydown={handleKeydown}
  >
    <div
      class="bg-surface-card rounded-xl shadow-xl p-6 max-w-md w-full mx-4 border border-border"
      role="alertdialog"
      aria-modal="true"
      aria-label={title}
    >
      <h3 class="text-lg font-semibold text-text mb-2">{title}</h3>
      {#if message}
        <p class="text-sm text-text-muted mb-6">{message}</p>
      {/if}
      <div class="flex justify-end gap-3">
        <Button variant="secondary" onclick={handleCancel}>
          {cancelLabel}
        </Button>
        <Button variant={variant} onclick={handleConfirm}>
          {confirmLabel}
        </Button>
      </div>
    </div>
  </div>
{/if}
<!-- #endregion UI.ConfirmDialog -->
