let currentMode = 'random';
let selectedPages = [];
let currentCard = null;
let attempts = 0;
let stats = { correct: 0, total: 0 };

document.addEventListener('DOMContentLoaded', () => {
    fetchPages();
    
    // Enter-Taste für alle Inputs
    const inputs = ['answer-input', 'input-simple', 'input-participle'];
    inputs.forEach(id => {
        document.getElementById(id).addEventListener('keypress', function (e) {
            if (e.key === 'Enter') {
                if (document.getElementById('next-btn').style.display !== 'none') {
                    nextQuestion();
                } else {
                    checkAnswer();
                }
            }
        });
    });
});

function setMode(mode) {
    currentMode = mode;
    document.querySelectorAll('.mode-select button').forEach(b => b.classList.remove('active'));
    document.getElementById(`btn-${mode}`).classList.add('active');
    
    // Wenn Verben-Modus, wähle automatisch Seite 206/207 aus (optional, aber hilfreich)
    if (mode === 'irregular') {
        // Logik könnte hier erweitert werden, um Checkboxen zu setzen
    }
}

function fetchPages() {
    fetch('/api/pages')
        .then(res => res.json())
        .then(pages => {
            const list = document.getElementById('page-list');
            list.innerHTML = '';
            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}">S. ${p}</label>
                `;
                list.appendChild(div);
            });
        });
}

function updatePageSelection() {
    const checkboxes = document.querySelectorAll('#page-list input:checked');
    selectedPages = Array.from(checkboxes).map(cb => parseInt(cb.value));
    
    const display = document.getElementById('selected-pages-display');
    if (selectedPages.length === 0) display.innerText = "Alle Seiten";
    else display.innerText = `Seiten: ${selectedPages.join(', ')}`;
}

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

function startQuiz() {
    stats = { correct: 0, total: 0 };
    updateProgress();
    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 = 'flex';
    fetchPages(); // Seiten neu laden falls was dazu kam
}

function nextQuestion() {
    document.getElementById('check-btn').style.display = 'inline-block';
    document.getElementById('next-btn').style.display = 'none';
    document.getElementById('feedback-msg').innerText = '';
    document.getElementById('feedback-msg').className = '';
    
    // Inputs leeren
    document.getElementById('answer-input').value = '';
    document.getElementById('input-simple').value = '';
    document.getElementById('input-participle').value = '';
    
    attempts = 0;

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

function renderCard(card) {
    const label = document.getElementById('question-label');
    const text = document.getElementById('question-text');
    const hint = document.getElementById('hint-text');
    
    const standardInput = document.getElementById('answer-input');
    const verbInputs = document.getElementById('verb-inputs');

    hint.innerText