document.addEventListener('DOMContentLoaded', () => {

    const videos = [];
    let activeInstance = null;

    // ============================
    // INIT
    // ============================
    document.querySelectorAll('.video-cover').forEach(block => {
        const instance = {
            block,
            player: new Plyr(block.querySelector('.plyr-player'), {
                autoplay: false,
                muted: true,
                loop: { active: true },
                clickToPlay: true,
                controls: [
                    'play',
                    'progress',
                    'current-time',
                    'mute',
                    'volume',
                    'fullscreen'
                ],
                vimeo: { background: true }
            }),
            playButton: block.querySelector('.cover-play'),
            parentLink: block.closest('a'),
            hasPlayed: false,
            isVisible: false
        };

        videos.push(instance);

        // ============================
        // CENTRAL PLAY
        // ============================
        instance.playButton.addEventListener('click', () => {
            if (activeInstance && activeInstance !== instance) {
                resetToCover(activeInstance);
            }

            activateVideo(instance);
        });
    });

    // ============================
    // INTERSECTION OBSERVER (1x)
    // ============================
    const io = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            const instance = videos.find(v => v.block === entry.target);
            if (!instance) return;

            instance.isVisible = entry.isIntersecting;

            // se saiu da tela e está ativo → pausa
            if (!entry.isIntersecting && instance === activeInstance) {
                resetToCover(instance);
            }

            // se entrou na tela e está em modo capa → loop
            if (entry.isIntersecting && !instance.hasPlayed) {
                startCoverLoop(instance);
            }
        });
    }, { threshold: 0.4 });

    videos.forEach(v => io.observe(v.block));

    // ============================
    // GLOBAL SCROLL / STATE CHECK
    // ============================
    window.addEventListener('scroll', () => {
        if (!activeInstance) return;

        const { parentLink } = activeInstance;
        if (!parentLink) return;

        if (!parentLink.classList.contains('w--current')) {
            resetToCover(activeInstance);
        }
    }, { passive: true });

    // ============================
    // HELPERS
    // ============================
    function activateVideo(instance) {
        const { player, block, playButton } = instance;

        playButton.classList.add('hidden');
        block.classList.remove('is-cover');
        block.classList.add('is-active');

        player.loop = false;
        player.muted = false;
        player.currentTime = 0;
        player.play();

        instance.hasPlayed = true;
        activeInstance = instance;
    }

    function resetToCover(instance) {
        const { player, block, playButton } = instance;

        player.pause();

        block.classList.remove('is-active');
        block.classList.add('is-cover');
        playButton.classList.remove('hidden');

        player.muted = true;
        player.loop = true;
        player.currentTime = 0;

        if (instance.isVisible) {
            player.play();
        }

        instance.hasPlayed = false;
        if (activeInstance === instance) {
            activeInstance = null;
        }
    }

    function startCoverLoop(instance) {
        const { player, block } = instance;

        if (!block.classList.contains('is-cover')) return;

        player.muted = true;
        player.loop = true;
        player.play();
    }

});