/**
 * AudioModule - Listening comprehension exercises with AI validation
 * Handles audio passages with listening questions and pronunciation practice
 */

import DRSExerciseInterface from '../interfaces/DRSExerciseInterface.js';

class AudioModule extends DRSExerciseInterface {
    constructor(orchestrator, llmValidator, prerequisiteEngine, contextMemory) {
        super('AudioModule');

        // Validate dependencies
        if (!orchestrator || !llmValidator || !prerequisiteEngine || !contextMemory) {
            throw new Error('AudioModule requires all service dependencies');
        }

        this.orchestrator = orchestrator;
        this.llmValidator = llmValidator;
        this.prerequisiteEngine = prerequisiteEngine;
        this.contextMemory = contextMemory;

        // Module state
        this.initialized = false;
        this.container = null;
        this.currentExerciseData = null;
        this.currentAudio = null;
        this.currentQuestion = null;
        this.questionIndex = 0;
        this.questionResults = [];
        this.validationInProgress = false;
        this.lastValidationResult = null;
        this.aiAvailable = false;
        this.audioElement = null;
        this.audioProgress = 0;
        this.playCount = 0;

        // Configuration
        this.config = {
            requiredProvider: 'openai', // Prefer OpenAI for audio analysis
            model: 'gpt-4o-mini',
            temperature: 0.2,
            maxTokens: 800,
            timeout: 45000, // Longer timeout for complex audio analysis
            questionsPerAudio: 3, // Default number of questions per audio
            maxPlaybacks: 5, // Maximum playbacks before penalty
            showTranscriptAfter: 3, // Show transcript after N playbacks
            allowReplay: true // Allow replaying the audio
        };

        // Languages configuration
        this.languages = {
            userLanguage: 'English',
            targetLanguage: 'French'
        };

        // Bind methods
        this._handleUserInput = this._handleUserInput.bind(this);
        this._handleNextQuestion = this._handleNextQuestion.bind(this);
        this._handleRetry = this._handleRetry.bind(this);
        this._handlePlayAudio = this._handlePlayAudio.bind(this);
        this._handleAudioProgress = this._handleAudioProgress.bind(this);
        this._handleAudioEnded = this._handleAudioEnded.bind(this);
    }

    async init() {
        if (this.initialized) return;

        console.log('🎧 Initializing AudioModule...');

        // Test AI connectivity - recommended for audio comprehension
        try {
            const testResult = await this.llmValidator.testConnectivity();
            if (testResult.success) {
                console.log(`✅ AI connectivity verified for audio analysis (providers: ${testResult.availableProviders?.join(', ') || testResult.provider})`);
                this.aiAvailable = true;
            } else {
                console.warn('⚠️ AI connection failed - audio comprehension will be limited:', testResult.error);
                this.aiAvailable = false;
            }
        } catch (error) {
            console.warn('⚠️ AI connectivity test failed - using basic audio analysis:', error.message);
            this.aiAvailable = false;
        }

        this.initialized = true;
        console.log(`✅ AudioModule initialized (AI: ${this.aiAvailable ? 'available for deep analysis' : 'limited - basic analysis only'})`);
    }

    /**
     * Check if module can run with current prerequisites
     * @param {Array} prerequisites - List of learned vocabulary/concepts
     * @param {Object} chapterContent - Full chapter content
     * @returns {boolean} - True if module can run
     */
    canRun(prerequisites, chapterContent) {
        // Check if there are audio files and if prerequisites allow them
        const audios = chapterContent?.audios || [];
        if (audios.length === 0) return false;

        // Find audio files that can be unlocked with current prerequisites
        const availableAudios = audios.filter(audio => {
            const unlockStatus = this.prerequisiteEngine.canUnlock('audio', audio);
            return unlockStatus.canUnlock;
        });

        return availableAudios.length > 0;
    }

    /**
     * Present exercise UI and content
     * @param {HTMLElement} container - DOM container to render into
     * @param {Object} exerciseData - Specific exercise data to present
     * @returns {Promise<void>}
     */
    async present(container, exerciseData) {
        if (!this.initialized) {
            throw new Error('AudioModule must be initialized before use');
        }

        this.container = container;
        this.currentExerciseData = exerciseData;
        this.currentAudio = exerciseData.audio;
        this.questionIndex = 0;
        this.questionResults = [];
        this.validationInProgress = false;
        this.lastValidationResult = null;
        this.audioProgress = 0;
        this.playCount = 0;

        // Detect languages from chapter content
        this._detectLanguages(exerciseData);

        // Generate or extract questions
        this.questions = await this._prepareQuestions(this.currentAudio);

        console.log(`🎧 Presenting audio comprehension: "${this.currentAudio.title || 'Listening Exercise'}" (${this.questions.length} questions)`);

        // Render initial UI
        await this._renderAudioExercise();

        // Start with audio listening phase
        this._showAudioListening();
    }

    /**
     * Validate user input with AI for deep audio comprehension
     * @param {string} userInput - User's response
     * @param {Object} context - Exercise context
     * @returns {Promise<ValidationResult>} - Validation result with score and feedback
     */
    async validate(userInput, context) {
        if (!userInput || !userInput.trim()) {
            throw new Error('Please provide an answer');
        }

        if (!this.currentAudio || !this.currentQuestion) {
            throw new Error('No audio or question loaded for validation');
        }

        console.log(`🎧 Validating audio comprehension answer for question ${this.questionIndex + 1}`);

        // Build comprehensive prompt for audio comprehension
        const prompt = this._buildAudioComprehensionPrompt(userInput);

        try {
            // Use AI validation with structured response
            const aiResponse = await this.llmValidator.iaEngine.validateEducationalContent(prompt, {
                preferredProvider: this.config.requiredProvider,
                temperature: this.config.temperature,
                maxTokens: this.config.maxTokens,
                timeout: this.config.timeout,
                systemPrompt: `You are an expert listening comprehension evaluator. Focus on understanding audio content and critical listening skills. ALWAYS respond in the exact format: [answer]yes/no [explanation]your detailed analysis here`
            });

            // Parse structured response
            const parsedResult = this._parseStructuredResponse(aiResponse);

            // Apply playback penalty if too many replays
            if (this.playCount > this.config.maxPlaybacks) {
                parsedResult.score = Math.max(parsedResult.score - 10, 40);
                parsedResult.feedback += ` (Note: Score reduced due to excessive playbacks - practice active listening on first attempts)`;
            }

            // Record interaction in context memory
            this.contextMemory.recordInteraction({
                type: 'audio',
                subtype: 'comprehension',
                content: {
                    audio: this.currentAudio,
                    question: this.currentQuestion,
                    audioTitle: this.currentAudio.title || 'Listening Exercise',
                    audioDuration: this.currentAudio.duration || 0,
                    playCount: this.playCount
                },
                userResponse: userInput.trim(),
                validation: parsedResult,
                context: {
                    languages: this.languages,
                    questionIndex: this.questionIndex,
                    totalQuestions: this.questions.length,
                    playbacks: this.playCount
                }
            });

            return parsedResult;

        } catch (error) {
            console.error('❌ AI audio comprehension validation failed:', error);

            // Fallback to basic keyword analysis if AI fails
            if (!this.aiAvailable) {
                return this._performBasicAudioValidation(userInput);
            }

            throw new Error(`Audio comprehension validation failed: ${error.message}. Please check your answer and try again.`);
        }
    }

    /**
     * Get current progress data
     * @returns {ProgressData} - Progress information for this module
     */
    getProgress() {
        const totalQuestions = this.questions ? this.questions.length : 0;
        const completedQuestions = this.questionResults.length;
        const correctAnswers = this.questionResults.filter(result => result.correct).length;

        return {
            type: 'audio',
            audioTitle: this.currentAudio?.title || 'Listening Exercise',
            totalQuestions,
            completedQuestions,
            correctAnswers,
            currentQuestionIndex: this.questionIndex,
            questionResults: this.questionResults,
            progressPercentage: totalQuestions > 0 ? Math.round((completedQuestions / totalQuestions) * 100) : 0,
            comprehensionRate: completedQuestions > 0 ? Math.round((correctAnswers / completedQuestions) * 100) : 0,
            playbackCount: this.playCount,
            aiAnalysisAvailable: this.aiAvailable
        };
    }

    /**
     * Clean up and prepare for unloading
     */
    cleanup() {
        console.log('🧹 Cleaning up AudioModule...');

        // Stop audio playback
        if (this.audioElement) {
            this.audioElement.pause();
            this.audioElement.currentTime = 0;
        }

        // Remove event listeners
        if (this.container) {
            this.container.innerHTML = '';
        }

        // Reset state
        this.container = null;
        this.currentExerciseData = null;
        this.currentAudio = null;
        this.currentQuestion = null;
        this.questionIndex = 0;
        this.questionResults = [];
        this.questions = null;
        this.validationInProgress = false;
        this.lastValidationResult = null;
        this.audioElement = null;
        this.audioProgress = 0;
        this.playCount = 0;

        console.log('✅ AudioModule cleaned up');
    }

    /**
     * Get module metadata
     * @returns {Object} - Module information
     */
    getMetadata() {
        return {
            name: 'AudioModule',
            type: 'audio',
            version: '1.0.0',
            description: 'Listening comprehension exercises with AI-powered audio analysis',
            capabilities: ['audio_comprehension', 'active_listening', 'pronunciation_feedback', 'ai_feedback'],
            aiRequired: false, // Can work without AI but limited
            config: this.config
        };
    }

    // Private Methods

    /**
     * Detect languages from exercise data
     * @private
     */
    _detectLanguages(exerciseData) {
        const chapterContent = this.currentExerciseData?.chapterContent;

        if (chapterContent?.metadata?.userLanguage) {
            this.languages.userLanguage = chapterContent.metadata.userLanguage;
        }

        if (chapterContent?.metadata?.targetLanguage) {
            this.languages.targetLanguage = chapterContent.metadata.targetLanguage;
        }

        console.log(`🌍 Audio languages detected: ${this.languages.userLanguage} -> ${this.languages.targetLanguage}`);
    }

    /**
     * Prepare questions for the audio
     * @private
     */
    async _prepareQuestions(audio) {
        // If audio already has questions, use them
        if (audio.questions && audio.questions.length > 0) {
            return audio.questions.map((q, index) => ({
                id: `q${index + 1}`,
                question: q.question || q.text || q,
                type: q.type || 'open',
                expectedAnswer: q.answer || q.expectedAnswer,
                keywords: q.keywords || [],
                difficulty: q.difficulty || 'medium',
                requiresTranscript: q.requiresTranscript || false
            }));
        }

        // Generate default listening comprehension questions
        const defaultQuestions = [
            {
                id: 'main_content',
                question: `What is the main topic or content of this audio?`,
                type: 'open',
                keywords: ['main', 'topic', 'about', 'content'],
                difficulty: 'medium',
                requiresTranscript: false
            },
            {
                id: 'specific_details',
                question: `What specific details or information did you hear?`,
                type: 'open',
                keywords: ['details', 'specific', 'information', 'mentioned'],
                difficulty: 'easy',
                requiresTranscript: false
            },
            {
                id: 'comprehension',
                question: `What can you understand or infer from the speaker's tone and context?`,
                type: 'open',
                keywords: ['tone', 'context', 'infer', 'understand', 'meaning'],
                difficulty: 'hard',
                requiresTranscript: false
            }
        ];

        // Limit to configured number of questions
        return defaultQuestions.slice(0, this.config.questionsPerAudio);
    }

    /**
     * Build comprehensive prompt for audio comprehension validation
     * @private
     */
    _buildAudioComprehensionPrompt(userAnswer) {
        const audioTitle = this.currentAudio.title || 'Listening Exercise';
        const audioTranscript = this.currentAudio.transcript || '';
        const audioDuration = this.currentAudio.duration || 'Unknown';

        return `You are evaluating listening comprehension for a language learning exercise.

CRITICAL: You MUST respond in this EXACT format: [answer]yes/no [explanation]your detailed analysis here

AUDIO CONTENT:
Title: "${audioTitle}"
Duration: ${audioDuration}
${audioTranscript ? `Transcript: "${audioTranscript}"` : 'Transcript: Not available'}

QUESTION: ${this.currentQuestion.question}

STUDENT RESPONSE: "${userAnswer}"

EVALUATION CONTEXT:
- Exercise Type: Listening comprehension
- Languages: ${this.languages.userLanguage} -> ${this.languages.targetLanguage}
- Question Type: ${this.currentQuestion.type}
- Question Difficulty: ${this.currentQuestion.difficulty}
- Question ${this.questionIndex + 1} of ${this.questions.length}
- Audio Playbacks: ${this.playCount}

EVALUATION CRITERIA:
- [answer]yes if the student demonstrates understanding of the audio content in relation to the question
- [answer]no if the response shows lack of comprehension or is unrelated to the audio
- Focus on LISTENING COMPREHENSION and UNDERSTANDING, not perfect language
- Accept different interpretations if they show understanding of the audio
- Consider that students may hear different details or focus on different aspects
- Reward active listening and attention to audio-specific elements (tone, emphasis, pronunciation)

[explanation] should provide:
1. What the student understood correctly from the audio
2. What they might have missed or misunderstood
3. Encouragement and specific improvement suggestions for listening skills
4. Connection to broader audio meaning and context
5. Tips for better listening comprehension

Format: [answer]yes/no [explanation]your comprehensive educational feedback here`;
    }

    /**
     * Parse structured AI response for audio comprehension
     * @private
     */
    _parseStructuredResponse(aiResponse) {
        try {
            let responseText = '';

            // Extract text from AI response
            if (typeof aiResponse === 'string') {
                responseText = aiResponse;
            } else if (aiResponse.content) {
                responseText = aiResponse.content;
            } else if (aiResponse.text) {
                responseText = aiResponse.text;
            } else {
                responseText = JSON.stringify(aiResponse);
            }

            console.log('🔍 Parsing AI audio comprehension response:', responseText.substring(0, 150) + '...');

            // Extract [answer] - case insensitive
            const answerMatch = responseText.match(/\[answer\](yes|no)/i);
            if (!answerMatch) {
                throw new Error('AI response missing [answer] format');
            }

            // Extract [explanation] - multiline support
            const explanationMatch = responseText.match(/\[explanation\](.+)/s);
            if (!explanationMatch) {
                throw new Error('AI response missing [explanation] format');
            }

            const isCorrect = answerMatch[1].toLowerCase() === 'yes';
            const explanation = explanationMatch[1].trim();

            // Higher scores for audio comprehension to encourage listening
            const result = {
                score: isCorrect ? 85 : 55, // Slightly lower than text due to listening difficulty
                correct: isCorrect,
                feedback: explanation,
                answer: answerMatch[1].toLowerCase(),
                explanation: explanation,
                timestamp: new Date().toISOString(),
                provider: this.config.requiredProvider,
                model: this.config.model,
                cached: false,
                formatValid: true,
                audioComprehension: true
            };

            console.log(`✅ AI audio comprehension parsed: ${result.answer} - Score: ${result.score}`);
            return result;

        } catch (error) {
            console.error('❌ Failed to parse AI audio comprehension response:', error);
            console.error('Raw response:', aiResponse);

            throw new Error(`AI response format invalid: ${error.message}`);
        }
    }

    /**
     * Perform basic audio validation when AI is unavailable
     * @private
     */
    _performBasicAudioValidation(userAnswer) {
        console.log('🔍 Performing basic audio validation (AI unavailable)');

        const answerLength = userAnswer.trim().length;
        const hasKeywords = this.currentQuestion.keywords?.some(keyword =>
            userAnswer.toLowerCase().includes(keyword.toLowerCase())
        );

        // Basic scoring based on answer length and keyword presence
        let score = 35; // Lower base score for audio (harder without AI)

        if (answerLength > 15) score += 15; // Substantial answer
        if (answerLength > 40) score += 10; // Detailed answer
        if (hasKeywords) score += 20; // Contains relevant keywords
        if (answerLength > 80) score += 10; // Very detailed
        if (this.playCount <= 2) score += 10; // Bonus for fewer playbacks

        const isCorrect = score >= 65;

        return {
            score: Math.min(score, 100),
            correct: isCorrect,
            feedback: isCorrect
                ? "Good listening comprehension demonstrated! Your answer shows understanding of the audio content."
                : "Your answer could be more detailed. Try to listen for specific information and include more details from what you heard.",
            timestamp: new Date().toISOString(),
            provider: 'basic_audio_analysis',
            model: 'keyword_length_analysis',
            cached: false,
            mockGenerated: true,
            audioComprehension: true
        };
    }

    /**
     * Render the audio exercise interface
     * @private
     */
    async _renderAudioExercise() {
        if (!this.container || !this.currentAudio) return;

        const audioTitle = this.currentAudio.title || 'Listening Exercise';
        const audioDuration = this.currentAudio.duration ? `${this.currentAudio.duration}s` : 'Unknown';
        const audioUrl = this.currentAudio.url || this.currentAudio.src || '';

        this.container.innerHTML = `
            <div class="audio-exercise">
                <div class="exercise-header">
                    <h2>🎧 Listening Comprehension</h2>
                    <div class="audio-info">
                        <span class="audio-meta">
                            ${this.questions?.length || 0} questions • ${audioDuration}
                            ${!this.aiAvailable ? ' • ⚠️ Limited analysis mode' : ' • 🧠 AI analysis'}
                        </span>
                    </div>
                </div>

                <div class="audio-content">
                    <div class="audio-player-section" id="audio-player-section">
                        <div class="audio-player-card">
                            <div class="player-header">
                                <h3>${audioTitle}</h3>
                                <div class="player-stats">
                                    <span class="play-count">Plays: <span id="play-counter">0</span></span>
                                    <span class="duration">Duration: ${audioDuration}</span>
                                </div>
                            </div>

                            <div class="audio-player" id="audio-player">
                                ${audioUrl ? `
                                    <audio id="audio-element" preload="metadata">
                                        <source src="${audioUrl}" type="audio/mpeg">
                                        <source src="${audioUrl}" type="audio/wav">
                                        <source src="${audioUrl}" type="audio/ogg">
                                        Your browser does not support the audio element.
                                    </audio>
                                ` : `
                                    <div class="audio-placeholder">
                                        🎵 Audio file placeholder (${audioTitle})
                                    </div>
                                `}

                                <div class="player-controls">
                                    <button id="play-audio-btn" class="btn btn-primary play-btn" ${!audioUrl ? 'disabled' : ''}>
                                        <span class="btn-icon" id="play-icon">▶️</span>
                                        <span class="btn-text" id="play-text">Play Audio</span>
                                    </button>

                                    <div class="progress-container">
                                        <div class="progress-bar">
                                            <div class="progress-fill" id="audio-progress" style="width: 0%"></div>
                                        </div>
                                        <div class="time-display">
                                            <span id="current-time">0:00</span> / <span id="total-time">${audioDuration}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="transcript-section" id="transcript-section" style="display: none;">
                                <div class="transcript-header">
                                    <h4>📄 Transcript</h4>
                                    <span class="transcript-note">Available after ${this.config.showTranscriptAfter} plays</span>
                                </div>
                                <div class="transcript-content" id="transcript-content">
                                    ${this.currentAudio.transcript || 'Transcript not available for this audio.'}
                                </div>
                            </div>

                            <div class="listening-actions">
                                <button id="start-questions-btn" class="btn btn-success" style="display: none;">
                                    <span class="btn-icon">❓</span>
                                    <span class="btn-text">Start Questions</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="questions-section" id="questions-section" style="display: none;">
                        <div class="question-card">
                            <div class="question-progress">
                                <div class="progress-indicator">
                                    <span id="question-counter">Question 1 of ${this.questions?.length || 0}</span>
                                    <div class="progress-bar">
                                        <div class="progress-fill" id="progress-fill" style="width: 0%"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="question-content" id="question-content">
                                <!-- Question content will be populated dynamically -->
                            </div>

                            <div class="answer-input-section">
                                <label for="answer-input">Your Answer:</label>
                                <textarea
                                    id="answer-input"
                                    placeholder="Write what you heard and understood from the audio..."
                                    rows="4"
                                    autocomplete="off"
                                ></textarea>
                            </div>

                            <div class="question-controls">
                                <button id="replay-audio-btn" class="btn btn-outline">
                                    <span class="btn-icon">🔄</span>
                                    <span class="btn-text">Replay Audio</span>
                                </button>
                                <button id="validate-answer-btn" class="btn btn-primary" disabled>
                                    <span class="btn-icon">${this.aiAvailable ? '🧠' : '🔍'}</span>
                                    <span class="btn-text">${this.aiAvailable ? 'Validate with AI' : 'Validate Answer'}</span>
                                </button>
                                <div id="validation-status" class="validation-status"></div>
                            </div>
                        </div>
                    </div>

                    <div class="explanation-panel" id="explanation-panel" style="display: none;">
                        <div class="panel-header">
                            <h3>${this.aiAvailable ? '🤖 AI Analysis' : '🔍 Analysis'}</h3>
                            <span class="analysis-model">${this.aiAvailable ? this.config.model : 'Basic Analysis'}</span>
                        </div>
                        <div class="explanation-content" id="explanation-content">
                            <!-- Analysis will appear here -->
                        </div>
                        <div class="panel-actions">
                            <button id="next-question-btn" class="btn btn-primary" style="display: none;">
                                Next Question
                            </button>
                            <button id="retry-answer-btn" class="btn btn-secondary" style="display: none;">
                                Try Again
                            </button>
                            <button id="finish-audio-btn" class="btn btn-success" style="display: none;">
                                Complete Audio Exercise
                            </button>
                        </div>
                    </div>

                    <div class="audio-results" id="audio-results" style="display: none;">
                        <!-- Final results will be shown here -->
                    </div>
                </div>
            </div>
        `;

        // Add CSS styles
        this._addStyles();

        // Setup audio element
        this._setupAudioElement();

        // Add event listeners
        this._setupEventListeners();
    }

    /**
     * Setup audio element and controls
     * @private
     */
    _setupAudioElement() {
        this.audioElement = document.getElementById('audio-element');

        if (this.audioElement) {
            this.audioElement.addEventListener('loadedmetadata', () => {
                const totalTime = document.getElementById('total-time');
                if (totalTime && this.audioElement.duration) {
                    const minutes = Math.floor(this.audioElement.duration / 60);
                    const seconds = Math.floor(this.audioElement.duration % 60);
                    totalTime.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
                }
            });

            this.audioElement.addEventListener('timeupdate', this._handleAudioProgress);
            this.audioElement.addEventListener('ended', this._handleAudioEnded);
        }
    }

    /**
     * Setup event listeners for audio exercise
     * @private
     */
    _setupEventListeners() {
        const playAudioBtn = document.getElementById('play-audio-btn');
        const replayAudioBtn = document.getElementById('replay-audio-btn');
        const startQuestionsBtn = document.getElementById('start-questions-btn');
        const answerInput = document.getElementById('answer-input');
        const validateBtn = document.getElementById('validate-answer-btn');
        const retryBtn = document.getElementById('retry-answer-btn');
        const nextBtn = document.getElementById('next-question-btn');
        const finishBtn = document.getElementById('finish-audio-btn');

        // Audio control buttons
        if (playAudioBtn) {
            playAudioBtn.onclick = this._handlePlayAudio;
        }

        if (replayAudioBtn) {
            replayAudioBtn.onclick = this._handlePlayAudio;
        }

        // Start questions button
        if (startQuestionsBtn) {
            startQuestionsBtn.onclick = () => this._startQuestions();
        }

        // Answer input validation
        if (answerInput) {
            answerInput.addEventListener('input', () => {
                const hasText = answerInput.value.trim().length > 0;
                if (validateBtn) {
                    validateBtn.disabled = !hasText || this.validationInProgress;
                }
            });

            // Allow Ctrl+Enter to validate
            answerInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter' && (e.ctrlKey || e.metaKey) && !validateBtn.disabled) {
                    e.preventDefault();
                    this._handleUserInput();
                }
            });
        }

        // Validate button
        if (validateBtn) {
            validateBtn.onclick = this._handleUserInput;
        }

        // Action buttons
        if (retryBtn) retryBtn.onclick = this._handleRetry;
        if (nextBtn) nextBtn.onclick = this._handleNextQuestion;
        if (finishBtn) finishBtn.onclick = () => this._completeAudioExercise();
    }

    /**
     * Handle audio playback
     * @private
     */
    _handlePlayAudio() {
        if (!this.audioElement) {
            // For demo mode without actual audio
            this._simulateAudioPlayback();
            return;
        }

        const playBtn = document.getElementById('play-audio-btn');
        const replayBtn = document.getElementById('replay-audio-btn');
        const playIcon = document.getElementById('play-icon');
        const playText = document.getElementById('play-text');

        if (this.audioElement.paused) {
            this.audioElement.play();
            this.playCount++;

            // Update play counter
            const playCounter = document.getElementById('play-counter');
            if (playCounter) playCounter.textContent = this.playCount;

            // Update button states
            if (playIcon) playIcon.textContent = '⏸️';
            if (playText) playText.textContent = 'Pause';

            // Show transcript after enough plays
            if (this.playCount >= this.config.showTranscriptAfter) {
                const transcriptSection = document.getElementById('transcript-section');
                if (transcriptSection) transcriptSection.style.display = 'block';
            }

            // Show questions button after first play
            if (this.playCount === 1) {
                const startQuestionsBtn = document.getElementById('start-questions-btn');
                if (startQuestionsBtn) startQuestionsBtn.style.display = 'inline-block';
            }

        } else {
            this.audioElement.pause();

            if (playIcon) playIcon.textContent = '▶️';
            if (playText) playText.textContent = 'Resume';
        }
    }

    /**
     * Simulate audio playback for demo mode
     * @private
     */
    _simulateAudioPlayback() {
        this.playCount++;

        const playCounter = document.getElementById('play-counter');
        if (playCounter) playCounter.textContent = this.playCount;

        // Simulate progress
        let progress = 0;
        const progressFill = document.getElementById('audio-progress');
        const currentTime = document.getElementById('current-time');

        const interval = setInterval(() => {
            progress += 2;
            if (progressFill) progressFill.style.width = `${progress}%`;
            if (currentTime) {
                const seconds = Math.floor((progress / 100) * 30); // Assume 30s demo
                const minutes = Math.floor(seconds / 60);
                const remainingSeconds = seconds % 60;
                currentTime.textContent = `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
            }

            if (progress >= 100) {
                clearInterval(interval);
                this._handleAudioEnded();
            }
        }, 100);

        // Show transcript after enough plays
        if (this.playCount >= this.config.showTranscriptAfter) {
            const transcriptSection = document.getElementById('transcript-section');
            if (transcriptSection) transcriptSection.style.display = 'block';
        }

        // Show questions button after first play
        if (this.playCount === 1) {
            const startQuestionsBtn = document.getElementById('start-questions-btn');
            if (startQuestionsBtn) startQuestionsBtn.style.display = 'inline-block';
        }
    }

    /**
     * Handle audio progress updates
     * @private
     */
    _handleAudioProgress() {
        if (!this.audioElement) return;

        const progress = (this.audioElement.currentTime / this.audioElement.duration) * 100;
        const progressFill = document.getElementById('audio-progress');
        const currentTime = document.getElementById('current-time');

        if (progressFill) progressFill.style.width = `${progress}%`;

        if (currentTime && this.audioElement.currentTime) {
            const minutes = Math.floor(this.audioElement.currentTime / 60);
            const seconds = Math.floor(this.audioElement.currentTime % 60);
            currentTime.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
        }
    }

    /**
     * Handle audio playback end
     * @private
     */
    _handleAudioEnded() {
        const playIcon = document.getElementById('play-icon');
        const playText = document.getElementById('play-text');

        if (playIcon) playIcon.textContent = '▶️';
        if (playText) playText.textContent = 'Play Again';

        // Reset audio to beginning
        if (this.audioElement) {
            this.audioElement.currentTime = 0;
        }
    }

    /**
     * Show audio listening phase
     * @private
     */
    _showAudioListening() {
        const audioSection = document.getElementById('audio-player-section');
        const questionsSection = document.getElementById('questions-section');

        if (audioSection) audioSection.style.display = 'block';
        if (questionsSection) questionsSection.style.display = 'none';
    }

    /**
     * Start questions phase
     * @private
     */
    _startQuestions() {
        const audioSection = document.getElementById('audio-player-section');
        const questionsSection = document.getElementById('questions-section');

        // Keep audio player visible but smaller
        if (audioSection) {
            audioSection.style.display = 'block';
            audioSection.classList.add('minimized');
        }
        if (questionsSection) questionsSection.style.display = 'block';

        this._presentCurrentQuestion();
    }

    /**
     * Present current question
     * @private
     */
    _presentCurrentQuestion() {
        if (this.questionIndex >= this.questions.length) {
            this._showAudioResults();
            return;
        }

        this.currentQuestion = this.questions[this.questionIndex];
        const questionContent = document.getElementById('question-content');
        const questionCounter = document.getElementById('question-counter');
        const progressFill = document.getElementById('progress-fill');

        if (!questionContent || !this.currentQuestion) return;

        // Update progress
        const progressPercentage = ((this.questionIndex + 1) / this.questions.length) * 100;
        if (progressFill) progressFill.style.width = `${progressPercentage}%`;
        if (questionCounter) questionCounter.textContent = `Question ${this.questionIndex + 1} of ${this.questions.length}`;

        // Display question
        questionContent.innerHTML = `
            <div class="question-display">
                <div class="question-text">${this.currentQuestion.question}</div>
                <div class="question-meta">
                    <span class="question-type">${this.currentQuestion.type}</span>
                    <span class="question-difficulty difficulty-${this.currentQuestion.difficulty}">
                        ${this.currentQuestion.difficulty}
                    </span>
                    ${this.currentQuestion.requiresTranscript ? '<span class="requires-transcript">📄 Transcript helpful</span>' : ''}
                </div>
            </div>
        `;

        // Clear previous answer and focus
        const answerInput = document.getElementById('answer-input');
        if (answerInput) {
            answerInput.value = '';
            answerInput.focus();
        }

        // Hide explanation panel
        const explanationPanel = document.getElementById('explanation-panel');
        if (explanationPanel) explanationPanel.style.display = 'none';
    }

    /**
     * Handle user input validation
     * @private
     */
    async _handleUserInput() {
        const answerInput = document.getElementById('answer-input');
        const validateBtn = document.getElementById('validate-answer-btn');
        const statusDiv = document.getElementById('validation-status');

        if (!answerInput || !validateBtn || !statusDiv) return;

        const userAnswer = answerInput.value.trim();
        if (!userAnswer) return;

        try {
            // Set validation in progress
            this.validationInProgress = true;
            validateBtn.disabled = true;
            answerInput.disabled = true;

            // Show loading status
            statusDiv.innerHTML = `
                <div class="status-loading">
                    <div class="loading-spinner">🔍</div>
                    <span>${this.aiAvailable ? 'AI is analyzing your comprehension...' : 'Analyzing your answer...'}</span>
                </div>
            `;

            // Call validation
            const result = await this.validate(userAnswer, {});
            this.lastValidationResult = result;

            // Store result
            this.questionResults[this.questionIndex] = {
                question: this.currentQuestion.question,
                userAnswer: userAnswer,
                correct: result.correct,
                score: result.score,
                feedback: result.feedback,
                timestamp: new Date().toISOString(),
                playbackCount: this.playCount
            };

            // Show result
            this._showValidationResult(result);

            // Update status
            statusDiv.innerHTML = `
                <div class="status-complete">
                    <span class="result-icon">${result.correct ? '✅' : '👂'}</span>
                    <span>Analysis complete</span>
                </div>
            `;

        } catch (error) {
            console.error('❌ Audio validation error:', error);

            // Show error status
            statusDiv.innerHTML = `
                <div class="status-error">
                    <span class="error-icon">⚠️</span>
                    <span>Error: ${error.message}</span>
                </div>
            `;

            // Re-enable input for retry
            this._enableRetry();
        }
    }

    /**
     * Show validation result in explanation panel
     * @private
     */
    _showValidationResult(result) {
        const explanationPanel = document.getElementById('explanation-panel');
        const explanationContent = document.getElementById('explanation-content');
        const nextBtn = document.getElementById('next-question-btn');
        const retryBtn = document.getElementById('retry-answer-btn');
        const finishBtn = document.getElementById('finish-audio-btn');

        if (!explanationPanel || !explanationContent) return;

        // Show panel
        explanationPanel.style.display = 'block';

        // Set explanation content
        explanationContent.innerHTML = `
            <div class="explanation-result ${result.correct ? 'correct' : 'needs-improvement'}">
                <div class="result-header">
                    <span class="result-indicator">
                        ${result.correct ? '✅ Good Listening!' : '👂 Keep Practicing!'}
                    </span>
                    <span class="comprehension-score">Score: ${result.score}/100</span>
                </div>
                <div class="explanation-text">${result.explanation || result.feedback}</div>
                ${result.audioComprehension ? '<div class="analysis-note">🎧 This analysis focuses on your listening skills and understanding of audio content.</div>' : ''}
                ${this.playCount > this.config.maxPlaybacks ? '<div class="playback-note">💡 Try to listen actively on the first few attempts for better comprehension scores.</div>' : ''}
            </div>
        `;

        // Show appropriate buttons
        const isLastQuestion = this.questionIndex >= this.questions.length - 1;

        if (nextBtn) nextBtn.style.display = isLastQuestion ? 'none' : 'inline-block';
        if (finishBtn) finishBtn.style.display = isLastQuestion ? 'inline-block' : 'none';
        if (retryBtn) retryBtn.style.display = result.correct ? 'none' : 'inline-block';

        // Scroll to explanation
        explanationPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
    }

    /**
     * Handle next question
     * @private
     */
    _handleNextQuestion() {
        this.questionIndex++;
        this._presentCurrentQuestion();
    }

    /**
     * Handle retry
     * @private
     */
    _handleRetry() {
        // Hide explanation and enable new input
        const explanationPanel = document.getElementById('explanation-panel');
        const statusDiv = document.getElementById('validation-status');

        if (explanationPanel) explanationPanel.style.display = 'none';
        if (statusDiv) statusDiv.innerHTML = '';

        this._enableRetry();
    }

    /**
     * Enable retry after error
     * @private
     */
    _enableRetry() {
        this.validationInProgress = false;

        const answerInput = document.getElementById('answer-input');
        const validateBtn = document.getElementById('validate-answer-btn');

        if (answerInput) {
            answerInput.disabled = false;
            answerInput.focus();
        }

        if (validateBtn) {
            validateBtn.disabled = false;
        }
    }

    /**
     * Show final audio results
     * @private
     */
    _showAudioResults() {
        const resultsContainer = document.getElementById('audio-results');
        const questionsSection = document.getElementById('questions-section');

        if (!resultsContainer) return;

        const correctCount = this.questionResults.filter(result => result.correct).length;
        const totalCount = this.questionResults.length;
        const comprehensionRate = totalCount > 0 ? Math.round((correctCount / totalCount) * 100) : 0;

        let resultClass = 'results-poor';
        if (comprehensionRate >= 80) resultClass = 'results-excellent';
        else if (comprehensionRate >= 60) resultClass = 'results-good';

        const resultsHTML = `
            <div class="audio-results-content ${resultClass}">
                <h3>📊 Listening Comprehension Results</h3>
                <div class="results-summary">
                    <div class="comprehension-display">
                        <span class="comprehension-rate">${comprehensionRate}%</span>
                        <span class="comprehension-label">Comprehension Rate</span>
                    </div>
                    <div class="questions-summary">
                        ${correctCount} / ${totalCount} questions understood well
                    </div>
                    <div class="listening-stats">
                        <div class="stat-item">
                            <span class="stat-value">${this.playCount}</span>
                            <span class="stat-label">Total Plays</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">${this.playCount <= this.config.maxPlaybacks ? '👍' : '⚠️'}</span>
                            <span class="stat-label">${this.playCount <= this.config.maxPlaybacks ? 'Good listening' : 'Practice active listening'}</span>
                        </div>
                    </div>
                </div>

                <div class="question-breakdown">
                    ${this.questionResults.map((result, index) => `
                        <div class="question-result ${result.correct ? 'understood' : 'needs-work'}">
                            <div class="question-summary">
                                <span class="question-num">Q${index + 1}</span>
                                <span class="comprehension-icon">${result.correct ? '✅' : '👂'}</span>
                                <span class="score">Score: ${result.score}/100</span>
                                <span class="playback-info">Plays: ${result.playbackCount || this.playCount}</span>
                            </div>
                        </div>
                    `).join('')}
                </div>

                <div class="results-actions">
                    <button id="complete-audio-btn" class="btn btn-primary">Continue to Next Exercise</button>
                    <button id="replay-audio-btn" class="btn btn-outline">Practice Audio Again</button>
                </div>
            </div>
        `;

        resultsContainer.innerHTML = resultsHTML;
        resultsContainer.style.display = 'block';

        // Hide other sections
        if (questionsSection) questionsSection.style.display = 'none';

        // Add action listeners
        document.getElementById('complete-audio-btn').onclick = () => this._completeAudioExercise();
        document.getElementById('replay-audio-btn').onclick = () => this._replayAudio();
    }

    /**
     * Complete audio exercise
     * @private
     */
    _completeAudioExercise() {
        // Mark audio as comprehended if performance is good
        const correctCount = this.questionResults.filter(result => result.correct).length;
        const comprehensionRate = correctCount / this.questionResults.length;

        if (comprehensionRate >= 0.6) { // 60% comprehension threshold
            const audioId = this.currentAudio.id || this.currentAudio.title || 'audio_exercise';
            const metadata = {
                comprehensionRate: Math.round(comprehensionRate * 100),
                questionsAnswered: this.questionResults.length,
                correctAnswers: correctCount,
                totalPlaybacks: this.playCount,
                sessionId: this.orchestrator?.sessionId || 'unknown',
                moduleType: 'audio',
                aiAnalysisUsed: this.aiAvailable,
                listeningEfficiency: this.playCount <= this.config.maxPlaybacks ? 'good' : 'needs_improvement'
            };

            this.prerequisiteEngine.markPhraseMastered(audioId, metadata);

            // Also save to persistent storage
            if (window.addMasteredItem && this.orchestrator?.bookId && this.orchestrator?.chapterId) {
                window.addMasteredItem(
                    this.orchestrator.bookId,
                    this.orchestrator.chapterId,
                    'audios',
                    audioId,
                    metadata
                );
            }
        }

        // Emit completion event
        this.orchestrator._eventBus.emit('drs:exerciseCompleted', {
            moduleType: 'audio',
            results: this.questionResults,
            progress: this.getProgress()
        }, 'AudioModule');
    }

    /**
     * Replay audio exercise
     * @private
     */
    _replayAudio() {
        this.questionIndex = 0;
        this.questionResults = [];
        this.playCount = 0;
        this._showAudioListening();

        const resultsContainer = document.getElementById('audio-results');
        if (resultsContainer) resultsContainer.style.display = 'none';

        // Reset UI elements
        const playCounter = document.getElementById('play-counter');
        if (playCounter) playCounter.textContent = '0';

        const startQuestionsBtn = document.getElementById('start-questions-btn');
        if (startQuestionsBtn) startQuestionsBtn.style.display = 'none';

        const transcriptSection = document.getElementById('transcript-section');
        if (transcriptSection) transcriptSection.style.display = 'none';
    }

    /**
     * Add CSS styles for audio exercise
     * @private
     */
    _addStyles() {
        if (document.getElementById('audio-module-styles')) return;

        const styles = document.createElement('style');
        styles.id = 'audio-module-styles';
        styles.textContent = `
            .audio-exercise {
                max-width: 900px;
                margin: 0 auto;
                padding: 20px;
                display: grid;
                gap: 20px;
            }

            .exercise-header {
                text-align: center;
                margin-bottom: 20px;
            }

            .audio-info {
                margin-top: 10px;
            }

            .audio-meta {
                color: #666;
                font-size: 0.9em;
            }

            .audio-content {
                display: grid;
                gap: 20px;
            }

            .audio-player-card, .question-card {
                background: white;
                border-radius: 12px;
                padding: 30px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
            }

            .audio-player-section.minimized .audio-player-card {
                padding: 20px;
                background: #f8f9fa;
                border: 2px solid #e9ecef;
            }

            .player-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                padding-bottom: 15px;
                border-bottom: 2px solid #eee;
            }

            .player-header h3 {
                margin: 0;
                color: #333;
                font-size: 1.5em;
            }

            .player-stats {
                display: flex;
                gap: 15px;
                font-size: 0.9em;
                color: #666;
            }

            .play-count {
                font-weight: 600;
            }

            .audio-player {
                margin-bottom: 25px;
            }

            .audio-placeholder {
                text-align: center;
                padding: 40px;
                background: linear-gradient(135deg, #f8f9ff, #e8f4fd);
                border-radius: 10px;
                color: #666;
                font-size: 1.1em;
                margin-bottom: 20px;
            }

            .player-controls {
                display: flex;
                flex-direction: column;
                gap: 15px;
                align-items: center;
            }

            .play-btn {
                font-size: 1.1em;
                min-width: 140px;
            }

            .progress-container {
                width: 100%;
                max-width: 400px;
                text-align: center;
            }

            .progress-bar {
                width: 100%;
                height: 8px;
                background-color: #e0e0e0;
                border-radius: 4px;
                margin-bottom: 10px;
                overflow: hidden;
            }

            .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, #28a745, #20c997);
                transition: width 0.3s ease;
            }

            .time-display {
                font-size: 0.9em;
                color: #666;
                font-family: monospace;
            }

            .transcript-section {
                margin-top: 20px;
                padding: 20px;
                background: linear-gradient(135deg, #fff9e6, #fff3cd);
                border-radius: 10px;
                border-left: 4px solid #ffc107;
            }

            .transcript-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
            }

            .transcript-header h4 {
                margin: 0;
                color: #333;
            }

            .transcript-note {
                font-size: 0.8em;
                color: #666;
                background: rgba(255,255,255,0.7);
                padding: 4px 8px;
                border-radius: 12px;
            }

            .transcript-content {
                line-height: 1.6;
                color: #444;
                font-style: italic;
            }

            .listening-actions {
                text-align: center;
                margin-top: 20px;
            }

            .question-progress {
                margin-bottom: 25px;
            }

            .progress-indicator {
                text-align: center;
            }

            .question-display {
                margin-bottom: 25px;
                padding: 20px;
                background: linear-gradient(135deg, #f8f9ff, #e8f4fd);
                border-radius: 10px;
                border-left: 4px solid #6c5ce7;
            }

            .question-text {
                font-size: 1.3em;
                font-weight: 600;
                color: #333;
                margin-bottom: 15px;
                line-height: 1.4;
            }

            .question-meta {
                display: flex;
                gap: 15px;
                align-items: center;
                flex-wrap: wrap;
            }

            .question-type {
                background: #e3f2fd;
                color: #1976d2;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.85em;
                font-weight: 500;
            }

            .requires-transcript {
                background: #fff3e0;
                color: #f57c00;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.85em;
                font-weight: 500;
            }

            .difficulty-easy {
                background: #e8f5e8;
                color: #2e7d32;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.85em;
                font-weight: 500;
            }

            .difficulty-medium {
                background: #fff3e0;
                color: #f57c00;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.85em;
                font-weight: 500;
            }

            .difficulty-hard {
                background: #ffebee;
                color: #c62828;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.85em;
                font-weight: 500;
            }

            .answer-input-section {
                margin-bottom: 20px;
            }

            .answer-input-section label {
                display: block;
                margin-bottom: 10px;
                font-weight: 600;
                color: #555;
            }

            .answer-input-section textarea {
                width: 100%;
                padding: 15px;
                font-size: 1.05em;
                border: 2px solid #ddd;
                border-radius: 8px;
                resize: vertical;
                min-height: 100px;
                box-sizing: border-box;
                transition: border-color 0.3s ease;
                font-family: inherit;
                line-height: 1.5;
            }

            .answer-input-section textarea:focus {
                outline: none;
                border-color: #6c5ce7;
            }

            .question-controls {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 15px;
            }

            .question-controls > div:first-child {
                display: flex;
                gap: 15px;
                flex-wrap: wrap;
                justify-content: center;
            }

            .validation-status {
                min-height: 30px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .status-loading, .status-complete, .status-error {
                display: flex;
                align-items: center;
                gap: 10px;
                padding: 12px 20px;
                border-radius: 25px;
                font-weight: 500;
            }

            .status-loading {
                background: #e3f2fd;
                color: #1976d2;
            }

            .status-complete {
                background: #e8f5e8;
                color: #2e7d32;
            }

            .status-error {
                background: #ffebee;
                color: #c62828;
            }

            .loading-spinner {
                animation: spin 1s linear infinite;
            }

            .explanation-panel {
                background: white;
                border-radius: 12px;
                padding: 25px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                border-left: 4px solid #6c5ce7;
            }

            .panel-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20px;
                padding-bottom: 10px;
                border-bottom: 1px solid #eee;
            }

            .panel-header h3 {
                margin: 0;
                color: #333;
            }

            .analysis-model {
                font-size: 0.9em;
                color: #666;
                background: #f5f5f5;
                padding: 4px 8px;
                border-radius: 4px;
            }

            .explanation-result {
                padding: 20px;
                border-radius: 8px;
                margin-bottom: 15px;
            }

            .explanation-result.correct {
                border-left: 4px solid #4caf50;
                background: linear-gradient(135deg, #f1f8e9, #e8f5e8);
            }

            .explanation-result.needs-improvement {
                border-left: 4px solid #ff9800;
                background: linear-gradient(135deg, #fff8e1, #fff3e0);
            }

            .result-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 15px;
                font-weight: 600;
            }

            .result-indicator {
                font-size: 1.1em;
            }

            .comprehension-score {
                font-size: 0.9em;
                color: #666;
            }

            .explanation-text {
                line-height: 1.6;
                color: #333;
                font-size: 1.05em;
                margin-bottom: 10px;
            }

            .analysis-note, .playback-note {
                font-size: 0.9em;
                color: #666;
                font-style: italic;
                padding-top: 10px;
                border-top: 1px solid #eee;
                margin-top: 10px;
            }

            .panel-actions {
                display: flex;
                gap: 15px;
                justify-content: center;
                flex-wrap: wrap;
            }

            .audio-results-content {
                background: white;
                border-radius: 12px;
                padding: 30px;
                box-shadow: 0 4px 20px rgba(0,0,0,0.1);
                text-align: center;
            }

            .results-summary {
                margin-bottom: 30px;
            }

            .comprehension-display {
                margin-bottom: 15px;
            }

            .comprehension-rate {
                font-size: 3em;
                font-weight: bold;
                display: block;
            }

            .results-excellent .comprehension-rate { color: #4caf50; }
            .results-good .comprehension-rate { color: #ff9800; }
            .results-poor .comprehension-rate { color: #f44336; }

            .comprehension-label {
                font-size: 1.2em;
                color: #666;
            }

            .questions-summary {
                font-size: 1.1em;
                color: #555;
                margin-bottom: 20px;
            }

            .listening-stats {
                display: flex;
                justify-content: center;
                gap: 40px;
                margin-top: 20px;
                padding: 20px;
                background: #f8f9fa;
                border-radius: 10px;
            }

            .stat-item {
                text-align: center;
            }

            .stat-value {
                display: block;
                font-size: 1.5em;
                font-weight: bold;
                color: #333;
            }

            .stat-label {
                font-size: 0.9em;
                color: #666;
            }

            .question-breakdown {
                display: grid;
                gap: 10px;
                margin-bottom: 30px;
            }

            .question-result {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 15px;
                border-radius: 8px;
                background: #f8f9fa;
            }

            .question-result.understood {
                background: linear-gradient(135deg, #e8f5e8, #f1f8e9);
                border-left: 4px solid #4caf50;
            }

            .question-result.needs-work {
                background: linear-gradient(135deg, #fff8e1, #fff3e0);
                border-left: 4px solid #ff9800;
            }

            .question-summary {
                display: flex;
                align-items: center;
                gap: 15px;
            }

            .question-num {
                font-weight: bold;
                color: #333;
            }

            .playback-info {
                font-size: 0.85em;
                color: #666;
                background: rgba(255,255,255,0.7);
                padding: 4px 8px;
                border-radius: 10px;
            }

            .results-actions {
                display: flex;
                gap: 15px;
                justify-content: center;
                flex-wrap: wrap;
            }

            .btn {
                padding: 12px 24px;
                border: none;
                border-radius: 8px;
                cursor: pointer;
                font-size: 1em;
                font-weight: 500;
                transition: all 0.3s ease;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                text-decoration: none;
            }

            .btn:disabled {
                opacity: 0.6;
                cursor: not-allowed;
            }

            .btn-primary {
                background: linear-gradient(135deg, #6c5ce7, #a29bfe);
                color: white;
            }

            .btn-primary:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
            }

            .btn-secondary {
                background: #6c757d;
                color: white;
            }

            .btn-secondary:hover:not(:disabled) {
                background: #5a6268;
            }

            .btn-outline {
                background: transparent;
                border: 2px solid #6c5ce7;
                color: #6c5ce7;
            }

            .btn-outline:hover:not(:disabled) {
                background: #6c5ce7;
                color: white;
            }

            .btn-success {
                background: linear-gradient(135deg, #00b894, #00cec9);
                color: white;
            }

            .btn-success:hover:not(:disabled) {
                transform: translateY(-2px);
                box-shadow: 0 4px 15px rgba(0, 184, 148, 0.3);
            }

            @keyframes spin {
                from { transform: rotate(0deg); }
                to { transform: rotate(360deg); }
            }

            @media (max-width: 768px) {
                .audio-exercise {
                    padding: 15px;
                }

                .audio-player-card, .question-card, .explanation-panel {
                    padding: 20px;
                }

                .question-text {
                    font-size: 1.2em;
                }

                .comprehension-rate {
                    font-size: 2.5em;
                }

                .panel-actions, .results-actions {
                    flex-direction: column;
                }

                .player-header {
                    flex-direction: column;
                    gap: 15px;
                    align-items: flex-start;
                }

                .listening-stats {
                    flex-direction: column;
                    gap: 20px;
                }

                .question-controls > div:first-child {
                    flex-direction: column;
                    align-items: center;
                }
            }
        `;

        document.head.appendChild(styles);
    }

    // ========================================
    // DRSExerciseInterface REQUIRED METHODS
    // ========================================

    async init(config = {}, content = {}) {
        this.config = { ...this.config, ...config };
        this.currentExerciseData = content;
        this.startTime = Date.now();
        this.initialized = true;
    }

    async render(container) {
        if (!this.initialized) throw new Error('AudioModule must be initialized before rendering');
        await this.present(container, this.currentExerciseData);
    }

    async destroy() {
        this.cleanup?.();
        this.container = null;
        this.initialized = false;
    }

    getResults() {
        return {
            score: this.progress?.averageScore ? Math.round(this.progress.averageScore * 100) : 0,
            attempts: this.userResponses?.length || 0,
            timeSpent: this.startTime ? Date.now() - this.startTime : 0,
            completed: true,
            details: { progress: this.progress, responses: this.userResponses }
        };
    }

    handleUserInput(event, data) {
        if (event?.type === 'input') this._handleInputChange?.(event);
        if (event?.type === 'click' && event.target.id === 'submitButton') this._handleSubmit?.(event);
    }

    async markCompleted(results) {
        const { score, details } = results || this.getResults();
        if (this.contextMemory) {
            this.contextMemory.recordInteraction({
                type: 'audio',
                subtype: 'completion',
                content: this.currentExerciseData,
                validation: { score },
                context: { moduleType: 'audio' }
            });
        }
    }

    getExerciseType() {
        return 'audio';
    }

    getExerciseConfig() {
        return {
            type: this.getExerciseType(),
            difficulty: this.currentExerciseData?.difficulty || 'medium',
            estimatedTime: 5,
            prerequisites: [],
            metadata: { ...this.config, requiresAI: false }
        };
    }

}

export default AudioModule;