document.addEventListener('DOMContentLoaded', function () {
    // Cargar banners
    loadBanners();

    // Cargar categorías destacadas
    loadCategoriasDestacadas();

    // Cargar productos destacados
    loadProductosDestacados();

    // Cargar marcas
    loadMarcas();
});

function loadBanners() {
    fetch('sistema/database/model/banners.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=getBanners'
    })
        .then(response => response.json())
        .then(data => {
            if (Array.isArray(data) && data.length > 0) {
                displayBanners(data);
            } else {
                console.log('No hay banners disponibles, manteniendo banner por defecto');
            }
        })
        .catch(error => {
            console.error('Error al cargar banners:', error);
            console.log('Manteniendo banner por defecto debido al error');
        });
}

function displayBanners(banners) {
    const carouselInner = document.getElementById('carousel-banners');
    const carouselIndicators = document.getElementById('carousel-indicators');

    // Limpiar contenido existente
    carouselInner.innerHTML = '';
    carouselIndicators.innerHTML = '';

    // Crear slides de banners
    banners.forEach((banner, index) => {
        const isActive = index === 0 ? 'active' : '';
        const imageSrc = `sistema/img/banners/${banner.banner}`;

        // Crear slide
        const slide = document.createElement('div');
        slide.className = `carousel-item ${isActive}`;
        slide.innerHTML = `
            <img src="${imageSrc}" alt="Banner Diamond ${index + 1}" class="os-img" 
                 onerror="this.src='img/inicio.png'">
            <div class="os-div">
                <p class="os-p"><span class="os-span">RECUBRIMIENTO PARA PISOS,</span>
                    PROTECCIÓN ANTICORROSIVA
                    Y OBRA CIVIL</p>
                <p class="os-p2"><b>En Diamond ofrecemos productos epóxicos de alta calidad, ideales para pisos industriales, superficies expuestas a químicos y aplicaciones en obra civil.</b></p>
                <p class="os-p2">Garantiza durabilidad y rendimiento con nuestros recubrimientos especializados y recibe la asesoría técnica que tu proyecto necesita.</p>
            </div>`;

        carouselInner.appendChild(slide);

        // Crear indicador
        const indicator = document.createElement('button');
        indicator.type = 'button';
        indicator.setAttribute('data-bs-target', '#bannersCarousel');
        indicator.setAttribute('data-bs-slide-to', index);
        indicator.setAttribute('aria-label', `Slide ${index + 1}`);
        indicator.className = isActive;
        if (index === 0) {
            indicator.setAttribute('aria-current', 'true');
        }

        carouselIndicators.appendChild(indicator);
    });

    // Reinicializar el carousel de Bootstrap con 3 segundos
    const carouselElement = document.getElementById('bannersCarousel');
    if (carouselElement && window.bootstrap) {
        // Destroy existing carousel instance if it exists
        const existingCarousel = bootstrap.Carousel.getInstance(carouselElement);
        if (existingCarousel) {
            existingCarousel.dispose();
        }

        // Create new carousel instance with 3 seconds interval
        new bootstrap.Carousel(carouselElement, {
            interval: 3000,
            wrap: true,
            touch: true,
            pause: false,
            ride: 'carousel'
        });
    }
}

function loadCategoriasDestacadas() {
    fetch('sistema/database/model/categorias.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=getCategorias'
    })
        .then(response => response.json())
        .then(data => {
            if (Array.isArray(data)) {
                // Filtrar solo las categorías destacadas y activas - SIN LIMITAR
                const categoriasDestacadas = data.filter(categoria =>
                    categoria.destacado == 1 && categoria.status == 1
                );

                displayCategoriasDestacadas(categoriasDestacadas);
            }
        })
        .catch(error => {
            console.error('Error al cargar categorías:', error);
        });
}

function displayCategoriasDestacadas(categorias) {
    const container = document.querySelector('#categorias .row');

    // Limpiar contenido existente
    container.innerHTML = '';

    if (categorias.length === 0) {
        container.innerHTML = `
            <div class="col-12 text-center">
                <p>No hay categorías destacadas disponibles</p>
            </div>
        `;
        return;
    }

    // Crear estructura del slider
    container.innerHTML = `
        <div class="col-12">
            <div class="categorias-slider-container">
                <div class="categorias-slider-wrapper">
                    <div class="categorias-slider" id="categoriasSlider">
                        <!-- Las categorías se insertarán aquí -->
                    </div>
                </div>
                <button class="slider-btn slider-btn-prev" id="categoriasSliderPrev">
                    <i class="fa-solid fa-chevron-left"></i>
                </button>
                <button class="slider-btn slider-btn-next" id="categoriasSliderNext">
                    <i class="fa-solid fa-chevron-right"></i>
                </button>
            </div>
        </div>
    `;

    const slider = document.getElementById('categoriasSlider');

    // Agregar todas las categorías al slider
    categorias.forEach(categoria => {
        const imageSrc = categoria.imagen ?
            `sistema/img/categorias/${categoria.imagen}` :
            'img/placeholder-categoria.jpg';

        const categoriaDiv = document.createElement('div');
        categoriaDiv.className = 'categoria-slide';

        // Estructura modificada para Safari
        categoriaDiv.innerHTML = `
            <div class="ts-div3-shadow categoria-item-wrapper">
                <div class="ts-div3">
                    <img src="${imageSrc}" alt="${categoria.nombre}" class="ts-img" onerror="this.src='img/placeholder-categoria.jpg'">
                    <p class="ts-p3">${categoria.nombre}</p>
                </div>
                <div class="ts-i-container">
                    <i class="fa-solid fa-arrow-right-long ts-i" style="cursor: pointer;"></i>
                </div>
            </div>
        `;

        // Agregar event listener para navegar a productos de la categoría
        categoriaDiv.addEventListener('click', function () {
            window.location.href = `productos.php?categoria=${categoria.id}`;
        });

        slider.appendChild(categoriaDiv);
    });

    // Inicializar funcionalidad del slider
    initializeCategoriasSlider(categorias.length);
}

function initializeCategoriasSlider(totalCategorias) {
    const slider = document.getElementById('categoriasSlider');
    const prevBtn = document.getElementById('categoriasSliderPrev');
    const nextBtn = document.getElementById('categoriasSliderNext');

    let currentIndex = 0;
    let itemsPerView = 5; // Default para desktop

    // Función para obtener items por vista según el ancho de pantalla
    function getItemsPerView() {
        const width = window.innerWidth;
        if (width <= 480) {
            return 1; // Móviles pequeños
        } else if (width <= 768) {
            return 2; // Móviles
        } else if (width <= 992) {
            return 3; // Tablets
        } else {
            return 5; // Desktop
        }
    }

    function updateSlider() {
        itemsPerView = getItemsPerView();
        const maxIndex = Math.max(0, totalCategorias - itemsPerView);

        // Ajustar currentIndex si es necesario
        if (currentIndex > maxIndex) {
            currentIndex = maxIndex;
        }

        const translateX = -(currentIndex * (100 / itemsPerView));
        slider.style.transform = `translateX(${translateX}%)`;

        // Actualizar estado de los botones
        prevBtn.disabled = currentIndex === 0;
        nextBtn.disabled = currentIndex >= maxIndex;

        // Ocultar botones si no son necesarios
        if (totalCategorias <= itemsPerView) {
            prevBtn.style.display = 'none';
            nextBtn.style.display = 'none';
        } else {
            prevBtn.style.display = 'flex';
            nextBtn.style.display = 'flex';
        }
    }

    function goToPrev() {
        if (currentIndex > 0) {
            currentIndex--;
            updateSlider();
        }
    }

    function goToNext() {
        const maxIndex = Math.max(0, totalCategorias - itemsPerView);
        if (currentIndex < maxIndex) {
            currentIndex++;
            updateSlider();
        }
    }

    // Event listeners
    prevBtn.addEventListener('click', goToPrev);
    nextBtn.addEventListener('click', goToNext);

    // Inicializar estado
    updateSlider();

    // Actualizar en cambio de tamaño de ventana
    window.addEventListener('resize', updateSlider);

    // Auto-slide opcional (cada 5 segundos) - se pausa si hay hover
    let autoSlideInterval;

    function startAutoSlide() {
        autoSlideInterval = setInterval(() => {
            const maxIndex = Math.max(0, totalCategorias - itemsPerView);
            if (currentIndex >= maxIndex) {
                currentIndex = 0;
            } else {
                currentIndex++;
            }
            updateSlider();
        }, 5000);
    }

    function stopAutoSlide() {
        clearInterval(autoSlideInterval);
    }

    // Iniciar auto-slide
    startAutoSlide();

    // Pausar auto-slide en hover
    const sliderContainer = document.querySelector('.categorias-slider-container');
    sliderContainer.addEventListener('mouseenter', stopAutoSlide);
    sliderContainer.addEventListener('mouseleave', startAutoSlide);
}

function loadProductosDestacados() {
    fetch('sistema/database/model/productos.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=getProductosDestacados'
    })
        .then(response => response.json())
        .then(data => {
            if (Array.isArray(data)) {
                // Limitar a 7 productos
                const productosDestacados = data.slice(0, 7);
                displayProductosDestacados(productosDestacados);
            }
        })
        .catch(error => {
            console.error('Error al cargar productos destacados:', error);
        });
}

function displayProductosDestacados(productos) {
    const container = document.querySelector('#destacados .row');

    // Limpiar contenido existente
    container.innerHTML = '';

    if (productos.length === 0) {
        container.innerHTML = `
            <div class="col-12 text-center">
                <p>No hay productos destacados disponibles</p>
            </div>
        `;
        return;
    }

    // Crear el primer producto (más grande)
    if (productos[0]) {
        const primerProducto = productos[0];
        const imageSrc = primerProducto.imagen ?
            `sistema/img/productos/${primerProducto.imagen}` :
            'img/placeholder-producto.jpg';

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

        colDiv.innerHTML = `
            <div class="ths-div3-shadow" data-product-id="${primerProducto.id_producto}">
                <div class="ths-div3">
                    <img src="${imageSrc}" alt="${primerProducto.nombre}" class="ths-img" onerror="this.src='img/placeholder-producto.jpg'">
                    <div class="ths-div5">
                        <div class="ths-div6">
                            <p class="ths-p3">${primerProducto.nombre}</p>
                            <p class="ths-p4">${primerProducto.marca || 'DIAMOND'}</p>
                        </div>
                        <i class="fa-solid fa-plus ths-i" data-product-id="${primerProducto.id_producto}"></i>
                    </div>
                </div>
            </div>
        `;

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

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

        container.appendChild(colDiv);
    }

    // Crear contenedor para los demás productos (6 restantes)
    if (productos.length > 1) {
        const colDiv8 = document.createElement('div');
        colDiv8.className = 'col-md-8';

        const rowDiv = document.createElement('div');
        rowDiv.className = 'row';

        // Agregar los productos restantes (máximo 6)
        const productosRestantes = productos.slice(1, 7);

        productosRestantes.forEach(producto => {
            const imageSrc = producto.imagen ?
                `sistema/img/productos/${producto.imagen}` :
                'img/placeholder-producto.jpg';

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

            colDiv.innerHTML = `
                <div class="ths-div3-shadow" data-product-id="${producto.id_producto}">
                    <div class="ths-div4">
                        <img src="${imageSrc}" alt="${producto.nombre}" class="ths-img" onerror="this.src='img/placeholder-producto.jpg'">
                        <div class="ths-div5">
                            <div class="ths-div6">
                                <p class="ths-p3">${producto.nombre}</p>
                                <p class="ths-p4">${producto.marca || 'DIAMOND'}</p>
                            </div>
                            <i class="fa-solid fa-plus ths-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('.ths-div3-shadow');
            productCard.addEventListener('click', function (e) {
                // Solo redirigir si no se hizo click en el botón +
                if (!e.target.classList.contains('ths-i')) {
                    window.location.href = `detalleProducto.php?id=${producto.id_producto}`;
                }
            });

            // Agregar event listener para el botón + (agregar al carrito)  
            colDiv.querySelector('.ths-i').addEventListener('click', function (e) {
                e.stopPropagation(); // Prevenir que se ejecute el click del contenedor

                window.location.href = `detalleProducto.php?id=${producto.id_producto}`;
            });

            rowDiv.appendChild(colDiv);
        });

        colDiv8.appendChild(rowDiv);
        container.appendChild(colDiv8);
    }
}

function loadMarcas() {
    fetch('sistema/database/model/marcas.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: 'action=getMarcas'
    })
        .then(response => response.json())
        .then(data => {
            if (Array.isArray(data)) {
                // Filtrar solo las marcas activas
                const marcasActivas = data.filter(marca => marca.status == 1);
                displayMarcas(marcasActivas);
            }
        })
        .catch(error => {
            console.error('Error al cargar marcas:', error);
            // Mostrar marcas por defecto en caso de error
            displayMarcasDefault();
        });
}

function displayMarcas(marcas) {
    const container = document.getElementById('marcas');

    // Limpiar contenido existente
    container.innerHTML = '';

    if (marcas.length === 0) {
        displayMarcasDefault();
        return;
    }

    marcas.forEach(marca => {
        const logoSrc = marca.logo ?
            `sistema/img/marcas/${marca.logo}` :
            'img/placeholder-marca.jpg';

        const img = document.createElement('img');
        img.src = logoSrc;
        img.alt = marca.nombre;
        img.className = 'fs-img';
        img.title = marca.nombre;

        // Manejar error de imagen
        img.onerror = function () {
            this.src = 'img/placeholder-marca.jpg';
        };

        container.appendChild(img);
    });

    // Reinicializar la funcionalidad de scroll después de cargar las marcas
    initializeMarcasScroll();
}

function displayMarcasDefault() {
    const container = document.getElementById('marcas');
    container.innerHTML = `
        <img src="img/placeholder-marca.jpg" alt="Marca 1" class="fs-img">
        <img src="img/placeholder-marca.jpg" alt="Marca 2" class="fs-img">
        <img src="img/placeholder-marca.jpg" alt="Marca 3" class="fs-img">
        <img src="img/placeholder-marca.jpg" alt="Marca 4" class="fs-img">
    `;
    initializeMarcasScroll();
}

function initializeMarcasScroll() {
    const container = document.getElementById('marcas');
    const images = container.querySelectorAll('.fs-img');

    function centerImagesIfNeeded() {
        const containerWidth = container.offsetWidth;
        const totalImagesWidth = images.length * 290; // 250px + 40px de gap aproximadamente

        if (totalImagesWidth < containerWidth) {
            container.style.justifyContent = 'center';
        } else {
            container.style.justifyContent = 'flex-start';
        }
    }

    // Verificar al cargar las marcas
    centerImagesIfNeeded();

    // Verificar cuando cambie el tamaño de la ventana
    window.addEventListener('resize', centerImagesIfNeeded);

    // Smooth scroll horizontal con rueda del mouse
    container.removeEventListener('wheel', handleWheelScroll); // Remover listener anterior
    container.addEventListener('wheel', handleWheelScroll);
}

function handleWheelScroll(e) {
    if (e.deltaY !== 0) {
        e.preventDefault();
        this.scrollLeft += e.deltaY;
    }
}



document.addEventListener('DOMContentLoaded', function () {

    var container = document.querySelector('.six-div');
    var isDown = false;
    var startX;
    var scrollLeft;
    var slideTimer;

    container.addEventListener('mousedown', (e) => {
        if (e.target.tagName === 'A') return; // No ejecutar el código si el evento se dispara en un enlace de anclaje
        isDown = true;
        startX = e.pageX - container.offsetLeft;
        scrollLeft = container.scrollLeft;
        clearInterval(slideTimer); // Detiene el desplazamiento automático
    });

    container.addEventListener('mouseup', () => {
        isDown = false;
        slideTimer = startAutoScroll(container); // Inicia un nuevo desplazamiento automático
    });

    container.addEventListener('mousemove', (e) => {
        if (!isDown) return;
        if (e.target.tagName === 'A') return; // No prevenir el comportamiento predeterminado si el evento se dispara en un enlace de anclaje
        e.preventDefault();
        const x = e.pageX - container.offsetLeft;
        const walk = (x - startX) * 3; // 3 es la velocidad de desplazamiento, cambia según sea necesario
        container.scrollLeft = scrollLeft - walk;
    });

    // Movimiento automático del carrusel

    function startAutoScroll(container) {
        var scrollAmount = 0;
        var direction = 1; // 1 para desplazarse hacia adelante, -1 para desplazarse hacia atrás
        var intervalId = setInterval(function () {
            var oldScrollLeft = container.scrollLeft;
            container.scrollLeft += direction;
            scrollAmount += direction;
            if (container.scrollLeft === oldScrollLeft) {
                // El carrusel ha alcanzado el final y no puede desplazarse más
                if (direction === 1) {
                    // Si se estaba desplazando hacia adelante, cambia la dirección para desplazarse hacia atrás
                    direction = -1;
                } else {
                    // Si se estaba desplazando hacia atrás, cambia la dirección para desplazarse hacia adelante
                    direction = 1;
                }
            }
        }, 10);
        return intervalId;
    }

    slideTimer = startAutoScroll(container);


    document.querySelectorAll('a[href^="#"]').forEach(function (link) {
        link.addEventListener('click', function () {
            clearInterval(slideTimer);
            // Reinicia el desplazamiento automático después de un breve retraso
            setTimeout(function () {
                slideTimer = startAutoScroll(container);
            }, 1000); // Ajusta el retraso según sea necesario
        });
    });
});

// Agregar al final de index.js

// Detectar si es un dispositivo móvil
function isMobileDevice() {
    return window.innerWidth <= 768 || /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

// Optimizar event listeners en móviles
if (isMobileDevice()) {
    // Usar eventos touch en lugar de mouse events
    document.addEventListener('DOMContentLoaded', function() {
        const productCards = document.querySelectorAll('.three-section .ths-div3-shadow, .three-section .ths-div4-shadow');
        
        productCards.forEach(card => {
            // Remover hover effects en móviles
            card.style.transition = 'none';
            
            // Usar touchstart en lugar de click para mejor rendimiento
            card.addEventListener('touchstart', function() {
                // Mínima interacción
            }, { passive: true });
        });
    });
}