// Vocabulary Learning Application Main Module
import { AudioManager } from '../utils/AudioManager.js';

export class VocabularyApp {
    constructor(state) {
        this.state = state;
        this.currentMode = 'flashcard';
        this.isCardFlipped = false;
        this.isMobileMenuOpen = false;
        this.unsubscribe = null;
        this.audioManager = new AudioManager();
    }

    async init() {
        // Subscribe to state changes
        this.unsubscribe = this.state.subscribe((event, data) => {
            this.onStateChange(event, data);
        });

        // Set initial current word if none selected
        if (!this.state.getCurrentWord()) {
            const reviewQueue = this.state.getReviewQueue();
            const newWords = this.state.getNewWords(1);
            const nextWord = reviewQueue[0] || newWords[0];
            
            if (nextWord) {
                this.state.setCurrentWord(nextWord);
            }
        }

        console.log('📚 VocabularyApp initialized');
    }

    render() {
        const progress = this.state.getProgress();
        const currentWord = this.state.getCurrentWord();
        
        return `
            <div class="vocabulary-layout">
                ${this.renderSidebar()}
                ${this.renderMainContent(progress, currentWord)}
            </div>
        `;
    }

    renderSidebar() {
        return `
            <!-- 手機版選單按鈕 -->
            <button class="mobile-menu-btn" id="mobileMenuBtn">☰</button>
            
            <!-- 側邊欄 -->
            <aside class="sidebar ${this.isMobileMenuOpen ? 'open' : ''}" id="sidebar">
                <div class="sidebar-header">
                    <a href="#" class="logo">
                        🎭 Drama Ling
                    </a>
                </div>

                <nav class="sidebar-nav">
                    <div class="nav-section">
                        <div class="nav-section-title">主要功能</div>
                        <a href="#" class="nav-item">
                            <span class="nav-icon">📊</span>
                            學習儀表板
                        </a>
                        <a href="#" class="nav-item active">
                            <span class="nav-icon">📚</span>
                            詞彙學習
                        </a>
                        <a href="#" class="nav-item">
                            <span class="nav-icon">💬</span>
                            對話練習
                        </a>
                        <a href="#" class="nav-item">
                            <span class="nav-icon">🎭</span>
                            角色扮演
                        </a>
                        <a href="#" class="nav-item">
                            <span class="nav-icon">🎵</span>
                            發音練習
                        </a>
                    </div>

                    <div class="nav-section">
                        <div class="nav-section-title">個人管理</div>
                        <a href="#" class="nav-item">
                            <span class="nav-icon">👤</span>
                            個人檔案
                        </a>
                        <a href="#" class="nav-item">
                            <span class="nav-icon">📈</span>
                            學習進度
                        </a>
                        <a href="#" class="nav-item">
                            <span class="nav-icon">⚙️</span>
                            設定
                        </a>
                    </div>

                    <div class="nav-section">
                        <div class="nav-section-title">訂閱服務</div>
                        <a href="#" class="nav-item">
                            <span class="nav-icon">💎</span>
                            訂閱管理
                        </a>
                    </div>
                </nav>

                <div class="sidebar-footer">
                    <div class="user-profile">
                        <div class="user-avatar">張</div>
                        <div class="user-info">
                            <div class="user-name">張小明</div>
                            <div class="user-level">Level 12</div>
                        </div>
                    </div>
                </div>
            </aside>
        `;
    }

    renderMainContent(progress, currentWord) {
        return `
            <!-- 主內容區 -->
            <main class="main-content">
                ${this.renderPageHeader(progress)}
                ${this.renderModeSelector()}
                ${this.renderFlashcardSection(currentWord)}
                ${this.renderVocabularyList()}
            </main>
        `;
    }

    renderPageHeader(progress) {
        return `
            <div class="page-header">
                <div class="header-section">
                    <div class="header-text">
                        <h1>詞彙學習</h1>
                        <p>透過間隔重複和情境學習，有效掌握新詞彙</p>
                    </div>
                    <div class="header-stats">
                        <div class="stat-item">
                            <span class="stat-value">${progress.learned || 0}</span>
                            <span class="stat-label">已學詞彙</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">${progress.todayNew || 0}</span>
                            <span class="stat-label">今日新增</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-value">${progress.masteryRate || 0}%</span>
                            <span class="stat-label">掌握程度</span>
                        </div>
                    </div>
                </div>
            </div>
        `;
    }

    renderModeSelector() {
        const reviewQueue = this.state.getReviewQueue();
        const newWords = this.state.getNewWords();
        
        return `
            <!-- 學習模式選擇 -->
            <div class="mode-selector">
                <div class="mode-card ${this.currentMode === 'flashcard' ? 'active' : ''}" data-mode="flashcard">
                    <div class="mode-icon">🃏</div>
                    <h3 class="mode-title">記憶卡片</h3>
                    <p class="mode-description">透過卡片翻轉快速記憶新詞彙</p>
                    <div class="mode-progress">
                        <span>待複習: ${reviewQueue.length}</span>
                        <span>新詞彙: ${newWords.length}</span>
                    </div>
                </div>

                <div class="mode-card ${this.currentMode === 'quiz' ? 'active' : ''}" data-mode="quiz">
                    <div class="mode-icon">🎯</div>
                    <h3 class="mode-title">詞彙測驗</h3>
                    <p class="mode-description">選擇題和填空題測試詞彙掌握</p>
                    <div class="mode-progress">
                        <span>正確率: 92%</span>
                        <span>完成: 45/50</span>
                    </div>
                </div>

                <div class="mode-card ${this.currentMode === 'context' ? 'active' : ''}" data-mode="context">
                    <div class="mode-icon">📖</div>
                    <h3 class="mode-title">情境學習</h3>
                    <p class="mode-description">在真實情境中學習詞彙運用</p>
                    <div class="mode-progress">
                        <span>場景: 咖啡廳</span>
                        <span>進度: 3/5</span>
                    </div>
                </div>
            </div>
        `;
    }

    renderFlashcardSection(currentWord) {
        if (!currentWord) {
            return `
                <div class="vocabulary-section" id="flashcardSection">
                    <div class="vocabulary-card">
                        <div class="no-words-message">
                            <h3>🎉 太棒了！</h3>
                            <p>目前沒有需要複習的詞彙</p>
                            <button class="control-btn primary" onclick="location.reload()">
                                重新開始學習
                            </button>
                        </div>
                    </div>
                </div>
            `;
        }

        return `
            <!-- 詞彙卡片學習區 -->
            <div class="vocabulary-section ${this.currentMode === 'flashcard' ? '' : 'hidden'}" id="flashcardSection">
                <div class="vocabulary-card">
                    <div class="vocabulary-word">${currentWord.word}</div>
                    <div class="vocabulary-phonetic">${currentWord.phonetic}</div>
                    <div class="vocabulary-definition ${this.isCardFlipped ? '' : 'hidden'}">${currentWord.definition}</div>
                    <div class="vocabulary-example ${this.isCardFlipped ? '' : 'hidden'}">
                        "${currentWord.example}"<br>
                        ${currentWord.translation}
                    </div>

                    <div class="vocabulary-controls">
                        <button class="control-btn" id="playAudioBtn">
                            🔊 發音
                        </button>
                        <button class="control-btn" id="flipCardBtn">
                            🔄 ${this.isCardFlipped ? '翻回' : '翻轉'}
                        </button>
                        <button class="control-btn primary" id="nextCardBtn">
                            下一個 →
                        </button>
                    </div>

                    <div class="difficulty-buttons ${this.isCardFlipped ? '' : 'hidden'}">
                        <button class="difficulty-btn easy" data-difficulty="easy">簡單 (3天後)</button>
                        <button class="difficulty-btn" data-difficulty="normal">普通 (1天後)</button>
                        <button class="difficulty-btn hard" data-difficulty="hard">困難 (10分鐘後)</button>
                    </div>
                </div>
            </div>
        `;
    }

    renderVocabularyList() {
        const allWords = this.state.getAllWords();
        
        return `
            <!-- 詞彙清單 -->
            <div class="vocabulary-list">
                <div class="list-header">
                    <h2 class="list-title">我的詞彙庫</h2>
                    <div class="filter-tabs">
                        <button class="filter-tab active" data-filter="all">全部</button>
                        <button class="filter-tab" data-filter="learning">學習中</button>
                        <button class="filter-tab" data-filter="learned">已掌握</button>
                        <button class="filter-tab" data-filter="new">需複習</button>
                    </div>
                </div>

                <div class="vocabulary-items">
                    ${allWords.map(word => this.renderVocabularyItem(word)).join('')}
                </div>
            </div>
        `;
    }

    renderVocabularyItem(word) {
        const statusClass = word.status === 'learned' ? 'learned' : 
                           word.status === 'learning' ? 'learning' : '';
        
        return `
            <div class="vocabulary-item" data-word-id="${word.id}">
                <div class="word-info">
                    <div class="mastery-indicator ${statusClass}"></div>
                    <div class="word-text">
                        <span class="word-main">${word.word}</span>
                        <span class="word-definition">${word.definition}</span>
                    </div>
                </div>
                <div class="word-status">
                    <button class="play-btn" data-word="${word.word}">▶</button>
                </div>
            </div>
        `;
    }

    bindEvents() {
        // 手機版選單切換
        const mobileMenuBtn = document.getElementById('mobileMenuBtn');
        const sidebar = document.getElementById('sidebar');
        
        if (mobileMenuBtn) {
            mobileMenuBtn.addEventListener('click', () => {
                this.isMobileMenuOpen = !this.isMobileMenuOpen;
                sidebar?.classList.toggle('open');
            });
        }

        // 點擊外部關閉側邊欄
        document.addEventListener('click', (e) => {
            if (window.innerWidth <= 1024 && 
                sidebar && !sidebar.contains(e.target) && 
                mobileMenuBtn && !mobileMenuBtn.contains(e.target)) {
                this.isMobileMenuOpen = false;
                sidebar.classList.remove('open');
            }
        });

        // 學習模式切換
        document.querySelectorAll('.mode-card').forEach(card => {
            card.addEventListener('click', () => {
                const mode = card.dataset.mode;
                this.switchMode(mode);
            });
        });

        // 詞彙卡片控制
        this.bindFlashcardEvents();

        // 詞彙清單互動
        this.bindVocabularyListEvents();

        // 響應式處理
        window.addEventListener('resize', () => {
            if (window.innerWidth > 1024) {
                this.isMobileMenuOpen = false;
                sidebar?.classList.remove('open');
            }
        });
    }

    bindFlashcardEvents() {
        const flipCardBtn = document.getElementById('flipCardBtn');
        const nextCardBtn = document.getElementById('nextCardBtn');
        const playAudioBtn = document.getElementById('playAudioBtn');
        
        if (flipCardBtn) {
            flipCardBtn.addEventListener('click', () => {
                this.flipCard();
            });
        }

        if (nextCardBtn) {
            nextCardBtn.addEventListener('click', () => {
                this.nextCard();
            });
        }

        if (playAudioBtn) {
            playAudioBtn.addEventListener('click', () => {
                this.playAudio();
            });
        }

        // 難度按鈕
        document.querySelectorAll('.difficulty-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                const difficulty = btn.dataset.difficulty;
                this.selectDifficulty(difficulty);
            });
        });
    }

    bindVocabularyListEvents() {
        // 篩選標籤
        document.querySelectorAll('.filter-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
                tab.classList.add('active');
                
                const filter = tab.dataset.filter;
                this.filterVocabulary(filter);
            });
        });

        // 詞彙項目點擊
        document.querySelectorAll('.vocabulary-item').forEach(item => {
            item.addEventListener('click', (e) => {
                if (!e.target.classList.contains('play-btn')) {
                    const wordId = item.dataset.wordId;
                    this.selectWord(wordId);
                }
            });
        });

        // 播放按鈕
        document.querySelectorAll('.play-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                e.stopPropagation();
                const word = btn.dataset.word;
                this.playWordAudio(word);
            });
        });
    }

    // Event Handlers
    switchMode(mode) {
        this.currentMode = mode;
        
        // 更新UI
        document.querySelectorAll('.mode-card').forEach(card => {
            card.classList.toggle('active', card.dataset.mode === mode);
        });

        // 顯示對應的學習區域
        const flashcardSection = document.getElementById('flashcardSection');
        
        if (mode === 'flashcard') {
            flashcardSection?.classList.remove('hidden');
        } else {
            flashcardSection?.classList.add('hidden');
            
            if (mode === 'quiz') {
                alert('詞彙測驗模式即將推出！');
            } else if (mode === 'context') {
                alert('情境學習模式即將推出！');
            }
        }
    }

    flipCard() {
        this.isCardFlipped = !this.isCardFlipped;
        
        // 更新UI
        const definition = document.querySelector('.vocabulary-definition');
        const example = document.querySelector('.vocabulary-example');
        const difficultyButtons = document.querySelector('.difficulty-buttons');
        const flipBtn = document.getElementById('flipCardBtn');
        
        if (this.isCardFlipped) {
            definition?.classList.remove('hidden');
            example?.classList.remove('hidden');
            difficultyButtons?.classList.remove('hidden');
            if (flipBtn) flipBtn.textContent = '🔄 翻回';
        } else {
            definition?.classList.add('hidden');
            example?.classList.add('hidden');
            difficultyButtons?.classList.add('hidden');
            if (flipBtn) flipBtn.textContent = '🔄 翻轉';
        }
    }

    nextCard() {
        // 重置翻轉狀態
        this.isCardFlipped = false;
        
        // 獲取下一個詞彙
        const reviewQueue = this.state.getReviewQueue();
        const newWords = this.state.getNewWords(1);
        const nextWord = reviewQueue[0] || newWords[0];
        
        if (nextWord) {
            this.state.setCurrentWord(nextWord);
        } else {
            // 沒有更多詞彙時重新渲染
            this.updateFlashcardSection();
        }
    }

    selectDifficulty(difficulty) {
        const currentWord = this.state.getCurrentWord();
        if (currentWord) {
            this.state.markWordReview(currentWord.id, difficulty);
            this.nextCard();
        }
    }

    selectWord(wordId) {
        const words = this.state.getAllWords();
        const word = words.find(w => w.id === wordId);
        if (word) {
            this.state.setCurrentWord(word);
            this.switchMode('flashcard');
        }
    }

    filterVocabulary(filter) {
        const items = document.querySelectorAll('.vocabulary-item');
        
        items.forEach(item => {
            const wordId = item.dataset.wordId;
            const words = this.state.getAllWords();
            const word = words.find(w => w.id === wordId);
            
            if (!word) return;
            
            let show = true;
            
            switch (filter) {
                case 'learning':
                    show = word.status === 'learning';
                    break;
                case 'learned':
                    show = word.status === 'learned';
                    break;
                case 'new':
                    show = word.status === 'new';
                    break;
                case 'all':
                default:
                    show = true;
            }
            
            item.style.display = show ? 'flex' : 'none';
        });
    }

    playAudio() {
        const currentWord = this.state.getCurrentWord();
        if (currentWord) {
            this.playWordAudio(currentWord.word);
        }
    }

    async playWordAudio(word) {
        try {
            console.log(`🔊 Playing pronunciation for: ${word}`);
            await this.audioManager.speakWord(word);
        } catch (error) {
            console.error('Failed to play audio:', error);
            // Fallback to alert for now
            alert(`🔊 播放 "${word}" 的發音 (${error.message})`);
        }
    }

    // State change handlers
    onStateChange(event, data) {
        switch (event) {
            case 'currentWordChanged':
                this.updateFlashcardSection();
                break;
            case 'progressUpdated':
                this.updateProgressStats();
                break;
            case 'wordUpdated':
            case 'wordAdded':
                this.updateVocabularyList();
                this.updateProgressStats();
                break;
        }
    }

    updateFlashcardSection() {
        const flashcardSection = document.getElementById('flashcardSection');
        if (flashcardSection) {
            const currentWord = this.state.getCurrentWord();
            flashcardSection.outerHTML = this.renderFlashcardSection(currentWord);
            this.bindFlashcardEvents();
        }
    }

    updateProgressStats() {
        const progress = this.state.getProgress();
        const statValues = document.querySelectorAll('.stat-value');
        
        if (statValues.length >= 3) {
            statValues[0].textContent = progress.learned || 0;
            statValues[1].textContent = progress.todayNew || 0;
            statValues[2].textContent = `${progress.masteryRate || 0}%`;
        }
    }

    updateVocabularyList() {
        const vocabularyItems = document.querySelector('.vocabulary-items');
        if (vocabularyItems) {
            const allWords = this.state.getAllWords();
            vocabularyItems.innerHTML = allWords.map(word => this.renderVocabularyItem(word)).join('');
            this.bindVocabularyListEvents();
        }
    }

    destroy() {
        if (this.unsubscribe) {
            this.unsubscribe();
        }
    }
}