document.addEventListener('DOMContentLoaded', () => {
    const themeToggle = document.getElementById('theme-fab');
    const themeIcon = document.getElementById('theme-icon');
    const chapterSelects = document.querySelectorAll('.chapter-select');
    const prevBtns = document.querySelectorAll('.prev-chapter');
    const nextBtns = document.querySelectorAll('.next-chapter');
    const comicPagesContainer = document.getElementById('comic-pages');
    const storyOutline = document.querySelector('.story-outline-container');
    const comicTitle = document.querySelector('.comic-title');
    const modal = document.getElementById('fullscreen-modal');
    const modalImg = document.getElementById('fullscreen-image');
    const closeModal = document.querySelector('.close-modal');
    
    // Protect modal image from download
    if (modalImg) {
        modalImg.draggable = false;
        modalImg.addEventListener('contextmenu', e => e.preventDefault());
    }
    
    let comicsData = {};
    let chapters = [];
    let currentChapterIndex = -1;
    let currentChapterPages = [];
    let currentModalPageIndex = -1;
    let touchStartX = 0;
    let touchEndX = 0;

    // Close modal events
    closeModal.addEventListener('click', () => {
        modal.classList.add('hidden');
    });

    function updateThemeIcon() {
        if (document.body.classList.contains('dark-mode')) {
            themeIcon.textContent = '🌙';
        } else {
            themeIcon.textContent = '☀️';
        }
    }
    
    // Theme toggle
    themeToggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        updateThemeIcon();
        localStorage.setItem('theme', document.body.classList.contains('dark-mode') ? 'dark' : 'light');
    });

    if (localStorage.getItem('theme') === 'dark') {
        document.body.classList.add('dark-mode');
        updateThemeIcon();
    }

    modal.addEventListener('click', (e) => {
        if (e.target !== modalImg) {
            modal.classList.add('hidden');
        }
    });

    function updateModalImage() {
        if (currentModalPageIndex >= 0 && currentModalPageIndex < currentChapterPages.length) {
            const chapterName = chapters[currentChapterIndex];
            const pageFile = currentChapterPages[currentModalPageIndex];
            modalImg.src = `assets/comic_book/${chapterName}/${pageFile}`;
        }
    }
    
    // Keyboard navigation
    document.addEventListener('keydown', (e) => {
        if (!modal.classList.contains('hidden')) {
            if (e.key === 'ArrowRight') {
                if (currentModalPageIndex < currentChapterPages.length - 1) {
                    currentModalPageIndex++;
                    updateModalImage();
                }
            } else if (e.key === 'ArrowLeft') {
                if (currentModalPageIndex > 0) {
                    currentModalPageIndex--;
                    updateModalImage();
                }
            } else if (e.key === 'Escape') {
                modal.classList.add('hidden');
            }
        }
    });

    // Touch navigation (swipe)
    modal.addEventListener('touchstart', (e) => {
        touchStartX = e.changedTouches[0].screenX;
    });

    modal.addEventListener('touchend', (e) => {
        touchEndX = e.changedTouches[0].screenX;
        handleSwipe();
    });

    function handleSwipe() {
        const swipeThreshold = 50;
        if (touchEndX < touchStartX - swipeThreshold) {
            // Swipe Left (Next)
            if (currentModalPageIndex < currentChapterPages.length - 1) {
                currentModalPageIndex++;
                updateModalImage();
            }
        }
        if (touchEndX > touchStartX + swipeThreshold) {
            // Swipe Right (Prev)
            if (currentModalPageIndex > 0) {
                currentModalPageIndex--;
                updateModalImage();
            }
        }
    }

    // Fetch the index JSON
    fetch('comics_index.json')
        .then(response => response.json())
        .then(data => {
            comicsData = data;
            chapters = Object.keys(comicsData);
            
            // Populate select
            chapters.forEach((chapter, index) => {
                // Format chapter name (e.g., 'chapter01' -> 'CHAPTER 01')
                const formattedName = chapter.replace(/([a-zA-Z]+)(\d+)/, '$1 $2').toUpperCase();
                
                chapterSelects.forEach(select => {
                    const option = document.createElement('option');
                    option.value = index;
                    option.textContent = formattedName;
                    select.appendChild(option);
                });
            });
        })
        .catch(err => {
            console.error("Error loading comics index", err);
            comicPagesContainer.innerHTML = `
                <div class="initial-message">
                    <h2>Error Loading Comics</h2>
                    <p>Could not fetch the comics index. Make sure you are running a local server.</p>
                </div>`;
        });

    function loadChapter(index) {
        if (index < 0 || index >= chapters.length) return;
        
        currentChapterIndex = index;
        const chapterName = chapters[index];
        const pages = comicsData[chapterName];
        currentChapterPages = pages;
        
        // Update select UI
        chapterSelects.forEach(s => s.value = index);
        
        // Update buttons
        prevBtns.forEach(btn => btn.disabled = index === 0);
        nextBtns.forEach(btn => btn.disabled = index === chapters.length - 1);
        
        // Hide story outline when viewing comics
        if (storyOutline) {
            storyOutline.style.display = 'none';
        }
        
        // Show loader
        comicPagesContainer.innerHTML = '<div class="loader">BAM! Loading...</div>';
        
        // Slight delay for effect and to allow DOM to clear
        setTimeout(() => {
            comicPagesContainer.innerHTML = ''; // clear loader
            
            if (pages.length === 0) {
                comicPagesContainer.innerHTML = `
                    <div class="initial-message">
                        <h2>Empty Chapter</h2>
                        <p>No pages found in this chapter.</p>
                    </div>`;
                return;
            }

            pages.forEach((pageFile, i) => {
                const panel = document.createElement('div');
                panel.className = 'comic-panel';
                
                // Add pop-art stickers randomly to some panels
                if (Math.random() > 0.8) {
                    const sticker = document.createElement('div');
                    sticker.className = `sticker ${Math.random() > 0.5 ? 'pow' : 'boom'}`;
                    sticker.textContent = ['SNAP!', 'POW!', 'ZAP!', 'BAM!'][Math.floor(Math.random() * 4)];
                    panel.appendChild(sticker);
                }
                
                const img = document.createElement('img');
                img.src = `assets/comic_book/${chapterName}/${pageFile}`;
                img.alt = `Page ${i+1}`;
                img.loading = "lazy"; // Important for performance when loading many images
                img.style.cursor = 'pointer'; // Indicate it's clickable
                
                // Anti-download protections
                img.draggable = false;
                img.addEventListener('contextmenu', (e) => e.preventDefault());
                
                img.addEventListener('click', () => {
                    currentModalPageIndex = i;
                    updateModalImage();
                    modal.classList.remove('hidden');
                });
                
                const caption = document.createElement('div');
                caption.className = 'comic-panel-caption';
                caption.textContent = `PAGE ${i+1}`;
                
                panel.appendChild(img);
                panel.appendChild(caption);
                comicPagesContainer.appendChild(panel);
            });
            
            // Scroll to top of pages smoothly
            document.querySelector('.comic-header').scrollIntoView({ behavior: 'smooth' });
        }, 400);
    }

    chapterSelects.forEach(select => {
        select.addEventListener('change', (e) => {
            loadChapter(parseInt(e.target.value));
        });
    });

    prevBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            loadChapter(currentChapterIndex - 1);
        });
    });

    nextBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            loadChapter(currentChapterIndex + 1);
        });
    });

    if (comicTitle && storyOutline) {
        comicTitle.addEventListener('click', () => {
            // Show outline
            storyOutline.style.display = 'block';
            
            // Clear comic pages and show initial message
            comicPagesContainer.innerHTML = `
                <div class="initial-message">
                    <h2>Ready for Action?</h2>
                    <img src="assets/comic_cover.png" alt="Comic Cover" draggable="false" oncontextmenu="return false;" style="max-width: 100%; height: auto; border: 4px solid var(--border-color); box-shadow: 6px 6px 0 var(--border-color); margin-bottom: 1.5rem; border-radius: 8px;">
                    <p>Select a chapter from the menu above to start reading.</p>
                    <div class="sticker pow">POW!</div>
                    <div class="download-section" style="margin-top: 1rem; text-align: center;">
                        <p style="margin-bottom: 5px; font-weight: bold;">Enter Coupon Code to Download:</p>
                        <input type="text" id="coupon-input" placeholder="Coupon Code" style="padding: 10px; border: 4px solid var(--border-color); border-radius: 8px; font-family: 'Comic Neue', cursive; font-weight: bold; font-size: 1rem; margin-right: 10px; outline: none; width: 200px;">
                        <button id="download-btn" class="comic-button">Download PDF</button>
                        <p id="coupon-error" style="color: #ff3366; display: none; margin-top: 10px; font-weight: bold; text-shadow: 1px 1px 0 var(--border-color);">Invalid Code! Try again.</p>
                    </div>
                </div>
            `;
            
            // Reset selects
            chapterSelects.forEach(s => s.value = "");
            
            // Disable buttons
            prevBtns.forEach(btn => btn.disabled = true);
            nextBtns.forEach(btn => btn.disabled = true);
            
            // Scroll to top
            window.scrollTo({ top: 0, behavior: 'smooth' });
        });
    }

    // Event delegation for coupon code download
    document.addEventListener('click', (e) => {
        if (e.target && e.target.id === 'download-btn') {
            const input = document.getElementById('coupon-input');
            const errorMsg = document.getElementById('coupon-error');
            
            if (input && input.value.trim() === '@purus15987') {
                if (errorMsg) errorMsg.style.display = 'none';
                
                // Trigger download programmatically
                const a = document.createElement('a');
                a.href = 'assets/comic_book.pdf';
                a.download = 'comic_book.pdf';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                
                // Clear input after success
                input.value = '';
            } else {
                if (errorMsg) errorMsg.style.display = 'block';
            }
        }
    });
});