/**
 * Lightbox per Widget Collage
 * Gestisce la galleria lightbox con navigazione tra le immagini
 *
 * @package AnnunciFunebri
 * @since 4.8.0
 */

(function() {
    'use strict';

    // Attendi che il DOM sia pronto
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCollageLightbox);
    } else {
        initCollageLightbox();
    }

    function initCollageLightbox() {
        const lightbox = document.querySelector('.annfu-collage-lightbox');
        if (!lightbox) return;

        const lightboxImg = lightbox.querySelector('img');
        const closeBtn = lightbox.querySelector('.annfu-collage-lightbox-close');
        const prevBtn = lightbox.querySelector('.annfu-collage-lightbox-prev');
        const nextBtn = lightbox.querySelector('.annfu-collage-lightbox-next');
        const currentCounter = lightbox.querySelector('.current');
        const totalCounter = lightbox.querySelector('.total');

        let images = [];
        let currentIndex = 0;

        // Raccogli tutte le immagini
        const triggers = document.querySelectorAll('.annfu-collage-wrapper .annfu-lightbox-trigger');
        triggers.forEach((trigger, index) => {
            images.push({
                src: trigger.dataset.fullsize || trigger.src,
                alt: trigger.alt
            });

            trigger.addEventListener('click', function(e) {
                e.preventDefault();
                currentIndex = index;

                // Imposta l'immagine senza transizione quando si apre il lightbox
                lightboxImg.classList.remove('annfu-transitioning');
                lightboxImg.src = images[currentIndex].src;
                lightboxImg.alt = images[currentIndex].alt;
                currentCounter.textContent = currentIndex + 1;

                lightbox.classList.add('active');
            });
        });

        if (images.length === 0) return;

        totalCounter.textContent = images.length;

        /**
         * Mostra l'immagine all'indice specificato con transizione fade
         * @param {number} index - Indice dell'immagine da mostrare
         */
        function showImage(index) {
            const newIndex = (index + images.length) % images.length;

            // Se è la stessa immagine, non fare nulla
            if (newIndex === currentIndex && lightboxImg.src) {
                return;
            }

            // Fade out
            lightboxImg.classList.add('annfu-transitioning');

            // Dopo la transizione fade out, cambia immagine e fade in
            setTimeout(() => {
                currentIndex = newIndex;
                lightboxImg.src = images[currentIndex].src;
                lightboxImg.alt = images[currentIndex].alt;
                currentCounter.textContent = currentIndex + 1;

                // Fade in (rimuove la classe per tornare a opacità 1)
                setTimeout(() => {
                    lightboxImg.classList.remove('annfu-transitioning');
                }, 10);
            }, 300); // Deve corrispondere alla durata della transizione CSS
        }

        /**
         * Chiude il lightbox
         */
        function closeLightbox() {
            lightbox.classList.remove('active');
        }

        // Navigazione con pulsanti
        prevBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            showImage(currentIndex - 1);
        });

        nextBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            showImage(currentIndex + 1);
        });

        // Chiudi lightbox
        closeBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            closeLightbox();
        });

        lightbox.addEventListener('click', function(e) {
            if (e.target === lightbox) {
                closeLightbox();
            }
        });

        // Navigazione con tastiera
        document.addEventListener('keydown', function(e) {
            if (!lightbox.classList.contains('active')) return;

            switch (e.key) {
                case 'ArrowLeft':
                    showImage(currentIndex - 1);
                    break;
                case 'ArrowRight':
                    showImage(currentIndex + 1);
                    break;
                case 'Escape':
                    closeLightbox();
                    break;
            }
        });
    }
})();
