// NAVBAR - version fonctionnelle du fichier login
const navbar = document.getElementById("navbar");
const openButton = document.getElementById("openSidebarButton");
const overlay = document.getElementById("overlay");

/**
 * Met à jour la navigation en fonction de la taille de l'écran (responsive)
 * @param {MediaQueryList} mediaQuery - L'objet MediaQueryList pour détecter la taille de l'écran
 * @description Ajoute ou retire l'attribut "inert" à la barre de navigation et gère l'affichage du bouton d'ouverture.
 * @returns {void}
 */
function updateNav(mediaQuery) {
    const isMobile = mediaQuery.matches;
    if (isMobile) {
        navbar.setAttribute("inert", "");
        openButton.style.display = "block";
    } else {
        navbar.removeAttribute("inert");
        openButton.style.display = "none";
        navbar.classList.remove("show");
        overlay.style.display = "none";
    }
}

/**
 * Ouvre la barre latérale (sidebar) de navigation
 * @description Ajoute la classe "show" à la barre de navigation, met à jour l'attribut "aria-expanded" du bouton et retire l'attribut "inert" de la barre de navigation.
 * @returns {void}
 */
function openSideBar() {
    navbar.classList.add("show");
    openButton.setAttribute("aria-expanded", "true");
    navbar.removeAttribute("inert");
    overlay.style.display = "block";
}

/**
 * Ferme la barre latérale (sidebar) de navigation
 * @description Retire la classe "show" de la barre de navigation, met à jour l'attribut "aria-expanded" du bouton et ajoute l'attribut "inert" à la barre de navigation.
 * @returns {void}
 */
function closeSideBar() {
    navbar.classList.remove("show");
    openButton.setAttribute("aria-expanded", "false");
    navbar.setAttribute("inert", "");
    overlay.style.display = "none";
}

document.querySelectorAll("nav a").forEach(link => {
    link.addEventListener("click", closeSideBar);
});

// Initialisation
const media = window.matchMedia("(max-width: 925px)");
updateNav(media);
media.addEventListener("change", updateNav);

/**
 * Gère le scroll fluide vers les ancres internes de la page
 * @param {Event} e - L'événement de clic sur le lien
 * @description Empêche le comportement par défaut du lien et effectue un scroll fluide vers la section cible.
 * @returns {void}
 */
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();
        const target = document.querySelector(this.getAttribute('href'));
        if (target) {
            target.scrollIntoView({ behavior: 'smooth' });
        }
    });
});

/**
 * Callback de l'IntersectionObserver pour afficher les sections lors de leur apparition à l'écran
 * @param {IntersectionObserverEntry[]} entries - Les entrées observées
 * @description Ajoute la classe "visible" aux sections qui deviennent visibles dans le viewport.
 * @returns {void}
 */
const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, {
    threshold: 0.1
});

document.querySelectorAll('section:not(.hero-section)').forEach(section => {
    section.classList.add('hidden');
    observer.observe(section);
});

document.querySelectorAll('.card, .news article').forEach(el => {
    el.classList.add('hidden');
    observer.observe(el);
});

/**
 * Ajoute un événement de clic sur chaque carte de la section "Explorez les grandes rubriques"
 * Redirige vers la page correspondante selon l'index de la carte
 * @description Change la couleur du curseur en pointeur pour indiquer que l'élément est cliquable.
 * @returns {void}
 */
document.querySelectorAll('.rubriques .card').forEach((card, idx) => {
    card.style.cursor = "pointer";
    card.addEventListener("click", () => {
        switch (idx) {
            case 0:
                window.location.href = "comprendreChgt.html";
                break;
            case 1:
                window.location.href = "consequences.html";
                break;
            case 2:
                window.location.href = "solutions.html";
                break;
        }
    });
});

/**
 * Ajoute un événement de clic sur chaque article de la section "Actualités"
 * Ouvre le lien externe correspondant dans un nouvel onglet selon l'index de l'article
 * @description Change la couleur du curseur en pointeur pour indiquer que l'élément est cliquable.
 * @returns {void}
 */
document.querySelectorAll('.news article').forEach((article, idx) => {
    article.style.cursor = "pointer";
    article.addEventListener("click", () => {
        if (idx === 0) {
            window.open("https://unric.org/fr/climat-de-nouveaux-records-et-des-consequences-quasi-irreversibles/", "_blank");
        } else if (idx === 1) {
            window.open("https://uicn.fr/la-liste-rouge-mondiale-de-luicn-vient-detre-publiee-les-poissons-deau-douce-illustrent-lescalade-des-impacts-climatiques-sur-les-especes/", "_blank");
        }
    });
});