<script lang="ts">
  import type { Snippet } from 'svelte';

  let {
    title,
    open,
    onClose,
    children
  }: {
    title: string;
    open: boolean;
    onClose: () => void;
    children: Snippet;
  } = $props();

  let dialog: HTMLDivElement | undefined = $state();
  let previousFocus: HTMLElement | null = null;

  $effect(() => {
    if (open) {
      previousFocus = document.activeElement as HTMLElement | null;
      queueMicrotask(() => {
        const first = dialog?.querySelector<HTMLElement>(
          'button, input, select, textarea, [tabindex]:not([tabindex="-1"])'
        );
        first?.focus();
      });
    } else if (previousFocus) {
      previousFocus.focus();
      previousFocus = null;
    }
  });

  function onKeyDown(e: KeyboardEvent) {
    if (open && e.key === 'Escape') onClose();
  }
</script>

<svelte:window onkeydown={onKeyDown} />

{#if open}
  <div class="fixed inset-0 z-50 flex items-center justify-center p-4" role="presentation">
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <!-- Backdrop click closes modal; ESC handled at window level above. -->
    <div class="absolute inset-0 bg-black/50" onclick={onClose}></div>
    <div
      bind:this={dialog}
      role="dialog"
      aria-modal="true"
      aria-labelledby="modal-title"
      class="relative z-10 w-full max-w-md rounded-md border border-border bg-surface p-6 shadow-lg"
    >
      <h2 id="modal-title" class="mb-4 text-lg font-medium text-text-primary">{title}</h2>
      {@render children()}
    </div>
  </div>
{/if}
