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

$(document).ready(function () {
    // Inicializar CKEditor para el contenido
    let editor;
    
    ClassicEditor
        .create(document.querySelector('#descripcion'), {
            toolbar: {
                items: [
                    'heading', '|',
                    'bold', 'italic', 'underline', '|',
                    'link', 'bulletedList', 'numberedList', '|',
                    'outdent', 'indent', '|',
                    'blockQuote', 'insertTable', '|',
                    'undo', 'redo'
                ]
            },
            language: 'es',
            placeholder: 'Escribe el contenido del blog aquí...',
            heading: {
                options: [
                    { model: 'paragraph', title: 'Párrafo', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Título 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Título 2', class: 'ck-heading_heading2' },
                    { model: 'heading3', view: 'h3', title: 'Título 3', class: 'ck-heading_heading3' }
                ]
            }
        })
        .then(newEditor => {
            editor = newEditor;
            
            // Configurar altura mínima
            newEditor.editing.view.change(writer => {
                writer.setStyle('min-height', '300px', newEditor.editing.view.document.getRoot());
            });
        })
        .catch(error => {
            console.error('Error al inicializar CKEditor:', error);
        });

    // Variables para gestionar imagen
    let imagenPrincipal = '';
    let myDropzone;

    // Inicializar Dropzone para una sola imagen
    if ($("#dropzoneBlog").length && !$("#dropzoneBlog").hasClass("dz-clickable")) {
        try {
            myDropzone = new Dropzone("#dropzoneBlog", {
                url: "php/uploadImageBlog.php",
                paramName: "file",
                maxFilesize: 5, // MB
                acceptedFiles: "image/jpeg,image/png,image/gif,image/webp",
                maxFiles: 1, // Solo una imagen
                addRemoveLinks: false,
                dictDefaultMessage: "Arrastra la imagen aquí o haz clic para seleccionar<br><span class='note needsclick'>Solo se permite una imagen principal.</span>",
                dictFileTooBig: "El archivo es demasiado grande ({{filesize}}MB). Tamaño máximo: {{maxFilesize}}MB",
                dictInvalidFileType: "Solo se permiten imágenes",
                dictMaxFilesExceeded: "Solo se permite una imagen",
                previewsContainer: false, // Desactivar previsualizaciones predeterminadas
                init: function() {
                    this.on("success", function(file, response) {
                        try {
                            console.log("Respuesta del servidor:", response);
                            console.log("Tipo de respuesta:", typeof response);
                            
                            // CORREGIDO: Verificar si ya es un objeto o si necesita parsing
                            let result;
                            if (typeof response === 'object' && response !== null) {
                                // Ya es un objeto (Dropzone parseó automáticamente)
                                result = response;
                            } else if (typeof response === 'string') {
                                // Es string, necesita parsing
                                result = JSON.parse(response);
                            } else {
                                throw new Error('Formato de respuesta no válido');
                            }
                            
                            console.log("Resultado procesado:", result);
                            
                            if (result.status === "success") {
                                // Guardar nombre de imagen
                                file.serverFileName = result.filename;
                                imagenPrincipal = result.filename;
                                
                                // Actualizar campo oculto
                                $("#imagen_principal").val(imagenPrincipal);
                                
                                // Mostrar preview de la imagen
                                showImagePreview(result.filename);
                                
                                // Ocultar dropzone
                                $("#dropzoneBlog").hide();
                                
                                // Mostrar mensaje de éxito
                                Swal.fire({
                                    icon: "success",
                                    title: "¡Éxito!",
                                    text: "Imagen subida correctamente",
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                            } else {
                                console.error("Error al subir imagen:", result.message);
                                Swal.fire({
                                    icon: "error",
                                    title: "Error",
                                    text: result.message || "Error al subir la imagen"
                                });
                                // Remover archivo fallido
                                this.removeFile(file);
                            }
                        } catch (e) {
                            console.error("Error al procesar respuesta:", e);
                            console.error("Respuesta original:", response);
                            
                            Swal.fire({
                                icon: "error",
                                title: "Error",
                                text: "Error al procesar la respuesta del servidor"
                            });
                            // Remover archivo fallido
                            this.removeFile(file);
                        }
                    });

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

                    this.on("maxfilesexceeded", function(file) {
                        Swal.fire({
                            icon: "warning",
                            title: "Límite excedido",
                            text: "Solo puedes subir una imagen"
                        });
                        this.removeFile(file);
                    });
                }
            });
        } catch (error) {
            console.error("Error al inicializar Dropzone:", error);
        }
    }

    // Función para mostrar preview de la imagen
    function showImagePreview(filename) {
        const previewHtml = `
            <div id="imagePreview" class="text-center mt-3">
                <img src="img/blog/${filename}" class="img-fluid" style="max-height: 200px; border-radius: 5px;" alt="Vista previa">
                <div class="mt-2">
                    <span class="badge bg-success">Imagen principal</span>
                    <button type="button" class="btn btn-danger btn-sm ms-2" onclick="removeImage()">
                        <i class="fas fa-trash"></i> Eliminar
                    </button>
                </div>
            </div>
        `;
        
        // Remover preview anterior si existe
        $("#imagePreview").remove();
        
        // Agregar nuevo preview después del dropzone
        $("#dropzoneBlog").after(previewHtml);
    }

    // Función global para eliminar imagen
    window.removeImage = function() {
        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) {
                // Eliminar archivo del servidor
                $.ajax({
                    url: "php/deleteImageBlog.php",
                    type: "POST",
                    data: { filename: imagenPrincipal },
                    success: function(response) {
                        try {
                            // CORREGIDO: Manejar respuesta de la misma manera
                            let result;
                            if (typeof response === 'object') {
                                result = response;
                            } else {
                                result = JSON.parse(response);
                            }
                            
                            if (result.status === "success") {
                                // Limpiar variables
                                imagenPrincipal = '';
                                $("#imagen_principal").val('');
                                
                                // Remover preview
                                $("#imagePreview").remove();
                                
                                // Mostrar dropzone nuevamente
                                $("#dropzoneBlog").show();
                                
                                // Limpiar dropzone
                                myDropzone.removeAllFiles();
                                
                                Swal.fire({
                                    icon: "success",
                                    title: "Imagen eliminada",
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                            }
                        } catch (e) {
                            console.error("Error al procesar respuesta:", e);
                        }
                    }
                });
            }
        });
    };

    // Envío del formulario
    $("#blogForm").submit(function(e) {
        e.preventDefault();
        
        const titulo = $("#nombre").val().trim();
        const contenido = editor.getData();
        const publicado = $("#publicado").val();
        
        // Validaciones
        if (!titulo) {
            Swal.fire({
                icon: "warning",
                title: "Campo requerido",
                text: "El título es obligatorio"
            });
            return;
        }
        
        if (!contenido || contenido.trim() === '') {
            Swal.fire({
                icon: "warning",
                title: "Campo requerido",
                text: "El contenido es obligatorio"
            });
            return;
        }
        
        // Crear FormData
        const formData = new FormData();
        formData.append('action', 'createBlog');
        formData.append('titulo', titulo);
        formData.append('contenido', contenido);
        formData.append('status', publicado);
        formData.append('imagen', imagenPrincipal);
        
        $.ajax({
            url: "database/model/blogs.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                try {
                    // CORREGIDO: Manejar respuesta consistentemente
                    let result;
                    if (typeof response === 'object') {
                        result = response;
                    } else {
                        result = JSON.parse(response);
                    }
                    
                    if (result.status === "success") {
                        Swal.fire({
                            icon: "success",
                            title: "¡Éxito!",
                            text: result.message,
                            showConfirmButton: false,
                            timer: 1500
                        }).then(() => {
                            window.location.href = "blog.php";
                        });
                    } else {
                        Swal.fire({
                            icon: "error",
                            title: "Error",
                            text: result.message
                        });
                    }
                } catch (e) {
                    console.error("Error al procesar 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"
                });
            }
        });
    });
});