// Fonction pour détecter si on est sur mobile
function isMobileDevice() {
    return window.innerWidth <= 768;
}

// Fonction globale pour toggle la sidebar (appelée par le bouton et l'overlay)
window.toggleSidebar = function() {
    const aside = document.querySelector('aside');
    const overlay = document.querySelector('.sidebar-overlay');

    if (!aside) {
        console.error('Aside element not found');
        return;
    }

    const isMobile = isMobileDevice();

    if (isMobile) {
        // Sur mobile : toggle la classe sidebar-visible
        const isCurrentlyVisible = aside.classList.contains('sidebar-visible');

        if (isCurrentlyVisible) {
            // Fermer
            aside.classList.remove('sidebar-visible');
            if (overlay) overlay.classList.remove('active');
        } else {
            // Ouvrir
            aside.classList.add('sidebar-visible');
            if (overlay) overlay.classList.add('active');
        }
    } else {
        // Sur desktop : toggle sidebar-hidden sur le layout
        const mainLayout = document.querySelector('.main-layout');
        if (mainLayout) {
            mainLayout.classList.toggle('sidebar-hidden');
            const isHidden = mainLayout.classList.contains('sidebar-hidden');
            localStorage.setItem('sidebarVisible', !isHidden);
        }
    }
};

// Appliquer le mode preview-only par défaut sur mobile
function applyMobileDefaults() {
    const isMobile = isMobileDevice();

    if (isMobile) {
        // Sur mobile : mode preview-only par défaut SEULEMENT si aucun mode n'est défini ou si c'est split
        const viewMode = localStorage.getItem('viewMode');
        if (!viewMode || viewMode === 'split') {
            localStorage.setItem('viewMode', 'preview-only');
        }
        // Si l'utilisateur a choisi 'editor-only' ou 'preview-only', on le respecte

        // S'assurer que la sidebar est masquée
        const aside = document.querySelector('aside');
        if (aside) {
            aside.classList.remove('sidebar-visible');
        }
        const overlay = document.querySelector('.sidebar-overlay');
        if (overlay) {
            overlay.classList.remove('active');
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const toggleBtn = document.getElementById('toggle-sidebar-btn');
    const mainLayout = document.querySelector('.main-layout');

    // Appliquer les paramètres par défaut pour mobile
    applyMobileDefaults();

    if (toggleBtn && mainLayout) {
        const isMobile = isMobileDevice();

        if (!isMobile) {
            // Desktop : restaurer l'état depuis localStorage
            if (localStorage.getItem('sidebarVisible') === 'false') {
                mainLayout.classList.add('sidebar-hidden');
            }
        }

        toggleBtn.addEventListener('click', toggleSidebar);
    }

    // Réappliquer les paramètres mobile lors du resize
    let resizeTimer;
    window.addEventListener('resize', () => {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(() => {
            applyMobileDefaults();
        }, 250);
    });

    // Fermer automatiquement la sidebar sur mobile après sélection d'une note
    document.body.addEventListener('htmx:afterSwap', (event) => {
        // Si c'est un swap sur l'editor-container (ouverture d'une note)
        if (event.detail.target.id === 'editor-container' || event.detail.target.id === 'main-content') {
            const isMobile = isMobileDevice();
            if (isMobile) {
                const aside = document.querySelector('aside');
                const overlay = document.querySelector('.sidebar-overlay');

                if (aside && aside.classList.contains('sidebar-visible')) {
                    aside.classList.remove('sidebar-visible');
                    if (overlay) overlay.classList.remove('active');
                }
            }
        }
    });
});
