/**
 * 神东煤炭综采工作面数据管理与AI分析系统
 * 前端 JavaScript 逻辑
 */

// ==================== 全局变量 ====================
let units = [];
let aiModels = [];
let realtimeData = [];

// ==================== 初始化 ====================
document.addEventListener('DOMContentLoaded', function() {
    initNavigation();
    updateTime();
    setInterval(updateTime, 1000);
    loadUnits();
    loadAIModels();
    loadAllStats();
    initForms();
    initTimeRange();
});

// ==================== 导航 ====================
function initNavigation() {
    const links = document.querySelectorAll('.navbar-menu a');
    links.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const page = this.getAttribute('data-page');
            switchPage(page);
        });
    });
}

function switchPage(pageName) {
    // 更新菜单激活状态
    document.querySelectorAll('.navbar-menu a').forEach(a => a.classList.remove('active'));
    const activeLink = document.querySelector(`.navbar-menu a[data-page="${pageName}"]`);
    if (activeLink) activeLink.classList.add('active');
    
    // 切换页面
    document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
    const page = document.getElementById(pageName);
    if (page) page.classList.add('active');
}

// ==================== 时间更新 ====================
function updateTime() {
    const now = new Date();
    const timeStr = now.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
    });
    const el = document.getElementById('current-time');
    if (el) el.textContent = timeStr;
}

// ==================== API 请求 ====================
async function apiRequest(endpoint, options = {}) {
    try {
        // AI分析请求设置更长的超时时间（10分钟）
        const isAiRequest = endpoint.startsWith('/ai/');
        const timeoutMs = isAiRequest ? (options.timeout || 600000) : (options.timeout || 30000);
        
        // 创建带超时的AbortController
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
        
        const response = await fetch(`/api${endpoint}`, {
            method: options.method || 'GET',
            headers: {
                'Content-Type': 'application/json',
                ...options.headers
            },
            body: options.body ? JSON.stringify(options.body) : undefined,
            signal: controller.signal
        });
        
        clearTimeout(timeoutId);
        
        const data = await response.json();
        
        if (!response.ok || !data.success) {
            // 优先使用 error 字段，其次使用 data.content（AI分析错误），最后使用默认提示
            let errorMsg = data.error || '请求失败';
            if (data.data && data.data.status === 'error' && data.data.content) {
                errorMsg = data.data.content;
            }
            throw new Error(errorMsg);
        }
        
        return data;
    } catch (error) {
        console.error('API请求错误:', error);
        if (error.name === 'AbortError') {
            throw new Error(`请求超时（等待时间过长），请检查网络连接或稍后重试`);
        }
        throw error;
    }
}

// ==================== Toast 提示 ====================
function showToast(message, type = 'success') {
    const toast = document.createElement('div');
    toast.className = `toast toast-${type}`;
    toast.textContent = message;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.remove();
    }, 3000);
}

// ==================== 加载总体统计 ====================
async function loadAllStats() {
    try {
        const data = await apiRequest('/stats/all');
        const stats = data.data || {};
        
        // 更新顶部统计卡片
        const unitCountEl = document.getElementById('unit-count');
        const tagCountEl = document.getElementById('tag-count');
        const totalCollectsEl = document.getElementById('total-collects');
        const todayCollectsEl = document.getElementById('today-collects');
        const dataTotalEl = document.getElementById('data-total');
        
        if (unitCountEl) unitCountEl.textContent = stats.unit_count || 0;
        if (tagCountEl) tagCountEl.textContent = stats.tag_count || 0;
        if (totalCollectsEl) totalCollectsEl.textContent = stats.total_collects || 0;
        if (todayCollectsEl) todayCollectsEl.textContent = stats.today_collects || 0;
        if (dataTotalEl) dataTotalEl.textContent = formatNumber(stats.data_total || 0);
        
        // 渲染工作面统计表格
        renderUnitStatsTable(stats.unit_stats || []);
        
    } catch (error) {
        console.error('加载总体统计失败:', error);
    }
}

function formatNumber(num) {
    if (num >= 1000000) {
        return (num / 1000000).toFixed(1) + 'M';
    } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'K';
    }
    return num.toString();
}

function renderUnitStatsTable(unitStats) {
    const container = document.getElementById('unit-stats-table');
    if (!container) return;
    
    if (!unitStats || unitStats.length === 0) {
        container.innerHTML = '<p class="text-muted">暂无工作面数据</p>';
        return;
    }
    
    let html = `
        <table class="data-table">
            <thead>
                <tr>
                    <th>工作面名称</th>
                    <th>工作面代码</th>
                    <th>采集次数</th>
                    <th>监测点数</th>
                    <th>最近采集时间</th>
                </tr>
            </thead>
            <tbody>
    `;
    
    unitStats.forEach(unit => {
        html += `
            <tr onclick="switchToMonitor('${unit.unit_code}')" style="cursor:pointer;">
                <td>${unit.unit_name || '-'}</td>
                <td><code>${unit.unit_code}</code></td>
                <td>${unit.collect_count || 0}</td>
                <td>${unit.tag_count || 0}</td>
                <td>${unit.last_time || '暂无'}</td>
            </tr>
        `;
    });
    
    html += '</tbody></table>';
    container.innerHTML = html;
}

// ==================== 加载工作面列表 ====================
async function loadUnits() {
    try {
        const data = await apiRequest('/units');
        units = data.data || [];
        
        // 更新下拉框
        updateUnitSelects();
        
        // 更新列表
        renderUnitList();
        
        // 加载采集状态
        loadCollectStatus();
        
        // 加载总体统计
        loadAllStats();
        
    } catch (error) {
        showToast('加载工作面列表失败: ' + error.message, 'error');
    }
}

function updateUnitSelects() {
    const selects = ['collect-unit', 'monitor-unit', 'fault-unit', 'trend-unit', 'report-unit'];
    selects.forEach(id => {
        const select = document.getElementById(id);
        if (select) {
            const current = select.value;
            select.innerHTML = '<option value="">请选择工作面</option>';
            units.forEach(unit => {
                const option = document.createElement('option');
                option.value = unit.unit_code;
                option.textContent = `${unit.unit_name} (${unit.unit_code})`;
                select.appendChild(option);
            });
            if (current) select.value = current;
        }
    });
}

function renderUnitList() {
    const container = document.getElementById('unit-list');
    if (!container) return;
    
    if (units.length === 0) {
        container.innerHTML = '<p class="text-muted">暂无工作面数据</p>';
        return;
    }
    
    container.innerHTML = units.map(unit => `
        <div class="unit-item" onclick="switchToMonitor('${unit.unit_code}')">
            <div>
                <div class="unit-name">${unit.unit_name}</div>
                <span class="unit-code">${unit.unit_code}</span>
            </div>
            <div class="unit-status">
                <span class="status-dot ${unit.has_data ? '' : 'empty'}"></span>
                <span>${unit.has_data ? '有数据' : '暂无数据'}</span>
            </div>
        </div>
    `).join('');
}

function switchToMonitor(unitCode) {
    const monitorSelect = document.getElementById('monitor-unit');
    if (monitorSelect) {
        monitorSelect.value = unitCode;
        switchPage('monitor');
        loadRealtimeData();
    }
}

// ==================== 加载采集状态 ====================
async function loadCollectStatus() {
    const container = document.getElementById('collect-status');
    if (!container) return;
    
    try {
        const promises = units.map(async (unit) => {
            try {
                const data = await apiRequest(`/stats/${unit.unit_code}`);
                return {
                    ...unit,
                    stats: data.data
                };
            } catch {
                return { ...unit, stats: null };
            }
        });
        
        const results = await Promise.all(promises);
        
        if (results.length === 0) {
            container.innerHTML = '<p>暂无采集记录</p>';
            return;
        }
        
        container.innerHTML = results.map(item => `
            <div class="collect-status-item">
                <span>${item.unit_name}</span>
                <span>
                    ${item.stats ? `
                        采集${item.stats.today_count}次 · ${item.stats.last_time || '未知'}
                    ` : '暂无数据'}
                </span>
            </div>
        `).join('');
        
    } catch (error) {
        console.error('加载采集状态失败:', error);
    }
}

// ==================== 加载AI模型列表 ====================
async function loadAIModels() {
    try {
        const data = await apiRequest('/ai/models');
        aiModels = data.data || [];
        
        const selects = ['fault-model', 'trend-model'];
        selects.forEach(id => {
            const select = document.getElementById(id);
            if (select) {
                select.innerHTML = '<option value="">默认模型</option>';
                aiModels.forEach(model => {
                    const option = document.createElement('option');
                    option.value = model.key;
                    option.textContent = `${model.name}${model.available ? '' : ' (未配置)'}`;
                    if (!model.available) option.disabled = true;
                    select.appendChild(option);
                });
            }
        });
    } catch (error) {
        console.error('加载AI模型列表失败:', error);
    }
}

// ==================== 表单初始化 ====================
function initForms() {
    // 数据采集表单
    const collectForm = document.getElementById('collect-form');
    if (collectForm) {
        collectForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            await startCollect();
        });
    }
    
    // 故障诊断表单
    const faultForm = document.getElementById('fault-form');
    if (faultForm) {
        faultForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            await startFaultAnalysis();
        });
    }
    
    // 趋势分析表单
    const trendForm = document.getElementById('trend-form');
    if (trendForm) {
        trendForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            await startTrendAnalysis();
        });
    }
    
    // 报告生成表单
    const reportForm = document.getElementById('report-form');
    if (reportForm) {
        reportForm.addEventListener('submit', async function(e) {
            e.preventDefault();
            await generateReport();
        });
    }
}

// ==================== 时间范围初始化 ====================
function initTimeRange() {
    const now = new Date();
    const oneHourAgo = new Date(now.getTime() - 1 * 60 * 60 * 1000);
    
    const formatDateTime = (date) => {
        const y = date.getFullYear();
        const m = String(date.getMonth() + 1).padStart(2, '0');
        const d = String(date.getDate()).padStart(2, '0');
        const h = String(date.getHours()).padStart(2, '0');
        const min = String(date.getMinutes()).padStart(2, '0');
        return `${y}-${m}-${d}T${h}:${min}`;
    };
    
    const startEl = document.getElementById('trend-start');
    const endEl = document.getElementById('trend-end');
    
    if (startEl) startEl.value = formatDateTime(oneHourAgo);
    if (endEl) endEl.value = formatDateTime(now);
}

// ==================== 数据采集 ====================
async function startCollect() {
    const unitCode = document.getElementById('collect-unit').value;
    const deviceType = document.getElementById('collect-device').value;
    
    if (!unitCode) {
        showToast('请选择工作面', 'warning');
        return;
    }
    
    const btn = document.getElementById('collect-btn');
    const btnText = btn.querySelector('.btn-text');
    const btnLoading = btn.querySelector('.btn-loading');
    
    btn.disabled = true;
    btnText.style.display = 'none';
    btnLoading.style.display = 'inline';
    
    addLog('开始采集数据...', 'info');
    
    try {
        const body = { unit_code: unitCode };
        if (deviceType) body.device_type = deviceType;
        
        const data = await apiRequest('/collect', {
            method: 'POST',
            body: body
        });
        
        const result = data.data;
        addLog(`采集完成: ${result.message || '成功'}`, 'success');
        
        if (result.total_collected) {
            addLog(`共采集 ${result.total_collected} 条数据`, 'success');
        }
        
        showToast('数据采集成功');
        
        // 刷新状态
        loadCollectStatus();
        updateUnitDataStatus();
        
    } catch (error) {
        addLog(`采集失败: ${error.message}`, 'error');
        showToast('数据采集失败: ' + error.message, 'error');
    } finally {
        btn.disabled = false;
        btnText.style.display = 'inline';
        btnLoading.style.display = 'none';
    }
}

async function collectAll() {
    const btn = document.getElementById('collect-all-btn');
    btn.disabled = true;
    btn.textContent = '采集中...';
    
    addLog('开始全量采集...', 'info');
    
    try {
        const data = await apiRequest('/collect/all', {
            method: 'POST'
        });
        
        addLog('全量采集完成', 'success');
        showToast('全量采集完成');
        
        loadCollectStatus();
        updateUnitDataStatus();
        
    } catch (error) {
        addLog(`全量采集失败: ${error.message}`, 'error');
        showToast('全量采集失败', 'error');
    } finally {
        btn.disabled = false;
        btn.textContent = '全量采集';
    }
}

function updateUnitDataStatus() {
    // 重新加载units以更新状态
    loadUnits();
}

// ==================== 日志 ====================
function addLog(message, type = 'info') {
    const container = document.getElementById('collect-log');
    if (!container) return;
    
    const time = new Date().toLocaleTimeString('zh-CN');
    const logEl = document.createElement('p');
    logEl.className = `log-${type}`;
    logEl.textContent = `[${time}] ${message}`;
    
    container.appendChild(logEl);
    container.scrollTop = container.scrollHeight;
}

// ==================== 实时数据 ====================
async function loadRealtimeData() {
    const unitCode = document.getElementById('monitor-unit').value;
    
    if (!unitCode) {
        document.getElementById('realtime-data').innerHTML = '<p>请选择工作面查看实时数据</p>';
        return;
    }
    
    try {
        const data = await apiRequest(`/realtime/${unitCode}`);
        realtimeData = data.data || [];
        
        // 更新时间
        const timeEl = document.getElementById('monitor-time');
        if (timeEl && data.snapshot_time) {
            timeEl.textContent = `数据时间: ${data.snapshot_time}`;
        }
        
        // 更新统计
        updateStats(realtimeData);
        
        // 渲染表格
        renderRealtimeTable(realtimeData);
        
    } catch (error) {
        showToast('加载实时数据失败: ' + error.message, 'error');
    }
}

function updateStats(data) {
    // 更新首页的监测点总数（仅当在首页时才有意义）
    const tagCountEl = document.getElementById('tag-count');
    if (tagCountEl) {
        tagCountEl.textContent = data.length;
    }
}

function renderRealtimeTable(data) {
    const container = document.getElementById('realtime-data');
    
    if (!data || data.length === 0) {
        container.innerHTML = '<p>暂无数据</p>';
        return;
    }
    
    // 按设备分类
    const categories = categorizeData(data);
    
    let html = '';
    for (const [cat, items] of Object.entries(categories)) {
        html += `
            <h3 style="margin: 16px 0 8px; color: var(--gray-700);">${cat}</h3>
            <table class="data-table">
                <thead>
                    <tr>
                        <th>参数名称</th>
                        <th>数值</th>
                        <th>单位</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
        `;
        
        items.forEach(item => {
            const tag = item.tag_short_name || item.tag_name || '';
            // 优先使用后端返回的中文名称，否则显示英文标签
            const displayName = item.chinese_name && item.chinese_name !== tag 
                ? `${item.chinese_name} <small style="color: #999;">(${tag})</small>` 
                : tag;
            const value = item.tag_value != null ? item.tag_value : 
                          (item.tag_value_bool != null ? (item.tag_value_bool ? 'ON' : 'OFF') : 'N/A');
            const unit = item.tag_unit || '';
            const quality = item.quality || 0;
            
            const valueClass = quality === 0 ? 'value-normal' : 'value-warning';
            const statusBadge = quality === 0 ? 
                '<span class="badge badge-success">正常</span>' : 
                '<span class="badge badge-warning">异常</span>';
            
            html += `
                <tr>
                    <td>${displayName}</td>
                    <td class="${valueClass}">${value}</td>
                    <td>${unit}</td>
                    <td>${statusBadge}</td>
                </tr>
            `;
        });
        
        html += '</tbody></table>';
    }
    
    container.innerHTML = html;
}

function categorizeData(data) {
    const categories = {};
    
    data.forEach(item => {
        const tag = item.tag_short_name || item.tag_name || '';
        
        let cat = '其他';
        if (tag.includes('Shearer') || tag.includes('shearer')) {
            cat = '采煤机';
        } else if (tag.includes('AFC') || tag.includes('LOA') || tag.includes('CRU')) {
            cat = '三机';
        } else if (tag.includes('Emulsion') || tag.includes('Spray')) {
            cat = '泵站';
        } else if (tag.includes('Loop')) {
            cat = '开关';
        }
        
        if (!categories[cat]) categories[cat] = [];
        categories[cat].push(item);
    });
    
    return categories;
}

function filterRealtimeData() {
    const filter = document.getElementById('monitor-filter').value;
    const search = document.getElementById('monitor-search').value.toLowerCase();
    
    let filtered = realtimeData;
    
    if (filter) {
        filtered = filtered.filter(item => {
            const tag = item.tag_short_name || item.tag_name || '';
            const chinese = (item.chinese_name || '').toLowerCase();
            return tag.includes(filter) || chinese.includes(filter);
        });
    }
    
    if (search) {
        filtered = filtered.filter(item => {
            const tag = (item.tag_short_name || item.tag_name || '').toLowerCase();
            const chinese = (item.chinese_name || '').toLowerCase();
            return tag.includes(search) || chinese.includes(search);
        });
    }
    
    renderRealtimeTable(filtered);
}

// ==================== AI分析 ====================
async function startFaultAnalysis() {
    const unitCode = document.getElementById('fault-unit').value;
    const modelKey = document.getElementById('fault-model').value;
    
    if (!unitCode) {
        showToast('请选择工作面', 'warning');
        return;
    }
    
    const btn = document.getElementById('fault-btn');
    btn.disabled = true;
    btn.textContent = '分析中...';
    
    const resultEl = document.getElementById('analysis-result');
    resultEl.innerHTML = '<p><span class="loading"></span> AI正在分析中，请稍候...</p>';
    
    try {
        const body = { unit_code: unitCode };
        if (modelKey) body.model_key = modelKey;
        
        const data = await apiRequest('/ai/fault', {
            method: 'POST',
            body: body
        });
        
        displayAnalysisResult(data.data);
        showToast('故障诊断完成');
        
    } catch (error) {
        resultEl.innerHTML = `<p class="text-muted">分析失败: ${error.message}</p>`;
        showToast('故障诊断失败', 'error');
    } finally {
        btn.disabled = false;
        btn.textContent = '开始诊断';
    }
}

async function startTrendAnalysis() {
    const unitCode = document.getElementById('trend-unit').value;
    const startTime = document.getElementById('trend-start').value;
    const endTime = document.getElementById('trend-end').value;
    const modelKey = document.getElementById('trend-model').value;
    
    if (!unitCode || !startTime || !endTime) {
        showToast('请填写完整信息', 'warning');
        return;
    }
    
    const btn = document.getElementById('trend-btn');
    btn.disabled = true;
    btn.textContent = '分析中...';
    
    const resultEl = document.getElementById('analysis-result');
    resultEl.innerHTML = '<p><span class="loading"></span> AI正在分析趋势，请稍候...</p>';
    
    try {
        const body = {
            unit_code: unitCode,
            start_time: startTime,
            end_time: endTime
        };
        if (modelKey) body.model_key = modelKey;
        
        const data = await apiRequest('/ai/trend', {
            method: 'POST',
            body: body
        });
        
        displayAnalysisResult(data.data);
        showToast('趋势分析完成');
        
    } catch (error) {
        resultEl.innerHTML = `<p class="text-muted">分析失败: ${error.message}</p>`;
        showToast('趋势分析失败', 'error');
    } finally {
        btn.disabled = false;
        btn.textContent = '开始分析';
    }
}

function displayAnalysisResult(data) {
    const resultEl = document.getElementById('analysis-result');
    const summaryCard = document.getElementById('data-summary-card');
    const summaryContent = document.getElementById('data-summary-content');
    const summaryDataCount = document.getElementById('summary-data-count');
    
    // 显示数据摘要
    if (data.data_summary) {
        if (summaryCard) summaryCard.style.display = 'block';
        if (summaryDataCount) {
            const count = data.data_count || 0;
            summaryDataCount.textContent = `共 ${count} 个监测点`;
        }
        if (summaryContent) {
            summaryContent.innerHTML = formatMarkdown(data.data_summary);
        }
    } else {
        if (summaryCard) summaryCard.style.display = 'none';
    }
    
    if (data.status === 'success') {
        resultEl.innerHTML = `
            <div class="result-meta" style="margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--gray-300);">
                <span class="badge badge-success">分析成功</span>
                ${data.model_name ? `<span class="badge badge-info" style="margin-left: 8px;">${data.model_name}</span>` : ''}
            </div>
            <div class="result-content">${formatMarkdown(data.content)}</div>
        `;
    } else {
        resultEl.innerHTML = `
            <div class="result-meta">
                <span class="badge badge-danger">分析失败</span>
            </div>
            <p style="margin-top: 12px;">${data.content || '未知错误'}</p>
        `;
        if (summaryCard) summaryCard.style.display = 'none';
    }
}

function formatMarkdown(text) {
    // 简单Markdown格式化
    let html = text
        // 标题
        .replace(/^#### (.+)$/gm, '<h4>$1</h4>')
        .replace(/^### (.+)$/gm, '<h3>$1</h3>')
        .replace(/^## (.+)$/gm, '<h2>$1</h2>')
        .replace(/^# (.+)$/gm, '<h1>$1</h1>')
        // 加粗
        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
        // 斜体
        .replace(/\*(.+?)\*/g, '<em>$1</em>')
        // 无序列表
        .replace(/^- (.+)$/gm, '<li>$1</li>')
        // 分割线
        .replace(/^---$/gm, '<hr>')
        // 换行
        .replace(/\n/g, '<br>');
    
    // 包裹连续的li
    html = html.replace(/(<li>.*?<\/li>(?:<br>)?)+/g, function(match) {
        return '<ul>' + match.replace(/<br>/g, '') + '</ul>';
    });
    
    return html;
}

function copyResult() {
    const resultEl = document.getElementById('analysis-result');
    const text = resultEl.innerText;
    
    navigator.clipboard.writeText(text).then(() => {
        showToast('已复制到剪贴板');
    }).catch(() => {
        showToast('复制失败', 'error');
    });
}

// ==================== 报告生成 ====================
async function generateReport() {
    const unitCode = document.getElementById('report-unit').value;
    const reportType = document.getElementById('report-type').value;
    
    if (!unitCode) {
        showToast('请选择工作面', 'warning');
        return;
    }
    
    const btn = document.getElementById('report-btn');
    btn.disabled = true;
    btn.textContent = '生成中...';
    
    const previewEl = document.getElementById('report-preview');
    previewEl.innerHTML = '<p><span class="loading"></span> 正在生成报告...</p>';
    
    try {
        const data = await apiRequest('/report/word', {
            method: 'POST',
            body: {
                unit_code: unitCode,
                type: reportType
            }
        });
        
        const fileInfo = data.data;
        
        previewEl.innerHTML = `
            <div style="text-align: center; padding: 40px;">
                <div style="font-size: 48px; margin-bottom: 16px;">📄</div>
                <h3>报告生成成功</h3>
                <p style="color: var(--gray-700); margin: 12px 0;">文件名: ${fileInfo.filename}</p>
                <a href="/api/report/download/${fileInfo.filename}" class="btn btn-primary" download>
                    下载报告
                </a>
            </div>
        `;
        
        showToast('报告生成成功');
        
    } catch (error) {
        previewEl.innerHTML = `<p class="text-muted">报告生成失败: ${error.message}</p>`;
        showToast('报告生成失败', 'error');
    } finally {
        btn.disabled = false;
        btn.textContent = '生成报告';
    }
}