englisch6a/app/static/script.js

let mainMode = null; // 'vocab' oder 'irregular'
let subMode = null;  // 'de-en', 'start-german', etc.
let selectedPages = [];
let currentCard = null;
let stats = { correct: 0, total: 0 };

// --- SETUP LOGIC ---

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

    // Hide all submodes first
    document.querySelectorAll('.submode-container').forEach(el => el.style.display = 'none');
    
    // Show correct submode
    document.getElementById(`submode-${mode}`).style.display = 'block';

    // Hide Start & Pages until submode selected
    document.getElementById('page-section').style.display = 'none';
    
    // Reset Submode buttons
    document.querySelectorAll('.sub-btn').forEach(b => b.classList.remove('active'));

    // Fetch pages for this mode immediately
    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');

    // Now show page selection and start button
    document.getElementById('page-section').style.display = 'block';
    document.getElementById('btn-start').disabled = false;
    document.getElementById('btn-start').style.opacity = '1';
}

function fetchPages(type) {
    fetch(`/api/pages?type=${type}`)
        .then(res => res.json())
        .then(pages => {
            const list = document.getElementById('page-list');
            list.innerHTML = '';
            
            // Auto-select logic: Select all by default
            selectedPages = pages; 
            updatePageDisplay();

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

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');
    if (selectedPages.length === 0) {
        d.innerText = "Keine Seiten gewählt!";
        document.getElementById('btn-start').disabled = true;
    } else {
        d.innerText = `Seiten: ${selectedPages.join(', ')}`;
        if (subMode) document.getElementById('btn-start').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() {
    // UI Reset
    document.getElementById('btn-check').style.display = 'block';
    document.getElementById('btn-next').style.display = 'none';
    document.getElementById('feedback').innerText = '';
    document.getElementById('feedback').className = 'feedback';
    
    // Clear Inputs
    document.querySelectorAll('input').forEach(i => i.value = '');

    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'; // Infinitiv ist gegeben
        document.getElementById('inp-simple').focus();
    }
    else if (card.type === 'irregular_full') {
        lbl.innerText = 'Unregelmäßiges Verb (Alle Formen):';
        txt.innerText = card.question; // Deutsch
        
        inpStd.style.display = 'none';
        boxVerbs.style.display = 'flex';
        inpInf.style.display = 'block'; // Muss eingegeben werden
        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 {
        // Verben
        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') {
            fb.classList.add('correct');
            stats.correct++;
            finishTurn();
        } else if (res.status === 'typo') {
            fb.classList.add('typo');
            // Darf nochmal probieren
        } else {
            fb.classList.add('wrong');
            finishTurn();
        }
    });
}

function finishTurn() {
    stats.total++;
    updateStats();
    document.getElementById('btn-check').style.display = 'none';
    document.getElementById('btn-next').style.display = 'block';
    document.getElementById('btn-next').focus();
}

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 Handler
document.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        const nextBtn = document.getElementById('btn-next');
        if (nextBtn.style.display !== 'none') nextQuestion();
        else checkAnswer();
    }
});

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