let mainMode = null; 
let subMode = null;  
let selectedPages = [];
let allAvailablePages = []; // Speichert alle verfügbaren Seiten
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';
    
    // UI Update, falls schon Seiten geladen sind
    updatePageDisplay();
}

function fetchPages(type) {
    fetch(`/api/pages?type=${type}`)
        .then(res => res.json())
        .then(pages => {
            allAvailablePages = pages;
            const list = document.getElementById('page-list');
            list.innerHTML = '';
            
            // LOGIK ÄNDERUNG: Standardmäßig ALLE auswählen
            selectedPages = [...pages]; 

            pages.forEach(p => {
                const div = document.createElement('div');
                div.className = 'page-item';
                // Checkbox ist standardmäßig checked (fürs Backend), 
                // aber im Overlay wird sie beim Öffnen gelöscht (siehe openPageOverlay)
                div.innerHTML = `
                    <input type="checkbox" id="p-${p}" value="${p}" checked onchange="updatePageSelection()">
                    <label for="p-${p}">${p}</label>
                `;
                list.appendChild(div);
            });
            updatePageDisplay();
        });
}

function openPageOverlay() {
    const overlay = document.getElementById('overlay');
    if (!overlay) return;
    
    // LOGIK ÄNDERUNG: Beim Öffnen alles abwählen!
    toggleAllPages(false);
    
    overlay.style.display = 'flex';
}

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

function toggleAllPages(state) {
    const checkboxes = document.querySelectorAll('#page-list input');
    checkboxes.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;
        btn.style.opacity = "0.5";
    } else {
        // Prüfen ob ALLE ausgewählt sind
        if (selectedPages.length === allAvailablePages.length && allAvailablePages.length > 0) {
            d.innerText = "Alle Seiten (Standard)";
        } else {
            d.innerText = `Seiten: ${selectedPages.join(', ')}`;
        }
        d.style.color = "#555";
        
        // Start Button nur aktivieren, wenn Submode gewählt UND Seiten da sind
        if (subMode) {
            btn.disabled = false;
            btn.style.opacity = "1";
        }
    }
}

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

    btn.innerText = "Prüfen";
    btn.onclick = checkAnswer; 
    btn.className = "action-btn primary"; 

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

    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');
        
        if (res.status === 'correct') {
            fb.innerText = res.msg;
            fb.className = 'feedback correct';
            stats.correct++;
            switchToNextMode();

        } else if (res.status === 'typo') {
            fb.innerText = res.msg;
            fb.className = 'feedback typo';
            attempts++;
            checkAttempts();

        } else {
            attempts++;
            if (attempts < 3) {
                fb.innerText = `Falsch. Versuch ${attempts}/3.`;
                fb.className = 'feedback wrong';
            } else {
                checkAttempts(); 
            }
        }
    });
}

function checkAttempts() {
    if (attempts >= 3) {
        const fb = document.getElementById('feedback');
        let solution = "";

        if (currentCard.type === 'vocab') {
            solution = currentCard.answer;
        } else if (currentCard.type === 'irregular_standard') {
            solution = `${currentCard.answer_simple} -> ${currentCard.answer_participle}`;
        } else {
            solution = `${currentCard.answer_infinitive} -> ${currentCard.answer_simple} -> ${currentCard.answer_participle}`;
        }

        fb.innerText = `Leider nicht geschafft. Lösung: ${solution}`;
        fb.className = 'feedback wrong';
        
        stats.total++; 
        updateStats();
        switchToNextMode();
    }
}

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

function finishTurn() {
    if (document.getElementById('btn-action').innerText === "Weiter") {
        if (attempts < 3 && document.getElementById('feedback').classList.contains('correct')) {
             stats.total++;
        }
        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})`;
}

document.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        const btn = document.getElementById('btn-action');
        if (btn) btn.click();
    }
});