(function () {
  const LOGOUT_URL = {{ lookup('sso', application_id, 'logout_url') | to_json }};
  const INJECTED_ATTR = "data-injected-logout";
  const LOGOUT_SVG =
    '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false">' +
      '<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>' +
      '<polyline points="10 17 15 12 10 7"/>' +
      '<line x1="15" y1="12" x2="3" y2="12"/>' +
    "</svg>";

  function findIconGroupAnchor() {
    const banner =
      document.querySelector(
        "header, [role='banner'], .navbar, nav.navbar, nav.menu-header",
      ) || document.querySelector("nav");
    if (!banner) return null;

    let best = null;
    let bestRight = -1;
    banner.querySelectorAll("div, ul, nav").forEach((el) => {
      const directControls = el.querySelectorAll(
        ":scope > button, :scope > a, :scope > li > button, :scope > li > a",
      );
      if (directControls.length < 2) return;
      const rect = el.getBoundingClientRect();
      if (rect.width === 0 || rect.height === 0) return;
      if (rect.right > bestRight) {
        best = el;
        bestRight = rect.right;
      }
    });
    return best || banner;
  }

  function ensureLogoutIcon() {
    if (document.querySelector("[" + INJECTED_ATTR + "]")) return;
    if (!document.body) return;

    const anchor = findIconGroupAnchor();

    const btn = document.createElement("a");
    btn.setAttribute(INJECTED_ATTR, "true");
    btn.setAttribute("href", LOGOUT_URL);
    btn.setAttribute("title", "Logout");
    btn.setAttribute("aria-label", "Logout");
    btn.addEventListener(
      "click",
      (e) => {
        e.preventDefault();
        window.location.href = LOGOUT_URL;
      },
      { capture: true },
    );

    if (anchor) {
      const sibling = anchor.querySelector(
        ":scope > button, :scope > a, :scope > li > button, :scope > li > a",
      );
      btn.style.cssText = [
        "display:inline-flex",
        "align-items:center",
        "justify-content:center",
        "padding:4px",
        "color:inherit",
        "cursor:pointer",
        "text-decoration:none",
      ].join(";");
      if (sibling) btn.className = sibling.className;
      btn.innerHTML = LOGOUT_SVG;
      anchor.appendChild(btn);
      return;
    }

    btn.style.cssText = [
      "position:fixed",
      "top:6px",
      "right:8px",
      "z-index:2147483647",
      "display:inline-flex",
      "align-items:center",
      "gap:4px",
      "padding:4px 8px",
      "background:rgba(20,20,20,0.85)",
      "color:#fff",
      "border:1px solid rgba(255,255,255,0.25)",
      "border-radius:6px",
      "font:13px/1.2 sans-serif",
      "cursor:pointer",
      "text-decoration:none",
    ].join(";");
    btn.innerHTML = LOGOUT_SVG + "<span>Logout</span>";
    document.body.appendChild(btn);
  }

  function start() {
    ensureLogoutIcon();
    if (!("MutationObserver" in window)) return;
    new MutationObserver(() => ensureLogoutIcon()).observe(document.body, {
      childList: true,
      subtree: true,
    });
    setTimeout(ensureLogoutIcon, 750);
    setTimeout(ensureLogoutIcon, 2500);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", start, { once: true });
  } else {
    start();
  }
})();