@{
    ViewData["Title"] = "统计数据";
}

<style>
    /* 页面整体布局 */
    .config-container {
        max-height: calc(100vh - 280px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    /* 内容区域 */
    .stats-content {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0.75rem;
    }
    
    /* 自定义滚动条 */
    .stats-content::-webkit-scrollbar {
        width: 6px;
    }
    
    .stats-content::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 3px;
    }
    
    .stats-content::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 3px;
    }
    
    .stats-content::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
    
    /* 图表容器样式 */
    .chart-container {
        position: relative;
        height: 300px;
        margin-bottom: 1rem;
    }
    
    /* 响应式调整 */
    @@media (max-width: 768px) {
        .config-container {
            max-height: calc(100vh - 240px);
        }
        
        .stats-content {
            padding: 0.6rem;
        }
        
        .chart-container {
            height: 250px;
        }
    }
    
    @@media (max-width: 576px) {
        .config-container {
            max-height: calc(100vh - 220px);
        }
        
        .stats-content {
            padding: 0.5rem;
        }
        
        .chart-container {
            height: 200px;
        }
    }
</style>

<div class="container">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">LTE统计数据监控</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="refreshStats()">
                            <i class="fas fa-sync-alt"></i> 刷新
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearStats()">
                            <i class="fas fa-trash"></i> 清空
                        </button>
                        <button type="button" class="btn btn-sm btn-outline-info" onclick="toggleSSE()">
                            <i class="fas fa-broadcast-tower"></i> <span id="sseToggleText">启动SSE</span>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="config-container">
                        <div class="stats-content">
                            <!-- 统计摘要 -->
                            <div class="row mb-3">
                                <div class="col-md-3">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-info"><i class="fas fa-server"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">客户端数量</span>
                                            <span class="info-box-number" id="clientCount">0</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-success"><i class="fas fa-database"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">队列大小</span>
                                            <span class="info-box-number" id="queueCount">0</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-warning"><i class="fas fa-clock"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">最后更新</span>
                                            <span class="info-box-number" id="lastUpdate">-</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-3">
                                    <div class="info-box">
                                        <span class="info-box-icon bg-primary"><i class="fas fa-signal"></i></span>
                                        <div class="info-box-content">
                                            <span class="info-box-text">SSE状态</span>
                                            <span class="info-box-number" id="sseStatus">未连接</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 客户端选择 -->
                            <div class="row mb-3">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="clientSelect">选择客户端:</label>
                                        <select class="form-control" id="clientSelect" onchange="loadClientStats()">
                                            <option value="">所有客户端</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="refreshInterval">刷新间隔 (秒):</label>
                                        <input type="number" class="form-control" id="refreshInterval" value="5" min="1" max="60" onchange="updateRefreshInterval()">
                                    </div>
                                </div>
                            </div>

                            <!-- 图表区域 -->
                            <div class="row mb-4">
                                <!-- CPU使用率图表 -->
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">CPU使用率</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="chart-container">
                                                <canvas id="cpuChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- RF采样率图表 -->
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">RF采样率</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="chart-container">
                                                <canvas id="rfChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- RF CPU时间图表 -->
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">RF CPU时间</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="chart-container">
                                                <canvas id="rfCpuChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- RXTX延迟图表 -->
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">RXTX延迟统计</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="chart-container">
                                                <canvas id="rxtxDelayChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 小区性能图表 -->
                            <div class="row mb-4">
                                <div class="col-md-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">小区性能指标</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="chart-container">
                                                <canvas id="cellPerformanceChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 样本数据图表 -->
                            <div class="row mb-4">
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">TX样本数据</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="chart-container">
                                                <canvas id="txSamplesChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="col-md-6">
                                    <div class="card">
                                        <div class="card-header">
                                            <h5 class="card-title">RX样本数据</h5>
                                        </div>
                                        <div class="card-body">
                                            <div class="chart-container">
                                                <canvas id="rxSamplesChart"></canvas>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 统计数据表格 -->
                            <div class="table-responsive">
                                <table class="table table-bordered table-striped" id="statsTable">
                                    <thead>
                                        <tr>
                                            <th>客户端</th>
                                            <th>实例ID</th>
                                            <th>CPU使用率</th>
                                            <th>小区数量</th>
                                            <th>RF端口</th>
                                            <th>消息ID</th>
                                            <th>持续时间</th>
                                            <th>接收时间</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody id="statsTableBody">
                                        <!-- 数据将通过JavaScript动态填充 -->
                                    </tbody>
                                </table>
                            </div>

                            <!-- 小区详细信息 -->
                            <div class="row mt-4" id="cellDetails" style="display: none;">
                                <div class="col-12">
                                    <div class="card">
                                        <div class="card-header">
                                            <h4 class="card-title">小区详细信息 - <span id="selectedClientName"></span></h4>
                                        </div>
                                        <div class="card-body">
                                            <div class="table-responsive">
                                                <table class="table table-bordered table-striped" id="cellTable">
                                                    <thead>
                                                        <tr>
                                                            <th>小区ID</th>
                                                            <th>下行比特率</th>
                                                            <th>上行比特率</th>
                                                            <th>下行使用率(平均)</th>
                                                            <th>上行使用率(平均)</th>
                                                            <th>UE数量(平均)</th>
                                                            <th>ERAB数量(平均)</th>
                                                            <th>调度用户(下行)</th>
                                                            <th>调度用户(上行)</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody id="cellTableBody">
                                                        <!-- 小区数据将通过JavaScript动态填充 -->
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@section Scripts {
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    
    <script>
        let sseConnection = null;
        let refreshTimer = null;
        let currentStats = {};
        
        // 图表实例
        let cpuChart = null;
        let rfChart = null;
        let rfCpuChart = null;
        let rxtxDelayChart = null;
        let cellPerformanceChart = null;
        let txSamplesChart = null;
        let rxSamplesChart = null;

        // 页面加载完成后初始化
        $(document).ready(function() {
            initializeCharts();
            loadSummary();
            loadAllStats();
            startRefreshTimer();
        });

        // 初始化图表
        function initializeCharts() {
            // CPU使用率图表
            const cpuCtx = document.getElementById('cpuChart').getContext('2d');
            cpuChart = new Chart(cpuCtx, {
                type: 'doughnut',
                data: {
                    labels: ['CPU使用率', '空闲'],
                    datasets: [{
                        data: [0, 100],
                        backgroundColor: ['#ff6384', '#36a2eb'],
                        borderWidth: 0
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            });

            // RF采样率图表
            const rfCtx = document.getElementById('rfChart').getContext('2d');
            rfChart = new Chart(rfCtx, {
                type: 'bar',
                data: {
                    labels: ['RX采样率', 'TX采样率'],
                    datasets: [{
                        label: '采样率 (MHz)',
                        data: [0, 0],
                        backgroundColor: ['#4bc0c0', '#ff9f40'],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // RF CPU时间图表
            const rfCpuCtx = document.getElementById('rfCpuChart').getContext('2d');
            rfCpuChart = new Chart(rfCpuCtx, {
                type: 'bar',
                data: {
                    labels: ['RX CPU时间', 'TX CPU时间'],
                    datasets: [{
                        label: 'CPU时间 (%)',
                        data: [0, 0],
                        backgroundColor: ['#ff6384', '#36a2eb'],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // RXTX延迟图表
            const rxtxDelayCtx = document.getElementById('rxtxDelayChart').getContext('2d');
            rxtxDelayChart = new Chart(rxtxDelayCtx, {
                type: 'line',
                data: {
                    labels: ['最小值', '平均值', '最大值'],
                    datasets: [{
                        label: '延迟 (ms)',
                        data: [0, 0, 0],
                        borderColor: '#4bc0c0',
                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
                        tension: 0.1,
                        fill: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });

            // 小区性能图表
            const cellCtx = document.getElementById('cellPerformanceChart').getContext('2d');
            cellPerformanceChart = new Chart(cellCtx, {
                type: 'line',
                data: {
                    labels: [],
                    datasets: [{
                        label: '下行使用率 (%)',
                        data: [],
                        borderColor: '#ff6384',
                        backgroundColor: 'rgba(255, 99, 132, 0.1)',
                        tension: 0.1
                    }, {
                        label: '上行使用率 (%)',
                        data: [],
                        borderColor: '#36a2eb',
                        backgroundColor: 'rgba(54, 162, 235, 0.1)',
                        tension: 0.1
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            max: 100
                        }
                    }
                }
            });

            // TX样本图表
            const txCtx = document.getElementById('txSamplesChart').getContext('2d');
            txSamplesChart = new Chart(txCtx, {
                type: 'scatter',
                data: {
                    datasets: [{
                        label: 'TX样本',
                        data: [],
                        backgroundColor: '#ff6384',
                        pointRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'RMS (dB)'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Max (dB)'
                            }
                        }
                    }
                }
            });

            // RX样本图表
            const rxCtx = document.getElementById('rxSamplesChart').getContext('2d');
            rxSamplesChart = new Chart(rxCtx, {
                type: 'scatter',
                data: {
                    datasets: [{
                        label: 'RX样本',
                        data: [],
                        backgroundColor: '#36a2eb',
                        pointRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            title: {
                                display: true,
                                text: 'RMS (dB)'
                            }
                        },
                        y: {
                            title: {
                                display: true,
                                text: 'Max (dB)'
                            }
                        }
                    }
                }
            });
        }

        // 更新图表数据
        function updateCharts() {
            const clients = Object.keys(currentStats);
            if (clients.length === 0) return;

            // 获取第一个客户端的数据作为示例
            const firstClient = currentStats[clients[0]];
            
            // 更新CPU图表
            if (firstClient.cpu) {
                const cpuUsage = firstClient.cpu.global || 0;
                cpuChart.data.datasets[0].data = [cpuUsage, 100 - cpuUsage];
                cpuChart.update();
            }

            // 更新RF图表
            if (firstClient.rf) {
                // 更新RF采样率图表
                rfChart.data.datasets[0].data = [
                    firstClient.rf.rxSampleRate || 0,
                    firstClient.rf.txSampleRate || 0
                ];
                rfChart.update();

                // 更新RF CPU时间图表
                rfCpuChart.data.datasets[0].data = [
                    firstClient.rf.rxCpuTime || 0,
                    firstClient.rf.txCpuTime || 0
                ];
                rfCpuChart.update();

                // 更新RXTX延迟图表
                rxtxDelayChart.data.datasets[0].data = [
                    firstClient.rf.rxtxDelayMin || 0,
                    firstClient.rf.rxtxDelayAvg || 0,
                    firstClient.rf.rxtxDelayMax || 0
                ];
                rxtxDelayChart.update();
            }

            // 更新小区性能图表
            if (firstClient.cells) {
                const cellIds = Object.keys(firstClient.cells);
                const dlUsage = [];
                const ulUsage = [];

                cellIds.forEach(cellId => {
                    const cell = firstClient.cells[cellId];
                    dlUsage.push(cell.dlUseAvg || 0);
                    ulUsage.push(cell.ulUseAvg || 0);
                });

                cellPerformanceChart.data.labels = cellIds;
                cellPerformanceChart.data.datasets[0].data = dlUsage;
                cellPerformanceChart.data.datasets[1].data = ulUsage;
                cellPerformanceChart.update();
            }

            // 更新样本图表
            if (firstClient.samples) {
                // TX样本
                const txData = [];
                if (firstClient.samples.txSamples) {
                    firstClient.samples.txSamples.forEach(sample => {
                        txData.push({
                            x: sample.rms,
                            y: sample.max
                        });
                    });
                }
                txSamplesChart.data.datasets[0].data = txData;
                txSamplesChart.update();

                // RX样本
                const rxData = [];
                if (firstClient.samples.rxSamples) {
                    firstClient.samples.rxSamples.forEach(sample => {
                        rxData.push({
                            x: sample.rms,
                            y: sample.max
                        });
                    });
                }
                rxSamplesChart.data.datasets[0].data = rxData;
                rxSamplesChart.update();
            }
        }

        // 加载统计摘要
        function loadSummary() {
            $.get('/Statistics/GetSummary', function(response) {
                if (response.success) {
                    $('#clientCount').text(response.data.clientCount || 0);
                    $('#queueCount').text(response.data.totalStatsCount || 0);
                    if (response.data.lastUpdateTime) {
                        $('#lastUpdate').text(new Date(response.data.lastUpdateTime).toLocaleString());
                    }
                }
            });
        }

        // 加载所有统计数据
        function loadAllStats() {
            $.get('/Statistics/GetAllClientStats', function(response) {
                if (response.success) {
                    currentStats = response.data;
                    updateStatsTable();
                    updateClientSelect();
                    updateCharts();
                }
            });
        }

        // 更新统计表格
        function updateStatsTable() {
            const tbody = $('#statsTableBody');
            tbody.empty();

            Object.keys(currentStats).forEach(clientName => {
                const stats = currentStats[clientName];
                const row = `
                    <tr>
                        <td>${clientName}</td>
                        <td>${stats.instanceId || '-'}</td>
                        <td>${(stats.cpu?.global || 0).toFixed(2)}%</td>
                        <td>${Object.keys(stats.cells || {}).length}</td>
                        <td>${Object.keys(stats.rfPorts || {}).length}</td>
                        <td>${stats.messageId || '-'}</td>
                        <td>${(stats.duration || 0).toFixed(2)}s</td>
                        <td>${new Date(stats.receivedAt).toLocaleString()}</td>
                        <td>
                            <button class="btn btn-sm btn-info" onclick="showCellDetails('${clientName}')">
                                <i class="fas fa-eye"></i> 查看小区
                            </button>
                        </td>
                    </tr>
                `;
                tbody.append(row);
            });
        }

        // 更新客户端选择下拉框
        function updateClientSelect() {
            const select = $('#clientSelect');
            select.find('option:not(:first)').remove();
            
            Object.keys(currentStats).forEach(clientName => {
                select.append(`<option value="${clientName}">${clientName}</option>`);
            });
        }

        // 显示小区详细信息
        function showCellDetails(clientName) {
            const stats = currentStats[clientName];
            if (!stats || !stats.cells) return;

            $('#selectedClientName').text(clientName);
            const tbody = $('#cellTableBody');
            tbody.empty();

            Object.keys(stats.cells).forEach(cellId => {
                const cell = stats.cells[cellId];
                const row = `
                    <tr>
                        <td>${cellId}</td>
                        <td>${(cell.dlBitrate || 0).toFixed(2)}</td>
                        <td>${(cell.ulBitrate || 0).toFixed(2)}</td>
                        <td>${(cell.dlUseAvg || 0).toFixed(2)}%</td>
                        <td>${(cell.ulUseAvg || 0).toFixed(2)}%</td>
                        <td>${(cell.ueCountAvg || 0).toFixed(0)}</td>
                        <td>${(cell.erabCountAvg || 0).toFixed(0)}</td>
                        <td>${(cell.dlSchedUsersAvg || 0).toFixed(0)}</td>
                        <td>${(cell.ulSchedUsersAvg || 0).toFixed(0)}</td>
                    </tr>
                `;
                tbody.append(row);
            });

            $('#cellDetails').show();
        }

        // 加载指定客户端的统计数据
        function loadClientStats() {
            const clientName = $('#clientSelect').val();
            if (!clientName) {
                loadAllStats();
                return;
            }

            $.get(`/Statistics/GetClientStats?clientName=${encodeURIComponent(clientName)}`, function(response) {
                if (response.success) {
                    currentStats = { [clientName]: response.data };
                    updateStatsTable();
                    updateCharts();
                }
            });
        }

        // 刷新统计数据
        function refreshStats() {
            loadSummary();
            loadAllStats();
        }

        // 清空统计数据
        function clearStats() {
            if (confirm('确定要清空所有统计数据吗？')) {
                $.post('/Statistics/ClearStats', function(response) {
                    if (response.success) {
                        alert('统计数据已清空');
                        refreshStats();
                    } else {
                        alert('清空失败: ' + response.message);
                    }
                });
            }
        }

        // 切换SSE连接
        function toggleSSE() {
            if (sseConnection) {
                sseConnection.close();
                sseConnection = null;
                $('#sseToggleText').text('启动SSE');
                $('#sseStatus').text('未连接').removeClass('text-success').addClass('text-danger');
            } else {
                startSSE();
                $('#sseToggleText').text('停止SSE');
                $('#sseStatus').text('已连接').removeClass('text-danger').addClass('text-success');
            }
        }

        // 启动SSE连接
        function startSSE() {
            sseConnection = new EventSource('/Statistics/SSEStats');
            
            sseConnection.onmessage = function(event) {
                try {
                    const data = JSON.parse(event.data);
                    if (data.type === 'stats_update') {
                        currentStats = data.data;
                        updateStatsTable();
                        updateCharts();
                        loadSummary();
                    }
                } catch (e) {
                    console.error('解析SSE数据失败:', e);
                }
            };

            sseConnection.onerror = function(event) {
                console.error('SSE连接错误:', event);
                $('#sseStatus').text('连接错误').removeClass('text-success').addClass('text-danger');
            };
        }

        // 启动刷新定时器
        function startRefreshTimer() {
            const interval = $('#refreshInterval').val() * 1000;
            if (refreshTimer) {
                clearInterval(refreshTimer);
            }
            refreshTimer = setInterval(refreshStats, interval);
        }

        // 更新刷新间隔
        function updateRefreshInterval() {
            startRefreshTimer();
        }

        // 页面卸载时清理资源
        $(window).on('beforeunload', function() {
            if (sseConnection) {
                sseConnection.close();
            }
            if (refreshTimer) {
                clearInterval(refreshTimer);
            }
        });
    </script>
}