字謎解決器技術實作 Anagram Solver Implementation

/**
 * Anagram Solver - Core Implementation
 * 字謎解決器核心實作類別
 */
class AnagramSolver {
    constructor() {
        // 語言系統初始化
        this.currentLanguage = 'zh';
        
        // 翻譯字典 - 完整雙語支援
        this.translations = {
            zh: {
                title: '🔤 字謎解決器',
                description: '輸入亂序字母，找出所有可能的英文單字組合',
                lettersLabel: '輸入字母：',
                placeholder: '例如：TEAM 或 MASTER',
                minLengthLabel: '最短字長：',
                sortLabel: '按字長分組',
                solveButton: '🔍 開始解謎',
                clearButton: '清除結果',
                foundWords: '找到 {count} 個單字',
                lettersGroup: '{length} 字母',
                noResults: '沒有找到符合的單字',
                noResultsSubtext: '請嘗試不同的字母組合或降低最短字長',
                calculating: '正在計算中...',
                invalidInput: '請輸入至少2個英文字母'
            },
            en: {
                title: '🔤 Anagram Solver',
                description: 'Enter scrambled letters to find all possible English word combinations',
                lettersLabel: 'Enter Letters:',
                placeholder: 'e.g., TEAM or MASTER',
                minLengthLabel: 'Min Length:',
                sortLabel: 'Group by Length',
                solveButton: '🔍 Solve Anagram',
                clearButton: 'Clear Results',
                foundWords: 'Found {count} words',
                lettersGroup: '{length} letters',
                noResults: 'No matching words found',
                noResultsSubtext: 'Try different letter combinations or lower minimum length',
                calculating: 'Calculating...',
                invalidInput: 'Please enter at least 2 English letters'
            }
        };

        // 內建英文詞彙庫 - 精選 2000+ 常用單字
        this.wordDictionary = [
            // 2字母高頻單字
            'am', 'an', 'as', 'at', 'be', 'by', 'do', 'go', 'he', 'if', 
            'in', 'is', 'it', 'me', 'my', 'no', 'of', 'on', 'or', 'so', 
            'to', 'up', 'we',
            
            // 3字母常用單字 (精選100個)
            'add', 'age', 'all', 'and', 'any', 'app', 'are', 'arm', 'art', 'ask',
            'bad', 'bag', 'bar', 'bat', 'bed', 'big', 'bit', 'box', 'boy', 'bug',
            'bus', 'but', 'buy', 'can', 'car', 'cat', 'cop', 'cow', 'cry', 'cup',
            'cut', 'day', 'did', 'die', 'dig', 'dog', 'ear', 'eat', 'egg', 'end',
            'eye', 'far', 'fat', 'few', 'fix', 'fly', 'for', 'fun', 'get', 'god',
            // ... (完整詞庫包含更多單字)
            
            // 4-6字母單字 (分類整理)
            'able', 'also', 'area', 'army', 'back', 'ball', 'bank', 'base',
            'about', 'above', 'abuse', 'adult', 'after', 'again', 'agent',
            'accept', 'access', 'across', 'acting', 'action', 'active'
            // ... (實際實作包含完整2000+詞彙)
        ];

        // 高效能資料結構初始化
        this.sortedLettersMap = new Map();   // 排序字母 → 單字陣列的映射
        this.lastResults = null;             // 快取最後結果
        
        // 初始化字典預處理
        this.initializeDictionary();
        
        // 啟動應用程序
        this.init();
    }

    /**
     * 字典預處理 - 核心效能優化
     * 將所有單字轉換為排序字母作為索引鍵
     * 時間複雜度: O(n * m log m) 其中 n=單字數量, m=平均字母數
     */
    initializeDictionary() {
        console.log('📚 開始字典預處理...');
        
        this.wordDictionary.forEach(word => {
            // 將單字字母排序作為鍵值 (例: "team" → "aemt")
            const sortedLetters = word.split('').sort().join('');
            
            // 建立映射關係
            if (!this.sortedLettersMap.has(sortedLetters)) {
                this.sortedLettersMap.set(sortedLetters, []);
            }
            this.sortedLettersMap.get(sortedLetters).push(word);
        });
        
        console.log(`✅ 字典預處理完成！處理了 ${this.wordDictionary.length} 個單字`);
        console.log(`📊 生成了 ${this.sortedLettersMap.size} 個唯一字母組合`);
    }

    /**
     * 應用程序初始化
     * 設定 DOM 元素、事件監聽器和語言系統
     */
    init() {
        this.setupElements();              // DOM 元素初始化
        this.setupEventListeners();       // 事件監聽器設定
        this.setupGlobalLanguageListener(); // 全域語言系統整合
        this.updateLanguage();            // 更新界面語言
        
        console.log('🚀 AnagramSolver 初始化完成');
    }
}

/**
 * 設置全域語言監聽器
 * 整合 Tool Master 統一語言系統
 */
setupGlobalLanguageListener() {
    // 監聽全域語言變更事件
    window.addEventListener('languageChanged', (event) => {
        this.currentLanguage = event.detail.language;
        this.updateLanguage();
        
        console.log(`🌐 語言已切換至: ${this.currentLanguage}`);
    });

    // 處理全域語言系統加載時序問題
    const checkGlobalLanguage = () => {
        if (window.globalI18n) {
            this.currentLanguage = window.globalI18n.currentLanguage;
            this.updateLanguage();
            console.log('✅ 已同步全域語言設定');
            return true;
        }
        return false;
    };

    // 如果全域系統尚未載入，延遲檢查
    if (!checkGlobalLanguage()) {
        setTimeout(() => {
            checkGlobalLanguage();
        }, 100);
    }
}

/**
 * 更新界面語言
 * 動態切換所有可見文字內容
 */
updateLanguage() {
    const t = this.translations[this.currentLanguage];
    
    // 更新主要界面元素
    const elements = {
        'main-title': t.title,
        'main-description': t.description,
        'letters-label': t.lettersLabel,
        'min-length-label': t.minLengthLabel,
        'sort-label': t.sortLabel,
        'solve-btn': t.solveButton,
        'clear-btn': t.clearButton
    };
    
    // 批次更新文字內容
    Object.entries(elements).forEach(([id, text]) => {
        const element = document.getElementById(id);
        if (element) {
            element.textContent = text;
        }
    });
    
    // 更新輸入提示文字
    const lettersInput = document.getElementById('letters-input');
    if (lettersInput) {
        lettersInput.placeholder = t.placeholder;
    }

    // 如果有搜尋結果，更新結果計數
    if (this.lastResults && this.lastResults.length > 0) {
        this.updateResultsCount(this.lastResults.length);
    }
    
    console.log(`📝 界面語言已更新為: ${this.currentLanguage}`);
}

/**
 * DOM 元素初始化
 * 獲取並快取所有關鍵 DOM 元素
 */
setupElements() {
    // 輸入控制元素
    this.lettersInput = document.getElementById('letters-input');
    this.minLengthInput = document.getElementById('min-length');
    this.sortCheckbox = document.getElementById('sort-by-length');
    
    // 操作按鈕
    this.solveBtn = document.getElementById('solve-btn');
    this.clearBtn = document.getElementById('clear-btn');
    
    // 結果顯示元素
    this.resultsSection = document.getElementById('results-section');
    this.resultsCount = document.getElementById('results-count');
    this.resultsContainer = document.getElementById('results-container');
    
    // 驗證關鍵元素存在性
    const requiredElements = [
        'lettersInput', 'minLengthInput', 'sortCheckbox',
        'solveBtn', 'clearBtn', 'resultsSection',
        'resultsCount', 'resultsContainer'
    ];
    
    requiredElements.forEach(elementName => {
        if (!this[elementName]) {
            console.warn(`⚠️ 找不到必要元素: ${elementName}`);
        }
    });
    
    console.log('🎯 DOM 元素初始化完成');
}

/**
 * 事件監聽器設定
 * 處理所有使用者互動事件
 */
setupEventListeners() {
    // 字母輸入過濾 - 只允許英文字母
    this.lettersInput.addEventListener('input', (e) => {
        // 移除非英文字母並轉換為大寫
        const cleanValue = e.target.value.replace(/[^a-zA-Z]/g, '').toUpperCase();
        e.target.value = cleanValue;
        
        // 即時驗證輸入長度
        if (cleanValue.length > 15) {
            e.target.value = cleanValue.slice(0, 15);
        }
    });

    // 解謎按鈕點擊事件
    this.solveBtn.addEventListener('click', () => {
        this.solveAnagram();
    });

    // 清除按鈕點擊事件
    this.clearBtn.addEventListener('click', () => {
        this.clearResults();
    });

    // Enter 鍵快速解謎
    this.lettersInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            this.solveAnagram();
        }
    });

    // 最短字長變更時自動重新計算
    this.minLengthInput.addEventListener('change', () => {
        // 驗證數值範圍
        const value = parseInt(this.minLengthInput.value);
        if (value < 2) this.minLengthInput.value = 2;
        if (value > 15) this.minLengthInput.value = 15;
        
        // 如果有結果顯示，自動重新計算
        if (this.resultsSection.style.display !== 'none') {
            this.solveAnagram();
        }
    });

    // 排序方式變更時自動重新顯示
    this.sortCheckbox.addEventListener('change', () => {
        if (this.resultsSection.style.display !== 'none' && this.lastResults) {
            this.displayResults(this.lastResults);
        }
    });

    // 輸入框焦點事件
    this.lettersInput.addEventListener('focus', () => {
        this.lettersInput.select(); // 選中所有文字便於替換
    });
    
    console.log('🎮 事件監聽器設定完成');
}

/**
 * 字謎搜尋主方法
 * 高效能搜尋算法實作
 */
solveAnagram() {
    const inputLetters = this.lettersInput.value.trim().toLowerCase();
    const minLength = parseInt(this.minLengthInput.value) || 2;

    // 輸入驗證
    if (inputLetters.length < 2) {
        alert(this.translations[this.currentLanguage].invalidInput);
        return;
    }

    console.log(`🔍 開始搜尋字謎: "${inputLetters}", 最短字長: ${minLength}`);
    
    // 顯示載入狀態
    this.showLoading();

    // 使用 setTimeout 避免 UI 阻塞
    setTimeout(() => {
        const startTime = performance.now();
        const results = this.findAnagrams(inputLetters, minLength);
        const endTime = performance.now();
        
        console.log(`⚡ 搜尋完成! 耗時: ${(endTime - startTime).toFixed(2)}ms`);
        console.log(`📊 找到 ${results.length} 個符合的單字`);
        
        this.lastResults = results;
        this.displayResults(results);
    }, 50);
}

/**
 * 核心字謎搜尋算法
 * 時間複雜度: O(n) 其中 n 為字典中的字母組合數
 */
findAnagrams(inputLetters, minLength) {
    const results = [];
    const letterCount = this.countLetters(inputLetters);
    
    console.log(`📝 輸入字母分析:`, letterCount);

    // 遍歷預處理的字典映射
    for (const [sortedLetters, words] of this.sortedLettersMap) {
        // 長度篩選 - 早期剪枝優化
        if (sortedLetters.length < minLength || 
            sortedLetters.length > inputLetters.length) {
            continue;
        }

        // 檢查是否可以由輸入字母組成
        if (this.canFormWord(sortedLetters, letterCount)) {
            // 添加所有對應的單字
            results.push(...words);
        }
    }

    // 去重並排序 - 使用 Set 確保唯一性
    const uniqueResults = [...new Set(results)].sort();
    
    return uniqueResults;
}

/**
 * 字母頻率計數
 * 建立字母 → 出現次數的映射表
 */
countLetters(word) {
    const count = {};
    for (const letter of word) {
        count[letter] = (count[letter] || 0) + 1;
    }
    return count;
}

/**
 * 檢查單字是否可由給定字母組成
 * 核心組合驗證邏輯
 */
canFormWord(sortedLetters, availableLetters) {
    const neededLetters = this.countLetters(sortedLetters);
    
    // 檢查每個所需字母的數量
    for (const [letter, needed] of Object.entries(neededLetters)) {
        const available = availableLetters[letter] || 0;
        if (available < needed) {
            return false; // 字母不足，無法組成
        }
    }
    
    return true; // 所有字母都足夠
}

/**
 * 顯示載入狀態
 * 提升使用者體驗的即時回饋
 */
showLoading() {
    const t = this.translations[this.currentLanguage];
    this.resultsSection.style.display = 'block';
    this.resultsCount.textContent = t.calculating;
    
    this.resultsContainer.innerHTML = `
        

            

            ${t.calculating}
        
    `;
}

/**
 * 主要結果顯示方法
 * 根據設定選擇顯示模式
 */
displayResults(results) {
    this.resultsSection.style.display = 'block';
    this.updateResultsCount(results.length);

    if (results.length === 0) {
        this.showNoResults();
        return;
    }

    // 根據使用者設定選擇顯示方式
    if (this.sortCheckbox.checked) {
        this.displayByLength(results);
    } else {
        this.displayAsList(results);
    }
}

/**
 * 更新結果計數顯示
 * 支援動態語言切換的計數格式
 */
updateResultsCount(count) {
    const t = this.translations[this.currentLanguage];
    this.resultsCount.textContent = t.foundWords.replace('{count}', count);
}

/**
 * 顯示無結果狀態
 * 友善的錯誤提示和建議
 */
showNoResults() {
    const t = this.translations[this.currentLanguage];
    this.resultsContainer.innerHTML = `
        

            🔍
            
${t.noResults}
            
${t.noResultsSubtext}
        
    `;
}

/**
 * 按字長分組顯示
 * 教育友善的分類展示方式
 */
displayByLength(results) {
    const groupedByLength = {};
    
    // 按字長分組
    results.forEach(word => {
        const length = word.length;
        if (!groupedByLength[length]) {
            groupedByLength[length] = [];
        }
        groupedByLength[length].push(word);
    });

    // 生成分組 HTML
    const groupsHTML = Object.keys(groupedByLength)
        .sort((a, b) => parseInt(a) - parseInt(b)) // 按字長排序
        .map(length => {
            const words = groupedByLength[length].sort(); // 組內字母排序
            const t = this.translations[this.currentLanguage];
            
            return `
                

                    

                        ${t.lettersGroup.replace('{length}', length)}
                        ${words.length}
                    
                    

                        ${words.map(word => 
                            `${word}`
                        ).join('')}
                    
                
            `;
        }).join('');

    this.resultsContainer.innerHTML = `
${groupsHTML}
`;
    
    // 為單字項目添加點擊複製功能
    this.addCopyToClipboardFeature();
}

/**
 * 列表式顯示
 * 簡潔的單一列表模式
 */
displayAsList(results) {
    const sortedResults = results.sort();
    const wordsHTML = sortedResults.map(word => 
        `${word}`
    ).join('');
    
    this.resultsContainer.innerHTML = `
        

            

                ${wordsHTML}
            
        
    `;
    
    // 添加點擊複製功能
    this.addCopyToClipboardFeature();
}

/**
 * 清除所有結果
 * 重置界面到初始狀態
 */
clearResults() {
    // 隱藏結果區域
    this.resultsSection.style.display = 'none';
    
    // 清空輸入並聚焦
    this.lettersInput.value = '';
    this.lettersInput.focus();
    
    // 清除快取
    this.lastResults = null;
    
    console.log('🧹 結果已清除，界面重置');
}

/**
 * 添加複製到剪貼簿功能
 * 提升使用者體驗的快捷操作
 */
addCopyToClipboardFeature() {
    const wordItems = document.querySelectorAll('.word-item');
    
    wordItems.forEach(item => {
        item.addEventListener('click', async () => {
            const word = item.textContent;
            
            try {
                // 使用現代 Clipboard API
                await navigator.clipboard.writeText(word);
                
                // 視覺回饋 - 短暫高亮
                item.style.background = '#4ade80';
                item.style.color = 'white';
                item.style.transform = 'scale(1.05)';
                
                setTimeout(() => {
                    item.style.background = '';
                    item.style.color = '';
                    item.style.transform = '';
                }, 200);
                
                console.log(`📋 已複製單字: ${word}`);
                
            } catch (err) {
                // 降級處理 - 使用舊版 API
                this.fallbackCopyToClipboard(word);
            }
        });
        
        // 添加 hover 效果提示
        item.style.cursor = 'pointer';
    });
}

/**
 * 剪貼簿功能降級處理
 * 支援舊版瀏覽器的複製功能
 */
fallbackCopyToClipboard(text) {
    const textArea = document.createElement('textarea');
    textArea.value = text;
    textArea.style.position = 'fixed';
    textArea.style.opacity = '0';
    
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    
    try {
        document.execCommand('copy');
        console.log(`📋 已複製單字（降級模式）: ${text}`);
    } catch (err) {
        console.warn('❌ 複製功能不支援');
    }
    
    document.body.removeChild(textArea);
}

/**
 * 快捷鍵支援
 * 提升高級使用者的操作效率
 */
setupKeyboardShortcuts() {
    document.addEventListener('keydown', (e) => {
        // Ctrl/Cmd + Enter: 快速搜尋
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            e.preventDefault();
            this.solveAnagram();
            return;
        }
        
        // Escape: 清除結果
        if (e.key === 'Escape') {
            e.preventDefault();
            this.clearResults();
            return;
        }
        
        // Ctrl/Cmd + L: 聚焦輸入框
        if ((e.ctrlKey || e.metaKey) && e.key === 'l') {
            e.preventDefault();
            this.lettersInput.focus();
            this.lettersInput.select();
            return;
        }
    });
    
    console.log('⌨️ 鍵盤快捷鍵已啟用');
}

/**
 * 效能監控與統計
 * 開發階段的性能分析工具
 */
logPerformanceStats() {
    const stats = {
        dictionarySize: this.wordDictionary.length,
        uniqueCombinations: this.sortedLettersMap.size,
        averageWordsPerCombination: this.wordDictionary.length / this.sortedLettersMap.size,
        memoryUsage: this.sortedLettersMap.size * 50 // 估算記憶體使用 (bytes)
    };
    
    console.table(stats);
    return stats;
}

/**
 * 應用程序完整啟動流程
 * 確保所有系統正確初始化
 */
function initializeAnagramSolver() {
    console.log('🔤 Anagram Solver 正在啟動...');
    
    // 檢查瀏覽器兼容性
    if (!window.Map || !window.Set) {
        console.error('❌ 瀏覽器不支援現代 JavaScript 功能');
        alert('您的瀏覽器版本過舊，請更新至最新版本以使用此工具。');
        return;
    }
    
    // 檢查必要的 DOM 元素
    const requiredElements = [
        'letters-input', 'min-length', 'sort-by-length',
        'solve-btn', 'clear-btn', 'results-section'
    ];
    
    const missingElements = requiredElements.filter(id => !document.getElementById(id));
    if (missingElements.length > 0) {
        console.error('❌ 缺少必要的 DOM 元素:', missingElements);
        return;
    }
    
    // 實例化主要應用
    try {
        window.anagramSolver = new AnagramSolver();
        
        // 開發模式下的額外功能
        if (window.location.hostname === 'localhost') {
            setupDevelopmentFeatures();
        }
        
        console.log('✅ Anagram Solver 啟動成功！');
        
    } catch (error) {
        console.error('❌ 啟動失敗:', error);
        alert('應用啟動失敗，請重新整理頁面。');
    }
}

/**
 * 開發模式功能
 * 僅在本地開發時啟用的除錯功能
 */
function setupDevelopmentFeatures() {
    // 全域除錯方法
    window.debugAnagram = {
        // 快速測試方法
        testSearch: (letters) => {
            window.anagramSolver.lettersInput.value = letters;
            window.anagramSolver.solveAnagram();
        },
        
        // 性能分析
        showStats: () => window.anagramSolver.logPerformanceStats(),
        
        // 字典檢查
        checkDictionary: () => {
            console.log('📚 字典統計:');
            console.log(`總單字數: ${window.anagramSolver.wordDictionary.length}`);
            console.log(`字母組合數: ${window.anagramSolver.sortedLettersMap.size}`);
            
            // 按字長統計
            const lengthStats = {};
            window.anagramSolver.wordDictionary.forEach(word => {
                const len = word.length;
                lengthStats[len] = (lengthStats[len] || 0) + 1;
            });
            console.table(lengthStats);
        }
    };
    
    console.log('🛠️ 開發模式功能已啟用');
    console.log('💡 可用指令: debugAnagram.testSearch("team"), debugAnagram.showStats()');
}

/**
 * DOM 載入完成後自動啟動
 * 確保在正確時機初始化應用
 */
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeAnagramSolver);
} else {
    // 如果 DOM 已載入完成，立即啟動
    initializeAnagramSolver();
}

/**
 * 全域錯誤處理
 * 捕獲未處理的錯誤並提供使用者友善的回饋
 */
window.addEventListener('error', (event) => {
    console.error('🚨 全域錯誤:', event.error);
    
    // 避免在錯誤處理中再次出錯
    try {
        if (window.anagramSolver) {
            const t = window.anagramSolver.translations[window.anagramSolver.currentLanguage];
            alert(t?.invalidInput || '發生未知錯誤，請重新整理頁面。');
        }
    } catch (e) {
        console.error('錯誤處理器本身出錯:', e);
    }
});

console.log('🎯 Anagram Solver 模組載入完成');