(() => {
    const root = document.documentElement;
    const storageKey = "nouri-theme";
    const toggles = () => Array.from(document.querySelectorAll("[data-theme-toggle]"));

    const applyTheme = (theme) => {
        const resolved = theme || localStorage.getItem(storageKey) || "auto";
        const finalTheme =
            resolved === "auto"
                ? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light")
                : resolved;
        root.dataset.theme = finalTheme;

        toggles().forEach((button) => {
            const nextModeLabel = finalTheme === "dark" ? "Hell" : "Dunkel";
            const label = button.querySelector("[data-theme-label]");
            const icon = button.querySelector("[data-theme-icon]");

            if (label) {
                label.textContent = nextModeLabel;
            } else {
                button.textContent = nextModeLabel;
            }

            if (icon) {
                icon.classList.toggle("icon-sun-theme", finalTheme === "dark");
                icon.classList.toggle("icon-moon-theme", finalTheme !== "dark");
            }

            button.setAttribute("aria-label", `${nextModeLabel} aktivieren`);
        });
    };

    document.addEventListener("DOMContentLoaded", () => {
        applyTheme();
        toggles().forEach((button) => {
            button.addEventListener("click", () => {
                const current = root.dataset.theme === "dark" ? "dark" : "light";
                const next = current === "dark" ? "light" : "dark";
                localStorage.setItem(storageKey, next);
                applyTheme(next);
            });
        });
    });
})();