// Importante: Desactivar autodescubrimiento ANTES de cualquier otra operación
Dropzone.autoDiscover = false;

$(document).ready(function () {
    loadCategories();

    // Variables para la gestión de imágenes
    let myDropzone;
    let imagenActual = '';

    // Verificar si el elemento Dropzone existe antes de inicializarlo
    if ($("#imageDropzone").length > 0) {
        try {
            myDropzone = new Dropzone("#imageDropzone", {
                url: "php/uploadImageCategoria.php",
                paramName: "file",
                maxFilesize: 1, // MB
                acceptedFiles: "image/jpeg,image/png,image/gif,image/webp",
                maxFiles: 1,
                autoProcessQueue: true,
                dictDefaultMessage: "Arrastra una imagen aquí o haz clic para seleccionar<br><span class='note needsclick'>Tamaño recomendado: 800x600 px</span>",
                dictFileTooBig: "El archivo es demasiado grande ({{filesize}}MB). Tamaño máximo: {{maxFilesize}}MB",
                dictInvalidFileType: "Solo se permiten imágenes",
                init: function () {
                    this.on("success", function (file, response) {
                        try {
                            const result = JSON.parse(response);
                            if (result.status === "success") {
                                $("#imagen").val(result.filename);
                                window.mostrarImagenPreview(result.filename);
                                this.removeAllFiles();
                            } else {
                                console.error("Error al subir imagen:", result.message);
                                Swal.fire({
                                    icon: "error",
                                    title: "Error",
                                    text: result.message
                                });
                            }
                        } catch (e) {
                            console.error("Error al procesar respuesta:", e);
                        }
                    });

                    this.on("error", function (file, errorMessage) {
                        console.error("Error Dropzone:", errorMessage);
                        Swal.fire({
                            icon: "error",
                            title: "Error",
                            text: typeof errorMessage === 'string' ? errorMessage : "Error al subir la imagen"
                        });
                        this.removeFile(file);
                    });

                    this.on("sending", function (file, xhr, formData) {
                        formData.append("tipo", "categoria");
                    });
                }
            });

            // Definir la función mostrarImagenPreview en el ámbito correcto
            window.mostrarImagenPreview = function (filename) {
                if (!filename) {
                    $("#imagen-preview").addClass("d-none");
                    $("#imageDropzone").removeClass("d-none");
                    return;
                }

                const imgUrl = `img/categorias/${filename}`;
                $("#imagen-preview").removeClass("d-none");
                $("#imagen-preview img").attr("src", imgUrl);
                $("#imageDropzone").addClass("d-none");

                window.imagenActual = filename;
                imagenActual = filename;
            };

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

    // Eliminar imagen
    $(document).on("click", "#remove-img", function (e) {
        e.preventDefault();

        if (!imagenActual) return;

        Swal.fire({
            title: "¿Eliminar imagen?",
            text: "¿Estás seguro de que deseas eliminar esta imagen?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Sí, eliminar",
            cancelButtonText: "Cancelar"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "php/deleteImageCategoria.php",
                    type: "POST",
                    data: {
                        filename: imagenActual,
                        tipo: "categoria"
                    },
                    success: function (response) {
                        try {
                            const res = JSON.parse(response);
                            if (res.status === "success") {
                                $("#imagen").val("");
                                $("#imagen-preview").addClass("d-none");
                                $("#imageDropzone").removeClass("d-none");
                                imagenActual = '';
                                if (myDropzone) {
                                    myDropzone.removeAllFiles();
                                }
                            } else {
                                console.error("Error al eliminar imagen:", res.message);
                            }
                        } catch (e) {
                            console.error("Error al procesar respuesta:", e);
                        }
                    },
                    error: function (xhr, status, error) {
                        console.error("Error AJAX:", error);
                    }
                });
            }
        });
    });

    // Limpiar el modal al cerrarlo
    $('#addCategoryModal').on('hidden.bs.modal', function () {
        $("#addCategoryForm")[0].reset();
        $("#id_categoria").val("");
        $("#imagen").val("");
        $("#addCategoryModalLabel").html('Añadir Categoría');
        $("#btn-save-category").text("Guardar categoría");

        // Limpiar vista previa imagen
        $("#imagen-preview").addClass("d-none");
        $("#imageDropzone").removeClass("d-none");
        if (myDropzone) {
            myDropzone.removeAllFiles();
        }
        imagenActual = '';
    });

    // Botón guardar categoría
    $("#btn-save-category").click(function () {
        saveCategory();
    });
});

function loadCategories() {
    $.ajax({
        url: 'database/model/categorias.php',
        type: 'POST',
        data: { "action": "getCategorias" },
        success: function (response) {
            try {
                let categorias = JSON.parse(response);

                // Si ya existe la tabla, destruirla para recrearla
                if ($.fn.DataTable.isDataTable('#categoryTable')) {
                    $('#categoryTable').DataTable().destroy();
                }

                $('#categoryTable').DataTable({
                    "paging": true,
                    "pageLength": 10,
                    "lengthMenu": [5, 10, 25, 50, 100],
                    "searching": true,
                    "info": true,
                    "ordering": true,
                    "responsive": true,
                    "data": categorias,
                    "columns": [
                        {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                return meta.row + 1;  // Contador
                            }
                        },
                        {
                            "data": "imagen",
                            "render": function (data) {
                                if (data) {
                                    return `<img src="img/categorias/${data}" alt="Imagen categoría" class="img-thumbnail" style="width: 80px;">`;
                                } else {
                                    return '<div class="text-center text-muted">Sin imagen</div>';
                                }
                            }
                        },
                        { "data": "nombre" },
                        {
                            "data": "destacado",
                            "render": function (data) {
                                return data == 1 ?
                                    '<span class="badge bg-success">Sí</span>' :
                                    '<span class="badge bg-secondary">No</span>';
                            }
                        },
                        {
                            "data": "status",
                            "render": function (data) {
                                return data == 1 ?
                                    '<span class="badge bg-success">Activo</span>' :
                                    '<span class="badge bg-danger">Inactivo</span>';
                            }
                        },
                        {
                            "data": null,
                            "render": function (data, type, row) {
                                let buttons = `<div class="btn-group" role="group">
                                    <button class="btn btn-primary btn-sm" onclick="editCategoria(${row.id})">
                                        <i class="fa-solid fa-pen-to-square"></i>
                                    </button>`;

                                // Condición para mostrar el botón de eliminar o restaurar según el status
                                if (row.status == 1) {
                                    buttons += `
                                    <button class="btn btn-danger btn-sm" onclick="deleteCategoria(${row.id})">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>`;
                                } else {
                                    buttons += `
                                    <button class="btn btn-success btn-sm" onclick="restoreCategoria(${row.id})">
                                        <i class="fa-solid fa-rotate-right"></i>
                                    </button>`;
                                }

                                buttons += `</div>`;
                                return buttons;
                            }
                        }
                    ],
                    "language": {
                        "url": "es-ES.json"
                    }
                });
            } catch (e) {
                console.error("Error al procesar la respuesta:", e);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Error al cargar las categorías"
                });
            }
        },
        error: function (xhr, status, error) {
            console.error("Error AJAX:", error);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Error de conexión al servidor"
            });
        }
    });
}

function saveCategory() {
    // Validar el formulario
    let id_categoria = $("#id_categoria").val();
    let nombre = $("#nombre").val().trim();
    let destacado = $("#destacado").val();

    if (!nombre || !destacado) {
        Swal.fire({
            icon: "error",
            title: "Error de validación",
            text: "Todos los campos son obligatorios"
        });
        return;
    }

    // Determinar si es creación o actualización
    let action = id_categoria ? "updateCategoria" : "addCategoria";
    let formData = new FormData(document.getElementById("addCategoryForm"));
    formData.append("action", action);

    // Enviar solicitud AJAX
    $.ajax({
        url: "database/model/categorias.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            try {
                let result = JSON.parse(response);

                Swal.fire({
                    icon: result.status,
                    title: result.message,
                    showConfirmButton: false,
                    timer: 1500
                }).then(() => {
                    if (result.status === "success") {
                        $('#addCategoryModal').modal('hide');
                        loadCategories();
                    }
                });
            } catch (e) {
                console.error("Error al procesar la respuesta:", e);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Error al procesar la respuesta del servidor"
                });
            }
        },
        error: function (xhr, status, error) {
            console.error("Error AJAX:", error);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Error de conexión al servidor"
            });
        }
    });
}

// Función para editar categoría
function editCategoria(id) {
    $.ajax({
        url: "database/model/categorias.php",
        type: "POST",
        data: { "action": "getCategoria", "id": id },
        success: function (response) {
            try {
                let categoria = JSON.parse(response);

                if (categoria && categoria.id) {
                    $("#id_categoria").val(categoria.id);
                    $("#nombre").val(categoria.nombre);
                    $("#destacado").val(categoria.destacado);

                    // Mostrar imagen si existe
                    if (categoria.imagen) {
                        $("#imagen").val(categoria.imagen);
                        if (typeof window.mostrarImagenPreview === 'function') {
                            window.mostrarImagenPreview(categoria.imagen);
                        }
                        window.imagenActual = categoria.imagen;
                    } else {
                        $("#imagen-preview").addClass("d-none");
                        $("#imageDropzone").removeClass("d-none");
                    }

                    $("#addCategoryModalLabel").html('Editar Categoría <i class="fa-solid fa-pen-to-square"></i>');
                    $("#btn-save-category").text("Actualizar categoría");
                    $("#addCategoryModal").modal("show");
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: "No se pudo cargar la información de la categoría"
                    });
                }
            } catch (e) {
                console.error("Error al procesar la respuesta:", e);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Error al procesar la respuesta del servidor"
                });
            }
        },
        error: function (xhr, status, error) {
            console.error("Error AJAX:", error);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Error de conexión al servidor"
            });
        }
    });
}

function deleteCategoria(id) {
    Swal.fire({
        title: "¿Estás seguro?",
        text: "Esta acción no se puede revertir",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Sí, eliminar",
        cancelButtonText: "Cancelar"
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "database/model/categorias.php",
                type: "POST",
                data: { "action": "deleteCategoria", "id": id },
                success: function (response) {
                    try {
                        let result = JSON.parse(response);

                        Swal.fire({
                            icon: result.status,
                            title: result.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            if (result.status === "success") {
                                loadCategories();
                            }
                        });
                    } catch (e) {
                        console.error("Error al procesar la respuesta:", e);
                        Swal.fire({
                            icon: "error",
                            title: "Error",
                            text: "Error al procesar la respuesta del servidor"
                        });
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error AJAX:", error);
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: "Error de conexión al servidor"
                    });
                }
            });
        }
    });
}
function restoreCategoria(id) {
    Swal.fire({
        title: "¿Estás seguro?",
        text: "Esta acción restaurará la categoría",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Sí, restaurar",
        cancelButtonText: "Cancelar"
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "database/model/categorias.php",
                type: "POST",
                data: { "action": "activateCategoria", "id": id },
                success: function (response) {
                    try {
                        let result = JSON.parse(response);

                        Swal.fire({
                            icon: result.status,
                            title: result.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            if (result.status === "success") {
                                loadCategories();
                            }
                        });
                    } catch (e) {
                        console.error("Error al procesar la respuesta:", e);
                        Swal.fire({
                            icon: "error",
                            title: "Error",
                            text: "Error al procesar la respuesta del servidor"
                        });
                    }
                },
                error: function (xhr, status, error) {
                    console.error("Error AJAX:", error);
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: "Error de conexión al servidor"
                    });
                }
            });
        }
    });
}

// Exponer las funciones principales para uso global
window.editCategoria = editCategoria;
window.deleteCategoria = deleteCategoria;
window.restoreCategoria = restoreCategoria;