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("trainingLeicht");
    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("trainingMittel");
    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) {

    const temp = trainingsZustand.ziehKarten[index1];
    trainingsZustand.ziehKarten[index1] =
        trainingsZustand.ziehKarten[index2];
    trainingsZustand.ziehKarten[index2] = temp;

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

    container.insertBefore(cards[index2], cards[index1]);
}

// 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.getElementById("trainingLeicht").classList.add("hidden");
    document.getElementById("trainingMittel").classList.add("hidden");
    document.getElementById("trainingSchwer").classList.add("hidden");

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

document.querySelectorAll(".level-btn").forEach(btn => {
    btn.addEventListener("click", () => {
        const level = btn.dataset.level;
        console.log("Level ausgewähl:", level);

        if (level === "leicht") {
            showLevel("trainingLeicht");
            startLeichtTraining();

            document.getElementById("checkBtn").style.display = "none";
        }

        if (level === "mittel") {
            showLevel("trainingMittel");
            startMittelTraining();

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

        if (level === "schwer") {
            showLevel("trainingSchwer");
            startSchwerTraining();

            document.getElementById("checkBtn").style.display = "none";
        }
    });
});