let imageEditor;

function enableEditor(imageUrl, filename) {
    document.getElementById('image-editor-container').style.display = 'block';
    document.getElementById('original-image').style.display = 'none'; // Oculta la imagen original

    // Si ya existe un editor, lo eliminamos antes de crear otro
    if (imageEditor) {
        imageEditor.destroy();
    }

    imageEditor = new tui.ImageEditor(document.getElementById('tui-image-editor'), {
        includeUI: {
            loadImage: {
                path: imageUrl,
                name: filename
            },
            theme: {},
            menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
            initMenu: 'filter',
            menuBarPosition: 'bottom',
            uiSize: {
                width: '1000px',   // Ajusta el ancho si es necesario
                height: '1200px'    // Tamaño inicial (se usará como referencia)
            }
        },
        cssMaxWidth: 1000,
        cssMaxHeight: 1200,
        usageStatistics: false
    });

    // Ajustar el tamaño del editor dinámicamente y cargar la imagen
    setTimeout(() => {
        const container = document.getElementById('tui-image-editor');
        const toolboxHeight = 80; // Espacio reservado para la caja de herramientas
        const imageRatio = imageEditor.getImageRatio() || 0.75;
        const dynamicHeight = container.clientWidth * imageRatio + toolboxHeight;
        imageEditor.ui.resizeEditor({ width: container.clientWidth, height: dynamicHeight });
        imageEditor.loadImageFromURL(imageUrl, filename)
            .then(() => {
                console.log("Image loaded successfully");
                imageEditor.ui.activeMenuEvent(); // Activa los menús una vez cargada la imagen
            })
            .catch(err => console.error("Failed to load image", err));
    }, 500);
}

function saveEditedImage() {
    const editedImageData = imageEditor.toDataURL("image/png");

    fetch(window.FLASK_VARS.saveImageUrl, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ image: editedImageData })
    })
    .then(response => {
        if (!response.ok) {
            throw new Error("Error al guardar la imagen");
        }
        return response.json(); // Convertir respuesta a JSON si el backend devuelve algo
    })
    .then(data => {
        showToast("Imagen guardada!", "bg-success");

        // 🔥 Ocultar el editor y el botón de guardar
        document.getElementById("image-editor-container").style.display = "none";

        let saveButton = document.querySelector("button[onclick^='saveEditedImage']");
        if (saveButton) {
            saveButton.style.display = "none";
        }

        // 🔥 Ocultar el botón de "Remove GPS Data" (porque ya no hay datos GPS en la imagen editada)
        let gpsButton = document.getElementById("gps-button");
        if (gpsButton) {
            gpsButton.style.display = "none";
        }

        // 🔥 Volver a mostrar la imagen editada sin caché, con un pequeño delay para evitar caché del navegador
        setTimeout(() => {
            let img = document.getElementById('original-image');
            if (img) {
                img.style.display = "block";
                img.src = img.src.split("?")[0] + "?t=" + new Date().getTime();
            }
        }, 1000); // Pequeño delay para asegurar que la imagen ya está guardada
    })
    .catch(err => {
        console.error("Network error:", err);
        showToast("Error al guardar la imagen", "bg-danger");
    });
}