document.addEventListener('DOMContentLoaded', function() {
    document.querySelectorAll('.gallery-block').forEach(function(block) {
        const blockId = block.getAttribute('data-gallery-id');
        initGalleryBlock(blockId);
    });
});

function initGalleryBlock(blockId) {
    const container = document.getElementById(blockId);
    if (!container) return;

    const swipers = {};
    let lightbox;

    function initSwiper(tabId) {
        if (swipers[tabId]) {
            swipers[tabId].destroy(true, true);
        }

        swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
            slidesPerView: 1.5,
            spaceBetween: 20,
            loop: true,
            centeredSlides: true,
            navigation: {
                nextEl: `#${blockId} #swiper-${tabId} .swiper-button-next`,
                prevEl: `#${blockId} #swiper-${tabId} .swiper-button-prev`,
            },
            on: {
                slideChange: function() {
                    updateThumbnails(tabId, this.realIndex);
                }
            }
        });
    }

    function initLightbox(tabId) {
        if (lightbox) {
            lightbox.destroy();
        }

        lightbox = GLightbox({
            selector: `#${blockId} #tab-${tabId} .glightbox`
        });
    }

    function updateThumbnails(tabId, activeIndex) {
        const thumbnails = container.querySelectorAll(`#tab-${tabId} .thumbnail`);
        thumbnails.forEach((thumb, index) => {
            if (index === activeIndex) {
                thumb.classList.add('active', '!border-blue-500');
                thumb.classList.remove('border-transparent');
            } else {
                thumb.classList.remove('active', '!border-blue-500');
                thumb.classList.add('border-transparent');
            }
        });
    }

    // Табы
    container.querySelectorAll('.tab-button').forEach(button => {
        button.addEventListener('click', () => {
            const tabId = button.getAttribute('data-tab');

            container.querySelectorAll('.tab-button').forEach(btn => {
                btn.classList.remove('active', 'underline');
                btn.classList.add('bg-gray-100');
            });
            button.classList.add('active', 'underline');
            button.classList.remove('bg-gray-100');

            container.querySelectorAll('.tab-content').forEach(content => {
                content.classList.remove('block');
                content.classList.add('hidden');
            });
            container.querySelector(`#tab-${tabId}`).classList.remove('hidden');
            container.querySelector(`#tab-${tabId}`).classList.add('block');

            setTimeout(() => {
                initSwiper(tabId);
                initLightbox(tabId);
            }, 100);
        });
    });

    // Thumbnails
    container.addEventListener('click', (e) => {
        if (e.target.closest('.thumbnail')) {
            const thumbnail = e.target.closest('.thumbnail');
            const index = parseInt(thumbnail.getAttribute('data-index'));
            const activeTab = container.querySelector('.tab-content.block');
            const tabId = activeTab.id.replace('tab-', '');

            if (swipers[tabId]) {
                swipers[tabId].slideToLoop(index);
            }

            updateThumbnails(tabId, index);
        }
    });

    const firstTab = container.querySelector('.tab-button.active');
    if (firstTab) {
        const tabId = firstTab.getAttribute('data-tab');
        setTimeout(() => {
            initSwiper(tabId);
            initLightbox(tabId);
        }, 100);
    }
}