const FA_ICON = document.querySelector('.fa-moon');
const LINK_FA = document.querySelector('.navend > a');

// Fonction pour définir un cookie
function setCookie(name, value, days) {
    const expires = new Date();
    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
}

// Fonction pour récupérer la valeur d'un cookie
function getCookie(name) {
    const cookieName = `${name}=`;
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
        let cookie = cookies[i].trim();
        if (cookie.indexOf(cookieName) === 0) {
            return cookie.substring(cookieName.length, cookie.length);
        }
    }
    return null;
}

// Charger le thème en fonction du cookie au chargement initial de la page
document.addEventListener('DOMContentLoaded', () => {
    const currentTheme = getCookie('theme');
    if (currentTheme === 'light') {
        // Charger le thème sombre
        FA_ICON.classList.add('fa-moon'); 
        FA_ICON.classList.remove('fa-sun'); 
        loadDarkTheme();
    } else {
        // Par défaut, charger le thème clair
        FA_ICON.classList.add('fa-sun'); 
        FA_ICON.classList.remove('fa-moon'); 
        loadLightTheme();
    }
});

// Écouter l'événement clic sur l'icône
FA_ICON.addEventListener('click', () => {
    FA_ICON.classList.toggle('fa-moon');
    FA_ICON.classList.toggle('fa-sun');

    if (FA_ICON.classList.contains('fa-moon')) {
        // Charger le thème clair
        loadLightTheme();
        // Enregistrer le choix du thème dans le cookie
        setCookie('theme', 'light', 30); // Le cookie expire après 30 jours
    } else {
        // Charger le thème sombre
        loadDarkTheme();
        // Enregistrer le choix du thème dans le cookie
        setCookie('theme', 'dark', 30); // Le cookie expire après 30 jours
    }
});

// Fonction pour charger le thème clair
function loadLightTheme() {
    const existingLink = document.querySelector('link[href*="colors_dark.css"]');
    if (existingLink) {
        const newLink = document.createElement('link');
        newLink.rel = 'stylesheet';
        newLink.href = '/static/css/colors_light.css';
        existingLink.parentNode.replaceChild(newLink, existingLink);
    } else {
        console.error("Feuille de style 'colors_dark.css' non trouvée ou inaccessible.");
    }
}

// Fonction pour charger le thème sombre
function loadDarkTheme() {
    const existingLink = document.querySelector('link[href*="colors_light.css"]');
    if (existingLink) {
        const newLink = document.createElement('link');
        newLink.rel = 'stylesheet';
        newLink.href = '/static/css/colors_dark.css';
        existingLink.parentNode.replaceChild(newLink, existingLink);
    } else {
        console.error("Feuille de style 'colors_light.css' non trouvée ou inaccessible.");
    }
}