{% extends 'base.html' %}
{% block title %}Student Dashboard{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto space-y-6 sm:space-y-8">
    <!-- Enhanced Gradient Header with Typing Animation -->
    <div class="relative bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 text-white rounded-2xl shadow-2xl overflow-hidden">
        <!-- Animated Background Pattern -->
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: url('data:image/svg+xml,%3Csvg width=\'60\' height=\'60\' viewBox=\'0 0 60 60\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' fill-rule=\'evenodd\'%3E%3Cg fill=\'%23ffffff\' fill-opacity=\'1\'%3E%3Cpath d=\'M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
        </div>
        
        <div class="relative p-6 sm:p-8 lg:p-10">
            <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-6">
                <div class="space-y-4 flex-1">
                    <div class="flex items-center gap-3 mb-2">
                        <div class="w-16 h-16 bg-white/20 backdrop-blur-lg rounded-2xl flex items-center justify-center shadow-lg">
                            <i class="fas fa-graduation-cap text-3xl"></i>
                        </div>
                        <div>
                            <p class="text-white/80 text-sm font-medium">Welcome back,</p>
                            <h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white">
                                <span id="typing-text" class="inline-block min-h-[2.5rem] text-white"></span>
                                <span class="typing-cursor animate-pulse text-white">|</span>
                            </h1>
                        </div>
                    </div>
                    <p class="text-white/90 text-lg opacity-0 animate-fadeIn" style="animation-delay: 5s; animation-fill-mode: forwards;">
                        Continue your English learning journey and achieve your goals! 🎯
                    </p>
                </div>
                
                <!-- Quick Action Buttons -->
                <div class="flex flex-col sm:flex-row lg:flex-col gap-3 w-full lg:w-auto">
                    <a href="{{ url_for('student.courses') }}" class="btn btn-md sm:btn-lg bg-white/20 backdrop-blur-lg border-white/30 hover:bg-white/30 text-white shadow-lg hover:shadow-xl transition-all duration-300 flex-1 lg:flex-none min-h-[44px]">
                        <i class="fas fa-book mr-2"></i>
                        <span class="text-sm sm:text-base">Browse Courses</span>
                    </a>
                    <a href="{{ url_for('student.my_results') }}" class="btn btn-md sm:btn-lg bg-white/20 backdrop-blur-lg border-white/30 hover:bg-white/30 text-white shadow-lg hover:shadow-xl transition-all duration-300 flex-1 lg:flex-none min-h-[44px]">
                        <i class="fas fa-clipboard-list mr-2"></i>
                        <span class="text-sm sm:text-base">My Results</span>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Unified Stats Section -->
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 mb-8 border border-gray-200 dark:border-gray-700">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-gray-700">
            <!-- Daily Streak -->
            <div class="pt-6 md:pt-0 first:pt-0">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-md">
                        <i class="fas fa-fire text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Daily Streak</h3>
                        <p class="text-xs text-gray-400 dark:text-gray-500">Keep it going!</p>
                    </div>
                </div>
                <div class="flex items-center justify-center mb-3">
                    <div class="relative">
                        <svg class="transform -rotate-90" width="100" height="100">
                            <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="6" fill="none" class="text-indigo-200 dark:text-indigo-900/30"/>
                            <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="6" fill="none" 
                                    class="text-indigo-600 transition-all duration-1000"
                                    stroke-dasharray="282.74" 
                                    stroke-dashoffset="{{ 282.74 - (282.74 * (user_stats.current_streak / max(user_stats.longest_streak, 1)) if user_stats.longest_streak else 0) }}"
                                    stroke-linecap="round"/>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="text-center">
                                <div class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">{{ user_stats.current_streak }}</div>
                                <div class="text-xs text-gray-500 dark:text-gray-400">days</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="text-center">
                    <p class="text-sm text-gray-600 dark:text-gray-400">Longest streak</p>
                    <p class="text-xl font-bold text-indigo-600 dark:text-indigo-400">{{ user_stats.longest_streak }} days</p>
                </div>
            </div>

            <!-- Vocabulary -->
            <div class="md:px-8 pt-6 md:pt-0">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-md">
                        <i class="fas fa-book text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Vocabulary</h3>
                        <p class="text-xs text-gray-400 dark:text-gray-500">Words mastered</p>
                    </div>
                </div>
                <div class="text-center mb-3">
                    <div class="text-6xl font-bold text-indigo-600 dark:text-indigo-400 mb-2">
                        {{ user_stats.vocabulary_count }}
                    </div>
                    <p class="text-sm text-gray-600 dark:text-gray-400">Total words learned</p>
                </div>
                <a href="{{ url_for('student.vocabulary') }}" class="btn btn-sm btn-outline border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-indigo-600 dark:hover:text-white w-full transition-all min-h-[44px] font-semibold">
                    <i class="fas fa-bookmark mr-2"></i>
                    <span>View Vocabulary</span>
                </a>
            </div>

            <!-- Progress -->
            <div class="md:px-8 pt-6 md:pt-0">
                <div class="flex items-center gap-3 mb-4">
                    <div class="w-14 h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-md">
                        <i class="fas fa-chart-line text-white text-2xl"></i>
                    </div>
                    <div>
                        <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Progress</h3>
                        <p class="text-xs text-gray-400 dark:text-gray-500">Overall completion</p>
                    </div>
                </div>
                <div class="flex items-center justify-center mb-3">
                    <div class="relative">
                        <svg class="transform -rotate-90" width="100" height="100">
                            <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="6" fill="none" class="text-indigo-200 dark:text-indigo-900/30"/>
                            <circle cx="50" cy="50" r="45" stroke="currentColor" stroke-width="6" fill="none" 
                                    class="text-indigo-600 transition-all duration-1000"
                                    stroke-dasharray="282.74" 
                                    stroke-dashoffset="{{ 282.74 - (282.74 * (user_stats.overall_progress / 100)) }}"
                                    stroke-linecap="round"/>
                        </svg>
                        <div class="absolute inset-0 flex items-center justify-center">
                            <div class="text-center">
                                <div class="text-3xl font-bold text-indigo-600 dark:text-indigo-400">{{ user_stats.overall_progress|round|int }}%</div>
                            </div>
                        </div>
                    </div>
                </div>
                <a href="{{ url_for('student.progress') }}" class="btn btn-sm btn-outline border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white dark:border-indigo-400 dark:text-indigo-400 dark:hover:bg-indigo-600 dark:hover:text-white w-full transition-all min-h-[44px] font-semibold">
                    <i class="fas fa-chart-bar mr-2"></i>
                    <span>View Details</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Quizzes Section -->
    <div class="bg-white dark:bg-gradient-to-r dark:from-slate-800 dark:to-slate-900 rounded-2xl shadow-lg p-4 sm:p-6 mb-6 border border-indigo-200 dark:border-slate-700 hover:shadow-xl transition-all duration-300">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div class="flex items-center gap-3 sm:gap-4 flex-1 w-full sm:w-auto">
                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                    <i class="fas fa-question-circle text-white text-xl sm:text-2xl"></i>
                </div>
                <div class="flex-1">
                    <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-white mb-0.5 sm:mb-1">Quizzes</h2>
                    <p class="text-xs sm:text-sm text-gray-600 dark:text-slate-300">Test your knowledge</p>
                </div>
            </div>
            <a href="{{ url_for('student.quiz_list') }}" class="btn bg-indigo-600 hover:bg-indigo-700 border-0 text-white shadow-lg hover:shadow-xl transition-all group px-4 sm:px-6 w-full sm:w-auto min-h-[44px] sm:min-h-[48px]">
                <i class="fas fa-play mr-2 text-sm sm:text-base"></i>
                <span class="font-bold text-sm sm:text-base">TAKE A QUIZ</span>
                <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform text-sm sm:text-base"></i>
            </a>
        </div>
    </div>

    <!-- My Results Section -->
    <div class="bg-white dark:bg-gradient-to-r dark:from-slate-800 dark:to-slate-900 rounded-2xl shadow-lg p-4 sm:p-6 mb-6 border border-indigo-200 dark:border-slate-700 hover:shadow-xl transition-all duration-300">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div class="flex items-center gap-3 sm:gap-4 flex-1 w-full sm:w-auto">
                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                    <i class="fas fa-clipboard-list text-white text-xl sm:text-2xl"></i>
                </div>
                <div class="flex-1">
                    <h2 class="text-lg sm:text-xl font-bold text-gray-800 dark:text-white mb-0.5 sm:mb-1">My Results</h2>
                    <p class="text-xs sm:text-sm text-gray-600 dark:text-slate-300">Track your performance</p>
                </div>
            </div>
            <a href="{{ url_for('student.my_results') }}" class="btn bg-indigo-600 hover:bg-indigo-700 border-0 text-white shadow-lg hover:shadow-xl transition-all group px-4 sm:px-6 w-full sm:w-auto min-h-[44px] sm:min-h-[48px]">
                <i class="fas fa-eye mr-2 text-sm sm:text-base"></i>
                <span class="font-bold text-sm sm:text-base">VIEW RESULTS</span>
                <i class="fas fa-arrow-right ml-2 group-hover:translate-x-1 transition-transform text-sm sm:text-base"></i>
            </a>
        </div>
    </div>
    
    <!-- Enhanced Daily Dictionary Section -->
    <div class="card bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-900/20 dark:to-blue-900/20 shadow-xl hover:shadow-2xl transition-all duration-300 border border-indigo-200 dark:border-indigo-800">
        <div class="card-body p-4 sm:p-6">
            <!-- Header - Responsive Layout -->
            <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
                <div class="flex items-center gap-3 flex-1">
                    <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                        <i class="fas fa-book-open text-white text-xl sm:text-2xl"></i>
                    </div>
                    <div>
                        <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white">Daily Dictionary</h2>
                        <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Expand your vocabulary</p>
                    </div>
                </div>
                <div class="flex flex-wrap items-center gap-2 sm:gap-3 w-full sm:w-auto">
                    <div class="badge bg-indigo-600 text-white shadow-md px-2 sm:px-3 py-2 sm:py-3 text-xs font-semibold border-0">Word of the Day</div>
                    <button onclick="toggleDictionary()" id="toggle-dictionary-btn" class="btn btn-sm btn-ghost hover:bg-indigo-100 dark:hover:bg-indigo-900/50 rounded-lg min-h-[44px] border border-transparent hover:border-indigo-200">
                        <span id="toggle-text" class="text-xs sm:text-sm font-semibold">Show More</span>
                        <i id="toggle-icon" class="fas fa-chevron-down ml-1 text-xs sm:text-sm"></i>
                    </button>
                    <a href="{{ url_for('student.vocabulary') }}" class="text-xs sm:text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold flex items-center gap-1 sm:gap-2 group px-2 py-1 rounded hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all">
                        <span>View All</span>
                        <i class="fas fa-arrow-right group-hover:translate-x-1 transition-transform text-xs"></i>
                    </a>
                </div>
            </div>
            
            <!-- Word of the Day Container -->
            <div class="bg-white dark:bg-gray-800 rounded-2xl p-4 sm:p-6 shadow-inner border border-indigo-100 dark:border-indigo-900">
                <!-- Main Word Section (Always Visible) -->
                <div class="text-center mb-4 sm:mb-6">
                    <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br from-indigo-100 to-blue-100 dark:from-indigo-900/50 dark:to-blue-900/50 rounded-full flex items-center justify-center mx-auto mb-3 sm:mb-4">
                        <i class="fas fa-spell-check text-3xl sm:text-4xl text-indigo-600 dark:text-indigo-400"></i>
                    </div>
                    <div class="flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-3 mb-3">
                        <h3 class="text-2xl sm:text-3xl font-bold text-indigo-600 dark:text-indigo-400 break-words max-w-full" id="word-of-day">
                            {{ latest_dictionary_entry.word if latest_dictionary_entry else 'No word added yet' }}
                        </h3>
                        <button onclick="speakText('word-of-day')" class="btn btn-circle btn-md bg-gradient-to-br from-indigo-500 to-indigo-600 border-0 hover:shadow-lg hover:scale-110 transition-all flex-shrink-0 min-w-[44px] min-h-[44px]" aria-label="Listen to pronunciation">
                            <i class="fas fa-volume-up text-white text-base sm:text-lg"></i>
                        </button>
                    </div>
                    <p class="text-xs sm:text-sm text-base-content/70 italic mb-2" id="word-pronunciation">
                        <!-- Pronunciation can be added to the model if needed -->
                    </p>
                    <div class="bg-indigo-50 dark:bg-indigo-900/30 rounded-xl p-3 sm:p-4 max-w-2xl mx-auto">
                        <p class="text-base sm:text-lg font-medium text-gray-800 dark:text-gray-200" id="word-definition">
                            {{ latest_dictionary_entry.definition if latest_dictionary_entry else '' }}
                        </p>
                    </div>
                </div>

                <!-- Expandable Content Section -->
                <div id="dictionary-expandable" class="hidden">
                    <!-- Synonyms & Antonyms Section -->
                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6 mb-4 sm:mb-6">
                        <!-- Synonyms Section -->
                        <div class="bg-white dark:bg-base-200 rounded-lg p-3 sm:p-4 shadow-sm">
                            <div class="flex flex-col xs:flex-row xs:items-center gap-2 xs:gap-2 mb-3">
                                <h4 class="font-semibold text-indigo-600 dark:text-indigo-400 text-sm sm:text-base">
                                    <i class="fas fa-plus-circle mr-1 sm:mr-2"></i>Synonyms
                                </h4>
                                <button onclick="speakText('synonyms-list')" class="btn btn-circle btn-sm btn-outline border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 self-start xs:self-center min-w-[36px] min-h-[36px] sm:min-w-[44px] sm:min-h-[44px]" aria-label="Listen to synonyms">
                                    <i class="fas fa-volume-up text-xs sm:text-sm"></i>
                                </button>
                            </div>
                            <div id="synonyms-list" class="space-y-1 sm:space-y-2">
                                {% if latest_dictionary_entry and latest_dictionary_entry.synonyms %}
                                    {% for synonym in latest_dictionary_entry.synonyms.split(',') %}
                                        <span class="inline-block bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300 px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm mr-1 sm:mr-2 mb-1 sm:mb-2">{{ synonym.strip() }}</span>
                                    {% endfor %}
                                {% else %}
                                    <span class="text-gray-400">No synonyms</span>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Antonyms Section -->
                        <div class="bg-white dark:bg-base-200 rounded-lg p-3 sm:p-4 shadow-sm">
                            <div class="flex flex-col xs:flex-row xs:items-center gap-2 xs:gap-2 mb-3">
                                <h4 class="font-semibold text-red-600 dark:text-red-400 text-sm sm:text-base">
                                    <i class="fas fa-minus-circle mr-1 sm:mr-2"></i>Antonyms
                                </h4>
                                <button onclick="speakText('antonyms-list')" class="btn btn-circle btn-sm btn-outline border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white hover:border-red-600 self-start xs:self-center min-w-[36px] min-h-[36px] sm:min-w-[44px] sm:min-h-[44px]" aria-label="Listen to antonyms">
                                    <i class="fas fa-volume-up text-xs sm:text-sm"></i>
                                </button>
                            </div>
                            <div id="antonyms-list" class="space-y-1 sm:space-y-2">
                                {% if latest_dictionary_entry and latest_dictionary_entry.antonyms %}
                                    {% for antonym in latest_dictionary_entry.antonyms.split(',') %}
                                        <span class="inline-block bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 px-2 sm:px-3 py-1 rounded-full text-xs sm:text-sm mr-1 sm:mr-2 mb-1 sm:mb-2">{{ antonym.strip() }}</span>
                                    {% endfor %}
                                {% else %}
                                    <span class="text-gray-400">No antonyms</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>

                    <!-- Example Sentence Section -->
                    <div class="bg-white dark:bg-base-200 rounded-lg p-3 sm:p-4 shadow-sm mb-4 sm:mb-6">
                        <div class="flex flex-col xs:flex-row xs:items-center gap-2 xs:gap-2 mb-3">
                            <h4 class="font-semibold text-indigo-600 dark:text-indigo-400 text-sm sm:text-base">
                                <i class="fas fa-quote-left mr-1 sm:mr-2"></i>Example Sentence
                            </h4>
                            <button onclick="speakText('example-sentence')" class="btn btn-circle btn-sm btn-outline border-2 border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white hover:border-indigo-600 self-start xs:self-center min-w-[36px] min-h-[36px] sm:min-w-[44px] sm:min-h-[44px]" aria-label="Listen to example">
                                <i class="fas fa-volume-up text-xs sm:text-sm"></i>
                            </button>
                        </div>
                        <p id="example-sentence" class="text-base-content italic text-sm sm:text-base lg:text-lg leading-relaxed">
                            {% if latest_dictionary_entry and latest_dictionary_entry.example_sentence %}
                                {{ latest_dictionary_entry.example_sentence }}
                            {% else %}
                                <span class="text-gray-400">No example sentence</span>
                            {% endif %}
                        </p>
                    </div>

                    <!-- Usage Tips -->
                    <div class="mb-4 sm:mb-6 p-3 sm:p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border-l-4 border-yellow-400">
                        <div class="flex flex-col xs:flex-row xs:items-start gap-2">
                            <i class="fas fa-lightbulb text-yellow-600 dark:text-yellow-400 mt-1 text-sm sm:text-base"></i>
                            <div class="flex-1">
                                <h5 class="font-semibold text-yellow-800 dark:text-yellow-300 mb-1 text-sm sm:text-base">Usage Tip</h5>
                                <p class="text-yellow-700 dark:text-yellow-200 text-xs sm:text-sm leading-relaxed">
                                    {% if latest_dictionary_entry and latest_dictionary_entry.suggestion %}
                                        {{ latest_dictionary_entry.suggestion }}
                                    {% else %}
                                        <span class="text-gray-400">No usage tip</span>
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons -->
                    <div class="flex flex-col sm:flex-row flex-wrap gap-2 sm:gap-3 justify-center">
                        <button onclick="playFullDictionary()" class="btn btn-primary btn-sm sm:btn-md w-full sm:w-auto">
                            <i class="fas fa-play mr-2"></i>
                            <span class="hidden xs:inline">Play All Content</span>
                            <span class="xs:hidden">Play All</span>
                        </button>
                        <button onclick="refreshDailyWord()" class="btn btn-outline btn-accent btn-sm sm:btn-md w-full sm:w-auto">
                            <i class="fas fa-refresh mr-2"></i>
                            <span class="hidden xs:inline">New Word</span>
                            <span class="xs:hidden">Refresh</span>
                        </button>
                        <button onclick="addToVocabulary()" class="btn btn-outline btn-success btn-sm sm:btn-md w-full sm:w-auto">
                            <i class="fas fa-bookmark mr-2"></i>
                            <span class="hidden xs:inline">Save to Vocabulary</span>
                            <span class="xs:hidden">Save</span>
                        </button>
                    </div>
                </div>

                <!-- Collapsed State Quick Actions -->
                <div id="dictionary-collapsed" class="flex flex-col sm:flex-row gap-2 sm:gap-3 justify-center">
                    <button onclick="speakText('word-of-day')" class="btn btn-outline btn-primary btn-sm w-full sm:w-auto">
                        <i class="fas fa-volume-up mr-2"></i>
                        <span class="hidden xs:inline">Pronounce Word</span>
                        <span class="xs:hidden">Pronounce</span>
                    </button>
                    <button onclick="addToVocabulary()" class="btn btn-outline btn-success btn-sm w-full sm:w-auto">
                        <i class="fas fa-bookmark mr-2"></i>
                        <span class="hidden xs:inline">Save to Vocabulary</span>
                        <span class="xs:hidden">Save</span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Enhanced Learning Categories Section -->
    <div class="card bg-gradient-to-br from-indigo-50 to-blue-50 dark:from-indigo-900/20 dark:to-blue-900/20 shadow-xl hover:shadow-2xl transition-all duration-300 border border-indigo-200 dark:border-indigo-800" id="topicCategories">
        <div class="card-body p-4 sm:p-6">
            <div class="flex items-center gap-3 mb-4 sm:mb-6">
                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg flex-shrink-0">
                    <i class="fas fa-graduation-cap text-white text-xl sm:text-2xl"></i>
                </div>
                <div>
                    <h2 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-white">Learning Categories</h2>
                    <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400">Explore topics by category</p>
                </div>
            </div>
            
            <div class="space-y-3 sm:space-y-4">
                {% for category, topic_list in categories.items() %}
                    <div class="collapse collapse-arrow bg-white dark:bg-gray-800 shadow-md hover:shadow-lg transition-all border border-indigo-100 dark:border-indigo-900 rounded-xl">
                        <input type="radio" name="categories-accordion" {% if loop.first %}checked{% endif %} /> 
                        <div class="collapse-title font-semibold flex flex-wrap items-center text-base sm:text-lg gap-2 py-3 sm:py-4">
                            <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-lg flex items-center justify-center shadow-md flex-shrink-0">
                                <i class="fas fa-folder text-white text-sm sm:text-base"></i>
                            </div>
                            <span class="text-gray-800 dark:text-white flex-1 min-w-0 break-words">{{ category }}</span>
                            <div class="badge bg-indigo-600 text-white shadow-sm border-0 text-xs sm:text-sm px-2 py-2 sm:px-3">{{ topic_list|length }} topics</div>
                        </div>
                        <div class="collapse-content bg-indigo-50/50 dark:bg-indigo-900/10">
                            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-4 mt-3 sm:mt-4 p-2">
                                {% for topic in topic_list %}
                                    {% set progress_item = progress.get(topic.id) %}
                                    {% set is_locked = topic.id in locked_topics %}
                                    <div class="card bg-white dark:bg-gray-800 shadow-md {{ 'hover:shadow-xl transition-all duration-300 hover:-translate-y-1' if not is_locked else 'opacity-70' }} border border-indigo-100 dark:border-indigo-900 rounded-xl overflow-hidden group {{ 'relative' if is_locked }}">
                                        {% if is_locked %}
                                        <!-- Locked Overlay -->
                                        <div class="absolute top-2 right-2 z-10 bg-gray-800/90 text-white px-2 py-1 rounded-lg flex items-center gap-1 shadow-lg">
                                            <i class="fas fa-lock text-xs"></i>
                                            <span class="text-xs font-semibold">Locked</span>
                                        </div>
                                        {% endif %}
                                        <div class="card-body p-4 sm:p-5">
                                            <div class="flex items-start gap-2 sm:gap-3 mb-3">
                                                <div class="w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br {{ 'from-gray-400 to-gray-500' if is_locked else 'from-indigo-500 to-indigo-600' }} rounded-lg flex items-center justify-center flex-shrink-0 shadow-md {{ 'group-hover:scale-110 transition-transform' if not is_locked }}">
                                                    <i class="fas {{ 'fa-lock' if is_locked else 'fa-book-reader' }} text-white text-sm sm:text-base"></i>
                                                </div>
                                                <h3 class="font-bold text-sm sm:text-base {{ 'text-gray-500 dark:text-gray-500' if is_locked else 'text-gray-800 dark:text-white' }} leading-tight break-words">{{ topic.title }}</h3>
                                            </div>
                                            
                                            {% if progress_item %}
                                                <!-- Calculate progress percentage based on completed stages -->
                                                {% set stages_completed = 0 %}
                                                {% if progress_item.reading_completed %}
                                                    {% set stages_completed = stages_completed + 1 %}
                                                {% endif %}
                                                {% if progress_item.speaking_completed %}
                                                    {% set stages_completed = stages_completed + 1 %}
                                                {% endif %}
                                                {% if progress_item.comprehension_completed %}
                                                    {% set stages_completed = stages_completed + 1 %}
                                                {% endif %}
                                                
                                                {% set total_stages = 3 %}
                                                {% set percentage = (stages_completed / total_stages * 100)|int %}
                                                
                                                <!-- Progress Bar -->
                                                <div class="flex justify-between text-xs mt-2">
                                                    <span class="text-gray-600 dark:text-gray-400">Progress</span>
                                                    <span class="font-semibold text-gray-700 dark:text-gray-300">{{ percentage }}%</span>
                                                </div>
                                                <div class="w-full bg-base-200 rounded-full h-2 mt-1">
                                                    <div class="bg-indigo-600 h-2 rounded-full transition-all duration-300" 
                                                        style="width: {{ percentage }}%"></div>
                                                </div>
                                                <div class="mt-2">
                                                    {% if stages_completed == total_stages %}
                                                        <div class="badge badge-sm bg-indigo-600 text-white border-0 gap-1">
                                                            <i class="fas fa-check-circle text-xs"></i>
                                                            <span class="text-xs">Completed</span>
                                                        </div>
                                                    {% elif stages_completed > 0 %}
                                                        <div class="badge badge-sm bg-indigo-500 text-white border-0 gap-1">
                                                            <i class="fas fa-spinner text-xs"></i>
                                                            <span class="text-xs">In Progress</span>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            {% else %}
                                                <div class="flex justify-between text-xs mt-2">
                                                    <span class="text-gray-600 dark:text-gray-400">Not started</span>
                                                    <span class="font-semibold text-gray-700 dark:text-gray-300">0%</span>
                                                </div>
                                                <div class="w-full bg-base-200 rounded-full h-2 mt-1">
                                                    <div class="bg-base-300 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                                                </div>
                                                <div class="mt-2">
                                                    <div class="badge badge-sm badge-outline border-indigo-600 text-indigo-600 gap-1">
                                                        <i class="fas fa-star text-xs"></i>
                                                        <span class="text-xs">New</span>
                                                    </div>
                                                </div>
                                            {% endif %}

                                            <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-2 sm:gap-0 mt-3 sm:mt-4 pt-3 border-t border-indigo-100 dark:border-indigo-900">
                                                <div class="flex items-center gap-1 sm:gap-2 text-xs text-gray-500 dark:text-gray-400">
                                                    <i class="far fa-calendar-alt text-xs"></i>
                                                    <span class="text-xs">{{ topic.created_at.strftime('%b %d, %Y') }}</span>
                                                </div>
                                                {% if is_locked %}
                                                <button disabled 
                                                   class="btn btn-sm bg-gray-400 border-0 text-white cursor-not-allowed w-full sm:w-auto min-h-[40px] sm:min-h-[44px] font-semibold opacity-60"
                                                   title="Complete the previous topic to unlock">
                                                    <i class="fas fa-lock mr-1 text-xs sm:text-sm"></i>
                                                    <span class="text-xs sm:text-sm">Locked</span>
                                                </button>
                                                {% else %}
                                                <a href="{{ url_for('student.topic_view', topic_id=topic.id) }}" 
                                                   class="btn btn-sm bg-gradient-to-r from-indigo-500 to-indigo-600 border-0 text-white hover:shadow-lg hover:from-indigo-600 hover:to-indigo-700 transition-all group w-full sm:w-auto min-h-[40px] sm:min-h-[44px] font-semibold">
                                                    <span class="text-xs sm:text-sm">{% if progress_item %}Continue{% else %}Start{% endif %}</span>
                                                    <i class="fas fa-arrow-right ml-1 group-hover:translate-x-1 transition-transform text-xs sm:text-sm"></i>
                                                </a>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Add typing animation style and script -->
<style>
    @keyframes blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
    
    .typing-cursor {
        animation: blink 1s infinite;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    .animate-fadeIn {
        animation: fadeIn 1s ease-in-out forwards;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const typingElement = document.getElementById('typing-text');
        const username = "{{ current_user.first_name|default(current_user.username, true) }}";
        
        // Get time-based greeting
        const hour = new Date().getHours();
        let timeGreeting;
        
        if (hour >= 5 && hour < 12) {
            timeGreeting = "Good morning";
        } else if (hour >= 12 && hour < 17) {
            timeGreeting = "Good afternoon";
        } else if (hour >= 17 && hour < 21) {
            timeGreeting = "Good evening";
        } else {
            timeGreeting = "Good night";
        }
        
        // Phrases to type
        const phrases = [
            `Assalam o Alaikum, ${username}`,
            `${timeGreeting}, ${username}`,
            "Welcome to your learning space",
            "Let us Learn English"
        ];
        
        // Animation states
        const STATE = {
            TYPING: 'typing',
            PAUSING: 'pausing',
            DELETING: 'deleting',
            TRANSITIONING: 'transitioning'
        };
        
        // Animation configuration (constant throughout animation)
        const CONFIG = {
            TYPING_SPEED_MS: 120,    // Milliseconds per character when typing
            DELETING_SPEED_MS: 80,   // Milliseconds per character when deleting
            PAUSE_DURATION_MS: 3000, // How long to pause after typing
            TRANSITION_MS: 800       // Pause between phrases
        };
        
        // Animation controller
        const controller = {
            currentPhrase: 0,            // Current phrase index
            currentChar: 0,              // Current character position
            lastUpdateTime: 0,           // Last animation update timestamp
            state: STATE.TYPING,         // Current animation state
            waitUntil: 0                 // Timestamp to wait until for pauses
        };
        
        // Function to reset for a new phrase
        function resetForNewPhrase() {
            controller.currentChar = 0;
            controller.state = STATE.TYPING;
            controller.waitUntil = 0;
        }
        
        // Main animation function using requestAnimationFrame for smoother animation
        function animate(currentTime) {
            // Initialize lastUpdateTime on first run
            if (!controller.lastUpdateTime) {
                controller.lastUpdateTime = currentTime;
            }
            
            // Handle pausing states
            if (controller.state === STATE.PAUSING || controller.state === STATE.TRANSITIONING) {
                if (currentTime >= controller.waitUntil) {
                    // Move to next state after pause is complete
                    if (controller.state === STATE.PAUSING) {
                        controller.state = STATE.DELETING;
                    } else if (controller.state === STATE.TRANSITIONING) {
                        // Move to next phrase
                        controller.currentPhrase = (controller.currentPhrase + 1) % phrases.length;
                        resetForNewPhrase();
                    }
                }
                requestAnimationFrame(animate);
                return;
            }
            
            // Get current phrase
            const phrase = phrases[controller.currentPhrase];
            
            // Calculate time since last update
            const deltaTime = currentTime - controller.lastUpdateTime;
            
            // Determine if it's time to update based on current state and timing
            let shouldUpdate = false;
            
            if (controller.state === STATE.TYPING && deltaTime >= CONFIG.TYPING_SPEED_MS) {
                shouldUpdate = true;
            } else if (controller.state === STATE.DELETING && deltaTime >= CONFIG.DELETING_SPEED_MS) {
                shouldUpdate = true;
            }
            
            // Update the animation if it's time
            if (shouldUpdate) {
                controller.lastUpdateTime = currentTime;
                
                if (controller.state === STATE.TYPING) {
                    // Typing state: add one character
                    controller.currentChar++;
                    typingElement.textContent = phrase.substring(0, controller.currentChar);
                    
                    // If we finished typing the phrase, move to pausing state
                    if (controller.currentChar >= phrase.length) {
                        controller.state = STATE.PAUSING;
                        controller.waitUntil = currentTime + CONFIG.PAUSE_DURATION_MS;
                    }
                } else if (controller.state === STATE.DELETING) {
                    // Deleting state: remove one character
                    controller.currentChar--;
                    typingElement.textContent = phrase.substring(0, controller.currentChar);
                    
                    // If we deleted all characters, move to transitioning state
                    if (controller.currentChar <= 0) {
                        controller.state = STATE.TRANSITIONING;
                        controller.waitUntil = currentTime + CONFIG.TRANSITION_MS;
                    }
                }
            }
            
            // Continue the animation loop
            requestAnimationFrame(animate);
        }
        
        // Start the animation
        setTimeout(() => {
            requestAnimationFrame(animate);
        }, 500);
    });

    // Text-to-Speech Functions for Daily Dictionary
    function speakText(elementId) {
        const element = document.getElementById(elementId);
        if (!element) return;
        
        // Get the text content, removing HTML tags for clean speech
        let textToSpeak = element.textContent || element.innerText;
        
        // Clean up the text for better pronunciation
        textToSpeak = textToSpeak.trim();
        
        // Check if speech synthesis is supported
        if ('speechSynthesis' in window) {
            // Cancel any ongoing speech
            window.speechSynthesis.cancel();
            
            // Wait a bit for voices to load
            setTimeout(() => {
                // Create speech synthesis utterance
                const utterance = new SpeechSynthesisUtterance(textToSpeak);
                
                // Configure speech settings
                utterance.rate = 0.8; // Slightly slower for learning
                utterance.pitch = 1;
                utterance.volume = 1;
                
                // Get preferred gender and select voice by URI
                const preferredGender = localStorage.getItem('ttsVoiceGender') || 'female';
                const voices = window.speechSynthesis.getVoices();
                
                let selectedVoiceURI = null;
                for (let voice of voices) {
                    if (!voice.lang.startsWith('en')) continue;
                    const name = voice.name.toLowerCase();
                    
                    if (preferredGender === 'male') {
                        if ((name.includes('male') || name.includes('david') || name.includes('mark')) && 
                            !name.includes('female')) {
                            selectedVoiceURI = voice.voiceURI;
                            console.log('Dashboard - Selected MALE:', voice.name);
                            break;
                        }
                    } else {
                        if (name.includes('female') || name.includes('zira') || name.includes('susan')) {
                            selectedVoiceURI = voice.voiceURI;
                            console.log('Dashboard - Selected FEMALE:', voice.name);
                            break;
                        }
                    }
                }
                
                let englishVoice;
                if (selectedVoiceURI) {
                    englishVoice = voices.find(v => v.voiceURI === selectedVoiceURI);
                    if (englishVoice) {
                        console.log('Dashboard - Voice found by URI:', englishVoice.name);
                    }
                }
                
                // Fallback to any English voice
                if (!englishVoice) {
                    englishVoice = voices.find(v => v.lang.startsWith('en'));
                    if (englishVoice) {
                        console.log('Dashboard - Using fallback voice:', englishVoice.name);
                    }
                }
                
                if (englishVoice) {
                    utterance.voice = englishVoice;
                    utterance.lang = englishVoice.lang;
                    console.log('Dashboard - Final voice:', englishVoice.name, '| URI:', englishVoice.voiceURI);
                }
                
                // Speak the text
                window.speechSynthesis.speak(utterance);
            }, 100); // Small delay to ensure voices are loaded
        } else {
            alert('Text-to-speech is not supported in your browser.');
        }
    }

    // Play/Stop all daily dictionary content
    function playFullDictionary(event) {
        if (!('speechSynthesis' in window)) {
            alert('Text-to-speech is not supported in your browser.');
            return;
        }
        
        const playButton = event.target.closest('button');
        
        // Check if currently speaking - if yes, stop it
        if (window.speechSynthesis.speaking) {
            window.speechSynthesis.cancel();
            playButton.classList.remove('btn-active');
            playButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play All Content';
            return;
        }
        
        // Get all content elements
        const wordElement = document.getElementById('word-of-day');
        const definitionElement = document.getElementById('word-definition');
        const synonymsElement = document.getElementById('synonyms-list');
        const antonymsElement = document.getElementById('antonyms-list');
        const exampleElement = document.getElementById('example-sentence');
        
        // Prepare the full content
        const fullContent = [
            "Today's word of the day is: " + (wordElement?.textContent || ''),
            "Definition: " + (definitionElement?.textContent || ''),
            "Synonyms: " + (synonymsElement?.textContent || ''),
            "Antonyms: " + (antonymsElement?.textContent || ''),
            "Example sentence: " + (exampleElement?.textContent || '')
        ].join('. ');
        
        // Create and configure speech
        const utterance = new SpeechSynthesisUtterance(fullContent);
        utterance.rate = 0.8;
        utterance.pitch = 1;
        utterance.volume = 1;
        
        // Get preferred gender from localStorage
        const preferredGender = localStorage.getItem('ttsVoiceGender') || 'female';
        console.log('Dashboard Play All - Preferred gender:', preferredGender);
        
        // Try to use a high-quality English voice matching the preferred gender
        const voices = window.speechSynthesis.getVoices();
        console.log('Dashboard Play All - Total voices available:', voices.length);
        
        let englishVoice;
        if (preferredGender === 'male') {
            // Look for male voices
            englishVoice = voices.find(voice => 
                voice.lang.startsWith('en') && 
                (voice.name.toLowerCase().includes('male') && !voice.name.toLowerCase().includes('female'))
            );
            
            if (!englishVoice) {
                englishVoice = voices.find(voice => 
                    voice.lang.startsWith('en') && 
                    /david|tom|alex|john|daniel|victor|thomas|james|mark|george/i.test(voice.name)
                );
            }
        } else {
            // Look for female voices
            englishVoice = voices.find(voice => 
                voice.lang.startsWith('en') && 
                voice.name.toLowerCase().includes('female')
            );
            
            if (!englishVoice) {
                englishVoice = voices.find(voice => 
                    voice.lang.startsWith('en') && 
                    /samantha|karen|tessa|monica|alva|amelie|anna|zira|hazel|susan/i.test(voice.name)
                );
            }
        }
        
        // Fallback to any English voice
        if (!englishVoice) {
            englishVoice = voices.find(voice => voice.lang.startsWith('en'));
        }
        
        if (englishVoice) {
            utterance.voice = englishVoice;
            console.log('Dashboard Play All - Selected voice:', englishVoice.name);
        }
        
        // Visual feedback for play all button
        playButton.classList.add('btn-active');
        playButton.innerHTML = '<i class="fas fa-stop mr-2"></i>Stop';
        
        utterance.onend = () => {
            playButton.classList.remove('btn-active');
            playButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play All Content';
        };
        
        utterance.onerror = () => {
            playButton.classList.remove('btn-active');
            playButton.innerHTML = '<i class="fas fa-play mr-2"></i>Play All Content';
        };
        
        // Speak the full content
        window.speechSynthesis.speak(utterance);
    }

    // Refresh daily word (placeholder - would connect to backend in real implementation)
    function refreshDailyWord() {
        // Sample words for demonstration
        const sampleWords = [
            {
                word: "Eloquent",
                pronunciation: "/ˈɛləkwənt/",
                definition: "Fluent or persuasive in speaking or writing",
                synonyms: ["Articulate", "Fluent", "Persuasive", "Expressive"],
                antonyms: ["Inarticulate", "Hesitant", "Mumbling", "Unclear"],
                example: "Her <strong>eloquent</strong> speech moved the entire audience to tears."
            },
            {
                word: "Perseverance",
                pronunciation: "/ˌpɜrsəˈvɪrəns/",
                definition: "Persistence in doing something despite difficulty or delay in achieving success",
                synonyms: ["Persistence", "Determination", "Tenacity", "Steadfastness"],
                antonyms: ["Surrender", "Quitting", "Abandonment", "Laziness"],
                example: "Through <strong>perseverance</strong> and hard work, she finally achieved her dream of becoming a doctor."
            },
            {
                word: "Ubiquitous",
                pronunciation: "/juˈbɪkwɪtəs/",
                definition: "Present, appearing, or found everywhere",
                synonyms: ["Omnipresent", "Pervasive", "Universal", "Widespread"],
                antonyms: ["Rare", "Scarce", "Limited", "Absent"],
                example: "Smartphones have become <strong>ubiquitous</strong> in modern society."
            }
        ];
        
        // Select a random word
        const randomWord = sampleWords[Math.floor(Math.random() * sampleWords.length)];
        
        // Update the display
        document.getElementById('word-of-day').textContent = randomWord.word;
        document.getElementById('word-pronunciation').textContent = randomWord.pronunciation;
        document.getElementById('word-definition').textContent = randomWord.definition;
        
        // Update synonyms
        const synonymsContainer = document.getElementById('synonyms-list');
        synonymsContainer.innerHTML = randomWord.synonyms.map(synonym => 
            `<span class="inline-block bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300 px-3 py-1 rounded-full text-sm mr-2 mb-2">${synonym}</span>`
        ).join('');
        
        // Update antonyms
        const antonymsContainer = document.getElementById('antonyms-list');
        antonymsContainer.innerHTML = randomWord.antonyms.map(antonym => 
            `<span class="inline-block bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 px-3 py-1 rounded-full text-sm mr-2 mb-2">${antonym}</span>`
        ).join('');
        
        // Update example
        document.getElementById('example-sentence').innerHTML = `"${randomWord.example}"`;
        
        // Show success feedback
        const button = event.target;
        const originalContent = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check mr-2"></i>Updated!';
        button.classList.add('btn-success');
        
        setTimeout(() => {
            button.innerHTML = originalContent;
            button.classList.remove('btn-success');
        }, 2000);
    }

    // Add to vocabulary (connects to backend API)
    function addToVocabulary() {
        const word = document.getElementById('word-of-day').textContent;
        const pronunciation = document.getElementById('word-pronunciation').textContent;
        const definition = document.getElementById('word-definition').textContent;
        
        // Get synonyms
        const synonymsElement = document.getElementById('synonyms-list');
        let synonyms = [];
        if (synonymsElement) {
            const synonymSpans = synonymsElement.querySelectorAll('span');
            synonymSpans.forEach(span => {
                synonyms.push(span.textContent);
            });
        }
        
        // Get antonyms
        const antonymsElement = document.getElementById('antonyms-list');
        let antonyms = [];
        if (antonymsElement) {
            const antonymSpans = antonymsElement.querySelectorAll('span');
            antonymSpans.forEach(span => {
                antonyms.push(span.textContent);
            });
        }
        
        // Get example sentence
        const exampleElement = document.getElementById('example-sentence');
        const example = exampleElement ? exampleElement.textContent : '';
        
        // Prepare data for API
        const vocabularyData = {
            word: word,
            pronunciation: pronunciation,
            definition: definition,
            synonyms: synonyms,
            antonyms: antonyms,
            example: example
        };
        
        // Show loading state
        const button = event.target.closest('button');
        const originalContent = button.innerHTML;
        button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Saving...';
        button.disabled = true;
        
        // Send data to API
        fetch('{{ url_for("student.api_add_vocabulary") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRFToken': '{{ csrf_token() }}'
            },
            body: JSON.stringify(vocabularyData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                console.error('Error saving word:', data.error);
                button.innerHTML = '<i class="fas fa-times mr-2"></i>Failed';
                button.classList.add('btn-error');
                
                setTimeout(() => {
                    button.innerHTML = originalContent;
                    button.classList.remove('btn-error');
                    button.disabled = false;
                }, 2000);
            } else {
                console.log('Word saved:', data.message);
                button.innerHTML = '<i class="fas fa-check mr-2"></i>Saved!';
                button.classList.add('btn-success');
                
                setTimeout(() => {
                    button.innerHTML = originalContent;
                    button.classList.remove('btn-success');
                    button.disabled = false;
                    
                    // If the backend successfully saved to the database, offer to view vocabulary
                    if (data.success !== false) {
                        if (confirm('Word saved successfully! Do you want to view your vocabulary?')) {
                            window.location.href = "{{ url_for('student.vocabulary') }}";
                        }
                    } else {
                        // Just show a notification without redirect if database isn't ready
                        alert(data.message);
                    }
                }, 2000);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            button.innerHTML = '<i class="fas fa-times mr-2"></i>Failed';
            button.classList.add('btn-error');
            
            setTimeout(() => {
                button.innerHTML = originalContent;
                button.classList.remove('btn-error');
                button.disabled = false;
            }, 2000);
        });
    }

    // Ensure voices are loaded
    if ('speechSynthesis' in window) {
        speechSynthesis.onvoiceschanged = function() {
            // Voices are now loaded
        };
    }

    // Toggle Dictionary Show More/Show Less functionality
    function toggleDictionary() {
        const expandableContent = document.getElementById('dictionary-expandable');
        const collapsedContent = document.getElementById('dictionary-collapsed');
        const toggleBtn = document.getElementById('toggle-dictionary-btn');
        const toggleText = document.getElementById('toggle-text');
        const toggleIcon = document.getElementById('toggle-icon');
        
        const isCurrentlyExpanded = !expandableContent.classList.contains('hidden');
        
        if (isCurrentlyExpanded) {
            // Collapse the dictionary
            expandableContent.classList.add('hidden');
            collapsedContent.classList.remove('hidden');
            toggleText.textContent = 'Show More';
            toggleIcon.className = 'fas fa-chevron-down ml-1';
            toggleBtn.classList.remove('btn-active');
        } else {
            // Expand the dictionary
            expandableContent.classList.remove('hidden');
            collapsedContent.classList.add('hidden');
            toggleText.textContent = 'Show Less';
            toggleIcon.className = 'fas fa-chevron-up ml-1';
            toggleBtn.classList.add('btn-active');
        }
    }
</script>
{% endblock %}