let parsedArray = [];

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);
    });
});

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;
}

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");
const onlineContainer = document.getElementById("kartenContainer");
const frontPage = document.querySelector(".page_front");
const backPage = document.querySelector(".page_back");

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!");

    showView("modusAuswahlSeite");

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

document.querySelectorAll(".modus-btn").forEach(button => {
    button.addEventListener("click", () => {
        const modus = button.dataset.modus;

        if (modus === "druck") {
            createPDFPages(parsedArray);
        } else {
            console.log("Gewählter Modus:", modus);
        }
    });
});

function createPDFPages(wordArray) {
    const kartenContainer = document.getElementById("kartenContainer");

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

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

        const { frontPage, backPage } = createPagePair();

        parsedArray.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);
        document.getElementById("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');
const trainingLevels = document.getElementById('trainingLevels');

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

        if (modus === 'druck') {
            showView('pdfPages');
        }

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

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

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();
}

function startMittelTraining() {
    // console.log("startMilletTraining");

    trainingsZustand.modus = "mittel";
    trainingsZustand.quelleKarten = [...parsedArray];
    trainingsZustand.gelernt = [];
    trainingsZustand.nichtGelernt = [];

    ladeMittelRunde();
}

function ladeMittelRunde() {
    // console.log("ladeMittelRunde start");
    trainingsZustand.aktiveKarten = [];
    trainingsZustand.ziehKarten = [];

    for(let i=0; i < 4; i++) {
        if(trainingsZustand.quelleKarten.length > 0) {
            trainingsZustand.aktiveKarten.push(
                trainingsZustand.quelleKarten.shift()
            );
        }
    }
     
    trainingsZustand.ziehKarten = mischeArray([...trainingsZustand.aktiveKarten]);

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

console.log("aktiveKarten:", trainingsZustand.aktiveKarten);
console.log("ziehKarten:", trainingsZustand.ziehKarten);

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.innerHTML = `
            <div class="">
                <h2>${karte.englisch}</h2>
                <div class="ipa">${karte.ipa}</div>
                <div class="example">${karte.beispielEN}</div>
            </div>
        `;
        links.appendChild(dropZone);
    });

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

        ziehKarte.innerHTML = `
            <div class="">
                <h2>${karte.deutsch}</h2>
                <div class="example">${karte.beispielDE}</div>
            </div>
        `;

        // dragstart
        ziehKarte.addEventListener("dragstart", e => {
            e.dataTransfer.setData("draggedId", karte.id);
        });

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

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

            const draggedId = e.dataTransfer.getData("draggedId");
            const targetId = karte.id;

            swapZiehKarten(draggedId, targetId);
        });

        rechts.appendChild(ziehKarte);
    });

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

function swapZiehKarten(draggedId, targetId) {
    const draggedIndex = trainingsZustand.ziehKarten.findIndex(k => k.id === draggedId);
    const targetIndex = trainingsZustand.ziehKarten.findIndex(k => k.id === targetId);

    if (draggedIndex === -1 || targetIndex === -1) return;

    const temp = trainingsZustand.ziehKarten[draggedIndex];
    trainingsZustand.ziehKarten[draggedIndex] = trainingsZustand.ziehKarten[targetIndex];
    trainingsZustand.ziehKarten[targetIndex] = temp;

    renderMittelMatching();
}

function checkMatching() {
    const richtig = trainingsZustand.aktiveKarten.every((k, i) => k.id === trainingsZustand.ziehKarten[i].id);
    alert(richtig ? "Aless richtig!" : "Es gibt noch Fehler");
}

function pruefeZuordnung(ziehId, dropId) {
    if(ziehId === dropId) {
        const karte = trainingsZustand.aktiveKarten.find(k => k.id == ziehId);

        trainingsZustand.gelernt.push(karte);

        trainingsZustand.aktiveKarten = trainingsZustand.aktiveKarten.filter(k => k.id != ziehId);

        trainingsZustand.ziehKarten = trainingsZustand.ziehKarten.filter(k => k.id != ziehId);

        renderMittelMatching();

        if(trainingsZustand.aktiveKarten.length === 0) {
            ladeMittelRunde();
        }
    } else {
        console.log("Falsh zugeorgnet");
    }
}

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

    const index = Math.floor(
        Math.random() * trainingsZustand.aktiveKarten.length
    );

    trainingsZustand.aktuelleKarte =
        trainingsZustand.aktiveKarten[index];

    renderLeichtKarte(trainingsZustand.aktuelleKarte);
}

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);
}

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();
}

function showView(id) {
    document.querySelectorAll(".modus-view").forEach(view => {
        view.style.display = "none";
    });

    const active = document.getElementById(id);
    if (active) {
        active.style.display = "block";
    }
}

function showTrainingLevel(id) {
    document.querySelectorAll(".training-view").forEach(view => {
        view.style.display = "none";
    });

    const active = document.getElementById(id);
    if (active) {
        active.style.display = "block";
    }
}

document.querySelectorAll(".level-btn").forEach(btn => {
    btn.addEventListener("click", () => {
        const level = btn.dataset.level;

        if (level === "leicht") {
            showTrainingLevel("trainingLeicht");
            startLeichtTraining();
        }

        if (level === "mittel") {
            showTrainingLevel("trainingMittel");
            startMittelTraining();
        }

        if (level === "schwer") {
            showTrainingLevel("trainingSchwer");
            startSchwerTraining();
        }
    });
});

document
    .querySelector(".modus-btn[data-modus='training_einfach']")
    .addEventListener("click", () => {
        showView("onlineTraining");
});