const { createApp, ref, onMounted } = Vue;

createApp({
    setup() {
        const mangaData = ref({});
        const isLoading = ref(true);
        const swiperWrapper = ref(null);
        const swiperInstance = ref(null);

        // Function to load configuration from data.json
        const loadData = async () => {
            try {
                const dataJsonPath = './assets/data.json';
                const response = await fetch(dataJsonPath, { cache: 'no-store', headers: { 'Cache-Control': 'no-cache' } });
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                const data = await response.json();
                mangaData.value = data;
                document.title = data.pageTitle;
                isLoading.value = false;

                // Initialize swiper after data is loaded
                setTimeout(initSwiper, 100);
            } catch (err) {
                console.error('Error loading data:', err);
                isLoading.value = false;
            }
        };

        // Function to initialize the swiper
        const initSwiper = () => {
            // Create slides for each manga page
            if (mangaData.value.mangaPages && mangaData.value.mangaPages.length > 0) {
                // Reverse the order as in the original script
                const reversedPages = [...mangaData.value.mangaPages].reverse();
                
                for (const page of reversedPages) {
                    const slide = document.createElement('div');
                    slide.classList.add('swiper-slide');
                    const img = document.createElement('img');
                    img.loading = 'lazy';
                    img.src = page;
                    slide.appendChild(img);
                    swiperWrapper.value.appendChild(slide);
                }

                // Initialize Swiper
                swiperInstance.value = new Swiper('.swiper-container', {
                    direction: 'horizontal',
                    loop: false,
                    initialSlide: reversedPages.length - 1,
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });
            }
        };

        onMounted(() => {
            loadData();
        });

        return {
            mangaData,
            isLoading,
            swiperWrapper
        };
    }
}).mount('#app');