let parsedArray = [];

// Mischt ein Array zufällig mit dem Fisher-Yates-Algorithmus
// und gibt das gemischte Array zurück.
function mischeArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
    return array;
}

document.getElementById('copyButton').addEventListener('click', () => {
    const text = document.getElementById('formatText').innerText;

    navigator.clipboard.writeText(text).then(() => {
        alert('Format wurde in die Zwischenablage kopiert!');
    }).catch(err => {
        console.error('Konnte nicht kopieren: ', err);
    });
});

// Analysiert den eingegebenen Text und wandelt ihn in ein Array von Wort-Objekten um.
function parseWordText(inputText) {
    const wortBlocks = inputText.trim().split("\n\n");
    const wortListe = [];

    for (let block of wortBlocks) {
        const lines = block.trim().split("\n").map(line => line.trim());

        if (lines.length !== 5) {
            console.warn("Block übersprungen (falsches Format):", block);
            continue;
        }

        const wortObj = {
            id: crypto.randomUUID(),
            englisch: lines[0],
            ipa: lines[1],
            beispielEN: lines[2],
            deutsch: lines[3],
            beispielDE: lines[4]
        };

        wortListe.push(wortObj);
    }

    return wortListe;
}

// Gibt beide Seiten als Objekt zurück.
function createPagePair() {
    const frontPage = document.createElement("div");
    frontPage.className = "page page-front";

    const backPage = document.createElement("div");
    backPage.className = "page page-back";

    return { frontPage, backPage };
}

const button = document.getElementById("kartenErstellen");

button.addEventListener("click", () => {
    const inputText = document.getElementById("inputText").value;
    parsedArray = parseWordText(inputText);

    if(parsedArray.length === 0) {
        alert("Kein gültiges Format erkannt. Bitte überprüfe deine Eingabe.");
        return;
    }

    alert("Karten erfolgreich erstellt!");


    document.getElementById("startScreen").style.display = "none";
    document.getElementById("modusAuswahlSeite").style.display = "block";
});

// Erstellt druckfertige PDF-Seiten mit jeweils 8 Karten pro Seite.
function createPDFPages(wordArray) {

    const kartenContainer = document.getElementById("kartenContainer");
    const druckenBtn = document.getElementById("druckenBtn");

    kartenContainer.innerHTML = "";
    kartenContainer.style.display = "flex";
    kartenContainer.style.flexDirection = "column";

    for (let i = 0; i < wordArray.length; i += 8) {

        const { frontPage, backPage } = createPagePair();

        wordArray.slice(i, i + 8).forEach((karte) => {

            const frontCard = document.createElement("div");
            frontCard.className = "card card-en";
            frontCard.innerHTML = `
                <h2>${karte.englisch}</h2>
                <div class="ipa">${karte.ipa}</div>
                <div class="example">${karte.beispielEN}</div>
            `;
            frontPage.appendChild(frontCard);

            const backCard = document.createElement("div");
            backCard.className = "card card-de";
            backCard.innerHTML = `
                <h2>${karte.deutsch}</h2>
                <div class="example">${karte.beispielDE}</div>
            `;
            backPage.appendChild(backCard);
        });

        kartenContainer.appendChild(frontPage);
        kartenContainer.appendChild(backPage);
    }

    druckenBtn.style.display = "block";

    alert("PDF-Seiten wurden erstellt! Du kannst sie jetzt drucken.");
}


document.getElementById("druckenBtn").addEventListener("click", () => {
    window.print();
});

const modusBtns = document.querySelectorAll('.modus-btn');

modusBtns.forEach(btn => {
    btn.addEventListener('click', () => {
        const modus = btn.dataset.modus;

        if (modus === 'druck') {
            showMode('pdfPages');
            createPDFPages(parsedArray);
        }

        else if (modus === 'training_einfach') {
            showMode('onlineTraining');
        }
        
        else if (modus === 'statistik') {
            console.log("Statistik anzeigen...");
        }
    });
});

let trainingsZustand = {
    modus: "leicht",
    // für alle Level
    quelleKarten: [],
    basisKarten: [],
    aktiveKarten: [],
    gelernt: [],
    nichtGelernt: [],
    // für Mittel
    ziehKarten: [],
    rundeNummer: 0,
    richtung: "EN_DE",
};

// Startet das Training im Modus "Leicht".
function startLeichtTraining() {
    trainingsZustand.modus = "leicht";
    trainingsZustand.quelleKarten = [...parsedArray];
    trainingsZustand.aktiveKarten = [];
    trainingsZustand.gelernt = [];
    trainingsZustand.nichtGelernt = [];

    for (let i = 0; i < 3; i++) {
        if (trainingsZustand.quelleKarten.length > 0) {
            const karte = trainingsZustand.quelleKarten.shift();
            karte.versuche = 0;
            trainingsZustand.aktiveKarten.push(karte);
        }
    }
    zeigeNaechsteKarte();
}

// Verarbeitet die Antwort des Nutzers im leichten Modus.
function antworteAufKarte(weißIch) {
    const karte = trainingsZustand.aktuelleKarte;

    if (weißIch) {
        trainingsZustand.gelernt.push(karte);
        trainingsZustand.aktiveKarten = trainingsZustand.aktiveKarten.filter(k => k !== karte);
    } else {
        karte.versuche++;
        if (karte.versuche >= 5) {
            trainingsZustand.nichtGelernt.push(karte);
            trainingsZustand.aktiveKarten = trainingsZustand.aktiveKarten.filter(k => k !== karte);
        } else {
            trainingsZustand.aktiveKarten.push(trainingsZustand.aktiveKarten.splice(trainingsZustand.aktiveKarten.indexOf(karte), 1)[0]);
        }
    }

    if (trainingsZustand.aktiveKarten.length < 3 && trainingsZustand.quelleKarten.length > 0) {
        let neueKarte = trainingsZustand.quelleKarten.shift();
        neueKarte.versuche = 0;
        trainingsZustand.aktiveKarten.push(neueKarte);
    }

    zeigeNaechsteKarte();
}

// Wählt zufällig eine aktive Karte aus
function zeigeNaechsteKarte() {
    if (trainingsZustand.aktiveKarten.length === 0) {

        if (trainingsZustand.quelleKarten.length === 0) {
            alert(`Training beendet!
                Gelernt: ${trainingsZustand.gelernt.length}
                Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
            return;
        }

        const neueKarte = trainingsZustand.quelleKarten.shift();
        neueKarte.versuche = 0;
        trainingsZustand.aktiveKarten.push(neueKarte);
    }
    const index = Math.floor(
        Math.random() * trainingsZustand.aktiveKarten.length
    );

    trainingsZustand.aktuelleKarte =
        trainingsZustand.aktiveKarten[index];

    renderLeichtKarte(trainingsZustand.aktuelleKarte);
}

// Rendert eine einzelne Karte im leichten Modus.
function renderLeichtKarte(karte) {
    const container = document.getElementById("trainingFlip");
    container.innerHTML = "";

    const cardEl = document.createElement("div");
    cardEl.className = "training-card";
    cardEl.innerHTML = `
        <div class="training-card-inner">
            <div class="training-front">
                <h2>${karte.englisch}</h2>
                <div class="ipa">${karte.ipa}</div>
                <div class="example">${karte.beispielEN}</div>
            </div>
            <div class="training-back">
                <h2>${karte.deutsch}</h2>
                <div class="example">${karte.beispielDE}</div>
            </div>
        </div>
    `;

    cardEl.onclick = () => cardEl.classList.toggle("flip");

    const actions = document.createElement("div");
    actions.className = "training-actions";
    actions.innerHTML = `
        <button id="knowBtn">Weiß ich</button>
        <button id="dontKnowBtn">Weiß ich nicht</button>
    `;

    actions.querySelector("#knowBtn").onclick = () => antworteAufKarte(true);
    actions.querySelector("#dontKnowBtn").onclick = () => antworteAufKarte(false);

    container.appendChild(cardEl);
    container.appendChild(actions);
}

// Startet das Training im Modus "Mittel".
function startMittelTraining() {
    trainingsZustand.modus = "mittel";
    trainingsZustand.basisKarten = parsedArray.map(karte => ({
        ...karte,
        erfolge: 0,
        fehler: 0
    }));

    trainingsZustand.gelernt = [];
    trainingsZustand.nichtGelernt = [];
    trainingsZustand.rundeNummer = 0;

    ladeMittelRunde();
}

// Lädt eine neue Runde im mittleren Trainingsmodus.
function ladeMittelRunde() {
    trainingsZustand.aktiveKarten = [];
    trainingsZustand.ziehKarten = [];

    trainingsZustand.richtung = trainingsZustand.rundeNummer % 2 === 0 ? "EN_DE" : "DE_EN";
    trainingsZustand.rundeNummer++;

    mischeArray(trainingsZustand.basisKarten);
    trainingsZustand.aktiveKarten = trainingsZustand.basisKarten.slice(0, 4);

    if(trainingsZustand.aktiveKarten.length === 0) {
        alert(`Training beendet! 
            Gelernt: ${trainingsZustand.gelernt.length}
            Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
        return;
    }

    trainingsZustand.ziehKarten = mischeArray([...trainingsZustand.aktiveKarten]);

    renderMittelMatching();
}

// Rendert das Matching-Layout für den mittleren Modus.
function renderMittelMatching() {
    const container = document.getElementById("trainingMatching");
    container.innerHTML = "";

    const links = document.createElement("div");
    links.className = "spalte-links";

    const rechts = document.createElement("div");
    rechts.className = "spalte-rechts";

    // Linke Zone
    trainingsZustand.aktiveKarten.forEach(karte => {
        const dropZone = document.createElement("div");
        dropZone.className = "training-card drop-zone";
        dropZone.dataset.id = karte.id;

        if(trainingsZustand.richtung === "EN_DE") {
        dropZone.innerHTML = `
            <div class="">
                <h2>${karte.englisch}</h2>
                <div class="ipa">${karte.ipa}</div>
                <div class="example">${karte.beispielEN}</div>
            </div>
        `;} else {
            dropZone.innerHTML = `
            <div class="">
                <h2>${karte.deutsch}</h2>
                <div class="example">${karte.beispielDE}</div>
            </div>
        `;}

        links.appendChild(dropZone);
    });

    // draggable + droppable (swap)
    trainingsZustand.ziehKarten.forEach((karte, index) => {
        const ziehKarte = document.createElement("div");
        ziehKarte.className = "training-card zieh-karte";
        ziehKarte.draggable = true;
        ziehKarte.dataset.index = index;

        if(trainingsZustand.richtung === "EN_DE") {
            ziehKarte.innerHTML = `
                <div class="">
                    <h2>${karte.deutsch}</h2>
                    <div class="example">${karte.beispielDE}</div>
                </div>
        `;} else {
            ziehKarte.innerHTML = `
            <div class="">
                <h2>${karte.englisch}</h2>
                <div class="ipa">${karte.ipa}</div>
                <div class="example">${karte.beispielEN}</div>
            </div>
        `;}

        // dragstart
        ziehKarte.addEventListener("dragstart", e => {
            console.log("dragstart работает");
            e.dataTransfer.setData("draggedIndex", index);
        });

        // dragover
        ziehKarte.addEventListener("dragover", e => {
            e.preventDefault();
        });

        // drop
        ziehKarte.addEventListener("drop", e => {
            console.log("drop работает");

            e.preventDefault();

            const draggedIndex = Number(e.dataTransfer.getData("draggedIndex"));

            swapZiehKarten(draggedIndex, index);
        });

        rechts.appendChild(ziehKarte);
    });

    container.appendChild(links);
    container.appendChild(rechts);
}

// Überprüft, ob die Zuordnungen korrekt sind.
function pruefeRunde() {

    const ziehElemente = document.querySelectorAll(".zieh-karte");

    trainingsZustand.aktiveKarten.forEach((karte, index) => {

        const gezogene = trainingsZustand.ziehKarten[index];
        const element = ziehElemente[index];

        element.style.backgroundColor = "";

        if (karte.id === gezogene.id) {
            element.style.backgroundColor = "#a8f0a8";
            karte.erfolge++;
        } else {
            element.style.backgroundColor = "#f5a8a8";
            karte.fehler++;
        }

    });

    setTimeout(() => {
        beendeMittelRunde();
    }, 1000);
}

// Bewertet nach jeder Runde den Lernstatus jeder Karte.
function beendeMittelRunde() {

    const verbleibende = [];

    trainingsZustand.basisKarten.forEach(karte => {

        if (karte.erfolge >= 2) {
            trainingsZustand.gelernt.push(karte);
        }
        else if (karte.fehler >= 4) {
            trainingsZustand.nichtGelernt.push(karte);
        }
        else {
            verbleibende.push(karte);
        }
    });

    trainingsZustand.basisKarten = verbleibende;

    if (trainingsZustand.basisKarten.length === 0) {
        alert(`Training beendet!
        Gelernt: ${trainingsZustand.gelernt.length}
        Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
        return;
    }
    
    ladeMittelRunde();
}

// Tauscht zwei Ziehkarten anhand ihrer Indizes
function swapZiehKarten(index1, index2) {
    [trainingsZustand.ziehKarten[index1], trainingsZustand.ziehKarten[index2]] =
        [trainingsZustand.ziehKarten[index2], trainingsZustand.ziehKarten[index1]];

    const container = document.querySelector(".spalte-rechts");
    container.innerHTML = "";

    trainingsZustand.ziehKarten.forEach((karte, idx) => {
        const ziehKarte = document.createElement("div");
        ziehKarte.className = "training-card zieh-karte";
        ziehKarte.draggable = true;
        ziehKarte.dataset.index = idx;

        if (trainingsZustand.richtung === "EN_DE") {
            ziehKarte.innerHTML = `
                <div class="">
                    <h2>${karte.deutsch}</h2>
                    <div class="example">${karte.beispielDE}</div>
                </div>
            `;
        } else {
            ziehKarte.innerHTML = `
                <div class="">
                    <h2>${karte.englisch}</h2>
                    <div class="ipa">${karte.ipa}</div>
                    <div class="example">${karte.beispielEN}</div>
                </div>
            `;
        }

        ziehKarte.addEventListener("dragstart", e => {
            e.dataTransfer.setData("draggedIndex", idx);
        });

        ziehKarte.addEventListener("dragover", e => e.preventDefault());

        ziehKarte.addEventListener("drop", e => {
            e.preventDefault();
            const draggedIndex = Number(e.dataTransfer.getData("draggedIndex"));
            swapZiehKarten(draggedIndex, idx);
        });

        container.appendChild(ziehKarte);
    });
}

// Blendet alle Trainingslevel-Ansichten aus
function showMode(id) {

    document.getElementById("pdfPages").style.display = "none";
    document.getElementById("onlineTraining").style.display = "none";

    document.getElementById(id).style.display = "block";
}

function showLevel(id) {
    document.querySelectorAll("#onlineTraining .training-view").forEach(view => {
        if (view.id !== "trainingLevels") {
            view.classList.add("hidden");
        }
    });

    document.getElementById(id).classList.remove("hidden");
}

document.querySelectorAll(".level-btn").forEach(btn => {
    btn.addEventListener("click", () => {
        const type = btn.dataset.level;
        console.log("Trainingsart:", type);

        if (type === "flip") {
            showLevel("trainingFlip");
            startLeichtTraining();
            document.getElementById("checkBtn").style.display = "none";
        }

        if (type === "matching") {
            showLevel("trainingMatching");
            startMittelTraining();
            document.getElementById("checkBtn").style.display = "block";
        }

        if (type === "multiple") {
            showLevel("trainingMultiple");
            startMultipleTraining();
            document.getElementById("checkBtn").style.display = "none";
        }

        if (type === "hint") {
            showLevel("trainingHint");
            startHintTraining();
            document.getElementById("checkBtn").style.display = "none";
        }

        if (type === "write") {
            showLevel("trainingWrite");
            startWriteTraining();
            document.getElementById("checkBtn").style.display = "none";
        }
    });
});

function startMultipleTraining() {
    trainingsZustand.modus = "multiple";
    trainingsZustand.quelleKarten = mischeArray([...parsedArray]);
    trainingsZustand.aktuelleKarte = null;
    trainingsZustand.gelernt = [];
    trainingsZustand.nichtGelernt = [];

    zeigeNaechsteMultipleKarte();
}

function generiereMultipleOptionen(karte) {
    const optionen = [karte.deutsch];

    const falscheOptionen = parsedArray
        .filter(k => k.id !== karte.id)
        .map(k => k.deutsch);

    mischeArray(falscheOptionen);

    optionen.push(...falscheOptionen.slice(0, 4));

    return mischeArray(optionen);
}

function generiereHint(deutsch) {
    const chars = deutsch.split('');
    const anzahlZuVerstecken = Math.floor(chars.length / 2);

    const indices = Array.from(chars.keys());
    mischeArray(indices);

    for (let i = 0; i < anzahlZuVerstecken; i++) {
        chars[indices[i]] = '*';
    }

    return chars.join('');
}


function zeigeNaechsteMultipleKarte() {
    if (trainingsZustand.quelleKarten.length === 0) {
        alert(`Training beendet!
Gelernt: ${trainingsZustand.gelernt.length}
Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
        return;
    }

    const karte = trainingsZustand.quelleKarten.shift();
    trainingsZustand.aktuelleKarte = karte;

    const container = document.getElementById("trainingMultiple");
    container.innerHTML = "";

    const frage = document.createElement("div");
    frage.className = "multiple-frage";
    frage.innerHTML = `<h2>${karte.englisch}</h2>`;
    container.appendChild(frage);

    const optionen = generiereMultipleOptionen(karte);
    const optionContainer = document.createElement("div");
    optionContainer.className = "multiple-optionen";

    optionen.forEach(text => {
        const btn = document.createElement("button");
        btn.className = "multiple-option";
        btn.innerText = text;

        btn.onclick = () => {
            if (text === karte.deutsch) {
                trainingsZustand.gelernt.push(karte);
                zeigeNaechsteMultipleKarte();
            } else {
                btn.style.textDecoration = "line-through";
                btn.disabled = true;
            }
        };

        optionContainer.appendChild(btn);
    });

    container.appendChild(optionContainer);
}

trainingsZustand.hintCards = [];

function startHintTraining() {
    trainingsZustand.modus = "hint";
    trainingsZustand.hintCards = mischeArray([...parsedArray]);
    zeigeNaechsteHintKarte();
}

function zeigeNaechsteHintKarte() {
    if (trainingsZustand.hintCards.length === 0) {
        alert(`Training beendet!
        Gelernt: ${trainingsZustand.gelernt.length}
        Nicht gelernt: ${trainingsZustand.nichtGelernt.length}`);
        return;
    }

    const karte = trainingsZustand.hintCards.shift();
    trainingsZustand.aktuelleKarte = karte;

    const container = document.getElementById("trainingHint");
    container.innerHTML = "";

    const frage = document.createElement("div");
    frage.className = "hint-frage";
    frage.innerHTML = `<h2>${karte.englisch}</h2>`;
    container.appendChild(frage);

    const clue = document.createElement("div");
    clue.className = "hint-clue";
    clue.innerText = generiereHint(karte.deutsch);
    container.appendChild(clue);

    const input = document.createElement("input");
    input.className = "hint-input";
    input.placeholder = "Schreibe die Übersetzung hier...";
    container.appendChild(input);

    const button = document.createElement("button");
    button.className = "hint-button";
    button.innerText = "Überprüfen";
    container.appendChild(button);

    const feedback = document.createElement("div");
    feedback.className = "hint-feedback";
    container.appendChild(feedback);

    button.onclick = () => {
        const answer = input.value.trim();
        if (answer.toLowerCase() === karte.deutsch.toLowerCase()) {
            feedback.innerText = "✅ Richtig!";
            trainingsZustand.gelernt.push(karte);
            setTimeout(() => zeigeNaechsteHintKarte(), 800);
        } else {
            feedback.innerText = `❌ Falsch! Richtige Antwort: ${karte.deutsch}`;
            trainingsZustand.nichtGelernt.push(karte);
            setTimeout(() => zeigeNaechsteHintKarte(), 1200);
        }
    };
}

function startWriteTraining() {
    trainingsZustand.modus = "write";
    trainingsZustand.quelleKarten = mischeArray([...parsedArray]);
    trainingsZustand.aktuelleKarte = null;
    trainingsZustand.gelernt = [];
    trainingsZustand.nichtGelernt = [];

    zeigeNaechsteWriteKarte();
}

function zeigeNaechsteWriteKarte() {
    if (trainingsZustand.quelleKarten.length === 0) {
        const container = document.getElementById("trainingWrite");
        container.innerHTML = `
            <div class="schwer-frage">
                Training beendet!<br>
                Gelernt: ${trainingsZustand.gelernt.length}<br>
                Nicht gelernt: ${trainingsZustand.nichtGelernt.length}
            </div>
        `;
        return;
    }

    const karte = trainingsZustand.quelleKarten.shift();
    trainingsZustand.aktuelleKarte = karte;

    const container = document.getElementById("trainingWrite");
    container.innerHTML = "";

    const frage = document.createElement("div");
    frage.className = "schwer-frage";
    frage.innerHTML = `<h2>${karte.englisch}</h2>`;
    container.appendChild(frage);

    const input = document.createElement("input");
    input.type = "text";
    input.placeholder = "Schreibe die Übersetzung hier...";
    input.style.fontSize = "18px";
    input.style.width = "300px";
    input.style.padding = "8px";
    container.appendChild(input);

    const submitBtn = document.createElement("button");
    submitBtn.innerText = "Überprüfen";
    submitBtn.style.marginTop = "10px";
    submitBtn.onclick = () => {
        const answer = input.value.trim();
        const resultDiv = document.createElement("div");
        resultDiv.style.marginTop = "12px";
        resultDiv.style.fontWeight = "600";

        if (answer.toLowerCase() === karte.deutsch.toLowerCase()) {
            trainingsZustand.gelernt.push(karte);
            resultDiv.style.color = "#28a745"; 
            resultDiv.innerText = "Richtig!";
        } else {
            trainingsZustand.nichtGelernt.push(karte);
            resultDiv.style.color = "#dc3545";
            resultDiv.innerText = `Falsch! Richtige Antwort: ${karte.deutsch}`;
        }

        container.appendChild(resultDiv);

        setTimeout(() => zeigeNaechsteWriteKarte(), 2000);
    };

    container.appendChild(submitBtn);
}