<script lang="ts">
  interface Props {
    isOpen: boolean;
    tabName: string;
    onConfirm: () => void;
    onCancel: () => void;
  }

  const { isOpen, tabName, onConfirm, onCancel }: Props = $props();

  function handleKeydown(event: KeyboardEvent) {
    if (!isOpen) return;

    if (event.key === "Enter") {
      event.preventDefault();
      onConfirm();
    } else if (event.key === "Escape") {
      event.preventDefault();
      onCancel();
    }
  }
</script>

<svelte:window onkeydown={handleKeydown} />

{#if isOpen}
  <div
    class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4"
    onclick={onCancel}
    role="button"
    tabindex="0"
    onkeydown={(e) => e.key === " " && onCancel()}
  >
    <div
      class="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-lg shadow-xl max-w-md w-full"
      onclick={(e) => e.stopPropagation()}
      onkeydown={(e) => e.stopPropagation()}
      role="dialog"
      aria-labelledby="confirm-title"
      aria-describedby="confirm-message"
      tabindex="-1"
    >
      <div class="p-6">
        <div class="flex items-start gap-4">
          <div
            class="w-10 h-10 rounded-lg bg-yellow-500/20 flex items-center justify-center flex-shrink-0"
          >
            <svg
              class="w-6 h-6 text-yellow-500"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
              />
            </svg>
          </div>
          <div class="flex-1">
            <h3 id="confirm-title" class="text-lg font-semibold text-[var(--text-primary)] mb-1">
              Close Connected Tab?
            </h3>
            <p id="confirm-message" class="text-sm text-[var(--text-secondary)]">
              The tab "{tabName}" is currently connected to Claude. Are you sure you want to close
              it? This will disconnect the session.
            </p>
          </div>
        </div>

        <div class="flex gap-3 mt-6 justify-end">
          <button
            onclick={onCancel}
            class="px-4 py-2 text-sm font-medium text-gray-300 bg-[var(--bg-secondary)] hover:bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-lg transition-colors"
          >
            Cancel
          </button>
          <button
            onclick={onConfirm}
            class="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 rounded-lg transition-colors"
          >
            Close Tab
          </button>
        </div>
      </div>
    </div>
  </div>
{/if}

<style>
  [role="dialog"] {
    animation: slideIn 0.2s ease-out;
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: scale(0.95) translateY(10px);
    }
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
</style>
