document.addEventListener('DOMContentLoaded', function () {
    let currentProduct = null;
    let productImages = [];
    let productColors = [];
    let productColorImages = {};
    let currentImageIndex = 0;
    let currentColorId = null;
    let isLoadingImages = false;

    // Cache de imágenes para optimización
    const imageCache = new Map();

    // Inicializar la página
    initializePage();

    async function initializePage() {
        try {
            // Obtener ID del producto desde la URL
            const productId = getProductIdFromURL();

            if (productId) {
                // Cargar datos del producto
                await loadProductDetails(productId);
                // Cargar productos similares
                await loadSimilarProducts();
                // Configurar controles de cantidad
                setupQuantityControls();
                // Configurar carrito
                setupCartButton();
                // Configurar botones de PDFs
                setupPDFButtons();
                // Configurar selector de colores
                setupColorSelector();
            } else {
                console.error('No se encontró ID de producto en la URL');
                window.location.href = 'productos.php';
            }
        } catch (error) {
            console.error('Error al inicializar página de detalle:', error);
        }
    }

    function getProductIdFromURL() {
        const urlParams = new URLSearchParams(window.location.search);
        return urlParams.get('id');
    }

    async function loadProductDetails(productId) {
        try {
            const response = await fetch('sistema/database/model/productos.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=getProducto&id=${productId}`
            });

            const data = await response.json();
            console.log('Producto recibido:', data);

            if (data && !data.error) {
                currentProduct = data;
                displayProductDetails(data);
                displayPDFButtons(data);

                // Cargar imágenes o colores según el tipo de producto
                if (data.tiene_colores == 1) {
                    await loadProductColorsAndImages(productId);
                } else {
                    await loadProductImages(productId);
                }
            } else {
                console.error('Producto no encontrado');
                window.location.href = 'productos.php';
            }
        } catch (error) {
            console.error('Error al cargar detalles del producto:', error);
        }
    }

    async function loadProductColorsAndImages(productId) {
        try {
            // Cargar colores del producto
            const colorsResponse = await fetch('sistema/database/model/productos.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=getProductColors&id=${productId}`
            });

            const colorsData = await colorsResponse.json();
            console.log('Colores del producto:', colorsData);

            if (Array.isArray(colorsData) && colorsData.length > 0) {
                productColors = colorsData;

                // Cargar imágenes para cada color
                await loadAllColorImages(productId);

                // Mostrar selector de colores
                displayColorSelector();

                // Inicializar primer color por defecto
                if (productColors.length > 0) {
                    initializeFirstColor();
                }
            } else {
                // Si no hay colores, cargar imágenes normales
                await loadProductImages(productId);
            }
        } catch (error) {
            console.error('Error al cargar colores del producto:', error);
            // Fallback a imágenes normales
            await loadProductImages(productId);
        }
    }

    async function loadAllColorImages(productId) {
        try {
            const promises = productColors.map(async (color) => {
                const response = await fetch('sistema/database/model/productos.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: `action=getProductColorImages&id=${productId}&color_id=${color.id_color}`
                });

                const images = await response.json();
                productColorImages[color.id_color] = Array.isArray(images) ? images : [];

                // Precargar primera imagen de cada color
                if (images.length > 0) {
                    const mainImage = images.find(img => img.principal == 1) || images[0];
                    preloadImage(`sistema/img/productos/${mainImage.imagen}`);
                }
            });

            await Promise.all(promises);
            console.log('Imágenes por color cargadas:', productColorImages);
        } catch (error) {
            console.error('Error al cargar imágenes por color:', error);
        }
    }

    async function loadProductImages(productId) {
        try {
            const response = await fetch('sistema/database/model/productos.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=getProductImages&id=${productId}`
            });

            const data = await response.json();

            if (Array.isArray(data) && data.length > 0) {
                productImages = data;
                displayProductImages();

                // Precargar todas las imágenes
                productImages.forEach(img => {
                    preloadImage(`sistema/img/productos/${img.imagen}`);
                });
            } else {
                // Si no hay imágenes, usar imagen por defecto
                productImages = [{
                    imagen: 'default.png',
                    principal: 1
                }];
                displayProductImages();
            }
        } catch (error) {
            console.error('Error al cargar imágenes del producto:', error);
        }
    }

    function displayProductDetails(product) {
        // Actualizar breadcrumb navegable
        const breadcrumb = document.querySelector('.dos-p');
        if (breadcrumb) {
            breadcrumb.innerHTML = '';
            const breadcrumbHTML = `
            <a href="productos.php" class="dos-p">Productos</a>
            <span class="breadcrumb-separator"> / </span>
            <a href="productos.php?categoria=${product.id_categoria}" class="dos-p">${product.categoria || 'Categoría'}</a>
            <span class="breadcrumb-separator"> / </span>
            <span class="breadcrumb-current">${product.nombre}</span>
        `;
            breadcrumb.innerHTML = breadcrumbHTML;
        }

        // Actualizar otros elementos
        const productName = document.querySelector('.dos-p2');
        if (productName) {
            productName.textContent = product.nombre;
        }

        const productBrand = document.querySelector('.dos-p3');
        if (productBrand) {
            productBrand.textContent = product.marca || 'DIAMOND';
        }

        // Agregar precio después de la marca
        const productPrice = document.querySelector('.dos-p-price');
        if (productPrice) {
            if (product.precio && product.precio > 0) {
                productPrice.textContent = `Precio: $${formatPrice(product.precio)}`;
                productPrice.style.display = 'block';
            } else {
                productPrice.textContent = 'Precio no disponible';
                productPrice.style.display = 'block';
            }
        }

        const productDescription = document.querySelector('.dos-p4');
        if (productDescription) {
            if (product.descripcion && product.descripcion.includes('<')) {
                productDescription.innerHTML = product.descripcion;
            } else {
                productDescription.textContent = product.descripcion || 'Descripción no disponible';
            }
        }

        document.title = `${product.nombre} - Diamond`;
    }

    // Función para formatear precio
    function formatPrice(price) {
        return new Intl.NumberFormat('es-MX', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(price);
    }

    function displayColorSelector() {
        const colorSection = document.querySelector('.dos-colors-section');
        const colorSelect = document.getElementById('color-selector');
        const colorOptionsContainer = document.getElementById('color-options');

        if (colorSection && colorSelect && colorOptionsContainer) {
            colorSection.style.display = 'block';

            // Limpiar opciones existentes
            colorSelect.innerHTML = '<option value="">Selecciona un color</option>';
            colorOptionsContainer.innerHTML = '';

            // Crear opciones para el selector personalizado
            productColors.forEach(color => {
                // Agregar al select oculto (para compatibilidad)
                const option = document.createElement('option');
                option.value = color.id_color;
                option.textContent = color.nombre;
                colorSelect.appendChild(option);

                // Crear opción personalizada
                const colorImages = productColorImages[color.id_color] || [];
                const mainImage = colorImages.find(img => img.principal == 1) || colorImages[0];

                const customOption = document.createElement('div');
                customOption.className = 'custom-option';
                customOption.setAttribute('data-color-id', color.id_color);
                customOption.setAttribute('data-color-name', color.nombre);
                customOption.setAttribute('data-color-hex', color.codigo_hex);

                const imageSrc = mainImage ?
                    `sistema/img/productos/${mainImage.imagen}` :
                    'sistema/img/productos/default.png';

                customOption.innerHTML = `
                    <img src="${imageSrc}" 
                         alt="${color.nombre}" 
                         class="option-image"
                         onerror="this.src='sistema/img/productos/default.png'">
                    <span class="option-text">${color.nombre}</span>
                    <div class="color-indicator" style="background-color: ${color.codigo_hex};"></div>
                `;

                // Agregar evento click
                customOption.addEventListener('click', function () {
                    selectCustomColor(color.id_color, color.nombre, color.codigo_hex, imageSrc);
                });

                colorOptionsContainer.appendChild(customOption);
            });
        }
    }

    function setupColorSelector() {
        const selectorDisplay = document.getElementById('color-selector-display');
        const optionsContainer = document.getElementById('color-options');

        if (selectorDisplay && optionsContainer) {
            // Toggle dropdown
            selectorDisplay.addEventListener('click', function () {
                toggleCustomSelect();
            });

            // Cerrar al hacer click fuera
            document.addEventListener('click', function (event) {
                if (!event.target.closest('.custom-select-container')) {
                    closeCustomSelect();
                }
            });
        }
    }

    function toggleCustomSelect() {
        const selectorDisplay = document.getElementById('color-selector-display');
        const optionsContainer = document.getElementById('color-options');

        const isActive = selectorDisplay.classList.contains('active');

        if (isActive) {
            closeCustomSelect();
        } else {
            openCustomSelect();
        }
    }

    function openCustomSelect() {
        const selectorDisplay = document.getElementById('color-selector-display');
        const optionsContainer = document.getElementById('color-options');

        selectorDisplay.classList.add('active');
        optionsContainer.classList.add('active');
    }

    function closeCustomSelect() {
        const selectorDisplay = document.getElementById('color-selector-display');
        const optionsContainer = document.getElementById('color-options');

        selectorDisplay.classList.remove('active');
        optionsContainer.classList.remove('active');
    }

    function selectCustomColor(colorId, colorName, colorHex, imageSrc) {
        // Actualizar selector oculto
        const hiddenSelect = document.getElementById('color-selector');
        if (hiddenSelect) {
            hiddenSelect.value = colorId;
        }

        // Actualizar display
        const selectedImage = document.getElementById('selected-image');
        const selectedText = document.getElementById('selected-text');

        if (selectedImage && selectedText) {
            selectedImage.src = imageSrc;
            selectedText.textContent = colorName;
        }

        // Actualizar opciones seleccionadas
        const customOptions = document.querySelectorAll('.custom-option');
        customOptions.forEach(option => {
            option.classList.remove('selected');
            if (option.getAttribute('data-color-id') == colorId) {
                option.classList.add('selected');
            }
        });

        // Cerrar dropdown
        closeCustomSelect();

        // Procesar cambio de color
        if (colorId !== currentColorId) {
            currentColorId = colorId;
            displayColorImages(colorId);
        }
    }

    function initializeFirstColor() {
        if (productColors.length > 0) {
            const firstColor = productColors[0];
            const colorImages = productColorImages[firstColor.id_color] || [];
            const mainImage = colorImages.find(img => img.principal == 1) || colorImages[0];

            const imageSrc = mainImage ?
                `sistema/img/productos/${mainImage.imagen}` :
                'sistema/img/productos/default.png';

            selectCustomColor(firstColor.id_color, firstColor.nombre, firstColor.codigo_hex, imageSrc);
        }
    }

    function displayColorImages(colorId) {
        if (isLoadingImages) return;

        const images = productColorImages[colorId] || [];

        if (images.length > 0) {
            isLoadingImages = true;
            productImages = images;
            currentImageIndex = 0;

            // Mostrar loader
            showImageLoader();

            // Cargar imágenes con delay para optimización
            setTimeout(() => {
                displayProductImages();
                hideImageLoader();
                isLoadingImages = false;
            }, 300);
        } else {
            // No hay imágenes para este color
            productImages = [{
                imagen: 'default.png',
                principal: 1
            }];
            displayProductImages();
        }
    }

    function displayProductImages() {
        // Buscar imagen principal o usar la primera
        const mainImage = productImages.find(img => img.principal == 1) || productImages[0];

        if (mainImage) {
            currentImageIndex = productImages.findIndex(img => img === mainImage);
        } else {
            currentImageIndex = 0;
        }

        // Mostrar imagen principal
        displayMainImage(mainImage);

        // Configurar miniaturas
        setupImageThumbnails();
    }

    function displayMainImage(image) {
        const mainImageContainer = document.querySelector('.dos-div3-shadow .dos-div3');

        if (mainImageContainer && image) {
            mainImageContainer.innerHTML = '';

            const mainImg = document.createElement('img');
            mainImg.src = `sistema/img/productos/${image.imagen}`;
            mainImg.alt = currentProduct?.nombre || 'Producto';
            mainImg.className = 'dos-img';

            mainImg.onerror = function () {
                this.src = 'sistema/img/productos/default.png';
            };

            // Efecto de fade
            mainImg.style.opacity = '0';
            mainImageContainer.appendChild(mainImg);

            mainImg.onload = function () {
                this.style.transition = 'opacity 0.3s ease';
                this.style.opacity = '1';
            };
        }
    }

    function setupImageThumbnails() {
        const thumbnailContainer = document.querySelector('.dos-div2');

        if (thumbnailContainer && productImages.length > 0) {
            // Limpiar miniaturas existentes
            const existingDivs = thumbnailContainer.querySelectorAll('.dos-div4');
            existingDivs.forEach(div => div.remove());

            // Crear miniaturas para cada imagen
            productImages.forEach((image, index) => {
                const thumbnailDiv = document.createElement('div');
                thumbnailDiv.className = 'dos-div4';
                thumbnailDiv.style.cursor = 'pointer';
                thumbnailDiv.style.margin = '10px 0';
                thumbnailDiv.style.border = index === currentImageIndex ? '3px solid #ff6e01' : '3px solid transparent';
                thumbnailDiv.style.borderRadius = '8px';
                thumbnailDiv.style.overflow = 'hidden';
                thumbnailDiv.style.transition = 'border-color 0.3s ease';

                const thumbnail = document.createElement('img');
                thumbnail.src = `sistema/img/productos/${image.imagen}`;
                thumbnail.alt = `${currentProduct.nombre} - Imagen ${index + 1}`;
                thumbnail.className = 'dos-img2';
                thumbnail.loading = 'lazy';

                thumbnail.onerror = function () {
                    this.src = 'sistema/img/productos/default.png';
                };

                // Eventos
                thumbnailDiv.addEventListener('click', function () {
                    changeMainImage(index);
                });

                thumbnailDiv.addEventListener('mouseenter', function () {
                    if (index !== currentImageIndex) {
                        this.style.borderColor = '#ff6e01';
                        this.style.opacity = '0.8';
                    }
                });

                thumbnailDiv.addEventListener('mouseleave', function () {
                    if (index !== currentImageIndex) {
                        this.style.borderColor = 'transparent';
                        this.style.opacity = '1';
                    }
                });

                thumbnailDiv.appendChild(thumbnail);
                thumbnailContainer.appendChild(thumbnailDiv);
            });
        }
    }

    function changeMainImage(index) {
        if (index >= 0 && index < productImages.length && index !== currentImageIndex) {
            currentImageIndex = index;

            // Mostrar imagen principal
            displayMainImage(productImages[index]);

            // Actualizar bordes de miniaturas
            const thumbnailDivs = document.querySelectorAll('.dos-div2 .dos-div4');
            thumbnailDivs.forEach((div, i) => {
                div.style.borderColor = i === index ? '#ff6e01' : 'transparent';
                div.style.opacity = i === index ? '1' : '0.7';
            });
        }
    }

    function showImageLoader() {
        const mainImageContainer = document.querySelector('.dos-div3-shadow .dos-div3');
        if (mainImageContainer) {
            const loader = document.createElement('div');
            loader.className = 'image-loader';
            loader.id = 'image-loader';
            mainImageContainer.appendChild(loader);
        }
    }

    function hideImageLoader() {
        const loader = document.getElementById('image-loader');
        if (loader) {
            loader.remove();
        }
    }

    function preloadImage(src) {
        if (!imageCache.has(src)) {
            const img = new Image();
            img.src = src;
            imageCache.set(src, img);
        }
    }

    function displayPDFButtons(product) {
        const pdfsSection = document.querySelector('.dos-pdfs-section');
        const fichaTecnicaBtn = document.getElementById('ficha-tecnica-btn');
        const fichaSeguridadBtn = document.getElementById('ficha-seguridad-btn');

        let hasPDFs = false;

        if (product.ficha_tecnica_pdf && product.ficha_tecnica_pdf.trim() !== '') {
            fichaTecnicaBtn.style.display = 'flex';
            fichaTecnicaBtn.setAttribute('data-pdf', product.ficha_tecnica_pdf);
            hasPDFs = true;
        } else {
            fichaTecnicaBtn.style.display = 'none';
        }

        if (product.ficha_seguridad_pdf && product.ficha_seguridad_pdf.trim() !== '') {
            fichaSeguridadBtn.style.display = 'flex';
            fichaSeguridadBtn.setAttribute('data-pdf', product.ficha_seguridad_pdf);
            hasPDFs = true;
        } else {
            fichaSeguridadBtn.style.display = 'none';
        }

        if (hasPDFs && pdfsSection) {
            pdfsSection.style.display = 'block';
            setTimeout(() => {
                pdfsSection.classList.add('fade-in');
            }, 100);
        } else if (pdfsSection) {
            pdfsSection.style.display = 'none';
        }
    }

    function setupPDFButtons() {
        const fichaTecnicaBtn = document.getElementById('ficha-tecnica-btn');
        const fichaSeguridadBtn = document.getElementById('ficha-seguridad-btn');

        if (fichaTecnicaBtn) {
            fichaTecnicaBtn.addEventListener('click', function () {
                const pdfFile = this.getAttribute('data-pdf');
                if (pdfFile) {
                    openPDF(pdfFile, 'Ficha Técnica');
                }
            });
        }

        if (fichaSeguridadBtn) {
            fichaSeguridadBtn.addEventListener('click', function () {
                const pdfFile = this.getAttribute('data-pdf');
                if (pdfFile) {
                    openPDF(pdfFile, 'Ficha de Seguridad');
                }
            });
        }
    }

    function openPDF(filename, title) {
        try {
            const pdfUrl = `sistema/pdf/productos/${filename}`;

            fetch(pdfUrl, { method: 'HEAD' })
                .then(response => {
                    if (response.ok) {
                        const newWindow = window.open(
                            pdfUrl,
                            '_blank',
                            'width=1000,height=800,scrollbars=yes,resizable=yes,toolbar=yes,menubar=yes'
                        );

                        if (newWindow) {
                            newWindow.focus();
                            newWindow.document.title = `${title} - ${currentProduct.nombre}`;
                        } else {
                            showPDFErrorMessage('El bloqueador de ventanas emergentes impidió abrir el PDF. Por favor, permite las ventanas emergentes para este sitio.');
                        }
                    } else {
                        throw new Error('Archivo no encontrado');
                    }
                })
                .catch(error => {
                    console.error('Error al verificar PDF:', error);
                    showPDFErrorMessage('El archivo PDF no está disponible en este momento.');
                });
        } catch (error) {
            console.error('Error al abrir PDF:', error);
            showPDFErrorMessage('Error al abrir el archivo PDF.');
        }
    }

    function showPDFErrorMessage(message) {
        const errorDiv = document.createElement('div');
        errorDiv.className = 'pdf-error-message';
        errorDiv.innerHTML = `
            <div style="
                background: #f8d7da;
                color: #721c24;
                padding: 12px 16px;
                border: 1px solid #f5c6cb;
                border-radius: 6px;
                margin: 10px 0;
                font-size: 14px;
                display: flex;
                align-items: center;
                gap: 8px;
            ">
                <i class="fas fa-exclamation-triangle"></i>
                <span>${message}</span>
            </div>
        `;

        const pdfsSection = document.querySelector('.dos-pdfs-section');
        if (pdfsSection) {
            pdfsSection.parentNode.insertBefore(errorDiv, pdfsSection.nextSibling);
        }

        setTimeout(() => {
            errorDiv.remove();
        }, 5000);
    }

    async function loadSimilarProducts() {
        if (!currentProduct || !currentProduct.id_categoria) return;

        try {
            const response = await fetch('sistema/database/model/productos.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=getSimilarProducts&categoria_id=${currentProduct.id_categoria}&product_id=${currentProduct.id_producto}`
            });

            const data = await response.json();

            if (Array.isArray(data)) {
                displaySimilarProducts(data.slice(0, 4));
            }
        } catch (error) {
            console.error('Error al cargar productos similares:', error);
        }
    }

    function displaySimilarProducts(products) {
        const container = document.querySelector('.dts-div');

        let productsContainer = container.querySelector('.similar-products-container');
        if (!productsContainer) {
            productsContainer = document.createElement('div');
            productsContainer.className = 'row similar-products-container';
            container.appendChild(productsContainer);
        }

        productsContainer.innerHTML = '';

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

        products.forEach(product => {
            const imageSrc = product.imagen_principal ?
                `sistema/img/productos/${product.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">
                <div class="pths-div2">
                    <img src="${imageSrc}" alt="${product.nombre}" class="pths-img" loading="lazy" onerror="this.src='sistema/img/productos/default.png'">
                    <div class="pths-div3">
                        <div class="pths-div4">
                            <p class="pths-p">${product.nombre}</p>
                            <p class="pths-p2">${product.marca || 'DIAMOND'}</p>
                        </div>
                        <i class="fa-solid fa-plus pths-i"></i>
                    </div>
                </div>
            </div>
        `;

            // Event listener para toda la tarjeta
            colDiv.addEventListener('click', function (e) {
                // Redirigir a detalle del producto (tanto para la tarjeta como para el botón +)
                window.location.href = `detalleProducto.php?id=${product.id_producto}`;
            });

            productsContainer.appendChild(colDiv);
        });
    }

    function setupQuantityControls() {
        const minusBtn = document.querySelector('.dos-div6 button:first-child');
        const plusBtn = document.querySelector('.dos-div6 button:last-child');
        const quantityInput = document.querySelector('.dos-div6 input[type="number"]');

        if (minusBtn && plusBtn && quantityInput) {
            minusBtn.addEventListener('click', function () {
                let currentValue = parseInt(quantityInput.value) || 1;
                if (currentValue > 1) {
                    quantityInput.value = currentValue - 1;
                }
            });

            plusBtn.addEventListener('click', function () {
                let currentValue = parseInt(quantityInput.value) || 1;
                quantityInput.value = currentValue + 1;
            });

            quantityInput.addEventListener('change', function () {
                let value = parseInt(this.value) || 1;
                if (value < 1) value = 1;
                this.value = value;
            });
        }
    }

    function setupCartButton() {
        const addToCartBtn = document.querySelector('.dos-btn');
        const quantityInput = document.querySelector('.dos-div6 input[type="number"]');

        if (addToCartBtn) {
            addToCartBtn.addEventListener('click', function () {
                const quantity = parseInt(quantityInput?.value) || 1;

                if (currentProduct) {
                    // Validar que se haya seleccionado un color si el producto tiene colores
                    if (currentProduct.tiene_colores == 1 && !currentColorId) {
                        alert('Por favor, selecciona un color antes de agregar al carrito.');
                        return;
                    }

                    // Incluir información del color seleccionado si aplica
                    let colorInfo = null;
                    if (currentColorId && productColors.length > 0) {
                        const selectedColor = productColors.find(c => c.id_color == currentColorId);
                        colorInfo = {
                            id: currentColorId,
                            nombre: selectedColor?.nombre || 'Sin nombre',
                            codigo_hex: selectedColor?.codigo_hex || '#000000'
                        };
                    }

                    addToCart(currentProduct.id_producto, quantity, colorInfo);
                }
            });
        }
    }

    function addToCart(productId, quantity, colorInfo = null) {
        if (typeof cart !== 'undefined' && currentProduct) {
            const mainImage = productImages[currentImageIndex]?.imagen || 'default.png';

            cart.addItem(
                productId,
                currentProduct.nombre,
                currentProduct.marca || 'DIAMOND',
                mainImage,
                quantity,
                colorInfo,
                currentProduct.precio || 0
            );
        }
    }

    function updateCartCounter() {
        const cart = JSON.parse(localStorage.getItem('cart')) || [];
        const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);

        const cartCounter = document.querySelector('.nav-span');
        if (cartCounter) {
            cartCounter.textContent = totalItems;
        }
    }
});