/**
 * ImageModule - Visual comprehension exercises with AI validation
 * Handles image content with visual analysis questions and description exercises
 */

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

class ImageModule extends ExerciseModuleInterface {
    constructor(orchestrator, llmValidator, prerequisiteEngine, contextMemory) {
        super();

        // Validate dependencies
        if (!orchestrator || !llmValidator || !prerequisiteEngine || !contextMemory) {
            throw new Error('ImageModule 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.currentImage = null;
        this.currentQuestion = null;
        this.questionIndex = 0;
        this.questionResults = [];
        this.validationInProgress = false;
        this.lastValidationResult = null;
        this.aiAvailable = false;
        this.imageLoaded = false;
        this.viewingTime = 0;
        this.startViewTime = null;

        // Configuration
        this.config = {
            requiredProvider: 'openai', // Prefer OpenAI for image analysis
            model: 'gpt-4o-mini', // Model that supports vision
            temperature: 0.2,
            maxTokens: 800,
            timeout: 45000, // Longer timeout for image analysis
            questionsPerImage: 3, // Default number of questions per image
            minViewTime: 5, // Minimum viewing time in seconds for bonus
            showImageDuringQuestions: true, // Keep image visible during questions
            allowZoom: true // Allow image zooming
        };

        // 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._handleImageLoad = this._handleImageLoad.bind(this);
        this._handleImageZoom = this._handleImageZoom.bind(this);
        this._startViewTimer = this._startViewTimer.bind(this);
        this._stopViewTimer = this._stopViewTimer.bind(this);
    }

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

        console.log('🖼️ Initializing ImageModule...');

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

        this.initialized = true;
        console.log(`✅ ImageModule initialized (AI: ${this.aiAvailable ? 'available for vision 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 images and if prerequisites allow them
        const images = chapterContent?.images || [];
        if (images.length === 0) return false;

        // Find images that can be unlocked with current prerequisites
        const availableImages = images.filter(image => {
            const unlockStatus = this.prerequisiteEngine.canUnlock('image', image);
            return unlockStatus.canUnlock;
        });

        return availableImages.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('ImageModule must be initialized before use');
        }

        this.container = container;
        this.currentExerciseData = exerciseData;
        this.currentImage = exerciseData.image;
        this.questionIndex = 0;
        this.questionResults = [];
        this.validationInProgress = false;
        this.lastValidationResult = null;
        this.imageLoaded = false;
        this.viewingTime = 0;
        this.startViewTime = null;

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

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

        console.log(`🖼️ Presenting image comprehension: "${this.currentImage.title || 'Visual Exercise'}" (${this.questions.length} questions)`);

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

        // Start with image viewing phase
        this._showImageViewing();
    }

    /**
     * Validate user input with AI for deep image 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.currentImage || !this.currentQuestion) {
            throw new Error('No image or question loaded for validation');
        }

        console.log(`🖼️ Validating image comprehension answer for question ${this.questionIndex + 1}`);

        // Build comprehensive prompt for image comprehension
        const prompt = this._buildImageComprehensionPrompt(userInput);

        try {
            // Use AI validation with structured response - includes image if available
            const aiResponse = await this.llmValidator.iaEngine.validateEducationalContent(prompt, {
                preferredProvider: this.config.requiredProvider,
                temperature: this.config.temperature,
                maxTokens: this.config.maxTokens,
                timeout: this.config.timeout,
                imageUrl: this.currentImage.url || this.currentImage.src, // Include image for vision analysis
                systemPrompt: `You are an expert visual comprehension evaluator. Analyze both the image content and the student's response. Focus on visual observation skills and interpretation. ALWAYS respond in the exact format: [answer]yes/no [explanation]your detailed analysis here`
            });

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

            // Apply viewing time bonus
            if (this.viewingTime >= this.config.minViewTime) {
                parsedResult.score = Math.min(parsedResult.score + 5, 100);
                parsedResult.feedback += ` (Bonus: +5 points for thorough image observation)`;
            }

            // Record interaction in context memory
            this.contextMemory.recordInteraction({
                type: 'image',
                subtype: 'comprehension',
                content: {
                    image: this.currentImage,
                    question: this.currentQuestion,
                    imageTitle: this.currentImage.title || 'Visual Exercise',
                    imageDescription: this.currentImage.description || '',
                    viewingTime: this.viewingTime
                },
                userResponse: userInput.trim(),
                validation: parsedResult,
                context: {
                    languages: this.languages,
                    questionIndex: this.questionIndex,
                    totalQuestions: this.questions.length,
                    observationTime: this.viewingTime
                }
            });

            return parsedResult;

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

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

            throw new Error(`Image 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: 'image',
            imageTitle: this.currentImage?.title || 'Visual 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,
            observationTime: this.viewingTime,
            aiAnalysisAvailable: this.aiAvailable
        };
    }

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

        // Stop view timer
        this._stopViewTimer();

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

        // Reset state
        this.container = null;
        this.currentExerciseData = null;
        this.currentImage = null;
        this.currentQuestion = null;
        this.questionIndex = 0;
        this.questionResults = [];
        this.questions = null;
        this.validationInProgress = false;
        this.lastValidationResult = null;
        this.imageLoaded = false;
        this.viewingTime = 0;
        this.startViewTime = null;

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

    /**
     * Get module metadata
     * @returns {Object} - Module information
     */
    getMetadata() {
        return {
            name: 'ImageModule',
            type: 'image',
            version: '1.0.0',
            description: 'Visual comprehension exercises with AI-powered image analysis',
            capabilities: ['image_comprehension', 'visual_analysis', 'description_skills', 'ai_vision', 'ai_feedback'],
            aiRequired: true, // Highly recommended for image analysis
            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(`🌍 Image languages detected: ${this.languages.userLanguage} -> ${this.languages.targetLanguage}`);
    }

    /**
     * Prepare questions for the image
     * @private
     */
    async _prepareQuestions(image) {
        // If image already has questions, use them
        if (image.questions && image.questions.length > 0) {
            return image.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',
                focusArea: q.focusArea || 'general' // general, details, interpretation, description
            }));
        }

        // Generate default visual comprehension questions
        const defaultQuestions = [
            {
                id: 'description',
                question: `Describe what you see in this image in detail.`,
                type: 'open',
                keywords: ['see', 'image', 'shows', 'contains', 'depicts'],
                difficulty: 'easy',
                focusArea: 'description'
            },
            {
                id: 'details',
                question: `What specific details or objects can you identify in the image?`,
                type: 'open',
                keywords: ['details', 'objects', 'specific', 'identify', 'notice'],
                difficulty: 'medium',
                focusArea: 'details'
            },
            {
                id: 'interpretation',
                question: `What do you think is happening in this image? What story does it tell?`,
                type: 'open',
                keywords: ['happening', 'story', 'context', 'situation', 'interpret'],
                difficulty: 'hard',
                focusArea: 'interpretation'
            }
        ];

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

    /**
     * Build comprehensive prompt for image comprehension validation
     * @private
     */
    _buildImageComprehensionPrompt(userAnswer) {
        const imageTitle = this.currentImage.title || 'Visual Exercise';
        const imageDescription = this.currentImage.description || 'No description provided';
        const imageUrl = this.currentImage.url || this.currentImage.src || '';

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

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

IMAGE CONTENT:
Title: "${imageTitle}"
Description: "${imageDescription}"
${imageUrl ? `Image URL: ${imageUrl}` : 'Image: Available for visual analysis'}

QUESTION: ${this.currentQuestion.question}

STUDENT RESPONSE: "${userAnswer}"

EVALUATION CONTEXT:
- Exercise Type: Visual comprehension
- Languages: ${this.languages.userLanguage} -> ${this.languages.targetLanguage}
- Question Type: ${this.currentQuestion.type}
- Question Difficulty: ${this.currentQuestion.difficulty}
- Focus Area: ${this.currentQuestion.focusArea}
- Question ${this.questionIndex + 1} of ${this.questions.length}
- Observation Time: ${this.viewingTime}s

EVALUATION CRITERIA:
- [answer]yes if the student demonstrates good visual observation and understanding
- [answer]no if the response shows poor observation or is unrelated to the image
- Focus on VISUAL COMPREHENSION and OBSERVATION SKILLS, not perfect language
- Accept different perspectives and interpretations if they show visual understanding
- Reward specific details, accurate observations, and thoughtful interpretation
- Consider the student's language learning level and cultural context
- For description questions: reward comprehensive and accurate descriptions
- For detail questions: reward specific and accurate observations
- For interpretation questions: reward thoughtful analysis and context understanding

[explanation] should provide:
1. What the student observed correctly from the image
2. What important visual elements they might have missed
3. How well their interpretation matches the image content
4. Encouragement and specific suggestions for better visual observation
5. Tips for developing visual comprehension skills
6. Recognition of cultural or contextual insights if present

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

    /**
     * Parse structured AI response for image 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 image 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();

            // Standard scores for image comprehension
            const result = {
                score: isCorrect ? 88 : 58, // Good scores for visual comprehension
                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,
                imageComprehension: true,
                visionAnalysis: true
            };

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

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

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

    /**
     * Perform basic image validation when AI is unavailable
     * @private
     */
    _performBasicImageValidation(userAnswer) {
        console.log('🔍 Performing basic image 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 = 30; // Lower base score for images (much harder without AI vision)

        if (answerLength > 20) score += 15; // Substantial answer
        if (answerLength > 50) score += 10; // Detailed answer
        if (hasKeywords) score += 20; // Contains relevant keywords
        if (answerLength > 100) score += 10; // Very detailed
        if (this.viewingTime >= this.config.minViewTime) score += 10; // Good observation time

        const isCorrect = score >= 60;

        return {
            score: Math.min(score, 100),
            correct: isCorrect,
            feedback: isCorrect
                ? "Good visual observation! Your description shows attention to detail and understanding of the image."
                : "Try to observe the image more carefully and include more specific details about what you see. Look for objects, people, actions, colors, and settings.",
            timestamp: new Date().toISOString(),
            provider: 'basic_image_analysis',
            model: 'keyword_length_analysis',
            cached: false,
            mockGenerated: true,
            imageComprehension: true,
            limitedAnalysis: true
        };
    }

    /**
     * Render the image exercise interface
     * @private
     */
    async _renderImageExercise() {
        if (!this.container || !this.currentImage) return;

        const imageTitle = this.currentImage.title || 'Visual Exercise';
        const imageDescription = this.currentImage.description || '';
        const imageUrl = this.currentImage.url || this.currentImage.src || '';

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

                <div class="image-content">
                    <div class="image-viewer-section" id="image-viewer-section">
                        <div class="image-viewer-card">
                            <div class="viewer-header">
                                <h3>${imageTitle}</h3>
                                <div class="viewer-stats">
                                    <span class="view-time">Viewing: <span id="view-timer">0s</span></span>
                                    ${this.config.allowZoom ? '<button id="zoom-btn" class="btn btn-outline btn-sm">🔍 Zoom</button>' : ''}
                                </div>
                            </div>

                            <div class="image-container" id="image-container">
                                ${imageUrl ? `
                                    <img
                                        id="main-image"
                                        src="${imageUrl}"
                                        alt="${imageTitle}"
                                        class="exercise-image"
                                        onload="this.closest('.image-exercise').querySelector('#image-viewer-section')._handleImageLoad()"
                                    />
                                ` : `
                                    <div class="image-placeholder">
                                        🖼️ Image placeholder (${imageTitle})
                                        ${imageDescription ? `<p class="placeholder-desc">${imageDescription}</p>` : ''}
                                    </div>
                                `}

                                <div class="image-overlay" id="image-overlay" style="display: none;">
                                    <div class="overlay-content">
                                        <button id="close-overlay" class="btn btn-outline">✕ Close</button>
                                    </div>
                                </div>
                            </div>

                            ${imageDescription ? `
                                <div class="image-description">
                                    <h4>📝 Context</h4>
                                    <p>${imageDescription}</p>
                                </div>
                            ` : ''}

                            <div class="viewing-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>
                                <button id="observe-more-btn" class="btn btn-primary">
                                    <span class="btn-icon">👁️</span>
                                    <span class="btn-text">Observe Image</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="Describe what you observe in the image..."
                                    rows="5"
                                    autocomplete="off"
                                ></textarea>
                            </div>

                            <div class="question-controls">
                                <button id="look-again-btn" class="btn btn-outline">
                                    <span class="btn-icon">👁️</span>
                                    <span class="btn-text">Look at Image Again</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 Vision' : '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 Vision Analysis' : '🔍 Analysis'}</h3>
                            <span class="analysis-model">${this.aiAvailable ? this.config.model + ' (Vision)' : '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-image-btn" class="btn btn-success" style="display: none;">
                                Complete Image Exercise
                            </button>
                        </div>
                    </div>

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

        // Add CSS styles
        this._addStyles();

        // Add event listeners
        this._setupEventListeners();

        // Start observation timer after a brief delay
        setTimeout(() => {
            this._startViewTimer();
            const observeBtn = document.getElementById('observe-more-btn');
            if (observeBtn) observeBtn.style.display = 'none';

            const startQuestionsBtn = document.getElementById('start-questions-btn');
            if (startQuestionsBtn) startQuestionsBtn.style.display = 'inline-block';
        }, 2000);
    }

    /**
     * Setup event listeners for image exercise
     * @private
     */
    _setupEventListeners() {
        const startQuestionsBtn = document.getElementById('start-questions-btn');
        const observeMoreBtn = document.getElementById('observe-more-btn');
        const lookAgainBtn = document.getElementById('look-again-btn');
        const zoomBtn = document.getElementById('zoom-btn');
        const closeOverlay = document.getElementById('close-overlay');
        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-image-btn');

        // Navigation buttons
        if (startQuestionsBtn) {
            startQuestionsBtn.onclick = () => this._startQuestions();
        }

        if (observeMoreBtn) {
            observeMoreBtn.onclick = () => this._continueObservation();
        }

        if (lookAgainBtn) {
            lookAgainBtn.onclick = () => this._showImageViewing();
        }

        // Image interaction
        if (zoomBtn) {
            zoomBtn.onclick = this._handleImageZoom;
        }

        if (closeOverlay) {
            closeOverlay.onclick = () => {
                const overlay = document.getElementById('image-overlay');
                if (overlay) overlay.style.display = 'none';
            };
        }

        // Handle image load
        const mainImage = document.getElementById('main-image');
        if (mainImage) {
            mainImage.addEventListener('load', this._handleImageLoad);
        }

        // 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._completeImageExercise();
    }

    /**
     * Handle image load event
     * @private
     */
    _handleImageLoad() {
        this.imageLoaded = true;
        console.log('🖼️ Image loaded successfully');
    }

    /**
     * Handle image zoom functionality
     * @private
     */
    _handleImageZoom() {
        const overlay = document.getElementById('image-overlay');
        const mainImage = document.getElementById('main-image');

        if (!overlay || !mainImage) return;

        const overlayContent = overlay.querySelector('.overlay-content');
        const zoomedImage = mainImage.cloneNode(true);
        zoomedImage.className = 'zoomed-image';
        zoomedImage.id = 'zoomed-image';

        // Clear previous content and add zoomed image
        overlayContent.innerHTML = `
            <button id="close-overlay" class="btn btn-outline close-btn">✕ Close</button>
            <div class="zoomed-container"></div>
        `;

        overlayContent.querySelector('.zoomed-container').appendChild(zoomedImage);
        overlay.style.display = 'flex';

        // Re-attach close event
        overlayContent.querySelector('#close-overlay').onclick = () => {
            overlay.style.display = 'none';
        };
    }

    /**
     * Start view timer
     * @private
     */
    _startViewTimer() {
        if (this.startViewTime) return; // Already started

        this.startViewTime = Date.now();
        const timer = document.getElementById('view-timer');

        const updateTimer = () => {
            if (this.startViewTime) {
                this.viewingTime = Math.floor((Date.now() - this.startViewTime) / 1000);
                if (timer) timer.textContent = `${this.viewingTime}s`;
                setTimeout(updateTimer, 1000);
            }
        };

        updateTimer();
    }

    /**
     * Stop view timer
     * @private
     */
    _stopViewTimer() {
        if (this.startViewTime) {
            this.viewingTime = Math.floor((Date.now() - this.startViewTime) / 1000);
            this.startViewTime = null;
        }
    }

    /**
     * Continue observation phase
     * @private
     */
    _continueObservation() {
        // Just hide the button and show start questions
        const observeBtn = document.getElementById('observe-more-btn');
        const startQuestionsBtn = document.getElementById('start-questions-btn');

        if (observeBtn) observeBtn.style.display = 'none';
        if (startQuestionsBtn) startQuestionsBtn.style.display = 'inline-block';
    }

    /**
     * Show image viewing phase
     * @private
     */
    _showImageViewing() {
        const imageSection = document.getElementById('image-viewer-section');
        const questionsSection = document.getElementById('questions-section');

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

        // Resume timer if needed
        if (!this.startViewTime) {
            this._startViewTimer();
        }
    }

    /**
     * Start questions phase
     * @private
     */
    _startQuestions() {
        const imageSection = document.getElementById('image-viewer-section');
        const questionsSection = document.getElementById('questions-section');

        // Keep image visible but minimized if configured
        if (imageSection) {
            imageSection.style.display = this.config.showImageDuringQuestions ? 'block' : 'none';
            if (this.config.showImageDuringQuestions) {
                imageSection.classList.add('minimized');
            }
        }

        if (questionsSection) questionsSection.style.display = 'block';

        // Stop continuous timer - we'll track total time
        this._stopViewTimer();

        this._presentCurrentQuestion();
    }

    /**
     * Present current question
     * @private
     */
    _presentCurrentQuestion() {
        if (this.questionIndex >= this.questions.length) {
            this._showImageResults();
            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>
                    <span class="focus-area focus-${this.currentQuestion.focusArea}">
                        ${this.currentQuestion.focusArea}
                    </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 the image and your response...' : '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(),
                observationTime: this.viewingTime
            };

            // 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('❌ Image 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-image-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 ? '✅ Excellent Observation!' : '👁️ Keep Looking!'}
                    </span>
                    <span class="comprehension-score">Score: ${result.score}/100</span>
                </div>
                <div class="explanation-text">${result.explanation || result.feedback}</div>
                ${result.imageComprehension ? '<div class="analysis-note">🖼️ This analysis evaluates your visual observation skills and image interpretation abilities.</div>' : ''}
                ${result.visionAnalysis ? '<div class="vision-note">🤖 AI Vision analyzed both the image content and your response for comprehensive feedback.</div>' : ''}
                ${this.viewingTime >= this.config.minViewTime ? '<div class="time-bonus">⏱️ Observation time bonus applied for thorough viewing!</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 image results
     * @private
     */
    _showImageResults() {
        const resultsContainer = document.getElementById('image-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;
        const avgObservationTime = this.questionResults.length > 0 ?
            Math.round(this.questionResults.reduce((sum, r) => sum + (r.observationTime || 0), 0) / this.questionResults.length) : 0;

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

        const resultsHTML = `
            <div class="image-results-content ${resultClass}">
                <h3>📊 Visual 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} visual observations understood well
                    </div>
                    <div class="observation-stats">
                        <div class="stat-item">
                            <span class="stat-value">${this.viewingTime}s</span>
                            <span class="stat-label">Total Viewing Time</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">${this.viewingTime >= this.config.minViewTime ? '👍' : '⚡'}</span>
                            <span class="stat-label">${this.viewingTime >= this.config.minViewTime ? 'Thorough observation' : 'Quick observation'}</span>
                        </div>
                        ${this.aiAvailable ? `
                            <div class="stat-item">
                                <span class="stat-value">🤖</span>
                                <span class="stat-label">AI Vision Analysis</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="focus-area">${this.questions[index]?.focusArea || 'general'}</span>
                            </div>
                        </div>
                    `).join('')}
                </div>

                <div class="results-actions">
                    <button id="complete-image-btn" class="btn btn-primary">Continue to Next Exercise</button>
                    <button id="review-image-btn" class="btn btn-outline">Review Image 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-image-btn').onclick = () => this._completeImageExercise();
        document.getElementById('review-image-btn').onclick = () => this._reviewImage();
    }

    /**
     * Complete image exercise
     * @private
     */
    _completeImageExercise() {
        // Mark image 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 imageId = this.currentImage.id || this.currentImage.title || 'image_exercise';
            const metadata = {
                comprehensionRate: Math.round(comprehensionRate * 100),
                questionsAnswered: this.questionResults.length,
                correctAnswers: correctCount,
                observationTime: this.viewingTime,
                sessionId: this.orchestrator?.sessionId || 'unknown',
                moduleType: 'image',
                aiAnalysisUsed: this.aiAvailable,
                visionAnalysisUsed: this.aiAvailable,
                observationQuality: this.viewingTime >= this.config.minViewTime ? 'thorough' : 'quick'
            };

            this.prerequisiteEngine.markPhraseMastered(imageId, metadata);

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

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

    /**
     * Review image again
     * @private
     */
    _reviewImage() {
        this.questionIndex = 0;
        this.questionResults = [];
        this.viewingTime = 0;
        this.startViewTime = null;
        this._showImageViewing();

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

        // Reset UI elements
        const viewTimer = document.getElementById('view-timer');
        if (viewTimer) viewTimer.textContent = '0s';

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

        const observeBtn = document.getElementById('observe-more-btn');
        if (observeBtn) observeBtn.style.display = 'inline-block';
    }

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

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

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

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

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

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

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

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

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

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

            .viewer-stats {
                display: flex;
                gap: 15px;
                align-items: center;
                font-size: 0.9em;
                color: #666;
            }

            .view-time {
                font-weight: 600;
                color: #17a2b8;
            }

            .image-container {
                position: relative;
                margin-bottom: 25px;
                text-align: center;
            }

            .exercise-image {
                max-width: 100%;
                max-height: 400px;
                border-radius: 10px;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                cursor: pointer;
                transition: transform 0.3s ease;
            }

            .exercise-image:hover {
                transform: scale(1.02);
            }

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

            .placeholder-desc {
                margin-top: 15px;
                font-size: 0.9em;
                color: #888;
                font-style: italic;
            }

            .image-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0,0,0,0.9);
                z-index: 1000;
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20px;
            }

            .overlay-content {
                position: relative;
                max-width: 90vw;
                max-height: 90vh;
                display: flex;
                flex-direction: column;
                align-items: center;
            }

            .close-btn {
                position: absolute;
                top: -50px;
                right: 0;
                z-index: 1001;
                background: rgba(255,255,255,0.9);
                border: 2px solid #ddd;
            }

            .zoomed-container {
                max-width: 100%;
                max-height: 100%;
                overflow: auto;
            }

            .zoomed-image {
                max-width: none;
                max-height: 80vh;
                border-radius: 10px;
            }

            .image-description {
                margin-top: 20px;
                padding: 20px;
                background: linear-gradient(135deg, #f8f9fa, #e9ecef);
                border-radius: 10px;
                border-left: 4px solid #6c757d;
            }

            .image-description h4 {
                margin: 0 0 10px 0;
                color: #333;
            }

            .image-description p {
                margin: 0;
                line-height: 1.6;
                color: #555;
            }

            .viewing-actions {
                text-align: center;
                margin-top: 20px;
                display: flex;
                gap: 15px;
                justify-content: center;
                flex-wrap: wrap;
            }

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

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

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

            .progress-fill {
                height: 100%;
                background: linear-gradient(90deg, #fd79a8, #e84393);
                transition: width 0.5s ease;
            }

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

            .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;
            }

            .focus-general {
                background: #f3e5f5;
                color: #7b1fa2;
                padding: 4px 12px;
                border-radius: 20px;
                font-size: 0.85em;
                font-weight: 500;
            }

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

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

            .focus-interpretation {
                background: #ffebee;
                color: #c62828;
                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: 120px;
                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: #fd79a8;
            }

            .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 #fd79a8;
            }

            .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, .vision-note, .time-bonus {
                font-size: 0.9em;
                color: #666;
                font-style: italic;
                padding-top: 10px;
                border-top: 1px solid #eee;
                margin-top: 10px;
            }

            .vision-note {
                color: #1976d2;
            }

            .time-bonus {
                color: #2e7d32;
            }

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

            .image-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;
            }

            .observation-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;
            }

            .focus-area {
                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, #fd79a8, #e84393);
                color: white;
            }

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

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

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

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

            .btn-outline:hover:not(:disabled) {
                background: #fd79a8;
                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);
            }

            .btn-sm {
                padding: 8px 16px;
                font-size: 0.9em;
            }

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

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

                .image-viewer-card, .question-card, .explanation-panel {
                    padding: 20px;
                }

                .exercise-image {
                    max-height: 300px;
                }

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

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

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

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

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

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

                .viewing-actions {
                    flex-direction: column;
                }
            }
        `;

        document.head.appendChild(styles);
    }
}

export default ImageModule;