(function () {
  const root = document.querySelector("[data-api-docs]");
  if (!root) {
    return;
  }

  const panels = Array.from(root.querySelectorAll("[data-doc-panel]"));
  const navLinks = Array.from(root.querySelectorAll("[data-doc-link]"));
  const DEFAULT = "home";

  function activate(name, focus) {
    let matched = false;
    panels.forEach((panel) => {
      const on = panel.dataset.docPanel === name;
      panel.classList.toggle("is-active", on);
      if (on) {
        matched = true;
      }
    });
    if (!matched) {
      return false;
    }
    root.querySelectorAll(".api-nav-link").forEach((link) => {
      link.classList.toggle(
        "is-active",
        link.getAttribute("href") === "#" + name
      );
    });
    if (focus) {
      const panel = root.querySelector('[data-doc-panel="' + name + '"]');
      if (panel) {
        panel.focus({ preventScroll: true });
      }
    }
    return true;
  }

  // Resolve the current hash to a panel. The hash can point at a panel id
  // (e.g. #endpoints) or at any element inside a panel (e.g. #ep-upload),
  // letting FAQ answers deep-link straight into the reference.
  function resolveHash(focus) {
    const id = (location.hash || "").slice(1);
    if (!id) {
      activate(DEFAULT, focus);
      return;
    }
    const target = document.getElementById(id);
    if (!target) {
      activate(DEFAULT, focus);
      return;
    }
    const panel = target.closest("[data-doc-panel]");
    const name = panel ? panel.dataset.docPanel : DEFAULT;
    activate(name, focus && target === panel);
    if (panel && target !== panel) {
      // Scroll the deep-linked element into view once its panel is visible.
      window.requestAnimationFrame(() => {
        target.scrollIntoView({ block: "start", behavior: "smooth" });
      });
    } else {
      window.scrollTo({ top: 0, behavior: "smooth" });
    }
  }

  window.addEventListener("hashchange", () => resolveHash(true));

  navLinks.forEach((link) => {
    link.addEventListener("click", () => {
      // hashchange handles activation; this keeps top-level nav clicks snappy.
      if (link.getAttribute("href") === location.hash) {
        resolveHash(true);
      }
    });
  });

  // Add a copy button to every code block.
  root.querySelectorAll(".code-block").forEach((block) => {
    const pre = block.querySelector("pre");
    if (!pre) {
      return;
    }
    const button = document.createElement("button");
    button.type = "button";
    button.className = "copy-btn";
    button.textContent = "Copy";
    button.setAttribute("aria-label", "Copy code");
    button.addEventListener("click", () => {
      window.Warpbox.copyText(pre.innerText.trim(), button, "Copied");
    });
    block.appendChild(button);
  });

  resolveHash(false);
})();