import './bootstrap';

import Alpine from 'alpinejs';

window.Alpine = Alpine;

Alpine.start();

const initVisaSuccessSlider = () => {
    const sliders = document.querySelectorAll('[data-vss-slider]');
    sliders.forEach((slider) => {
        const slides = Array.from(slider.querySelectorAll('[data-vss-slide]'));
        const dotsWrap = slider.querySelector('[data-vss-dots]');
        const prevBtn = slider.querySelector('[data-vss-prev]');
        const nextBtn = slider.querySelector('[data-vss-next]');
        const filterButtons = Array.from(slider.parentElement?.querySelectorAll('[data-vss-filter]') || []);

        if (!slides.length) return;

        let activeFilter = 'all';
        let activeIndex = 0;

        const filteredSlides = () => {
            if (activeFilter === 'all') return slides;
            return slides.filter((slide) => (slide.dataset.country || '') === activeFilter);
        };

        const render = () => {
            const list = filteredSlides();
            if (activeIndex >= list.length) activeIndex = 0;

            slides.forEach((slide) => slide.classList.remove('is-active'));
            if (list[activeIndex]) list[activeIndex].classList.add('is-active');

            if (dotsWrap) {
                dotsWrap.innerHTML = '';
                list.forEach((_, idx) => {
                    const dot = document.createElement('button');
                    dot.type = 'button';
                    dot.className = `vss-dot ${idx === activeIndex ? 'is-active' : ''}`;
                    dot.setAttribute('aria-label', `Story ${idx + 1}`);
                    dot.addEventListener('click', () => {
                        activeIndex = idx;
                        render();
                    });
                    dotsWrap.appendChild(dot);
                });
            }
        };

        filterButtons.forEach((btn) => {
            btn.addEventListener('click', () => {
                activeFilter = btn.dataset.vssFilter || 'all';
                activeIndex = 0;
                filterButtons.forEach((b) => b.classList.remove('is-active'));
                btn.classList.add('is-active');
                render();
            });
        });

        prevBtn?.addEventListener('click', () => {
            const list = filteredSlides();
            if (!list.length) return;
            activeIndex = (activeIndex - 1 + list.length) % list.length;
            render();
        });

        nextBtn?.addEventListener('click', () => {
            const list = filteredSlides();
            if (!list.length) return;
            activeIndex = (activeIndex + 1) % list.length;
            render();
        });

        render();
    });
};

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initVisaSuccessSlider);
} else {
    initVisaSuccessSlider();
}
