<script lang="ts">
  export let isOpen = false;
  export let title = "Unsaved Changes";
  export let message =
    "You have unsaved changes. Are you sure you want to leave?";
  export let onDiscard: () => void = () => {};
  export let onCancel: () => void = () => {};

  let isAnimating = false;

  function handleDiscard() {
    isAnimating = true;
    setTimeout(() => {
      onDiscard();
      isOpen = false;
      isAnimating = false;
    }, 150);
  }

  function handleCancel() {
    onCancel();
    isOpen = false;
  }
</script>

<svelte:window
  on:keydown={(e) => isOpen && e.key === "Escape" && handleCancel()}
/>

{#if isOpen}
  <div class="confirmation-backdrop" on:click|stopPropagation={handleCancel}>
    <div
      class="confirmation-dialog"
      class:animating={isAnimating}
      on:click|stopPropagation
    >
      <div class="dialog-header">
        <h3>{title}</h3>
      </div>
      <div class="dialog-body">
        {message}
      </div>
      <div class="dialog-footer">
        <button type="button" class="btn-cancel" on:click={handleCancel}>
          Keep Editing
        </button>
        <button type="button" class="btn-discard" on:click={handleDiscard}>
          Discard Changes
        </button>
      </div>
    </div>
  </div>
{/if}

<style>
  .confirmation-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.15s ease-out;
  }

  .confirmation-dialog {
    background: var(--surface-primary, #1e1e2e);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
    min-width: 320px;
    max-width: 420px;
    animation: slideUp 0.2s ease-out;
  }

  .confirmation-dialog.animating {
    animation: slideDown 0.15s ease-in forwards;
  }

  .dialog-header {
    padding: 16px 20px 8px;
    border-bottom: 1px solid var(--border-primary, rgba(255, 255, 255, 0.06));
  }

  .dialog-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
  }

  .dialog-body {
    padding: 16px 20px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .dialog-footer {
    display: flex;
    gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--border-primary, rgba(255, 255, 255, 0.06));
    justify-content: flex-end;
  }

  button {
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
  }

  .btn-cancel {
    background: var(--bg-inset);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
  }

  .btn-cancel:hover {
    background: var(--card-hover-bg);
    border-color: var(--border-default);
    color: var(--text-primary);
  }

  .btn-discard {
    background: rgba(220, 38, 38, 0.15);
    color: #dc2626;
    border: 1px solid rgba(220, 38, 38, 0.3);
  }

  .btn-discard:hover {
    background: rgba(220, 38, 38, 0.25);
    border-color: rgba(220, 38, 38, 0.5);
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes slideUp {
    from {
      transform: translateY(12px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideDown {
    to {
      transform: translateY(-12px);
      opacity: 0;
    }
  }
</style>
