{# Confirmation modal, the Dialog port from shadcn/ui. It covers both
   places an "are you sure" prompt appears: an Action's form, and the
   list's per-row Delete. One teleported instance backs both, opening on
   a window-level `action-confirm-request` event carrying
   `{message, onConfirm}`. `onConfirm` is a plain callback because a
   form submit and htmx's confirm hook need different follow-through
   (`form.submit()` versus `issueRequest(true)`), so the modal stays
   agnostic.

   The confirmation text is never serialized into a JS or HTML string:
   it arrives as an attribute value or as htmx's own event detail, and
   is handed to the modal through a CustomEvent as a live JS value,
   never re-embedded into markup. #}
<template x-teleport="body">
  {# Assigning the callback straight from the event in one statement
     makes Alpine invoke it immediately rather than store it: the modal
     would flash open with the action already done. Routing it through a
     plain local first avoids that. #}
  <div x-data="{ open: false, message: '', onConfirm: null }"
       @action-confirm-request.window="let cb = $event.detail.onConfirm; onConfirm = cb; message = $event.detail.message; open = true"
       @keydown.escape.window="open = false"
       x-show="open" x-cloak
       class="fixed inset-0 z-[99]">
    <div x-show="open"
         x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
         x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
         @click="open = false" class="{{ ui('dialog', 'overlay') }}"></div>
    <div class="{{ ui('dialog', 'container') }}">
      <div x-show="open"
           x-trap.inert.noscroll="open"
           x-transition:enter="ease-out duration-300"
           x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
           x-transition:leave="ease-in duration-200"
           x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
           x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
           class="{{ ui('dialog', 'content-sm') }}">
        <h3 class="{{ ui('dialog', 'title') }}">{{ _("Confirm") }}</h3>
        <p class="{{ ui('dialog', 'description') }}" x-text="message"></p>
        <div class="{{ ui('dialog', 'footer') }}">
          <button type="button" @click="open = false; onConfirm = null"
                  class="{{ ui('button', 'outline', 'size-sm') }}">
            {{ _("Cancel") }}
          </button>
          <button type="button"
                  @click="open = false; if (onConfirm) { onConfirm(); onConfirm = null; }"
                  class="{{ ui('button', 'size-sm') }}">
            {{ _("Confirm") }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // Wired into a form's onsubmit as:
  //   onsubmit="return window.adminConfirmSubmit(event, this, this.dataset.confirm)"
  // `message` falsy (no confirmation required for this action) lets the
  // submit through untouched.
  window.adminConfirmSubmit = window.adminConfirmSubmit || function (event, form, message) {
    if (!message) return true;
    event.preventDefault();
    window.dispatchEvent(new CustomEvent("action-confirm-request", {
      detail: { message: message, onConfirm: function () { form.submit(); } },
    }));
    return false;
  };

  // Replaces htmx's native window.confirm() (triggered by hx-confirm,
  // e.g. the list view's row-level Delete button) with this same
  // modal. htmx fires "htmx:confirm" before every hx-* request and, if
  // preventDefault() is called, waits for evt.detail.issueRequest(true)
  // instead of proceeding immediately -- this is htmx's documented hook
  // for swapping in a custom confirmation dialog.
  document.body.addEventListener("htmx:confirm", function (evt) {
    if (!evt.detail.question) return;
    evt.preventDefault();
    window.dispatchEvent(new CustomEvent("action-confirm-request", {
      detail: {
        message: evt.detail.question,
        onConfirm: function () { evt.detail.issueRequest(true); },
      },
    }));
  });
</script>