// Desactivar autodetección de Dropzone
Dropzone.autoDiscover = false;

// Variables globales para editarProducto
let editImagenes = [];
let editImagenPrincipal = '';
let editDropzone;
let editFichaTecnicaPDF = '';
let editFichaSeguridad = '';
let editColoresDisponibles = [];
let editColoresSeleccionados = [];

$(document).ready(function () {
    const idProducto = $("#id_producto").val();

    // Inicializar editor para descripción
    if ($("#descripcion").length) {
        $("#descripcion").summernote({
            height: 150,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            placeholder: 'Escribe la descripción del producto aquí...'
        });
    }

    // Cargar categorías, marcas y colores
    loadCategorias();
    loadMarcas();
    loadColores();

    // MANEJO de selección de colores
    $("#tiene_colores").change(function () {
        const tieneColores = $(this).val();

        console.log('Cambio en tiene_colores:', tieneColores);

        if (tieneColores === "1") {
            // Mostrar secciones de colores
            $("#coloresSection").show();
            $("#imagenesSection").hide();
            $("#imagenesColorSection").show();

            // Limpiar dropzone existente
            if (editDropzone) {
                editDropzone.destroy();
                editDropzone = null;
            }

            // Limpiar variables de imágenes normales
            editImagenes = [];
            editImagenPrincipal = '';
            $("#imagenes").val('');
            $("#imagen_principal").val('');
            $("#imagenesCarousel").hide();

        } else if (tieneColores === "0") {
            // Mostrar sección de imágenes normales
            $("#coloresSection").hide();
            $("#imagenesColorSection").hide();
            $("#imagenesSection").show();

            // Limpiar colores
            editColoresSeleccionados = [];
            $("#selectedColors").empty();
            $("#colorImagesContainer").empty();
            $("#colores_data").val('');

            // Inicializar dropzone normal
            setTimeout(() => {
                initializeDropzone();
            }, 100);

        } else {
            // Ocultar todas las secciones
            $("#coloresSection").hide();
            $("#imagenesSection").hide();
            $("#imagenesColorSection").hide();

            // Limpiar dropzone
            if (editDropzone) {
                editDropzone.destroy();
                editDropzone = null;
            }

            // Limpiar todo
            editImagenes = [];
            editImagenPrincipal = '';
            editColoresSeleccionados = [];
            $("#selectedColors").empty();
            $("#colorImagesContainer").empty();
        }
    });

    // AGREGAR color seleccionado
    $("#addColorBtn").click(function () {
        const colorId = $("#colorSelect").val();

        console.log('Color seleccionado:', colorId);

        if (!colorId) {
            Swal.fire({
                icon: 'warning',
                title: 'Selecciona un color',
                text: 'Debes seleccionar un color antes de agregarlo'
            });
            return;
        }

        // Verificar si ya está seleccionado
        if (editColoresSeleccionados.find(c => c.id == colorId)) {
            Swal.fire({
                icon: 'warning',
                title: 'Color ya seleccionado',
                text: 'Este color ya ha sido agregado'
            });
            return;
        }

        // Encontrar el color en la lista disponible
        const color = editColoresDisponibles.find(c => c.id == colorId);
        if (!color) {
            console.error('Color no encontrado:', colorId);
            return;
        }

        console.log('Agregando color:', color);

        // Agregar a la lista de seleccionados
        editColoresSeleccionados.push({
            id: color.id,
            nombre: color.nombre,
            codigo_hex: color.codigo_hex,
            imagenes: [],
            imagen_preview: null
        });

        // Actualizar interfaz
        updateSelectedColors();
        $("#colorSelect").val("");

        console.log('Colores seleccionados:', editColoresSeleccionados);
    });

    // FUNCIÓN para actualizar colores seleccionados
    function updateSelectedColors() {
        console.log('Actualizando colores seleccionados');

        let html = '';

        editColoresSeleccionados.forEach((color, index) => {
            html += `
                <div class="color-item" data-color-id="${color.id}">
                    <div class="color-header">
                        <div>
                            <span class="color-preview" style="background-color: ${color.codigo_hex}"></span>
                            <strong>${color.nombre}</strong>
                        </div>
                        <button type="button" class="btn btn-sm btn-danger remove-color" data-color-id="${color.id}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="color-images">
                        <div class="dropzone-color" data-color-id="${color.id}">
                            <div class="text-center">
                                <i class="fas fa-cloud-upload-alt fa-2x mb-2"></i>
                                <p>Arrastra imágenes aquí o haz clic<br>
                                <small>Máximo 10 imágenes por color</small></p>
                            </div>
                        </div>
                        <div class="image-preview-container" id="preview-${color.id}">
                            <!-- Imágenes preview se cargarán aquí -->
                        </div>
                    </div>
                </div>
            `;
        });

        $("#selectedColors").html(html);

        // Cargar imágenes existentes para cada color
        editColoresSeleccionados.forEach(color => {
            updateColorImagePreview(color.id);
        });

        updateColorImagesContainer();

        // Usar setTimeout para asegurar que el HTML esté renderizado
        setTimeout(() => {
            attachColorImageEvents();
        }, 100);
    }

    // FUNCIÓN para actualizar el container de imágenes por color
    function updateColorImagesContainer() {
        let html = '';

        editColoresSeleccionados.forEach((color) => {
            html += `
                <div class="color-section mb-3" data-color-id="${color.id}">
                    <h6><span class="color-preview" style="background-color: ${color.codigo_hex}"></span>${color.nombre}</h6>
                    <div class="image-preview-container" id="container-${color.id}">
                        <!-- Imágenes se mostrarán aquí -->
                    </div>
                </div>
            `;
        });

        $("#colorImagesContainer").html(html);

        // Actualizar previews para cada color
        editColoresSeleccionados.forEach(color => {
            updateColorImagePreview(color.id);
        });
    }

    // FUNCIÓN para adjuntar eventos a imágenes por color
    function attachColorImageEvents() {
        console.log('Adjuntando eventos a elementos de color');

        // Eventos de drag and drop y click
        $(".dropzone-color").each(function () {
            const $element = $(this);
            const colorId = $element.data('color-id');

            console.log('Configurando dropzone para color:', colorId);

            // Remover eventos anteriores
            $element.off('dragover dragenter dragleave drop click');

            // Eventos de drag and drop
            $element.on({
                'dragover': function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).addClass('dragover');
                },
                'dragenter': function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).addClass('dragover');
                },
                'dragleave': function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).removeClass('dragover');
                },
                'drop': function (e) {
                    e.preventDefault();
                    e.stopPropagation();
                    $(this).removeClass('dragover');

                    const colorId = $(this).data('color-id');
                    const files = e.originalEvent.dataTransfer.files;

                    console.log('Drop en color:', colorId, 'archivos:', files.length);

                    handleColorImageUpload(files, colorId);
                },
                'click': function (e) {
                    e.preventDefault();
                    e.stopPropagation();

                    const colorId = $(this).data('color-id');
                    console.log('Click en dropzone color:', colorId);

                    const input = document.createElement('input');
                    input.type = 'file';
                    input.multiple = true;
                    input.accept = 'image/*';

                    input.onchange = function (e) {
                        console.log('Archivos seleccionados:', e.target.files.length);
                        handleColorImageUpload(e.target.files, colorId);
                    };

                    input.click();
                }
            });
        });

        // Evento para remover color
        $(".remove-color").off('click').on('click', function () {
            const colorId = $(this).data('color-id');

            Swal.fire({
                title: '¿Eliminar color?',
                text: '¿Estás seguro de querer eliminar este color y todas sus imágenes?',
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: 'Sí, eliminar',
                cancelButtonText: 'Cancelar'
            }).then((result) => {
                if (result.isConfirmed) {
                    removeColor(colorId);
                }
            });
        });
    }

    // FUNCIÓN para manejar subida de imágenes por color
    function handleColorImageUpload(files, colorId) {
        console.log('Procesando archivos para color:', colorId);

        const color = editColoresSeleccionados.find(c => c.id == colorId);
        if (!color) {
            console.error('Color no encontrado:', colorId);
            return;
        }

        // Validar límite de imágenes
        if (color.imagenes.length + files.length > 10) {
            Swal.fire({
                icon: 'warning',
                title: 'Límite de imágenes',
                text: 'Máximo 10 imágenes por color'
            });
            return;
        }

        // Procesar cada archivo
        Array.from(files).forEach(file => {
            if (!file.type.startsWith('image/')) {
                Swal.fire({
                    icon: 'error',
                    title: 'Archivo no válido',
                    text: 'Solo se permiten imágenes'
                });
                return;
            }

            console.log('Subiendo archivo:', file.name, 'para color:', colorId);

            // Subir archivo
            uploadColorImage(file, colorId);
        });
    }

    // FUNCIÓN para subir imagen por color
    function uploadColorImage(file, colorId) {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('color_id', colorId);

        $.ajax({
            url: 'php/uploadImageColor.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                console.log('Respuesta upload:', response);

                if (response.status === 'success') {
                    const color = editColoresSeleccionados.find(c => c.id == colorId);
                    if (color) {
                        color.imagenes.push({
                            filename: response.filename,
                            preview: response.preview
                        });

                        // Si es la primera imagen, establecer como preview
                        if (!color.imagen_preview) {
                            color.imagen_preview = response.preview;
                        }

                        updateColorImagePreview(colorId);
                    }
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message
                    });
                }
            },
            error: function (xhr, status, error) {
                console.error('Error upload:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al subir la imagen'
                });
            }
        });
    }

    // FUNCIÓN para actualizar preview de imágenes por color
    function updateColorImagePreview(colorId) {
        const color = editColoresSeleccionados.find(c => c.id == colorId);
        if (!color) return;

        let html = '';
        color.imagenes.forEach((img, index) => {
            const isPreview = img.preview === color.imagen_preview;
            html += `
            <div class="image-preview-item ${isPreview ? 'is-preview' : ''}" data-filename="${img.filename}">
                <img src="img/productos/${img.filename}" alt="Imagen ${index + 1}">
                <button class="remove-btn" data-color-id="${colorId}" data-filename="${img.filename}">
                    <i class="fas fa-times"></i>
                </button>
                <button class="preview-btn" data-color-id="${colorId}" data-filename="${img.filename}" data-preview="${img.preview}">
                    ${isPreview ? 'Principal' : 'Hacer Principal'}
                </button>
            </div>
        `;
        });

        // Actualizar tanto el contenedor de la sección de colores como el contenedor lateral
        $(`#preview-${colorId}`).html(html);
        $(`#container-${colorId}`).html(html);

        // Eventos para botones en ambos contenedores
        $(`#preview-${colorId} .remove-btn, #container-${colorId} .remove-btn`).off('click').on('click', function () {
            const colorId = $(this).data('color-id');
            const filename = $(this).data('filename');
            removeColorImage(colorId, filename);
        });

        $(`#preview-${colorId} .preview-btn, #container-${colorId} .preview-btn`).off('click').on('click', function () {
            const colorId = $(this).data('color-id');
            const filename = $(this).data('filename');
            const preview = $(this).data('preview');
            setColorPreview(colorId, filename, preview);
        });
    }


    // FUNCIÓN para remover imagen por color
    function removeColorImage(colorId, filename) {
        const color = editColoresSeleccionados.find(c => c.id == colorId);
        if (!color) return;

        color.imagenes = color.imagenes.filter(img => img.filename !== filename);

        // Si era la imagen preview, asignar otra
        if (color.imagen_preview && color.imagenes.length > 0) {
            const previewImg = color.imagenes.find(img => img.preview === color.imagen_preview);
            if (!previewImg) {
                color.imagen_preview = color.imagenes[0].preview;
            }
        } else if (color.imagenes.length === 0) {
            color.imagen_preview = null;
        }

        updateColorImagePreview(colorId);
    }

    // FUNCIÓN para establecer imagen preview
    function setColorPreview(colorId, filename, preview) {
        const color = editColoresSeleccionados.find(c => c.id == colorId);
        if (!color) return;

        // Actualizar localmente
        color.imagen_preview = preview;
        updateColorImagePreview(colorId);

        // Si estamos editando un producto existente, actualizar en BD
        const idProducto = $("#id_producto").val();
        if (idProducto) {
            $.ajax({
                url: "database/model/productos.php",
                type: "POST",
                data: {
                    action: "setImagenPrincipalColor",
                    id_producto: idProducto,
                    id_color: colorId,
                    imagen_principal: filename
                },
                success: function (response) {
                    console.log('Imagen principal actualizada en BD');
                },
                error: function (xhr, status, error) {
                    console.error('Error al actualizar imagen principal:', error);
                }
            });
        }
    }

    // FUNCIÓN para remover color
    function removeColor(colorId) {
        editColoresSeleccionados = editColoresSeleccionados.filter(c => c.id != colorId);
        updateSelectedColors();
    }

    // FUNCIÓN para inicializar dropzone normal
    function initializeDropzone() {
        console.log('Inicializando dropzone normal');

        // Verificar si ya existe un dropzone
        if (editDropzone) {
            console.log('Dropzone ya existe, destruyendo...');
            editDropzone.destroy();
            editDropzone = null;
        }

        // Verificar si el elemento existe
        if (!$("#dropzoneProducto").length) {
            console.error('Elemento #dropzoneProducto no encontrado');
            return;
        }

        try {
            editDropzone = new Dropzone("#dropzoneProducto", {
                url: "php/uploadImageProducto.php",
                paramName: "file",
                maxFilesize: 2,
                acceptedFiles: "image/jpeg,image/png,image/gif,image/webp",
                maxFiles: 10,
                addRemoveLinks: false,
                dictDefaultMessage: "Arrastra imágenes aquí o haz clic para seleccionar<br><span class='note needsclick'>Máximo 5 imágenes. Marca una como principal.</span>",
                dictFileTooBig: "El archivo es demasiado grande ({{filesize}}MB). Tamaño máximo: {{maxFilesize}}MB",
                dictInvalidFileType: "Solo se permiten imágenes",
                previewsContainer: false,
                init: function () {
                    this.on("success", function (file, response) {
                        try {
                            let result = typeof response === 'string' ? JSON.parse(response) : response;

                            if (result.status === 'success') {
                                editImagenes.push(result.filename);

                                if (editImagenes.length === 1) {
                                    editImagenPrincipal = result.filename;
                                    $("#imagen_principal").val(editImagenPrincipal);
                                }

                                $("#imagenes").val(editImagenes.join(','));
                                updateCarousel();
                            } else {
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error',
                                    text: result.message
                                });
                            }
                        } catch (e) {
                            console.error('Error al procesar respuesta:', e);
                        }
                    });

                    this.on("error", function (file, errorMessage) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: errorMessage
                        });
                    });

                    this.on("maxfilesexceeded", function (file) {
                        this.removeFile(file);
                        Swal.fire({
                            icon: 'warning',
                            title: 'Límite excedido',
                            text: 'Máximo 5 imágenes permitidas'
                        });
                    });
                }
            });

            console.log('Dropzone inicializado correctamente');
        } catch (error) {
            console.error("Error al inicializar Dropzone:", error);
        }
    }

    // Cargar datos del producto
    loadProducto(idProducto);

    // Función para cargar datos del producto
    function loadProducto(id) {
        $.ajax({
            url: "database/model/productos.php",
            type: "POST",
            data: { action: "getProducto", id: id },
            dataType: 'json',
            success: function (response) {
                try {
                    let producto = response;
                    if (typeof response === 'string') {
                        producto = JSON.parse(response);
                    }

                    if (producto && producto.id_producto) {
                        // Llenar formulario con datos del producto
                        $("#nombre").val(producto.nombre);
                        $("#precio").val(producto.precio);
                        $("#destacado").val(producto.destacado);

                        // Configurar tiene_colores
                        if (producto.tiene_colores !== undefined) {
                            $("#tiene_colores").val(producto.tiene_colores);
                            // Disparar evento para mostrar/ocultar secciones
                            $("#tiene_colores").trigger('change');
                        }

                        // Descripción en el editor
                        if (producto.descripcion) {
                            $("#descripcion").summernote('code', producto.descripcion);
                        }

                        // PDFs existentes
                        if (producto.ficha_tecnica_pdf) {
                            editFichaTecnicaPDF = producto.ficha_tecnica_pdf;
                            $('#ficha_tecnica_pdf').val(producto.ficha_tecnica_pdf);
                            showPDFPreview('ficha_tecnica', producto.ficha_tecnica_pdf, producto.ficha_tecnica_pdf);
                        }

                        if (producto.ficha_seguridad_pdf) {
                            editFichaSeguridad = producto.ficha_seguridad_pdf;
                            $('#ficha_seguridad_pdf').val(producto.ficha_seguridad_pdf);
                            showPDFPreview('ficha_seguridad', producto.ficha_seguridad_pdf, producto.ficha_seguridad_pdf);
                        }

                        // Seleccionar categoría y marca (después de que se carguen)
                        setTimeout(() => {
                            if (producto.id_categoria) $("#id_categoria").val(producto.id_categoria);
                            if (producto.id_marca) $("#id_marca").val(producto.id_marca);
                        }, 500);

                        // Cargar imágenes o colores según el tipo
                        if (producto.tiene_colores == 1) {
                            loadProductColors(id);
                        } else {
                            loadProductImages(id);
                        }
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Error",
                            text: "No se pudo cargar la información del producto"
                        }).then(() => {
                            window.location.href = "productos.php";
                        });
                    }
                } catch (e) {
                    console.error("Error al procesar respuesta:", e);
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: "Error al cargar los datos del producto"
                    }).then(() => {
                        window.location.href = "productos.php";
                    });
                }
            },
            error: function (xhr, status, error) {
                console.error("Error al cargar producto:", error);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Error de conexión al servidor"
                }).then(() => {
                    window.location.href = "productos.php";
                });
            }
        });
    }

    // Función para cargar colores del producto
    function loadProductColors(id) {
        $.ajax({
            url: "database/model/productos.php",
            type: "POST",
            data: { action: "getProductColors", id: id },
            dataType: 'json',
            success: function (response) {
                try {
                    let coloresData = response;
                    if (typeof response === 'string') {
                        coloresData = JSON.parse(response);
                    }

                    if (Array.isArray(coloresData) && coloresData.length > 0) {
                        editColoresSeleccionados = [];

                        // Crear promesas para cargar las imágenes de cada color
                        const promesas = coloresData.map(colorData => {
                            return loadProductColorImages(id, colorData.id_color).then(imagenes => {
                                const color = {
                                    id: colorData.id_color,
                                    nombre: colorData.nombre,
                                    codigo_hex: colorData.codigo_hex,
                                    imagenes: imagenes,
                                    imagen_preview: colorData.imagen_preview
                                };
                                editColoresSeleccionados.push(color);
                                return color;
                            });
                        });

                        // Esperar a que todas las promesas se resuelvan
                        Promise.all(promesas).then(() => {
                            console.log('Colores cargados con imágenes:', editColoresSeleccionados);
                            // Actualizar interfaz
                            updateSelectedColors();
                        });
                    }
                } catch (e) {
                    console.error("Error al procesar colores:", e);
                }
            },
            error: function (xhr, status, error) {
                console.error("Error al cargar colores:", error);
            }
        });
    }

    // Función para cargar imágenes por color
    function loadProductColorImages(id, colorId) {
        return new Promise((resolve, reject) => {
            $.ajax({
                url: "database/model/productos.php",
                type: "POST",
                data: { action: "getProductColorImages", id: id, color_id: colorId },
                dataType: 'json',
                success: function (response) {
                    try {
                        let imagenesData = response;
                        if (typeof response === 'string') {
                            imagenesData = JSON.parse(response);
                        }

                        const imagenes = [];
                        if (Array.isArray(imagenesData) && imagenesData.length > 0) {
                            imagenesData.forEach(img => {
                                imagenes.push({
                                    filename: img.imagen,
                                    preview: `preview_${img.imagen}`
                                });
                            });
                        }

                        console.log(`Imágenes cargadas para color ${colorId}:`, imagenes);
                        resolve(imagenes);
                    } catch (e) {
                        console.error("Error al procesar imágenes del color:", e);
                        resolve([]);
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error al cargar imágenes del color:", error);
                    resolve([]);
                }
            });
        });
    }

    // Función para cargar imágenes del producto
    function loadProductImages(id) {
        $.ajax({
            url: "database/model/productos.php",
            type: "POST",
            data: { action: "getProductImages", id: id },
            dataType: 'json',
            success: function (response) {
                try {
                    let imagenesData = response;
                    if (typeof response === 'string') {
                        imagenesData = JSON.parse(response);
                    }

                    if (Array.isArray(imagenesData) && imagenesData.length > 0) {
                        editImagenes = [];

                        imagenesData.forEach(img => {
                            editImagenes.push(img.imagen);

                            // Establecer imagen principal
                            if (img.principal == 1) {
                                editImagenPrincipal = img.imagen;
                            }
                        });

                        // Actualizar campos ocultos
                        $("#imagenes").val(editImagenes.join(','));
                        $("#imagen_principal").val(editImagenPrincipal);

                        // Actualizar carrusel
                        updateCarousel();
                    }
                } catch (e) {
                    console.error("Error al procesar imágenes:", e);
                }
            },
            error: function (xhr, status, error) {
                console.error("Error al cargar imágenes:", error);
            }
        });
    }

    // Función para actualizar el carrusel
    function updateCarousel() {
        if (editImagenes.length > 0) {
            let carouselInner = '';
            let indicators = '';

            $("#imagenesCarousel").hide();

            editImagenes.forEach((img, index) => {
                const isActive = img === editImagenPrincipal ? 'active' : '';
                const isPrincipal = img === editImagenPrincipal;

                carouselInner += `
                <div class="carousel-item ${isActive}">
                    <img src="img/productos/${img}" class="d-block mx-auto" alt="Imagen producto">
                    <div class="carousel-caption d-flex justify-content-between carousel-div-btns">
                        <span class="imagen-info">Imagen ${index + 1}${isPrincipal ? ' (Principal)' : ''}</span>
                        <div>
                            <button type="button" class="btn btn-sm ${isPrincipal ? 'btn-success' : 'btn-primary'} me-2 set-principal" 
                                    data-imagen="${img}" ${isPrincipal ? 'disabled' : ''}>
                                <i class="fas fa-star"></i> ${isPrincipal ? 'Principal' : 'Hacer principal'}
                            </button>
                            <button type="button" class="btn btn-sm btn-danger remove-image" data-imagen="${img}">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>`;

                indicators += `
                <button type="button" data-bs-target="#imagenesCarousel" data-bs-slide-to="${index}" 
                        class="${isActive}" aria-current="${isActive === 'active'}" aria-label="Slide ${index + 1}"></button>`;
            });

            $(".carousel-inner").html(carouselInner);
            $(".carousel-indicators").html(indicators);

            $("#imagenesCarousel").fadeIn(300);

            try {
                var carousel = new bootstrap.Carousel(document.getElementById('imagenesCarousel'), {
                    interval: false
                });
            } catch (e) {
                console.error("Error al inicializar el carrusel:", e);
            }

            // Asignar eventos a los botones del carrusel
            $(".set-principal").off('click').on('click', function () {
                const imagen = $(this).data('imagen');
                editImagenPrincipal = imagen;
                $("#imagen_principal").val(editImagenPrincipal);
                updateCarousel();

                // También actualizar en la base de datos
                $.ajax({
                    url: "database/model/productos.php",
                    type: "POST",
                    data: {
                        action: "setImagenPrincipal",
                        id_producto: idProducto,
                        imagen_principal: imagen
                    }
                });
            });

            $(".remove-image").off('click').on('click', function () {
                const imagen = $(this).data('imagen');

                Swal.fire({
                    title: "¿Eliminar imagen?",
                    text: "¿Estás seguro de querer eliminar esta imagen?",
                    icon: "warning",
                    showCancelButton: true,
                    confirmButtonText: "Sí, eliminar",
                    cancelButtonText: "Cancelar"
                }).then((result) => {
                    if (result.isConfirmed) {
                        $.ajax({
                            url: "php/deleteImageProducto.php",
                            type: "POST",
                            data: { filename: imagen },
                            dataType: 'json',
                            success: function (response) {
                                try {
                                    let result = response;
                                    if (typeof response === 'string') {
                                        result = JSON.parse(response);
                                    }

                                    if (result.status === "success") {
                                        editImagenes = editImagenes.filter(img => img !== imagen);

                                        if (editImagenPrincipal === imagen) {
                                            editImagenPrincipal = editImagenes.length > 0 ? editImagenes[0] : '';
                                        }

                                        $("#imagenes").val(editImagenes.join(','));
                                        $("#imagen_principal").val(editImagenPrincipal);

                                        updateCarousel();

                                        if (editDropzone) {
                                            editDropzone.files = editDropzone.files.filter(file =>
                                                file.serverFileName !== imagen
                                            );
                                        }
                                    }
                                } catch (e) {
                                    console.error("Error al procesar respuesta eliminar imagen:", e);
                                }
                            },
                            error: function (xhr, status, error) {
                                console.error("Error AJAX eliminar imagen:", error);
                                Swal.fire({
                                    icon: "error",
                                    title: "Error",
                                    text: "Error al eliminar la imagen"
                                });
                            }
                        });
                    }
                });
            });
        } else {
            $("#imagenesCarousel").fadeOut(300);
        }
    }

    // FUNCIÓN para mostrar preview del PDF
    function showPDFPreview(field, filename, originalName) {
        const previewContainer = $(`#${field}_preview`);
        const uploadInput = $(`#${field}_upload`);

        uploadInput.hide();
        previewContainer.show();
        previewContainer.find('.pdf-name').text(originalName);
    }

    // MANEJO de uploads de PDF
    $('.pdf-upload').on('change', function () {
        const file = this.files[0];
        const field = $(this).data('field');

        if (file) {
            if (file.type !== 'application/pdf') {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Solo se permiten archivos PDF'
                });
                this.value = '';
                return;
            }

            if (file.size > 10 * 1024 * 1024) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'El archivo es demasiado grande. Máximo 10MB'
                });
                this.value = '';
                return;
            }

            uploadPDF(file, field);
        }
    });

    // FUNCIÓN para subir PDF
    function uploadPDF(file, field) {
        const formData = new FormData();
        formData.append('file', file);
        formData.append('field', field);

        Swal.fire({
            title: 'Subiendo PDF...',
            text: 'Por favor espera',
            allowOutsideClick: false,
            showConfirmButton: false,
            willOpen: () => {
                Swal.showLoading();
            }
        });

        $.ajax({
            url: 'php/uploadPDF.php',
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                if (response && response.status === 'success') {
                    if (field === 'ficha_tecnica') {
                        editFichaTecnicaPDF = response.filename;
                        $("#ficha_tecnica_pdf").val(editFichaTecnicaPDF);
                    } else if (field === 'ficha_seguridad') {
                        editFichaSeguridad = response.filename;
                        $("#ficha_seguridad_pdf").val(editFichaSeguridad);
                    }

                    showPDFPreview(field, response.filename, response.original_name);

                    Swal.fire({
                        icon: 'success',
                        title: 'PDF subido correctamente',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Error desconocido al subir PDF'
                    });
                }
            },
            error: function (xhr, status, error) {
                let errorMessage = 'Error de conexión al servidor';

                try {
                    let response = typeof xhr.responseText === 'string' ? JSON.parse(xhr.responseText) : xhr.responseText;
                    if (response && response.message) {
                        errorMessage = response.message;
                    }
                } catch (e) {
                    if (xhr.status === 404) {
                        errorMessage = 'Archivo uploadPDF.php no encontrado';
                    } else if (xhr.status === 500) {
                        errorMessage = 'Error interno del servidor';
                    }
                }

                Swal.fire({
                    icon: 'error',
                    title: 'Error de conexión',
                    text: errorMessage,
                    footer: `Código de error: ${xhr.status}`
                });
            }
        });
    }

    // FUNCIÓN para eliminar PDF
    function deletePDF(field, filename) {
        $.ajax({
            url: 'php/deletePDF.php',
            type: 'POST',
            data: { filename: filename },
            dataType: 'json',
            success: function (response) {
                if (response && response.status === 'success') {
                    if (field === 'ficha_tecnica') {
                        editFichaTecnicaPDF = '';
                        $("#ficha_tecnica_pdf").val('');
                    } else if (field === 'ficha_seguridad') {
                        editFichaSeguridad = '';
                        $("#ficha_seguridad_pdf").val('');
                    }

                    const previewContainer = $(`#${field}_preview`);
                    const uploadInput = $(`#${field}_upload`);

                    previewContainer.hide();
                    uploadInput.show();
                    uploadInput.val('');

                    Swal.fire({
                        icon: 'success',
                        title: 'PDF eliminado',
                        showConfirmButton: false,
                        timer: 1500
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: response.message || 'Error al eliminar PDF'
                    });
                }
            },
            error: function (xhr, status, error) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error de conexión al servidor'
                });
            }
        });
    }

    // MANEJO de eliminación de PDFs
    $(document).on('click', '.remove-pdf', function () {
        const field = $(this).data('field');
        const filename = field === 'ficha_tecnica' ? editFichaTecnicaPDF : editFichaSeguridad;

        Swal.fire({
            title: '¿Eliminar PDF?',
            text: '¿Estás seguro de querer eliminar este archivo?',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonText: 'Sí, eliminar',
            cancelButtonText: 'Cancelar'
        }).then((result) => {
            if (result.isConfirmed) {
                deletePDF(field, filename);
            }
        });
    });

    // Envío del formulario
    $("#editProductoForm").submit(function (e) {
        e.preventDefault();

        const descripcion = $("#descripcion").summernote('code');
        const formData = new FormData(this);
        formData.append('action', 'updateProducto');
        formData.set('descripcion', descripcion);

        const tieneColores = $("#tiene_colores").val();

        // Validaciones según el tipo de producto
        if (tieneColores === "1") {
            // Validar colores
            if (editColoresSeleccionados.length === 0) {
                Swal.fire({
                    icon: "warning",
                    title: "Colores requeridos",
                    text: "Debes seleccionar al menos un color"
                });
                return;
            }

            // Preparar datos de colores
            formData.append('colores_data', JSON.stringify(editColoresSeleccionados));
        } else if (tieneColores === "0") {
            // Validar imágenes normales
            if (editImagenes.length === 0) {
                Swal.fire({
                    icon: "warning",
                    title: "Imágenes requeridas",
                    text: "Debes subir al menos una imagen del producto"
                });
                return;
            }
        }

        $.ajax({
            url: "database/model/productos.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            dataType: 'json',
            success: function (response) {
                if (response && response.status === "success") {
                    Swal.fire({
                        icon: "success",
                        title: "¡Éxito!",
                        text: response.message,
                        showConfirmButton: false,
                        timer: 1500
                    }).then(() => {
                        window.location.href = "productos.php";
                    });
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: response.message || "Error al actualizar producto"
                    });
                }
            },
            error: function (xhr, status, error) {
                let errorMessage = 'Error de conexión al servidor';
                try {
                    let response = typeof xhr.responseText === 'string' ? JSON.parse(xhr.responseText) : xhr.responseText;
                    if (response && response.message) {
                        errorMessage = response.message;
                    }
                } catch (e) {
                    // Usar mensaje genérico
                }

                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: errorMessage
                });
            }
        });
    });

    // Función para cargar categorías
    function loadCategorias() {
        $.ajax({
            url: 'database/model/categorias.php',
            type: 'POST',
            data: { "action": "getCategorias" },
            dataType: 'json',
            success: function (response) {
                try {
                    let categorias = response;
                    let options = '<option value="">Selecciona una categoría</option>';

                    if (Array.isArray(categorias)) {
                        categorias.forEach(function (categoria) {
                            if (categoria.status == 1) {
                                options += `<option value="${categoria.id}">${categoria.nombre}</option>`;
                            }
                        });
                    }

                    $("#id_categoria").html(options);
                } catch (e) {
                    console.error("Error al procesar categorías:", e);
                }
            },
            error: function (xhr, status, error) {
                console.error("Error cargar categorías:", error);
            }
        });
    }

    // Función para cargar marcas
    function loadMarcas() {
        $.ajax({
            url: 'database/model/marcas.php',
            type: 'POST',
            data: { "action": "getMarcas" },
            dataType: 'json',
            success: function (response) {
                try {
                    let marcas = response;
                    let options = '<option value="">Selecciona una marca</option>';

                    if (Array.isArray(marcas)) {
                        marcas.forEach(function (marca) {
                            if (marca.status == 1) {
                                options += `<option value="${marca.id}">${marca.nombre}</option>`;
                            }
                        });
                    }

                    $("#id_marca").html(options);
                } catch (e) {
                    console.error("Error al procesar marcas:", e);
                }
            },
            error: function (xhr, status, error) {
                console.error("Error cargar marcas:", error);
            }
        });
    }

    // Función para cargar colores
    function loadColores() {
        $.ajax({
            url: 'database/model/colores.php',
            type: 'POST',
            data: { "action": "getColores" },
            dataType: 'json',
            success: function (response) {
                try {
                    console.log('Colores cargados:', response);
                    editColoresDisponibles = response;
                    let options = '<option value="">Selecciona un color</option>';

                    if (Array.isArray(editColoresDisponibles)) {
                        editColoresDisponibles.forEach(color => {
                            options += `<option value="${color.id}">${color.nombre}</option>`;
                        });
                    }

                    $("#colorSelect").html(options);
                } catch (e) {
                    console.error("Error al procesar colores:", e);
                }
            },
            error: function (xhr, status, error) {
                console.error("Error cargar colores:", error);
            }
        });
    }
});