// static/js/ui.js
(() => {
    const docEl = document.documentElement;

    // ---- THEME ----
    const THEME_KEY = "pve-ui-theme";
    const storedTheme = localStorage.getItem(THEME_KEY);
    if (storedTheme === "light" || storedTheme === "dark") {
        docEl.setAttribute("data-bs-theme", storedTheme);
    }

    const btnTheme = document.getElementById("btnTheme");
    if (btnTheme) {
        btnTheme.addEventListener("click", () => {
            const current = docEl.getAttribute("data-bs-theme") === "light" ? "dark" : "light";
            docEl.setAttribute("data-bs-theme", current);
            localStorage.setItem(THEME_KEY, current);
            btnTheme.innerHTML = current === "dark"
                ? '<i class="bi bi-moon-stars"></i> Theme'
                : '<i class="bi bi-sun"></i> Theme';
        });
    }

    // ---- DENSITY ----
    const DENSITY_KEY = "pve-ui-density";
    const storedDensity = localStorage.getItem(DENSITY_KEY);
    if (storedDensity === "compact") {
        docEl.setAttribute("data-density", "compact");
    }

    const btnDensity = document.getElementById("btnDensity");
    if (btnDensity) {
        btnDensity.addEventListener("click", () => {
            const isCompact = docEl.getAttribute("data-density") === "compact";
            if (isCompact) {
                docEl.removeAttribute("data-density");
                localStorage.setItem(DENSITY_KEY, "normal");
            } else {
                docEl.setAttribute("data-density", "compact");
                localStorage.setItem(DENSITY_KEY, "compact");
            }
        });
    }

    // ---- PRE blocks: keep nicely scrollable ----
    const pres = document.querySelectorAll("pre.pre-scrollable");
    pres.forEach((p) => {
        p.style.maxHeight = "40vh";
        p.style.overflow = "auto";
    });

    // Optional: subtle overflow shadows for horizontally scrollable areas
    const scrollables = document.querySelectorAll(".table-responsive, .overflow-auto");
    scrollables.forEach((el) => {
        el.addEventListener("scroll", () => {
            // Add classes for left/right shadow indicators
            const atStart = el.scrollLeft <= 0;
            const atEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
            el.classList.toggle("is-scrolled-start", !atStart);
            el.classList.toggle("is-scrolled-end", !atEnd);
        });
    });
})();