Dropzone.autoDiscover = false;

$(document).ready(function () {
    // Variables globales
    let editor;
    let imagenPrincipal = '';
    let imagenActual = '';
    let myDropzone;
    let blogData = null;
    
    const blogId = $("#blog_id").val();
    
    if (!blogId) {
        Swal.fire({
            icon: 'error',
            title: 'Error',
            text: 'ID de blog no encontrado'
        }).then(() => {
            window.location.href = 'blog.php';
        });
        return;
    }

    // Mostrar loading
    $("#loadingOverlay").show();
    
    // Cargar datos del blog
    loadBlogData();

    // Inicializar CKEditor
    function initCKEditor(contenido = '') {
        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());
                });
                
                // Establecer contenido inicial
                if (contenido) {
                    editor.setData(contenido);
                }
            })
            .catch(error => {
                console.error('Error al inicializar CKEditor:', error);
            });
    }

    // Cargar datos del blog
    function loadBlogData() {
        $.ajax({
            url: 'database/model/blogs.php',
            type: 'POST',
            data: { 
                action: 'getBlog', 
                id: blogId 
            },
            success: function(response) {
                try {
                    let result;
                    if (typeof response === 'object') {
                        result = response;
                    } else {
                        result = JSON.parse(response);
                    }
                    
                    if (result.status === 'error') {
                        throw new Error(result.message);
                    }
                    
                    // Guardar datos del blog
                    blogData = result;
                    
                    // Llenar formulario
                    fillForm(result);
                    
                    // Inicializar CKEditor con contenido
                    initCKEditor(result.contenido);
                    
                    // Inicializar Dropzone
                    initDropzone();
                    
                    // Ocultar loading
                    $("#loadingOverlay").hide();
                    
                } catch (e) {
                    console.error('Error al procesar respuesta:', e);
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: 'Error al cargar los datos del blog: ' + e.message
                    }).then(() => {
                        window.location.href = 'blog.php';
                    });
                }
            },
            error: function(xhr, status, error) {
                console.error('Error AJAX:', error);
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Error de conexión al servidor'
                }).then(() => {
                    window.location.href = 'blog.php';
                });
            }
        });
    }

    // Llenar formulario con datos
    function fillForm(data) {
        $("#nombre").val(data.titulo || '');
        $("#publicado").val(data.status || '1');
        
        // Manejar imagen actual
        if (data.imagen && data.imagen.trim() !== '') {
            imagenActual = data.imagen;
            $("#imagen_actual").val(imagenActual);
            showCurrentImage(imagenActual);
        }
    }

    // Mostrar imagen actual
    function showCurrentImage(filename) {
        $("#currentImage").attr('src', 'img/blog/' + filename);
        $("#currentImageContainer").show();
        $("#dropzoneBlog").hide();
    }

    // Función para cambiar imagen
    window.changeImage = function() {
        $("#currentImageContainer").hide();
        $("#dropzoneBlog").show();
    };

    // Función para eliminar imagen actual
    window.removeCurrentImage = function() {
        Swal.fire({
            title: "¿Eliminar imagen?",
            text: "¿Estás seguro de querer eliminar la imagen actual?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Sí, eliminar",
            cancelButtonText: "Cancelar"
        }).then((result) => {
            if (result.isConfirmed) {
                imagenActual = '';
                $("#imagen_actual").val('');
                $("#currentImageContainer").hide();
                $("#dropzoneBlog").show();
                
                Swal.fire({
                    icon: "success",
                    title: "Imagen eliminada",
                    text: "La imagen será eliminada al guardar",
                    timer: 1500,
                    showConfirmButton: false
                });
            }
        });
    };

    // Inicializar Dropzone
    function initDropzone() {
        if ($("#dropzoneBlog").length && !$("#dropzoneBlog").hasClass("dz-clickable")) {
            try {
                myDropzone = new Dropzone("#dropzoneBlog", {
                    url: "php/uploadImageBlog.php",
                    paramName: "file",
                    maxFilesize: 5,
                    acceptedFiles: "image/jpeg,image/png,image/gif,image/webp",
                    maxFiles: 1,
                    addRemoveLinks: false,
                    dictDefaultMessage: "Arrastra la nueva imagen aquí o haz clic para seleccionar<br><span class='note needsclick'>Solo se permite una imagen.</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,
                    init: function() {
                        this.on("success", function(file, response) {
                            try {
                                let result;
                                if (typeof response === 'object' && response !== null) {
                                    result = response;
                                } else if (typeof response === 'string') {
                                    result = JSON.parse(response);
                                } else {
                                    throw new Error('Formato de respuesta no válido');
                                }
                                
                                if (result.status === "success") {
                                    file.serverFileName = result.filename;
                                    imagenPrincipal = result.filename;
                                    $("#imagen_principal").val(imagenPrincipal);
                                    
                                    showNewImagePreview(result.filename);
                                    $("#dropzoneBlog").hide();
                                    
                                    Swal.fire({
                                        icon: "success",
                                        title: "¡Éxito!",
                                        text: "Nueva 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"
                                    });
                                    this.removeFile(file);
                                }
                            } catch (e) {
                                console.error("Error al procesar respuesta:", e);
                                Swal.fire({
                                    icon: "error",
                                    title: "Error",
                                    text: "Error al procesar la respuesta del servidor"
                                });
                                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);
            }
        }
    }

    // Mostrar preview de nueva imagen
    function showNewImagePreview(filename) {
        const previewHtml = `
            <div id="newImagePreview" class="text-center mt-3">
                <img src="img/blog/${filename}" class="img-fluid" style="max-height: 200px; border-radius: 5px;" alt="Nueva imagen">
                <div class="mt-2">
                    <span class="badge bg-success">Nueva imagen</span>
                    <button type="button" class="btn btn-danger btn-sm ms-2" onclick="removeNewImage()">
                        <i class="fas fa-trash"></i> Eliminar
                    </button>
                </div>
            </div>
        `;
        
        $("#newImagePreview").remove();
        $("#dropzoneBlog").after(previewHtml);
    }

    // Función para eliminar nueva imagen
    window.removeNewImage = function() {
        Swal.fire({
            title: "¿Eliminar nueva imagen?",
            text: "¿Estás seguro de querer eliminar la nueva imagen?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonText: "Sí, eliminar",
            cancelButtonText: "Cancelar"
        }).then((result) => {
            if (result.isConfirmed) {
                $.ajax({
                    url: "php/deleteImageBlog.php",
                    type: "POST",
                    data: { filename: imagenPrincipal },
                    success: function(response) {
                        try {
                            let result;
                            if (typeof response === 'object') {
                                result = response;
                            } else {
                                result = JSON.parse(response);
                            }
                            
                            if (result.status === "success") {
                                imagenPrincipal = '';
                                $("#imagen_principal").val('');
                                $("#newImagePreview").remove();
                                
                                // Mostrar imagen actual o dropzone
                                if (imagenActual) {
                                    showCurrentImage(imagenActual);
                                } else {
                                    $("#dropzoneBlog").show();
                                }
                                
                                myDropzone.removeAllFiles();
                                
                                Swal.fire({
                                    icon: "success",
                                    title: "Nueva imagen eliminada",
                                    timer: 1500,
                                    showConfirmButton: false
                                });
                            }
                        } catch (e) {
                            console.error("Error al procesar respuesta:", e);
                        }
                    }
                });
            }
        });
    };

    // Envío del formulario
    $("#editBlogForm").submit(function(e) {
        e.preventDefault();
        
        const titulo = $("#nombre").val().trim();
        const contenido = editor.getData();
        const status = $("#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;
        }
        
        // Determinar qué imagen usar
        let imagenFinal = imagenPrincipal || imagenActual || '';
        
        // Crear FormData
        const formData = new FormData();
        formData.append('action', 'updateBlog');
        formData.append('id', blogId);
        formData.append('titulo', titulo);
        formData.append('contenido', contenido);
        formData.append('status', status);
        formData.append('imagen', imagenFinal);
        
        // Mostrar loading
        $("#loadingOverlay").show();
        
        $.ajax({
            url: "database/model/blogs.php",
            type: "POST",
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                try {
                    let result;
                    if (typeof response === 'object') {
                        result = response;
                    } else {
                        result = JSON.parse(response);
                    }
                    
                    $("#loadingOverlay").hide();
                    
                    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) {
                    $("#loadingOverlay").hide();
                    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) {
                $("#loadingOverlay").hide();
                console.error("Error AJAX:", error);
                Swal.fire({
                    icon: "error",
                    title: "Error",
                    text: "Error de conexión al servidor"
                });
            }
        });
    });
});