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

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

    const swipers = {};
    let lightbox;

    function initAllSwipers() {
        const tabs = container.querySelectorAll('.tab-button');

        tabs.forEach(button => {
            const tabId = button.getAttribute('data-tab');
            const tabContent = container.querySelector(`#tab-${tabId}`);

            if (tabContent && tabContent.querySelector('.swiper')) {
                const wasHidden = tabContent.classList.contains('hidden');
                if (wasHidden) {
                    tabContent.style.visibility = 'hidden';
                    tabContent.style.position = 'absolute';
                    tabContent.classList.remove('hidden');
                    tabContent.classList.add('block');
                }

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

                swipers[tabId] = new Swiper(`#${blockId} #swiper-${tabId}`, {
                    slidesPerView: 'auto',
                    spaceBetween: 20,
                    loop: true,
                    centeredSlides: true,
                    observer: true,
                    observeParents: true,
                    watchSlidesProgress: true,
                });

                if (wasHidden) {
                    tabContent.style.visibility = '';
                    tabContent.style.position = '';
                    tabContent.classList.add('hidden');
                    tabContent.classList.remove('block');
                }
            }
        });
    }

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

        lightbox = GLightbox({
            selector: `#${blockId} #tab-${tabId} .glightbox`,
            touchNavigation: true,
            loop: true,
            autoplayVideos: false,
            videosWidth: '90vw',
            videosHeight: '80vh',
            plyr: {
                css: 'https://cdn.plyr.io/3.7.8/plyr.css',
                js: 'https://cdn.plyr.io/3.7.8/plyr.js',
                config: {
                    ratio: '16:9',
                    fullscreen: { enabled: true, fallback: true, iosNative: true },
                    controls: [
                        'play-large',
                        'play',
                        'progress',
                        'current-time',
                        'duration',
                        'mute',
                        'volume',
                        'fullscreen'
                    ]
                }
            },
            onOpen: () => {
                console.log('видео открыли');
            },
            onClose: () => {
                console.log('видео закрыли');
            }
        });
    }

    initAllSwipers();

    const activeTab = container.querySelector('.tab-button.active');
    if (activeTab) {
        const tabId = activeTab.getAttribute('data-tab');
        initLightbox(tabId);
    }

    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');
            });

            const targetTab = container.querySelector(`#tab-${tabId}`);
            targetTab.classList.remove('hidden');
            targetTab.classList.add('block');

            if (swipers[tabId]) {
                requestAnimationFrame(() => {
                    swipers[tabId].update();
                });
            }

            initLightbox(tabId);
        });
    });
}