{# Toast notifications: Sonner, the toaster shadcn/ui ships.

   Sonner's anatomy is kept -- a column of cards in the bottom-right
   corner, each led by the icon for its level, with the title and
   description stacked beside it and a close button parked half outside
   the top-left corner that only appears on hover. So is the timer
   pausing while the pointer rests on a toast, which is what makes a
   four-second message readable.

   What is not ported is Sonner's collapsed peek-stack: three toasts
   visible, the ones behind scaled down and offset, expanding on hover.
   That choreography is for an app raising toasts continuously; this
   admin only ever shows the handful of flash messages a redirect
   leaves, so they stack plainly.

   Flash messages arrive as plain data rather than a JS call, and are
   relayed into `toast()` through a hidden data-* element, so a message
   containing quotes can never break out of an interpolated JS
   string. #}
{% from "admin/components/icons.html" import icon %}
{% if messages %}
<div id="flash-messages" class="hidden" aria-hidden="true">
  {% for message in messages %}
  <span data-level="{{ message.level }}" data-text="{{ message.text }}"></span>
  {% endfor %}
</div>
{% endif %}

<template x-teleport="body">
  <ol x-data="adminToaster()" @toast-show.window="push($event.detail)"
      tabindex="-1" aria-label="{{ _('Notifications') }}"
      class="{{ ui('toast', 'list') }}" x-cloak>
    <template x-for="toast in toasts" :key="toast.id">
      {# role=status rather than alert: a flash message is a report of
         something that already happened, so it should not interrupt a
         screen reader mid-sentence. #}
      <li role="status" aria-live="polite" aria-atomic="true" :data-type="toast.type"
          @mouseenter="pause(toast)" @mouseleave="resume(toast)"
          x-show="toast.visible"
          {# Sonner's own curves: it rises from below the viewport edge
             and leaves the same way, quickly. #}
          x-transition:enter="transition duration-[400ms] ease-[cubic-bezier(0.21,1.02,0.73,1)]"
          x-transition:enter-start="translate-y-full opacity-0"
          x-transition:enter-end="translate-y-0 opacity-100"
          x-transition:leave="transition duration-200 ease-[cubic-bezier(0.06,0.71,0.55,1)]"
          x-transition:leave-start="translate-y-0 opacity-100"
          x-transition:leave-end="translate-y-full opacity-0"
          class="{{ ui('toast', 'root') }}">
        {# A plain toast carries no icon, exactly as Sonner's does. #}
        <span x-show="toast.type !== 'default'" class="{{ ui('toast', 'icon') }}"
              :class="{ 'text-emerald-600 dark:text-emerald-400': toast.type === 'success',
                        'text-amber-600 dark:text-amber-400': toast.type === 'warning',
                        'text-destructive': toast.type === 'danger' }">
          <span x-show="toast.type === 'success'">{{ icon("check-circle", "size-4") }}</span>
          <span x-show="toast.type === 'warning'">{{ icon("alert-triangle", "size-4") }}</span>
          <span x-show="toast.type === 'danger'">{{ icon("x-circle", "size-4") }}</span>
        </span>
        <div class="min-w-0 flex-1">
          <p class="{{ ui('toast', 'title') }}" x-text="toast.message"></p>
          <p x-show="toast.description" class="{{ ui('toast', 'description') }}" x-text="toast.description"></p>
        </div>
        <button type="button" @click="dismiss(toast)" aria-label="{{ _('Close') }}"
                class="{{ ui('toast', 'close') }}">
          {{ icon("close", "size-3") }}
        </button>
      </li>
    </template>
  </ol>
</template>

<script>
  // The toaster's queue. Each toast owns its own timer so that hovering
  // one holds only that one open.
  window.adminToaster = window.adminToaster || function () {
    return {
      toasts: [],
      // Sonner's defaults: four seconds on screen, and 200ms for the
      // leave transition to play before the node is dropped.
      duration: 4000,
      leaveMs: 200,

      push: function (detail) {
        this.toasts.push({
          id: "toast-" + Math.random().toString(16).slice(2),
          message: detail.message,
          description: detail.description || "",
          type: detail.type || "default",
          visible: false,
          timer: null,
          remaining: this.duration,
          startedAt: 0,
        });
        // Alpine's reactivity only tracks writes made through the proxy,
        // so everything past this point works on the array's element,
        // never on the object literal above.
        var toast = this.toasts[this.toasts.length - 1];
        var self = this;
        // x-show needs to render the element hidden once before it has
        // an "off" state to animate away from; without the gap the toast
        // simply appears.
        setTimeout(function () { toast.visible = true; self.resume(toast); }, 10);
      },

      pause: function (toast) {
        if (!toast.timer) return;
        clearTimeout(toast.timer);
        toast.timer = null;
        toast.remaining -= Date.now() - toast.startedAt;
      },

      resume: function (toast) {
        if (toast.timer || !toast.visible) return;
        var self = this;
        toast.startedAt = Date.now();
        toast.timer = setTimeout(function () { self.dismiss(toast); }, toast.remaining);
      },

      dismiss: function (toast) {
        this.pause(toast);
        toast.visible = false;
        var self = this;
        setTimeout(function () {
          var i = self.toasts.indexOf(toast);
          if (i > -1) self.toasts.splice(i, 1);
        }, this.leaveMs);
      },
    };
  };

  window.toast = window.toast || function (message, options) {
    options = options || {};
    window.dispatchEvent(new CustomEvent("toast-show", {
      detail: { type: options.type || "default", message: message, description: options.description || "" },
    }));
  };
  // Deferred to DOMContentLoaded: Alpine loads via `defer` (base.html),
  // so it only walks the DOM -- and attaches the teleported toast
  // container's @toast-show.window listener -- once the document has
  // finished parsing. This script is a plain inline <script>, which
  // (unlike `defer`d ones) runs immediately at its position in the
  // document; dispatching straight away fired the event before that
  // listener existed, so the toast silently never appeared. Deferred
  // scripts always finish before DOMContentLoaded fires, so waiting
  // for it guarantees Alpine has already initialized.
  document.addEventListener("DOMContentLoaded", function () {
    document.querySelectorAll("#flash-messages [data-text]").forEach(function (el) {
      var type = { error: "danger", warning: "warning", success: "success" }[el.dataset.level] || "default";
      window.toast(el.dataset.text, { type: type });
    });
  });
</script>