document.addEventListener('DOMContentLoaded', () => {
    const cardCovers = document.querySelectorAll('.small-card-cover, .card-cover');

    cardCovers.forEach(cardCover => {
        const thumbnail = cardCover.querySelector('.thumbnail');
        const video = cardCover.querySelector('.preview-video');
        const videoSource = video.querySelector('source');

        const showPreview = () => {
            thumbnail.style.display = 'none';
            video.style.display = 'block';

            if (video.duration > 15) {
                video.currentTime = 10;
                const loopSegment = () => {
                    if (video.currentTime >= 15) {
                        video.currentTime = 10;
                        video.play();
                    }
                };
                video.addEventListener('timeupdate', loopSegment);
                cardCover.loopSegment = loopSegment;
            } else {
                video.currentTime = 0;
                const loopEntireVideo = () => {
                    if (video.currentTime >= video.duration) {
                        video.currentTime = 0;
                        video.play();
                    }
                };
                video.addEventListener('timeupdate', loopEntireVideo);
                cardCover.loopSegment = loopEntireVideo;
            }

            video.play();
        };

        cardCover.addEventListener('mouseenter', () => {
            video.pause();
            videoSource.src = video.dataset.src;
            video.load();
            video.addEventListener('canplay', showPreview, { once: true });
        });

        cardCover.addEventListener('mouseleave', (e) => {
            const toElement = e.relatedTarget;

            if (!cardCover.contains(toElement)) {
                video.pause();
                video.currentTime = 0;
                video.style.display = 'none';
                thumbnail.style.display = 'block';

                if (cardCover.loopSegment) {
                    video.removeEventListener('timeupdate', cardCover.loopSegment);
                    delete cardCover.loopSegment;
                }

                videoSource.src = '';
            }
        });
    });
});