static/script.js

// =========================================================
// 🛡️ 共用安全工具：資料庫與 AI 回傳的文字一律先跳脫再放進 innerHTML
// =========================================================
function escapeHtml(value) {
    return String(value ?? '').replace(/[&<>"']/g, ch => ({
        '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
    }[ch]));
}

// 產生可安全放進 onclick="fn(...)" 的字串參數（句子含引號時也不會截斷屬性）
function jsArg(value) {
    return escapeHtml(JSON.stringify(String(value ?? '')));
}

// 先切出符合 regex 的片段，再各自跳脫，只有標示用的標籤是 HTML
function highlightEscaped(text, regex, openTag) {
    const str = String(text ?? '');
    if (!regex) return escapeHtml(str);
    const globalRegex = new RegExp(regex.source, regex.flags.includes('g') ? regex.flags : regex.flags + 'g');
    let out = '';
    let last = 0;
    for (const m of str.matchAll(globalRegex)) {
        if (!m[0]) continue;
        out += escapeHtml(str.slice(last, m.index)) + openTag + escapeHtml(m[0]) + '</span>';
        last = m.index + m[0].length;
    }
    return out + escapeHtml(str.slice(last));
}

// AI 回傳的 Markdown 轉成 HTML 後再清理，避免夾帶可執行的標籤
function sanitizeHtml(html) {
    if (window.DOMPurify) return DOMPurify.sanitize(html);
    const div = document.createElement('div');
    div.textContent = html;
    return div.innerHTML;
}

// =========================================================
// 🔐 後台管理員狀態
// 一般使用者只能「送出建議」；管理員從「後台登入」登入後才能直接寫入，並看到建議審核頁
// =========================================================
let isAdmin = false;

// 瀏覽器只保存登入後拿到的「工作階段憑證」（8 小時後失效），不保存密碼；
// 存在 sessionStorage，關掉分頁就會清除
const ADMIN_SESSION_KEY = 'truku_admin_session';
try { localStorage.removeItem('truku_admin_token'); } catch {}   // 清掉舊版直接存密碼的紀錄

function getAdminToken() {
    try { return sessionStorage.getItem(ADMIN_SESSION_KEY) || ''; } catch { return ''; }
}

function setAdminToken(token) {
    try {
        if (token) sessionStorage.setItem(ADMIN_SESSION_KEY, token);
        else sessionStorage.removeItem(ADMIN_SESSION_KEY);
    } catch {}
}

function adminHeaders(extra = {}) {
    return { ...extra, 'X-Admin-Session': getAdminToken() };
}

// 管理員專用 API；若登入已逾時，自動切回一般使用者模式並提醒重新登入
async function adminFetch(url, options = {}) {
    const res = await fetch(url, { ...options, headers: adminHeaders(options.headers || {}) });
    if (res.status === 403 && isAdmin) {
        const data = await res.clone().json().catch(() => ({}));
        if (data.error === 'ADMIN_REQUIRED') {
            setAdminToken('');
            isAdmin = false;
            applyAdminUi();
            alert('⏰ 後台登入已逾時或失效，請重新從「🔐 後台登入」登入。');
        }
    }
    return res;
}

async function refreshAdminState() {
    try {
        const res = await fetch('/api/admin/check', { headers: adminHeaders() });
        isAdmin = res.ok;
    } catch {
        isAdmin = false;
    }
    applyAdminUi();
    return isAdmin;
}

// 依登入狀態切換登入按鈕、審核頁籤，以及標注結果上的按鈕文字
function applyAdminUi() {
    const loginBtn = document.getElementById('adminLoginBtn');
    if (loginBtn) loginBtn.textContent = isAdmin ? '🔓 登出後台' : '🔐 後台登入';

    const reviewTabBtn = document.getElementById('tab-btn-review');
    if (reviewTabBtn) {
        reviewTabBtn.classList.toggle('hidden', !isAdmin);
        if (!isAdmin && reviewTabBtn.classList.contains('active')) {
            document.querySelector('[data-tab="tab-search"]').click();
        }
    }
    // 使用量儀表板含其他使用者的搜尋紀錄，只給管理員看
    const usageSubtabBtn = document.getElementById('subtab-btn-usage');
    if (usageSubtabBtn) {
        usageSubtabBtn.classList.toggle('hidden', !isAdmin);
        if (!isAdmin && usageSubtabBtn.classList.contains('active')) {
            document.querySelector('.sub-tab-btn:not(#subtab-btn-usage)')?.click();
        }
    }
    document.querySelectorAll('.igt-save-btn').forEach(btn => { btn.textContent = igtSaveLabel(); });
    document.querySelectorAll('.igt-import-btn').forEach(btn => { btn.textContent = igtImportLabel(); });
}

function igtSaveLabel() { return isAdmin ? '💾 儲存至記憶庫' : '💡 提交校正建議'; }
function igtImportLabel() { return isAdmin ? '📖 匯入為主辭典例句' : '💡 建議加入主辭典'; }

async function submitSuggestion(body) {
    const res = await fetch('/api/suggestions', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(body)
    });
    if (!res.ok) throw new Error(await readErrorMessage(res, '送出失敗，請稍後再試。'));
    return res.json();
}

document.addEventListener('DOMContentLoaded', () => {
    const loginBtn = document.getElementById('adminLoginBtn');
    if (loginBtn) {
        loginBtn.addEventListener('click', async () => {
            if (isAdmin) {
                if (!confirm('確定要登出後台嗎？')) return;
                // 通知伺服器作廢這組憑證，再清掉瀏覽器裡的紀錄
                await fetch('/api/admin/logout', { method: 'POST', headers: adminHeaders() }).catch(() => {});
                setAdminToken('');
                await refreshAdminState();
                if (isAdmin) alert('ℹ️ 目前是本機開發模式（伺服器未設定 ADMIN_TOKEN），不需要密碼即有管理員權限。');
                return;
            }
            const password = prompt('請輸入後台管理員密碼：');
            if (!password) return;
            try {
                const res = await fetch('/api/admin/login', {
                    method: 'POST', headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ password })
                });
                const data = await res.json().catch(() => ({}));
                if (!res.ok) throw new Error(data.message || '登入失敗');
                setAdminToken(data.token || '');
            } catch (e) {
                alert(`❌ ${e.message}`);
                return;
            }
            if (await refreshAdminState()) {
                alert('✅ 已登入後台（8 小時後或關閉分頁時自動登出）。現在可以直接寫入，並在「📥 建議審核」頁審核使用者的建議。');
            } else {
                setAdminToken('');
                alert('❌ 登入失敗，請再試一次。');
            }
        });
    }
    refreshAdminState();
});

// 從失敗的回應取出可顯示的錯誤訊息
async function readErrorMessage(res, fallback) {
    const data = await res.json().catch(() => ({}));
    return data.message || data.error || data.detail || fallback;
}

document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.getElementById('searchInput');
    const searchBtn = document.getElementById('searchBtn');
    
    // Split layout elements
    const splitLayout = document.getElementById('split-layout');
    const resultsList = document.getElementById('results-list');
    const searchStatsSummary = document.getElementById('search-stats-summary');
    const resultDetailCard = document.getElementById('result-detail-card');
    const emptyDetailState = document.getElementById('empty-detail-state');
    const loadingEl = document.getElementById('loading');
    const noResultsEl = document.getElementById('no-results');
    const noResultsDefaultHtml = noResultsEl ? noResultsEl.innerHTML : '';
    const exportCsvBtn = document.getElementById('exportCsvBtn');

    // API Key Settings
    const apiSettingsBtn = document.getElementById('apiSettingsBtn');
    if (apiSettingsBtn) {
        apiSettingsBtn.addEventListener('click', () => {
            const currentKey = localStorage.getItem('custom_gemini_api_key') || '';
            const newKey = prompt('系統已內建公用額度。若額度已用完，請填寫您個人的 Google Gemini API Key：\n（若要恢復使用系統預設額度，請清空並按確定）', currentKey);
            if (newKey !== null) {
                localStorage.setItem('custom_gemini_api_key', newKey.trim());
                if (newKey.trim()) {
                    alert('✅ 專屬 API Key 已儲存！接下來的標注將優先使用您的個人額度。');
                } else {
                    alert('🔄 已清除自訂 API Key，將恢復使用系統公用額度。');
                }
            }
        });
    }

    // Tab elements
    const tabBtns = document.querySelectorAll('.tab-btn');
    const tabContents = document.querySelectorAll('.tab-content');

    // Stats elements
    const statsLoading = document.getElementById('stats-loading');
    const statsDashboard = document.getElementById('stats-dashboard');
    let statsLoaded = false;
    let letterChart = null;
    let wordChart = null;
    let prefixChart = null;
    let suffixChart = null;
    let corpusPieChart = null;

    let currentResults = [];
    let currentQuery = '';
    let currentSearchType = '';

    // --- Tab Switching Logic ---
    tabBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const targetId = btn.getAttribute('data-tab');
            
            tabBtns.forEach(b => b.classList.remove('active'));
            tabContents.forEach(c => c.classList.remove('active'));
            
            btn.classList.add('active');
            document.getElementById(targetId).classList.add('active');

            if (targetId === 'tab-stats' && !statsLoaded) {
                loadStats();
            } else if (targetId === 'tab-projects') {
                loadProjectsList();
            } else if (targetId === 'tab-review') {
                loadReviewTab();
            }
        });
    });

    // --- Search Logic ---
    searchBtn.addEventListener('click', performSearch);
    searchInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            performSearch();
        }
    });

    exportCsvBtn.addEventListener('click', () => {
        if (!currentQuery) return;
        const searchType = document.querySelector('input[name="searchType"]:checked').value;
        const matchMode = document.querySelector('input[name="matchMode"]:checked').value;
        const caseSensitive = document.getElementById('caseSensitiveCheck')?.checked || false;
        
        const corpusCheckboxes = document.querySelectorAll('input[name="corpus"]:checked');
        let corporaParams = '';
        if (corpusCheckboxes.length > 0) {
            const corpora = Array.from(corpusCheckboxes).map(cb => cb.value);
            corporaParams = '&' + corpora.map(c => `corpora[]=${encodeURIComponent(c)}`).join('&');
        }

        const exportUrl = `/api/export?q=${encodeURIComponent(currentQuery)}&type=${encodeURIComponent(searchType)}&match_mode=${encodeURIComponent(matchMode)}&case_sensitive=${caseSensitive}${corporaParams}`;
        // 用 fetch 下載：才能帶管理員憑證（管理員不受匯出上限），並在超過上限時顯示提示
        fetch(exportUrl, { headers: adminHeaders() })
            .then(async res => {
                if (!res.ok) throw new Error(await readErrorMessage(res, '匯出失敗'));
                const truncated = res.headers.get('X-Export-Truncated') === '1';
                const total = res.headers.get('X-Export-Total');
                const blob = await res.blob();
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = 'truku_search_export.csv';
                a.click();
                URL.revokeObjectURL(a.href);
                if (truncated) alert(`ℹ️ 共 ${total} 句符合，一次最多匯出 500 句，已匯出前 500 句。\n如需其他句子，請縮小搜尋範圍。`);
            })
            .catch(e => alert(`❌ ${e.message}`));
    });

    async function performSearch() {
        let query = searchInput.value.trim();
        if (!query) return;

        // 自動偵測構詞型態語法並自動切換選項
        if ((query.startsWith('-') && query.endsWith('-') && query.length > 2) || query.startsWith('<') || query.startsWith('>')) {
            const infixRadio = document.querySelector('input[name="matchMode"][value="infix"]');
            if (infixRadio) infixRadio.checked = true;
        } else if (query.startsWith('-') && query.length > 1 && !query.endsWith('-')) {
            const suffixRadio = document.querySelector('input[name="matchMode"][value="suffix"]');
            if (suffixRadio) suffixRadio.checked = true;
        } else if (query.endsWith('-') && query.length > 1 && !query.startsWith('-')) {
            const prefixRadio = document.querySelector('input[name="matchMode"][value="prefix"]');
            if (prefixRadio) prefixRadio.checked = true;
        }

        // Get options
        const searchType = document.querySelector('input[name="searchType"]:checked').value;
        const matchMode = document.querySelector('input[name="matchMode"]:checked').value;
        const caseSensitive = document.getElementById('caseSensitiveCheck')?.checked || false;
        
        const corpusCheckboxes = document.querySelectorAll('input[name="corpus"]:checked');
        let corporaParams = '';
        if (corpusCheckboxes.length > 0) {
            const corpora = Array.from(corpusCheckboxes).map(cb => cb.value);
            corporaParams = '&' + corpora.map(c => `corpora[]=${encodeURIComponent(c)}`).join('&');
        }

        // Reset UI
        resultsList.innerHTML = '';
        searchStatsSummary.innerHTML = '';
        resultDetailCard.innerHTML = '';
        
        splitLayout.classList.add('hidden');
        searchStatsSummary.classList.add('hidden');
        resultDetailCard.innerHTML = '';
        emptyDetailState.style.display = 'flex';
        noResultsEl.classList.add('hidden');
        noResultsEl.innerHTML = noResultsDefaultHtml;
        loadingEl.classList.remove('hidden');
        exportCsvBtn.classList.add('hidden');

        try {
            const url = `/api/search?q=${encodeURIComponent(query)}&type=${encodeURIComponent(searchType)}&match_mode=${encodeURIComponent(matchMode)}&case_sensitive=${caseSensitive}${corporaParams}`;
            const response = await fetch(url, { headers: adminHeaders() });
            if (!response.ok) {
                const err = new Error(await readErrorMessage(response, '發生錯誤，無法取得資料。'));
                err.userFacing = response.status === 400 || response.status === 429;
                throw err;
            }
            
            const data = await response.json();
            loadingEl.classList.add('hidden');
            
            if (data.results.length === 0) {
                noResultsEl.classList.remove('hidden');
            } else {
                currentResults = data.results;
                currentQuery = query;
                currentSearchType = searchType;
                
                splitLayout.classList.remove('hidden');
                exportCsvBtn.classList.remove('hidden');
                renderSearchSummary(data, query, searchType, matchMode, caseSensitive);
                renderResultsList(data.results, query, searchType, caseSensitive);
            }
            // ── 記錄搜尋事件 ──
            logEvent('search', {
                query,
                search_type: searchType,
                match_mode: matchMode,
                case_sensitive: caseSensitive,
                result_count: data.results.length
            });

        } catch (error) {
            console.error('Error fetching data:', error);
            loadingEl.classList.add('hidden');
            noResultsEl.classList.remove('hidden');
            const msg = error.userFacing ? error.message : '發生錯誤，無法取得資料。';
            noResultsEl.innerHTML = `<p style="color: #ef4444;">${escapeHtml(msg)}</p>`;
        }
    }

    function renderSearchSummary(data, query, searchType, matchMode, caseSensitive = false) {
        searchStatsSummary.innerHTML = '';
        searchStatsSummary.classList.remove('hidden');
        
        let collocationsHtml = '';
        if (data.collocations && data.collocations.length > 0) {
            const badgesHtml = data.collocations.map(word =>
                `<span class="collocation-badge" data-word="${escapeHtml(word)}">${escapeHtml(word)}</span>`
            ).join('');
            
            collocationsHtml = `
                <div style="margin-top: 1rem;">
                    <span style="color: var(--text-muted); margin-right: 0.5rem;">常用共現關聯詞:</span>
                    <div class="collocations-container">${badgesHtml}</div>
                </div>
            `;
        }
        
        let positionsHtml = '';
        if (data.positions) {
            const total = data.positions.initial + data.positions.medial + data.positions.final;
            if (total > 0) {
                const pInit = Math.round((data.positions.initial / total) * 100);
                const pMed = Math.round((data.positions.medial / total) * 100);
                const pFin = Math.round((data.positions.final / total) * 100);
                
                positionsHtml = `
                    <div class="stats-grid" id="position-filters">
                        <div class="stat-item position-btn" data-pos="initial" style="cursor: pointer; transition: 0.2s;">
                            <div class="label">句首 (Initial)</div>
                            <div class="value">${data.positions.initial} 次</div>
                            <div class="pct">${pInit}%</div>
                        </div>
                        <div class="stat-item position-btn" data-pos="medial" style="cursor: pointer; transition: 0.2s;">
                            <div class="label">句中 (Medial)</div>
                            <div class="value">${data.positions.medial} 次</div>
                            <div class="pct">${pMed}%</div>
                        </div>
                        <div class="stat-item position-btn" data-pos="final" style="cursor: pointer; transition: 0.2s;">
                            <div class="label">句尾 (Final)</div>
                            <div class="value">${data.positions.final} 次</div>
                            <div class="pct">${pFin}%</div>
                        </div>
                    </div>
                `;
            }
        }

        const caseHint = caseSensitive ? '（區分大小寫）' : '';
        let modeLabel = '部分搜尋';
        if (matchMode === 'exact') modeLabel = '精準全詞';
        else if (matchMode === 'prefix') modeLabel = '詞頭前綴';
        else if (matchMode === 'infix') modeLabel = '詞中中綴';
        else if (matchMode === 'suffix') modeLabel = '詞尾後綴';

        let summaryText = '';
        const safeQuery = escapeHtml(query);
        if (matchMode === 'partial') {
            summaryText = `<div style="line-height: 1.8;">💡 關鍵字 <span class="highlight-count">"${safeQuery}"</span> ${caseHint}在所選語料中部分搜尋共出現 <span class="highlight-count">${data.total_occurrences}</span> 次，其中精準全詞共出現 <span class="highlight-count">${data.exact_occurrences}</span> 次。<br>`;
        } else if (matchMode === 'prefix') {
            summaryText = `<div style="line-height: 1.8;">💡 關鍵字 <span class="highlight-count">"${safeQuery}"</span> ${caseHint}在所選語料中詞頭前綴搜尋共出現 <span class="highlight-count">${data.total_occurrences}</span> 次，其中精準全詞共出現 <span class="highlight-count">${data.exact_occurrences}</span> 次。<br>`;
        } else if (matchMode === 'infix') {
            summaryText = `<div style="line-height: 1.8;">💡 關鍵字 <span class="highlight-count">"${safeQuery}"</span> ${caseHint}在所選語料中詞中中綴搜尋共出現 <span class="highlight-count">${data.total_occurrences}</span> 次，其中精準全詞共出現 <span class="highlight-count">${data.exact_occurrences}</span> 次。<br>`;
        } else if (matchMode === 'suffix') {
            summaryText = `<div style="line-height: 1.8;">💡 關鍵字 <span class="highlight-count">"${safeQuery}"</span> ${caseHint}在所選語料中詞尾後綴搜尋共出現 <span class="highlight-count">${data.total_occurrences}</span> 次，其中精準全詞共出現 <span class="highlight-count">${data.exact_occurrences}</span> 次。<br>`;
        } else {
            summaryText = `<div style="line-height: 1.8;">💡 關鍵字 <span class="highlight-count">"${safeQuery}"</span> ${caseHint}在所選語料中共精準出現了 <span class="highlight-count">${data.total_occurrences}</span> 次。<br>`;
        }

        if (data.corpus_breakdown) {
            for (const [corpus, counts] of Object.entries(data.corpus_breakdown)) {
                summaryText += `💡 其中在 "${escapeHtml(corpus)}" 中共出現 <span class="highlight-count">${counts.total || counts.exact || 0}</span> 次。<br>`;
            }
            for (const [corpus, counts] of Object.entries(data.corpus_breakdown)) {
                if (['族語E樂園', '語推組織語料'].includes(corpus) && counts.subcategories && Object.keys(counts.subcategories).length > 0) {
                    const subBtnsHtml = Object.entries(counts.subcategories).map(([subcat, count]) => {
                        return `<div class="stat-item subcat-btn" data-subcat="${escapeHtml(subcat)}" style="cursor: pointer; transition: 0.2s; background: rgba(251, 146, 60, 0.1); border: 1px solid rgba(251, 146, 60, 0.3); padding: 0.5rem; border-radius: 6px; display: inline-block; min-width: 80px; text-align: center;">
                            <div style="color: #fb923c; font-weight: bold; font-size: 0.9rem;">${escapeHtml(subcat)}</div>
                            <div style="color: #e2e8f0; font-size: 0.85rem;">${count} 筆</div>
                        </div>`;
                    }).join('');
                    summaryText += `<div style="margin-top: 0.5rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem;" id="subcat-filters">${subBtnsHtml}</div>`;
                }
            }
        }
        summaryText += `</div>`;

        let ngramsHtml = '';
        if (data.ngrams && (data.ngrams.bigrams?.length > 0 || data.ngrams.trigrams?.length > 0)) {
            const renderNgram = (ng) => `<div style="background: rgba(0,0,0,0.3); padding: 0.3rem 0.6rem; border-radius: 4px; display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.2rem;"><span style="color: #e2e8f0;">${escapeHtml(ng.ngram)}</span><span style="color: #60a5fa; font-size: 0.85em;">${ng.count}次</span></div>`;
            
            const bigramsHtml = (data.ngrams.bigrams || []).map(renderNgram).join('');
            const trigramsHtml = (data.ngrams.trigrams || []).map(renderNgram).join('');
            
            ngramsHtml = `
                <div style="margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem;">
                    <div style="color: var(--text-muted); margin-bottom: 0.5rem; font-weight: bold;">連詞分析 (N-grams):</div>
                    ${bigramsHtml ? `<div style="margin-bottom: 0.5rem;"><span style="color: #94a3b8; font-size: 0.9em; width: 60px; display: inline-block;">雙詞:</span> ${bigramsHtml}</div>` : ''}
                    ${trigramsHtml ? `<div><span style="color: #94a3b8; font-size: 0.9em; width: 60px; display: inline-block;">三詞:</span> ${trigramsHtml}</div>` : ''}
                </div>
            `;
        }

        let morphHtml = '';
        if (data.morphology) {
            const familyBtns = data.morphology.family.map(fw =>
                `<button onclick="document.getElementById('searchInput').value=${jsArg(fw)}; document.getElementById('searchBtn').click();" style="background: rgba(99,102,241,0.2); border: 1px solid rgba(99,102,241,0.5); color: #818cf8; padding: 0.3rem 0.6rem; border-radius: 4px; cursor: pointer; transition: all 0.2s; margin: 0.2rem;" onmouseover="this.style.background='rgba(99,102,241,0.4)'" onmouseout="this.style.background='rgba(99,102,241,0.2)'">${escapeHtml(fw)}</button>`
            ).join('');
            
            morphHtml = `
                <div style="margin-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1rem;">
                    <div style="color: #a78bfa; margin-bottom: 0.5rem; font-weight: bold;">✨ 構詞學分析 (Morphology):</div>
                    <div style="margin-bottom: 0.5rem;"><span style="color: #94a3b8; font-size: 0.9em; width: 80px; display: inline-block;">推測詞根:</span> <span style="color: #e2e8f0; font-weight: bold;">${escapeHtml(data.morphology.root)}</span></div>
                    <div><span style="color: #94a3b8; font-size: 0.9em; width: 80px; display: inline-block; vertical-align: top;">家族詞彙:</span> <div style="display: inline-block; width: calc(100% - 85px);">${familyBtns}</div></div>
                </div>
            `;
        }

        searchStatsSummary.innerHTML = `
            <p>${summaryText}</p>
            ${morphHtml}
            ${collocationsHtml}
            ${ngramsHtml}
            ${positionsHtml}
        `;

        const badges = searchStatsSummary.querySelectorAll('.collocation-badge');
        badges.forEach(badge => {
            badge.addEventListener('click', () => {
                const word = badge.getAttribute('data-word');
                searchInput.value = word;
                document.querySelector('input[name="searchType"][value="truku"]').checked = true;
                performSearch();
            });
        });

        // Position Filtering
        const posBtns = searchStatsSummary.querySelectorAll('.position-btn');
        let activePos = null;
        
        posBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const pos = btn.getAttribute('data-pos');
                if (activePos === pos) {
                    activePos = null;
                    posBtns.forEach(b => {
                        b.style.background = 'rgba(0,0,0,0.2)';
                        b.style.border = 'none';
                    });
                    renderResultsList(data.results, query, searchType, caseSensitive);
                } else {
                    activePos = pos;
                    posBtns.forEach(b => {
                        b.style.background = 'rgba(0,0,0,0.2)';
                        b.style.border = 'none';
                    });
                    btn.style.background = 'rgba(59, 130, 246, 0.2)';
                    btn.style.border = '1px solid rgba(59, 130, 246, 0.5)';
                    
                    const filtered = data.results.filter(r => r.positions && r.positions.includes(pos));
                    renderResultsList(filtered, query, searchType, caseSensitive);
                }
            });
        });

        // Subcategory Filtering
        const subcatBtns = searchStatsSummary.querySelectorAll('.subcat-btn');
        let activeSubcat = null;
        
        subcatBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                const subcat = btn.getAttribute('data-subcat');
                if (activeSubcat === subcat) {
                    activeSubcat = null;
                    subcatBtns.forEach(b => {
                        b.style.background = 'rgba(251, 146, 60, 0.1)';
                        b.style.border = '1px solid rgba(251, 146, 60, 0.3)';
                    });
                    renderResultsList(data.results, query, searchType, caseSensitive);
                } else {
                    activeSubcat = subcat;
                    subcatBtns.forEach(b => {
                        b.style.background = 'rgba(0,0,0,0.2)';
                        b.style.border = '1px solid transparent';
                    });
                    btn.style.background = 'rgba(251, 146, 60, 0.3)';
                    btn.style.border = '1px solid rgba(251, 146, 60, 0.8)';
                    
                    const filtered = data.results.filter(r => r.detailed_source && r.detailed_source.includes(subcat));
                    renderResultsList(filtered, query, searchType, caseSensitive);
                }
            });
        });
    }

    function renderResultsList(results, query, searchType, caseSensitive = false) {
        resultsList.innerHTML = '';
        
        let displayResults = results;
        let isTruncated = false;
        if (results.length > 200) {
            displayResults = results.slice(0, 200);
            isTruncated = true;
        }
        
        if (displayResults.length === 0) {
            resultsList.innerHTML = '<div style="padding: 1rem; color: #94a3b8; text-align: center;">沒有符合此條件的結果。</div>';
            return;
        }

        const cleanQ = query.replace(/^[-<*]+|[-<*]+$/g, '');
        const flags = caseSensitive ? 'g' : 'gi';
        const highlightRegex = cleanQ ? new RegExp(`(${escapeRegExp(cleanQ)})`, flags) : null;
        
        displayResults.forEach((item, index) => {
            const li = document.createElement('div');
            li.className = `list-item ${index === 0 ? 'active' : ''}`;
            
            const hlTag = '<span style="color: var(--highlight-bg); font-weight: bold;">';
            const hlTruku = highlightRegex && (searchType === 'truku' || searchType === 'source');
            const hlChinese = highlightRegex && searchType === 'chinese';
            const displayTruku = highlightEscaped(item.truku_sentence || '', hlTruku ? highlightRegex : null, hlTag);
            const displayChinese = highlightEscaped(item.chinese_translation || '', hlChinese ? highlightRegex : null, hlTag);

            let badgeHtml = '';
            if (item.match_badge === 'exact' || (item.is_exact && !['prefix','suffix','infix'].includes(item.match_badge))) {
                badgeHtml = '<span class="list-item-badge badge-exact">精準</span>';
            } else if (item.match_badge === 'prefix') {
                badgeHtml = '<span class="list-item-badge badge-prefix" style="background: rgba(167,139,250,0.25); color: #c4b5fd; border: 1px solid rgba(167,139,250,0.4);">前綴</span>';
            } else if (item.match_badge === 'infix') {
                badgeHtml = '<span class="list-item-badge badge-infix" style="background: rgba(236,72,153,0.25); color: #f472b6; border: 1px solid rgba(236,72,153,0.4);">中綴</span>';
            } else if (item.match_badge === 'suffix') {
                badgeHtml = '<span class="list-item-badge badge-suffix" style="background: rgba(16,185,129,0.25); color: #6ee7b7; border: 1px solid rgba(16,185,129,0.4);">後綴</span>';
            } else {
                badgeHtml = '<span class="list-item-badge badge-partial">部分</span>';
            }

            
            let corpusBadge = '';
            let subcatBadge = '';
            if (item.corpus_source === '族語辭典') {
                corpusBadge = '<span class="list-item-badge badge-corpus-dict">辭典</span>';
            } else if (item.corpus_source === '族語E樂園') {
                corpusBadge = '<span class="list-item-badge badge-corpus-klokah">E樂園</span>';
                if (item.detailed_source && item.detailed_source.trim() !== '') {
                    subcatBadge = `<span class="list-item-badge badge-corpus-subcat">${escapeHtml(item.detailed_source.replace(/^族語E樂園 - /, ''))}</span>`;
                }
            } else if (item.corpus_source === '族語文學') {
                corpusBadge = '<span class="list-item-badge badge-corpus-lit">文學</span>';
            } else if (item.corpus_source === '語推組織語料') {
                corpusBadge = '<span class="list-item-badge badge-corpus-org">語推</span>';
                if (item.detailed_source && item.detailed_source.trim() !== '') {
                    subcatBadge = `<span class="list-item-badge badge-corpus-subcat">${escapeHtml(item.detailed_source)}</span>`;
                }
            } else if (item.corpus_source === '族語資料庫語料') {
                corpusBadge = '<span class="list-item-badge badge-corpus-db">資料庫</span>';
            } else if (item.corpus_source) {
                corpusBadge = `<span class="list-item-badge badge-corpus-dict">${escapeHtml(item.corpus_source)}</span>`;
            }

            li.innerHTML = `
                <div class="list-item-truku">${corpusBadge} ${subcatBadge} ${displayTruku} ${badgeHtml}</div>
                <div class="list-item-chinese">${displayChinese}</div>
            `;
            
            li.addEventListener('click', () => {
                document.querySelectorAll('.list-item').forEach(el => el.classList.remove('active'));
                li.classList.add('active');
                renderDetailCard(item);
            });
            
            resultsList.appendChild(li);
        });

        if (isTruncated) {
            const truncRow = document.createElement('div');
            truncRow.style.padding = '1rem';
            truncRow.style.textAlign = 'center';
            truncRow.style.color = '#94a3b8';
            truncRow.style.fontSize = '0.9rem';
            truncRow.innerHTML = `已隱藏其餘 ${results.length - 200} 筆結果。請縮小搜尋範圍或點擊「匯出 CSV」檢視全部資料。`;
            resultsList.appendChild(truncRow);
        }

        if (displayResults.length > 0) {
            renderDetailCard(displayResults[0]);
        }
    }

    function renderDetailCard(item) {
        emptyDetailState.style.display = 'none';
        resultDetailCard.classList.remove('hidden');
        
        const highlightRegex = currentQuery ? new RegExp(`(${escapeRegExp(currentQuery)})`, 'gi') : null;
        const hlTag = '<span style="color: var(--highlight-bg); font-weight: bold;">';
        const isTruku = currentSearchType === 'truku';
        const isChinese = currentSearchType === 'chinese';
        const isSource = currentSearchType === 'source';

        const kwicText = highlightEscaped(item.kwic_sentence || '', isTruku ? highlightRegex : null, '<span class="keyword-highlight">');
        const displayTruku = highlightEscaped(item.truku_sentence || '', (isTruku || isSource) ? highlightRegex : null, hlTag);
        const displayChinese = highlightEscaped(item.chinese_translation || '', isChinese ? highlightRegex : null, hlTag);
        const displaySource = highlightEscaped(item.source_word || '', isSource ? highlightRegex : null, hlTag);

        const kwicBlock = isTruku
            ? `<div class="kwic-text">搭配詞： ${kwicText}</div>`
            : `<div class="truku-text">${displayTruku}</div>`;

        const srcWord = item.source_word || '';
        const srcTruku = item.truku_sentence || '';
        const srcChinese = item.chinese_translation || '';

        resultDetailCard.innerHTML = `
            <div class="card">
                <div class="card-header" style="display: flex; justify-content: space-between; align-items: flex-start;">
                    <div style="display:flex; align-items:center; gap:0.7rem; flex-wrap:wrap;">
                        <h2 style="margin:0;">${displaySource || '詳細資訊'}</h2>
                        <span class="badge ${item.is_exact ? 'badge-exact' : 'badge-partial'}">
                            ${item.is_exact ? '精準匹配' : '部分匹配'}
                        </span>
                    </div>
                    <a href="#" onclick="openReportModal('sentence_error', ${Number(item.id) || 0}, ${jsArg(srcTruku || srcWord)}); return false;"
                       class="report-btn" style="padding: 0.3rem 0.6rem; font-size: 0.8rem; background: rgba(245, 158, 11, 0.1); color: #f59e0b; border-color: rgba(245, 158, 11, 0.3);">
                        <svg viewBox="0 0 24 24" width="14" height="14" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
                        回報此句
                    </a>
                </div>

                <!-- ── TTS 語音播放器 ── -->
                <div class="tts-player-bar">
                    <div class="tts-speaker-group">
                        <label class="tts-speaker-label">語者：</label>
                        <select id="tts-speaker-select" class="tts-speaker-select">
                            <option value="female">🎙️ 女聲</option>
                            <option value="male1">🎙️ 男聲 1</option>
                            <option value="male2">🎙️ 男聲 2</option>
                        </select>
                    </div>
                    <div class="tts-btn-group">
                        ${item.source_word ? `
                        <button class="tts-btn" id="tts-btn-word"
                            onclick="playTTS('word', ${jsArg(srcWord)}, 'tts-btn-word')"
                            title="朗讀詞頭">
                            🔊 詞頭發音
                        </button>` : ''}
                        <button class="tts-btn tts-btn-sentence" id="tts-btn-sentence"
                            onclick="playTTS('sentence', ${jsArg(srcTruku || srcWord)}, 'tts-btn-sentence')"
                            title="朗讀完整例句">
                            🔊 例句朗讀
                        </button>
                    </div>
                    <div class="tts-status" id="tts-status"></div>
                </div>
                <audio id="tts-audio-player" style="display:none;"></audio>

                <div class="card-body">
                    ${kwicBlock}
                    ${isTruku ? `<div class="truku-text" style="font-size: 0.9em; color: var(--text-muted);">完整例句： ${displayTruku}</div>` : ''}
                    <div class="chinese-text">${displayChinese}</div>
                    ${item.full_explanation ? `<div class="explanation">${escapeHtml(item.full_explanation).replace(/;/g, '<br>')}</div>` : ''}
                    
                    <!-- IGT Annotation Trigger -->
                    <div style="margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.08); display:flex; gap:0.6rem; flex-wrap:wrap; align-items:center;">
                        <button 
                            onclick="triggerGlosser(this, ${jsArg(srcTruku)}, ${jsArg(srcChinese)})"
                            style="background: rgba(139,92,246,0.15); color: #a78bfa; border: 1px solid rgba(139,92,246,0.4); padding: 0.35rem 0.9rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem;"
                            onmouseover="this.style.background='rgba(139,92,246,0.3)'"
                            onmouseout="this.style.background='rgba(139,92,246,0.15)'"
                        >
                            🏷️ 快速標注 (IGT)
                        </button>
                        <button
                            onclick="sendToGlosser(${jsArg(srcTruku)}, ${jsArg(srcChinese)})"
                            style="background: rgba(52,211,153,0.12); color: #34d399; border: 1px solid rgba(52,211,153,0.3); padding: 0.35rem 0.9rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: all 0.2s; display: inline-flex; align-items: center; gap: 0.4rem;"
                            onmouseover="this.style.background='rgba(52,211,153,0.25)'"
                            onmouseout="this.style.background='rgba(52,211,153,0.12)'"
                        >
                            ↗️ 送往標注頁籤
                        </button>
                    </div>
                    <div class="igt-output-area" style="display:none; margin-top: 1rem;"></div>
                </div>
            </div>
        `;
    }

    // ── TTS 語音播放函式 ──
    window.playTTS = async function(type, text, btnId) {
        const btn = document.getElementById(btnId);
        const statusEl = document.getElementById('tts-status');
        const audioEl = document.getElementById('tts-audio-player');
        const speakerSelect = document.getElementById('tts-speaker-select');
        if (!btn || !statusEl || !audioEl) return;

        const speaker = speakerSelect ? speakerSelect.value : 'female';
        const originalHTML = btn.innerHTML;

        btn.disabled = true;
        btn.innerHTML = '⏳ 生成中...';
        statusEl.textContent = '正在呼叫原語會 TTS，請稍候（約 3~6 秒）...';
        statusEl.style.color = 'var(--text-muted)';

        try {
            const params = new URLSearchParams({ text, speaker });
            const resp = await fetch(`/api/tts?${params.toString()}`);
            if (!resp.ok) {
                const err = await resp.json();
                throw new Error(err.error || 'TTS 服務異常');
            }
            const blob = await resp.blob();
            const url = URL.createObjectURL(blob);

            audioEl.src = url;
            audioEl.style.display = 'block';
            audioEl.play();

            const cacheHit = resp.headers.get('X-Cache') === 'HIT';
            statusEl.textContent = cacheHit ? '✅ 快取命中，立即播放！' : '✅ 語音生成完畢，正在播放...';
            statusEl.style.color = '#34d399';

            // ── 記錄 TTS 事件 ──
            logEvent('tts', { type, speaker, cache_hit: cacheHit, text_length: text.length });

            audioEl.onended = () => { statusEl.textContent = ''; };

        } catch (e) {
            statusEl.textContent = `❌ ${e.message}`;
            statusEl.style.color = '#f87171';
        } finally {
            btn.disabled = false;
            btn.innerHTML = originalHTML;
        }
    };

    function escapeRegExp(string) {
        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
    }

    // --- IGT Glosser Integration ---
    // Calls truku-glosser backend (port 8000) and renders 4-line IGT format
    // --- Stats Logic ---
    async function loadStats() {
        statsLoading.classList.remove('hidden');
        
        try {
            const response = await fetch('/api/stats');
            if (!response.ok) throw new Error('Network response was not ok');
            const data = await response.json();
            
            statsLoading.classList.add('hidden');
            statsDashboard.classList.remove('hidden');
            
            document.getElementById('stat-entries').innerText = data.total_entries.toLocaleString();
            document.getElementById('stat-sentences').innerText = data.total_sentences.toLocaleString();
            document.getElementById('stat-avg-len').innerText = data.avg_sentence_length.toLocaleString();

            initSubTabs();
            renderCharts(data);
            statsLoaded = true;
        } catch (error) {
            console.error('Error fetching stats:', error);
            statsLoading.innerHTML = `<p style="color: #ef4444;">載入統計資料失敗。</p>`;
        }
    }

    function initSubTabs() {
        const subTabBtns = document.querySelectorAll('.sub-tab-btn');
        const subTabContents = document.querySelectorAll('.sub-tab-content');
        
        subTabBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                subTabBtns.forEach(b => b.classList.remove('active'));
                subTabContents.forEach(c => c.classList.add('hidden'));
                
                btn.classList.add('active');
                document.getElementById(btn.dataset.subtab).classList.remove('hidden');
                
                // Force charts to resize when their container becomes visible
                setTimeout(() => {
                    if (wordChart) wordChart.resize();
                    if (letterChart) letterChart.resize();
                    if (prefixChart) prefixChart.resize();
                    if (suffixChart) suffixChart.resize();
                }, 10);
            });
        });
    }

    function renderCharts(data) {
        Chart.defaults.color = '#94a3b8';
        Chart.defaults.borderColor = 'rgba(255, 255, 255, 0.1)';
        
        if (typeof ChartDataLabels !== 'undefined') {
            Chart.register(ChartDataLabels);
        }

        // 1. Corpus Pie Chart
        const pieCtx = document.getElementById('corpusPieChart').getContext('2d');
        const corpusKeys = Object.keys(data.corpus_distribution);
        const corpusValues = corpusKeys.map(k => data.corpus_distribution[k]);
        const corpusColors = corpusKeys.map(k => {
            if (k === '族語辭典') return '#60a5fa';
            if (k === '族語E樂園') return '#a855f7';
            if (k === '族語文學') return '#10b981';
            return '#f59e0b';
        });

        if (corpusPieChart) corpusPieChart.destroy();
        corpusPieChart = new Chart(pieCtx, {
            type: 'doughnut',
            data: {
                labels: corpusKeys,
                datasets: [{
                    data: corpusValues,
                    backgroundColor: corpusColors,
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'bottom', labels: { color: '#e2e8f0' } },
                    datalabels: {
                        color: '#fff',
                        font: { weight: 'bold' },
                        formatter: (value, ctx) => {
                            let sum = 0;
                            let dataArr = ctx.chart.data.datasets[0].data;
                            dataArr.map(data => { sum += data; });
                            let percentage = (value*100 / sum).toFixed(1)+"%";
                            return percentage;
                        }
                    }
                }
            }
        });

        // 2. Letter Chart
        const letterCtx = document.getElementById('letterChart').getContext('2d');
        const letterKeys = Object.keys(data.first_letters).sort();
        const letterValues = letterKeys.map(k => data.first_letters[k]);
        
        const bgColors = letterKeys.map((_, i) => `hsla(${i * (360/letterKeys.length)}, 70%, 60%, 0.6)`);
        const borderColors = letterKeys.map((_, i) => `hsla(${i * (360/letterKeys.length)}, 70%, 60%, 1)`);

        if (letterChart) letterChart.destroy();
        letterChart = new Chart(letterCtx, {
            type: 'bar',
            data: {
                labels: letterKeys.map(k => k.toUpperCase()),
                datasets: [{
                    label: '詞條數量',
                    data: letterValues,
                    backgroundColor: bgColors,
                    borderColor: borderColors,
                    borderWidth: 1
                }]
            },
            options: { 
                responsive: true, 
                plugins: { 
                    legend: { display: false },
                    datalabels: {
                        color: '#e2e8f0',
                        anchor: 'end',
                        align: 'top',
                        formatter: Math.round,
                        font: { weight: 'bold' }
                    }
                } 
            }
        });

        // Prefix Chart
        if (data.prefixes) {
            const preCtx = document.getElementById('prefixChart').getContext('2d');
            const preKeys = Object.keys(data.prefixes);
            const preVals = preKeys.map(k => data.prefixes[k]);
            if (prefixChart) prefixChart.destroy();
            prefixChart = new Chart(preCtx, {
                type: 'bar',
                data: {
                    labels: preKeys,
                    datasets: [{
                        data: preVals,
                        backgroundColor: 'rgba(236, 72, 153, 0.6)',
                        borderColor: 'rgba(236, 72, 153, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false }, datalabels: { color: '#e2e8f0', anchor: 'end', align: 'top', font: { weight: 'bold' } } }
                }
            });
        }

        // Suffix Chart
        if (data.suffixes) {
            const sufCtx = document.getElementById('suffixChart').getContext('2d');
            const sufKeys = Object.keys(data.suffixes);
            const sufVals = sufKeys.map(k => data.suffixes[k]);
            if (suffixChart) suffixChart.destroy();
            suffixChart = new Chart(sufCtx, {
                type: 'bar',
                data: {
                    labels: sufKeys,
                    datasets: [{
                        data: sufVals,
                        backgroundColor: 'rgba(16, 185, 129, 0.6)',
                        borderColor: 'rgba(16, 185, 129, 1)',
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false }, datalabels: { color: '#e2e8f0', anchor: 'end', align: 'top', font: { weight: 'bold' } } }
                }
            });
        }

        // 3. Top Words
        const top50 = data.top_words;
        const topWordsKeys = top50.map(item => item.word);
        const topWordsValues = top50.map(item => item.count);

        if (wordChart) wordChart.destroy();
        const wordCtx = document.getElementById('wordChart').getContext('2d');
        wordChart = new Chart(wordCtx, {
            type: 'bar',
            data: {
                labels: topWordsKeys,
                datasets: [{
                    label: '出現次數',
                    data: topWordsValues,
                    backgroundColor: '#3b82f6',
                    borderRadius: 4
                }]
            },
            options: {
                indexAxis: 'y',
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false },
                    datalabels: {
                        color: '#e2e8f0',
                        anchor: 'end',
                        align: 'right',
                        formatter: Math.round,
                        font: { weight: 'bold', size: 10 }
                    }
                },
                scales: {
                    x: { grid: { color: 'rgba(255,255,255,0.05)' }, max: Math.max(...topWordsValues) * 1.15 },
                    y: { grid: { display: false } }
                }
            }
        });

        // Populate Left List
        const listContainer = document.getElementById('stats-word-list');
        listContainer.innerHTML = top50.map(item => `
            <div class="stats-list-row">
                <div class="col-word">
                    ${escapeHtml(item.word)}
                    ${item.translation ? `<span style="color:#94a3b8; font-size:0.85em; margin-left:0.5rem;">(${escapeHtml(item.translation)})</span>` : ''}
                </div>
                <div class="col-count">${item.count.toLocaleString()}</div>
            </div>
        `).join('');
        
        // Populate N-grams
        const bigramsContainer = document.getElementById('stats-bigrams');
        bigramsContainer.innerHTML = Object.entries(data.top_bigrams).sort((a,b)=>b[1]-a[1]).map(item => `
            <div class="ngram-item">
                <span class="ngram-text">${escapeHtml(item[0])}</span>
                <span class="ngram-count">${item[1].toLocaleString()}次</span>
            </div>
        `).join('');

        const trigramsContainer = document.getElementById('stats-trigrams');
        trigramsContainer.innerHTML = Object.entries(data.top_trigrams).sort((a,b)=>b[1]-a[1]).map(item => `
            <div class="ngram-item">
                <span class="ngram-text">${escapeHtml(item[0])}</span>
                <span class="ngram-count">${item[1].toLocaleString()}次</span>
            </div>
        `).join('');

        // Populate Corpus Compare Table
        if (data.top_words_by_corpus) {
            const tableBody = document.querySelector('#corpus-compare-table tbody');
            const dictTop = data.top_words_by_corpus['族語辭典'] || [];
            const klokahTop = data.top_words_by_corpus['族語E樂園'] || [];
            const litTop = data.top_words_by_corpus['族語文學'] || [];
            
            let tableHtml = '';
            for (let i = 0; i < 50; i++) {
                const dictItem = dictTop[i] || {word: '-', count: 0, translation: ''};
                const klokahItem = klokahTop[i] || {word: '-', count: 0, translation: ''};
                const litItem = litTop[i] || {word: '-', count: 0, translation: ''};
                
                tableHtml += `
                    <tr style="border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.2s;" onmouseover="this.style.background='rgba(255,255,255,0.05)'" onmouseout="this.style.background='transparent'">
                        <td style="padding: 0.75rem 1rem; color: #94a3b8;">${i + 1}</td>
                        <td style="padding: 0.75rem 1rem;">
                            <span style="color: #e2e8f0; font-weight: 500;">${escapeHtml(dictItem.word)}</span>
                            ${dictItem.word !== '-' ? `<span style="color: #60a5fa; margin-left: 0.5rem; font-size: 0.85em;">(${dictItem.count})</span><span style="color: rgba(255,255,255,0.4); margin-left: 0.3rem; font-size: 0.8em;">${dictItem.percentage}%</span>` : ''}
                            ${dictItem.translation ? `<div style="color: #64748b; font-size: 0.8em; margin-top: 0.2rem;">${escapeHtml(dictItem.translation)}</div>` : ''}
                        </td>
                        <td style="padding: 0.75rem 1rem;">
                            <span style="color: #e2e8f0; font-weight: 500;">${escapeHtml(klokahItem.word)}</span>
                            ${klokahItem.word !== '-' ? `<span style="color: #fde047; margin-left: 0.5rem; font-size: 0.85em;">(${klokahItem.count})</span><span style="color: rgba(255,255,255,0.4); margin-left: 0.3rem; font-size: 0.8em;">${klokahItem.percentage}%</span>` : ''}
                            ${klokahItem.translation ? `<div style="color: #64748b; font-size: 0.8em; margin-top: 0.2rem;">${escapeHtml(klokahItem.translation)}</div>` : ''}
                        </td>
                        <td style="padding: 0.75rem 1rem;">
                            <span style="color: #e2e8f0; font-weight: 500;">${escapeHtml(litItem.word)}</span>
                            ${litItem.word !== '-' ? `<span style="color: #10b981; margin-left: 0.5rem; font-size: 0.85em;">(${litItem.count})</span><span style="color: rgba(255,255,255,0.4); margin-left: 0.3rem; font-size: 0.8em;">${litItem.percentage}%</span>` : ''}
                            ${litItem.translation ? `<div style="color: #64748b; font-size: 0.8em; margin-top: 0.2rem;">${escapeHtml(litItem.translation)}</div>` : ''}
                        </td>
                    </tr>
                `;
            }
            if (tableBody) tableBody.innerHTML = tableHtml;
        }
    }
});

window.openReportModal = function(type, id = null, sentence = '') {
    const modal = document.getElementById('reportModal');
    const typeSelect = document.getElementById('reportType');
    const sentenceGroup = document.getElementById('reportSentenceGroup');
    const sentenceArea = document.getElementById('reportSentence');
    const idInput = document.getElementById('reportSentenceId');
    
    typeSelect.value = type;
    document.getElementById('reportDescription').value = '';
    document.getElementById('reportMessage').innerHTML = '';
    
    if (type === 'sentence_error' && id) {
        sentenceGroup.style.display = 'block';
        sentenceArea.value = sentence;
        idInput.value = id;
    } else {
        sentenceGroup.style.display = 'none';
        sentenceArea.value = '';
        idInput.value = '';
    }
    
    modal.classList.remove('hidden');
}

window.closeReportModal = function() {
    document.getElementById('reportModal').classList.add('hidden');
}

window.submitReport = async function() {
    const type = document.getElementById('reportType').value;
    const description = document.getElementById('reportDescription').value;
    const email = document.getElementById('reportEmail').value;
    const sentenceId = document.getElementById('reportSentenceId').value;
    const sentence = document.getElementById('reportSentence').value;
    
    if (!description.trim()) {
        alert('請填寫詳細說明！');
        return;
    }
    
    const btn = document.getElementById('submitReportBtn');
    const msg = document.getElementById('reportMessage');
    btn.disabled = true;
    btn.innerText = '傳送中...';
    msg.innerHTML = '';
    
    try {
        const res = await fetch('/api/report', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ type, description, email, sentenceId, sentence })
        });
        const data = await res.json();
        
        if (res.ok) {
            msg.style.color = '#10b981';
            msg.innerHTML = '✅ 回報已成功送出給 lowking@ilrdf.org.tw！謝謝您！';
            setTimeout(() => closeReportModal(), 2000);
        } else {
            throw new Error(data.message || data.error || 'Server error');
        }
    } catch (error) {
        msg.style.color = '#ef4444';
        msg.textContent = `❌ 傳送失敗：${error.message}`;
    } finally {
        btn.disabled = false;
        btn.innerText = '送出回報';
    }
}

// Global variables to store current analyzed words for export
let currentAiWord1 = '';
let currentAiWord2 = '';

// =========================================================
// 🔤 語意標注 / 🔬 構詞語法標注 模式切換（批次標注面板專用）
// 'grammar' 為既有預設模式（含焦點/時貌/格位等語言學術語），
// 'semantic' 為新增模式（每個詞只給白話中文意思，適合初學族人）
// =========================================================
let glosserMode = 'grammar';

window.setGlosserMode = function(mode) {
    glosserMode = mode;
    const semBtn = document.getElementById('glosser-mode-semantic');
    const gramBtn = document.getElementById('glosser-mode-grammar');
    if (!semBtn || !gramBtn) return;
    if (mode === 'semantic') {
        semBtn.style.background = '#7c3aed';
        semBtn.style.color = 'white';
        gramBtn.style.background = 'transparent';
        gramBtn.style.color = '#94a3b8';
    } else {
        gramBtn.style.background = '#7c3aed';
        gramBtn.style.color = 'white';
        semBtn.style.background = 'transparent';
        semBtn.style.color = '#94a3b8';
    }
};

// =========================================================
// 🏷️  IGT Glosser Integration — triggerGlosser()
// Calls truku-glosser backend on port 8000, renders 4-line IGT
// =========================================================
window.triggerGlosser = async function(btn, trukuSentence, chineseTranslation) {
    const outputArea = btn.closest('.card-body').querySelector('.igt-output-area');
    
    // Toggle: if already showing, hide it
    if (outputArea.style.display !== 'none' && outputArea.innerHTML !== '') {
        outputArea.style.display = 'none';
        btn.innerHTML = '🏷️ 語言學標注 (IGT)';
        return;
    }

    btn.innerHTML = '⏳ 分析中...';
    btn.disabled = true;
    outputArea.style.display = 'block';
    outputArea.innerHTML = `<div style="color:#a78bfa; font-size:0.85rem; padding:0.5rem 0;">正在呼叫語言學 AI 標注引擎...</div>`;

    try {
        const customApiKey = localStorage.getItem('custom_gemini_api_key') || "";
        const requestMode = glosserMode;
        const response = await fetch('/api/parse', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ truku_sentence: trukuSentence, chinese_translation: chineseTranslation, custom_api_key: customApiKey, annotation_mode: requestMode })
        });

        if (response.status === 429) {
            const errData = await response.json().catch(() => ({}));
            throw new Error(errData.detail === 'RATE_LIMITED' ? errData.message : 'QUOTA_EXCEEDED');
        }
        if (response.status === 503) {
            const errData = await response.json().catch(() => ({}));
            throw new Error(errData.message || 'SERVICE_BUSY');
        }
        if (!response.ok) {
            let errText = await response.text();
            try {
                const parsed = JSON.parse(errText);
                if (parsed.message) errText = parsed.message;
                else if (parsed.detail) errText = parsed.detail;
            } catch(ign) {}
            throw new Error(errText);
        }

        const data = await response.json();
        const sentences = data.sentences || [];

        if (sentences.length === 0) {
            outputArea.innerHTML = `<div style="color:#fca5a5;">標注引擎未回傳結果。</div>`;
            return;
        }

        // Build 4-line IGT HTML
        const usedMode = data.annotation_mode || requestMode;
        const modeLabel = usedMode === 'semantic' ? '🔤 語意標注' : '🔬 構詞語法標注';
        let igtHtml = `<div class="igt-container">`;

        sentences.forEach((sentObj, sIdx) => {
            const words = sentObj.words || [];
            const translation = sentObj.translation || chineseTranslation || '';

            // Build the raw sentence (Line 1) from words
            const originalLine = words.map(w => w.raw).join('  ');

            // Word columns for lines 2 & 3
            const wordColsHtml = words.map((w, i) => {
                const isLow = w.confidence === 'low';
                return `
                    <div class="igt-word-col ${isLow ? 'igt-low-conf' : ''}" data-idx="${sIdx}-${i}" data-raw="${escapeHtml(w.raw || '')}">
                        <div class="igt-l2" contenteditable="true" title="詞素切分（可編輯）">${escapeHtml(w.morph || w.raw || '')}</div>
                        <div class="igt-l3" contenteditable="true" title="語法標記（可編輯）">${escapeHtml(w.gloss || '')}</div>
                    </div>`;
            }).join('');

            igtHtml += `
                <div class="igt-block" data-sidx="${sIdx}" data-mode="${escapeHtml(usedMode)}">
                    <div style="font-size:0.72rem; color:#94a3b8; margin-bottom:0.3rem;">${modeLabel}</div>
                    <div class="igt-l1">${escapeHtml(originalLine)}</div>
                    <div class="igt-words-row">${wordColsHtml}</div>
                    <div class="igt-l4">${escapeHtml(translation)}</div>
                    <div class="igt-actions">
                        <button class="igt-save-btn" onclick="igtSave(this, ${sIdx})">${igtSaveLabel()}</button>
                        <button class="igt-csv-btn" onclick="igtDownloadCsv(this)">📥 CSV</button>
                        <button class="igt-word-btn" onclick="igtDownloadWord(this, ${sIdx})">📝 Word</button>
                        <button class="igt-csv-btn igt-import-btn" style="background:#0ea5e9;color:white;border-color:#0284c7;" onclick="importToDictSentence(this)">${igtImportLabel()}</button>
                        <span class="igt-save-msg" style="color:#4ade80; font-size:0.8rem; display:none;">✅ 已儲存！</span>
                    </div>
                </div>`;
        });

        igtHtml += `</div>`;
        outputArea.innerHTML = igtHtml;

        // Store raw data on the container for download functions
        outputArea._glosserData = sentences;

        // ── 記錄 IGT 標注事件 ──
        logEvent('igt_parse', { sentence_length: trukuSentence.length, word_count: sentences.reduce((a, s) => a + (s.words || []).length, 0) });

        btn.innerHTML = '🏷️ 收起標注';

    } catch (e) {
        let msg = e.message;
        if (msg.includes('SERVICE_BUSY') || msg.includes('503') || msg.includes('high demand') || msg.includes('UNAVAILABLE')) {
            msg = `Google 伺服器目前尖峰塞車 (503 High Demand)，請稍候 10~20 秒後再試一次；若需要極高穩定度可至「⚙️ API 設定」填寫付費版金鑰。`;
        } else if (msg.includes('QUOTA_EXCEEDED') || msg.includes('429')) {
            msg = `API 額度已用完，請至右上角「⚙️ API 設定」填寫您的 API 金鑰。`;
        }
        outputArea.innerHTML = `<div style="color:#fca5a5; font-size:0.85rem;">❌ 標注失敗：${escapeHtml(msg)}</div>`;
        btn.innerHTML = '🏷️ 語言學標注 (IGT)';
    } finally {
        btn.disabled = false;
    }
};

// 把整句加入主辭典：管理員直接寫入；一般使用者改為送出建議，等管理員審核
async function addSentenceToDictionary(trukuSentence, chineseTranslation) {
    if (!isAdmin) {
        const note = prompt('（選填）想補充給審核者的說明：') || '';
        await submitSuggestion({ kind: 'sentence', truku_sentence: trukuSentence, chinese_translation: chineseTranslation, note });
        return '💡 已送出建議，管理員審核通過後才會加入主辭典。';
    }
    const res = await adminFetch('/api/dictionary/add_sentence', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ truku_sentence: trukuSentence, chinese_translation: chineseTranslation })
    });
    if (!res.ok) throw new Error(await readErrorMessage(res, '請稍後再試。'));
    const data = await res.json().catch(() => ({}));
    return data.status === 'exists' ? 'ℹ️ 此句與中文翻譯已在主辭典中，未重複新增。' : '✅ 已加入主辭典！';
}

// 若整句不在主辭典，詢問是否一併新增（或一併建議新增）
async function offerAddToDictionary(block) {
    try {
        const trukuSentence = block.querySelector('.igt-l1').innerText.trim();
        const chineseTranslation = block.querySelector('.igt-l4').innerText.trim();

        const checkRes = await fetch('/api/dictionary/check_sentence', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ truku_sentence: trukuSentence })
        });
        if (!checkRes.ok) return;
        const checkData = await checkRes.json();
        if (checkData.exists) return;
        const action = isAdmin ? '新增到主辭典' : '建議把它加入主辭典';
        if (!confirm(`發現這整句例句目前不在主辭典中：\n\n${trukuSentence}\n\n請問要順便${action}嗎？`)) return;
        alert(await addSentenceToDictionary(trukuSentence, chineseTranslation));
    } catch(e) {
        alert(`❌ 送出失敗：${e.message}`);
    }
}

// 逐詞校正：管理員直接存進黃金記憶庫；一般使用者送出建議（依區塊標注模式分開存放）
async function saveIgtBlockCorrection(block) {
    const question = isAdmin
        ? "確定要將這些單字校正儲存至記憶庫嗎？\n這將做為未來 AI 自動標注的黃金標準！"
        : "確定要送出這些單字校正建議嗎？\n管理員審核通過後，才會成為 AI 自動標注的黃金標準。";
    if (!confirm(question)) return;
    const saveMode = block.dataset.mode || glosserMode;
    const words = Array.from(block.querySelectorAll('.igt-word-col')).map(col => ({
        raw: col.dataset.raw,
        morph: col.querySelector('.igt-l2').innerText.trim(),
        gloss: col.querySelector('.igt-l3').innerText.trim()
    }));
    try {
        if (isAdmin) {
            const res = await adminFetch('/api/save_correct', {
                method: 'POST', headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ words, annotation_mode: saveMode })
            });
            if (!res.ok) throw new Error(await readErrorMessage(res, '請稍後再試。'));
        } else {
            const note = prompt('（選填）想補充給審核者的說明：') || '';
            await submitSuggestion({
                kind: 'correction', words, annotation_mode: saveMode, note,
                truku_sentence: block.querySelector('.igt-l1').innerText.trim(),
                chinese_translation: block.querySelector('.igt-l4').innerText.trim()
            });
        }
    } catch(e) {
        alert(`❌ ${isAdmin ? '儲存' : '送出'}失敗：${e.message}`);
        return;
    }
    const msgEl = block.querySelector('.igt-save-msg');
    if (msgEl) {
        msgEl.textContent = isAdmin ? '✅ 已儲存！' : '✅ 已送出建議！';
        msgEl.style.display = 'inline';
        setTimeout(() => { msgEl.style.display = 'none'; }, 3000);
    }
    alert(isAdmin ? "✅ 儲存成功！" : "💡 已送出建議，管理員審核通過後才會寫入記憶庫。");
    await offerAddToDictionary(block);
}

window.igtSave = function(btn, sIdx) {
    return saveIgtBlockCorrection(btn.closest('.igt-block'));
};

window.igtDownloadCsv = function(btn) {
    const outputArea = btn.closest('.igt-output-area');
    const sentences = outputArea._glosserData || [];
    let csv = '\uFEFF句子編號,行一(原文),行二(詞素切分),行三(語法標記),行四(華語翻譯)\n';
    sentences.forEach((s, i) => {
        const blocks = btn.closest('.igt-container').querySelectorAll('.igt-block');
        const block = blocks[i];
        const cols = block ? block.querySelectorAll('.igt-word-col') : [];
        const raws = s.words.map(w => w.raw).join('   ');
        const morphs = Array.from(cols).map(c => c.querySelector('.igt-l2').innerText.trim()).join('   ');
        const glosses = Array.from(cols).map(c => c.querySelector('.igt-l3').innerText.trim()).join('   ');
        const trans = s.translation || '';
        csv += `${i+1},"${raws.replace(/"/g,'""')}","${morphs.replace(/"/g,'""')}","${glosses.replace(/"/g,'""')}","${trans.replace(/"/g,'""')}"\n`;
    });
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `igt_annotation_${new Date().toISOString().slice(0,10)}.csv`;
    a.click();
};

window.igtDownloadWord = async function(btn, sIdx) {
    const outputArea = btn.closest('.igt-output-area');
    const sentences = outputArea._glosserData || [];
    const blocks = btn.closest('.igt-container').querySelectorAll('.igt-block');
    
    // Build up-to-date data from editable fields
    const payload = { sentences: [] };
    blocks.forEach((block, i) => {
        const cols = block.querySelectorAll('.igt-word-col');
        const words = Array.from(cols).map(col => ({
            raw: col.dataset.raw,
            morph: col.querySelector('.igt-l2').innerText.trim(),
            gloss: col.querySelector('.igt-l3').innerText.trim(),
            confidence: 'high'
        }));
        const trans = block.querySelector('.igt-l4').innerText.replace(/^'|'$/g, '');
        payload.sentences.push({ words, translation: trans });
    });

    try {
        const res = await fetch('/api/download_word', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const blob = await res.blob();
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = '太魯閣語IGT標注成果.docx';
        a.click();
    } catch(e) { alert('下載失敗，請確認標注後端已開啟。'); }
};

// AI Analysis Logic
document.addEventListener('DOMContentLoaded', () => {
    const analyzeBtn = document.getElementById('aiAnalyzeBtn');
    if (analyzeBtn) {
        analyzeBtn.addEventListener('click', async () => {
            const w1 = document.getElementById('aiWord1').value.trim();
            const w2 = document.getElementById('aiWord2').value.trim();
            const limit = document.getElementById('aiSentenceLimit').value;
            
            currentAiWord1 = w1;
            currentAiWord2 = w2;
            
            if (!w1) {
                alert('請至少輸入第一個詞彙進行分析！');
                return;
            }
            
            const loading = document.getElementById('ai-loading');
            const errorDiv = document.getElementById('ai-error');
            const resultContainer = document.getElementById('ai-result-container');
            const contentDiv = document.getElementById('ai-markdown-content');
            const statsInfo = document.getElementById('ai-stats-info');
            
            loading.classList.remove('hidden');
            errorDiv.classList.add('hidden');
            resultContainer.classList.add('hidden');
            analyzeBtn.disabled = true;
            
            try {
                const params = new URLSearchParams({ w1, limit });
                if (w2) params.append('w2', w2);

                // 自訂金鑰放在請求標頭，不放進網址
                const customApiKey = localStorage.getItem('custom_gemini_api_key') || "";
                const headers = customApiKey ? { 'X-Gemini-Api-Key': customApiKey } : {};

                const response = await fetch(`/api/ai_analysis?${params.toString()}`, { headers });
                const data = await response.json();

                if (!response.ok) {
                    throw new Error(data.error || '分析發生錯誤');
                }

                if (w2) {
                    statsInfo.innerHTML = `基於 <b>${Number(data.w1_count) || 0}</b> 句 ${escapeHtml(w1)} 與 <b>${Number(data.w2_count) || 0}</b> 句 ${escapeHtml(w2)} 例句進行分析`;
                } else {
                    statsInfo.innerHTML = `基於 <b>${Number(data.w1_count) || 0}</b> 句 ${escapeHtml(w1)} 例句進行分析`;
                }

                // Parse markdown first, then strip anything executable before inserting
                let htmlContent = sanitizeHtml(marked.parse(data.result || ''));
                
                function escapeRegExp(string) {
                    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
                }
                
                // Highlight keywords in HTML (only outside tags)
                if (w1) {
                    const regex1 = new RegExp('\\b(' + escapeRegExp(w1) + ')\\b(?![^<]*>)', 'gi');
                    htmlContent = htmlContent.replace(regex1, '<span style="color: #3b82f6; font-weight: bold;">$1</span>');
                }
                if (w2) {
                    const regex2 = new RegExp('\\b(' + escapeRegExp(w2) + ')\\b(?![^<]*>)', 'gi');
                    htmlContent = htmlContent.replace(regex2, '<span style="color: #ef4444; font-weight: bold;">$1</span>');
                }
                
                contentDiv.innerHTML = htmlContent;
                resultContainer.classList.remove('hidden');
                
            } catch (err) {
                errorDiv.textContent = err.message;
                errorDiv.classList.remove('hidden');
            } finally {
                loading.classList.add('hidden');
                analyzeBtn.disabled = false;
            }
        });
    }
});

// AI Analysis Export Functions
function exportToDoc() {
    const contentHtml = document.getElementById('ai-markdown-content').innerHTML;
    const header = `<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>太魯閣語語言學分析報告</title><style>body { color: #000000 !important; line-height: 1.8; font-family: sans-serif; }</style></head><body>`;
    const footer = `</body></html>`;
    const sourceHTML = header + contentHtml + footer;
    
    let filename = '太魯閣語語言學分析報告_' + currentAiWord1;
    if (currentAiWord2) filename += '&' + currentAiWord2;
    filename += '.doc';
    
    const source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
    const fileDownload = document.createElement("a");
    document.body.appendChild(fileDownload);
    fileDownload.href = source;
    fileDownload.download = filename;
    fileDownload.click();
    document.body.removeChild(fileDownload);
}

function exportToPdf() {
    const element = document.getElementById('ai-markdown-content');
    
    // Temporarily set text color to black for PDF rendering
    const originalColor = element.style.color;
    element.style.color = '#000000';
    
    // Add a class to adjust typography for print
    element.classList.add('pdf-exporting');
    
    let filename = '太魯閣語語言學分析報告_' + currentAiWord1;
    if (currentAiWord2) filename += '&' + currentAiWord2;
    filename += '.pdf';
    
    const opt = {
        margin:       0.6,
        filename:     filename,
        image:        { type: 'jpeg', quality: 1.0 },
        html2canvas:  { scale: 4, useCORS: true, logging: false },
        jsPDF:        { unit: 'in', format: 'a4', orientation: 'portrait' },
        pagebreak:    { mode: ['css', 'avoid-all'] }
    };
    
    html2pdf().set(opt).from(element).save().then(() => {
        // Revert text color back to original after PDF is generated
        element.style.color = originalColor;
        element.classList.remove('pdf-exporting');
    });
}

// =========================================================
// 🏷️  語料標注頁籤 (Tab Glosser) — Full standalone logic
// =========================================================

let glosserSessionData = [];   // Stores all sentences from last batch run

// -- 1. Status Checker: polls server every 5s to show green/red dot --
async function checkGlosserStatus() {
    const dot  = document.getElementById('glosser-status-dot');
    const text = document.getElementById('glosser-status-text');
    if (!dot || !text) return;
    try {
        const res = await fetch('/', { signal: AbortSignal.timeout(2000) });
        if (res.ok) {
            dot.style.background  = '#4ade80';
            text.style.color      = '#4ade80';
            text.textContent      = '標注引擎就緒 (雲端連線正常)';
        } else { throw new Error(); }
    } catch {
        dot.style.background  = '#f87171';
        text.style.color      = '#f87171';
        text.textContent      = '標注引擎離線';
    }
}

// -- 2. Render IGT 4-line block into #glosser-results --
function renderGlosserIGT(sentences, mode) {
    const usedMode = mode || glosserMode;
    const modeBadge = usedMode === 'semantic'
        ? `<span style="background:rgba(139,92,246,0.2); color:#c4b5fd; border:1px solid rgba(139,92,246,0.4); padding:0.1rem 0.5rem; border-radius:999px; font-size:0.72rem; margin-left:0.5rem;">🔤 語意標注</span>`
        : `<span style="background:rgba(100,116,139,0.2); color:#94a3b8; border:1px solid rgba(100,116,139,0.4); padding:0.1rem 0.5rem; border-radius:999px; font-size:0.72rem; margin-left:0.5rem;">🔬 構詞語法標注</span>`;
    const container = document.getElementById('glosser-results');
    container.innerHTML = '';
    glosserSessionData = sentences;

    sentences.forEach((sentObj, sIdx) => {
        const words = sentObj.words || [];
        const translation = sentObj.translation || '';
        const originalLine = words.map(w => w.raw).join('  ');

        let groups = [];
        words.forEach((w, wIdx) => {
            const m = (w.morph || w.raw || '').trim();
            if (m.startsWith('=') && groups.length > 0) {
                groups[groups.length - 1].push({w, wIdx});
            } else {
                groups.push([{w, wIdx}]);
            }
        });

        const wordColsHtml = groups.map(group => {
            const cols = group.map(item => {
                const w = item.w;
                const wIdx = item.wIdx;
                const isLow = w.confidence === 'low';
                return `
                <div class="igt-word-col ${isLow ? 'igt-low-conf' : ''}"
                     data-raw="${escapeHtml(w.raw || '')}"
                     data-sidx="${sIdx}" data-widx="${wIdx}">
                    <div class="igt-l2" contenteditable="true" title="詞素切分（可點擊編輯）">${escapeHtml(w.morph || w.raw || '')}</div>
                    <div class="igt-l3" contenteditable="true" title="語法標記（可點擊編輯）">${escapeHtml(w.gloss || '')}</div>
                </div>`;
            }).join('');
            return `<div class="igt-word-group" style="display:flex; gap:0;">${cols}</div>`;
        }).join('');

        const block = document.createElement('div');
        block.className = 'igt-block';
        block.dataset.sidx = sIdx;
        block.dataset.mode = usedMode;
        block.innerHTML = `
            <div style="font-size:0.75rem; color:#64748b; margin-bottom:0.5rem; font-weight:600;">句子成果 #${sIdx + 1}${modeBadge}</div>
            <div class="igt-l1">${escapeHtml(originalLine)}</div>
            <div class="igt-words-row">${wordColsHtml}</div>
            <div class="igt-l4" contenteditable="true" title="華語意譯（可點擊編輯）">${escapeHtml(translation)}</div>
            <div class="igt-actions">
                <button class="igt-save-btn" onclick="glosserSaveSentence(this, ${sIdx})">${igtSaveLabel()}</button>
                <button class="igt-csv-btn igt-import-btn" style="background:#0ea5e9;color:white;border-color:#0284c7;" onclick="importToDictSentence(this)">${igtImportLabel()}</button>
                <span class="igt-save-msg" style="color:#4ade80;font-size:0.8rem;display:none;">✅ 已儲存！</span>
            </div>
        `;
        container.appendChild(block);
    });
}

// -- 3. Analyze button handler --
document.addEventListener('DOMContentLoaded', () => {
    // Start status polling as soon as page loads
    checkGlosserStatus();
    setInterval(checkGlosserStatus, 6000);

    const btn = document.getElementById('glosserAnalyzeBtn');
    if (!btn) return;

    btn.addEventListener('click', async () => {
        let trukuText   = (document.getElementById('glosser-truku-input').value || '').trim();
        let chineseText = (document.getElementById('glosser-chinese-input').value || '').trim();

        if (!trukuText) { alert('請先輸入太魯閣語語料！'); return; }

        const loading  = document.getElementById('glosser-loading');
        const errorDiv = document.getElementById('glosser-error');
        const timer    = document.getElementById('glosser-timer');
        const results  = document.getElementById('glosser-results');
        const batchBar = document.getElementById('glosser-batch-bar');

        loading.classList.remove('hidden');
        errorDiv.classList.add('hidden');
        timer.classList.add('hidden');
        results.innerHTML = '';
        batchBar.classList.add('hidden');
        btn.disabled = true;

        // Smart sentence splitting (same as original glosser)
        trukuText   = trukuText.replace(/([.?])\s+/g, '$1\n').replace(/\n+/g, '\n');
        chineseText = chineseText.replace(/([。？!])\s*/g, '$1\n').replace(/\n+/g, '\n');

        const startTime = performance.now();
        try {
            const customApiKey = localStorage.getItem('custom_gemini_api_key') || "";
            const res = await fetch('/api/parse', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ truku_sentence: trukuText, chinese_translation: chineseText, custom_api_key: customApiKey, annotation_mode: glosserMode })
            });
            if (res.status === 429) {
                const errData = await res.json().catch(() => ({}));
                throw new Error(errData.detail === 'RATE_LIMITED' ? errData.message : 'QUOTA_EXCEEDED');
            }
            if (res.status === 503) {
                const errData = await res.json().catch(() => ({}));
                throw new Error(errData.message || 'SERVICE_BUSY');
            }
            if (!res.ok) {
                let errText = await res.text();
                try {
                    const parsed = JSON.parse(errText);
                    if (parsed.message) errText = parsed.message;
                    else if (parsed.detail) errText = parsed.detail;
                } catch(ign) {}
                throw new Error(errText);
            }
            const data = await res.json();
            const elapsed = ((performance.now() - startTime) / 1000).toFixed(2);
            const sentences = data.sentences || [];

            if (sentences.length === 0) throw new Error('AI 未回傳任何標注結果。');

            const usedMode = data.annotation_mode || glosserMode;
            const modeLabel = usedMode === 'semantic' ? '🔤 語意標注' : '🔬 構詞語法標注';

            timer.classList.remove('hidden');
            timer.innerHTML = `⏱️ 批次標注完成（${modeLabel}）！共處理 <b>${sentences.length}</b> 個句子，核心運算耗時 <b>${elapsed} 秒</b>。`;

            renderGlosserIGT(sentences, usedMode);
            batchBar.classList.remove('hidden');

        } catch(e) {
            errorDiv.classList.remove('hidden');
            if (e.message.includes('QUOTA_EXCEEDED')) {
                errorDiv.innerHTML = `❌ 系統公用額度已用完！<br><small style="color:#f87171;">請通知作者，或點擊右上角「⚙️ API 設定」填寫您個人的 Google Gemini API Key 後繼續使用。</small>`;
            } else if (e.message.includes('SERVICE_BUSY') || e.message.includes('503') || e.message.includes('high demand') || e.message.includes('UNAVAILABLE')) {
                errorDiv.innerHTML = `⚠️ <b>Google 伺服器目前尖峰塞車 (503 High Demand)</b><br><small style="color:#cbd5e1;">這是 Google 官方端暫時性算力滿載（免費版 Key 優先級較低時常發生）。<br>👉 <b>請稍等 10~20 秒後重新點擊「送出標注」</b>；若需大量穩定標注，更換為付費版 (Pay-as-you-go) 金鑰可徹底避免此問題。</small>`;
            } else {
                errorDiv.innerHTML = `❌ 標注失敗：${escapeHtml(e.message)}<br><small style="color:#94a3b8;">請檢查您的 API Key 是否有效，或稍後再試。</small>`;
            }
        } finally {
            loading.classList.add('hidden');
            btn.disabled = false;
        }
    });
});

// -- 4. Save one sentence to memory DB --
window.glosserSaveSentence = function(btn, sIdx) {
    return saveIgtBlockCorrection(btn.closest('.igt-block'));
};

window.importToDictSentence = async function(btn) {
    const question = isAdmin
        ? "確定要將這句話與意譯「匯入主辭典」作為標準例句嗎？"
        : "確定要建議把這句話與意譯加入主辭典嗎？\n管理員審核通過後才會加入。";
    if (!confirm(question)) return;
    const block = btn.closest('.igt-block');
    const trukuSentence = block.querySelector('.igt-l1').innerText.trim();
    const chineseTranslation = block.querySelector('.igt-l4').innerText.trim();
    btn.textContent = isAdmin ? '匯入中...' : '送出中...';
    btn.disabled = true;
    try {
        const message = await addSentenceToDictionary(trukuSentence, chineseTranslation);
        btn.textContent = isAdmin ? '✅ 完成' : '✅ 已送出建議';
        alert(message);
    } catch(e) {
        btn.textContent = '❌ 失敗';
        alert(`❌ ${isAdmin ? '匯入' : '送出'}失敗：${e.message}`);
    }
    setTimeout(() => { btn.textContent = igtImportLabel(); btn.disabled = false; }, 3000);
};

// -- 5. Batch CSV export from the glosser tab --
window.glosserBatchCsv = function() {
    const blocks = document.querySelectorAll('#glosser-results .igt-block');
    if (!blocks.length) return;
    let csv = '\uFEFF句子編號,行一(原文),行二(詞素切分),行三(語法標記),行四(華語翻譯)\n';
    blocks.forEach((block, i) => {
        const l1 = block.querySelector('.igt-l1').innerText.trim();
        const cols = block.querySelectorAll('.igt-word-col');
        const morphs  = Array.from(cols).map(c => c.querySelector('.igt-l2').innerText.trim()).join('   ');
        const glosses = Array.from(cols).map(c => c.querySelector('.igt-l3').innerText.trim()).join('   ');
        const l4 = block.querySelector('.igt-l4').innerText.replace(/^'|'$/g,'').trim();
        csv += `${i+1},"${l1.replace(/"/g,'""')}","${morphs.replace(/"/g,'""')}","${glosses.replace(/"/g,'""')}","${l4.replace(/"/g,'""')}"\n`;
    });
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = `太魯閣語IGT標注_${new Date().toISOString().slice(0,10)}.csv`;
    a.click();
};

// -- 6. Batch Word export from the glosser tab --
window.glosserBatchWord = async function() {
    const blocks = document.querySelectorAll('#glosser-results .igt-block');
    if (!blocks.length) return;
    const payload = { sentences: [] };
    blocks.forEach(block => {
        const cols = block.querySelectorAll('.igt-word-col');
        const words = Array.from(cols).map(col => ({
            raw:   col.dataset.raw,
            morph: col.querySelector('.igt-l2').innerText.trim(),
            gloss: col.querySelector('.igt-l3').innerText.trim(),
            confidence: 'high'
        }));
        const trans = block.querySelector('.igt-l4').innerText.replace(/^'|'$/g,'').trim();
        payload.sentences.push({ words, translation: trans });
    });
    try {
        const res = await fetch('/api/download_word', {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(payload)
        });
        const blob = await res.blob();
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = `太魯閣語IGT標注成果_${new Date().toISOString().slice(0,10)}.docx`;
        a.click();
    } catch(e) { alert('下載失敗，請確認標注後端已開啟。'); }
};

// -- 7. Bridge: fill glosser tab from a search result sentence --
window.sendToGlosser = function(trukuSentence, chineseTranslation) {
    // Switch to glosser tab — 透過頁籤按鈕切換，與一般切換共用同一套 .active 樣式
    // （原本改用 .hidden 切換，CSS 只認 .active，會造成畫面空白且其他頁籤無法再顯示）
    document.querySelector('[data-tab="tab-glosser"]').click();

    // Pre-fill input fields
    document.getElementById('glosser-truku-input').value   = trukuSentence;
    document.getElementById('glosser-chinese-input').value = chineseTranslation || '';

    // Scroll up and auto-click analyze
    document.getElementById('glosser-truku-input').scrollIntoView({ behavior: 'smooth' });
    setTimeout(() => { document.getElementById('glosserAnalyzeBtn').click(); }, 400);
};

// =========================================================
// ☀️  Theme Toggle Logic (Light / Dark Mode)
// =========================================================
document.addEventListener('DOMContentLoaded', () => {
    const themeToggleBtn = document.getElementById('themeToggleBtn');
    if (!themeToggleBtn) return;

    // Default to dark mode unless 'light' is saved
    const savedTheme = localStorage.getItem('truku-dict-theme');
    if (savedTheme === 'light') {
        document.documentElement.setAttribute('data-theme', 'light');
        themeToggleBtn.innerHTML = '🌙 暗色模式';
    }

    themeToggleBtn.addEventListener('click', () => {
        const currentTheme = document.documentElement.getAttribute('data-theme');
        if (currentTheme === 'light') {
            document.documentElement.removeAttribute('data-theme'); // reverts to dark (default)
            localStorage.setItem('truku-dict-theme', 'dark');
            themeToggleBtn.innerHTML = '☀️ 亮色模式';
        } else {
            document.documentElement.setAttribute('data-theme', 'light');
            localStorage.setItem('truku-dict-theme', 'light');
            themeToggleBtn.innerHTML = '🌙 暗色模式';
        }
    });
});

// =========================================================
// 📁  Workspace / Projects Logic
// =========================================================
let currentActiveProjectId = null;
let currentProjectSentences = [];
let batchAbortController = null;

async function loadProjectsList() {
    const container = document.getElementById('projects-list-container');
    if (!container) return;

    try {
        const resp = await adminFetch('/api/projects');
        const data = await resp.json();
        const projects = data.projects || [];

        if (projects.length === 0) {
            container.innerHTML = `
                <div style="text-align: center; color: var(--text-muted); padding: 2rem 0.5rem; font-size: 0.88rem;">
                    尚無任何專案<br>
                    <button onclick="openCreateProjectModal()" style="margin-top: 0.8rem; background: rgba(16,185,129,0.15); color: #34d399; border: 1px solid rgba(16,185,129,0.3); padding: 0.35rem 0.8rem; border-radius: 6px; cursor: pointer; font-size: 0.82rem;">➕ 建立第一個專案</button>
                </div>
            `;
            return;
        }

        container.innerHTML = projects.map(p => `
            <div onclick="selectProject(${p.id})" 
                 class="project-item-card ${currentActiveProjectId === p.id ? 'active' : ''}"
                 style="background: ${currentActiveProjectId === p.id ? 'rgba(139,92,246,0.18)' : 'rgba(255,255,255,0.03)'}; border: 1px solid ${currentActiveProjectId === p.id ? 'rgba(139,92,246,0.5)' : 'rgba(255,255,255,0.08)'}; border-radius: 8px; padding: 0.7rem 0.9rem; cursor: pointer; transition: all 0.2s;">
                <div style="font-weight: 600; font-size: 0.95rem; color: var(--text-color); margin-bottom: 0.3rem;">${escapeHtml(p.name)}</div>
                <div style="display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-muted);">
                    <span>共 ${p.total_count} 句</span>
                    <span style="color: #34d399;">已完成 ${p.done_count}</span>
                </div>
            </div>
        `).join('');

    } catch (e) {
        container.innerHTML = `<div style="color: #ef4444; padding: 1rem;">載入失敗: ${escapeHtml(e.message)}</div>`;
    }
}

window.openCreateProjectModal = async function() {
    const name = prompt('請輸入新專案名稱：\n（例如：第一冊第八課、賽德克故事選集）');
    if (!name || !name.trim()) return;
    const description = prompt('請輸入專案描述（選填）：') || '';

    try {
        const resp = await adminFetch('/api/projects', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ name: name.trim(), description: description.trim() })
        });
        const data = await resp.json();
        if (!resp.ok) throw new Error(data.message || data.error || '建立失敗');

        await loadProjectsList();
        selectProject(data.id);
    } catch (e) {
        alert(`❌ 建立失敗: ${e.message}`);
    }
};

window.selectProject = async function(pid) {
    currentActiveProjectId = pid;
    const emptyState = document.getElementById('project-empty-state');
    const activeWorkbench = document.getElementById('project-active-workbench');
    if (emptyState) emptyState.classList.add('hidden');
    if (activeWorkbench) activeWorkbench.classList.remove('hidden');

    loadProjectsList();

    try {
        const resp = await adminFetch(`/api/projects/${pid}`);
        if (!resp.ok) throw new Error('找不到此專案');
        const data = await resp.json();
        const p = data.project;
        currentProjectSentences = data.sentences || [];

        document.getElementById('current-proj-name').textContent = p.name;
        document.getElementById('current-proj-desc').textContent = p.description || '無描述';

        const total = currentProjectSentences.length;
        const done = currentProjectSentences.filter(s => s.status === 'done').length;
        const pending = currentProjectSentences.filter(s => s.status === 'pending').length;
        document.getElementById('proj-stats-badge').innerHTML = `總計 <b>${total}</b> 句 ｜ 已完成 <b style="color:#34d399">${done}</b> ｜ 待標注 <b style="color:#a78bfa">${pending}</b>`;

        renderProjectSentences(currentProjectSentences);

    } catch (e) {
        alert(`❌ 載入專案失敗: ${e.message}`);
    }
};

function renderProjectSentences(sentences) {
    const container = document.getElementById('project-sentences-container');
    if (!container) return;

    if (sentences.length === 0) {
        container.innerHTML = `
            <div style="text-align: center; padding: 3rem 1rem; color: var(--text-muted); background: rgba(255,255,255,0.02); border-radius: 8px;">
                此專案尚無任何語料。<br>請上方點擊「📁 選擇檔案並匯入」上傳 Excel 或 TXT 檔案。
            </div>
        `;
        return;
    }

    container.innerHTML = sentences.map((s, idx) => {
        const igt = s.igt_result;
        const words = (igt && igt.words) ? igt.words : [];

        let statusBadge = `<span style="background: rgba(148,163,184,0.2); color: #94a3b8; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.78rem;">待標注</span>`;
        if (s.status === 'done') {
            statusBadge = `<span style="background: rgba(52,211,153,0.18); color: #34d399; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.78rem;">✅ 標注完成</span>`;
        } else if (s.status === 'error') {
            statusBadge = `<span style="background: rgba(239,68,68,0.18); color: #fca5a5; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.78rem;">❌ 錯誤</span>`;
        }

        let wordsHtml = '';
        if (words.length > 0) {
            wordsHtml = `
                <div style="display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.8rem; background: rgba(0,0,0,0.2); padding: 0.8rem; border-radius: 8px;">
                    ${words.map((w, wIdx) => `
                        <div style="display: flex; flex-direction: column; align-items: center; background: rgba(255,255,255,0.05); padding: 0.4rem 0.6rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.08);">
                            <span style="font-size: 0.82rem; color: var(--text-muted);">${escapeHtml(w.raw || '')}</span>
                            <span contenteditable="true" onblur="updateSentenceWord(${s.id}, ${wIdx}, 'morph', this.innerText)" style="font-weight: 600; color: #a78bfa; font-size: 0.92rem; outline: none; border-bottom: 1px dashed rgba(167,139,250,0.4);">${escapeHtml(w.morph || '')}</span>
                            <span contenteditable="true" onblur="updateSentenceWord(${s.id}, ${wIdx}, 'gloss', this.innerText)" style="font-size: 0.85rem; color: #34d399; outline: none; border-bottom: 1px dashed rgba(52,211,153,0.4);">${escapeHtml(w.gloss || '')}</span>
                        </div>
                    `).join('')}
                </div>
            `;
        }

        return `
            <div style="background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 1rem;">
                <div style="display: flex; justify-content: space-between; align-items: flex-start;">
                    <div>
                        <span style="font-weight: bold; color: var(--text-muted); font-size: 0.85rem; margin-right: 0.5rem;">#${idx + 1}</span>
                        ${statusBadge}
                    </div>
                </div>
                <div style="margin-top: 0.6rem; font-weight: 600; font-size: 1.05rem; color: var(--text-color);">${escapeHtml(s.truku_sentence)}</div>
                <div style="color: var(--text-muted); font-size: 0.9rem; margin-top: 0.2rem;">${escapeHtml(s.chinese_translation || '(無中文對照)')}</div>
                ${wordsHtml}
            </div>
        `;
    }).join('');
}

window.updateSentenceWord = async function(sid, wIdx, field, newText) {
    const s = currentProjectSentences.find(item => item.id === sid);
    if (!s || !s.igt_result || !s.igt_result.words) return;

    s.igt_result.words[wIdx][field] = newText.trim();

    try {
        const resp = await adminFetch(`/api/projects/${currentActiveProjectId}/sentences/${sid}`, {
            method: 'PATCH',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ igt_result: s.igt_result })
        });
        if (!resp.ok) alert(`❌ 更新失敗：${await readErrorMessage(resp, '請稍後再試。')}`);
    } catch (e) {
        console.error('更新單句失敗:', e);
    }
};

window.handleProjectFileSelect = async function(event) {
    const file = event.target.files[0];
    if (!file || !currentActiveProjectId) return;

    const formData = new FormData();
    formData.append('file', file);

    try {
        const resp = await adminFetch(`/api/projects/${currentActiveProjectId}/import`, {
            method: 'POST',
            body: formData
        });
        const data = await resp.json();
        if (!resp.ok) throw new Error(data.message || data.error || '匯入失敗');

        alert(`✅ ${data.message}`);
        selectProject(currentActiveProjectId);
    } catch (e) {
        alert(`❌ 匯入失敗: ${e.message}`);
    }
};

window.startBatchAnnotation = async function() {
    if (!currentActiveProjectId) return;

    const customApiKey = localStorage.getItem('custom_gemini_api_key') || "";
    const progressContainer = document.getElementById('batch-progress-container');
    const progressBar = document.getElementById('batch-progress-bar');
    const progressText = document.getElementById('batch-progress-text');
    const progressPct = document.getElementById('batch-progress-pct');
    const startBtn = document.getElementById('start-batch-btn');

    if (progressContainer) progressContainer.classList.remove('hidden');
    if (startBtn) startBtn.disabled = true;

    // 改用 POST 串流（EventSource 只能 GET，金鑰會被放進網址）
    const pid = currentActiveProjectId;
    if (batchAbortController) batchAbortController.abort();
    batchAbortController = new AbortController();

    const handleBatchEvent = function(data) {
        if (data.event === 'progress') {
            const pct = data.progress;
            if (progressBar) progressBar.style.width = `${pct}%`;
            if (progressPct) progressPct.textContent = `${pct}%`;
            if (progressText) progressText.textContent = `[${data.current}/${data.total}] 正在標注：${data.truku_sentence}`;

            const s = currentProjectSentences.find(item => item.id === data.sentence_id);
            if (s) {
                s.status = data.status;
                s.igt_result = data.igt_result;
                renderProjectSentences(currentProjectSentences);
            }
        } else if (data.event === 'completed') {
            if (progressBar) progressBar.style.width = '100%';
            if (progressPct) progressPct.textContent = '100%';
            if (progressText) progressText.textContent = `✅ 批次標注完成！`;
        }
    };

    try {
        const resp = await adminFetch(`/api/projects/${pid}/run_batch`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ custom_api_key: customApiKey }),
            signal: batchAbortController.signal
        });
        if (!resp.ok) throw new Error(await readErrorMessage(resp, '批次標注啟動失敗'));

        const reader = resp.body.getReader();
        const decoder = new TextDecoder();
        let buffer = '';
        while (true) {
            const { done, value } = await reader.read();
            if (done) break;
            buffer += decoder.decode(value, { stream: true });
            let sep;
            while ((sep = buffer.indexOf('\n\n')) >= 0) {
                const chunk = buffer.slice(0, sep);
                buffer = buffer.slice(sep + 2);
                const line = chunk.split('\n').find(l => l.startsWith('data: '));
                if (line) handleBatchEvent(JSON.parse(line.slice(6)));
            }
        }
    } catch (err) {
        if (err.name === 'AbortError') return;
        if (progressText) progressText.textContent = `⚠️ 批次標注中斷：${err.message}，將重新載入專案...`;
    } finally {
        if (startBtn) startBtn.disabled = false;
    }
    if (currentActiveProjectId === pid) selectProject(pid);
};

window.exportCurrentProject = function(fmt) {
    if (!currentActiveProjectId) return;
    // 匯出需要管理員憑證，無法用一般連結下載，改用 fetch 取得檔案後再存檔
    adminFetch(`/api/projects/${currentActiveProjectId}/export?format=${encodeURIComponent(fmt)}`)
        .then(async res => {
            if (!res.ok) throw new Error(await readErrorMessage(res, '匯出失敗'));
            const blob = await res.blob();
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = `專案匯出_IGT.${fmt === 'csv' ? 'csv' : 'docx'}`;
            a.click();
            URL.revokeObjectURL(a.href);
        })
        .catch(e => alert(`❌ ${e.message}`));
};

window.deleteCurrentProject = async function() {
    if (!currentActiveProjectId) return;
    if (!confirm('⚠️ 確定要刪除整個專案及其所有句子嗎？此動作無法復原！')) return;

    try {
        const resp = await adminFetch(`/api/projects/${currentActiveProjectId}`, { method: 'DELETE' });
        if (!resp.ok) throw new Error(await readErrorMessage(resp, '刪除失敗'));
        currentActiveProjectId = null;
        document.getElementById('project-active-workbench').classList.add('hidden');
        document.getElementById('project-empty-state').classList.remove('hidden');
        loadProjectsList();
    } catch (e) {
        alert(`❌ 刪除失敗: ${e.message}`);
    }
};

// ═══════════════════════════════════════════════════
// 📊 使用量事件記錄工具函式
// ═══════════════════════════════════════════════════

/**
 * 非阻塞式事件記錄 — fire-and-forget
 * @param {string} eventType  'search' | 'tts' | 'igt_parse' | 'project_batch'
 * @param {object} eventData  附帶資料（關鍵字、語者等）
 */
window.logEvent = function(eventType, eventData = {}) {
    fetch('/api/log_event', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ event_type: eventType, event_data: eventData })
    }).catch(() => {}); // 靜默失敗，不影響主功能
};

// ═══════════════════════════════════════════════════
// 📊 使用量儀表板載入 & 渲染
// ═══════════════════════════════════════════════════

let usageTrendChart = null;
let usageFeatureChart = null;
let usageSearchTypeChart = null;
let usageTtsSpeakerChart = null;

async function loadUsageDashboard() {
    try {
        const resp = await adminFetch('/api/dashboard');
        if (!resp.ok) throw new Error('API failed');
        const d = await resp.json();

        // ── 數字卡片 ──
        document.getElementById('usage-total-search').textContent = (d.total_search || 0).toLocaleString();
        document.getElementById('usage-total-tts').textContent = (d.total_tts || 0).toLocaleString();
        document.getElementById('usage-total-igt').textContent = (d.total_igt || 0).toLocaleString();
        document.getElementById('usage-total-batch').textContent = (d.total_batch || 0).toLocaleString();

        // ── 7日趨勢折線圖 ──
        const trendCtx = document.getElementById('usageTrendChart');
        if (trendCtx) {
            if (usageTrendChart) usageTrendChart.destroy();
            usageTrendChart = new Chart(trendCtx.getContext('2d'), {
                type: 'line',
                data: {
                    labels: d.daily_trend.map(r => r.date.slice(5)), // MM-DD
                    datasets: [{
                        label: '每日搜尋次數',
                        data: d.daily_trend.map(r => r.count),
                        borderColor: '#38bdf8',
                        backgroundColor: 'rgba(56,189,248,0.15)',
                        borderWidth: 2,
                        pointBackgroundColor: '#38bdf8',
                        pointRadius: 4,
                        fill: true,
                        tension: 0.4
                    }]
                },
                options: {
                    responsive: true,
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { ticks: { color: '#94a3b8' }, grid: { color: 'rgba(255,255,255,0.05)' } },
                        y: { ticks: { color: '#94a3b8', stepSize: 1 }, grid: { color: 'rgba(255,255,255,0.05)' }, min: 0 }
                    }
                }
            });
        }

        // ── 功能使用環形圖 ──
        const featureCtx = document.getElementById('usageFeatureChart');
        if (featureCtx) {
            if (usageFeatureChart) usageFeatureChart.destroy();
            const featureLabels = { search: '搜尋', tts: 'TTS語音', igt_parse: 'IGT標注', project_batch: '批次標注' };
            const fKeys = Object.keys(d.totals);
            const fVals = fKeys.map(k => d.totals[k]);
            const fColors = ['#38bdf8', '#34d399', '#a78bfa', '#fb923c'];
            usageFeatureChart = new Chart(featureCtx.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: fKeys.map(k => featureLabels[k] || k),
                    datasets: [{ data: fVals, backgroundColor: fColors, borderWidth: 0 }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'bottom', labels: { color: '#e2e8f0', boxWidth: 12 } }
                    }
                }
            });
        }

        // ── 搜尋類型橫條圖 ──
        const stCtx = document.getElementById('usageSearchTypeChart');
        if (stCtx) {
            if (usageSearchTypeChart) usageSearchTypeChart.destroy();
            const stLabelMap = { truku: '族語搜尋', chinese: '中文搜尋', source: '來源詞搜尋', unknown: '未知' };
            const stKeys = Object.keys(d.search_type_dist);
            const stVals = stKeys.map(k => d.search_type_dist[k]);
            usageSearchTypeChart = new Chart(stCtx.getContext('2d'), {
                type: 'bar',
                data: {
                    labels: stKeys.map(k => stLabelMap[k] || k),
                    datasets: [{
                        label: '次數',
                        data: stVals,
                        backgroundColor: ['#60a5fa', '#a78bfa', '#34d399', '#94a3b8'],
                        borderRadius: 6
                    }]
                },
                options: {
                    responsive: true,
                    indexAxis: 'y',
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { ticks: { color: '#94a3b8' }, grid: { color: 'rgba(255,255,255,0.05)' }, min: 0 },
                        y: { ticks: { color: '#e2e8f0' }, grid: { display: false } }
                    }
                }
            });
        }

        // ── TTS語者環形圖 ──
        const spCtx = document.getElementById('usageTtsSpeakerChart');
        if (spCtx) {
            if (usageTtsSpeakerChart) usageTtsSpeakerChart.destroy();
            const spLabelMap = { female: '女聲', male1: '男聲1', male2: '男聲2', unknown: '未知' };
            const spKeys = Object.keys(d.tts_speaker_dist);
            const spVals = spKeys.map(k => d.tts_speaker_dist[k]);
            usageTtsSpeakerChart = new Chart(spCtx.getContext('2d'), {
                type: 'doughnut',
                data: {
                    labels: spKeys.map(k => spLabelMap[k] || k),
                    datasets: [{ data: spVals, backgroundColor: ['#f472b6', '#60a5fa', '#34d399', '#94a3b8'], borderWidth: 0 }]
                },
                options: {
                    responsive: true,
                    plugins: {
                        legend: { position: 'bottom', labels: { color: '#e2e8f0', boxWidth: 12 } }
                    }
                }
            });
        }

        // ── TOP 20 熱門搜尋詞 ──
        const topEl = document.getElementById('usage-top-queries');
        if (topEl) {
            if (!d.top_queries || d.top_queries.length === 0) {
                topEl.innerHTML = '<p style="color: var(--text-muted); font-size:0.88rem;">尚無搜尋記錄。請先在「辭典查詢」頁籤搜尋幾個詞彙後再回來查看。</p>';
            } else {
                const maxCnt = d.top_queries[0].count;
                topEl.innerHTML = d.top_queries.map((item, idx) => {
                    const pct = Math.round((item.count / maxCnt) * 100);
                    const medal = idx === 0 ? '🥇' : idx === 1 ? '🥈' : idx === 2 ? '🥉' : `${idx + 1}.`;
                    return `
                        <div style="display:flex; align-items:center; gap:0.75rem; padding:0.4rem 0.6rem; border-radius:6px; background:rgba(255,255,255,0.03);">
                            <span style="width:2rem; text-align:center; font-weight:bold; color:#94a3b8;">${medal}</span>
                            <span style="flex:1; font-family:monospace; color:#f8fafc; font-size:0.95rem;">${escapeHtml(item.query)}</span>
                            <div style="width:120px; height:6px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden;">
                                <div style="width:${pct}%; height:100%; background:#38bdf8; border-radius:3px;"></div>
                            </div>
                            <span style="color:#38bdf8; font-size:0.85rem; min-width:2.5rem; text-align:right;">${item.count}</span>
                        </div>`;
                }).join('');
            }
        }

    } catch (e) {
        console.warn('[Dashboard] 載入失敗：', e.message);
    }
}

// ── 在 initSubTabs 中監聽 subtab-usage 點擊，自動重新載入儀表板 ──
document.addEventListener('DOMContentLoaded', () => {
    document.addEventListener('click', (e) => {
        const btn = e.target.closest('.sub-tab-btn');
        if (btn && btn.dataset.subtab === 'subtab-usage') {
            loadUsageDashboard();
        }
    });
});


// =========================================================
// 📥 建議審核頁（管理員登入後才顯示）
// 使用者送出的逐詞校正與例句建議，要管理員按「核准」才會真正寫入
// =========================================================
let reviewSection = 'suggestions';
let reviewStatus = 'pending';
let reviewItems = [];

const FEEDBACK_TYPE_LABELS = { system_bug: '系統功能異常', sentence_error: '例句內容錯誤', suggestion: '功能建議' };
const REVIEW_FILTER_LABELS = {
    'suggestions:pending': '待審核建議', 'suggestions:approved': '已核准', 'suggestions:rejected': '已退回',
    'feedback:pending': '未處理回報', 'feedback:handled': '已處理回報'
};

// SQLite 的 CURRENT_TIMESTAMP 是 UTC，顯示時轉成使用者當地時間
function formatUtcTimestamp(ts) {
    if (!ts) return '';
    const d = new Date(String(ts).replace(' ', 'T') + 'Z');
    return isNaN(d) ? String(ts) : d.toLocaleString('zh-TW', { hour12: false });
}

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.review-filter-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            reviewSection = btn.dataset.section;
            reviewStatus = btn.dataset.status;
            document.querySelectorAll('.review-filter-btn').forEach(b => b.classList.toggle('active', b === btn));
            loadReviewTab();
        });
    });
});

// ── 資料保存狀態（Storage Bucket 是否掛載、最後備份時間、錯誤訊息） ──
function formatAgo(epochSeconds, serverNow) {
    if (!epochSeconds) return '';
    const sec = Math.max(0, Math.round((serverNow || Date.now() / 1000) - epochSeconds));
    if (sec < 60) return `${sec} 秒前`;
    if (sec < 3600) return `${Math.round(sec / 60)} 分鐘前`;
    return new Date(epochSeconds * 1000).toLocaleString('zh-TW', { hour12: false });
}

function renderStorageStatus(s, message) {
    const box = document.getElementById('storage-status');
    if (!box) return;
    let level, headline, detail = '';
    if (!s.mount_exists) {
        level = 'bad';
        headline = '⚠️ 沒有偵測到 Storage Bucket：Space 重啟後，建議、回報、黃金記憶庫校正都會消失';
        detail = '請到這個 Space 的 Settings →「Storage Buckets」掛載 Bucket，掛載路徑填 /data。';
    } else if (s.last_error) {
        level = 'bad';
        headline = '⚠️ 已偵測到 Bucket，但備份失敗';
        detail = `錯誤訊息：${s.last_error}`;
    } else if (s.backup_exists) {
        level = 'ok';
        headline = `✅ 資料保存正常：最後備份 ${formatAgo(s.backup_mtime, s.server_time)}`;
        detail = `備份位置：${s.backup_file}（${(s.backup_size / 1024).toFixed(1)} KB）`;
    } else {
        level = 'warn';
        headline = '⏳ 已偵測到 Bucket，尚未產生備份';
        detail = '有人送出建議、回報或審核後約 30 秒會自動備份；也可以按「立即備份」。';
    }
    const color = { ok: '#10b981', warn: '#f59e0b', bad: '#ef4444' }[level];
    box.style.borderColor = color;
    box.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;">
            <div>
                <div style="font-weight: 700; color: ${color};">💾 ${escapeHtml(headline)}</div>
                <div style="font-size: 0.85rem; color: var(--text-muted); margin-top: 0.3rem;">${escapeHtml(detail)}</div>
                <div style="font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem;">本站：${escapeHtml(s.site_env)}｜啟動時：${escapeHtml(s.restore || '—')}${s.mount_exists && !s.mount_writable ? '｜⚠️ 掛載點看起來是唯讀' : ''}</div>
                ${message ? `<div style="font-size: 0.85rem; margin-top: 0.4rem; color: var(--text-color);">${escapeHtml(message)}</div>` : ''}
            </div>
            <button class="review-approve-btn" style="border-radius: 6px; padding: 0.35rem 0.9rem; cursor: pointer; font-weight: 600;" onclick="snapshotNow(this)">💾 立即備份</button>
        </div>`;
}

async function loadStorageStatus() {
    try {
        const res = await adminFetch('/api/admin/storage_status');
        if (res.ok) renderStorageStatus(await res.json());
    } catch (e) { console.error(e); }
}

window.snapshotNow = async function(btn) {
    btn.disabled = true;
    btn.textContent = '備份中...';
    try {
        const res = await adminFetch('/api/admin/storage_snapshot', { method: 'POST' });
        const data = await res.json().catch(() => ({}));
        if (data.status) renderStorageStatus(data.status, data.message);
        else alert(data.message || '備份失敗');
    } catch (e) {
        alert(`❌ ${e.message}`);
        btn.disabled = false;
        btn.textContent = '💾 立即備份';
    }
};

async function loadReviewTab() {
    const list = document.getElementById('review-list');
    if (!list) return;
    loadStorageStatus();
    list.innerHTML = '<p style="color: var(--text-muted);">載入中...</p>';
    try {
        const sStatus = reviewSection === 'suggestions' ? reviewStatus : 'pending';
        const fStatus = reviewSection === 'feedback' ? reviewStatus : 'pending';
        const [sRes, fRes] = await Promise.all([
            adminFetch(`/api/admin/suggestions?status=${encodeURIComponent(sStatus)}`),
            adminFetch(`/api/admin/feedback?status=${encodeURIComponent(fStatus)}`)
        ]);
        if (!sRes.ok || !fRes.ok) {
            const failed = sRes.ok ? fRes : sRes;
            const msg = await readErrorMessage(failed, '載入失敗');
            if (failed.status === 403) await refreshAdminState();
            throw new Error(msg);
        }
        const sData = await sRes.json();
        const fData = await fRes.json();
        updateReviewCounts(sData.counts || {}, fData.counts || {});

        reviewItems = reviewSection === 'suggestions' ? (sData.suggestions || []) : (fData.feedback || []);
        if (!reviewItems.length) {
            list.innerHTML = '<p style="color: var(--text-muted); text-align: center; padding: 2rem 0;">目前沒有資料。</p>';
            return;
        }
        list.innerHTML = reviewItems.map(item =>
            reviewSection === 'suggestions' ? renderSuggestionCard(item) : renderFeedbackCard(item)
        ).join('');
    } catch (e) {
        list.innerHTML = `<p style="color: #ef4444;">❌ ${escapeHtml(e.message)}</p>`;
    }
}

function updateReviewCounts(sCounts, fCounts) {
    document.querySelectorAll('.review-filter-btn').forEach(btn => {
        const counts = btn.dataset.section === 'suggestions' ? sCounts : fCounts;
        const label = REVIEW_FILTER_LABELS[`${btn.dataset.section}:${btn.dataset.status}`];
        btn.textContent = `${label} (${counts[btn.dataset.status] || 0})`;
    });
}

function renderSuggestionCard(item) {
    const p = item.payload || {};
    const id = Number(item.id) || 0;
    const pending = item.status === 'pending';
    const edit = pending ? 'class="review-editable" contenteditable="true"' : '';
    let body;

    if (item.kind === 'correction') {
        const modeLabel = p.annotation_mode === 'semantic' ? '🔤 語意標注' : '🔬 構詞語法標注';
        const rows = (p.words || []).map(w => `
            <tr data-raw="${escapeHtml(w.raw)}">
                <td>${escapeHtml(w.raw)}</td>
                <td><span ${edit} data-field="morph">${escapeHtml(w.morph)}</span></td>
                <td><span ${edit} data-field="gloss">${escapeHtml(w.gloss)}</span></td>
            </tr>`).join('');
        body = `
            <div style="font-weight: 600; color: var(--text-color);">${escapeHtml(p.truku_sentence || '')}</div>
            <div style="color: var(--text-muted); font-size: 0.9rem; margin-top: 0.2rem;">${escapeHtml(p.chinese_translation || '')}</div>
            <table class="review-words">
                <thead><tr><th>詞</th><th>詞素切分 ／ ${modeLabel}</th><th>標記</th></tr></thead>
                <tbody>${rows}</tbody>
            </table>`;
    } else {
        body = `
            <div style="color: var(--text-muted); font-size: 0.8rem;">族語句子</div>
            <div style="font-weight: 600; color: var(--text-color); margin-bottom: 0.5rem;"><span ${edit} data-field="truku_sentence">${escapeHtml(p.truku_sentence)}</span></div>
            <div style="color: var(--text-muted); font-size: 0.8rem;">中文翻譯</div>
            <div style="color: var(--text-color);"><span ${edit} data-field="chinese_translation">${escapeHtml(p.chinese_translation)}</span></div>`;
    }

    const kindLabel = item.kind === 'correction' ? '✏️ 逐詞校正（寫入黃金記憶庫）' : '📖 建議加入主辭典';
    const note = item.note
        ? `<div style="margin-top: 0.6rem; font-size: 0.88rem; color: var(--text-color);">💬 使用者說明：${escapeHtml(item.note)}</div>` : '';
    const reviewed = !pending
        ? `<div style="margin-top: 0.6rem; font-size: 0.82rem; color: var(--text-muted);">審核時間：${escapeHtml(formatUtcTimestamp(item.reviewed_at))}${item.review_note ? `｜審核備註：${escapeHtml(item.review_note)}` : ''}</div>` : '';
    const actions = pending ? `
        <div class="review-actions">
            <button class="review-approve-btn" onclick="approveSuggestion(this, ${id})">✅ 核准寫入</button>
            <button class="review-reject-btn" onclick="rejectSuggestion(this, ${id})">↩️ 退回</button>
            <span style="font-size: 0.8rem; color: var(--text-muted); align-self: center;">虛線內容可直接點擊修改後再核准</span>
        </div>` : '';

    return `
        <div class="review-card" data-id="${id}">
            <div class="review-card-meta">#${id}｜${kindLabel}｜送出時間：${escapeHtml(formatUtcTimestamp(item.created_at))}</div>
            ${body}${note}${reviewed}${actions}
        </div>`;
}

function renderFeedbackCard(item) {
    const id = Number(item.id) || 0;
    const typeLabel = FEEDBACK_TYPE_LABELS[item.type] || item.type || '其他';
    const sentence = item.sentence_text
        ? `<div style="margin-top: 0.5rem; font-size: 0.9rem; color: var(--text-color);">📌 相關例句（ID ${Number(item.sentence_id) || '-'}）：${escapeHtml(item.sentence_text)}</div>` : '';
    const email = item.email
        ? `<div style="margin-top: 0.3rem; font-size: 0.82rem; color: var(--text-muted);">聯絡信箱：${escapeHtml(item.email)}</div>` : '';
    const action = item.status === 'pending'
        ? `<button class="review-approve-btn" onclick="setFeedbackStatus(this, ${id}, 'handled')">✅ 標記已處理</button>`
        : `<button class="review-reject-btn" onclick="setFeedbackStatus(this, ${id}, 'pending')">↩️ 改回未處理</button>`;
    return `
        <div class="review-card" data-id="${id}">
            <div class="review-card-meta">#${id}｜${escapeHtml(typeLabel)}｜回報時間：${escapeHtml(formatUtcTimestamp(item.timestamp))}</div>
            <div style="white-space: pre-wrap; color: var(--text-color);">${escapeHtml(item.description)}</div>
            ${sentence}${email}
            <div class="review-actions">${action}</div>
        </div>`;
}

window.approveSuggestion = async function(btn, id) {
    const item = reviewItems.find(it => it.id === id);
    const card = btn.closest('.review-card');
    if (!item || !card) return;
    const fieldText = (root, field) => (root.querySelector(`[data-field="${field}"]`)?.innerText || '').trim();

    let payload;
    if (item.kind === 'correction') {
        payload = {
            ...item.payload,
            words: Array.from(card.querySelectorAll('tr[data-raw]')).map(tr => ({
                raw: tr.dataset.raw, morph: fieldText(tr, 'morph'), gloss: fieldText(tr, 'gloss')
            }))
        };
    } else {
        payload = { truku_sentence: fieldText(card, 'truku_sentence'), chinese_translation: fieldText(card, 'chinese_translation') };
    }
    const target = item.kind === 'correction' ? '黃金記憶庫' : '主辭典';
    if (!confirm(`確定核准並寫入${target}嗎？`)) return;

    btn.disabled = true;
    try {
        const res = await adminFetch(`/api/admin/suggestions/${id}/approve`, {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ payload })
        });
        if (!res.ok) throw new Error(await readErrorMessage(res, '核准失敗'));
        const data = await res.json();
        alert(`✅ ${data.message}`);
    } catch (e) {
        alert(`❌ ${e.message}`);
    }
    loadReviewTab();
};

window.rejectSuggestion = async function(btn, id) {
    const note = prompt('退回原因（選填，只有管理員看得到）：');
    if (note === null) return;
    btn.disabled = true;
    try {
        const res = await adminFetch(`/api/admin/suggestions/${id}/reject`, {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ review_note: note })
        });
        if (!res.ok) throw new Error(await readErrorMessage(res, '退回失敗'));
    } catch (e) {
        alert(`❌ ${e.message}`);
    }
    loadReviewTab();
};

window.setFeedbackStatus = async function(btn, id, status) {
    btn.disabled = true;
    try {
        const res = await adminFetch(`/api/admin/feedback/${id}/status`, {
            method: 'POST', headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ status })
        });
        if (!res.ok) throw new Error(await readErrorMessage(res, '更新失敗'));
    } catch (e) {
        alert(`❌ ${e.message}`);
    }
    loadReviewTab();
};