const backupsWrapper = document.getElementById("backupsWrapper");

// Backups laden
async function loadBackups() {
    const res = await fetch("/getBackups");
    const backups = await res.json();

    backupsWrapper.innerHTML = "";

    if (backups.length === 0) {
        const div = document.createElement("div");
        div.className = "welt";
        div.innerHTML = `<h3>Keine Backups vorhanden</h3>`;
        backupsWrapper.appendChild(div);
        return;
    }

    backups.forEach(backup => {
        const div = document.createElement("div");
        div.className = "welt"; // wie bei Welten

        div.innerHTML = `
            <h3>${backup.name}</h3>
            <p>Größe: ${backup.size} MB</p>
            <p>Erstellt: ${backup.date}</p>
            <button class="restore" onclick="restoreBackup('${backup.name}')">Wiederherstellen</button>
            <button class="delete" onclick="deleteBackup('${backup.name}')">Löschen</button>
        `;

        backupsWrapper.appendChild(div);
    });
}

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

// Backup wiederherstellen
async function restoreBackup(name) {
    if (!confirm(`Backup "${name}" wiederherstellen? Der Server muss offline sein.`)) return;

    const res = await fetch("/restoreBackup", {
        method: "POST",
        headers: {"Content-Type":"application/json"},
        body: JSON.stringify({ name })
    });

    const text = await res.text();
    alert(text);
    loadBackups();
}

// Initial laden
loadBackups();