<script lang="ts">
  interface Props {
    title: string;
    message: string;
    confirmText?: string;
    cancelText?: string;
    destructive?: boolean;
    onConfirm: () => void;
    onCancel: () => void;
  }

  let {
    title,
    message,
    confirmText = "Confirm",
    cancelText = "Cancel",
    destructive = false,
    onConfirm,
    onCancel,
  }: Props = $props();

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

<svelte:window onkeydown={handleKeydown} />

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="dialog-overlay" onclick={onCancel}>
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div class="dialog-content" onclick={(e) => e.stopPropagation()}>
    <h2 class="dialog-title">{title}</h2>
    <p class="dialog-message">{message}</p>

    <div class="dialog-actions">
      <button class="btn-cancel" onclick={onCancel}>
        {cancelText}
      </button>
      <button class="btn-confirm" class:destructive onclick={onConfirm}>
        {confirmText}
      </button>
    </div>
  </div>
</div>

<style>
  .dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .dialog-content {
    margin: 0 1rem;
    width: 100%;
    max-width: 28rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .dialog-title {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .dialog-message {
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
  }

  .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .btn-cancel {
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .btn-cancel:hover {
    background-color: var(--bg-secondary);
  }

  .btn-confirm {
    border-radius: 0.375rem;
    border: none;
    background-color: var(--accent-primary);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .btn-confirm:hover {
    background-color: var(--accent-secondary);
  }

  .btn-confirm.destructive {
    background-color: #dc2626;
  }

  .btn-confirm.destructive:hover {
    background-color: #b91c1c;
  }
</style>
