{% extends "base_admin.html" %}

{% block page_title %}LLM使用统计{% endblock %}
{% block page_css %}<link rel="stylesheet" href="/static/css/index.css?v=20260330-1">{% endblock %}
{% block body_class %}dashboard-page{% endblock %}
{% block header_title %}LLM使用统计{% endblock %}
{% block header_subtitle %}实时监控 API 请求和 Token 消耗{% endblock %}

{% block content %}
        <div class="filters-section">
            <div class="filters">
                <div class="filter-group filter-group-date">
                    <label>开始日期:</label>
                    <input type="date" id="startDate">
                </div>
                <div class="filter-group filter-group-date">
                    <label>结束日期:</label>
                    <input type="date" id="endDate">
                </div>
                <div class="filter-group filter-group-presets">
                    <label>常用时间</label>
                    <div class="date-preset-group" role="group" aria-label="常用时间范围">
                        <button type="button" class="date-preset-btn" data-date-preset="today" onclick="applyDatePreset('today')">今天</button>
                        <button type="button" class="date-preset-btn" data-date-preset="last7" onclick="applyDatePreset('last7')">近7天</button>
                        <button type="button" class="date-preset-btn" data-date-preset="all" onclick="applyDatePreset('all')">全部时间</button>
                    </div>
                </div>
                <div class="filter-group filter-group-select">
                    <label>用户名</label>
                    <select id="username">
                        <option value="">全部</option>
                    </select>
                </div>
                <div class="filter-group filter-group-select">
                    <label>请求模型:</label>
                    <select id="requestModel">
                        <option value="">全部</option>
                    </select>
                </div>
                <button class="btn btn-primary" onclick="applyFilters()">查询</button>
            </div>
        </div>

        <div class="dashboard-tabs-section">
            <div class="dashboard-tabs" role="tablist" aria-label="统计视图">
                <button
                    type="button"
                    class="dashboard-tab-btn is-active"
                    id="dashboardTabBtn_stats"
                    onclick="switchDashboardTab('stats')"
                    aria-selected="true"
                    aria-controls="dashboardTabPanel_stats"
                >统计汇总</button>
                <button
                    type="button"
                    class="dashboard-tab-btn"
                    id="dashboardTabBtn_logs"
                    onclick="switchDashboardTab('logs')"
                    aria-selected="false"
                    aria-controls="dashboardTabPanel_logs"
                >请求明细</button>
            </div>

            <div class="dashboard-tab-panel is-active" id="dashboardTabPanel_stats" role="tabpanel" aria-labelledby="dashboardTabBtn_stats">
                <div class="stats-container">
                    <table class="stats-table">
                        <thead>
                            <tr>
                                <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleStatsSort('ip_address', 'string')">IP <span class="sort-indicator" id="statsSortIndicator_ip_address"></span></button></th>
                                <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleStatsSort('username', 'string')">用户名 <span class="sort-indicator" id="statsSortIndicator_username"></span></button></th>
                                <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleStatsSort('request_model', 'string')">请求模型 <span class="sort-indicator" id="statsSortIndicator_request_model"></span></button></th>
                                <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleStatsSort('response_model', 'string')">响应模型 <span class="sort-indicator" id="statsSortIndicator_response_model"></span></button></th>
                                <th class="sortable-th num-col" aria-sort="none"><button type="button" class="sort-button" onclick="toggleStatsSort('prompt_tokens', 'number')">输入token <span class="sort-indicator" id="statsSortIndicator_prompt_tokens"></span></button></th>
                                <th class="sortable-th num-col" aria-sort="none"><button type="button" class="sort-button" onclick="toggleStatsSort('completion_tokens', 'number')">输出token <span class="sort-indicator" id="statsSortIndicator_completion_tokens"></span></button></th>
                                <th class="sortable-th num-col" aria-sort="none"><button type="button" class="sort-button" onclick="toggleStatsSort('total_tokens', 'number')">总 Token <span class="sort-indicator" id="statsSortIndicator_total_tokens"></span></button></th>
                                <th class="sortable-th num-col" aria-sort="none"><button type="button" class="sort-button" onclick="toggleStatsSort('request_count', 'number')">请求数 <span class="sort-indicator" id="statsSortIndicator_request_count"></span></button></th>
                            </tr>
                        </thead>
                        <tbody id="statsTable">
                            <tr>
                                <td colspan="8" class="loading">加载统计数据...</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="dashboard-tab-panel" id="dashboardTabPanel_logs" role="tabpanel" aria-labelledby="dashboardTabBtn_logs" hidden>
                <div class="table-card-shell">
                    <div class="table-container">
                        <table>
                            <thead>
                                <tr>
                                    <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('ip_address', 'string')">IP <span class="sort-indicator" id="logsSortIndicator_ip_address"></span></button></th>
                                    <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('username', 'string')">用户名 <span class="sort-indicator" id="logsSortIndicator_username"></span></button></th>
                                    <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('request_model', 'string')">请求模型 <span class="sort-indicator" id="logsSortIndicator_request_model"></span></button></th>
                                    <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('response_model', 'string')">响应模型 <span class="sort-indicator" id="logsSortIndicator_response_model"></span></button></th>
                                    <th class="sortable-th num-col" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('prompt_tokens', 'number')">输入token <span class="sort-indicator" id="logsSortIndicator_prompt_tokens"></span></button></th>
                                    <th class="sortable-th num-col" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('completion_tokens', 'number')">输出token <span class="sort-indicator" id="logsSortIndicator_completion_tokens"></span></button></th>
                                    <th class="sortable-th num-col" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('total_tokens', 'number')">总 Token <span class="sort-indicator" id="logsSortIndicator_total_tokens"></span></button></th>
                                    <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('start_time', 'date')">开始时间 <span class="sort-indicator" id="logsSortIndicator_start_time"></span></button></th>
                                    <th class="sortable-th" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('end_time', 'date')">结束时间 <span class="sort-indicator" id="logsSortIndicator_end_time"></span></button></th>
                                    <th class="sortable-th num-col" aria-sort="none"><button type="button" class="sort-button" onclick="toggleLogsSort('duration', 'number')">耗时(秒) <span class="sort-indicator" id="logsSortIndicator_duration"></span></button></th>
                                </tr>
                            </thead>
                            <tbody id="logsTable">
                                <tr>
                                    <td colspan="10" class="loading">加载请求数据...</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="table-footer" id="tableFooter" style="display: none;">
                        <div class="right-controls">
                            <div class="pagination-controls">
                                <span id="prevBtn" class="page-nav-text disabled" onclick="prevPage()">&lt;</span>
                                <span class="page-info" id="pageInfo">第 1 页 / 共 1 页</span>
                                <span id="nextBtn" class="page-nav-text disabled" onclick="nextPage()">&gt;</span>
                            </div>
                            <div class="quick-jump">
                                <label for="pageJumpInput">跳至</label>
                                <input id="pageJumpInput" type="number" min="1" value="1">
                            </div>
                            <div class="page-size-controls">
                                <label for="pageSizeSelect">每页显示:</label>
                                <select id="pageSizeSelect" onchange="changePageSize()">
                                    <option value="50">50</option>
                                    <option value="100">100</option>
                                    <option value="200">200</option>
                                </select>
                            </div>
                            <span class="total-count" id="totalCount">共 0 条</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
{% endblock %}

{% block page_scripts %}
    <script src="/static/js/ui-message.js?v=20260319-1"></script>
    <script>
        let currentPage = 1;
        let pageSize = 50;
        let currentFilters = {};
        let jumpDebounceTimer = null;
        let currentTotalPages = 1;
        let activeCustomSelect = null;
        let statsData = [];
        let logsData = [];
        let activeDashboardTab = 'stats';
        let statsRequestToken = 0;
        let logsRequestToken = 0;
        const statsSortState = {
            key: 'total_tokens',
            direction: 'desc',
            type: 'number'
        };
        const logsSortState = {
            key: 'start_time',
            direction: 'desc',
            type: 'date'
        };

        function getDashboardTabButton(tabName) {
            return document.getElementById(`dashboardTabBtn_${tabName}`);
        }

        function getDashboardTabPanel(tabName) {
            return document.getElementById(`dashboardTabPanel_${tabName}`);
        }

        function syncDashboardTabUi() {
            ['stats', 'logs'].forEach(tabName => {
                const isActive = tabName === activeDashboardTab;
                const button = getDashboardTabButton(tabName);
                const panel = getDashboardTabPanel(tabName);

                if (button) {
                    button.classList.toggle('is-active', isActive);
                    button.setAttribute('aria-selected', isActive ? 'true' : 'false');
                }

                if (panel) {
                    panel.classList.toggle('is-active', isActive);
                    panel.hidden = !isActive;
                }
            });
        }

        function loadActiveDashboardTabData() {
            if (activeDashboardTab === 'stats') {
                loadStatistics();
                return;
            }
            loadLogs();
        }

        function switchDashboardTab(tabName) {
            if (!['stats', 'logs'].includes(tabName)) {
                return;
            }

            activeDashboardTab = tabName;
            syncDashboardTabUi();
            loadActiveDashboardTabData();
        }

        function closeAllCustomSelects() {
            document.querySelectorAll('.custom-select.open').forEach(select => {
                select.classList.remove('open');
                const trigger = select.querySelector('.custom-select-trigger');
                if (trigger) trigger.setAttribute('aria-expanded', 'false');
            });
            activeCustomSelect = null;
        }

        function normalizeNumber(value) {
            const n = Number(value);
            return Number.isFinite(n) ? n : 0;
        }

        function toDateInput(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        }

        function buildDatePresetRange(preset) {
            if (preset === 'all') {
                return { startDate: '', endDate: '' };
            }

            const end = new Date();
            const start = new Date(end);

            if (preset === 'last7') {
                start.setDate(end.getDate() - 6);
            }

            return {
                startDate: toDateInput(start),
                endDate: toDateInput(end)
            };
        }

        function detectDatePreset(startDate, endDate) {
            if (!startDate && !endDate) {
                return 'all';
            }

            const today = buildDatePresetRange('today');
            if (startDate === today.startDate && endDate === today.endDate) {
                return 'today';
            }

            const last7 = buildDatePresetRange('last7');
            if (startDate === last7.startDate && endDate === last7.endDate) {
                return 'last7';
            }

            return null;
        }

        function updateDatePresetUi() {
            const startDate = document.getElementById('startDate')?.value || '';
            const endDate = document.getElementById('endDate')?.value || '';
            const activePreset = detectDatePreset(startDate, endDate);
            document.querySelectorAll('.date-preset-btn').forEach(button => {
                const isActive = button.dataset.datePreset === activePreset;
                button.classList.toggle('is-active', isActive);
                button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
            });
        }

        function applyDatePreset(preset, shouldApplyFilters = true) {
            const { startDate, endDate } = buildDatePresetRange(preset);
            document.getElementById('startDate').value = startDate;
            document.getElementById('endDate').value = endDate;
            updateDatePresetUi();
            if (shouldApplyFilters) {
                applyFilters();
            }
        }

        function escapeHtml(value) {
            return String(value ?? '')
                .replace(/&/g, '&amp;')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;')
                .replace(/'/g, '&#39;');
        }

        function renderModelBadge(value) {
            if (!value) return '-';
            const safeValue = escapeHtml(value);
            return `<span class="table-model-tag" title="${safeValue}">${safeValue}</span>`;
        }

        function formatNumberFull(value) {
            return normalizeNumber(value).toLocaleString();
        }

        function formatNumberDisplay(value) {
            const n = normalizeNumber(value);
            return n.toLocaleString();
        }

        function renderNumber(value) {
            const full = formatNumberFull(value);
            const display = formatNumberDisplay(value);
            return `<span class="numeric-value" title="${full}">${display}</span>`;
        }

        function normalizeSortNumber(value) {
            const n = Number(value);
            return Number.isFinite(n) ? n : 0;
        }

        function parseLocalDateTime(value) {
            if (value instanceof Date) {
                return Number.isFinite(value.getTime()) ? value : null;
            }
            if (value === null || value === undefined) {
                return null;
            }

            const text = String(value).trim();
            if (!text) {
                return null;
            }

            const match = text.match(
                /^(\d{4})-(\d{2})-(\d{2})[\sT](\d{2}):(\d{2}):(\d{2})(?:\.(\d{1,6}))?$/
            );
            if (!match) {
                return null;
            }

            const microseconds = (match[7] || '').padEnd(6, '0').slice(0, 6);
            const milliseconds = Math.floor(Number(microseconds) / 1000);
            const date = new Date(
                Number(match[1]),
                Number(match[2]) - 1,
                Number(match[3]),
                Number(match[4]),
                Number(match[5]),
                Number(match[6]),
                milliseconds
            );
            return Number.isFinite(date.getTime()) ? date : null;
        }

        function normalizeSortDate(value) {
            const date = parseLocalDateTime(value);
            const t = date ? date.getTime() : Number.NaN;
            return Number.isFinite(t) ? t : 0;
        }

        function calculateDurationSeconds(startValue, endValue) {
            const startTime = parseLocalDateTime(startValue);
            const endTime = parseLocalDateTime(endValue);
            if (!startTime || !endTime) {
                return 0;
            }
            return Math.max(0, (endTime.getTime() - startTime.getTime()) / 1000);
        }

        function compareSortValues(leftValue, rightValue, type) {
            if (type === 'number' || type === 'date') {
                return leftValue - rightValue;
            }
            return String(leftValue).localeCompare(String(rightValue), 'zh-CN', {
                sensitivity: 'base',
                numeric: true
            });
        }

        function sortByState(items, state, valueGetter) {
            return items
                .map((item, index) => ({ item, index }))
                .sort((left, right) => {
                    const leftValue = valueGetter(left.item, state.key, state.type);
                    const rightValue = valueGetter(right.item, state.key, state.type);
                    const result = compareSortValues(leftValue, rightValue, state.type);
                    if (result !== 0) {
                        return state.direction === 'asc' ? result : -result;
                    }
                    return left.index - right.index;
                })
                .map(entry => entry.item);
        }

        function getIndicator(direction, isActive) {
            if (!isActive) return '';
            return direction === 'asc' ? '&uarr;' : '&darr;';
        }

        function updateSortIndicators(prefix, state, keys) {
            keys.forEach(key => {
                const indicator = document.getElementById(`${prefix}SortIndicator_${key}`);
                if (indicator) {
                    indicator.innerHTML = getIndicator(state.direction, state.key === key);
                }
            });

            const table = prefix === 'stats'
                ? document.querySelector('#dashboardTabPanel_stats table')
                : document.querySelector('#dashboardTabPanel_logs table');
            if (!table) return;

            table.querySelectorAll('th.sortable-th').forEach(th => {
                th.setAttribute('aria-sort', 'none');
            });

            const activeIndicator = document.getElementById(`${prefix}SortIndicator_${state.key}`);
            if (activeIndicator) {
                const activeHeader = activeIndicator.closest('th.sortable-th');
                if (activeHeader) {
                    activeHeader.setAttribute('aria-sort', state.direction === 'asc' ? 'ascending' : 'descending');
                }
            }
        }

        function getStatsSortValue(stat, key, type) {
            const value = stat?.[key];
            if (type === 'number') return normalizeSortNumber(value);
            if (type === 'date') return normalizeSortDate(value);
            return value ?? '';
        }

        function getLogSortValue(log, key, type) {
            if (key === 'duration') {
                return normalizeSortNumber(calculateDurationSeconds(log?.start_time, log?.end_time));
            }
            const value = log?.[key];
            if (type === 'number') return normalizeSortNumber(value);
            if (type === 'date') return normalizeSortDate(value);
            return value ?? '';
        }

        function applyStatsSort() {
            statsData = sortByState(statsData, statsSortState, getStatsSortValue);
        }

        function applyLogsSort() {
            logsData = sortByState(logsData, logsSortState, getLogSortValue);
        }

        function toggleStatsSort(key, type) {
            if (statsSortState.key === key) {
                statsSortState.direction = statsSortState.direction === 'asc' ? 'desc' : 'asc';
            } else {
                statsSortState.key = key;
                statsSortState.type = type;
                statsSortState.direction = type === 'string' ? 'asc' : 'desc';
            }
            applyStatsSort();
            renderStatistics();
        }

        function toggleLogsSort(key, type) {
            if (logsSortState.key === key) {
                logsSortState.direction = logsSortState.direction === 'asc' ? 'desc' : 'asc';
            } else {
                logsSortState.key = key;
                logsSortState.type = type;
                logsSortState.direction = type === 'string' ? 'asc' : 'desc';
            }
            applyLogsSort();
            renderLogs(logsData);
        }

        function syncCustomSelectValue(selectId) {
            const nativeSelect = document.getElementById(selectId);
            const customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!nativeSelect || !customSelect) return;

            const trigger = customSelect.querySelector('.custom-select-trigger');
            const selectedOption = nativeSelect.options[nativeSelect.selectedIndex] || nativeSelect.options[0];
            trigger.textContent = selectedOption ? selectedOption.textContent : '请选择';

            customSelect.querySelectorAll('.custom-select-option').forEach(option => {
                option.classList.toggle('selected', option.dataset.value === nativeSelect.value);
            });
        }

        function renderCustomSelectOptions(selectId) {
            const nativeSelect = document.getElementById(selectId);
            const customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!nativeSelect || !customSelect) return;

            const menu = customSelect.querySelector('.custom-select-menu');
            menu.innerHTML = '';

            Array.from(nativeSelect.options).forEach(option => {
                const optionButton = document.createElement('button');
                optionButton.type = 'button';
                optionButton.className = 'custom-select-option';
                optionButton.textContent = option.textContent;
                optionButton.dataset.value = option.value;
                optionButton.addEventListener('click', function() {
                    if (nativeSelect.value !== option.value) {
                        nativeSelect.value = option.value;
                        nativeSelect.dispatchEvent(new Event('change', { bubbles: true }));
                    }
                    syncCustomSelectValue(selectId);
                    closeAllCustomSelects();
                });
                menu.appendChild(optionButton);
            });

            syncCustomSelectValue(selectId);
        }

        function setupCustomSelect(selectId) {
            const nativeSelect = document.getElementById(selectId);
            if (!nativeSelect) return;

            nativeSelect.classList.add('native-select-hidden');

            let customSelect = document.querySelector(`.custom-select[data-for="${selectId}"]`);
            if (!customSelect) {
                customSelect = document.createElement('div');
                customSelect.className = 'custom-select';
                customSelect.dataset.for = selectId;
                customSelect.innerHTML = `
                    <button type="button" class="custom-select-trigger" aria-haspopup="listbox" aria-expanded="false"></button>
                    <div class="custom-select-menu" role="listbox"></div>
                `;
                nativeSelect.insertAdjacentElement('afterend', customSelect);

                const trigger = customSelect.querySelector('.custom-select-trigger');
                trigger.addEventListener('click', function(event) {
                    event.stopPropagation();
                    const isOpen = customSelect.classList.contains('open');
                    closeAllCustomSelects();
                    if (!isOpen) {
                        const rect = customSelect.getBoundingClientRect();
                        const spaceBelow = window.innerHeight - rect.bottom;
                        customSelect.classList.toggle('drop-up', spaceBelow < 236);
                        customSelect.classList.add('open');
                        trigger.setAttribute('aria-expanded', 'true');
                        activeCustomSelect = customSelect;
                    }
                });

                trigger.addEventListener('keydown', function(event) {
                    if (event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') {
                        event.preventDefault();
                        trigger.click();
                    } else if (event.key === 'Escape') {
                        closeAllCustomSelects();
                    }
                });

                nativeSelect.addEventListener('change', function() {
                    syncCustomSelectValue(selectId);
                });
            }

            renderCustomSelectOptions(selectId);
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            initThemeToggle();
            setupCustomSelect('username');
            setupCustomSelect('requestModel');
            setupCustomSelect('pageSizeSelect');
            setDefaultDateRange();
            loadUsernames();
            loadRequestModels();
            updateSortIndicators('stats', statsSortState, ['ip_address', 'username', 'request_model', 'response_model', 'prompt_tokens', 'completion_tokens', 'total_tokens', 'request_count']);
            updateSortIndicators('logs', logsSortState, ['ip_address', 'username', 'request_model', 'response_model', 'prompt_tokens', 'completion_tokens', 'total_tokens', 'start_time', 'end_time', 'duration']);
            syncDashboardTabUi();
            switchDashboardTab(activeDashboardTab);

            // 设置默认每页大小
            document.getElementById('pageSizeSelect').value = pageSize;
            syncCustomSelectValue('pageSizeSelect');
            const pageJumpInput = document.getElementById('pageJumpInput');
            if (pageJumpInput) {
                pageJumpInput.addEventListener('keydown', function(e) {
                    if (e.key === 'Enter') {
                        jumpToPage(true);
                    }
                });
                pageJumpInput.addEventListener('blur', function() {
                    jumpToPage(true);
                });
                pageJumpInput.addEventListener('input', function() {
                    clearTimeout(jumpDebounceTimer);
                    jumpDebounceTimer = setTimeout(function() {
                        jumpToPage(false);
                    }, 450);
                });
            }
            document.getElementById('startDate')?.addEventListener('change', updateDatePresetUi);
            document.getElementById('endDate')?.addEventListener('change', updateDatePresetUi);
        });

        document.addEventListener('click', function(event) {
            if (!event.target.closest('.custom-select')) {
                closeAllCustomSelects();
            }
        });

        document.addEventListener('keydown', function(event) {
            if (event.key === 'Escape') {
                closeAllCustomSelects();
            }
        });

        // 加载统计数据
        async function loadStatistics() {
            const requestToken = ++statsRequestToken;
            document.getElementById('statsTable').innerHTML = '<tr><td colspan="8" class="loading">加载统计数据...</td></tr>';

            try {
                const params = new URLSearchParams(currentFilters);
                const response = await fetch(`/api/statistics?${params}`, { cache: 'no-store' });
                const data = await response.json();
                if (requestToken !== statsRequestToken) return;
                statsData = data;
                if (!Array.isArray(statsData)) statsData = [];
                applyStatsSort();
                renderStatistics();
            } catch (error) {
                if (requestToken !== statsRequestToken) return;
                console.error('加载统计数据失败:', error);
                document.getElementById('statsTable').innerHTML = '<tr><td colspan="8" class="error">加载统计数据失败</td></tr>';
                showMessage('加载统计数据失败，请稍后重试', 'error');
            }
        }

        function renderStatistics() {
            const statsTable = document.getElementById('statsTable');
            updateSortIndicators('stats', statsSortState, ['ip_address', 'username', 'request_model', 'response_model', 'prompt_tokens', 'completion_tokens', 'total_tokens', 'request_count']);

            if (statsData.length === 0) {
                statsTable.innerHTML = `<tr><td colspan="10" class="empty-state">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:40px;height:40px;max-width:40px;max-height:40px;display:block;margin:0 auto 8px;">
                                <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <p>暂无统计数据</p>
                            </td></tr>`;
                return;
            }

            let html = '';
            let totalRequests = 0;
            let totalTokens = 0;
            let totalPromptTokens = 0;
            let totalCompletionTokens = 0;

            statsData.forEach(stat => {
                totalRequests += stat.request_count || 0;
                totalTokens += stat.total_tokens || 0;
                totalPromptTokens += stat.prompt_tokens || 0;
                totalCompletionTokens += stat.completion_tokens || 0;

                html += `
                    <tr>
                        <td>${stat.ip_address ? `<span class="ip-address" title="${escapeHtml(stat.ip_address)}">${escapeHtml(stat.ip_address)}</span>` : '-'}</td>
                        <td>${stat.username || '-'}</td>
                        <td>${renderModelBadge(stat.request_model)}</td>
                        <td>${renderModelBadge(stat.response_model)}</td>
                        <td class="num-col">${renderNumber(stat.prompt_tokens || 0)}</td>
                        <td class="num-col">${renderNumber(stat.completion_tokens || 0)}</td>
                        <td class="num-col">${renderNumber(stat.total_tokens || 0)}</td>
                        <td class="num-col">${renderNumber(stat.request_count || 0)}</td>
                    </tr>
                `;
            });

            html += `
                <tr class="stats-total-row">
                    <td colspan="4">总计</td>
                    <td class="num-col">${renderNumber(totalPromptTokens)}</td>
                    <td class="num-col">${renderNumber(totalCompletionTokens)}</td>
                    <td class="num-col">${renderNumber(totalTokens)}</td>
                    <td class="num-col">${renderNumber(totalRequests)}</td>
                </tr>
            `;
            statsTable.innerHTML = html;
        }

        // 加载用户名列表
        async function loadUsernames() {
            try {
                const response = await fetch('/api/usernames');
                const usernames = await response.json();

                const select = document.getElementById('username');
                usernames.forEach(username => {
                    const option = document.createElement('option');
                    option.value = username;
                    option.textContent = username;
                    select.appendChild(option);
                });
                renderCustomSelectOptions('username');
            } catch (error) {
                console.error('加载用户名列表失败', error);
                showMessage('加载用户名列表失败', 'warning');
            }
        }

        async function loadRequestModels() {
            try {
                const response = await fetch('/api/request-models');
                const models = await response.json();

                const select = document.getElementById('requestModel');
                models.forEach(model => {
                    const option = document.createElement('option');
                    option.value = model;
                    option.textContent = model;
                    select.appendChild(option);
                });
                renderCustomSelectOptions('requestModel');
            } catch (error) {
                console.error('加载请求模型列表失败', error);
                showMessage('加载请求模型列表失败', 'warning');
            }
        }

        // 加载日志数据
        async function loadLogs() {
            const requestToken = ++logsRequestToken;
            document.getElementById('tableFooter').style.display = 'none';
            // 显示加载状态
            document.getElementById('logsTable').innerHTML = '<tr><td colspan="10" class="loading">加载请求数据...</td></tr>';

            try {
                const params = new URLSearchParams({
                    page: currentPage,
                    page_size: pageSize,
                    ...currentFilters
                });

                const response = await fetch(`/api/request-logs?${params}`, { cache: 'no-store' });
                const data = await response.json();
                if (requestToken !== logsRequestToken) return;

                logsData = Array.isArray(data.logs) ? data.logs : [];
                applyLogsSort();
                renderLogs(logsData);
                updatePagination(data);
            } catch (error) {
                if (requestToken !== logsRequestToken) return;
                document.getElementById('tableFooter').style.display = 'none';
                console.error('加载日志失败:', error);
                document.getElementById('logsTable').innerHTML = '<tr><td colspan="10" class="error">加载日志失败</td></tr>';
                showMessage('加载日志失败，请稍后重试', 'error');
            }
        }

        // 渲染日志表格
        function renderLogs(logs) {
            const tbody = document.getElementById('logsTable');
            updateSortIndicators('logs', logsSortState, ['ip_address', 'username', 'request_model', 'response_model', 'prompt_tokens', 'completion_tokens', 'total_tokens', 'start_time', 'end_time', 'duration']);

            if (logs.length === 0) {
                tbody.innerHTML = `
                    <tr>
                        <td colspan="10" class="empty-state">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:40px;height:40px;max-width:40px;max-height:40px;display:block;margin:0 auto 8px;">
                                <path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <p>暂无请求数据</p>
                        </td>
                    </tr>
                `;
                // 隐藏表格底部
                document.getElementById('tableFooter').style.display = 'none';
                return;
            }

            let html = '';
            logs.forEach(log => {
                const startTime = parseLocalDateTime(log.start_time);
                const endTime = parseLocalDateTime(log.end_time);
                const duration = calculateDurationSeconds(log.start_time, log.end_time).toFixed(2);

                html += `
                    <tr>
                        <td>${log.ip_address ? `<span class="ip-address" title="${escapeHtml(log.ip_address)}">${escapeHtml(log.ip_address)}</span>` : '-'}</td>
                        <td>${log.username || '-'}</td>
                        <td>${renderModelBadge(log.request_model)}</td>
                        <td>${renderModelBadge(log.response_model)}</td>
                        <td class="num-col">${renderNumber(log.prompt_tokens || 0)}</td>
                        <td class="num-col">${renderNumber(log.completion_tokens || 0)}</td>
                        <td class="num-col">${renderNumber(log.total_tokens || 0)}</td>
                        <td>${formatDateTime(startTime)}</td>
                        <td>${formatDateTime(endTime)}</td>
                        <td class="num-col"><span class="numeric-value">${duration}</span></td>
                    </tr>
                `;
            });
            tbody.innerHTML = html;
        }

        // 更新分页
        function updatePagination(data) {
            currentTotalPages = data.total_pages;
            document.getElementById('pageInfo').textContent = `第 ${data.page} 页 / 共 ${data.total_pages} 页`;
            document.getElementById('prevBtn').classList.toggle('disabled', data.page <= 1);
            document.getElementById('nextBtn').classList.toggle('disabled', data.page >= data.total_pages);
            document.getElementById('totalCount').textContent = `共 ${data.total} 条`;

            const pageSizeSelect = document.getElementById('pageSizeSelect');
            pageSizeSelect.value = pageSize;
            syncCustomSelectValue('pageSizeSelect');

            const pageJumpInput = document.getElementById('pageJumpInput');
            if (pageJumpInput) {
                pageJumpInput.max = data.total_pages;
                pageJumpInput.value = data.page;
            }

            document.getElementById('tableFooter').style.display = 'flex';
        }

        function jumpToPage(force = false) {
            const input = document.getElementById('pageJumpInput');
            if (!input) return;
            const page = parseInt(input.value, 10);
            if (Number.isNaN(page)) {
                if (force) input.value = currentPage;
                return;
            }

            const totalPages = Math.max(1, parseInt(input.max || '1', 10));
            const target = Math.min(totalPages, Math.max(1, page));
            if (target === currentPage) {
                input.value = currentPage;
                return;
            }

            currentPage = target;
            loadLogs();
        }

        // 格式化日期时间
        function formatDateTime(value) {
            const date = parseLocalDateTime(value);
            if (!date) {
                return '-';
            }
            return date.toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        }

        // 应用过滤
        function applyFilters() {
            currentFilters = {};

            const startDate = document.getElementById('startDate').value;
            const endDate = document.getElementById('endDate').value;
            const username = document.getElementById('username').value;
            const requestModel = document.getElementById('requestModel').value;

            updateDatePresetUi();

            if (startDate) currentFilters.start_date = startDate;
            if (endDate) currentFilters.end_date = endDate;
            if (username) currentFilters.username = username;
            if (requestModel) currentFilters.request_model = requestModel;

            currentPage = 1;
            loadActiveDashboardTabData();
        }

        function setDefaultDateRange() {
            const defaultRange = buildDatePresetRange('today');
            document.getElementById('startDate').value = defaultRange.startDate;
            document.getElementById('endDate').value = defaultRange.endDate;
            currentFilters = {
                start_date: defaultRange.startDate,
                end_date: defaultRange.endDate,
            };
            updateDatePresetUi();
        }

        // 上一页
        function prevPage() {
            if (currentPage <= 1) return;
            currentPage--;
            loadLogs();
        }

        // 下一页
        function nextPage() {
            if (currentPage >= currentTotalPages) return;
            currentPage++;
            loadLogs();
        }

        // 更改每页大小
        function changePageSize() {
            const newPageSize = parseInt(document.getElementById('pageSizeSelect').value);
            if (newPageSize !== pageSize) {
                pageSize = newPageSize;
                currentPage = 1;
                loadLogs();
            }
        }
    </script>
{% endblock %}