(() => {
  const storageKey = "raggo-theme";
  const root = document.documentElement;
  const button = document.getElementById("theme-toggle");
  if (!button) return;

  // Build icon nodes using DOM API (no innerHTML on user-controlled strings)
  const makeSunIcon = () => {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", "16"); svg.setAttribute("height", "16");
    svg.setAttribute("viewBox", "0 0 24 24"); svg.setAttribute("fill", "none");
    svg.setAttribute("stroke", "currentColor"); svg.setAttribute("stroke-width", "2");
    svg.setAttribute("stroke-linecap", "round"); svg.setAttribute("stroke-linejoin", "round");
    svg.setAttribute("aria-hidden", "true");
    const defs = [
      ["circle", { cx:"12", cy:"12", r:"4" }],
      ["line", { x1:"12", y1:"2",    x2:"12", y2:"6"    }],
      ["line", { x1:"12", y1:"18",   x2:"12", y2:"22"   }],
      ["line", { x1:"4.93",  y1:"4.93",  x2:"7.76",  y2:"7.76"  }],
      ["line", { x1:"16.24", y1:"16.24", x2:"19.07", y2:"19.07" }],
      ["line", { x1:"2",  y1:"12", x2:"6",  y2:"12" }],
      ["line", { x1:"18", y1:"12", x2:"22", y2:"12" }],
      ["line", { x1:"4.93",  y1:"19.07", x2:"7.76",  y2:"16.24" }],
      ["line", { x1:"16.24", y1:"7.76",  x2:"19.07", y2:"4.93"  }],
    ];
    defs.forEach(([tag, attrs]) => {
      const el = document.createElementNS("http://www.w3.org/2000/svg", tag);
      Object.entries(attrs).forEach(([k, v]) => el.setAttribute(k, v));
      svg.appendChild(el);
    });
    return svg;
  };

  const makeMoonIcon = () => {
    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute("width", "16"); svg.setAttribute("height", "16");
    svg.setAttribute("viewBox", "0 0 24 24"); svg.setAttribute("fill", "none");
    svg.setAttribute("stroke", "currentColor"); svg.setAttribute("stroke-width", "2");
    svg.setAttribute("stroke-linecap", "round"); svg.setAttribute("stroke-linejoin", "round");
    svg.setAttribute("aria-hidden", "true");
    const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
    path.setAttribute("d", "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z");
    svg.appendChild(path);
    return svg;
  };

  const getPreferredTheme = () => {
    const stored = localStorage.getItem(storageKey);
    if (stored === "light" || stored === "dark") return stored;
    return "light";
  };

  const applyTheme = (theme) => {
    root.setAttribute("data-theme", theme);
    const isLight = theme === "light";

    // Rebuild button content safely
    while (button.firstChild) button.removeChild(button.firstChild);
    button.appendChild(isLight ? makeMoonIcon() : makeSunIcon());
    const label = document.createElement("span");
    label.textContent = isLight ? "Dark Mode" : "Light Mode";
    button.appendChild(label);

    button.setAttribute("aria-pressed", String(!isLight));
    button.title = isLight ? "Switch to dark mode" : "Switch to light mode";
  };

  applyTheme(getPreferredTheme());

  button.addEventListener("click", () => {
    const next = root.getAttribute("data-theme") === "light" ? "dark" : "light";
    localStorage.setItem(storageKey, next);
    applyTheme(next);
  });

  // Highlight active nav link based on current pathname
  const markActiveNav = () => {
    const path = window.location.pathname;
    document.querySelectorAll(".nav-link").forEach((link) => {
      link.classList.remove("active");
      const href = link.getAttribute("href");
      if (!href) return;
      if (href === "/ui/" || href === "/ui") {
        if (path === "/ui/" || path === "/ui") link.classList.add("active");
      } else if (path.startsWith(href)) {
        link.classList.add("active");
      }
    });
  };

  markActiveNav();

  // Mobile hamburger menu toggle
  var hamburger = document.getElementById("nav-hamburger");
  var navLinks = document.getElementById("nav-links");
  if (hamburger && navLinks) {
    hamburger.addEventListener("click", function () {
      var isOpen = hamburger.classList.toggle("active");
      navLinks.classList.toggle("nav-open", isOpen);
      hamburger.setAttribute("aria-expanded", String(isOpen));
    });
    // Close menu when a nav link is clicked
    navLinks.querySelectorAll(".nav-link").forEach(function (link) {
      link.addEventListener("click", function () {
        hamburger.classList.remove("active");
        navLinks.classList.remove("nav-open");
        hamburger.setAttribute("aria-expanded", "false");
      });
    });
  }
})();
