function levenshtein(a, b) {
    const matrix = Array.from({ length: a.length + 1 }, (_, i) =>
        Array.from({ length: b.length + 1 }, (_, j) =>
            i === 0 ? j : j === 0 ? i : 0
        )
    );
    for (let i = 1; i <= a.length; i++) {
        for (let j = 1; j <= b.length; j++) {
            matrix[i][j] = Math.min(
                matrix[i - 1][j] + 1,
                matrix[i][j - 1] + 1,
                matrix[i - 1][j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1)
            );
        }
    }
    return matrix[a.length][b.length];
}

let fragen = [];
let index = 0;
let punkte = 0;
let versuche = [];

function startGame() {
    document.getElementById("envelope").classList.add("open");

    setTimeout(() => {
        document.getElementById("intro").classList.add("hidden");
        document.getElementById("bgm").play();
        loadQuestions();
    }, 900);
}

async function loadQuestions() {
    const res = await fetch("fragen.json");
    fragen = await res.json();

    versuche = Array(fragen.length).fill(0);

    renderFrage();
    updateProgress();
}

function renderFrage() {
    const f = fragen[index];
    document.getElementById("questions").innerHTML = `
        <div class="box" id="frageBox">
            <h2>Frage ${index + 1}</h2>
            <p>${f.frage}</p>
            <input id="antwort">
            <button onclick="check()">Prüfen</button>
            <button onclick="showTip()">Tipp</button>
            <p class="tip hidden" id="tipp">${f.tipp}</p>
            <p id="versuche">Versuche: 0 / 3</p>
            <p id="feedback"></p>
        </div>
    `;
}

function showTip() {
    document.getElementById("tipp").classList.remove("hidden");
}

function check() {
    const input = document.getElementById("antwort").value.toLowerCase().trim();
    const korrekt = fragen[index].antwort.toLowerCase().trim();

    versuche[index]++;
    document.getElementById("versuche").innerText = `Versuche: ${versuche[index]} / 3`;

    const dist = levenshtein(input, korrekt);

    if (dist <= 2) {
        punkte++;
        addSparkle();
        next();
        return;
    }

    if (versuche[index] >= 3) {
        next();
        return;
    }

    document.getElementById("feedback").innerText = "Leider falsch.";
}

function addSparkle() {
    const el = document.getElementById("frageBox");
    el.classList.add("sparkle");
    setTimeout(() => el.classList.remove("sparkle"), 700);
}

function next() {
    index++;
    updateProgress();

    if (index >= fragen.length) {
        window.location.href = `finale.html?score=${punkte}&max=${fragen.length}`;
        return;
    }

    renderFrage();
}

function updateProgress() {
    const percent = (index / fragen.length) * 100;
    document.getElementById("progressBar").style.width = percent + "%";
    document.getElementById("progressLabel").innerText = `Hauspunkte: ${punkte}`;
}