// /public/js/quiz/study.js

let questions = [];

// Fetch all questions and render them
async function initStudyMode() {
    const loadingState = document.getElementById('loading-state');
    const questionsContainer = document.getElementById('questions-container');
    const errorState = document.getElementById('error-state');
    const totalDisplay = document.getElementById('total-questions');

    try {
        // Fetch ALL questions (use mode=all to get the full dataset)
        const response = await fetch('/api/quiz/questions?mode=all');
        if (!response.ok) {
            throw new Error('Failed to fetch questions');
        }
        
        questions = await response.json();
        
        loadingState.style.display = 'none';
        
        if (questions.length > 0) {
            totalDisplay.textContent = `${questions.length} Questions Total`;
            questionsContainer.style.display = 'block';
            renderAllQuestions();
        } else {
            throw new Error('No questions received');
        }
    } catch (error) {
        console.error(error);
        loadingState.style.display = 'none';
        errorState.style.display = 'block';
    }
}

// Render all questions with their correct answers highlighted
function renderAllQuestions() {
    const container = document.getElementById('questions-container');
    container.innerHTML = '';

    questions.forEach((q, index) => {
        // Find the correct answer
        const correctAnswer = q.answers.find(a => a.is_correct);
        
        // Create question card
        const card = document.createElement('div');
        card.className = 'question-card';
        card.style.marginBottom = '2rem';
        
        card.innerHTML = `
            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 1rem;">
                <div style="flex: 1;">
                    <div style="color: var(--aus-gold); font-weight: 600; font-size: 0.9rem; margin-bottom: 0.5rem;">
                        Question ${index + 1}
                    </div>
                    <div class="q-text-en">${q.question}</div>
                    <div class="q-text-ph">${q.question_ph}</div>
                    <div class="q-text-th thai-text">${q.question_th}</div>
                </div>
            </div>
            
            <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--glass-border);">
                <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem;">
                    <span style="font-size: 1.5rem;">✅</span>
                    <strong style="color: var(--aus-green);">Correct Answer:</strong>
                </div>
                <div style="background: rgba(0, 200, 83, 0.1); border: 1px solid var(--aus-green); border-radius: 12px; padding: 1rem;">
                    <div style="font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem;">
                        ${correctAnswer.text}
                    </div>
                    <div style="color: var(--aus-gold); font-size: 0.95rem; font-style: italic; margin-top: 0.5rem;">
                        ${correctAnswer.ph}
                    </div>
                    <div class="thai-text" style="color: var(--text-secondary); margin-top: 0.5rem;">
                        ${correctAnswer.th}
                    </div>
                </div>
                
                ${correctAnswer.explanation ? `
                    <div style="margin-top: 1rem; padding: 1rem; background: var(--glass-bg); border-radius: 12px; border-left: 3px solid var(--aus-gold);">
                        <div style="color: var(--aus-gold); font-weight: 600; margin-bottom: 0.5rem;">💡 Explanation:</div>
                        <div style="line-height: 1.6;">${correctAnswer.explanation}</div>
                        ${correctAnswer.explanation_th ? `
                            <div class="thai-text" style="color: var(--text-secondary); margin-top: 0.5rem; font-size: 0.9rem;">
                                ${correctAnswer.explanation_th}
                            </div>
                        ` : ''}
                    </div>
                ` : ''}
            </div>
        `;
        
        container.appendChild(card);
    });
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', initStudyMode);