{# P2-T14 / P3-T24: shared browser-notification helper.

  Single shared helper that fires either a native Browser Notification
  (preferred) or an in-page toast (fallback) when an async admin action
  finishes. Designed to be reused across the LLM re-run flow (P2-T14)
  and the replay-completion flow (P3-T24).

  Design contract
  ---------------

  * Vanilla JS only -- ``Notification``, ``localStorage``,
    ``URLSearchParams``, ``document.querySelector``. No framework,
    no dependency on jQuery / fetch helpers.
  * Permission is NEVER requested on page load. The page that wires
    this helper in is responsible for calling
    ``window.reconNotify.requestPermission()`` from inside a user
    gesture (e.g. the first click on the ``run`` button) -- otherwise
    browsers either ignore the prompt or count it toward a permanent
    ``denied`` decision.
  * ``fire(...)`` is idempotent per ``tag`` within a 30 s window:
    the same tag never produces two notifications back-to-back (so
    a Back / Forward navigation that re-renders the page with the
    same ``?just_ran=`` query param doesn't double-fire).
  * Native notifications carry the ``tag`` so the browser collapses
    duplicates server-side too.
  * Toast fallback: bottom-right, ~320px wide, ``--bg-2`` background,
    ``--accent`` left border, ``--ink`` text. Click anywhere on the
    toast body navigates to ``url``; the ``×`` button dismisses it
    without navigating. Auto-dismisses after 6 s.
  * Accessibility: toast is ``role="status"`` + ``aria-live="polite"``
    so screen readers announce the message. The close button is a
    real ``<button>`` with ``aria-label="dismiss notification"``.

  Styles are emitted by the ``notify_styles()`` macro: call it ONCE
  per page (same shape as ``tip_styles()`` in ``help_tooltip.html``).
#}

{% macro notify_styles() -%}
<style>
  /* ── In-page toast fallback ─────────────────── */
  .recon-toast-stack {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
  }
  .recon-toast {
    width: 320px;
    padding: 12px 36px 12px 14px;
    background: var(--bg-2);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--accent);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.5;
    cursor: pointer;
    position: relative;
    pointer-events: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    animation: recon-toast-in 180ms ease-out;
  }
  .recon-toast.is-leaving {
    animation: recon-toast-out 160ms ease-in forwards;
  }
  .recon-toast .recon-toast__title {
    color: var(--ink);
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 2px;
    font-size: 11.5px;
  }
  .recon-toast .recon-toast__body {
    color: var(--ink-2);
    font-size: 11px;
    word-break: break-word;
  }
  .recon-toast .recon-toast__close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  .recon-toast .recon-toast__close:hover {
    color: var(--accent);
    border-color: var(--rule-2);
  }
  @keyframes recon-toast-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes recon-toast-out {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(12px); }
  }
</style>
<script>
// P2-T14 / P3-T24 -- shared browser-notification helper.
//
// Public API on ``window.reconNotify``:
//
//   requestPermission()
//     Asks the browser for Notification permission, but only when the
//     current state is ``default`` (never asked). Safe to call from a
//     click handler; no-op when permission is already ``granted`` or
//     ``denied``. Returns a Promise that resolves to the final
//     permission state.
//
//   fire({title, body, tag, url})
//     Fires a notification. Native Notification if permission is
//     ``granted`` and the API exists; in-page toast fallback otherwise.
//     ``tag`` debounces: the same tag within 30 s is suppressed so a
//     Back / Forward navigation that re-renders the trigger doesn't
//     double-fire. ``url`` is navigated to when the user clicks either
//     the native notification or the toast body (not the ``×`` button).
(function () {
  if (window.reconNotify) return;  // already loaded

  var DEBOUNCE_MS = 30 * 1000;
  var TOAST_AUTO_DISMISS_MS = 6000;
  var STORAGE_PREFIX = 'recon-notify:';

  function hasNotificationApi() {
    return typeof window.Notification === 'function';
  }

  function currentPermission() {
    if (!hasNotificationApi()) return 'denied';
    try {
      return window.Notification.permission || 'default';
    } catch (e) {
      return 'denied';
    }
  }

  function debounced(tag) {
    if (!tag) return false;
    try {
      var key = STORAGE_PREFIX + tag;
      var last = window.localStorage.getItem(key);
      var now = Date.now();
      if (last && (now - parseInt(last, 10)) < DEBOUNCE_MS) {
        return true;
      }
      window.localStorage.setItem(key, String(now));
      return false;
    } catch (e) {
      // localStorage unavailable (private mode, quota) -- fall through
      // and just fire; the worst case is one accidental duplicate.
      return false;
    }
  }

  function ensureStack() {
    var stack = document.getElementById('recon-toast-stack');
    if (!stack) {
      stack = document.createElement('div');
      stack.id = 'recon-toast-stack';
      stack.className = 'recon-toast-stack';
      document.body.appendChild(stack);
    }
    return stack;
  }

  function dismissToast(toast) {
    if (!toast || toast._dismissed) return;
    toast._dismissed = true;
    toast.classList.add('is-leaving');
    window.setTimeout(function () {
      if (toast.parentNode) toast.parentNode.removeChild(toast);
    }, 200);
  }

  function fireToast(opts) {
    var stack = ensureStack();
    var toast = document.createElement('div');
    toast.className = 'recon-toast';
    toast.setAttribute('role', 'status');
    toast.setAttribute('aria-live', 'polite');

    var titleEl = document.createElement('div');
    titleEl.className = 'recon-toast__title';
    titleEl.textContent = opts.title || 'notification';

    var bodyEl = document.createElement('div');
    bodyEl.className = 'recon-toast__body';
    bodyEl.textContent = opts.body || '';

    var closeBtn = document.createElement('button');
    closeBtn.type = 'button';
    closeBtn.className = 'recon-toast__close';
    closeBtn.setAttribute('aria-label', 'dismiss notification');
    closeBtn.textContent = '×';  // ×
    closeBtn.addEventListener('click', function (ev) {
      ev.stopPropagation();
      dismissToast(toast);
    });

    toast.appendChild(titleEl);
    toast.appendChild(bodyEl);
    toast.appendChild(closeBtn);

    if (opts.url) {
      toast.addEventListener('click', function () {
        window.location.assign(opts.url);
      });
    }

    stack.appendChild(toast);
    window.setTimeout(function () { dismissToast(toast); }, TOAST_AUTO_DISMISS_MS);
  }

  function fireNative(opts) {
    try {
      var n = new window.Notification(opts.title || 'notification', {
        body: opts.body || '',
        tag: opts.tag || undefined,
      });
      if (opts.url) {
        n.onclick = function () {
          window.focus();
          window.location.assign(opts.url);
          n.close();
        };
      }
      return true;
    } catch (e) {
      return false;
    }
  }

  window.reconNotify = {
    requestPermission: function () {
      if (!hasNotificationApi()) {
        return Promise.resolve('denied');
      }
      var state = currentPermission();
      if (state !== 'default') {
        return Promise.resolve(state);
      }
      try {
        var result = window.Notification.requestPermission();
        // Older Safari uses the callback form -- normalise to Promise.
        if (result && typeof result.then === 'function') return result;
        return Promise.resolve(currentPermission());
      } catch (e) {
        return Promise.resolve('denied');
      }
    },

    fire: function (opts) {
      opts = opts || {};
      if (debounced(opts.tag)) return;
      if (hasNotificationApi() && currentPermission() === 'granted') {
        if (fireNative(opts)) return;
      }
      fireToast(opts);
    },
  };
})();
</script>
{%- endmacro -%}