let parsedArray = [];

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 = {
            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",
    quelleKarten: [],
    aktiveKarten: [],
    gelernt: [],
    nichtGelernt: [],
};

function startLeichtTraining() {
    console.log("🔥 startLeichtTraining вызвана");

    if (!parsedArray || parsedArray.length === 0) {
        alert("Нет карточек для тренировки");
        return;
    }

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