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

    for (let i = 0; i < parsedArray.length; i += 8) {
        const pageFront = document.createElement("div");
        pageFront.className = "page_front";
        const pageBack = document.createElement("div");
        pageBack.className = "page_back";

        const currentSlice = parsedArray.slice(i, i + 8);
        currentSlice.forEach(karte => {
            const frontCard = document.createElement("div");
            frontCard.className = "card";
            frontCard.innerHTML = `<h2>${karte.englisch}</h2><div>${karte.ipa}</div><p>${karte.beispielEN}</p>`;
            pageFront.appendChild(frontCard);

            const backCard = document.createElement("div");
            backCard.className = "card";
            backCard.innerHTML = `<h2>${karte.deutsch}</h2><p>${karte.beispielDE}</p>`;
            pageBack.appendChild(backCard);
        });

        container.appendChild(pageFront);
        container.appendChild(pageBack);
    }
});

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

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