{% extends "base.html" %}

{% block content %}
<div class="space-y-8">
    <!-- Update Topic Header styling to match topic view page -->
    <div class="mb-6">
        <div class="bg-white shadow-md rounded-xl overflow-hidden">
            <div class="p-6">
                <div class="flex items-center justify-between">
                    <div>
                        <a href="{{ url_for('student.topic_view', topic_id=topic.id) }}" class="text-primary hover:text-primary-dark flex items-center mb-2 text-sm">
                            <i class="fas fa-arrow-left mr-2"></i> Back to Topic
                        </a>
                        <h1 class="text-2xl font-bold text-gray-900">{{ topic.title }}</h1>
                        <p class="text-secondary mt-1">Speaking Practice</p>
                    </div>
                    <div>
                        <span class="badge badge-primary text-base px-4 py-2">
                            <i class="fas fa-microphone mr-2"></i>Stage 2/3
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="space-y-8 animate-fade-in">
        <!-- Header section with improved design -->
        <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 sm:p-6 bg-base-100 backdrop-filter backdrop-blur-lg rounded-2xl shadow-lg gap-3">
            <div>
                <h1 class="text-2xl sm:text-3xl font-bold text-base-content mb-2">Speaking Practice</h1>
                <p class="text-sm sm:text-base text-base-content/60">Enhance your pronunciation and fluency</p>
            </div>
            <div class="text-right">
                <span class="badge badge-secondary text-sm sm:text-base px-3 sm:px-4 py-1 sm:py-2">
                    <i class="fas fa-microphone mr-2"></i>Stage 2/3
                </span>
            </div>
        </div>

        <!-- Question Prompt Section with improved card design -->
        {% if current_question %}
        <div class="card bg-base-100 shadow-lg rounded-xl overflow-hidden mb-6">
            <div class="card-body p-6">
                <h3 class="text-xl font-bold flex items-center mb-4">
                    <i class="fas fa-microphone-alt text-primary mr-2"></i>
                    Speaking Question
                </h3>
                
                <div class="mb-6">
                    <div class="bg-primary/5 border border-primary/20 rounded-lg p-4 mb-2">
                        <p class="text-lg font-medium">{{ current_question.text }}</p>
                    </div>
                    <p class="text-sm text-base-content/70">
                        <i class="fas fa-info-circle mr-1"></i>
                        Speak for approximately {{ current_question.expected_duration }} seconds to answer this question.
                    </p>
                </div>
                
                <!-- Rest of the template -->
                <!-- ...existing code... -->
        {% else %}
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            <span>No speaking questions are available. Please try refreshing the page or contact your teacher for assistance.</span>
        </div>
        {% endif %}

        <!-- Recording Section with improved UI -->
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title mb-4">
                    <i class="fas fa-microphone text-secondary mr-2"></i>
                    Record Your Answer
                </h2>
                
                <div class="recording-controls space-y-6">
                    <!-- Initial Recording Button -->
                    <button id="startRecording" class="btn btn-secondary w-full flex items-center justify-center gap-3 py-4 text-lg">
                        <i class="fas fa-microphone text-xl"></i>
                        <span>Start Recording</span>
                    </button>

                    <!-- Active Recording Controls with improved UI -->
                    <div id="activeControls" class="hidden space-y-4">
                        <!-- Timer with pulse animation -->
                        <div class="flex justify-center">
                            <div class="text-3xl font-bold text-secondary py-3 px-6 rounded-lg bg-base-200 flex items-center gap-3">
                                <div class="w-3 h-3 bg-red-500 rounded-full animate-pulse"></div>
                                <span id="timer">00:00</span>
                            </div>
                        </div>

                        <!-- Sound recording animation - NEW -->
                        <div class="flex items-center justify-center h-16 mb-2">
                            <div class="recording-animation">
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                                <div class="recording-bar"></div>
                            </div>
                        </div>

                        <!-- Audio Visualizer -->
                        <div class="w-full h-32 bg-base-200 rounded-lg border border-base-300 overflow-hidden">
                            <canvas id="audioVisualizer" class="w-full h-full"></canvas>
                        </div>

                        <!-- Stop Button -->
                        <button id="stopRecording" class="btn btn-error w-full py-4 text-lg">
                            <i class="fas fa-stop mr-2"></i>
                            <span>Stop Recording</span>
                        </button>
                    </div>

                    <!-- Audio Preview with improved player style -->
                    <div id="previewSection" class="hidden space-y-4">
                        <div class="bg-base-200 p-4 rounded-lg">
                            <h3 class="font-semibold mb-3 text-base-content/80">Preview Your Recording</h3>
                            <audio id="audioPreview" controls class="w-full" style="height: 40px;"></audio>
                        </div>
                        <div class="flex flex-col sm:flex-row gap-4">
                            <button id="retryRecording" class="btn btn-outline flex-1 gap-2">
                                <i class="fas fa-redo"></i>Record Again
                            </button>
                            <button id="submitRecording" class="btn btn-secondary flex-1 gap-2">
                                <i class="fas fa-paper-plane"></i>Submit Recording
                            </button>
                        </div>
                        <!-- Error display with improved styling -->
                        <div id="errorDisplay" class="hidden alert alert-error">
                            <div>
                                <i class="fas fa-exclamation-triangle"></i>
                                <span class="ml-2">An error occurred</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- AI Feedback Section with improved mobile responsiveness -->
                <div id="aiFeedback" class="hidden mt-8 space-y-6">
                    <h3 class="text-lg sm:text-xl font-bold text-base-content flex items-center">
                        <i class="fas fa-robot mr-2 text-secondary"></i>
                        AI Assessment Results
                    </h3>
                    
                    <!-- Mobile-First Responsive Grid for Scores -->
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4">
                        <!-- Overall Score -->
                        <div class="stat bg-base-200 rounded-lg shadow-sm p-4 sm:p-6">
                            <div class="stat-title flex items-center gap-2 text-sm sm:text-base">
                                <i class="fas fa-star text-warning text-sm sm:text-base"></i>
                                Overall Score
                            </div>
                            <div id="overallScore" class="stat-value text-secondary text-2xl sm:text-3xl">-</div>
                        </div>
                        <!-- Pronunciation Score -->
                        <div class="stat bg-base-200 rounded-lg shadow-sm p-4 sm:p-6">
                            <div class="stat-title flex items-center gap-2 text-sm sm:text-base">
                                <i class="fas fa-spell-check text-info text-sm sm:text-base"></i>
                                Pronunciation
                            </div>
                            <div id="pronunciationScore" class="stat-value text-info text-2xl sm:text-3xl">-</div>
                        </div>
                        <!-- Fluency Score -->
                        <div class="stat bg-base-200 rounded-lg shadow-sm p-4 sm:p-6 sm:col-span-2 lg:col-span-1">
                            <div class="stat-title flex items-center gap-2 text-sm sm:text-base">
                                <i class="fas fa-wind text-success text-sm sm:text-base"></i>
                                Fluency
                            </div>
                            <div id="fluencyScore" class="stat-value text-success text-2xl sm:text-3xl">-</div>
                        </div>
                    </div>
                    
                    <!-- Additional Scores for Mobile -->
                    <div class="grid grid-cols-2 gap-3 sm:hidden">
                        <!-- Grammar Score -->
                        <div class="stat bg-base-200 rounded-lg shadow-sm p-4">
                            <div class="stat-title flex items-center gap-1 text-xs">
                                <i class="fas fa-book text-warning text-xs"></i>
                                Grammar
                            </div>
                            <div id="grammarScore" class="stat-value text-warning text-xl">-</div>
                        </div>
                        <!-- Relevance Score -->
                        <div class="stat bg-base-200 rounded-lg shadow-sm p-4">
                            <div class="stat-title flex items-center gap-1 text-xs">
                                <i class="fas fa-bullseye text-error text-xs"></i>
                                Relevance
                            </div>
                            <div id="relevanceScore" class="stat-value text-error text-xl">-</div>
                        </div>
                    </div>
                    
                    <!-- Desktop Additional Scores -->
                    <div class="hidden sm:grid grid-cols-2 gap-4">
                        <!-- Grammar Score -->
                        <div class="stat bg-base-200 rounded-lg shadow-sm">
                            <div class="stat-title flex items-center gap-2">
                                <i class="fas fa-book text-warning"></i>
                                Grammar
                            </div>
                            <div id="grammarScoreDesktop" class="stat-value text-warning">-</div>
                        </div>
                        <!-- Relevance Score -->
                        <div class="stat bg-base-200 rounded-lg shadow-sm">
                            <div class="stat-title flex items-center gap-2">
                                <i class="fas fa-bullseye text-error"></i>
                                Relevance
                            </div>
                            <div id="relevanceScoreDesktop" class="stat-value text-error">-</div>
                        </div>
                    </div>
                    
                    <!-- Feedback Text - Mobile Responsive -->
                    <div id="feedbackText" class="card bg-base-200">
                        <div class="card-body p-4 sm:p-6">
                            <h3 class="card-title text-lg sm:text-xl mb-3 sm:mb-4">
                                <i class="fas fa-comment-dots mr-2 text-primary"></i>
                                Detailed Feedback
                            </h3>
                            <div class="text-sm sm:text-base text-base-content/80 leading-relaxed">
                                <p>Loading feedback...</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Navigation Controls - Mobile Responsive -->
                    <div id="navigationControls" class="flex flex-col sm:flex-row gap-3 justify-center mt-6 px-4 sm:px-0">
                        <!-- Will be populated by JavaScript -->
                    </div>

                    <!-- View All Results Button -->
                    <div class="mt-6 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>
            </div>
        </div>
        
        <!-- Tips Card -->
        <div class="card bg-base-100 shadow-xl">
            <div class="card-body">
                <h2 class="card-title">
                    <i class="fas fa-lightbulb text-warning mr-2"></i>
                    Speaking Tips
                </h2>
                <div class="divider mt-0 mb-4"></div>
                <ul class="space-y-2 text-base-content/80">
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-success mt-1"></i>
                        <span>Speak clearly and at a moderate pace.</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-success mt-1"></i>
                        <span>Use natural intonation and stress patterns.</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-success mt-1"></i>
                        <span>If you make a mistake, don't worry - just continue speaking.</span>
                    </li>
                    <li class="flex items-start gap-2">
                        <i class="fas fa-check text-success mt-1"></i>
                        <span>Try to use vocabulary and grammar structures relevant to the topic.</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!-- Add an AI evaluation animation overlay that will appear during processing -->
<div id="aiProcessingOverlay" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center">
    <div class="bg-base-100 p-8 rounded-xl shadow-xl max-w-md w-full">
        <div class="flex flex-col items-center">
            <div class="relative mb-6">
                <!-- AI face animation -->
                <div class="w-24 h-24 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
                    <div class="ai-face relative">
                        <!-- Eyes -->
                        <div class="absolute w-3 h-3 rounded-full bg-base-100 animate-ai-blink" style="top: 8px; left: 6px;"></div>
                        <div class="absolute w-3 h-3 rounded-full bg-base-100 animate-ai-blink" style="top: 8px; right: 6px;"></div>
                        
                        <!-- Mouth animation (sound wave) -->
                        <div class="absolute h-1.5 w-12 bg-base-100 rounded-lg left-1/2 transform -translate-x-1/2" style="top: 18px;">
                            <div class="absolute inset-0 flex items-center justify-around">
                                <div class="w-1 h-1 bg-primary rounded-full animate-sound-wave-1"></div>
                                <div class="w-1 h-1 bg-primary rounded-full animate-sound-wave-2"></div>
                                <div class="w-1 h-1 bg-primary rounded-full animate-sound-wave-3"></div>
                                <div class="w-1 h-1 bg-primary rounded-full animate-sound-wave-2"></div>
                                <div class="w-1 h-1 bg-primary rounded-full animate-sound-wave-1"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- Processing ripple effect -->
                <div class="absolute inset-0 rounded-full border-4 border-primary/30 animate-ping"></div>
            </div>
            
            <h3 class="text-xl font-bold mb-4">AI Evaluating Your Speech</h3>
            
            <div class="w-full bg-base-200 rounded-full h-2.5 mb-4 relative overflow-hidden">
                <div id="progressBar" class="h-full bg-gradient-to-r from-primary to-secondary animate-ai-progress"></div>
            </div>
            
            <p id="processingStatus" class="text-sm text-base-content/70 text-center">Analyzing pronunciation and fluency...</p>
            
            <div class="mt-6 flex flex-wrap gap-2 justify-center">
                <span class="px-3 py-1 rounded-full bg-base-200 text-xs animate-pulse">Pronunciation</span>
                <span class="px-3 py-1 rounded-full bg-base-200 text-xs animate-pulse" style="animation-delay: 0.2s;">Grammar</span>
                <span class="px-3 py-1 rounded-full bg-base-200 text-xs animate-pulse" style="animation-delay: 0.4s;">Fluency</span>
                <span class="px-3 py-1 rounded-full bg-base-200 text-xs animate-pulse" style="animation-delay: 0.6s;">Relevance</span>
            </div>
        </div>
    </div>
</div>

<style>
/* Mobile-First Responsive Design for AI Assessment */
@media (max-width: 640px) {
    .stat {
        padding: 1rem !important;
    }
    
    .stat-value {
        font-size: 1.5rem !important;
        line-height: 1.2 !important;
    }
    
    .stat-title {
        font-size: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    #aiFeedback {
        padding: 0.5rem !important;
    }
    
    .card-body {
        padding: 1rem !important;
    }
    
    .feedback-item {
        margin-bottom: 1rem !important;
    }
    
    .feedback-item .w-10.h-10 {
        width: 2rem !important;
        height: 2rem !important;
    }
    
    .feedback-item .pl-12 {
        padding-left: 2.5rem !important;
    }
    
    .feedback-item h5 {
        font-size: 1rem !important;
    }
    
    .feedback-item p {
        font-size: 0.875rem !important;
    }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fade-in 0.5s ease-out;
}

/* AI Face Animation Keyframes */
@keyframes ai-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

@keyframes sound-wave-1 {
    0%, 100% { height: 3px; }
    50% { height: 6px; }
}

@keyframes sound-wave-2 {
    0%, 100% { height: 4px; }
    50% { height: 8px; }
}

@keyframes sound-wave-3 {
    0%, 100% { height: 2px; }
    50% { height: 10px; }
}

@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-sound-wave-1 {
    animation: sound-wave-1 1.2s ease-in-out infinite;
}

.animate-sound-wave-2 {
    animation: sound-wave-2 1.5s ease-in-out infinite;
}

.animate-sound-wave-3 {
    animation: sound-wave-3 0.9s ease-in-out infinite;
}

.animate-ai-progress {
    animation: ai-progress 8s ease-out forwards;
}

audio::-webkit-media-controls-panel {
    background-color: theme('colors.base-200');
}

audio::-webkit-media-controls-play-button {
    background-color: theme('colors.secondary');
    border-radius: 50%;
}

audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
    color: theme('colors.base-content');
}

/* New Sound Recording Animation */
.recording-animation {
    display: flex;
    align-items: flex-end;
    height: 50px;
    gap: 4px;
}

.recording-bar {
    width: 6px;
    height: 10px;
    background: linear-gradient(to top, var(--p), var(--s));
    border-radius: 2px;
    animation: sound-recording 0.5s ease-in-out infinite alternate;
}

@keyframes sound-recording {
    0% {
        height: 5px;
    }
    100% {
        height: 45px;
    }
}

/* Apply delay to each bar to create wave effect */
.recording-bar:nth-child(1) { animation-delay: -0.4s; }
.recording-bar:nth-child(2) { animation-delay: -0.3s; }
.recording-bar:nth-child(3) { animation-delay: -0.1s; }
.recording-bar:nth-child(4) { animation-delay: -0.5s; }
.recording-bar:nth-child(5) { animation-delay: -0.2s; }
.recording-bar:nth-child(6) { animation-delay: -0.7s; }
.recording-bar:nth-child(7) { animation-delay: -0.3s; }
.recording-bar:nth-child(8) { animation-delay: -0.6s; }
.recording-bar:nth-child(9) { animation-delay: -0.1s; }
.recording-bar:nth-child(10) { animation-delay: -0.5s; }
.recording-bar:nth-child(11) { animation-delay: -0.2s; }

/* Real-time audio level animation for the bars */
@keyframes audio-level {
    0% { height: var(--audio-height, 5px); }
    100% { height: var(--audio-height, 5px); }
}

.audio-animated {
    animation: audio-level 0.1s ease-out forwards;
}

</style>

<script>
    let mediaRecorder = null;
    let audioStream = null;
    let audioChunks = [];
    let startTime = null;
    let timerInterval = null;
    let audioContext = null;
    let analyser = null;
    let animationFrame = null;
    let questionCount = 0;

    // Debug information on page load
    console.log("Current question ID: {{ current_question.id }}");
    console.log("Total questions: {{ question_count }}");
    console.log("Completed questions: {{ completed_count }}");
    console.log("All completed: {{ all_completed }}");
    
    const urlParams = new URLSearchParams(window.location.search);
    const requestedQuestion = urlParams.get('question');
    console.log("Requested question from URL: " + requestedQuestion);

    function setupAudioVisualizer(stream) {
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        const source = audioContext.createMediaStreamSource(stream);
        analyser = audioContext.createAnalyser();
        analyser.fftSize = 256;
        source.connect(analyser);
        
        const canvas = document.getElementById('audioVisualizer');
        canvas.width = canvas.parentNode.clientWidth;
        canvas.height = canvas.parentNode.clientHeight;
        const canvasCtx = canvas.getContext('2d');
        const bufferLength = analyser.frequencyBinCount;
        const dataArray = new Uint8Array(bufferLength);

        // Get the sound bars for real-time animation
        const soundBars = document.querySelectorAll('.recording-bar');

        function draw() {
            animationFrame = requestAnimationFrame(draw);
            analyser.getByteFrequencyData(dataArray);

            // Use theme-aware colors
            const theme = document.documentElement.getAttribute('data-theme');
            const bgColor = theme === 'dark' ? '#1f2937' : '#f3f4f6';
            const barColor = theme === 'dark' ? '#8b5cf6' : '#6366f1';

            canvasCtx.fillStyle = bgColor;
            canvasCtx.fillRect(0, 0, canvas.width, canvas.height);

            const barWidth = (canvas.width / bufferLength) * 2.5;
            let barHeight;
            let x = 0;

            // Calculate average level for the sound recording animation
            let totalLevel = 0;
            let validBands = 0;

            for(let i = 0; i < bufferLength; i++) {
                barHeight = dataArray[i] / 2;
                
                // For the recording animation, only use the first 20 frequencies (more voice-focused)
                if (i < 20 && dataArray[i] > 0) {
                    totalLevel += dataArray[i];
                    validBands++;
                }
                
                // Create gradient effect for bars
                const gradient = canvasCtx.createLinearGradient(0, canvas.height, 0, canvas.height - barHeight);
                gradient.addColorStop(0, barColor);
                gradient.addColorStop(1, theme === 'dark' ? '#c4b5fd' : '#a5b4fc');
                
                canvasCtx.fillStyle = gradient;
                canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
                x += barWidth + 1;
            }

            // Update the recording animation bars based on audio level
            if (validBands > 0) {
                const avgLevel = totalLevel / validBands;
                const normalizedLevel = Math.min(45, Math.max(5, avgLevel / 255 * 45)); // Scale to 5-45px
                
                soundBars.forEach((bar, index) => {
                    // Add some randomness to make it look more natural
                    const randomFactor = 0.7 + Math.random() * 0.6;
                    const height = normalizedLevel * randomFactor;
                    
                    // Use CSS custom property to control height
                    bar.style.setProperty('--audio-height', `${height}px`);
                    
                    // Remove the default animation and add our real-time animation
                    bar.style.animation = 'none';
                    bar.classList.add('audio-animated');
                });
            }
        }
        draw();
    }

    function updateTimer() {
        const now = Date.now();
        const diff = now - startTime;
        const seconds = Math.floor(diff / 1000);
        const minutes = Math.floor(seconds / 60);
        const displaySeconds = (seconds % 60).toString().padStart(2, '0');
        const displayMinutes = minutes.toString().padStart(2, '0');
        document.getElementById('timer').textContent = `${displayMinutes}:${displaySeconds}`;
    }

    document.getElementById('startRecording').addEventListener('click', async () => {
        try {
            audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });
            mediaRecorder = new MediaRecorder(audioStream);
            audioChunks = [];

            mediaRecorder.ondataavailable = (event) => {
                if (event.data.size > 0) {
                    audioChunks.push(event.data);
                }
            };

            mediaRecorder.onstop = () => {
                const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
                const audioUrl = URL.createObjectURL(audioBlob);
                document.getElementById('audioPreview').src = audioUrl;
                document.getElementById('previewSection').classList.remove('hidden');
                document.getElementById('activeControls').classList.add('hidden');
                document.getElementById('startRecording').classList.add('hidden');
            };

            mediaRecorder.start();
            setupAudioVisualizer(audioStream);
            startTime = Date.now();
            timerInterval = setInterval(updateTimer, 1000);
            
            document.getElementById('startRecording').classList.add('hidden');
            document.getElementById('activeControls').classList.remove('hidden');
            document.getElementById('previewSection').classList.add('hidden');
            document.getElementById('aiFeedback').classList.add('hidden');

        } catch (error) {
            console.error('Error accessing microphone:', error);
            alert('Could not access microphone. Please ensure microphone permissions are granted.');
        }
    });

    document.getElementById('stopRecording').addEventListener('click', () => {
        if (mediaRecorder && mediaRecorder.state === 'recording') {
            mediaRecorder.stop();
            clearInterval(timerInterval);
            
            if (audioStream) {
                audioStream.getTracks().forEach(track => track.stop());
            }
            
            if (audioContext) {
                audioContext.close();
            }
            
            if (animationFrame) {
                cancelAnimationFrame(animationFrame);
            }
        }
    });

    document.getElementById('retryRecording').addEventListener('click', () => {
        document.getElementById('previewSection').classList.add('hidden');
        document.getElementById('startRecording').classList.remove('hidden');
        document.getElementById('timer').textContent = '00:00';
        audioChunks = [];
    });

    document.getElementById('submitRecording').addEventListener('click', async function() {
        const submitButton = document.getElementById('submitRecording');
        const errorDisplay = document.getElementById('errorDisplay');
        const aiProcessingOverlay = document.getElementById('aiProcessingOverlay');
        const processingStatus = document.getElementById('processingStatus');
        
        submitButton.disabled = true;
        
        // Show AI processing animation instead of just a spinner on the button
        aiProcessingOverlay.classList.remove('hidden');
        
        // Change status messages during processing
        const statusMessages = [
            "Analyzing pronunciation and fluency...",
            "Evaluating grammar structures...",
            "Checking content relevance...",
            "Calculating final scores...",
            "Preparing feedback..."
        ];
        
        let messageIndex = 0;
        const statusInterval = setInterval(() => {
            messageIndex = (messageIndex + 1) % statusMessages.length;
            processingStatus.textContent = statusMessages[messageIndex];
        }, 2000);

        try {
            if (!audioChunks.length) {
                throw new Error('No audio recording found');
            }

            const audioBlob = new Blob(audioChunks, { type: 'audio/webm' });
            console.log("Audio blob created:", audioBlob.size, "bytes");
            
            const formData = new FormData();
            formData.append('audio', audioBlob, 'recording.webm');
            formData.append('question_id', '{{ current_question.id }}');
            formData.append('csrf_token', '{{ csrf_token() }}');

            console.log('Submitting audio recording...');
            const response = await fetch(`/student/topic/{{ topic.id }}/speaking/submit`, {
                method: 'POST',
                body: formData
            });

            console.log('Response status:', response.status);
            const data = await response.json();
            console.log('Response data:', data);
            
            if (!response.ok) {
                throw new Error(data.error || 'Failed to submit recording');
            }

            errorDisplay.classList.add('hidden');
            
            // Hide the AI processing overlay when done
            aiProcessingOverlay.classList.add('hidden');
            clearInterval(statusInterval);
            
            // Show the results
            showAIFeedback(data);

        } catch (error) {
            console.error('Submission error:', error);
            
            // Hide the AI processing overlay
            aiProcessingOverlay.classList.add('hidden');
            clearInterval(statusInterval);
            
            // Show error message
            let errorMessage = error.message;
            if (error.message.includes('API key') || 
                (typeof data === 'object' && data.error && data.error.includes('API key'))) {
                errorMessage = 'There was an issue with the AI assessment service. Please contact your administrator.';
            }
            
            errorDisplay.innerHTML = `
                <div>
                    <i class="fas fa-exclamation-triangle"></i>
                    <span class="ml-2">${errorMessage}</span>
                </div>
            `;
            errorDisplay.classList.remove('hidden');
        } finally {
            submitButton.disabled = false;
        }
    });

    function showAIFeedback(result) {
        const feedbackSection = document.getElementById('aiFeedback');
        feedbackSection.classList.remove('hidden');
        
        console.log("Assessment result:", result);
        
        // Update main scores
        document.getElementById('overallScore').textContent = `${result.scores.overall}%`;
        document.getElementById('pronunciationScore').textContent = `${result.scores.pronunciation}%`;
        document.getElementById('fluencyScore').textContent = `${result.scores.fluency}%`;
        
        // Update additional scores for both mobile and desktop
        const grammarScore = result.scores.grammar || 0;
        const relevanceScore = result.scores.relevance || 0;
        
        // Mobile scores
        const grammarScoreEl = document.getElementById('grammarScore');
        const relevanceScoreEl = document.getElementById('relevanceScore');
        if (grammarScoreEl) grammarScoreEl.textContent = `${grammarScore}%`;
        if (relevanceScoreEl) relevanceScoreEl.textContent = `${relevanceScore}%`;
        
        // Desktop scores
        const grammarScoreDesktopEl = document.getElementById('grammarScoreDesktop');
        const relevanceScoreDesktopEl = document.getElementById('relevanceScoreDesktop');
        if (grammarScoreDesktopEl) grammarScoreDesktopEl.textContent = `${grammarScore}%`;
        if (relevanceScoreDesktopEl) relevanceScoreDesktopEl.textContent = `${relevanceScore}%`;
        
        let feedbackMessage = '';
        let detailedFeedback = '';
        
        if (typeof result.feedback === 'object' && result.feedback !== null) {
            feedbackMessage = result.feedback.general || JSON.stringify(result.feedback);
            
            if (result.feedback.pronunciation) {
                detailedFeedback += `
                <div class="feedback-item mb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="w-10 h-10 rounded-full bg-info/20 flex items-center justify-center">
                            <i class="fas fa-spell-check text-info text-lg"></i>
                        </div>
                        <h5 class="font-medium text-lg">Pronunciation</h5>
                    </div>
                    <p class="pl-12 text-base-content/80">${result.feedback.pronunciation}</p>
                </div>`;
            }
            if (result.feedback.fluency) {
                detailedFeedback += `
                <div class="feedback-item mb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="w-10 h-10 rounded-full bg-success/20 flex items-center justify-center">
                            <i class="fas fa-wind text-success text-lg"></i>
                        </div>
                        <h5 class="font-medium text-lg">Fluency</h5>
                    </div>
                    <p class="pl-12 text-base-content/80">${result.feedback.fluency}</p>
                </div>`;
            }
            if (result.feedback.grammar) {
                detailedFeedback += `
                <div class="feedback-item mb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="w-10 h-10 rounded-full bg-warning/20 flex items-center justify-center">
                            <i class="fas fa-language text-warning text-lg"></i>
                        </div>
                        <h5 class="font-medium text-lg">Grammar</h5>
                    </div>
                    <p class="pl-12 text-base-content/80">${result.feedback.grammar}</p>
                </div>`;
            }
            if (result.feedback.relevance) {
                detailedFeedback += `
                <div class="feedback-item mb-3 sm:mb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-primary/20 flex items-center justify-center">
                            <i class="fas fa-bullseye text-primary text-sm sm:text-lg"></i>
                        </div>
                        <h5 class="font-medium text-sm sm:text-lg">Relevance</h5>
                    </div>
                    <p class="pl-10 sm:pl-12 text-sm sm:text-base text-base-content/80">${result.feedback.relevance}</p>
                </div>`;
            }
            if (result.feedback.specific && Array.isArray(result.feedback.specific)) {
                detailedFeedback += `
                <div class="feedback-item mb-3 sm:mb-4">
                    <div class="flex items-center gap-2 mb-2">
                        <div class="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-secondary/20 flex items-center justify-center">
                            <i class="fas fa-clipboard-list text-secondary text-sm sm:text-lg"></i>
                        </div>
                        <h5 class="font-medium text-sm sm:text-lg">Specific Feedback</h5>
                    </div>
                    <ul class="list-disc pl-10 sm:pl-16 mt-1 space-y-1 text-sm sm:text-base text-base-content/80">`;
                result.feedback.specific.forEach(item => {
                    detailedFeedback += `<li>${item}</li>`;
                });
                detailedFeedback += `</ul></div>`;
            }
        } else if (typeof result.feedback === 'string') {
            feedbackMessage = result.feedback;
        } else {
            feedbackMessage = "No detailed feedback available";
        }
        
        const transcription = result.transcription || "No transcription available";
        
        const feedbackTextElement = document.getElementById('feedbackText');
        feedbackTextElement.innerHTML = `
            <div class="card-body px-2 sm:px-6">
                <!-- Main feedback card with gradient background -->
                <div class="rounded-xl bg-gradient-to-br from-secondary/10 to-primary/10 p-3 sm:p-6 mb-4 sm:mb-6 border border-secondary/20 shadow-inner">
                    <div class="flex items-center gap-2 sm:gap-3 mb-3 sm:mb-4">
                        <div class="w-8 h-8 sm:w-12 sm:h-12 rounded-full bg-gradient-to-r from-secondary to-primary flex items-center justify-center shadow-md">
                            <i class="fas fa-comment-alt text-white text-sm sm:text-xl"></i>
                        </div>
                        <div>
                            <h3 class="font-bold text-lg sm:text-xl bg-gradient-to-r from-secondary to-primary bg-clip-text text-transparent">Feedback</h3>
                            <p class="text-xs text-base-content/60">AI-generated assessment</p>
                        </div>
                    </div>
                    <div class="relative pl-2 sm:pl-4 border-l-2 sm:border-l-4 border-secondary/50">
                        <i class="fas fa-quote-left text-secondary/30 absolute top-0 left-2 sm:left-4 text-sm sm:text-xl"></i>
                        <p class="py-2 pl-4 sm:pl-6 pr-2 text-sm sm:text-lg italic font-medium">${feedbackMessage}</p>
                        <i class="fas fa-quote-right text-secondary/30 absolute bottom-0 right-0 text-sm sm:text-xl"></i>
                    </div>
                </div>
                
                <!-- Detailed analysis card -->
                ${detailedFeedback ? `
                <div class="bg-base-200 rounded-xl p-3 sm:p-5 mb-4 sm:mb-6 shadow-sm border border-base-300 relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-16 h-16 sm:w-32 sm:h-32 bg-gradient-to-bl from-secondary/5 to-transparent rounded-bl-full"></div>
                    <h4 class="font-bold text-base sm:text-lg mb-4 sm:mb-6 flex items-center">
                        <span class="w-6 h-6 sm:w-8 sm:h-8 rounded-lg bg-secondary/10 flex items-center justify-center mr-2 sm:mr-3">
                            <i class="fas fa-chart-bar text-secondary text-xs sm:text-base"></i>
                        </span>
                        <span class="text-sm sm:text-lg">Detailed Analysis</span>
                    </h4>
                    <div class="space-y-3 sm:space-y-6 relative z-10 text-sm sm:text-base">
                        ${detailedFeedback}
                    </div>
                </div>
                ` : ''}
                
                <!-- Transcription card -->
                <div class="bg-base-200 rounded-xl p-3 sm:p-5 border border-base-300 shadow-sm relative overflow-hidden">
                    <div class="absolute top-0 right-0 w-12 h-12 sm:w-20 sm:h-20 bg-gradient-to-bl from-primary/5 to-transparent rounded-bl-full"></div>
                    <h4 class="font-bold text-base sm:text-lg mb-3 sm:mb-4 flex items-center">
                        <span class="w-6 h-6 sm:w-8 sm:h-8 rounded-lg bg-primary/10 flex items-center justify-center mr-2 sm:mr-3">
                            <i class="fas fa-file-alt text-primary text-xs sm:text-base"></i>
                        </span>
                        <span class="text-sm sm:text-lg">Transcription</span>
                    </h4>
                    <div class="bg-base-100/70 p-3 sm:p-4 rounded-lg shadow-inner border border-base-300 relative z-10">
                        <i class="fas fa-quote-left text-primary/20 absolute top-1 sm:top-2 left-1 sm:left-2 text-xs sm:text-sm"></i>
                        <p class="italic px-3 sm:px-4 py-2 text-sm sm:text-base">${transcription}</p>
                        <i class="fas fa-quote-right text-primary/20 absolute bottom-1 sm:bottom-2 right-1 sm:right-2 text-xs sm:text-sm"></i>
                    </div>
                </div>
            </div>
        `;

        document.getElementById('previewSection').classList.add('hidden');
        
        const navigationControls = document.getElementById('navigationControls');
        navigationControls.innerHTML = '';
        
        const currentCompletedCount = parseInt("{{ completed_count }}") + 1;
        const requiredQuestionCount = 2;
        const overallScore = result.finalScore || result.scores.overall;
        const passingScore = 70;
        const isBelowThreshold = result.belowThreshold === true;
        
        if ((currentCompletedCount >= requiredQuestionCount || result.speakingCompleted) && !isBelowThreshold) {
            const completionMsg = document.createElement('div');
            completionMsg.className = 'alert alert-success mb-4 w-full';
            completionMsg.innerHTML = `
                <div>
                    <i class="fas fa-check-circle text-lg mr-2"></i>
                    <span class="font-medium">Congratulations! You've completed the speaking questions.</span>
                    <p class="mt-1">Your overall score is ${overallScore}%.</p>
                </div>
            `;
            navigationControls.before(completionMsg);
            
            if (overallScore >= passingScore) {
                const comprehensionButton = document.createElement('a');
                comprehensionButton.href = `/student/topic/{{ topic.id }}/comprehension`;
                comprehensionButton.className = 'btn btn-primary flex-1 gap-2 text-sm sm:text-base px-4 py-3 sm:px-6 sm:py-4';
                comprehensionButton.innerHTML = '<i class="fas fa-book-open text-sm sm:text-base"></i> <span class="hidden sm:inline">Continue to </span>Comprehension';
                navigationControls.appendChild(comprehensionButton);
            }
            
            const refreshButton = document.createElement('button');
            refreshButton.className = 'btn flex-1 gap-2 text-sm sm:text-base px-4 py-3 sm:px-6 sm:py-4';
            refreshButton.innerHTML = '<i class="fas fa-sync-alt text-sm sm:text-base"></i> <span class="hidden sm:inline">Refresh </span>Page';
            refreshButton.onclick = function() {
                window.location.reload(true);
            };
            
            navigationControls.appendChild(refreshButton);
            
            feedbackSection.scrollIntoView({ behavior: 'smooth' });
            
            setTimeout(() => {
                if (overallScore >= passingScore) {
                    alert("You've completed the required speaking questions! You can now proceed to the comprehension stage.");
                }
            }, 1000);
        }
        else if ((currentCompletedCount >= requiredQuestionCount || isBelowThreshold)) {
            const lowScoreMsg = document.createElement('div');
            lowScoreMsg.className = 'alert alert-warning mb-4 w-full';
            lowScoreMsg.innerHTML = `
                <div>
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    <span>You've answered the required questions, but your score (${overallScore}%) is below the minimum 70% needed to proceed.</span>
                </div>
            `;
            navigationControls.before(lowScoreMsg);
            
            const tryAgainButton = document.createElement('a');
            tryAgainButton.href = `/student/topic/{{ topic.id }}/speaking/reset`;
            tryAgainButton.className = 'btn btn-warning flex-1 gap-2 px-3 py-2 text-sm';
            tryAgainButton.innerHTML = '<i class="fas fa-redo"></i> <span class="hidden sm:inline">Try Again</span><span class="sm:hidden">Retry</span>';
            
            const refreshButton = document.createElement('button');
            refreshButton.className = 'btn flex-1 gap-2 px-3 py-2 text-sm';
            refreshButton.innerHTML = '<i class="fas fa-sync-alt"></i> <span class="hidden sm:inline">Refresh Page</span><span class="sm:hidden">Refresh</span>';
            refreshButton.onclick = function() {
                window.location.reload(true);
            };
            
            navigationControls.appendChild(tryAgainButton);
            navigationControls.appendChild(refreshButton);
            
            feedbackSection.scrollIntoView({ behavior: 'smooth' });
            
            setTimeout(() => {
                alert("You need a score of at least 70% to proceed to the comprehension stage. Please try again.");
            }, 1000);
        }
        else if (result.hasNextQuestion) {
            const nextButton = document.createElement('button');
            nextButton.className = 'btn btn-primary flex-1 gap-2 px-3 py-2 text-sm';
            nextButton.innerHTML = '<i class="fas fa-arrow-right"></i> <span class="hidden sm:inline">Next Question</span><span class="sm:hidden">Next</span>';
            
            if (result.nextQuestionId) {
                const topicId = window.location.pathname.split('/')[3];
                nextButton.onclick = function() {
                    console.log(`Navigating to next question: ${result.nextQuestionId}`);
                    window.location.href = `/student/topic/${topicId}/speaking?question=${result.nextQuestionId}`;
                };
            } else {
                nextButton.onclick = function() {
                    console.log('No next question ID provided, reloading page');
                    window.location.reload(true);
                };
            }
            
            navigationControls.appendChild(nextButton);
            
            feedbackSection.scrollIntoView({ behavior: 'smooth' });
        }
    }

    // Make sure the visualizer canvas gets resized if the window size changes
    window.addEventListener('resize', function() {
        const canvas = document.getElementById('audioVisualizer');
        if (canvas) {
            canvas.width = canvas.parentNode.clientWidth;
            canvas.height = canvas.parentNode.clientHeight;
        }
    });
</script>
{% endblock %}