<script lang="ts">
  import { enhance } from "$app/forms";
  import type { SubmitFunction } from "@sveltejs/kit";

  /** Controls visibility. */
  export let isOpen = false;
  /** Dialog heading, e.g. "Delete User". */
  export let title: string;
  /** The ID value sent as a hidden input named "id". */
  export let idValue: string;
  /** The form ?/action target, e.g. "?/deleteUser". */
  export let formAction: string;
  /** Label for the submit button, e.g. "Delete User". */
  export let confirmLabel: string = "Delete";
  /** Whether the deletion request is in flight. */
  export let isDeleting = false;
  /** Error message to display under the body. */
  export let error = "";
  /** Called when the user cancels or presses Escape. */
  export let onCancel: () => void = () => {};
  /**
   * Called by the SvelteKit enhance action when the form completes.
   * If omitted the default SvelteKit behaviour is used.
   */
  export let handleEnhance: SubmitFunction | undefined = undefined;
</script>

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

{#if isOpen}
  <!-- svelte-ignore a11y_click_events_have_key_events -->
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div class="confirm-backdrop" on:click={onCancel}>
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_static_element_interactions -->
    <div
      class="confirm-dialog"
      role="alertdialog"
      aria-modal="true"
      aria-labelledby="confirm-title"
      tabindex="-1"
      on:click|stopPropagation
    >
      <div class="confirm-icon-wrap">
        <svg
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="1.75"
          width="22"
          height="22"
        >
          <polyline points="3 6 5 6 21 6" />
          <path d="M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6" />
          <path d="M10 11v6M14 11v6" />
          <path d="M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2" />
        </svg>
      </div>

      <h3 id="confirm-title" class="confirm-title">{title}</h3>

      <!-- Body: use a slot so callers can insert custom warning content -->
      <p class="confirm-body">
        <slot />
      </p>

      {#if error}
        <p class="confirm-error">{error}</p>
      {/if}

      <div class="confirm-actions">
        <button
          type="button"
          class="btn-cancel"
          on:click={onCancel}
          disabled={isDeleting}
        >
          Cancel
        </button>
        <form
          method="POST"
          action={formAction}
          use:enhance={handleEnhance ?? (() => {})}
        >
          <input type="hidden" name="id" value={idValue} />
          <button
            type="submit"
            class="btn-delete-confirm"
            disabled={isDeleting}
          >
            {isDeleting ? "Deleting…" : confirmLabel}
          </button>
        </form>
      </div>
    </div>
  </div>
{/if}

<style>
  .confirm-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(2px);
  }

  .confirm-dialog {
    background: var(--surface-primary, #1e1e2e);
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
    border-radius: 14px;
    padding: 28px 28px 24px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }

  .confirm-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ef4444;
    margin-bottom: 4px;
  }

  .confirm-title {
    margin: 0;
    font-size: 16px;
    font-weight: 650;
    color: var(--text-primary);
  }

  .confirm-body {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
  }

  .confirm-error {
    margin: 0;
    font-size: 12px;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 6px;
    padding: 6px 10px;
    width: 100%;
  }

  .confirm-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
    justify-content: flex-end;
  }

  .btn-cancel,
  .btn-delete-confirm {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 550;
    cursor: pointer;
    transition: all 0.15s;
  }

  .btn-cancel {
    background: var(--surface-secondary, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border-primary, rgba(255, 255, 255, 0.08));
    color: var(--text-primary);
  }

  .btn-cancel:hover:not(:disabled) {
    background: var(--surface-hover, rgba(255, 255, 255, 0.1));
  }

  .btn-delete-confirm {
    background: #ef4444;
    border: 1px solid transparent;
    color: #fff;
  }

  .btn-delete-confirm:hover:not(:disabled) {
    background: #dc2626;
  }

  .btn-cancel:disabled,
  .btn-delete-confirm:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
</style>
