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

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

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

    // Verificar si el elemento Dropzone existe antes de inicializarlo
    if ($("#logoDropzone").length > 0) {
        try {
            myDropzone = new Dropzone("#logoDropzone", {
                url: "php/uploadImageMarca.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: 400x200 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") {
                                $("#logo").val(result.filename);
                                window.mostrarLogoPreview(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", "marca");
                    });
                }
            });

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

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

                window.logoActual = filename;
                logoActual = filename;
            };

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

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

        if (!logoActual) return;

        Swal.fire({
            title: "¿Eliminar logo?",
            text: "¿Estás seguro de que deseas eliminar este logo?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Sí, eliminar",
            cancelButtonText: "Cancelar"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "php/deleteImageMarca.php",
                    type: "POST",
                    data: {
                        filename: logoActual,
                        tipo: "marca"
                    },
                    success: function (response) {
                        try {
                            const res = JSON.parse(response);
                            if (res.status === "success") {
                                $("#logo").val("");
                                $("#logo-preview").addClass("d-none");
                                $("#logoDropzone").removeClass("d-none");
                                logoActual = '';
                                if (myDropzone) {
                                    myDropzone.removeAllFiles();
                                }
                            } else {
                                console.error("Error al eliminar logo:", 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
    $('#addMarcaModal').on('hidden.bs.modal', function () {
        $("#addMarcaForm")[0].reset();
        $("#id_marca").val("");
        $("#logo").val("");
        $("#addMarcaModalLabel").html('Añadir Marca');
        $("#btn-save-marca").text("Guardar marca");

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

    // Botón guardar marca
    $("#btn-save-marca").click(function () {
        saveMarca();
    });
});

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

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

                $('#marcasTable').DataTable({
                    "paging": true,
                    "pageLength": 10,
                    "lengthMenu": [5, 10, 25, 50, 100],
                    "searching": true,
                    "info": true,
                    "ordering": true,
                    "responsive": true,
                    "data": marcas,
                    "columns": [
                        {
                            "data": null,
                            "render": function (data, type, row, meta) {
                                return meta.row + 1;  // Contador
                            }
                        },
                        {
                            "data": "logo",
                            "render": function (data) {
                                if (data) {
                                    return `<img src="img/marcas/${data}" alt="Logo marca" class="img-thumbnail" style="width: 100px;">`;
                                } else {
                                    return '<div class="text-center text-muted">Sin logo</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="editMarca(${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="deleteMarca(${row.id})">
                                        <i class="fa-solid fa-trash"></i>
                                    </button>`;
                                } else {
                                    buttons += `
                                    <button class="btn btn-success btn-sm" onclick="restoreMarca(${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 marcas"
                });
            }
        },
        error: function (xhr, status, error) {
            console.error("Error AJAX:", error);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Error de conexión al servidor"
            });
        }
    });
}

function saveMarca() {
    // Validar el formulario
    let id_marca = $("#id_marca").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_marca ? "updateMarca" : "addMarca";
    let formData = new FormData(document.getElementById("addMarcaForm"));
    formData.append("action", action);

    // Enviar solicitud AJAX
    $.ajax({
        url: "database/model/marcas.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") {
                        $('#addMarcaModal').modal('hide');
                        loadMarcas();
                    }
                });
            } 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 marca
function editMarca(id) {
    $.ajax({
        url: "database/model/marcas.php",
        type: "POST",
        data: { "action": "getMarca", "id": id },
        success: function (response) {
            try {
                let marca = JSON.parse(response);

                if (marca && marca.id) {
                    $("#id_marca").val(marca.id);
                    $("#nombre").val(marca.nombre);
                    $("#destacado").val(marca.destacado);

                    // Mostrar logo si existe
                    if (marca.logo) {
                        $("#logo").val(marca.logo);
                        if (typeof window.mostrarLogoPreview === 'function') {
                            window.mostrarLogoPreview(marca.logo);
                        }
                        window.logoActual = marca.logo;
                    } else {
                        $("#logo-preview").addClass("d-none");
                        $("#logoDropzone").removeClass("d-none");
                    }

                    $("#addMarcaModalLabel").html('Editar Marca <i class="fa-solid fa-pen-to-square"></i>');
                    $("#btn-save-marca").text("Actualizar marca");
                    $("#addMarcaModal").modal("show");
                } else {
                    Swal.fire({
                        icon: "error",
                        title: "Error",
                        text: "No se pudo cargar la información de la marca"
                    });
                }
            } 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 deleteMarca(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/marcas.php",
                type: "POST",
                data: { "action": "deleteMarca", "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") {
                                loadMarcas();
                            }
                        });
                    } 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 restoreMarca(id) {
    Swal.fire({
        title: "¿Estás seguro?",
        text: "Esta acción restaurará la marca",
        icon: "warning",
        showCancelButton: true,
        confirmButtonColor: "#3085d6",
        cancelButtonColor: "#d33",
        confirmButtonText: "Sí, restaurar",
        cancelButtonText: "Cancelar"
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: "database/model/marcas.php",
                type: "POST",
                data: { "action": "activateMarca", "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") {
                                loadMarcas();
                            }
                        });
                    } 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.editMarca = editMarca;
window.deleteMarca = deleteMarca;
window.restoreMarca = restoreMarca;