{% extends "base.html" %}

{% block content %}
<h2 style="color: #667eea; margin-bottom: 30px;">Take an Exam</h2>

<div style="background: #f0f4ff; padding: 30px; border-radius: 10px; margin-bottom: 30px;">
    <h3 style="color: #667eea; margin-bottom: 20px;">Exam Settings</h3>
    <form id="examForm">
        <div class="form-group">
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        
        <div class="form-group">
            <label for="difficulty">Difficulty:</label>
            <select id="difficulty" name="difficulty" required>
                {% for level in difficulty_levels %}
                <option value="{{ level }}">{{ level.capitalize() }}</option>
                {% endfor %}
            </select>
        </div>
        
        <div class="form-group">
            <label for="question_count">Number of Questions:</label>
            <input type="number" id="question_count" name="question_count" min="1" max="20" value="5" required>
        </div>
        
        <button type="submit" class="button">Generate Questions</button>
    </form>
</div>

<div id="questionsContainer" style="display: none;">
    <h3 style="color: #667eea; margin-bottom: 20px;">Answer the Questions</h3>
    <div id="questionsList"></div>
    <button id="submitAnswers" class="button" style="margin-top: 20px;">Submit Answers</button>
</div>

<div id="resultsContainer" style="display: none;">
    <h3 style="color: #667eea; margin-bottom: 20px;">Exam Results</h3>
    <div id="resultsContent"></div>
</div>

<div id="message"></div>

<script>
let currentQuestions = [];
let currentUsername = '';

// Utility function to format numbers as integers when appropriate
function formatNumber(num) {
    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
}

document.getElementById('examForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    currentUsername = document.getElementById('username').value;
    const difficulty = document.getElementById('difficulty').value;
    const questionCount = parseInt(document.getElementById('question_count').value);
    
    const messageDiv = document.getElementById('message');
    messageDiv.innerHTML = '<div style="text-align: center; padding: 20px;">Generating questions...</div>';
    
    try {
        const response = await fetch('/api/exam/human', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: currentUsername,
                difficulty: difficulty,
                question_count: questionCount
            })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            currentQuestions = data.questions;
            displayQuestions(data.questions);
            messageDiv.innerHTML = '';
        } else {
            messageDiv.innerHTML = `<div class="error">${data.error}</div>`;
        }
    } catch (error) {
        messageDiv.innerHTML = '<div class="error">Error generating questions</div>';
    }
});

function displayQuestions(questions) {
    const container = document.getElementById('questionsList');
    let html = '';
    
    questions.forEach((q, idx) => {
        html += `
            <div style="background: white; padding: 20px; margin-bottom: 20px; border-radius: 10px; border-left: 4px solid #667eea;">
                <h4 style="color: #667eea; margin-bottom: 10px;">Question ${idx + 1}</h4>
                <p style="font-size: 1.1em; margin-bottom: 15px;">${q.question_text}</p>
                <label for="answer_${idx}" style="display: block; margin-bottom: 5px;">Your Answer:</label>
                <input type="number" step="any" id="answer_${idx}" class="answer-input" 
                       style="width: 200px; padding: 8px; border: 2px solid #ddd; border-radius: 5px;" required>
            </div>
        `;
    });
    
    container.innerHTML = html;
    document.getElementById('questionsContainer').style.display = 'block';
    document.getElementById('resultsContainer').style.display = 'none';
}

document.getElementById('submitAnswers').addEventListener('click', async () => {
    const answers = [];
    let allAnswered = true;
    
    for (let i = 0; i < currentQuestions.length; i++) {
        const input = document.getElementById(`answer_${i}`);
        if (input.value === '') {
            allAnswered = false;
            break;
        }
        answers.push(parseFloat(input.value));
    }
    
    if (!allAnswered) {
        alert('Please answer all questions before submitting!');
        return;
    }
    
    const messageDiv = document.getElementById('message');
    messageDiv.innerHTML = '<div style="text-align: center; padding: 20px;">Processing your answers...</div>';
    
    try {
        // Submit to backend for processing
        const response = await fetch('/api/exam/human/submit', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: currentUsername,
                difficulty: document.getElementById('difficulty').value,
                questions: currentQuestions,
                answers: answers
            })
        });
        
        const data = await response.json();
        
        if (response.ok) {
            displayResults(data);
            messageDiv.innerHTML = '';
        } else {
            messageDiv.innerHTML = `<div class="error">${data.error || 'Error processing answers'}</div>`;
        }
    } catch (error) {
        messageDiv.innerHTML = '<div class="error">Error submitting answers</div>';
        console.error(error);
    }
});

function displayResults(data) {
    let resultsHtml = '<div style="background: #f0f4ff; padding: 30px; border-radius: 10px; margin-bottom: 20px;">';
    resultsHtml += `<div style="text-align: center; margin-bottom: 20px;">`;
    resultsHtml += `<h3 style="color: #667eea;">Score: ${data.correct_answers}/${data.total_questions} (${formatNumber(data.score)}%)</h3>`;
    resultsHtml += '</div>';
    
    data.results.forEach((result) => {
        const isCorrect = result.is_correct;
        const bgColor = isCorrect ? '#e8f5e9' : '#ffebee';
        const borderColor = isCorrect ? '#4caf50' : '#f44336';
        
        resultsHtml += `
            <div style="background: ${bgColor}; padding: 15px; margin-bottom: 15px; border-radius: 8px; border-left: 4px solid ${borderColor};">
                <p><strong>Question ${result.question_number}:</strong> ${result.question || 'N/A'}</p>
                <p><strong>Equation:</strong> ${result.equation || 'N/A'}</p>
                <p><strong>Your Answer:</strong> ${formatNumber(result.user_answer)}</p>
                <p><strong>Correct Answer:</strong> ${formatNumber(result.correct_answer)}</p>
                <p style="color: ${borderColor}; font-weight: bold;">${isCorrect ? '✓ Correct' : '✗ Incorrect'}</p>
        `;
        
        // Display teacher feedback for wrong answers with markdown rendering
        if (!isCorrect && result.teacher_feedback) {
            resultsHtml += `
                <div style="margin-top: 15px; padding: 15px; background: white; border-radius: 6px; border-left: 3px solid #667eea;">
                    <h4 style="color: #667eea; margin-top: 0; margin-bottom: 10px;">
                        👨‍🏫 Teacher's Feedback
                    </h4>
                    <p style="margin-bottom: 10px;"><strong>${renderMarkdown(result.teacher_feedback.feedback)}</strong></p>
                    <div style="white-space: pre-wrap; line-height: 1.6;">${renderMarkdown(result.teacher_feedback.explanation)}</div>
                </div>
            `;
        }
        
        resultsHtml += `</div>`;
    });
    
    resultsHtml += '</div>';
    resultsHtml += '<div style="text-align: center;"><a href="/exam" class="button">Take Another Exam</a> <a href="/users" class="button" style="margin-left: 10px;">View All Users</a></div>';
    
    document.getElementById('resultsContent').innerHTML = resultsHtml;
    document.getElementById('resultsContainer').style.display = 'block';
    document.getElementById('questionsContainer').style.display = 'none';
}
</script>
{% endblock %}