<!--
  Modal wrapper for the pending-sync queue, opened from the offline banner's
  badge so the count is answerable where the user reads it.

  TRACES: UR-025 | DR-132
-->
<script lang="ts">
  import PendingSyncList from "./PendingSyncList.svelte";

  interface Props {
    isOpen: boolean;
    onClose: () => void;
  }

  let { isOpen, onClose }: Props = $props();

  function handleBackdropClick(event: MouseEvent) {
    if (event.target === event.currentTarget) onClose();
  }
</script>

{#if isOpen}
  <div
    class="fixed inset-0 z-50 flex items-end justify-center bg-black/60 p-0 sm:items-center sm:p-4"
    onclick={handleBackdropClick}
    onkeydown={(e) => { if (e.key === "Escape") onClose(); }}
    role="dialog"
    aria-modal="true"
    aria-labelledby="pending-sync-title"
    tabindex="-1"
  >
    <div
      class="flex max-h-[80vh] w-full flex-col rounded-t-2xl bg-[var(--color-surface)] shadow-2xl sm:max-h-[70vh] sm:max-w-lg sm:rounded-2xl"
      onclick={(e) => e.stopPropagation()}
      role="none"
    >
      <div class="flex items-center justify-between border-b border-gray-800 px-6 py-4">
        <h2 id="pending-sync-title" class="text-lg font-semibold text-white">
          Waiting to sync
        </h2>
        <button
          onclick={onClose}
          class="-m-2 p-2 text-gray-400 transition-colors hover:text-white"
          aria-label="Close"
        >
          <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
          </svg>
        </button>
      </div>

      <div class="flex-1 overflow-y-auto p-6">
        <PendingSyncList />
      </div>
    </div>
  </div>
{/if}
