function showTab(tabId) {
    document.querySelectorAll(".tab-content").forEach(el => el.classList.remove("active"));
    document.querySelectorAll(".tab-btn").forEach(el => el.classList.remove("active"));

    const targetTab = document.getElementById(tabId);
    if (targetTab) {
        targetTab.classList.add("active");
    }

    if (event && event.currentTarget) {
        event.currentTarget.classList.add("active");
    }
}

function toggleEdit(id) {
    const editForm = document.getElementById(`edit-form-${id}`);
    if (editForm) {
        editForm.classList.toggle("hidden");
    }
}

function toggleAdminNewType(type) {
    const mcGroup = document.getElementById("adminMcOptions");
    if (mcGroup) {
        if (type === "multiple_choice") {
            mcGroup.classList.remove("hidden");
        } else {
            mcGroup.classList.add("hidden");
        }
    }
}

async function approveQuestion(id) {
    if (!confirm(`Möchtest du Frage #${id} wirklich freischalten und für alle Spieler aktivieren?`)) {
        return;
    }

    try {
        const res = await fetch(`/admin/questions/${id}/approve`, {
            method: "POST",
            headers: { "Content-Type": "application/json" }
        });

        const data = await res.json();
        if (res.ok && data.success) {
            alert(data.message);
            window.location.reload();
        } else {
            alert("Fehler: " + (data.error || "Aktion fehlgeschlagen"));
        }
    } catch (err) {
        alert("Netzwerkfehler: " + err.message);
    }
}

async function rejectQuestion(id) {
    if (!confirm(`Möchtest du Frage #${id} ablehnen?`)) {
        return;
    }

    try {
        const res = await fetch(`/admin/questions/${id}/reject`, {
            method: "POST",
            headers: { "Content-Type": "application/json" }
        });

        const data = await res.json();
        if (res.ok && data.success) {
            alert(data.message);
            window.location.reload();
        } else {
            alert("Fehler: " + (data.error || "Aktion fehlgeschlagen"));
        }
    } catch (err) {
        alert("Netzwerkfehler: " + err.message);
    }
}

async function deleteQuestion(id) {
    if (!confirm(`Soll Frage #${id} wirklich unwiderruflich gelöscht werden?`)) {
        return;
    }

    try {
        const res = await fetch(`/admin/questions/${id}/delete`, {
            method: "POST",
            headers: { "Content-Type": "application/json" }
        });

        const data = await res.json();
        if (res.ok && data.success) {
            const card = document.getElementById(`q-card-${id}`);
            if (card) card.remove();
        } else {
            alert("Fehler beim Löschen: " + (data.error || ""));
        }
    } catch (err) {
        alert("Netzwerkfehler: " + err.message);
    }
}

async function testMatcher(id, canonical) {
    const input = document.getElementById(`test-input-${id}`);
    const resultBox = document.getElementById(`test-result-${id}`);
    const testVal = input.value.trim();

    if (!testVal) {
        resultBox.innerHTML = '<span style="color: #f39c12;">Bitte gib einen Testwert ein.</span>';
        return;
    }

    try {
        const formData = new FormData();
        formData.append("test_input", testVal);
        formData.append("canonical", canonical);

        const res = await fetch("/admin/questions/test-match", {
            method: "POST",
            body: formData
        });

        const data = await res.json();

        if (data.matched) {
            resultBox.innerHTML = `
                <span style="color: #2ecc71; font-weight: bold;">
                    ✅ Treffer! (Distanz: ${data.levenshtein_distance}, Bereinigt: "${data.input_clean}" ↔ "${data.target_clean}")
                </span>
            `;
        } else {
            resultBox.innerHTML = `
                <span style="color: #e74c3c; font-weight: bold;">
                    ❌ Kein Treffer (Distanz: ${data.levenshtein_distance}, Bereinigt: "${data.input_clean}" ↔ "${data.target_clean}")
                </span>
            `;
        }
    } catch (err) {
        resultBox.innerHTML = '<span style="color: #e74c3c;">Fehler bei der Prüfung.</span>';
    }
}