document.addEventListener('DOMContentLoaded', function () {
    // Variables globales
    let currentCategoryIndex = -1; // -1 significa "todas las categorías"
    let currentMarca = 0;
    let currentPage = 1;
    let allCategorias = [];
    let allMarcas = [];
    let allProductos = [];
    let urlCategoriaId = null; // Variable para almacenar el ID de categoría de la URL

    // Inicializar la página
    initializePage();

    async function initializePage() {
        try {
            // Verificar parámetros URL ANTES de cargar datos
            checkURLParams();

            // Cargar datos iniciales
            await Promise.all([
                loadCategorias(),
                loadMarcas()
            ]);

            // Después de cargar categorías, aplicar filtro si hay uno en la URL
            if (urlCategoriaId) {
                applyURLFilter();
            } else {
                // Si no hay filtro URL, cargar todos los productos
                await loadProductos();
            }

            // Configurar filtros
            setupFilters();

        } catch (error) {
            console.error('Error al inicializar la página:', error);
        }
    }

    function checkURLParams() {
        const urlParams = new URLSearchParams(window.location.search);
        urlCategoriaId = urlParams.get('categoria');
    }

    async function applyURLFilter() {
        if (urlCategoriaId && allCategorias.length > 0) {
            // Buscar el índice de la categoría en el array
            const categoriaIndex = allCategorias.findIndex(cat => cat.id == urlCategoriaId);

            if (categoriaIndex !== -1) {
                // Actualizar el índice actual
                currentCategoryIndex = categoriaIndex;

                // Cargar productos filtrados
                await loadProductos(urlCategoriaId);

                // Actualizar la selección visual
                updateCategorySelection(categoriaIndex);

                // Actualizar el carrusel para mostrar la categoría seleccionada
                updateCarouselPosition(categoriaIndex);
            } else {
                await loadProductos();
            }
        }
    }

    function updateCategorySelection(categoryIndex) {
        // Actualizar clases selected
        document.querySelectorAll('.pts-div4').forEach((item, i) => {
            item.classList.remove('selected');
            // +1 porque el primer elemento es "Todas las categorías"
            if (i === categoryIndex + 1) {
                item.classList.add('selected');
            } else if (categoryIndex === -1 && i === 0) {
                item.classList.add('selected');
            }
        });
    }

    // función para actualizar posición del carrusel
    function updateCarouselPosition(categoryIndex) {
        setTimeout(() => { // Usar setTimeout para asegurar que el DOM esté listo
            const container = document.querySelector('.pts-carousel-container');
            if (!container) return;

            const itemWidth = 230;
            // +1 porque el primer elemento es "Todas las categorías"
            const targetIndex = categoryIndex + 1;

            // Mover el carrusel para mostrar la categoría seleccionada
            if (targetIndex > 2) { // Solo mover si no está en las primeras posiciones visibles
                const translateX = -((targetIndex - 2) * itemWidth);
                container.style.transform = `translateX(${translateX}px)`;
            }
        }, 100);
    }

    // Cargar categorías
    async function loadCategorias() {
        try {
            const response = await fetch('sistema/database/model/categorias.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=getCategorias'
            });

            const data = await response.json();
            if (Array.isArray(data)) {
                allCategorias = data.filter(categoria => categoria.status == 1);
                displayCategorias();
            }
        } catch (error) {
            console.error('Error al cargar categorías:', error);
        }
    }

    // Cargar marcas
    async function loadMarcas() {
        try {
            const response = await fetch('sistema/database/model/marcas.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: 'action=getMarcas'
            });

            const data = await response.json();
            if (Array.isArray(data)) {
                allMarcas = data.filter(marca => marca.status == 1);
                displayMarcas();
            }
        } catch (error) {
            console.error('Error al cargar marcas:', error);
        }
    }

    // Cargar productos
    async function loadProductos(categoriaId = null, marcaId = null) {
        try {
            let body = 'action=getProductos';
            if (categoriaId) {
                body = `action=getProductosByCategoria&id_categoria=${categoriaId}`;
            } else if (marcaId) {
                body = `action=getProductosByMarca&id_marca=${marcaId}`;
            }


            const response = await fetch('sistema/database/model/productos.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: body
            });

            const data = await response.json();

            if (Array.isArray(data)) {
                allProductos = data.filter(producto => producto.status == 1);
                displayProductos();
            }
        } catch (error) {
            console.error('Error al cargar productos:', error);
        }
    }

    // Mostrar categorías en el carrusel
    function displayCategorias() {
        const container = document.querySelector('.pts-carousel-container');
        container.innerHTML = '';

        // Agregar opción "Todas las categorías"
        const todasDiv = document.createElement('div');
        todasDiv.className = 'pts-div4';
        // Solo agregar 'selected' si no hay filtro de URL
        if (!urlCategoriaId) {
            todasDiv.classList.add('selected');
        }
        todasDiv.innerHTML = '<p class="pts-p2">Todas las categorías</p>';
        todasDiv.addEventListener('click', () => selectCategory(-1));
        container.appendChild(todasDiv);

        // Agregar categorías
        allCategorias.forEach((categoria, index) => {
            const categoriaDiv = document.createElement('div');
            categoriaDiv.className = 'pts-div4';
            categoriaDiv.innerHTML = `<p class="pts-p2">${categoria.nombre}</p>`;
            categoriaDiv.addEventListener('click', () => selectCategory(index));
            container.appendChild(categoriaDiv);
        });

        // Duplicar elementos para el carrusel infinito
        const originalItems = container.querySelectorAll('.pts-div4');
        originalItems.forEach(item => {
            const clone = item.cloneNode(true);
            // Mantener los event listeners en los clones
            const originalIndex = Array.from(originalItems).indexOf(item);
            if (originalIndex === 0) {
                clone.addEventListener('click', () => selectCategory(-1));
            } else {
                const index = originalIndex - 1;
                clone.addEventListener('click', () => selectCategory(index));
            }
            container.appendChild(clone);
        });

        setupCarousel();

        // Si hay categoría en URL, aplicar selección visual
        if (urlCategoriaId) {
            const categoriaIndex = allCategorias.findIndex(cat => cat.id == urlCategoriaId);
            if (categoriaIndex !== -1) {
                updateCategorySelection(categoriaIndex);
            }
        }
    }

    // Mostrar marcas en el select
    function displayMarcas() {
        const select = document.getElementById('marca');
        select.innerHTML = '<option value="0" selected>Todas las marcas</option>';

        allMarcas.forEach(marca => {
            const option = document.createElement('option');
            option.value = marca.id;
            option.textContent = marca.nombre;
            select.appendChild(option);
        });
    }

    // Mostrar productos
    function displayProductos() {
        const container = document.querySelector('.productos-three-section .row .col-md-9 .row');
        container.innerHTML = '';

        if (allProductos.length === 0) {
            container.innerHTML = `
        <div class="col-12 text-center">
            <p>No se encontraron productos para esta categoría</p>
        </div>
    `;
            return;
        }

        // Paginación - mostrar 12 productos por página
        const productsPerPage = 12;
        const startIndex = (currentPage - 1) * productsPerPage;
        const endIndex = startIndex + productsPerPage;
        const productsToShow = allProductos.slice(startIndex, endIndex);

        productsToShow.forEach(producto => {
            const imageSrc = producto.imagen_principal ?
                `sistema/img/productos/${producto.imagen_principal}` :
                'sistema/img/productos/default.png';

            const colDiv = document.createElement('div');
            colDiv.className = 'col-md-3 mb-4';

            colDiv.innerHTML = `
        <div class="pths-div2-shadow" data-product-id="${producto.id_producto}">
            <div class="pths-div2">
                <img src="${imageSrc}" alt="${producto.nombre}" class="pths-img" onerror="this.src='sistema/img/productos/default.png'">
                <div class="pths-div3">
                    <div class="pths-div4">
                        <p class="pths-p">${producto.nombre}</p>
                        <p class="pths-p2">${producto.marca || 'DIAMOND'}</p>
                    </div>
                    <i class="fa-solid fa-plus pths-i" data-product-id="${producto.id_producto}"></i>
                </div>
            </div>
        </div>
    `;

            // Agregar event listener para toda la tarjeta (imagen y textos)
            const productCard = colDiv.querySelector('.pths-div2-shadow');
            productCard.addEventListener('click', function (e) {
                // Solo redirigir si no se hizo click en el botón +
                if (!e.target.classList.contains('pths-i')) {
                    window.location.href = `detalleProducto.php?id=${producto.id_producto}`;
                }
            });

            // Agregar event listener para el botón + (agregar al carrito)
            colDiv.querySelector('.pths-i').addEventListener('click', function (e) {
                e.stopPropagation(); // Prevenir que se ejecute el click del contenedor
                window.location.href = `detalleProducto.php?id=${producto.id_producto}`;
            });

            container.appendChild(colDiv);
        });

        // Actualizar paginación
        updatePagination();
    }

    // Actualizar paginación
    function updatePagination() {
        const productsPerPage = 12;
        const totalPages = Math.ceil(allProductos.length / productsPerPage);
        const paginator = document.getElementById('paginator');

        if (totalPages <= 1) {
            if (paginator) {
                paginator.style.display = 'none';
            }
            return;
        }

        if (paginator) {
            paginator.style.display = 'flex';

            const ul = paginator.querySelector('.pths-ul');
            if (ul) {
                ul.innerHTML = '';

                for (let i = 1; i <= totalPages; i++) {
                    const li = document.createElement('li');
                    li.className = 'pths-li';

                    const a = document.createElement('a');
                    a.href = '#';
                    a.className = i === currentPage ? 'pths-a selected' : 'pths-a';
                    a.textContent = i;

                    a.addEventListener('click', function (e) {
                        e.preventDefault();
                        currentPage = i;
                        displayProductos();
                    });

                    li.appendChild(a);
                    ul.appendChild(li);
                }
            }

            const pageText = paginator.querySelector('.pths-p4');
            if (pageText) {
                pageText.textContent = `de ${totalPages}`;
            }
        }
    }

    // Seleccionar categoría (cuando se hace clic internamente)
    function selectCategory(index) {
        currentCategoryIndex = index;
        currentPage = 1;
        urlCategoriaId = null; // Limpiar el filtro URL ya que ahora es una selección manual

        // Actualizar URL sin recargar la página
        const url = new URL(window.location);
        if (index === -1) {
            url.searchParams.delete('categoria');
        } else {
            const categoria = allCategorias[index];
            if (categoria) {
                url.searchParams.set('categoria', categoria.id);
            }
        }
        window.history.pushState({}, '', url);

        // Actualizar clases selected
        updateCategorySelection(index);

        // Cargar productos filtrados
        if (index === -1) {
            loadProductos(); // Todos los productos
        } else {
            const categoria = allCategorias[index];
            if (categoria) {
                loadProductos(categoria.id);
            }
        }
    }

    // Configurar filtros
    function setupFilters() {
        const marcaSelect = document.getElementById('marca');

        if (marcaSelect) {
            marcaSelect.addEventListener('change', function () {
                currentMarca = parseInt(this.value);
                currentPage = 1;

                if (currentMarca === 0) {
                    // Si se selecciona "Todas las marcas", aplicar filtro de categoría si hay uno
                    if (currentCategoryIndex === -1) {
                        loadProductos(); // Todos los productos
                    } else {
                        const categoria = allCategorias[currentCategoryIndex];
                        loadProductos(categoria.id);
                    }
                } else {
                    loadProductos(null, currentMarca);
                }
            });
        }
    }

    // Configurar carrusel de categorías
    function setupCarousel() {
        const container = document.querySelector('.pts-div3');
        const carouselContainer = document.querySelector('.pts-carousel-container');
        const arrow = document.querySelector('.pts-a');

        if (!container || !carouselContainer || !arrow) {
            console.warn('No se encontraron elementos del carrusel');
            return;
        }

        const originalItems = document.querySelectorAll('.pts-div4');
        let carouselIndex = 0;
        const itemWidth = 230;
        const totalOriginalItems = originalItems.length / 2;

        // Event listener para la flecha
        arrow.addEventListener('click', function (e) {
            e.preventDefault();
            moveCarousel();
        });

        function moveCarousel() {
            carouselIndex++;

            const translateX = -(carouselIndex * itemWidth);
            carouselContainer.style.transform = `translateX(${translateX}px)`;

            if (carouselIndex >= totalOriginalItems) {
                setTimeout(() => {
                    carouselContainer.style.transition = 'none';
                    carouselIndex = 0;
                    carouselContainer.style.transform = `translateX(0px)`;

                    requestAnimationFrame(() => {
                        carouselContainer.style.transition = 'transform 0.3s ease';
                    });
                }, 300);
            }
        }
    }
});


