/**
 * HISTORIAGAMES - Scripts Globaux Refactorisés
 */

document.addEventListener('DOMContentLoaded', () => {

    // =========================
    // 1. GESTION DU MODE SOMBRE
    // =========================
    const toggleButton = document.querySelector('#theme-toggle');
    const htmlEl = document.documentElement;
    const currentTheme = localStorage.getItem('theme') || 'light';

    htmlEl.setAttribute('data-theme', currentTheme);

    const iconSun = document.querySelector('.icon-sun');
    const iconMoon = document.querySelector('.icon-moon');
    if (iconSun && iconMoon) {
        if (currentTheme === 'dark') {
            iconSun.style.transform = 'scale(0) rotate(90deg)';
            iconSun.style.opacity = '0';
            iconMoon.style.transform = 'scale(1) rotate(0deg)';
            iconMoon.style.opacity = '1';
        } else {
            iconSun.style.transform = 'scale(1) rotate(0deg)';
            iconSun.style.opacity = '1';
            iconMoon.style.transform = 'scale(0) rotate(-90deg)';
            iconMoon.style.opacity = '0';
        }
    }

    if (toggleButton) {
        toggleButton.addEventListener('click', () => {
            const current = htmlEl.getAttribute('data-theme');
            const target = (current === 'dark') ? 'light' : 'dark';
            
            htmlEl.setAttribute('data-theme', target);
            localStorage.setItem('theme', target);

            if (iconSun && iconMoon) {
                if (target === 'dark') {
                    iconSun.style.transform = 'scale(0) rotate(90deg)';
                    iconSun.style.opacity = '0';
                    iconMoon.style.transform = 'scale(1) rotate(0deg)';
                    iconMoon.style.opacity = '1';
                } else {
                    iconSun.style.transform = 'scale(1) rotate(0deg)';
                    iconSun.style.opacity = '1';
                    iconMoon.style.transform = 'scale(0) rotate(-90deg)';
                    iconMoon.style.opacity = '0';
                }
            }
        });
    }

    // =========================
    // 2. GESTION DU MENU MOBILE
    // =========================
    const menuBtn = document.getElementById("mobile-menu-toggle");
    const mainMenu = document.getElementById("main-menu");
    const dropdowns = document.querySelectorAll(".has-dropdown > .menu-link");
    const mobileBreakpoint = 900;

    if (menuBtn && mainMenu) {
        menuBtn.addEventListener("click", () => {
            mainMenu.classList.toggle("active");
        });
    }

    dropdowns.forEach(link => {
        link.addEventListener("click", (e) => {
            if (window.innerWidth <= mobileBreakpoint) {
                e.preventDefault();
                const parent = link.parentElement;
                if (parent) parent.classList.toggle("open");
            }
        });
    });

    // =========================
    // 3. GESTION DES ONGLETS (SIDEBAR)
    // =========================
    const tabBtns = document.querySelectorAll(".tab-btn");
    const tabPanels = document.querySelectorAll(".tab-panel");

    if (tabBtns.length && tabPanels.length) {
        tabBtns.forEach(btn => {
            btn.addEventListener("click", () => {
                const target = btn.dataset.tab;

                // Désactiver tous les onglets
                tabBtns.forEach(b => b.classList.remove("active"));
                btn.classList.add("active");

                // Masquer tous les panels et afficher celui correspondant
                tabPanels.forEach(panel => {
                    panel.style.display = (panel.dataset.tab === target) ? "block" : "none";
                });
            });
        });

        // Onglet par défaut
        tabBtns[0].classList.add("active");
        tabPanels.forEach(panel => {
            panel.style.display = (panel.dataset.tab === tabBtns[0].dataset.tab) ? "block" : "none";
        });
    }

});