document.addEventListener('DOMContentLoaded', function() {
    // Détection de l'état de connexion
    function updateOnlineStatus() {
        const offlineIndicator = document.querySelector('.offline-indicator');
        
        if (!navigator.onLine) {
            if (!offlineIndicator) {
                const indicator = document.createElement('div');
                indicator.className = 'offline-indicator show';
                indicator.textContent = 'Mode hors ligne - Fonctionnalités limitées';
                document.body.insertBefore(indicator, document.body.firstChild);
            }
        } else {
            if (offlineIndicator) {
                offlineIndicator.remove();
            }
        }
    }
    
    // Écouter les changements de connexion
    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    
    // Vérifier l'état initial
    updateOnlineStatus();
    // Gestion du menu mobile
    const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
    const mobileMenu = document.querySelector('.mobile-menu');
    const mobileMenuClose = document.querySelector('.mobile-menu-close');
    
    if (mobileMenuToggle) {
        mobileMenuToggle.addEventListener('click', function() {
            mobileMenu.classList.add('active');
            document.body.style.overflow = 'hidden'; // Empêche le défilement de la page
        });
    }
    
    if (mobileMenuClose) {
        mobileMenuClose.addEventListener('click', function() {
            mobileMenu.classList.remove('active');
            document.body.style.overflow = ''; // Réactive le défilement
        });
    }
    
    // Gestion du theme (mode clair/sombre)
    const themeToggle = document.querySelector('#theme-toggle');
    const html = document.documentElement;
    
    // Charger le thème sauvegardé ou détecter la préférence système
    function initTheme() {
        const savedTheme = localStorage.getItem('theme');
        const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        
        let currentTheme = savedTheme;
        if (!savedTheme) {
            currentTheme = systemPrefersDark ? 'dark' : 'light';
        }
        
        applyTheme(currentTheme);
        updateThemeIcon(currentTheme);
    }
    
    // Appliquer le thème
    function applyTheme(theme) {
        if (theme === 'dark') {
            html.setAttribute('data-theme', 'dark');
        } else {
            html.removeAttribute('data-theme');
        }
    }
    
    // Mettre à jour l'icône du bouton
    function updateThemeIcon(theme) {
        if (themeToggle) {
            const icon = themeToggle.querySelector('i');
            if (theme === 'dark') {
                icon.classList.remove('fa-sun');
                icon.classList.add('fa-moon');
                themeToggle.setAttribute('aria-label', 'Basculer vers le mode clair');
                themeToggle.setAttribute('title', 'Mode clair');
            } else {
                icon.classList.remove('fa-moon');
                icon.classList.add('fa-sun');
                themeToggle.setAttribute('aria-label', 'Basculer vers le mode sombre');
                themeToggle.setAttribute('title', 'Mode sombre');
            }
        }
    }
    
    // Basculer le thème
    function toggleTheme() {
        const currentTheme = html.getAttribute('data-theme');
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        
        applyTheme(newTheme);
        updateThemeIcon(newTheme);
        localStorage.setItem('theme', newTheme);
    }
    
    // Event listener pour le bouton
    if (themeToggle) {
        themeToggle.addEventListener('click', toggleTheme);
    }
    
    // Écouter les changements de préférence système
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
        if (!localStorage.getItem('theme')) {
            const newTheme = e.matches ? 'dark' : 'light';
            applyTheme(newTheme);
            updateThemeIcon(newTheme);
        }
    });
    
    // Initialiser le thème
    initTheme();
    
    // Gestion des carousels
    const carousels = document.querySelectorAll('.carousel');

    carousels.forEach(carousel => {
        const container = carousel.querySelector('.carousel-container');
        const dots = carousel.querySelectorAll('.carousel-dot');
        const items = carousel.querySelectorAll('.carousel-item');

        if (dots.length > 0 && items.length > 0) {
            let currentIndex = 0;
            let startX = 0;
            let startY = 0;
            let currentX = 0;
            let isDragging = false;
            let startTransform = 0;
            let isTap = true; // Nouveau: détecter si c'est un tap simple
            let touchStartTime = 0;
            let touchTarget = null; // Stocker la cible du touch

            function getItemWidth() {
                return items[0].offsetWidth + parseInt(getComputedStyle(items[0]).marginRight);
            }

            function updateCarousel(index) {
                const itemWidth = getItemWidth();
                const newTransform = -index * itemWidth;
                container.style.transform = `translateX(${newTransform}px)`;

                // Mettre à jour les dots
                dots.forEach(d => d.classList.remove('active'));
                if (dots[index]) {
                    dots[index].classList.add('active');
                }

                currentIndex = index;
            }

            dots.forEach((dot, index) => {
                dot.addEventListener('click', function() {
                    updateCarousel(index);
                });
            });

            container.addEventListener('touchstart', function(e) {
                isDragging = true;
                isTap = true;
                touchStartTime = Date.now();
                touchTarget = e.target; // Capturer la cible du touch
                startX = e.touches[0].clientX;
                startY = e.touches[0].clientY;
                currentX = startX; // IMPORTANT: initialiser currentX à startX pour éviter les faux swipes
                const transform = window.getComputedStyle(container).transform;

                if (transform !== 'none') {
                    const matrix = new DOMMatrix(transform);
                    startTransform = matrix.m41;
                } else {
                    startTransform = 0;
                }
                container.style.transition = 'none';
            }, { passive: true });

            container.addEventListener('touchmove', function(e) {
                if (!isDragging) return;

                currentX = e.touches[0].clientX;
                const currentY = e.touches[0].clientY;
                const diffX = Math.abs(currentX - startX);
                const diffY = Math.abs(currentY - startY);

                // Si le mouvement dépasse 10px, ce n'est plus un tap
                if (diffX > 10 || diffY > 10) {
                    isTap = false;
                }

                const diff = currentX - startX;
                const newTransform = startTransform + diff;

                container.style.transform = `translateX(${newTransform}px)`;
            }, { passive: true });

            container.addEventListener('touchend', function(e) {
                if (!isDragging) return;
                isDragging = false;

                container.style.transition = 'transform 0.5s ease';

                const diff = currentX - startX;
                const threshold = 50; // Distance minimale pour considérer un swipe
                const tapThreshold = 10; // Distance maximale pour un tap
                const tapTimeThreshold = 300; // Temps maximal pour un tap (ms)
                const touchDuration = Date.now() - touchStartTime;

                // Si c'est un tap (mouvement minimal et rapide)
                if (isTap && Math.abs(diff) < tapThreshold && touchDuration < tapTimeThreshold) {
                    // Vérifier si le tap était sur une video-card
                    let videoCard = touchTarget;

                    // Remonter le DOM pour trouver la video-card
                    while (videoCard && !videoCard.classList.contains('video-card')) {
                        videoCard = videoCard.parentElement;
                        // Arrêter si on sort du container
                        if (videoCard === container || !videoCard) break;
                    }

                    // Si on a trouvé une video-card, naviguer vers la vidéo
                    if (videoCard && videoCard.classList.contains('video-card')) {
                        const videoId = videoCard.dataset.videoId;
                        if (videoId) {
                            window.location.href = 'video.php?id=' + videoId;
                            return;
                        }
                    }

                    // Sinon, juste repositionner le carousel
                    updateCarousel(currentIndex);
                    currentX = 0;
                    isTap = true; // Réinitialiser pour le prochain tap
                    return;
                }

                // Gérer comme un swipe normal
                if (Math.abs(diff) > threshold) {
                    if (diff > 0 && currentIndex > 0) {
                        // Swipe vers la droite - item précédent
                        updateCarousel(currentIndex - 1);
                    } else if (diff < 0 && currentIndex < items.length - 1) {
                        // Swipe vers la gauche - item suivant
                        updateCarousel(currentIndex + 1);
                    } else {
                        // Retour à la position actuelle
                        updateCarousel(currentIndex);
                    }
                } else {
                    // Mouvement trop petit, retour à la position actuelle
                    updateCarousel(currentIndex);
                }

                currentX = 0;
                isTap = true; // Réinitialiser pour le prochain tap
            }, { passive: true });

            // Support du drag sur desktop (optionnel)
            container.addEventListener('mousedown', function(e) {
                isDragging = true;
                isTap = true;
                touchStartTime = Date.now();
                touchTarget = e.target; // Capturer la cible
                startX = e.clientX;
                startY = e.clientY;
                currentX = startX; // IMPORTANT: initialiser currentX à startX pour éviter les faux swipes
                const transform = window.getComputedStyle(container).transform;
                if (transform !== 'none') {
                    const matrix = new DOMMatrix(transform);
                    startTransform = matrix.m41;
                } else {
                    startTransform = 0;
                }
                container.style.transition = 'none';
                container.style.cursor = 'grabbing';
                e.preventDefault();
            });

            document.addEventListener('mousemove', function(e) {
                if (!isDragging) return;

                currentX = e.clientX;
                const currentY = e.clientY;
                const diffX = Math.abs(currentX - startX);
                const diffY = Math.abs(currentY - startY);

                // Si le mouvement dépasse 10px, ce n'est plus un clic simple
                if (diffX > 10 || diffY > 10) {
                    isTap = false;
                }

                const diff = currentX - startX;
                const newTransform = startTransform + diff;

                container.style.transform = `translateX(${newTransform}px)`;
            });

            document.addEventListener('mouseup', function(e) {
                if (!isDragging) return;
                isDragging = false;

                container.style.transition = 'transform 0.5s ease';
                container.style.cursor = 'grab';

                const diff = currentX - startX;
                const threshold = 50;
                const tapThreshold = 10;
                const tapTimeThreshold = 300;
                const clickDuration = Date.now() - touchStartTime;

                // Si c'est un clic simple (mouvement minimal et rapide)
                if (isTap && Math.abs(diff) < tapThreshold && clickDuration < tapTimeThreshold) {
                    // Vérifier si le clic était sur une video-card
                    let videoCard = touchTarget;

                    // Remonter le DOM pour trouver la video-card
                    while (videoCard && !videoCard.classList.contains('video-card')) {
                        videoCard = videoCard.parentElement;
                        if (videoCard === container || !videoCard) break;
                    }

                    // Si on a trouvé une video-card, naviguer vers la vidéo
                    if (videoCard && videoCard.classList.contains('video-card')) {
                        const videoId = videoCard.dataset.videoId;
                        if (videoId) {
                            window.location.href = 'video.php?id=' + videoId;
                            return;
                        }
                    }

                    updateCarousel(currentIndex);
                    currentX = 0;
                    isTap = true; // Réinitialiser pour le prochain tap
                    return;
                }

                // Gérer comme un drag normal
                if (Math.abs(diff) > threshold) {
                    if (diff > 0 && currentIndex > 0) {
                        updateCarousel(currentIndex - 1);
                    } else if (diff < 0 && currentIndex < items.length - 1) {
                        updateCarousel(currentIndex + 1);
                    } else {
                        updateCarousel(currentIndex);
                    }
                } else {
                    updateCarousel(currentIndex);
                }

                currentX = 0;
                isTap = true; // Réinitialiser pour le prochain tap
            });
        }
    });
    
    // Gestion des clics sur les vidéos
    function initVideoCardClicks() {
        const videoCards = document.querySelectorAll('.video-card');

        videoCards.forEach(card => {
            // Ne pas ajouter de listener click sur les cartes dans un carousel
            // car elles sont déjà gérées par le carousel lui-même
            const isInCarousel = card.closest('.carousel-container');

            if (!isInCarousel && !card.hasAttribute('data-click-initialized')) {
                card.setAttribute('data-click-initialized', 'true');
                card.addEventListener('click', function() {
                    const videoId = this.dataset.videoId;
                    if (videoId) {
                        window.location.href = 'video.php?id=' + videoId;
                    }
                });
            }
        });
    }

    // Initialiser les clics sur les vidéos existantes
    initVideoCardClicks();
    
    // Lazy loading des images
    function initLazyLoading() {
        if ('IntersectionObserver' in window) {
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        const src = img.getAttribute('data-src');
                        if (src) {
                            img.src = src;
                            img.removeAttribute('data-src');
                        }
                        observer.unobserve(img);
                    }
                });
            });
            
            document.querySelectorAll('img[data-src]').forEach(img => {
                imageObserver.observe(img);
            });
        } else {
            // Fallback pour les navigateurs qui ne supportent pas IntersectionObserver
            document.querySelectorAll('img[data-src]').forEach(img => {
                const src = img.getAttribute('data-src');
                if (src) {
                    img.src = src;
                    img.removeAttribute('data-src');
                }
            });
        }
    }
    
    // Initialiser le lazy loading
    initLazyLoading();
    
    // Gestion des boutons "Voir plus"
    const viewMoreButtons = document.querySelectorAll('.view-more');
    
    viewMoreButtons.forEach(button => {
        // Déterminer le type de vidéos à charger
        const section = button.closest('.video-section');
        const sectionTitle = section.querySelector('.section-title').textContent.trim().toLowerCase();
        const videoGrid = section.querySelector('.video-grid');
        let videoType = '';
        let categoryId = null;
        
        if (sectionTitle.includes('dernières')) {
            videoType = 'recent';
        } else if (sectionTitle.includes('tendances')) {
            videoType = 'trending';
        } else if (sectionTitle.includes('indépendance')) {
            videoType = 'independence';
        } else {
            // Vérifier si c'est une section de catégorie
            const categorySection = section.querySelector('[data-category-id]');
            if (categorySection) {
                videoType = 'category';
                categoryId = categorySection.dataset.categoryId;
            } else if (section.hasAttribute('data-category-id')) {
                videoType = 'category';
                categoryId = section.dataset.categoryId;
            }
        }
        
        // Si aucun type reconnu, ne pas configurer l'événement
        if (!videoType) return;
        
        // Stocker le numéro de page actuel
        button.dataset.page = '1';
        
        button.addEventListener('click', function() {
            const page = parseInt(this.dataset.page);
            
            // Changer le texte du bouton pendant le chargement
            button.textContent = 'Chargement...';
            button.disabled = true;
            
            // Préparer l'URL avec les paramètres
            let url = `ajax/load-more-videos?type=${videoType}&page=${page}`;
            if (videoType === 'category' && categoryId) {
                url += `&category=${categoryId}`;
            }
            
            // Préparer les données avec token CSRF
            const formData = new FormData();
            formData.append('csrf_token', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
            
            // Faire la requête AJAX
            fetch(url, {
                method: 'POST',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    // Ajouter les nouvelles vidéos à la grille
                    const tempDiv = document.createElement('div');
                    tempDiv.innerHTML = data.html;
                    
                    // Ajouter chaque vidéo à la grille
                    while (tempDiv.firstChild) {
                        videoGrid.appendChild(tempDiv.firstChild);
                    }
                    
                    // Mettre à jour le numéro de page
                    this.dataset.page = data.page + 1;
                    
                    // Réinitialiser le texte du bouton
                    button.textContent = 'Voir plus';
                    button.disabled = false;
                    
                    // Si plus de vidéos à charger, masquer le bouton
                    if (!data.hasMore) {
                        button.style.display = 'none';
                    }
                    
                    // Initialiser les clics sur les nouvelles vidéos
                    initVideoCardClicks();
                    // Initialiser le lazy loading pour les nouvelles images
                    initLazyLoading();
                } else {
                    // En cas d'erreur, afficher un message temporaire et réactiver le bouton
                    console.error('Erreur lors du chargement des vidéos:', data.error);
                    const originalText = 'Voir plus';
                    button.textContent = 'Erreur de chargement';
                    button.disabled = false;
                    setTimeout(() => {
                        button.textContent = originalText;
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('Erreur lors de la requête AJAX:', error);
                const originalText = 'Voir plus';
                button.textContent = 'Erreur de chargement';
                button.disabled = false;
                setTimeout(() => {
                    button.textContent = originalText;
                }, 2000);
            });
        });
    });
    
    // Scroll vers le haut avec effet moderne quand on clique sur le logo du footer
    const footerLogo = document.querySelector('.footer-logo');
    if (footerLogo) {
        footerLogo.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    }
}); 