document.addEventListener('DOMContentLoaded', () => {
    const providerSelector = document.getElementById('provider-selector');
    const searchInput = document.getElementById('gallery-search-input');
    const resultsContainer = document.getElementById('gallery-results');
    const loadMoreBtn = document.getElementById('load-more-btn');

    let currentPage = 1;
    let currentProvider = '';
    let currentQuery = '';
    const perPage = 48;

    let msnry = null;

    // --- MASONRY INITIALIZATION ---
    function initializeMasonry() {
        if (typeof Masonry === 'undefined') {
            setTimeout(initializeMasonry, 100);
            return;
        }

        if (msnry) {
            msnry.destroy();
        }

        msnry = new Masonry(resultsContainer, {
            itemSelector: '.gallery-card',
            columnWidth: '.gallery-card',
            percentPosition: true,
            gutter: 0,
            transitionDuration: '0.4s'
        });
        msnry.layout();
    }

    initializeMasonry();

    // --- UTILS ---

    /**
     * Crea un elemento de tarjeta de resultado de galería.
     */
    function createGalleryCard(item) {
        const card = document.createElement('a');
        card.className = 'gallery-card grid-item';

        const itemProvider = item.provider || currentProvider;

        // **********************************************
        // CAMBIO: Nueva URL para la página de visualización
        card.href = `/gallery/${itemProvider}/${item.id}`;
        // **********************************************

        const img = document.createElement('img');
        img.className = 'gallery-card-img';
        img.src = item.image;
        img.alt = item.tags ? item.tags.join(', ') : 'Gallery Image';
        img.loading = 'lazy';

        img.onload = () => {
            if (msnry) {
                msnry.layout();
                card.classList.add('is-loaded');
            }
        };
        img.onerror = () => {
            if (msnry) {
                msnry.layout();
                card.classList.add('is-loaded');
            }
        };

        card.appendChild(img);

        return card;
    }

    /**
     * Muestra las tarjetas de esqueleto. (Sin cambios)
     */
    function showSkeletons(count, append = false) {
        const skeletonMarkup = `<div class="gallery-card skeleton grid-item"><div class="poster-skeleton"></div></div>`;

        if (!append) {
            resultsContainer.innerHTML = '';
            initializeMasonry();
        }

        let newElements = [];
        for (let i = 0; i < count; i++) {
            const tempDiv = document.createElement('div');
            tempDiv.innerHTML = skeletonMarkup.trim();
            const skeletonEl = tempDiv.firstChild;
            resultsContainer.appendChild(skeletonEl);
            newElements.push(skeletonEl);
        }

        if (msnry) {
            msnry.appended(newElements);
            msnry.layout();
        }
        loadMoreBtn.style.display = 'none';
    }

    // --- FETCH DATA --- (Sin cambios en loadExtensions y searchGallery)
    async function loadExtensions() {
        try {
            const response = await fetch('/api/extensions/gallery');
            const data = await response.json();

            providerSelector.innerHTML = '';

            if (data.extensions && data.extensions.length > 0) {
                const defaultOption = document.createElement('option');
                defaultOption.value = '';
                defaultOption.textContent = 'Global Search';
                providerSelector.appendChild(defaultOption);

                data.extensions.forEach(ext => {
                    const option = document.createElement('option');
                    option.value = ext;
                    option.textContent = ext;
                    providerSelector.appendChild(option);
                });

                currentProvider = '';

            } else {
                providerSelector.innerHTML = '<option value="">No extensions found</option>';
            }
        } catch (error) {
            console.error('Error loading gallery extensions:', error);
            providerSelector.innerHTML = '<option value="">Error loading extensions</option>';
        }
    }


    async function searchGallery(isLoadMore = false) {
        const query = searchInput.value.trim();
        const provider = providerSelector.value;
        const page = isLoadMore ? currentPage + 1 : 1;

        if (!isLoadMore && currentQuery === query && currentProvider === provider && currentPage === 1) {
            return;
        }

        currentQuery = query;
        currentProvider = provider;

        if (!isLoadMore) {
            currentPage = 1;
            showSkeletons(perPage, false);
        } else {
            showSkeletons(8, true);
        }

        try {
            let url;
            if (provider && provider !== '') {
                url = `/api/gallery/search/provider?provider=${provider}&q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`;
            } else {
                url = `/api/gallery/search?q=${encodeURIComponent(query)}&page=${page}&perPage=${perPage}`;
            }

            const response = await fetch(url);
            const data = await response.json();

            let newRealElements = [];
            if (data.results && data.results.length > 0) {
                data.results.forEach(item => {
                    newRealElements.push(createGalleryCard(item));
                });
            }

            const allSkeletons = Array.from(resultsContainer.querySelectorAll('.gallery-card.skeleton'));
            let skeletonsToRemove = isLoadMore ? allSkeletons.slice(-8) : allSkeletons;

            if (msnry) {
                msnry.remove(skeletonsToRemove);
                skeletonsToRemove.forEach(s => s.remove());
            }

            if (newRealElements.length > 0) {
                newRealElements.forEach(el => resultsContainer.appendChild(el));

                if (msnry) {
                    msnry.appended(newRealElements);
                }
                currentPage = isLoadMore ? currentPage + 1 : 1;

            } else if (!isLoadMore) {
                resultsContainer.innerHTML = '<p style="text-align:center; color: var(--text-secondary); padding: 2rem;">No results found for this search.</p>';
            }

            if (msnry) {
                msnry.layout();
            }

            if (data.hasNextPage) {
                loadMoreBtn.style.display = 'block';
            } else {
                loadMoreBtn.style.display = 'none';
            }

        } catch (error) {
            console.error('Error during gallery search:', error);
            if (!isLoadMore) {
                resultsContainer.innerHTML = '<p style="text-align:center; color: red; padding: 2rem;">An error occurred while fetching results.</p>';
            }
            loadMoreBtn.style.display = 'none';
        }
    }


    // --- EVENT LISTENERS (Sin cambios) ---

    providerSelector.addEventListener('change', () => {
        searchGallery(false);
    });

    let searchTimeout;
    searchInput.addEventListener('input', () => {
        clearTimeout(searchTimeout);
        searchTimeout = setTimeout(() => {
            searchGallery(false);
        }, 500);
    });
    searchInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            clearTimeout(searchTimeout);
            searchGallery(false);
        }
    });

    loadMoreBtn.addEventListener('click', () => {
        searchGallery(true);
    });

    loadExtensions().then(() => {
        searchGallery(false);
    });

    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 50) {
            navbar.classList.add('scrolled');
        } else {
            navbar.classList.remove('scrolled');
        }
    });

});