{% extends "base.html" %}

{% block content %}
<div class="space-y-8 animate-fade-in">
    <!-- Header section with improved responsiveness -->
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center p-4 sm:p-6 bg-base-100 backdrop-filter backdrop-blur-lg rounded-2xl shadow-lg gap-3">
        <div>
            <h1 class="text-2xl sm:text-3xl font-bold text-base-content mb-2">Reading Stage</h1>
            <p class="text-sm sm:text-base text-base-content/60">Take your time to read and understand the content</p>
        </div>
        <div class="text-right">
            <span class="badge badge-primary text-sm sm:text-base px-3 sm:px-4 py-1 sm:py-2">
                <i class="fas fa-book-reader mr-2"></i>Stage 1/3
            </span>
        </div>
    </div>

    <!-- Reading Content -->
    <div class="bg-base-100 p-4 sm:p-8 rounded-2xl shadow-lg animate-slide-in-1">
        <div class="flex justify-between items-center mb-4 sm:mb-6">
            <h2 class="text-xl sm:text-2xl font-bold text-base-content flex items-center">
                <i class="fas fa-book text-primary mr-3"></i>
                Reading Material
            </h2>
            
            <!-- Text Size Controls - Compact, Always Visible, Improved Responsiveness -->
            <div class="flex items-center gap-1 sm:gap-2 text-base-content/70">
                <span class="text-xs font-medium hidden sm:inline">Text Size:</span>
                <div class="btn-group shadow-sm">
                    <button id="decreaseTextBtn" class="btn btn-xs sm:btn-sm btn-outline" title="Decrease Text Size">
                        <i class="fas fa-minus text-xs"></i>
                    </button>
                    <button id="resetTextBtn" class="btn btn-xs sm:btn-sm btn-outline" title="Reset Text Size">
                        <i class="fas fa-sync-alt text-xs"></i>
                    </button>
                    <button id="increaseTextBtn" class="btn btn-xs sm:btn-sm btn-outline" title="Increase Text Size">
                        <i class="fas fa-plus text-xs"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <div id="readingContentContainer" class="prose max-w-none mb-8 text-base sm:text-lg leading-relaxed text-base-content/80">
            <style>
                .reading-content {
                    white-space: pre-line;
                    line-height: 1.8;
                    transition: font-size 0.3s ease;
                }
                .reading-content .note {
                    color: var(--accent-primary);
                    font-weight: 600;
                    margin: 1.5em 0;
                    padding: 1em;
                    border-left: 4px solid var(--accent-primary);
                    background: rgba(var(--accent-primary-rgb), 0.05);
                }
                .reading-content .highlight {
                    color: var(--accent-secondary);
                    font-weight: 600;
                }
                .reading-content p {
                    margin-bottom: 1.5em;
                }
                .reading-content p.highlight-line {
                    background-color: rgba(var(--accent-primary-rgb), 0.1);
                    border-radius: 0.25rem;
                    padding: 0.5rem;
                    transition: background-color 0.3s ease;
                }
                
                /* Sentence highlighting during speech */
                :root {
                    --pulse-duration: 1.5s;
                }
                
                .reading-content .sentence {
                    display: inline;
                    border-radius: 0.25rem;
                    transition: background-color 0.3s ease;
                }
                
                .reading-content .highlight-sentence {
                    background-color: rgba(var(--accent-primary-rgb), 0.2);
                    border-radius: 0.25rem;
                    padding: 0.25rem;
                    border-bottom: 2px solid var(--accent-primary);
                    animation: pulse var(--pulse-duration) infinite;
                    box-decoration-break: clone;
                    -webkit-box-decoration-break: clone;
                }
                
                @keyframes pulse {
                    0% { background-color: rgba(var(--accent-primary-rgb), 0.1); }
                    50% { background-color: rgba(var(--accent-primary-rgb), 0.3); }
                    100% { background-color: rgba(var(--accent-primary-rgb), 0.1); }
                }
                
                /* Dark mode specific overrides */
                [data-theme="dark"] .reading-content .note {
                    background: rgba(var(--accent-primary-rgb), 0.15);
                }
                [data-theme="dark"] .reading-content p.highlight-line {
                    background-color: rgba(var(--accent-primary-rgb), 0.25);
                }
                [data-theme="dark"] .reading-content .highlight-sentence {
                    background-color: rgba(var(--accent-primary-rgb), 0.3);
                    border-bottom: 2px solid var(--accent-primary);
                    box-shadow: 0 0 5px rgba(var(--accent-primary-rgb), 0.5);
                }
                @keyframes dark-pulse {
                    0% { background-color: rgba(var(--accent-primary-rgb), 0.2); }
                    50% { background-color: rgba(var(--accent-primary-rgb), 0.4); }
                    100% { background-color: rgba(var(--accent-primary-rgb), 0.2); }
                }
                [data-theme="dark"] .reading-content .highlight-sentence {
                    animation: dark-pulse var(--pulse-duration) infinite;
                }
            </style>
            
            <!-- Topic Image -->
            {% if topic.image_url %}
            <div class="mb-6 rounded-xl overflow-hidden shadow-lg">
                <img src="{{ url_for('static', filename=topic.image_url) }}" 
                     alt="{{ topic.title }}" 
                     class="w-full h-auto object-cover max-h-[500px]">
            </div>
            {% endif %}
            
            <div class="reading-content">
                {% if topic.reading_content %}
                    {{ topic.reading_content|process_content|safe }}
                {% else %}
                    <p class="text-base-content/70">No reading content is available for this topic.</p>
                {% endif %}
            </div>
        </div>
        
        <!-- Settings Popup Modal -->
        <div id="settingsModal" class="fixed inset-0 bg-black/50 z-[100] flex items-center justify-center" style="display: none;">
            <div class="bg-base-100 rounded-2xl shadow-2xl p-6 max-w-md w-full mx-4">
                <h2 class="text-2xl font-bold text-base-content mb-4 flex items-center gap-2">
                    <i class="fas fa-cog text-primary"></i>
                    Text-to-Speech Settings
                </h2>
                <p class="text-base-content/70 mb-6">Configure your reading experience</p>
                
                <!-- Speed Selection -->
                <div class="mb-6">
                    <label class="text-sm font-semibold text-base-content/80 mb-2 flex items-center gap-2">
                        <i class="fas fa-tachometer-alt text-primary"></i>
                        Reading Speed
                    </label>
                    <div class="flex gap-3">
                        <button type="button" data-speed="0.7" class="flex-1 speed-setting-btn p-4 rounded-lg border-2 border-base-300 hover:border-primary transition-all flex flex-col items-center gap-2">
                            <span class="text-2xl">🐢</span>
                            <span class="font-medium">Slow</span>
                        </button>
                        <button type="button" data-speed="0.9" class="flex-1 speed-setting-btn p-4 rounded-lg border-2 border-primary bg-primary/5 transition-all flex flex-col items-center gap-2 active">
                            <i class="fas fa-walking text-2xl text-primary"></i>
                            <span class="font-medium text-primary">Normal</span>
                        </button>
                        <button type="button" data-speed="1.3" class="flex-1 speed-setting-btn p-4 rounded-lg border-2 border-base-300 hover:border-primary transition-all flex flex-col items-center gap-2">
                            <span class="text-2xl">🐇</span>
                            <span class="font-medium">Fast</span>
                        </button>
                    </div>
                </div>
                
                <button id="closeSettingsModal" class="btn btn-primary w-full gap-2">
                    <i class="fas fa-check"></i>
                    Start Reading
                </button>
            </div>
        </div>

        <!-- Floating Audio Controls Button -->
        <div class="fixed bottom-6 right-6 z-50" id="floatingTTSControls">
            <button id="toggleTTSControlsBtn" class="btn btn-circle btn-lg btn-primary shadow-2xl hover:shadow-primary/50 transition-all">
                <i class="fas fa-volume-up text-xl"></i>
            </button>
        </div>
        
        <!-- Floating TTS Controls Panel -->
        <div id="ttsControlsPanel" class="fixed bottom-24 right-6 z-50 bg-base-100 p-4 rounded-2xl shadow-2xl border-2 border-primary/20 transition-all duration-300 opacity-0 scale-95 pointer-events-none" style="min-width: 300px;">
            <!-- Playback Controls -->
            <div class="flex items-center justify-between mb-3">
                <button id="playButton" class="btn btn-sm btn-primary gap-2 flex-1 mr-2">
                    <i class="fas fa-play"></i>
                    <span>Play</span>
                </button>

                <button id="pauseButton" class="btn btn-sm bg-yellow-500 hover:bg-yellow-600 text-white gap-2 flex-1 mr-2 hidden">
                    <i class="fas fa-pause"></i>
                    <span>Pause</span>
                </button>

                <button id="stopButton" class="btn btn-sm bg-red-500 hover:bg-red-600 text-white gap-2 flex-1 mr-2 hidden">
                    <i class="fas fa-stop"></i>
                    <span>Stop</span>
                </button>
                
                <button id="settingsBtn" class="btn btn-sm btn-ghost btn-circle" title="Settings">
                    <i class="fas fa-cog"></i>
                </button>
            </div>
            
            <!-- Progress Bar -->
            <div class="mb-3 hidden" id="readingProgress">
                <div class="relative h-2 bg-base-200 rounded-full overflow-hidden">
                    <div id="progressBar" class="h-full bg-gradient-to-r from-primary to-secondary transition-all duration-300" style="width: 0%"></div>
                </div>
                <span id="progressText" class="text-xs text-primary font-medium mt-1 block text-center">0%</span>
            </div>
            
            <!-- Quick Settings -->
            <div class="flex gap-2 pt-2 border-t border-base-300">
                <!-- Speed Control -->
                <div class="flex-1">
                    <label class="text-xs font-medium text-base-content/70 block mb-1">
                        <i class="fas fa-tachometer-alt mr-1"></i>Speed
                    </label>
                    <div class="flex gap-1" id="speedControls">
                        <button type="button" data-speed="0.7" class="speed-btn flex-1 p-2 rounded-md hover:bg-primary/10 transition-all text-lg">
                            🐢
                        </button>
                        <button type="button" data-speed="0.9" class="speed-btn flex-1 p-2 rounded-md bg-primary/10 border border-primary/30 transition-all active">
                            <i class="fas fa-walking text-primary"></i>
                        </button>
                        <button type="button" data-speed="1.3" class="speed-btn flex-1 p-2 rounded-md hover:bg-primary/10 transition-all text-lg">
                            🐇
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <style>
            /* Custom xs breakpoint for very small devices */
            @media (min-width: 400px) {
                .xs\:inline {
                    display: inline;
                }
                .xs\:hidden {
                    display: none;
                }
            }

            .speed-btn.active {
                @apply bg-primary/10 border-2 border-primary text-primary;
            }
            .speed-btn.active i {
                @apply text-primary;
            }
            .speed-btn.active span {
                @apply text-primary font-medium;
            }
            
            /* Dark mode specific styling */
            [data-theme="dark"] .reading-content {
                color: theme('colors.base-content');
            }
            [data-theme="dark"] .bg-gradient-to-r {
                background-image: linear-gradient(to right, rgba(var(--p), 0.1), rgba(var(--s), 0.1));
            }
            
            /* Make text size controls more touch-friendly on mobile */
            @media (max-width: 640px) {
                #decreaseTextBtn, #resetTextBtn, #increaseTextBtn {
                    min-height: 1.75rem;
                    min-width: 1.75rem;
                    padding: 0.25rem;
                }
            }
        </style>

        <!-- Mark as Complete Button - Enhanced Responsiveness -->
        <form method="POST" action="{{ url_for('student.complete_reading', topic_id=topic.id) }}" class="mt-6 sm:mt-8">
            {{ form.csrf_token }}
            <button id="completeButton" type="submit" class="btn btn-primary w-full flex items-center justify-center gap-1 sm:gap-2 text-xs sm:text-sm md:text-base py-2 sm:py-3 md:py-4 group hover:scale-105 transition-all duration-300">
                <i class="fas fa-check-circle text-sm sm:text-base"></i>
                <span class="whitespace-normal">
                    <span class="hidden xs:inline">Mark as Complete &</span>
                    <span class="inline xs:hidden">Complete &</span>
                    Continue to Speaking
                </span>
            </button>
        </form>
        
        <script>
            // Enhanced feedback for the complete button on mobile
            document.addEventListener('DOMContentLoaded', function() {
                const completeButton = document.getElementById('completeButton');
                
                if (completeButton) {
                    // Add active state for touch devices
                    completeButton.addEventListener('touchstart', function() {
                        completeButton.classList.add('active', 'scale-95');
                    });
                    
                    // Add loading state when submitted
                    const completeForm = completeButton.closest('form');
                    if (completeForm) {
                        completeForm.addEventListener('submit', function() {
                            completeButton.classList.add('loading');
                            completeButton.disabled = true;
                        });
                    }
                }
            });
        </script>
    </div>
</div>

{% block extra_js %}
<script>
let speechSynthesis = window.speechSynthesis;
let utterance = null;
let voicesList = [];

// Get available voices when they're loaded
speechSynthesis.onvoiceschanged = function() {
    voicesList = speechSynthesis.getVoices();
    populateVoiceList();
};

// Populate the voice selection dropdown
function populateVoiceList() {
    const voiceSelect = document.getElementById('voiceSelection');
    
    // Clear existing options except defaults
    while (voiceSelect.options.length > 3) {
        voiceSelect.remove(3);
    }
    
    // Group voices by gender (based on name patterns)
    const maleVoices = [];
    const femaleVoices = [];
    
    voicesList.forEach(voice => {
        // Simple heuristic: voices with "female" in name or containing common female names
        const isFemale = voice.name.toLowerCase().includes('female') || 
                         voice.name.toLowerCase().includes('woman') ||
                         /samantha|karen|tessa|monica|alva|amelie|anna/i.test(voice.name);
                         
        // Voices with "male" in name or containing common male names
        const isMale = voice.name.toLowerCase().includes('male') || 
                       voice.name.toLowerCase().includes('man') ||
                       /david|tom|alex|john|daniel|victor|thomas/i.test(voice.name);
        
        if (isFemale) {
            femaleVoices.push(voice);
        } else if (isMale) {
            maleVoices.push(voice);
        }
    });
    
    // Populate male voices
    maleVoices.forEach(voice => {
        const option = document.createElement('option');
        option.textContent = voice.name;
        option.setAttribute('data-gender', 'male');
        option.value = voice.name;
        voiceSelect.appendChild(option);
    });
    
    // Populate female voices
    femaleVoices.forEach(voice => {
        const option = document.createElement('option');
        option.textContent = voice.name;
        option.setAttribute('data-gender', 'female');
        option.value = voice.name;
        voiceSelect.appendChild(option);
    });
    
}

// Initialize voices list if available immediately
if (speechSynthesis.getVoices().length > 0) {
    voicesList = speechSynthesis.getVoices();
    populateVoiceList();
}

// TTS Controls UI Handling
document.addEventListener('DOMContentLoaded', function() {
    // Setup modal and controls
    const settingsModal = document.getElementById('settingsModal');
    const closeSettingsBtn = document.getElementById('closeSettingsModal');
    const toggleTTSBtn = document.getElementById('toggleTTSControlsBtn');
    const ttsPanel = document.getElementById('ttsControlsPanel');
    const settingsBtn = document.getElementById('settingsBtn');
    
    // Initialize modal with saved preferences
    const savedGender = localStorage.getItem('ttsVoiceGender') || 'female';
    console.log('Reading Stage - Initializing with gender:', savedGender);
    
    // Set the correct button as active in modal
    document.querySelectorAll('.voice-setting-btn').forEach(btn => {
        const btnGender = btn.getAttribute('data-voice');
        if (btnGender === savedGender) {
            btn.classList.add('active', 'border-primary', 'bg-primary/5');
            btn.classList.remove('border-base-300');
            btn.querySelector('i').classList.add('text-primary');
            btn.querySelector('span').classList.add('text-primary');
        } else {
            btn.classList.remove('active', 'border-primary', 'bg-primary/5');
            btn.classList.add('border-base-300');
            btn.querySelector('i').classList.remove('text-primary');
            btn.querySelector('span').classList.remove('text-primary');
        }
    });
    
    // Show settings modal on page load
    setTimeout(() => {
        settingsModal.style.display = 'flex';
    }, 500);
    
    // Handle settings modal close
    closeSettingsBtn.addEventListener('click', function() {
        settingsModal.style.display = 'none';
    });
    
    
    // Handle speed selection in modal
    document.querySelectorAll('.speed-setting-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.querySelectorAll('.speed-setting-btn').forEach(b => {
                b.classList.remove('active', 'border-primary', 'bg-primary/5');
                b.classList.add('border-base-300');
                const icon = b.querySelector('i');
                const span = b.querySelector('span');
                if (icon) icon.classList.remove('text-primary');
                if (span) span.classList.remove('text-primary');
            });
            this.classList.add('active', 'border-primary', 'bg-primary/5');
            this.classList.remove('border-base-300');
            const icon = this.querySelector('i');
            const span = this.querySelector('span');
            if (icon) icon.classList.add('text-primary');
            if (span) span.classList.add('text-primary');
            
            // Update the main speed control
            const speed = this.getAttribute('data-speed');
            document.querySelectorAll('.speed-btn').forEach(sBtn => {
                sBtn.classList.remove('active', 'bg-primary/10', 'border', 'border-primary/30');
                if (sBtn.getAttribute('data-speed') === speed) {
                    sBtn.classList.add('active', 'bg-primary/10', 'border', 'border-primary/30');
                    const i = sBtn.querySelector('i');
                    if (i) i.classList.add('text-primary');
                } else {
                    const i = sBtn.querySelector('i');
                    if (i) i.classList.remove('text-primary');
                }
            });
        });
    });
    
    // Toggle TTS panel
    if (toggleTTSBtn && ttsPanel) {
        toggleTTSBtn.addEventListener('click', function() {
            const isHidden = ttsPanel.classList.contains('pointer-events-none');
            if (isHidden) {
                ttsPanel.classList.remove('opacity-0', 'scale-95', 'pointer-events-none');
                ttsPanel.classList.add('opacity-100', 'scale-100');
            } else {
                ttsPanel.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
                ttsPanel.classList.remove('opacity-100', 'scale-100');
            }
        });
    }
    
    // Open settings from panel
    if (settingsBtn) {
        settingsBtn.addEventListener('click', function() {
            settingsModal.style.display = 'flex';
        });
    }
    
    // Close panel when clicking outside
    document.addEventListener('click', function(e) {
        if (ttsPanel && toggleTTSBtn && !ttsPanel.contains(e.target) && !toggleTTSBtn.contains(e.target)) {
            ttsPanel.classList.add('opacity-0', 'scale-95', 'pointer-events-none');
            ttsPanel.classList.remove('opacity-100', 'scale-100');
        }
    });
});

document.getElementById('playButton').addEventListener('click', async function() {
    // FORCE stop any existing speech - critical for voice change
    if (speechSynthesis.speaking || speechSynthesis.pending) {
        speechSynthesis.cancel();
        await new Promise(resolve => setTimeout(resolve, 100));
    }
    
    if (utterance && speechSynthesis.speaking) return;
    
    // Ensure voices are loaded
    if (voicesList.length === 0) {
        console.log('Voices not loaded yet, loading...');
        voicesList = speechSynthesis.getVoices();
        if (voicesList.length === 0) {
            alert('Voice list is not available yet. Please try again in a moment.');
            return;
        }
    }

    // Get the reading content element
    const contentDiv = document.querySelector('.reading-content');
    if (!contentDiv) return;
    
    // Clear any existing highlights
    clearHighlights();

    // Extract and clean the text content
    const extractReadableText = (element) => {
        let text = '';
        element.childNodes.forEach(node => {
            if (node.nodeName === 'STYLE') return;
            if (node.nodeType === Node.TEXT_NODE) {
                text += node.textContent.trim() + ' ';
            } else if (node.nodeType === Node.ELEMENT_NODE) {
                if (node.tagName === 'DIV' && node.classList.contains('note')) {
                    text += node.textContent.replace(/^Note:\s*/, '') + '. ';
                } else if (['H1', 'H2', 'H3'].includes(node.tagName)) {
                    text += node.textContent.trim() + '. ';
                } else if (node.tagName === 'P') {
                    text += node.textContent.trim() + ' ';
                } else {
                    text += extractReadableText(node);
                }
            }
        });
        return text;
    };

    const readableText = extractReadableText(contentDiv)
        .replace(/\s+/g, ' ')
        .trim();

    // Split text into sentences for more human-like playback and highlighting
    const sentences = readableText.match(/[^.!?]+[.!?]+(\s|$)/g) || [readableText];
    
    // Create a map of sentences to their corresponding elements
    const sentenceElements = findSentenceElements(contentDiv);

    // Get active speed button
    const activeSpeedBtn = document.querySelector('.speed-btn.active');
    const rate = activeSpeedBtn ? parseFloat(activeSpeedBtn.dataset.speed) : 0.9;

    // Get English voice (use default system voice)
    const voices = speechSynthesis.getVoices();
    const selectedVoice = voices.find(v => v.lang.startsWith('en')) || voices[0];

    document.getElementById('playButton').classList.add('hidden');
    document.getElementById('pauseButton').classList.remove('hidden');
    document.getElementById('stopButton').classList.remove('hidden');
    document.getElementById('readingProgress').classList.remove('hidden');
    document.getElementById('progressText').classList.remove('hidden');

    let stopped = false;
    document.getElementById('stopButton').onclick = function() {
        stopped = true;
        speechSynthesis.cancel();
        document.getElementById('playButton').classList.remove('hidden');
        document.getElementById('pauseButton').classList.add('hidden');
        document.getElementById('stopButton').classList.add('hidden');
        document.getElementById('readingProgress').classList.add('hidden');
        document.getElementById('progressBar').style.width = '0%';
        document.getElementById('progressText').textContent = '0%';
        clearHighlights();
    };

    for (let i = 0; i < sentences.length; i++) {
        if (stopped) break;
        let sentence = sentences[i].trim();
        if (!sentence) continue;
        utterance = new SpeechSynthesisUtterance(sentence);
        
        // Set voice
        if (selectedVoice) {
            utterance.voice = selectedVoice;
            utterance.lang = selectedVoice.lang;
        }
        
        // Set rate and pitch
        utterance.rate = rate;
        utterance.pitch = 1;

        // Progress bar update
        utterance.onstart = function() {
            const percent = Math.round((i / sentences.length) * 100);
            document.getElementById('progressBar').style.width = percent + '%';
            document.getElementById('progressText').textContent = percent + '%';
            
            // Highlight current sentence
            highlightSentence(sentence, sentenceElements);
        };
        
        utterance.onend = function() {
            // This will be overridden for all except the last sentence
        };

        await new Promise(resolve => {
            utterance.onend = resolve;
            speechSynthesis.speak(utterance);
        });

        // Add a short pause between sentences, adjusted by reading speed
        const pauseDuration = Math.round(250 / rate); // Shorter pause for faster speeds
        await new Promise(res => setTimeout(res, pauseDuration));
    }

    // Reset UI after finishing
    document.getElementById('playButton').classList.remove('hidden');
    document.getElementById('pauseButton').classList.add('hidden');
    document.getElementById('stopButton').classList.add('hidden');
    document.getElementById('readingProgress').classList.add('hidden');
    document.getElementById('progressText').classList.add('hidden');
    document.getElementById('progressBar').style.width = '0%';
    document.getElementById('progressText').textContent = '0%';
    
    // Clear all highlights
    clearHighlights();
});

document.getElementById('pauseButton').addEventListener('click', function() {
    if (speechSynthesis.speaking) {
        speechSynthesis.pause();
        this.innerHTML = `
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"/>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>Resume</span>`;
    } else if (speechSynthesis.paused) {
        speechSynthesis.resume();
        this.innerHTML = `
            <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 9v6m4-6v6m7-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            <span>Pause</span>`;
    }
});

document.getElementById('stopButton').addEventListener('click', function() {
    speechSynthesis.cancel();
    document.getElementById('playButton').classList.remove('hidden');
    document.getElementById('pauseButton').classList.add('hidden');
    document.getElementById('stopButton').classList.add('hidden');
    document.getElementById('readingProgress').classList.add('hidden');
    document.getElementById('progressText').classList.add('hidden');
    document.getElementById('progressBar').style.width = '0%';
    
    clearHighlights();
});

// Update speech rate when speed control changes
document.querySelectorAll('.speed-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // Update active state
        document.querySelectorAll('.speed-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // Update speech rate
        const speed = parseFloat(this.dataset.speed);
        if (utterance) {
            utterance.rate = speed;
            
            // If currently speaking, restart with new rate
            if (speechSynthesis.speaking) {
                const currentText = utterance.text;
                speechSynthesis.cancel();
                
                setTimeout(() => {
                    utterance = new SpeechSynthesisUtterance(currentText);
                    utterance.rate = speed;
                    
                    // Restore voice selection and other settings
                    const voiceSelection = document.getElementById('voiceSelection');
                    if (voiceSelection.value !== 'default') {
                        const selectedVoice = voicesList.find(voice => voice.name === voiceSelection.value);
                        if (selectedVoice) {
                            utterance.voice = selectedVoice;
                        }
                    }
                    
                    utterance.onstart = function() {
                        document.getElementById('playButton').classList.add('hidden');
                        document.getElementById('pauseButton').classList.remove('hidden');
                        document.getElementById('stopButton').classList.remove('hidden');
                        document.getElementById('readingProgress').classList.remove('hidden');
                    };
                    
                    utterance.onend = function() {
                        document.getElementById('playButton').classList.remove('hidden');
                        document.getElementById('pauseButton').classList.add('hidden');
                        document.getElementById('stopButton').classList.add('hidden');
                        document.getElementById('readingProgress').classList.add('hidden');
                        document.getElementById('progressBar').style.width = '0%';
                        document.getElementById('progressText').textContent = '0%';
                    };

                    utterance.onboundary = function(event) {
                        if (event.name === 'word') {
                            const progress = (event.charIndex / utterance.text.length) * 100;
                            document.getElementById('progressBar').style.width = `${progress}%`;
                            document.getElementById('progressText').textContent = `${Math.round(progress)}%`;
                        }
                    };
                    
                    speechSynthesis.speak(utterance);
                }, 50);
            }
        }
    });
});

document.querySelectorAll('.voice-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // Update active state
        document.querySelectorAll('.voice-btn').forEach(b => b.classList.remove('active'));
        this.classList.add('active');
        
        // Update voice selection
        const voiceType = this.dataset.voice;
        if (utterance) {
            // Find matching voice
            const matchingVoices = voicesList.filter(voice => {
                if (voiceType === 'male') {
                    return voice.name.toLowerCase().includes('male') || 
                           /david|tom|alex|john|daniel|victor|thomas/i.test(voice.name);
                } else {
                    return voice.name.toLowerCase().includes('female') || 
                           /samantha|karen|tessa|monica|alva|amelie|anna/i.test(voice.name);
                }
            });
            
            if (matchingVoices.length > 0) {
                utterance.voice = matchingVoices[0];
                
                // If currently speaking, restart with new voice
                if (speechSynthesis.speaking) {
                    const currentText = utterance.text;
                    const currentRate = utterance.rate;
                    speechSynthesis.cancel();
                    
                    setTimeout(() => {
                        utterance = new SpeechSynthesisUtterance(currentText);
                        utterance.rate = currentRate;
                        utterance.voice = matchingVoices[0];
                        
                        // Restore other event handlers
                        utterance.onstart = function() {
                            document.getElementById('playButton').classList.add('hidden');
                            document.getElementById('pauseButton').classList.remove('hidden');
                            document.getElementById('stopButton').classList.remove('hidden');
                            document.getElementById('readingProgress').classList.remove('hidden');
                        };
                        
                        utterance.onend = function() {
                            document.getElementById('playButton').classList.remove('hidden');
                            document.getElementById('pauseButton').classList.add('hidden');
                            document.getElementById('stopButton').classList.add('hidden');
                            document.getElementById('readingProgress').classList.add('hidden');
                            document.getElementById('progressBar').style.width = '0%';
                            document.getElementById('progressText').textContent = '0%';
                        };

                        utterance.onboundary = function(event) {
                            if (event.name === 'word') {
                                const progress = (event.charIndex / utterance.text.length) * 100;
                                document.getElementById('progressBar').style.width = `${progress}%`;
                                document.getElementById('progressText').textContent = `${Math.round(progress)}%`;
                            }
                        };
                        
                        speechSynthesis.speak(utterance);
                    }, 50);
                }
            }
        }
    });
});

// Improved button handlers for highlighting active options
document.querySelectorAll('.speed-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // Update active state
        document.querySelectorAll('.speed-btn').forEach(b => {
            b.classList.remove('active');
            b.classList.remove('bg-primary/5');
            b.classList.remove('border-2');
            b.classList.remove('border-primary');
            b.classList.remove('border-primary/20');
        });
        
        // Add active class and styling
        this.classList.add('active');
        this.classList.add('bg-primary/5');
        this.classList.add('border-2');
        this.classList.add('border-primary');
        
        // Save the selection to localStorage for persistence
        localStorage.setItem('preferredReadingSpeed', this.dataset.speed);
        
        // Update speech rate
        const speed = parseFloat(this.dataset.speed);
        
        // Update animation speeds based on reading rate
        const transitionSpeed = Math.max(0.2, 0.3 / speed); // Faster reading = quicker transitions
        const animationDuration = Math.max(0.5, 1.5 / speed); // Faster reading = quicker animation
        
        // Update CSS variables and transitions
        document.documentElement.style.setProperty('--pulse-duration', `${animationDuration}s`);
        document.querySelectorAll('.highlight-sentence').forEach(el => {
            el.style.transition = `background-color ${transitionSpeed}s ease-in-out`;
        });
        
        if (utterance) {
            utterance.rate = speed;
            
            // If currently speaking, restart with new rate
            // ...existing code...
        }
    });
});

document.querySelectorAll('.voice-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        // Update active state
        document.querySelectorAll('.voice-btn').forEach(b => {
            b.classList.remove('active');
            b.classList.remove('bg-primary/5');
            b.classList.remove('border-2');
            b.classList.remove('border-primary');
            b.classList.remove('border-primary/20');
        });
        
        // Add active class and styling
        this.classList.add('active');
        this.classList.add('bg-primary/5');
        this.classList.add('border-2');
        this.classList.add('border-primary');
        
        // Save the selection to localStorage for persistence
        localStorage.setItem('preferredVoiceType', this.dataset.voice);
        
        // Update voice selection
        // ...existing code...
    });
});

// Functions for sentence highlighting
function findSentenceElements(contentContainer) {
    // This function prepares the content for sentence-level highlighting
    const elements = contentContainer.querySelectorAll('p, h1, h2, h3, .note');
    
    // Process each element to wrap sentences in spans for targeted highlighting
    elements.forEach(element => {
        // Skip if already processed
        if (element.getAttribute('data-processed') === 'true') return;
        
        const text = element.innerHTML;
        if (!text) return;
        
        // This regex captures sentences while preserving HTML tags
        const newHTML = text.replace(/([^.!?]+[.!?]+)(\s|$)/g, '<span class="sentence">$1</span>$2');
        element.innerHTML = newHTML;
        element.setAttribute('data-processed', 'true');
    });
    
    // Now map sentences to their containing spans
    const sentenceMap = new Map();
    const sentenceSpans = contentContainer.querySelectorAll('.sentence');
    
    sentenceSpans.forEach(span => {
        const text = span.textContent.trim();
        if (!sentenceMap.has(text)) {
            sentenceMap.set(text, []);
        }
        sentenceMap.get(text).push(span);
    });
    
    return sentenceMap;
}

function highlightSentence(sentence, sentenceMap) {
    // Clear previous highlights
    clearHighlights();
    
    // Find spans containing this exact sentence
    const sentenceSpans = sentenceMap.get(sentence.trim());
    
    if (sentenceSpans && sentenceSpans.length > 0) {
        // Highlight matching sentence spans
        sentenceSpans.forEach(span => {
            span.classList.add('highlight-sentence');
            
            // Get the active speed for animation speed adjustment
            const activeSpeedBtn = document.querySelector('.speed-btn.active');
            const rate = activeSpeedBtn ? parseFloat(activeSpeedBtn.dataset.speed) : 0.9;
            
            // Adjust transition speed based on reading rate
            const transitionSpeed = Math.max(0.2, 0.3 / rate); // Faster reading = quicker transitions
            span.style.transition = `background-color ${transitionSpeed}s ease-in-out`;
            
            // Scroll to the highlighted sentence if needed
            span.scrollIntoView({ behavior: 'smooth', block: 'center' });
        });
    } else {
        // Fallback to fuzzy matching if exact match fails
        fuzzyHighlightSentence(sentence, document.querySelector('.reading-content'));
    }
}

function fuzzyHighlightSentence(sentence, container) {
    // Fallback method that tries to find the closest matching text
    const sentenceSpans = container.querySelectorAll('.sentence');
    let bestMatch = null;
    let highestSimilarity = 0;
    
    sentence = sentence.trim().toLowerCase();
    
    sentenceSpans.forEach(span => {
        const spanText = span.textContent.trim().toLowerCase();
        
        // Simple similarity check (percentage of words that match)
        const sentenceWords = new Set(sentence.split(/\s+/));
        const spanWords = new Set(spanText.split(/\s+/));
        
        let matchCount = 0;
        sentenceWords.forEach(word => {
            if (spanWords.has(word)) matchCount++;
        });
        
        const similarity = matchCount / Math.max(sentenceWords.size, 1);
        
        if (similarity > highestSimilarity) {
            highestSimilarity = similarity;
            bestMatch = span;
        }
    });
    
    // If we found a reasonable match, highlight it
    if (bestMatch && highestSimilarity > 0.5) {
        bestMatch.classList.add('highlight-sentence');
        
        // Get active speed
        const activeSpeedBtn = document.querySelector('.speed-btn.active');
        const rate = activeSpeedBtn ? parseFloat(activeSpeedBtn.dataset.speed) : 0.9;
        
        // Adjust transition speed
        const transitionSpeed = Math.max(0.2, 0.3 / rate);
        bestMatch.style.transition = `background-color ${transitionSpeed}s ease-in-out`;
        
        // Scroll to the highlighted sentence
        bestMatch.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
}

function clearHighlights() {
    // Remove all sentence highlights
    document.querySelectorAll('.highlight-sentence').forEach(el => {
        el.classList.remove('highlight-sentence');
        el.style.transition = ''; // Reset transition
    });
}

    // Text size adjustment functionality
function initializeTextSizeControls() {
    const contentContainer = document.querySelector('.reading-content');
    const decreaseBtn = document.getElementById('decreaseTextBtn');
    const resetBtn = document.getElementById('resetTextBtn');
    const increaseBtn = document.getElementById('increaseTextBtn');
    
    if (!contentContainer || !decreaseBtn || !resetBtn || !increaseBtn) return;
    
    // Default and current size tracking
    const defaultSize = window.getComputedStyle(contentContainer).fontSize;
    let currentSizeNum = parseFloat(defaultSize);
    const defaultSizeNum = currentSizeNum;
    
    // Store size in localStorage if available
    const storedSize = localStorage.getItem('readingTextSize');
    if (storedSize) {
        contentContainer.style.fontSize = storedSize;
        currentSizeNum = parseFloat(storedSize);
    }
    
    // Size adjustment functions with feedback indication
    decreaseBtn.addEventListener('click', () => {
        if (currentSizeNum > 12) { // Minimum size limit
            currentSizeNum -= 1;
            applyFontSize();
            showButtonFeedback(decreaseBtn);
        }
    });
    
    resetBtn.addEventListener('click', () => {
        currentSizeNum = defaultSizeNum;
        applyFontSize();
        showButtonFeedback(resetBtn);
    });
    
    increaseBtn.addEventListener('click', () => {
        if (currentSizeNum < 24) { // Maximum size limit
            currentSizeNum += 1;
            applyFontSize();
            showButtonFeedback(increaseBtn);
        }
    });
    
    // Add touch event handlers for mobile devices to enhance responsiveness
    decreaseBtn.addEventListener('touchstart', handleTouchStart);
    resetBtn.addEventListener('touchstart', handleTouchStart);
    increaseBtn.addEventListener('touchstart', handleTouchStart);
    
    function handleTouchStart(e) {
        // Prevent default to avoid double-tap zoom on mobile
        e.preventDefault();
        
        // Manually trigger click event
        this.click();
    }
    
    function showButtonFeedback(button) {
        // Visual feedback for button press
        button.classList.add('bg-primary', 'text-primary-content');
        setTimeout(() => {
            button.classList.remove('bg-primary', 'text-primary-content');
        }, 200);
    }
    
    function applyFontSize() {
        const newSize = currentSizeNum + 'px';
        contentContainer.style.fontSize = newSize;
        // Save to localStorage if available
        try {
            localStorage.setItem('readingTextSize', newSize);
        } catch (e) {
            console.log('Could not save text size preference');
        }
    }
}// Initialize from saved preferences
document.addEventListener('DOMContentLoaded', function() {
    // Initialize text size controls
    initializeTextSizeControls();
    
    // Restore speed preference
    const savedSpeed = localStorage.getItem('preferredReadingSpeed');
    if (savedSpeed) {
        const speedBtn = document.querySelector(`.speed-btn[data-speed="${savedSpeed}"]`);
        if (speedBtn) {
            speedBtn.click();
        }
    }
    
    // Restore voice preference
    const savedVoice = localStorage.getItem('preferredVoiceType');
    if (savedVoice) {
        const voiceBtn = document.querySelector(`.voice-btn[data-voice="${savedVoice}"]`);
        if (voiceBtn) {
            voiceBtn.click();
        }
    }
    
    // Set CSS animation variables based on selected speed
    const activeSpeedBtn = document.querySelector('.speed-btn.active');
    const rate = activeSpeedBtn ? parseFloat(activeSpeedBtn.dataset.speed) : 0.9;
    
    // Calculate pulse animation speed based on reading rate
    const animationDuration = Math.max(0.5, 1.5 / rate); // Faster reading = quicker animation
    document.documentElement.style.setProperty('--pulse-duration', `${animationDuration}s`);
});
</script>
{% endblock %}
{% endblock %}