englisch6a/app/static/script.js

let mainMode = null; 
let subMode = null;  
let selectedPages = [];
let currentCard = null;
let attempts = 0;
let stats = { correct: 0, total: 0 };

function selectMainMode(mode) {
    mainMode = mode;
    subMode = null; 
    
    document.querySelectorAll('.mode-btn').forEach(b => b.classList.remove('active'));
    document.getElementById(`btn-main-${mode}`).classList.add('active');

    document.querySelectorAll('.submode-container').forEach(el => el.style.display = 'none');
    document.getElementById(`submode-${mode}`).style.display = 'block';

    document.getElementById('page-section').style.display = 'none';
    document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('active'));

    fetchPages(mode);
}

function selectSubMode(mode) {
    subMode = mode;
    document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('active'));
    document.getElementById(`btn-sub-${mode}`).classList.add('active');
    document.getElementById('page-section').style.display = 'block';
    updatePageDisplay();
}

function fetchPages(type) {
    fetch(`/api/pages?type=${type}`)
        .then(res => res.json())
        .then(pages => {
            const list = document.getElementById('page-list');
            list.innerHTML = '';
            
            selectedPages = []; // Standard: Nichts ausgewählt
            updatePageDisplay();

            pages.forEach(p => {
                const div = document.createElement('div');
                div.className = 'page-item';
                div.innerHTML = `
                    <input type="checkbox" id="p-${p}" value="${p}" onchange="updatePageSelection()">
                    <label for="p-${p}">${p}</label>
                `;
                list.appendChild(div);
            });
        });
}

function toggleAllPages(state) {
    document.querySelectorAll('#page-list input').forEach(cb => cb.checked = state);
    updatePageSelection();
}

function updatePageSelection() {
    const checkboxes = document.querySelectorAll('#page-list input:checked');
    selectedPages = Array.from(checkboxes).map(cb => parseInt(cb.value));
    updatePageDisplay();
}

function updatePageDisplay() {
    const d = document.getElementById('selected-pages-display');
    const btn = document.getElementById('btn-start');

    if (selectedPages.length === 0) {
        d.innerText = "Keine Seiten gewählt!";
        d.style.color = "red";
        btn.disabled = true;
    } else {
        d.innerText = `Seiten: ${selectedPages.join(', ')}`;
        d.style.color = "#555";
        if (subMode) btn.disabled = false;
    }
}

// --- QUIZ LOGIC ---

function startQuiz() {
    stats = { correct: 0, total: 0 };
    updateStats();
    document.getElementById('setup-screen').style.display = 'none';
    document.getElementById('quiz-screen').style.display = 'flex';
    nextQuestion();
}

function stopQuiz() {
    document.getElementById('quiz-screen').style.display = 'none';
    document.getElementById('setup-screen').style.display = 'block';
}

function nextQuestion() {
    const btn = document.getElementById('btn-action');
    const fb = document.getElementById('feedback');

    // Button zurücksetzen auf "Prüfen"
    btn.innerText = "Prüfen";
    btn.onclick = checkAnswer; 
    btn.className = "action-btn primary"; // Farbe Grün

    fb.innerText = '';
    fb.className = 'feedback';
    
    document.querySelectorAll('input').forEach(i => i.value = '');
    attempts = 0; // Versuche resetten

    fetch('/api/question', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ mainMode, subMode, pages: selectedPages })
    })
    .then(res => res.json())
    .then(data => {
        if(data.error) { alert(data.error); stopQuiz(); return; }
        currentCard = data;
        renderCard(data);
    });
}

function renderCard(card) {
    const lbl = document.getElementById('q-label');
    const txt = document.getElementById('q-text');
    const hint = document.getElementById('q-hint');
    
    const inpStd = document.getElementById('inp-standard');
    const boxVerbs = document.getElementById('verb-inputs');
    const inpInf = document.getElementById('inp-inf');
    
    hint.innerText = '';

    if (card.type === 'vocab') {
        lbl.innerText = 'Übersetze:';
        txt.innerText = card.question;
        inpStd.style.display = 'block';
        boxVerbs.style.display = 'none';
        inpStd.focus();
    } 
    else if (card.type === 'irregular_standard') {
        lbl.innerText = 'Unregelmäßiges Verb:';
        txt.innerText = `to ${card.question}`;
        hint.innerText = `(Deutsch: ${card.german_hint})`;
        inpStd.style.display = 'none';
        boxVerbs.style.display = 'flex';
        inpInf.style.display = 'none'; 
        document.getElementById('inp-simple').focus();
    }
    else if (card.type === 'irregular_full') {
        lbl.innerText = 'Unregelmäßiges Verb (Alle Formen):';
        txt.innerText = card.question;
        inpStd.style.display = 'none';
        boxVerbs.style.display = 'flex';
        inpInf.style.display = 'block'; 
        inpInf.focus();
    }
}

function checkAnswer() {
    let payload = { type: currentCard.type };

    if (currentCard.type === 'vocab') {
        payload.input = document.getElementById('inp-standard').value;
        payload.correct = currentCard.answer;
    } else {
        payload.simple = document.getElementById('inp-simple').value;
        payload.participle = document.getElementById('inp-part').value;
        payload.correct_simple = currentCard.answer_simple;
        payload.correct_participle = currentCard.answer_participle;
        if (currentCard.type === 'irregular_full') {
            payload.infinitive = document.getElementById('inp-inf').value;
            payload.correct_infinitive = currentCard.answer_infinitive;
        }
    }

    fetch('/api/check', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload)
    })
    .then(res => res.json())
    .then(res => {
        const fb = document.getElementById('feedback');
        fb.innerText = res.msg;
        
        if (res.status === 'correct') {
            // RICHTIG -> Button auf "Weiter" schalten
            fb.className = 'feedback correct';
            stats.correct++;
            switchToNextMode();
        } else if (res.status === 'typo') {
            fb.className = 'feedback typo';
            attempts++;
            checkAttempts(res.msg); // Typo zählt auch als Versuch
        } else {
            // FALSCH
            fb.className = 'feedback wrong';
            attempts++;
            checkAttempts(res.msg);
        }
    });
}

function checkAttempts(msg) {
    if (attempts >= 3) {
        // Zu viele Versuche -> Button auf "Weiter"
        document.getElementById('feedback').innerText = "Leider falsch (3 Versuche). " + msg;
        stats.total++; // Zählt als fertig (aber falsch)
        updateStats();
        switchToNextMode();
    }
}

function switchToNextMode() {
    const btn = document.getElementById('btn-action');
    btn.innerText = "Weiter";
    btn.onclick = finishTurn; // Beim Klick auf Weiter -> finishTurn
    btn.focus();
}

function finishTurn() {
    // Wenn "Weiter" geklickt wird
    if (document.getElementById('btn-action').innerText === "Weiter") {
        if(attempts < 3) stats.total++; // Wenn richtig, hier Zähler hoch
        updateStats();
        nextQuestion();
    }
}

function updateStats() {
    let p = 0;
    if (stats.total > 0) p = Math.round((stats.correct / stats.total) * 100);
    document.getElementById('progress-bar').style.width = `${p}%`;
    document.getElementById('stats-text').innerText = `${p}% Richtig (${stats.correct}/${stats.total})`;
}

// Enter Key: Klickt einfach den aktiven Button
document.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        document.getElementById('btn-action').click();
    }
});

function openPageOverlay() { document.getElementById('overlay').style.display = 'flex'; }
function closeOverlay() { document.getElementById('overlay').style.display = 'none'; }