import './bootstrap';

/**
 * Menu mobile accessible : bascule aria-expanded, ouvre/ferme le panneau,
 * se ferme sur Échap, sur clic extérieur et sur sélection d'un lien.
 * Fonctionne sans dépendance externe.
 */
function initMobileMenu() {
    const toggle = document.querySelector('[data-mobile-menu-toggle]');
    const panel = document.querySelector('[data-mobile-menu-panel]');

    if (!toggle || !panel) return;

    const close = () => {
        toggle.setAttribute('aria-expanded', 'false');
        panel.setAttribute('data-open', 'false');
    };

    const open = () => {
        toggle.setAttribute('aria-expanded', 'true');
        panel.setAttribute('data-open', 'true');
    };

    toggle.addEventListener('click', () => {
        const isOpen = toggle.getAttribute('aria-expanded') === 'true';
        isOpen ? close() : open();
    });

    panel.querySelectorAll('a').forEach((link) => {
        link.addEventListener('click', close);
    });

    document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape') close();
    });

    document.addEventListener('click', (event) => {
        const isOpen = toggle.getAttribute('aria-expanded') === 'true';
        if (!isOpen) return;
        if (panel.contains(event.target) || toggle.contains(event.target)) return;
        close();
    });
}

/**
 * En-tête légèrement compact au défilement (effet discret uniquement).
 */
function initHeaderScrollState() {
    const header = document.querySelector('[data-site-header]');
    if (!header) return;

    const update = () => {
        header.setAttribute('data-scrolled', window.scrollY > 12 ? 'true' : 'false');
    };

    update();
    window.addEventListener('scroll', update, { passive: true });
}

/**
 * Affichage / masquage du mot de passe, accessible via aria-pressed.
 */
function initPasswordToggles() {
    document.querySelectorAll('[data-password-toggle]').forEach((button) => {
        const targetId = button.getAttribute('data-password-toggle');
        const input = targetId ? document.getElementById(targetId) : null;
        if (!input) return;

        button.addEventListener('click', () => {
            const isHidden = input.getAttribute('type') === 'password';
            input.setAttribute('type', isHidden ? 'text' : 'password');
            button.setAttribute('aria-pressed', isHidden ? 'true' : 'false');
            button.textContent = isHidden ? 'Masquer' : 'Afficher';
        });
    });
}

/**
 * Apparition progressive au défilement pour les éléments [data-reveal].
 * Respecte prefers-reduced-motion (géré côté CSS) et reste sans effet si
 * IntersectionObserver n'est pas disponible ou si le script échoue.
 */
function initRevealOnScroll() {
    const elements = document.querySelectorAll('[data-reveal]');
    if (!elements.length || !('IntersectionObserver' in window)) return;

    document.documentElement.classList.add('js-reveal-ready');

    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry) => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('is-revealed');
                    observer.unobserve(entry.target);
                }
            });
        },
        { threshold: 0.15, rootMargin: '0px 0px -40px 0px' }
    );

    elements.forEach((element) => observer.observe(element));
}

document.addEventListener('DOMContentLoaded', () => {
    initMobileMenu();
    initHeaderScrollState();
    initPasswordToggles();
    initRevealOnScroll();
});
