class QuizUI {
    constructor() {
        this.currentDay = 1;
        this.learningLogic = new LearningLogic();
        this.initializeApp();
    }

    async initializeApp() {
        await this.loadProgress();
        this.renderLesson();
        this.renderQuiz();
        this.renderExercise();
        this.updateScoreDisplay();
    }

    async loadProgress() {
        // در حالت واقعی، از API سرور استفاده می‌شود
        const savedProgress = localStorage.getItem('userProgress');
        if (savedProgress) {
            this.learningLogic.user_progress = JSON.parse(savedProgress);
        }
    }

    saveProgress() {
        localStorage.setItem('userProgress', 
            JSON.stringify(this.learningLogic.user_progress));
    }

    renderLesson() {
        const lessonData = this.learningLogic.load_lesson(this.currentDay);
        if (!lessonData) return;

        const lessonContent = document.getElementById('lessonContent');
        lessonContent.innerHTML = `
            <h2>${lessonData.title}</h2>
            ${lessonData.sections.map(section => 
                section.type === 'text' 
                    ? `<div class="lesson-text">${section.content}</div>`
                    : `<img src="${section.url}" alt="${section.alt}" class="lesson-image">`
            ).join('')}
        `;
    }

    renderQuiz() {
        const quizData = this.learningLogic.load_quiz(this.currentDay);
        if (!quizData) return;

        const quizForm = document.getElementById('quizForm');
        quizForm.innerHTML = quizData.questions.map((question, qIndex) => `
            <div class="question">
                <div class="question-text">${qIndex + 1}. ${question.question}</div>
                <div class="options">
                    ${question.options.map((option, oIndex) => `
                        <label class="option-label">
                            <input type="radio" name="question_${question.id}" value="${oIndex}">
                            ${option}
                        </label>
                    `).join('')}
                </div>
            </div>
        `).join('');

        // اضافه کردن دکمه ارسال
        quizForm.innerHTML += `<button type="button" onclick="quizUI.submitQuiz()">ارسال پاسخ‌های کوییز</button>`;
    }

    renderExercise() {
        const exerciseData = this.learningLogic.load_exercise(this.currentDay);
        if (!exerciseData) return;

        const exerciseSection = document.getElementById('exerciseSection');
        exerciseSection.innerHTML = `
            <div class="exercise-question">${exerciseData.exercise.question}</div>
            ${exerciseData.exercise.hint ? `<div class="hint">💡 نکته: ${exerciseData.exercise.hint}</div>` : ''}
            <textarea id="exerciseAnswer" rows="6" placeholder="پاسخ خود را اینجا بنویسید..."></textarea>
            <button type="button" onclick="quizUI.submitExercise()">ارسال پاسخ تمرین</button>
            <div id="exerciseFeedback"></div>
        `;
    }

    submitQuiz() {
        const quizData = this.learningLogic.load_quiz(this.currentDay);
        const userAnswers = [];

        quizData.questions.forEach(question => {
            const selectedOption = document.querySelector(
                `input[name="question_${question.id}"]:checked`
            );
            userAnswers.push(selectedOption ? parseInt(selectedOption.value) : -1);
        });

        const result = this.learningLogic.check_quiz_answers(this.currentDay, userAnswers);
        this.showQuizFeedback(result);
        this.saveProgress();
        this.updateScoreDisplay();
    }

    submitExercise() {
        const answer = document.getElementById('exerciseAnswer').value.trim();
        if (!answer) {
            alert('لطفاً پاسخ خود را وارد کنید');
            return;
        }

        const result = this.learningLogic.check_exercise_answer(this.currentDay, answer);
        this.showExerciseFeedback(result);
        this.saveProgress();
        this.updateScoreDisplay();
    }

    showQuizFeedback(result) {
        const feedbackDiv = document.getElementById('quizFeedback');
        if (!feedbackDiv) {
            const quizForm = document.getElementById('quizForm');
            quizForm.insertAdjacentHTML('beforeend', '<div id="quizFeedback"></div>');
        }

        const feedbackHTML = `
            <div class="feedback ${result.correct_count === result.total_questions ? 'success' : 'warning'}">
                <h3>نتایج کوییز</h3>
                <p>پاسخ‌های صحیح: ${result.correct_count} از ${result.total_questions}</p>
                <p>پاداش کسب شده: ${result.reward} امتیاز</p>
                <p>${result.feedback}</p>
                ${result.results.map((qResult, index) => `
                    <div style="margin: 10px 0; padding: 10px; background: ${qResult.is_correct ? '#c6f6d5' : '#fed7d7'}; border-radius: 5px;">
                        سوال ${index + 1}: ${qResult.is_correct ? '✅ صحیح' : '❌ ناصحیح'}
                    </div>
                `).join('')}
            </div>
        `;

        document.getElementById('quizFeedback').innerHTML = feedbackHTML;
    }

    showExerciseFeedback(result) {
        const feedbackDiv = document.getElementById('exerciseFeedback');
        const feedbackHTML = `
            <div class="feedback ${result.is_correct ? 'success' : 'warning'}">
                <h3>نتایج تمرین</h3>
                <p>وضعیت: ${result.is_correct ? '✅ پذیرفته شده' : '❌ نیاز به بهبود'}</p>
                <p>کلمات کلیدی یافت شده: ${result.matched_keywords.join(', ') || 'هیچکدام'}</p>
                <p>پاداش کسب شده: ${result.reward} امتیاز</p>
                <p>${result.feedback}</p>
            </div>
        `;

        feedbackDiv.innerHTML = feedbackHTML;
    }

    updateScoreDisplay() {
        const scoreDisplay = document.getElementById('userScore');
        if (scoreDisplay) {
            scoreDisplay.textContent = 
                this.learningLogic.user_progress.total_score + ' امتیاز';
        }
    }
}

// راه‌اندازی برنامه
const quizUI = new QuizUI();