document.addEventListener('DOMContentLoaded', function () {
    const storySliderEl = document.querySelector('.story-slider');

    if (!storySliderEl) {
        return; // 슬라이더 요소가 없으면 종료
    }

    /**
     * 슬라이더 내의 모든 비디오를 찾아 리셋합니다.
     * @param {HTMLElement} sliderElement - 슬라이더 컨테이너 요소
     */
    const resetAllVideos = (sliderElement) => {
        sliderElement.querySelectorAll('video').forEach(video => {
            if (!video.paused) {
                video.pause();
            }
            video.currentTime = 0;
        });
    };

    /**
     * 현재 활성화된 슬라이드를 처리하는 함수
     * @param {object} swiper - Swiper 인스턴스
     */
    const handleActiveSlide = (swiper) => {
        // 다른 모든 비디오를 먼저 리셋
        resetAllVideos(swiper.el);

        const activeSlide = swiper.slides[swiper.activeIndex];
        const activeVideo = activeSlide?.querySelector('video');

        if (activeSlide?.dataset?.type === 'video' && activeVideo) {
            // 활성 슬라이드가 비디오일 경우
            swiper.autoplay.stop();

            // 브라우저 정책에 의한 재생 실패를 대비한 에러 처리
            activeVideo.play().catch(error => {
                console.error("비디오 자동재생이 차단되었습니다:", error);
                // 재생에 실패하면 멈추지 않도록 다음 슬라이드로 즉시 이동
                swiper.slideNext();
            });

            // 비디오가 끝나면 다음 슬라이드로 이동
            activeVideo.onended = () => {
                swiper.slideNext();
            };
        } else {
            // 활성 슬라이드가 이미지일 경우
            swiper.autoplay.start();
        }
    };

    const swiper = new Swiper(storySliderEl, {
        loop: true,
        effect: 'fade',
        fadeEffect: {
            crossFade: true
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        autoplay: {
            delay: 5000,
            disableOnInteraction: false,
        },
        on: {
            // 이벤트에서 전달된 swiper 인스턴스 사용
            slideChange: function (swiper) {
                handleActiveSlide(swiper);
            },
            // 초기화 시 첫 슬라이드를 처리하기 위해 init 이벤트 사용
            init: function (swiper) {
                handleActiveSlide(swiper);
            }
        }
    });
});