// ==UserScript==
// @name         ZeroSumOnline Manga Downloader Plus
// @namespace    custom-scripts
// @version      4.0
// @description  Descarga imágenes desde ZeroSumOnline con opciones avanzadas.
// @author       TuNombre
// @license      MIT
// @match        https://zerosumonline.com/*
// @grant        GM_download
// @downloadURL none
// ==/UserScript==

(function () {
    "use strict";

    // Crear botón de acceso a la ventana de imágenes
    const toggleButton = document.createElement("button");
    toggleButton.textContent = "📂 Mostrar Imágenes Guardadas";
    toggleButton.style = `
        position: fixed;
        top: 10px;
        right: 10px;
        z-index: 10000;
        background-color: #007bff;
        color: white;
        border: none;
        padding: 10px;
        font-size: 14px;
        border-radius: 5px;
        cursor: pointer;
    `;
    document.body.appendChild(toggleButton);

    // Crear la ventana flotante para almacenar imágenes
    const imageWindow = document.createElement("div");
    imageWindow.style = `
        display: none;
        position: fixed;
        top: 50px;
        right: 10px;
        width: 300px;
        height: 400px;
        overflow-y: auto;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        border-radius: 5px;
        padding: 10px;
        z-index: 9999;
    `;
    imageWindow.innerHTML = `
        <h4>Imágenes Guardadas</h4>
        <button id="select-all-btn" style="margin-bottom: 10px;">Seleccionar Todas</button>
        <button id="download-all-btn" style="margin-bottom: 10px;">Descargar Seleccionadas</button>
        <div id="image-container"></div>
    `;
    document.body.appendChild(imageWindow);

    // Mostrar/Ocultar ventana al hacer clic en el botón
    toggleButton.addEventListener("click", () => {
        imageWindow.style.display = imageWindow.style.display === "none" ? "block" : "none";
    });

    // Detectar y guardar imágenes visibles
    function detectImages() {
        const images = Array.from(document.querySelectorAll("img.G54Y0W_page"));
        const imageContainer = document.getElementById("image-container");
        imageContainer.innerHTML = ""; // Limpiar contenido anterior

        images.forEach((img, index) => {
            const imgWrapper = document.createElement("div");
            imgWrapper.style = "margin-bottom: 10px;";

            const checkbox = document.createElement("input");
            checkbox.type = "checkbox";
            checkbox.value = index;
            checkbox.checked = true;

            const thumbnail = document.createElement("img");
            thumbnail.src = img.src;
            thumbnail.style = "max-width: 100%; height: auto;";

            imgWrapper.appendChild(checkbox);
            imgWrapper.appendChild(thumbnail);
            imageContainer.appendChild(imgWrapper);
        });

        alert(`Se detectaron ${images.length} imágenes.`);
    }

    // Descargar imágenes seleccionadas
    async function downloadSelectedImages() {
        const checkboxes = document.querySelectorAll("#image-container input[type='checkbox']:checked");
        if (checkboxes.length === 0) {
            alert("No hay imágenes seleccionadas para descargar.");
            return;
        }

        for (const checkbox of checkboxes) {
            const index = parseInt(checkbox.value, 10);
            const imgElement = document.querySelectorAll("img.G54Y0W_page")[index];
            const blob = await convertImageToBlob(imgElement);

            if (blob) {
                const fileName = `page_${String(index + 1).padStart(3, "0")}.jpg`;
                downloadBlob(blob, fileName);
                console.log(`Descargada: ${fileName}`);
            }
        }

        alert(`Se descargaron ${checkboxes.length} imágenes correctamente.`);
    }

    // Seleccionar todas las imágenes
    document.getElementById("select-all-btn").addEventListener("click", () => {
        const checkboxes = document.querySelectorAll("#image-container input[type='checkbox']");
        checkboxes.forEach((checkbox) => (checkbox.checked = true));
    });

    // Descargar imágenes seleccionadas
    document.getElementById("download-all-btn").addEventListener("click", downloadSelectedImages);

    // Convierte un elemento <img> en un Blob descargable
    async function convertImageToBlob(imgElement) {
        return new Promise((resolve, reject) => {
            try {
                const canvas = document.createElement("canvas");
                canvas.width = imgElement.naturalWidth || imgElement.width;
                canvas.height = imgElement.naturalHeight || imgElement.height;

                const ctx = canvas.getContext("2d");
                ctx.drawImage(imgElement, 0, 0);

                canvas.toBlob(
                    (blob) => {
                        if (blob) resolve(blob);
                        else reject(new Error("No se pudo convertir la imagen a Blob."));
                    },
                    "image/jpeg",
                    1.0
                );
            } catch (error) {
                reject(error);
            }
        });
    }

    // Descarga un Blob como archivo
    function downloadBlob(blob, fileName) {
        const url = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(url);
    }

    // Detectar imágenes automáticamente al cargar
    window.addEventListener("load", detectImages);
})();