{% extends "base.html" %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/comprehension.css') }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/comprehension_flow.js') }}"></script>
{% endblock %}

{% block content %}
<!-- Modern gradient background with glassmorphism -->
<div class="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 py-8 px-4">
    <div class="max-w-4xl mx-auto space-y-8">
        {% if topic.comprehension_questions %}
    <form method="POST" action="{{ url_for('student.submit_comprehension', topic_id=topic.id) }}" class="space-y-6" autocomplete="off" id="comprehension-form">
            {{ form.csrf_token }}
            
            <!-- Progress bar -->
            <div class="w-full bg-gray-200 rounded-full h-2.5 mb-6 overflow-hidden shadow-inner">
                <div id="progressBarTop" class="bg-gradient-to-r from-indigo-500 to-purple-600 h-2.5 rounded-full transition-all duration-500 ease-out" style="width: 33%"></div>
            </div>
            
            {% for question in topic.comprehension_questions[:3] %}
            <div class="question-container {% if not loop.first %}hidden{% endif %}" data-question-index="{{ loop.index }}">
                <!-- Glassmorphism card -->
                <div class="question-card bg-white/80 backdrop-blur-xl shadow-2xl rounded-3xl p-8 border border-white/30 transition-all duration-300">
                    <!-- Question header with enhanced styling -->
                    <div class="flex items-center justify-between mb-6">
                        <h2 class="text-2xl sm:text-3xl font-bold text-gray-800">
                            Question <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">{{ loop.index }}</span> of 3
                        </h2>
                        <button type="button" class="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-indigo-100 to-purple-100 text-indigo-700 font-medium rounded-xl hover:from-indigo-200 hover:to-purple-200 transition-all duration-300 hover:scale-105 shadow-sm">
                            <i class="fas fa-lightbulb animate-pulse"></i>
                            <span class="hidden sm:inline">Think</span>
                        </button>
                    </div>
                    
                    <!-- Question text with better typography -->
                    <div class="mb-6">
                        <p class="text-lg sm:text-xl text-gray-700 font-medium leading-relaxed">
                            {{ question.text }}
                        </p>
                    </div>

                    <!-- Enhanced answer input area -->
                    <div class="answer-section">
                        <label for="answer_{{ question.id }}" class="block text-base font-semibold text-gray-700 mb-3">Your Answer</label>
                        <div class="relative">
                            <textarea id="answer_{{ question.id }}" name="answer_{{ question.id }}" data-question-id="{{ question.id }}"
                                rows="5" autocomplete="off" spellcheck="true"
                                class="w-full p-5 text-gray-800 text-base border-2 border-gray-200 rounded-2xl 
                                       focus:outline-none focus:ring-4 focus:ring-indigo-300 focus:border-indigo-400 
                                       shadow-sm hover:shadow-md transition-all duration-300 resize-none
                                       placeholder:text-gray-400"
                                placeholder="Write your concise answer here... ✍️"
                                required>{% if questions_with_answers %}{% for qa in questions_with_answers %}{% if qa.question.id == question.id %}{{ qa.answer }}{% endif %}{% endfor %}{% endif %}</textarea>
                            
                            <!-- Typing indicator (optional visual feedback) -->
                            <div class="absolute bottom-3 right-3 text-xs text-gray-400 flex items-center gap-2">
                                <span class="char-count font-semibold text-indigo-600" data-target="#answer_{{ question.id }}">0</span>
                                <span>characters</span>
                            </div>
                        </div>

                        <!-- Enhanced tip section -->
                        <div class="mt-3 flex items-start gap-2 p-3 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-100">
                            <i class="fas fa-lightbulb text-green-500 mt-0.5"></i>
                            <p class="text-sm text-gray-700">
                                <span class="font-semibold">Tip:</span> Mention one specific detail from the reading to improve relevance.
                            </p>
                        </div>
                    </div>

                    <!-- Enhanced navigation controls -->
                    <div class="navigation-controls mt-8 flex items-center justify-between gap-4">
                        <button type="button" 
                                class="nav-button prev-button {% if loop.first %}invisible{% endif %} 
                                       px-6 py-3 bg-white border-2 border-gray-300 text-gray-700 font-semibold 
                                       rounded-2xl hover:bg-gray-50 hover:border-gray-400 hover:shadow-lg 
                                       transition-all duration-300 flex items-center gap-2 group" 
                                aria-label="Previous">
                            <i class="fas fa-arrow-left group-hover:-translate-x-1 transition-transform"></i>
                            <span>Previous</span>
                        </button>
                        
                        <button type="button" 
                                class="nav-button next-button flex-1 max-w-md
                                       py-4 bg-gradient-to-r from-indigo-500 to-purple-600 text-white 
                                       text-lg font-bold rounded-2xl shadow-lg hover:shadow-2xl 
                                       hover:scale-105 transition-all duration-300 
                                       flex items-center justify-center gap-2 group
                                       hover:from-indigo-600 hover:to-purple-700" 
                                aria-label="Next or Submit">
                            {% if loop.last %}
                            <i class="fas fa-paper-plane group-hover:translate-x-1 transition-transform"></i>
                            <span>Submit Answers</span>
                            {% else %}
                            <span>Next Question</span>
                            <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform"></i>
                            {% endif %}
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        </form>
        {% else %}
        <div class="bg-white/80 backdrop-blur-xl shadow-2xl rounded-3xl p-12 border border-white/30 text-center">
            <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-indigo-500 mx-auto mb-6"></div>
            <p class="text-xl font-semibold text-gray-800 mb-2">Generating comprehension questions...</p>
            <p class="text-sm text-gray-500">Please wait while our AI analyzes the content.</p>
        </div>
        <meta http-equiv="refresh" content="3">
        {% endif %}

    <!-- AI Assessment Results - Enhanced -->
    {% if previous_submissions and previous_submissions[0] and previous_submissions[0].parsed_feedback %}
    {% set latest = previous_submissions[0] %}
    <div class="bg-white/80 backdrop-blur-xl shadow-2xl rounded-3xl p-8 border border-white/30 mt-8 ai-assessment-results {% if show_latest_feedback %}show{% endif %}">
        <!-- Header -->
        <div class="flex items-center justify-between mb-8 pb-6 border-b border-gray-200">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-2xl flex items-center justify-center shadow-lg">
                    <i class="fas fa-robot text-white text-2xl"></i>
                </div>
                <div>
                    <h3 class="text-2xl font-bold text-gray-800">AI Assessment</h3>
                    <p class="text-sm text-gray-500">Comprehensive evaluation of your answers</p>
                </div>
            </div>
            <div class="text-right">
                <div class="text-xs text-gray-500 uppercase tracking-wide">Last Updated</div>
                <div class="text-sm font-semibold text-gray-700">{{ latest.created_at.strftime('%B %d, %Y') }}</div>
            </div>
        </div>

        <!-- Questions Assessment Cards -->
        <div class="space-y-6">
            {% for item in latest.parsed_feedback %}
            <div class="bg-white/90 backdrop-blur-lg rounded-2xl p-6 border border-gray-200 shadow-md hover:shadow-xl transition-all duration-300">
                <!-- Question Header -->
                <div class="flex items-start justify-between gap-4 mb-4 pb-4 border-b border-gray-100">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="text-sm font-bold text-white bg-gradient-to-r from-indigo-500 to-purple-600 px-3 py-1 rounded-full">
                                Question {{ loop.index }}
                            </span>
                            <span class="text-xs px-3 py-1 rounded-full {{ 'bg-yellow-100 text-yellow-700 border border-yellow-200' if item.provisional else 'bg-green-100 text-green-700 border border-green-200' }}">
                                {{ 'Provisional' if item.provisional else 'Full' }}
                            </span>
                        </div>
                        <h4 class="text-lg font-semibold text-gray-800">{{ item.question }}</h4>
                    </div>
                </div>

                <!-- Your Answer -->
                <div class="mb-4 p-4 bg-gray-50 rounded-xl border border-gray-200">
                    <div class="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-2">Your Answer</div>
                    <p class="text-sm text-gray-700">{{ item.answer or 'No answer provided' }}</p>
                </div>

                <!-- Assessment Grid -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                    <!-- Grammar Issues -->
                    <div class="p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl border border-blue-100">
                        <div class="flex items-center gap-2 mb-2">
                            <i class="fas fa-check-circle text-blue-600"></i>
                            <div class="text-xs font-semibold text-blue-700 uppercase tracking-wide">Grammar</div>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">
                            {{ item.grammar_analysis.errors|length if item.grammar_analysis and item.grammar_analysis.errors else 0 }}
                            <span class="text-sm font-normal text-gray-600">issue(s)</span>
                        </p>
                    </div>

                    <!-- Spelling Issues -->
                    <div class="p-4 bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl border border-purple-100">
                        <div class="flex items-center gap-2 mb-2">
                            <i class="fas fa-spell-check text-purple-600"></i>
                            <div class="text-xs font-semibold text-purple-700 uppercase tracking-wide">Spelling</div>
                        </div>
                        <p class="text-2xl font-bold text-gray-800">
                            {{ item.spelling_errors|length if item.spelling_errors else 0 }}
                            <span class="text-sm font-normal text-gray-600">issue(s)</span>
                        </p>
                    </div>

                    <!-- Score Summary -->
                    <div class="p-4 bg-gradient-to-br from-indigo-50 to-purple-50 rounded-xl border border-indigo-100">
                        <div class="flex items-center gap-2 mb-2">
                            <i class="fas fa-chart-line text-indigo-600"></i>
                            <div class="text-xs font-semibold text-indigo-700 uppercase tracking-wide">Overall Score</div>
                        </div>
                        <p class="text-3xl font-bold text-indigo-600">{{ item.overall_score|default(item.question_score|default(item.score|default(0))) }}</p>
                    </div>
                </div>

                <!-- Scores -->
                <div class="flex items-center justify-between mb-4">
                    <div class="flex gap-4">
                        <div class="text-center">
                            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center shadow-lg mb-2">
                                <span class="text-xl font-bold text-white">{{ item.grammar_score|default(0) }}</span>
                            </div>
                            <div class="text-xs text-gray-600 font-medium">Grammar</div>
                        </div>
                        <div class="text-center">
                            <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center shadow-lg mb-2">
                                <span class="text-xl font-bold text-white">{{ item.question_score|default(item.score|default(0)) }}</span>
                            </div>
                            <div class="text-xs text-gray-600 font-medium">Question</div>
                        </div>
                    </div>
                    
                    <button type="button" class="details-toggle px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-xl hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 flex items-center gap-2 shadow-md hover:shadow-lg" aria-expanded="false">
                        <span>Show Details</span>
                        <i class="fas fa-chevron-down transition-transform"></i>
                    </button>
                </div>

                <!-- Collapsible Details -->
                <div class="assessment-details overflow-hidden transition-all duration-300" style="max-height: 0; opacity: 0;">
                    <div class="pt-4 border-t border-gray-200 space-y-4">
                        <!-- Strengths -->
                        {% if item.strengths %}
                        <div class="p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-200">
                            <div class="text-sm font-semibold text-green-700 mb-2 flex items-center gap-2">
                                <i class="fas fa-star"></i> What You Did Well
                            </div>
                            <p class="text-sm text-gray-700">{{ item.strengths }}</p>
                        </div>
                        {% endif %}
                        
                        <!-- Improvements -->
                        {% if item.suggestions or item.improvements %}
                        <div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl border border-blue-200">
                            <div class="text-sm font-semibold text-blue-700 mb-2 flex items-center gap-2">
                                <i class="fas fa-lightbulb"></i> How to Improve
                            </div>
                            <p class="text-sm text-gray-700">{{ item.improvements or item.suggestions }}</p>
                        </div>
                        {% endif %}
                        
                        <!-- Grammar Errors -->
                        {% if item.grammar_analysis and item.grammar_analysis.errors and item.grammar_analysis.errors|length > 0 %}
                        <div class="p-4 bg-gradient-to-r from-yellow-50 to-orange-50 rounded-xl border border-yellow-200">
                            <div class="text-sm font-semibold text-orange-700 mb-3 flex items-center gap-2">
                                <i class="fas fa-check-circle"></i> Grammar Corrections
                            </div>
                            <div class="space-y-2">
                                {% for error in item.grammar_analysis.errors %}
                                <div class="bg-white/60 p-3 rounded-lg">
                                    <div class="flex items-start gap-2">
                                        <span class="text-red-600 font-mono text-sm">❌</span>
                                        <div class="flex-1">
                                            <div class="text-sm text-gray-800"><span class="font-semibold">Before:</span> "{{ error.original }}"</div>
                                            <div class="text-sm text-green-700 mt-1"><span class="font-semibold">After:</span> "{{ error.corrected }}"</div>
                                            <div class="text-xs text-gray-600 mt-1 italic">💡 {{ error.explanation }}</div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Spelling Errors -->
                        {% if item.spelling_errors and item.spelling_errors|length > 0 %}
                        <div class="p-4 bg-gradient-to-r from-purple-50 to-pink-50 rounded-xl border border-purple-200">
                            <div class="text-sm font-semibold text-purple-700 mb-3 flex items-center gap-2">
                                <i class="fas fa-spell-check"></i> Spelling Corrections
                            </div>
                            <div class="space-y-2">
                                {% for error in item.spelling_errors %}
                                <div class="bg-white/60 p-3 rounded-lg">
                                    <div class="flex items-start gap-2">
                                        <span class="text-red-600 font-mono text-sm">❌</span>
                                        <div class="flex-1">
                                            <div class="text-sm text-gray-800"><span class="font-semibold">Wrong:</span> "{{ error.original }}"</div>
                                            <div class="text-sm text-green-700 mt-1"><span class="font-semibold">Correct:</span> "{{ error.corrected }}"</div>
                                            {% if error.explanation %}
                                            <div class="text-xs text-gray-600 mt-1 italic">💡 {{ error.explanation }}</div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% endif %}
                        
                        <!-- Legacy Corrections (if using old format) -->
                        {% if item.corrections is iterable and item.corrections|length > 0 %}
                        <div class="p-4 bg-yellow-50 rounded-xl border border-yellow-200">
                            <div class="text-sm font-semibold text-yellow-700 mb-2">✏️ Corrections</div>
                            <ul class="ml-4 list-disc text-sm text-gray-700 space-y-1">
                                {% for c in item.corrections %}
                                <li>{{ c }}</li>
                                {% endfor %}
                            </ul>
                        </div>
                        {% endif %}
                        
                        <!-- Suggested Correction -->
                        {% if item.corrected_answer and item.corrected_answer != item.answer %}
                        <div class="p-4 bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl border border-green-200">
                            <div class="text-sm font-semibold text-green-700 mb-2 flex items-center gap-2">
                                <i class="fas fa-check-circle"></i> ✅ Suggested Correction
                            </div>
                            <p class="text-sm text-gray-700 font-medium italic">"{{ item.corrected_answer }}"</p>
                            <p class="text-xs text-gray-500 mt-2">This is how your answer could be improved while keeping your meaning.</p>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>

        <!-- View All Results Button -->
        <div class="mt-8 text-center">
            <a href="{{ url_for('student.my_results') }}" 
               class="inline-flex items-center gap-2 px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-xl shadow-lg hover:shadow-xl hover:from-blue-600 hover:to-purple-700 transition-all duration-300">
                <i class="fas fa-list-check"></i>
                <span>View All My Results</span>
                <i class="fas fa-arrow-right text-sm"></i>
            </a>
        </div>
    </div>
    {% endif %}

    <!-- Add this button after the submission form when score is >= 70% -->
    {% if progress.comprehension_score and progress.comprehension_score >= 70 %}
    <div class="mt-4 sm:mt-6 text-center">
        <div class="bg-green-50 p-3 sm:p-4 rounded-lg mb-3 sm:mb-4">
            <p class="text-green-700 text-sm sm:text-base">
                <i class="fas fa-check-circle mr-1 sm:mr-2"></i>
                Congratulations! You've successfully completed this topic with a score of {{ progress.comprehension_score|round(1) }}%.
            </p>
        </div>
        <a href="{{ url_for('student.complete_topic', topic_id=topic.id) }}" 
           class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 sm:py-3 px-4 sm:px-6 rounded-lg inline-flex items-center text-sm sm:text-base">
            <i class="fas fa-trophy mr-1 sm:mr-2"></i>
            Complete This Topic
        </a>
    </div>
    {% endif %}
</div>

<!-- Add AI Evaluation Animation Overlay -->
<div id="aiProcessingOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white p-4 sm:p-8 rounded-xl shadow-xl max-w-xs sm:max-w-md w-full">
        <div class="flex flex-col items-center">
            <div class="relative mb-4 sm:mb-6">
                <!-- AI animation -->
                <div class="w-16 h-16 sm:w-24 sm:h-24 rounded-full bg-gradient-to-r from-primary to-accent-secondary flex items-center justify-center">
                    <div class="ai-face relative">
                        <!-- Eyes -->
                        <div class="absolute w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-white animate-ai-blink" style="top: 6px; left: 4px;"></div>
                        <div class="absolute w-2 h-2 sm:w-3 sm:h-3 rounded-full bg-white animate-ai-blink" style="top: 6px; right: 4px;"></div>
                        
                        <!-- Text analysis animation -->
                        <div class="absolute h-1.5 w-8 sm:h-2 sm:w-12 bg-white rounded-lg left-1/2 transform -translate-x-1/2" style="top: 14px;">
                            <div class="absolute inset-0 flex items-center justify-around">
                                <div class="w-1 h-0.5 sm:w-1.5 sm:h-1 bg-primary rounded-full animate-text-scan-1"></div>
                                <div class="w-0.5 h-0.5 sm:w-1 sm:h-1 bg-primary rounded-full animate-text-scan-2"></div>
                                <div class="w-1.5 h-0.5 sm:w-2 sm:h-1 bg-primary rounded-full animate-text-scan-3"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Processing ripple effect -->
                <div class="absolute inset-0 rounded-full border-2 sm:border-4 border-primary/30 animate-ping"></div>
            </div>
            
            <h3 class="text-lg sm:text-xl font-bold mb-3 sm:mb-4 text-center">AI Evaluating Your Answers</h3>
            
            <div class="w-full bg-gray-200 rounded-full h-2 sm:h-2.5 mb-3 sm:mb-4 relative overflow-hidden">
                <div id="progressBar" class="h-full bg-gradient-to-r from-primary to-accent-secondary animate-ai-progress"></div>
            </div>
            
            <p id="processingStatus" class="text-xs sm:text-sm text-gray-500 text-center mb-3 sm:mb-6">Analyzing your written responses...</p>
            
            <div class="flex flex-wrap gap-1 sm:gap-2 justify-center">
                <span class="px-2 py-1 sm:px-3 sm:py-1 rounded-full bg-gray-100 text-xs animate-pulse">Content Analysis</span>
                <span class="px-2 py-1 sm:px-3 sm:py-1 rounded-full bg-gray-100 text-xs animate-pulse" style="animation-delay: 0.2s;">Knowledge Check</span>
                <span class="px-2 py-1 sm:px-3 sm:py-1 rounded-full bg-gray-100 text-xs animate-pulse" style="animation-delay: 0.4s;">Relevance</span>
                <span class="px-2 py-1 sm:px-3 sm:py-1 rounded-full bg-gray-100 text-xs animate-pulse" style="animation-delay: 0.6s;">Accuracy</span>
            </div>
        </div>
    </div>
</div>

<!-- Add extra styles -->
<style>
/* Animation Keyframes */
@keyframes ai-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes text-scan-1 {
    0% { transform: translateX(-5px); opacity: 0.5; }
    50% { transform: translateX(5px); opacity: 1; }
    100% { transform: translateX(-5px); opacity: 0.5; }
}

@keyframes text-scan-2 {
    0% { transform: translateX(5px); opacity: 0.7; }
    50% { transform: translateX(-5px); opacity: 0.4; }
    100% { transform: translateX(5px); opacity: 0.7; }
}

@keyframes text-scan-3 {
    0% { transform: translateX(0px); opacity: 0.3; }
    50% { transform: translateX(3px); opacity: 1; }
    100% { transform: translateX(0px); opacity: 0.3; }
}

@keyframes ai-progress {
    0% { width: 10%; }
    50% { width: 60%; }
    75% { width: 85%; }
    90% { width: 92%; }
    100% { width: 96%; }
}

.animate-ai-blink {
    animation: ai-blink 3s infinite;
}

.animate-text-scan-1 {
    animation: text-scan-1 1.5s ease-in-out infinite;
}

.animate-text-scan-2 {
    animation: text-scan-2 1.7s ease-in-out infinite;
}

.animate-text-scan-3 {
    animation: text-scan-3 1.2s ease-in-out infinite;
}

.animate-ai-progress {
    animation: ai-progress 8s ease-out forwards;
}
</style>

<script>
// Replace the existing script with this updated version
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form[action*="comprehension/submit"]');
    const aiProcessingOverlay = document.getElementById('aiProcessingOverlay');
    const processingStatus = document.getElementById('processingStatus');
    
    if (form) {
        form.addEventListener('submit', function(e) {
            // Check if all required fields are filled
            const textareas = form.querySelectorAll('textarea[required]');
            let allFilled = true;
            
            textareas.forEach(textarea => {
                if (!textarea.value.trim()) {
                    allFilled = false;
                }
            });
            
            if (!allFilled) {
                e.preventDefault();
                alert('Please answer all questions before submitting.');
                return;
            }
            
            // Prevent double submission
            if (form.dataset.submitting === 'true') {
                e.preventDefault();
                return;
            }
            
            // Mark as submitting
            form.dataset.submitting = 'true';
            
            // Show the AI processing overlay
            aiProcessingOverlay.classList.remove('hidden');
            
            // Change status messages during processing
            const statusMessages = [
                "Analyzing your written responses...",
                "Evaluating content accuracy...",
                "Checking for key concepts...",
                "Calculating scores...",
                "Generating helpful feedback...",
                "Preparing results..."
            ];
            
            let messageIndex = 0;
            setInterval(() => {
                messageIndex = (messageIndex + 1) % statusMessages.length;
                processingStatus.textContent = statusMessages[messageIndex];
            }, 2000);
            
            // Let the form submit normally - the overlay will stay visible during redirect
        });
    }
    
    function animateNumber(el, target, duration) {
    target = parseInt(target, 10) || 0;
    duration = duration || 900;
        const start = 0;
        const startTime = performance.now();
        function step(now) {
            const elapsed = Math.min(duration, now - startTime);
            const progress = elapsed / duration;
            const value = Math.round(start + (target - start) * progress);
            el.textContent = value;
            if (elapsed < duration) requestAnimationFrame(step);
            else el.textContent = target;
        }
        requestAnimationFrame(step);
    }

    function runAssessmentAnimations() {
        // animated per-item scores
        document.querySelectorAll('.animated-score').forEach(el => {
            const t = el.getAttribute('data-target') || '0';
            animateNumber(el, t, 900 + Math.random() * 400);
        });

        // overall bar
        const fill = document.querySelector('.overall-bar .fill');
        const overall = document.querySelector('.score-number[data-target]') && document.querySelector('.score-number[data-target]').getAttribute('data-target');
        if (fill && overall) {
            setTimeout(() => { fill.style.width = Math.max(3, Math.min(100, overall)) + '%'; }, 240);
        }
    }

    // Run animations if the AI panel is visible
    const aiPanel = document.querySelector('.ai-assessment-results');
    if (aiPanel && aiPanel.classList.contains('show')) {
        setTimeout(runAssessmentAnimations, 300);
    }

    // Details toggle for each assessment item - smooth animation
    document.querySelectorAll('.details-toggle').forEach(btn => {
        btn.addEventListener('click', function() {
            const details = this.closest('.bg-white\\/90').querySelector('.assessment-details');
            if (!details) return;
            
            const icon = this.querySelector('i');
            const isExpanded = this.getAttribute('aria-expanded') === 'true';
            
            if (isExpanded) {
                // Collapse
                details.style.maxHeight = '0';
                details.style.opacity = '0';
                this.querySelector('span').textContent = 'Show Details';
                this.setAttribute('aria-expanded', 'false');
                if (icon) icon.style.transform = 'rotate(0deg)';
            } else {
                // Expand
                details.style.maxHeight = details.scrollHeight + 'px';
                details.style.opacity = '1';
                this.querySelector('span').textContent = 'Hide Details';
                this.setAttribute('aria-expanded', 'true');
                if (icon) icon.style.transform = 'rotate(180deg)';
            }
        });
    });
    
    // Enhanced Progress Bar and Navigation
    const progressBar = document.getElementById('progressBarTop');
    const totalQuestions = 3;
    
    function updateProgressBar(questionIndex) {
        if (progressBar) {
            const progress = (questionIndex / totalQuestions) * 100;
            progressBar.style.width = progress + '%';
        }
    }
    
    // Enhanced Prev/Next with smooth transitions
    document.querySelectorAll('.prev-button').forEach(btn => {
        btn.addEventListener('click', function() {
            const container = this.closest('.question-container');
            const containers = Array.from(document.querySelectorAll('.question-container'));
            const current = containers.indexOf(container);
            if (current > 0) {
                container.style.transition = 'opacity 0.3s, transform 0.3s';
                container.style.opacity = '0';
                container.style.transform = 'translateY(-20px)';
                
                setTimeout(() => {
                    container.classList.add('hidden');
                    container.style.opacity = '';
                    container.style.transform = '';
                    
                    const prev = containers[current-1];
                    prev.classList.remove('hidden');
                    
                    const questionIndex = parseInt(prev.dataset.questionIndex);
                    updateProgressBar(questionIndex);
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }, 300);
            }
        });
    });

    document.querySelectorAll('.next-button').forEach(btn => {
        btn.addEventListener('click', function() {
            const container = this.closest('.question-container');
            const containers = Array.from(document.querySelectorAll('.question-container'));
            const current = containers.indexOf(container);
            
            if (this.innerText.trim().includes('Submit')) {
                const form = this.closest('form');
                if (form) form.dispatchEvent(new Event('submit', {cancelable: true}));
                return;
            }
            
            if (current < containers.length - 1) {
                container.style.transition = 'opacity 0.3s, transform 0.3s';
                container.style.opacity = '0';
                container.style.transform = 'translateY(-20px)';
                
                setTimeout(() => {
                    container.classList.add('hidden');
                    container.style.opacity = '';
                    container.style.transform = '';
                    
                    const next = containers[current+1];
                    next.classList.remove('hidden');
                    
                    const questionIndex = parseInt(next.dataset.questionIndex);
                    updateProgressBar(questionIndex);
                    
                    const ta = next.querySelector('textarea');
                    if (ta) setTimeout(() => ta.focus(), 100);
                    
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }, 300);
            }
        });
    });
});
</script>

{% endblock %}