static/script.js

// --- 保留原本的 runAnalysis 函式 ---
async function runAnalysis(category) {
    const card = document.getElementById('result-card');
    const title = document.getElementById('res-title');
    const status = document.getElementById('res-status');
    const prediction = document.getElementById('res-prediction');

    card.classList.remove('hidden');
    title.innerText = "資料處理中...";
    status.innerText = "正在執行 Pandas 資料清理與 Scikit-learn 模型運算";
    prediction.innerText = "請稍候...";

    try {
        const response = await fetch(`/api/analyze/${category}`);
        const data = await response.json();
        setTimeout(() => {
            title.innerText = data.category;
            status.innerText = data.status;
            prediction.innerText = data.prediction;
        }, 600);
    } catch (error) {
        title.innerText = "發生錯誤";
        status.innerText = "無法連接分析引擎";
        prediction.innerText = "";
    }
}

// --- 新增：KMB 路線獲取與渲染邏輯 ---
let cachedRoutes = []; // 儲存全量路線

async function fetchBusRoutes() {
    const tbody = document.getElementById('route-tbody');
    const timeSpan = document.getElementById('refresh-time');
    
    tbody.innerHTML = `<tr><td colspan="4" style="text-align: center; color: var(--text-muted);">正在從政府數據一線通獲取最新路線...</td></tr>`;
    timeSpan.innerText = "更新中...";

    try {
        const response = await fetch('/api/kmb/routes');
        const result = await response.json();
        
        if (result.data && Array.isArray(result.data)) {
            cachedRoutes = result.data;
            
            // 更新更新時間
            const now = new Date();
            timeSpan.innerText = now.toTimeString().split(' ')[0];
            
            // 渲染表格
            renderRouteTable();
        } else {
            tbody.innerHTML = `<tr><td colspan="4" style="text-align: center; color: red;">數據格式錯誤或無資料</td></tr>`;
            timeSpan.innerText = "失敗";
        }
    } catch (error) {
        tbody.innerHTML = `<tr><td colspan="4" style="text-align: center; color: red;">無法取得 API 資料</td></tr>`;
        timeSpan.innerText = "錯誤";
    }
}

function renderRouteTable() {
    const tbody = document.getElementById('route-tbody');
    const lang = document.getElementById('lang-select').value; // 'tc', 'en', 'sc'
    
    if (cachedRoutes.length === 0) return;

    let html = '';
    cachedRoutes.forEach(item => {
        // 依語系抓取欄位
        const orig = item[`orig_${lang}`] || item['orig_tc'];
        const dest = item[`dest_${lang}`] || item['dest_tc'];
        
        // 方向語意化轉換
        let boundText = item.bound;
        if (lang === 'en') {
            boundText = item.bound === 'O' ? 'Outbound' : 'Inbound';
        } else if (lang === 'sc') {
            boundText = item.bound === 'O' ? '去程' : '回程';
        } else {
            boundText = item.bound === 'O' ? '去程' : '回程';
        }

        html += `
            <tr>
                <td><strong>${item.route}</strong></td>
                <td>${orig}</td>
                <td>${dest}</td>
                <td>${boundText}</td>
            </tr>
        `;
    });

    tbody.innerHTML = html;
}