// Floating preview banner. Injected into every SSR HTML response via nginx sub_filter.
// Fetches /preview/info.json (rendered by entrypoint.sh at container start) for PR metadata.
(function () {
  if (window.__previewBannerLoaded) return;
  window.__previewBannerLoaded = true;

  function esc(s) {
    return String(s == null ? "" : s).replace(/[<>&"']/g, function (c) {
      return { "<": "&lt;", ">": "&gt;", "&": "&amp;", '"': "&quot;", "'": "&#39;" }[c];
    });
  }

  fetch("/preview/info.json", { cache: "no-store" })
    .then(function (r) { return r.ok ? r.json() : null; })
    .then(function (info) {
      if (!info || !info.prNumber) return;

      var css = [
        ".pp-badge{position:fixed;bottom:14px;right:14px;z-index:2147483647;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-size:12px;color:#fff}",
        ".pp-pill{background:#1a1a2e;padding:8px 13px;border-radius:999px;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);user-select:none;display:flex;align-items:center;gap:8px;line-height:1}",
        ".pp-pill:hover{background:#252544}",
        ".pp-dot{width:8px;height:8px;background:#5bbe8b;border-radius:50%;box-shadow:0 0 8px #5bbe8b;flex:none}",
        ".pp-panel{display:none;position:absolute;bottom:42px;right:0;background:#1a1a2e;color:#e0e0e0;padding:18px 18px 6px;border-radius:10px;min-width:300px;box-shadow:0 10px 30px rgba(0,0,0,.45)}",
        ".pp-badge.pp-open .pp-panel{display:block}",
        ".pp-section{margin-bottom:14px}",
        ".pp-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1.2px;color:#5bbe8b;margin-bottom:6px}",
        ".pp-title{font-size:13px;font-weight:500;line-height:1.35;word-break:break-word}",
        ".pp-meta{font-size:11px;opacity:.65;margin-top:3px;word-break:break-all}",
        ".pp-btn{color:#a8d5f0;text-decoration:none;display:inline-block;padding:5px 9px;border:1px solid #2d2d4a;border-radius:5px;margin:3px 4px 3px 0;font-size:11.5px;transition:background .12s}",
        ".pp-btn:hover{background:#2d2d4a;color:#fff;border-color:#3d3d5a}",
        ".pp-close{float:right;cursor:pointer;color:#666;font-size:18px;line-height:1;margin-top:-6px;margin-right:-6px;padding:4px 8px}",
        ".pp-close:hover{color:#fff}",
      ].join("");

      var style = document.createElement("style");
      style.textContent = css;
      document.head.appendChild(style);

      var loginRoles = [
        ["admin",      "Admin"],
        ["partner",    "Partner"],
        ["instructor", "Instructor"],
        ["csm",        "CSM"],
        ["assistant",  "Assistant"],
      ];
      var loginButtons = loginRoles.map(function (r) {
        return '<a class="pp-btn" href="/preview/login-as.html?role=' + r[0] + '&redirect=' + encodeURIComponent(location.pathname + location.search) + '">' + r[1] + "</a>";
      }).join("");

      var wrap = document.createElement("div");
      wrap.className = "pp-badge";
      wrap.innerHTML =
        '<div class="pp-pill"><span class="pp-dot"></span><span>PR #' + esc(info.prNumber) + " preview</span></div>" +
        '<div class="pp-panel">' +
          '<span class="pp-close" title="Close">&times;</span>' +
          '<div class="pp-section">' +
            '<div class="pp-label">Pull request</div>' +
            '<div class="pp-title">' + esc(info.title || ("PR #" + info.prNumber)) + "</div>" +
            (info.branch ? '<div class="pp-meta">' + esc(info.branch) + "</div>" : "") +
          "</div>" +
          '<div class="pp-section">' +
            '<div class="pp-label">Login as</div>' +
            loginButtons +
          "</div>" +
          '<div class="pp-section">' +
            '<div class="pp-label">Tools</div>' +
            '<a class="pp-btn" href="/emails/" target="_blank">View emails</a>' +
            (info.prUrl ? '<a class="pp-btn" href="' + esc(info.prUrl) + '" target="_blank">Open PR</a>' : "") +
          "</div>" +
        "</div>";
      document.body.appendChild(wrap);

      var pill = wrap.querySelector(".pp-pill");
      var close = wrap.querySelector(".pp-close");
      pill.addEventListener("click", function (e) {
        e.stopPropagation();
        wrap.classList.toggle("pp-open");
      });
      close.addEventListener("click", function (e) {
        e.stopPropagation();
        wrap.classList.remove("pp-open");
      });
      document.addEventListener("click", function (e) {
        if (!wrap.contains(e.target)) wrap.classList.remove("pp-open");
      });
    })
    .catch(function () { /* swallow — preview banner is non-critical */ });
})();