const modsWrapper = document.getElementById("modsWrapper");
const uploadButton = document.getElementById("uploadButton");

async function loadMods() {
    const res = await fetch("/getMods");
    const mods = await res.json();

    modsWrapper.innerHTML = "";
    mods.forEach(mod => {
        const div = document.createElement("div");
        div.className = "mod";

        div.innerHTML = `
            <p>${mod.name} <br> (${mod.size} MB)</p>
            <button class="delete" onclick="deleteMod('${mod.name}')">Löschen</button>
        `;

        modsWrapper.appendChild(div);
    });
}

// Mod löschen
async function deleteMod(name) {
    if (!confirm(`Mod "${name}" löschen?`)) return;
    const res = await fetch("/deleteMod", {
        method: "POST",
        headers: {"Content-Type":"application/json"},
        body: JSON.stringify({ name })
    });
    alert(await res.text());
    loadMods();
}

// Mods hochladen (mehrere Dateien)
uploadButton.onclick = () => {
    const input = document.createElement("input");
    input.type = "file";
    input.multiple = true;
    input.accept = ".jar";
    input.onchange = async () => {
        const files = input.files;
        if (!files.length) return;

        const formData = new FormData();
        for (const file of files) formData.append("mods", file);

        const res = await fetch("/uploadMods", {
            method: "POST",
            body: formData
        });

        alert(await res.text());
        loadMods();
    };
    input.click();
};

loadMods();