{% extends "base.html" %}

{% block title %}Mistake Review - GradeSchoolMathSolver{% endblock %}

{% block content %}
<div style="max-width: 800px; margin: 0 auto;">
    <h2 style="color: #667eea; margin-bottom: 20px;">📝 Review Your Mistakes</h2>
    
    <div class="form-group">
        <label for="username">Enter Your Username:</label>
        <input type="text" id="username" placeholder="Your username">
    </div>
    
    <button class="button" onclick="loadNextMistake()" style="width: 100%; padding: 15px; font-size: 18px;">
        Start Reviewing
    </button>
    
    <div id="mistake-info" style="margin-top: 20px; display: none;">
        <div style="background: #f5f5f5; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
            <h3 style="color: #667eea; margin-bottom: 15px;">Unreviewed Mistakes</h3>
            <p style="font-size: 24px; color: #764ba2; font-weight: bold;" id="mistake-count">0</p>
        </div>
    </div>
    
    <div id="mistake-card" style="display: none;">
        <div style="background: #fff3cd; border: 2px solid #ffc107; border-radius: 10px; padding: 25px; margin-top: 20px;">
            <h3 style="color: #856404; margin-bottom: 20px;">Question from Your Past</h3>
            
            <div style="margin-bottom: 15px;">
                <label style="color: #856404; font-weight: bold;">Question:</label>
                <p style="font-size: 18px; color: #333; margin-top: 5px;" id="question-text"></p>
            </div>
            
            <div style="margin-bottom: 15px;">
                <label style="color: #d9534f; font-weight: bold;">Your Previous Answer (Incorrect):</label>
                <p style="font-size: 20px; color: #d9534f; margin-top: 5px; font-weight: bold;" id="user-answer"></p>
            </div>
            
            <!-- Correct answer is hidden per requirements -->
            
            <div style="margin-bottom: 15px;">
                <label style="color: #856404; font-weight: bold;">Category:</label>
                <p style="font-size: 16px; color: #333; margin-top: 5px;" id="category"></p>
            </div>
            
            <div style="margin-bottom: 20px;">
                <label style="color: #856404; font-weight: bold;">Date:</label>
                <p style="font-size: 16px; color: #333; margin-top: 5px;" id="timestamp"></p>
            </div>
            
            <!-- View Details section to show equation (for teachers) -->
            <details style="margin-bottom: 20px;">
                <summary style="cursor: pointer; color: #667eea; font-weight: bold;">View Details (Equation)</summary>
                <div style="margin-top: 10px; padding: 10px; background: white; border-radius: 5px;">
                    <label style="color: #856404; font-weight: bold;">Equation:</label>
                    <p style="font-size: 18px; color: #333; margin-top: 5px;" id="equation-text"></p>
                </div>
            </details>
            
            <div style="margin-top: 30px;">
                <label for="retry-answer" style="color: #667eea; font-weight: bold; font-size: 18px;">Try Again:</label>
                <input type="number" id="retry-answer" placeholder="Enter your answer" style="margin-top: 10px; font-size: 18px;">
            </div>
            
            <div style="margin-top: 20px; display: flex; gap: 10px;">
                <button class="button" onclick="checkAnswer()" style="flex: 1; padding: 15px; font-size: 16px;">
                    ✓ Check Answer
                </button>
                <button class="button" onclick="markReviewedAndNext()" style="flex: 1; padding: 15px; font-size: 16px; background: #5cb85c;">
                    → Next Mistake
                </button>
            </div>
        </div>
        
        <div id="answer-feedback" style="display: none; margin-top: 20px; padding: 20px; border-radius: 10px;"></div>
    </div>
    
    <div id="no-mistakes" style="display: none;">
        <div style="background: #d4edda; border: 2px solid #28a745; border-radius: 10px; padding: 30px; margin-top: 20px; text-align: center;">
            <h3 style="color: #155724; margin-bottom: 15px;">🎉 Great Job!</h3>
            <p style="font-size: 18px; color: #155724;">You have no mistakes to review at this time.</p>
            <p style="font-size: 16px; color: #155724; margin-top: 10px;">Keep practicing to improve your skills!</p>
        </div>
    </div>
</div>

<script>
    let currentMistake = null;
    let currentUsername = null;

    // Utility function to format numbers as integers when appropriate
    function formatNumber(num) {
        if (num === null || num === undefined) {
            return 'N/A';
        }
        if (Number.isInteger(num) || num === Math.floor(num)) {
            return Math.floor(num).toString();
        }
        return num.toString();
    }

    // Utility function to render markdown (basic implementation)
    function renderMarkdown(text) {
        if (!text) return '';
        return text
            .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')  // Bold
            .replace(/\*(.+?)\*/g, '<em>$1</em>')              // Italic
            .replace(/\n/g, '<br>');                           // Line breaks
    }

    async function loadNextMistake() {
        const username = document.getElementById('username').value.trim();
        if (!username) {
            alert('Please enter your username');
            return;
        }
        
        currentUsername = username;
        
        try {
            // Get mistake count
            const countResponse = await fetch(`/api/mistakes/count/${username}`);
            const countData = await countResponse.json();
            
            document.getElementById('mistake-count').textContent = countData.unreviewed_count;
            document.getElementById('mistake-info').style.display = 'block';
            
            // Get next mistake
            const response = await fetch(`/api/mistakes/next/${username}`);
            
            if (response.status === 404) {
                document.getElementById('mistake-card').style.display = 'none';
                document.getElementById('no-mistakes').style.display = 'block';
                return;
            }
            
            const data = await response.json();
            currentMistake = data;
            
            // Display mistake with formatted numbers
            document.getElementById('question-text').textContent = data.question;
            document.getElementById('equation-text').textContent = data.equation;
            document.getElementById('user-answer').textContent = formatNumber(data.user_answer);
            // Correct answer is hidden per requirements
            document.getElementById('category').textContent = data.category;
            document.getElementById('timestamp').textContent = new Date(data.timestamp).toLocaleString();
            
            document.getElementById('retry-answer').value = '';
            document.getElementById('answer-feedback').style.display = 'none';
            document.getElementById('mistake-card').style.display = 'block';
            document.getElementById('no-mistakes').style.display = 'none';
            
        } catch (error) {
            alert('Error loading mistake: ' + error.message);
        }
    }

    function checkAnswer() {
        const retryAnswer = parseInt(document.getElementById('retry-answer').value);
        const feedbackDiv = document.getElementById('answer-feedback');
        
        if (isNaN(retryAnswer)) {
            alert('Please enter a valid number');
            return;
        }
        
        const isCorrect = retryAnswer === currentMistake.correct_answer;
        
        if (isCorrect) {
            feedbackDiv.style.background = '#d4edda';
            feedbackDiv.style.border = '2px solid #28a745';
            feedbackDiv.style.color = '#155724';
            feedbackDiv.innerHTML = '<h3>✅ Correct!</h3><p>Great job! You got it right this time.</p>';
        } else {
            feedbackDiv.style.background = '#f8d7da';
            feedbackDiv.style.border = '2px solid #dc3545';
            feedbackDiv.style.color = '#721c24';
            feedbackDiv.innerHTML = '<h3>❌ Not quite right</h3><p>The correct answer is ' + formatNumber(currentMistake.correct_answer) + '. Keep trying!</p>';
        }
        
        feedbackDiv.style.display = 'block';
    }

    async function markReviewedAndNext() {
        if (!currentMistake) {
            alert('No mistake loaded');
            return;
        }
        
        try {
            const response = await fetch('/api/mistakes/review', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    username: currentUsername,
                    mistake_id: currentMistake.mistake_id
                })
            });
            
            if (response.ok) {
                // Load next mistake
                await loadNextMistake();
            } else {
                alert('Error marking mistake as reviewed');
            }
            
        } catch (error) {
            alert('Error: ' + error.message);
        }
    }
</script>
{% endblock %}