Dropzone.autoDiscover = false;

$(document).ready(function () {
    loadBanners();
    initializeDropzone();
});

function loadBanners() {
    $.ajax({
        url: 'database/model/banners.php',
        type: 'POST',
        data: { action: 'getBanners' },
        success: function (response) {
            let banners = JSON.parse(response);
            let sortableList = $('#sortableBanners');
            sortableList.empty();

            if (banners.length === 0) {
                sortableList.append('<li class="list-group-item text-center">Sin banners registrados</li>');
                return;
            }

            console.log(banners);
            banners.forEach(banner => {
                sortableList.append(`
                    <li class="list-group-item d-flex align-items-center" data-id="${banner.id}">
                        <div class="col-8">
                            <img src="img/banners/${banner.banner}" alt="Banner" class="banner-img" style="width: 100px; height: auto;">
                        </div>
                        <div class="col-4 text-end">
                            <button class="btn btn-primary btn-sm me-2" onclick="editBanner(${banner.id})">
                                <i class="fa-solid fa-pen-to-square"></i> Editar
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="deleteBanner(${banner.id})">
                                <i class="fa-solid fa-trash"></i> Eliminar
                            </button>
                        </div>
                    </li>
                `);
            });

            initializeSortable();
        },
        error: function (error) {
            console.log("Error:", error);
        }
    });
}

function initializeSortable() {
    new Sortable(document.getElementById('sortableBanners'), {
        animation: 150,
        onEnd: function () {
            let order = [];
            $('#sortableBanners li').each(function () {
                order.push($(this).data('id'));
            });

            $.ajax({
                url: 'database/model/banners.php',
                type: 'POST',
                data: { action: 'updateOrder', order: order },
                success: function (response) {
                    let result = JSON.parse(response);
                    Swal.fire({
                        icon: result.status === 'success' ? 'success' : 'error',
                        title: result.message,
                        showConfirmButton: false,
                        timer: 1500
                    });
                },
                error: function (error) {
                    console.error("Error al actualizar el orden:", error);
                }
            });
        }
    });
}

let bannerDropzone = null;

function initializeDropzone() {
    // Destruir instancia existente si existe
    if (bannerDropzone) {
        bannerDropzone.destroy();
    }

    // Crear nueva instancia de Dropzone
    bannerDropzone = new Dropzone("#bannerForm", {
        url: "database/model/banners.php", // URL por defecto (se cambiará dinámicamente)
        autoProcessQueue: false,
        uploadMultiple: false,
        acceptedFiles: ".jpg,.jpeg,.png,.gif",
        maxFiles: 1,
        addRemoveLinks: true,
        dictDefaultMessage: `
            <p>Arrastra y suelta una imagen aquí</p>
            <p>o</p>
            <p>haz clic para seleccionar</p>
            <p class="dz-p">(Dimensiones recomendadas: 1519x360px)</p>
        `,
        dictRemoveFile: "Eliminar archivo",
        dictFileTooBig: "El archivo es demasiado grande ({{filesize}}MB). Tamaño máximo: {{maxFilesize}}MB.",
        dictInvalidFileType: "No puedes subir archivos de este tipo.",
        maxFilesize: 1, // 1MB máximo
        init: function () {
            let myDropzone = this;

            // Manejar archivo agregado
            this.on("addedfile", function (file) {
                console.log("Archivo agregado:", file.name);
                
                // Remover archivos anteriores si excede el máximo
                if (this.files.length > this.options.maxFiles) {
                    this.removeFile(this.files[0]);
                }
            });

            // Manejar archivo removido
            this.on("removedfile", function (file) {
                console.log("Archivo eliminado:", file.name);
            });

            // Manejar errores
            this.on("error", function (file, message) {
                console.error("Error en dropzone:", message);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: typeof message === 'string' ? message : "Error al procesar el archivo"
                });
            });

            // Manejar envío completado
            this.on("complete", function (file) {
                if (file.xhr && file.xhr.response) {
                    try {
                        let response = JSON.parse(file.xhr.response);
                        Swal.fire({
                            icon: response.status === 'success' ? 'success' : 'error',
                            title: response.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            if (response.status === "success") {
                                $('#bannersModal').modal('hide');
                                loadBanners();
                            }
                        });
                    } catch (e) {
                        console.error("Error parsing response:", e);
                    }
                }
            });
        }
    });

    // Manejar envío del formulario
    $("#submitBanner").off('click').on("click", function () {
        let id = $("#id").val();

        if (id) {
            // Actualizar banner existente
            updateExistingBanner(id);
        } else {
            // Crear nuevo banner
            createNewBanner();
        }
    });
}

function createNewBanner() {
    if (bannerDropzone.getQueuedFiles().length === 0) {
        Swal.fire({
            icon: "error",
            title: "Error",
            text: "Por favor, selecciona una imagen antes de guardar."
        });
        return;
    }

    // Configurar parámetros para crear
    bannerDropzone.options.params = {
        action: "uploadBanner"
    };

    // Procesar cola
    bannerDropzone.processQueue();
}

function updateExistingBanner(id) {
    let formData = new FormData();
    formData.append("action", "updateBannerWithImage");
    formData.append("id", id);

    // Agregar archivo si existe
    if (bannerDropzone.getQueuedFiles().length > 0) {
        formData.append("file", bannerDropzone.getQueuedFiles()[0]);
    }

    $.ajax({
        url: "database/model/banners.php",
        type: "POST",
        data: formData,
        processData: false,
        contentType: false,
        success: function (response) {
            try {
                let result = JSON.parse(response);
                Swal.fire({
                    icon: result.status === 'success' ? 'success' : 'error',
                    title: result.message,
                    showConfirmButton: false,
                    timer: 1500
                }).then(() => {
                    if (result.status === "success") {
                        $('#bannersModal').modal('hide');
                        loadBanners();
                    }
                });
            } catch (e) {
                console.error("Error parsing response:", e);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Error al procesar la respuesta del servidor"
                });
            }
        },
        error: function (xhr, status, error) {
            console.error("Error:", error);
            Swal.fire({
                icon: "error",
                title: "Error",
                text: "Ocurrió un error al procesar la solicitud"
            });
        }
    });
}

function editBanner(id) {
    $.ajax({
        url: 'database/model/banners.php',
        type: 'POST',
        data: { action: 'getBanner', id: id },
        success: function (response) {
            try {
                let banner = JSON.parse(response);

                if (banner.status === 'error') {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: banner.message
                    });
                    return;
                }

                // Establecer valores en el modal
                $('#id').val(banner.id);
                $('#bannersModalLabel').text('Editar Banner');
                $('#currentImage').attr('src', `img/banners/${banner.banner}`);
                $('#currentImageContainer').show();
                
                // Mostrar modal
                $('#bannersModal').modal('show');
                
            } catch (e) {
                console.error("Error parsing response:", e);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error al procesar la respuesta del servidor'
                });
            }
        },
        error: function (error) {
            console.error("Error al obtener el banner:", error);
            Swal.fire({
                icon: 'error',
                title: 'Error',
                text: 'Error al obtener información del banner'
            });
        }
    });
}

function deleteBanner(id) {
    Swal.fire({
        title: '¿Estás seguro?',
        text: "¡No podrás revertir esto!",
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'Sí, eliminarlo',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (result.isConfirmed) {
            $.ajax({
                url: 'database/model/banners.php',
                type: 'POST',
                data: { action: 'deleteBanner', id: id },
                success: function (response) {
                    try {
                        let result = JSON.parse(response);
                        Swal.fire({
                            icon: result.status === 'success' ? 'success' : 'error',
                            title: result.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            if (result.status === "success") {
                                loadBanners();
                            }
                        });
                    } catch (e) {
                        console.error("Error parsing response:", e);
                    }
                },
                error: function (error) {
                    console.error("Error:", error);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error al eliminar el banner'
                    });
                }
            });
        }
    });
}

// Manejar cierre del modal
$('#bannersModal').on('hidden.bs.modal', function () {
    // Limpiar formulario
    $('#bannerForm')[0].reset();
    $('#id').val('');
    $('#currentImageContainer').hide();
    $('#currentImage').attr('src', '');
    $('#bannersModalLabel').text('Agregar Banner');
    
    // Limpiar Dropzone
    if (bannerDropzone) {
        bannerDropzone.removeAllFiles();
    }
});