(() => {
  "use strict";
  const root = document.documentElement;
  const frame = document.querySelector("[data-app-frame]");
  const sidebar = document.querySelector("[data-sidebar]");
  const navToggle = document.querySelector("[data-nav-toggle]");
  let returnFocus = null;

  try {
    const storedTheme = localStorage.getItem("vacatureradar-theme");
    if (storedTheme === "light" || storedTheme === "dark") root.dataset.theme = storedTheme;
  } catch { /* Persistent storage is optional. */ }

  const themeToggle = document.querySelector("[data-theme-toggle]");
  const updateThemeLabel = () => {
    themeToggle?.setAttribute("aria-label", root.dataset.theme === "light" ? "Donker thema activeren" : "Licht thema activeren");
  };
  updateThemeLabel();
  themeToggle?.addEventListener("click", () => {
    const next = root.dataset.theme === "light" ? "dark" : "light";
    root.dataset.theme = next;
    updateThemeLabel();
    try { localStorage.setItem("vacatureradar-theme", next); } catch { /* Current page still updates. */ }
  });

  const closeNavigation = () => {
    frame?.classList.remove("nav-open");
    navToggle?.setAttribute("aria-expanded", "false");
    if (returnFocus instanceof HTMLElement) returnFocus.focus();
  };
  navToggle?.addEventListener("click", () => {
    returnFocus = document.activeElement;
    frame?.classList.add("nav-open");
    navToggle.setAttribute("aria-expanded", "true");
    sidebar?.querySelector("a, button")?.focus();
  });
  document.querySelectorAll("[data-nav-close], [data-nav-scrim]").forEach((control) => control.addEventListener("click", closeNavigation));

  document.querySelectorAll("[data-disclosure]").forEach((button) => {
    button.addEventListener("click", () => {
      const target = document.getElementById(button.getAttribute("aria-controls"));
      if (!target) return;
      const expanded = button.getAttribute("aria-expanded") === "true";
      button.setAttribute("aria-expanded", String(!expanded));
      target.hidden = expanded;
    });
  });

  document.querySelectorAll("[data-view-switch]").forEach((button) => {
    button.addEventListener("click", () => {
      const group = button.closest("[data-view-controls]");
      const view = button.dataset.viewSwitch;
      group?.querySelectorAll("[data-view-switch]").forEach((item) => item.setAttribute("aria-pressed", String(item === button)));
      document.querySelectorAll("[data-view]").forEach((panel) => { panel.hidden = panel.dataset.view !== view; });
    });
  });

  const motionAllowed = !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  if (motionAllowed) {
    document.querySelectorAll("[data-radar-illustration]").forEach((illustration) => {
      illustration.addEventListener("pointermove", (event) => {
        const bounds = illustration.getBoundingClientRect();
        illustration.style.setProperty("--radar-x", `${((event.clientX - bounds.left) / bounds.width - .5) * 10}px`);
        illustration.style.setProperty("--radar-y", `${((event.clientY - bounds.top) / bounds.height - .5) * 10}px`);
      });
      illustration.addEventListener("pointerleave", () => {
        illustration.style.removeProperty("--radar-x");
        illustration.style.removeProperty("--radar-y");
      });
    });
  }

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape") closeNavigation();
    if (event.key === "/" && !/INPUT|TEXTAREA|SELECT/.test(document.activeElement?.tagName || "")) {
      event.preventDefault();
      document.getElementById("global-search")?.focus();
    }
  });
})();