{% extends 'base.html' %}
{% block title %}My Vocabulary{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Gradient Header -->
    <div class="bg-gradient-to-r from-primary via-secondary to-accent text-primary-content rounded-xl p-6 shadow-lg">
        <div class="flex flex-col md:flex-row md:justify-between md:items-center gap-4">
            <div class="space-y-3 flex-1">
                <h1 class="text-2xl md:text-3xl font-bold">My Vocabulary</h1>
                <p class="text-primary-content/80">Your personal collection of words and phrases.</p>
            </div>
            <div class="flex flex-col sm:flex-row gap-2 w-full md:w-auto">
                <a href="{{ url_for('student.dashboard') }}" class="btn btn-ghost border border-white text-white hover:bg-white/10 w-full sm:w-auto">
                    <i class="fas fa-arrow-left mr-2"></i>
                    Back to Dashboard
                </a>
            </div>
        </div>
    </div>

    <!-- Vocabulary Section -->
    <div class="card bg-base-100 shadow-xl">
        <div class="card-body p-4 sm:p-6">
            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 sm:mb-6 gap-2">
                <h2 class="card-title text-lg sm:text-xl">
                    <i class="fas fa-book-open text-primary mr-2"></i>
                    Saved Words
                </h2>
                <div class="flex items-center gap-2">
                    <div class="badge badge-accent text-xs sm:text-sm">
                        {% if vocabulary is defined and vocabulary %}
                            {% if vocabulary is iterable %}
                                {{ vocabulary|length }}
                            {% else %}
                                0
                            {% endif %}
                        {% else %}
                            0
                        {% endif %} words
                    </div>
                    <button onclick="toggleAddWordForm()" class="btn btn-sm btn-primary">
                        <i class="fas fa-plus mr-2"></i> Add Word
                    </button>
                </div>
            </div>
            
            <!-- Add New Word Form (Hidden by default) -->
            <div id="add-word-form" class="hidden mb-6 p-4 bg-base-200 rounded-lg border border-base-300">
                <h3 class="font-bold mb-4 flex items-center">
                    <i class="fas fa-plus-circle text-success mr-2"></i>
                    Add New Word to Vocabulary
                </h3>
                
                <form action="{{ url_for('student.add_vocabulary') }}" method="POST" class="space-y-4">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Word*</span>
                            </label>
                            <input type="text" name="word" class="input input-bordered w-full" required>
                        </div>
                        
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Pronunciation</span>
                            </label>
                            <input type="text" name="pronunciation" class="input input-bordered w-full" 
                                   placeholder="e.g., /ˈsɛrənˌdɪpɪti/">
                        </div>
                    </div>
                    
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Definition*</span>
                        </label>
                        <textarea name="definition" class="textarea textarea-bordered" required></textarea>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Synonyms</span>
                                <span class="label-text-alt">(comma-separated)</span>
                            </label>
                            <input type="text" name="synonyms" class="input input-bordered w-full" 
                                   placeholder="e.g., chance, luck, fortune">
                        </div>
                        
                        <div class="form-control">
                            <label class="label">
                                <span class="label-text">Antonyms</span>
                                <span class="label-text-alt">(comma-separated)</span>
                            </label>
                            <input type="text" name="antonyms" class="input input-bordered w-full"
                                   placeholder="e.g., misfortune, design, intent">
                        </div>
                    </div>
                    
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Example Sentence</span>
                        </label>
                        <textarea name="example" class="textarea textarea-bordered" 
                                  placeholder="e.g., She discovered the solution by serendipity."></textarea>
                    </div>
                    
                    <div class="flex justify-end gap-2">
                        <button type="button" onclick="toggleAddWordForm()" class="btn btn-ghost">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Word</button>
                    </div>
                </form>
            </div>
            
                        {% if db_error is defined and db_error %}
                <!-- Database Error State -->
                <div class="alert alert-warning mb-6">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
                    <div>
                        <h3 class="font-bold">Database Initialization Required</h3>
                        <p>The vocabulary database is still being set up. Words you add now will be saved temporarily in your browser session.</p>
                    </div>
                </div>
            {% endif %}

            {% if vocabulary is defined and vocabulary|length > 0 %}
                <!-- Word List (If vocabulary exists) -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    {% for word in vocabulary %}
                    <div class="bg-base-200 rounded-xl p-4 shadow-sm hover:shadow-md transition-all">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="text-lg font-bold text-primary">{{ word.word }}</h3>
                            <button onclick="speakText('word-{{ loop.index }}')" class="btn btn-circle btn-xs btn-outline">
                                <i class="fas fa-volume-up"></i>
                            </button>
                        </div>
                        
                        {% if word.pronunciation %}
                            <p class="text-xs text-base-content/70 italic mb-2">{{ word.pronunciation }}</p>
                        {% endif %}
                        
                        <p id="word-{{ loop.index }}" class="text-sm text-base-content/90 mb-3">{{ word.definition }}</p>
                        
                        {% if word.get_synonyms_list() %}
                            <div class="mb-2">
                                <span class="text-xs font-semibold text-green-600 dark:text-green-400">Synonyms:</span>
                                <div class="flex flex-wrap gap-1 mt-1">
                                    {% for synonym in word.get_synonyms_list() %}
                                        <span class="inline-block bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 px-2 py-1 rounded-full text-xs">{{ synonym }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        
                        {% if word.get_antonyms_list() %}
                            <div class="mb-2">
                                <span class="text-xs font-semibold text-red-600 dark:text-red-400">Antonyms:</span>
                                <div class="flex flex-wrap gap-1 mt-1">
                                    {% for antonym in word.get_antonyms_list() %}
                                        <span class="inline-block bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300 px-2 py-1 rounded-full text-xs">{{ antonym }}</span>
                                    {% endfor %}
                                </div>
                            </div>
                        {% endif %}
                        
                        {% if word.example %}
                            <div class="mt-3 p-2 bg-base-300/50 rounded text-xs italic">
                                <span class="text-xs font-semibold text-purple-600 dark:text-purple-400">Example:</span>
                                <p class="mt-1">{{ word.example|safe }}</p>
                            </div>
                        {% endif %}
                        
                        <div class="flex justify-between items-center mt-3 text-xs text-base-content/70">
                            <span>{{ word.date_added.strftime('%b %d, %Y') }}</span>
                            
                            <!-- Different action for temporary vs. database words -->
                            {% if word.id is string and word.id.startswith('temp_') %}
                                <!-- Temporary word stored in session -->
                                <div class="badge badge-warning">Temporary</div>
                            {% elif word.id == 0 %}
                                <!-- Sample word -->
                                <div class="badge badge-info">Sample</div>
                            {% else %}
                                <!-- Database word -->
                                <form action="{{ url_for('student.remove_vocabulary', word_id=word.id) }}" method="POST" class="inline">
                                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                    <button type="submit" onclick="return confirm('Are you sure you want to remove this word?')" class="btn btn-xs btn-outline btn-error">
                                        <i class="fas fa-trash mr-1"></i> Remove
                                    </button>
                                </form>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <!-- Empty State -->
                <div class="text-center py-8">
                    <div class="text-6xl text-primary/30 mb-4">
                        <i class="fas fa-book"></i>
                    </div>
                    <h3 class="text-xl font-medium mb-2">No saved vocabulary</h3>
                    <p class="text-base-content/70 mb-6">You haven't saved any words to your vocabulary yet.</p>
                    <p class="text-base-content/70">
                        Return to the <a href="{{ url_for('student.dashboard') }}" class="text-primary hover:underline">dashboard</a> to discover new words.
                    </p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Text-to-Speech Script -->
<script>
    // Toggle Add Word Form
    function toggleAddWordForm() {
        const form = document.getElementById('add-word-form');
        if (form.classList.contains('hidden')) {
            form.classList.remove('hidden');
            form.classList.add('animate-fadeIn');
            // Scroll to form
            form.scrollIntoView({ behavior: 'smooth', block: 'start' });
        } else {
            form.classList.add('hidden');
            form.classList.remove('animate-fadeIn');
        }
    }
    
    // Global voices cache
    let cachedVoices = [];

    // Load voices function
    function loadVoices() {
        return new Promise((resolve) => {
            let voices = window.speechSynthesis.getVoices();
            if (voices.length > 0) {
                cachedVoices = voices;
                resolve(voices);
            } else {
                window.speechSynthesis.onvoiceschanged = () => {
                    voices = window.speechSynthesis.getVoices();
                    cachedVoices = voices;
                    resolve(voices);
                };
            }
        });
    }

    // Initialize voices on page load
    if ('speechSynthesis' in window) {
        loadVoices();
    }

    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('Vocabulary - Selected MALE:', voice.name);
                            break;
                        }
                    } else {
                        if (name.includes('female') || name.includes('zira') || name.includes('susan')) {
                            selectedVoiceURI = voice.voiceURI;
                            console.log('Vocabulary - Selected FEMALE:', voice.name);
                            break;
                        }
                    }
                }
                
                let englishVoice;
                if (selectedVoiceURI) {
                    englishVoice = voices.find(v => v.voiceURI === selectedVoiceURI);
                    if (englishVoice) {
                        console.log('Vocabulary - Voice found by URI:', englishVoice.name);
                    }
                }
                
                }
                
                if (englishVoice) {
                    utterance.voice = englishVoice;
                    utterance.lang = englishVoice.lang;
                    console.log('Vocabulary - 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.');
        }
    }

    // Ensure voices are loaded
    if ('speechSynthesis' in window) {
        speechSynthesis.onvoiceschanged = function() {
            // Voices are now loaded
        };
    }
    
    // Add fade-in animation style
    document.addEventListener('DOMContentLoaded', function() {
        const style = document.createElement('style');
        style.innerHTML = `
            @keyframes fadeIn {
                from { opacity: 0; transform: translateY(-10px); }
                to { opacity: 1; transform: translateY(0); }
            }
            
            .animate-fadeIn {
                animation: fadeIn 0.3s ease-out forwards;
            }
        `;
        document.head.appendChild(style);
    });
</script>
{% endblock %}