<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阴阳师抽卡系统 - 管理后台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        .stat-card {
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .rarity-r { color: #6c757d; }
        .rarity-sr { color: #0d6efd; }
        .rarity-ssr { color: #ffc107; }
        .rarity-sp { color: #dc3545; }
        .achievement-card {
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
        }
        .progress {
            height: 25px;
        }
        .navbar-brand {
            font-weight: bold;
        }
        .table th {
            border-top: none;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-dice-5"></i> 阴阳师抽卡系统 - 管理后台
            </a>
            <div class="ms-auto">
                <span class="navbar-text">
                    <i class="bi bi-shield-lock"></i> 管理员访问
                </span>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 统计概览 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card stat-card bg-light">
                    <div class="card-body text-center">
                        <h5 class="card-title"><i class="bi bi-people"></i> 参与人数</h5>
                        <h2 class="text-primary" id="totalUsers">-</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-light">
                    <div class="card-body text-center">
                        <h5 class="card-title"><i class="bi bi-dice-6"></i> 总抽卡次数</h5>
                        <h2 class="text-success" id="totalDraws">-</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-light">
                    <div class="card-body text-center">
                        <h5 class="card-title"><i class="bi bi-trophy"></i> SSR/SP总数</h5>
                        <h2 class="text-warning" id="totalSSRSP">-</h2>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card stat-card bg-light">
                    <div class="card-body text-center">
                        <h5 class="card-title"><i class="bi bi-percent"></i> SSR/SP概率</h5>
                        <h2 class="text-danger" id="ssrSpRate">-</h2>
                    </div>
                </div>
            </div>
        </div>

        <!-- 稀有度分布 -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="bi bi-pie-chart"></i> 稀有度分布</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="text-center">
                                    <h3 class="rarity-r">R</h3>
                                    <div class="progress mb-2">
                                        <div class="progress-bar bg-secondary" id="rRate" style="width: 0%"></div>
                                    </div>
                                    <h4 id="rCount">-</h4>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center">
                                    <h3 class="rarity-sr">SR</h3>
                                    <div class="progress mb-2">
                                        <div class="progress-bar bg-primary" id="srRate" style="width: 0%"></div>
                                    </div>
                                    <h4 id="srCount">-</h4>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center">
                                    <h3 class="rarity-ssr">SSR</h3>
                                    <div class="progress mb-2">
                                        <div class="progress-bar bg-warning" id="ssrRate" style="width: 0%"></div>
                                    </div>
                                    <h4 id="ssrCount">-</h4>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="text-center">
                                    <h3 class="rarity-sp">SP</h3>
                                    <div class="progress mb-2">
                                        <div class="progress-bar bg-danger" id="spRate" style="width: 0%"></div>
                                    </div>
                                    <h4 id="spCount">-</h4>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 排行榜 -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5><i class="bi bi-trophy"></i> SSR/SP排行榜</h5>
                        <button class="btn btn-sm btn-outline-primary" onclick="refreshRankList()">
                            <i class="bi bi-arrow-clockwise"></i> 刷新
                        </button>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>排名</th>
                                        <th>用户ID</th>
                                        <th>总抽卡次数</th>
                                        <th class="rarity-r">R</th>
                                        <th class="rarity-sr">SR</th>
                                        <th class="rarity-ssr">SSR</th>
                                        <th class="rarity-sp">SP</th>
                                        <th>SSR/SP总数</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody id="rankListBody">
                                    <tr>
                                        <td colspan="9" class="text-center">加载中...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户查询 -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="bi bi-person-search"></i> 用户查询</h5>
                    </div>
                    <div class="card-body">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="userIdInput" placeholder="输入用户ID">
                            <button class="btn btn-primary" onclick="queryUser()">
                                <i class="bi bi-search"></i> 查询
                            </button>
                        </div>
                        
                        <div id="userStatsResult" style="display: none;">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>抽卡统计</h6>
                                    <table class="table table-sm">
                                        <tr>
                                            <td>总抽卡次数</td>
                                            <td id="userTotalDraws">-</td>
                                        </tr>
                                        <tr>
                                            <td class="rarity-r">R卡数量</td>
                                            <td id="userRCount">-</td>
                                        </tr>
                                        <tr>
                                            <td class="rarity-sr">SR卡数量</td>
                                            <td id="userSRCount">-</td>
                                        </tr>
                                        <tr>
                                            <td class="rarity-ssr">SSR卡数量</td>
                                            <td id="userSSRCount">-</td>
                                        </tr>
                                        <tr>
                                            <td class="rarity-sp">SP卡数量</td>
                                            <td id="userSPCount">-</td>
                                        </tr>
                                    </table>
                                </div>
                                <div class="col-md-6">
                                    <h6>最近抽卡记录</h6>
                                    <div id="recentDraws">
                                        加载中...
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 成就查询 -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h5><i class="bi bi-award"></i> 成就查询</h5>
                    </div>
                    <div class="card-body">
                        <div class="input-group mb-3">
                            <input type="text" class="form-control" id="achievementUserIdInput" placeholder="输入用户ID">
                            <button class="btn btn-primary" onclick="queryAchievements()">
                                <i class="bi bi-search"></i> 查询
                            </button>
                        </div>
                        
                        <div id="achievementResult" style="display: none;">
                            <div class="row">
                                <div class="col-md-6">
                                    <h6>已解锁成就</h6>
                                    <div id="unlockedAchievements">
                                        加载中...
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <h6>成就进度</h6>
                                    <div class="achievement-card">
                                        <div class="d-flex justify-content-between">
                                            <span>连续抽卡天数</span>
                                            <span id="consecutiveDays">-</span>
                                        </div>
                                        <div class="progress mt-2">
                                            <div class="progress-bar" id="consecutiveDaysProgress" style="width: 0%"></div>
                                        </div>
                                    </div>
                                    <div class="achievement-card">
                                        <div class="d-flex justify-content-between">
                                            <span>无SSR/SP连击</span>
                                            <span id="noSsrStreak">-</span>
                                        </div>
                                        <div class="progress mt-2">
                                            <div class="progress-bar bg-danger" id="noSsrStreakProgress" style="width: 0%"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 每日详细抽卡记录 -->
        <div class="row mb-4">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5><i class="bi bi-table"></i> 今日抽卡详细记录</h5>
                        <div>
                            <input type="date" class="form-control form-control-sm d-inline-block me-2" id="recordDateInput" style="width: auto;">
                            <button class="btn btn-sm btn-outline-primary" onclick="loadDailyRecords()">
                                <i class="bi bi-arrow-clockwise"></i> 刷新
                            </button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>抽卡时间</th>
                                        <th>用户ID</th>
                                        <th>式神名称</th>
                                        <th>稀有度</th>
                                        <th>成就解锁</th>
                                    </tr>
                                </thead>
                                <tbody id="dailyRecordsBody">
                                    <tr>
                                        <td colspan="5" class="text-center">加载中...</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <div>
                                <span>总记录数: <strong id="totalRecordsCount">0</strong></span>
                            </div>
                            <div>
                                <nav aria-label="Page navigation">
                                    <ul class="pagination pagination-sm" id="recordsPagination">
                                        <!-- 分页控件将通过JS动态生成 -->
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-light text-center py-3 mt-5">
        <div class="container">
            <p class="mb-0">阴阳师抽卡系统 - 管理后台 &copy; 2024</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // API配置
        const API_BASE = '/onmyoji_gacha/api';
        let ADMIN_TOKEN = localStorage.getItem('adminToken');
        
        // 令牌重置函数
        function resetToken() {
            localStorage.removeItem('adminToken');
            const newToken = prompt('请输入管理员令牌:');
            if (newToken) {
                ADMIN_TOKEN = newToken;
                localStorage.setItem('adminToken', ADMIN_TOKEN);
                // 更新请求头
                headers.Authorization = `Bearer ${ADMIN_TOKEN}`;
                console.log('令牌已重置:', ADMIN_TOKEN);
                // 重新加载数据
                loadDailyStats();
                loadRankList();
                loadDailyRecords();
            } else {
                alert('需要管理员令牌才能访问');
            }
        }
        
        // 如果没有保存的令牌，提示输入
        if (!ADMIN_TOKEN) {
            ADMIN_TOKEN = prompt('请输入管理员令牌:');
            if (ADMIN_TOKEN) {
                localStorage.setItem('adminToken', ADMIN_TOKEN);
            } else {
                alert('需要管理员令牌才能访问');
                window.location.reload();
            }
        }
        
        console.log('使用的管理员令牌:', ADMIN_TOKEN);

        // API请求头
        const headers = {
            'Authorization': `Bearer ${ADMIN_TOKEN}`,
            'Content-Type': 'application/json'
        };
        
        console.log('请求头:', headers);
        
        // 添加令牌重置按钮到导航栏
        window.addEventListener('DOMContentLoaded', function() {
            const navbar = document.querySelector('.navbar .ms-auto');
            const resetButton = document.createElement('button');
            resetButton.className = 'btn btn-outline-light btn-sm ms-2';
            resetButton.innerHTML = '<i class="bi bi-key"></i> 重置令牌';
            resetButton.onclick = resetToken;
            navbar.appendChild(resetButton);
        });

        // 页面加载时获取数据
        document.addEventListener('DOMContentLoaded', function() {
            loadDailyStats();
            loadRankList();
            // 设置今天的日期为默认值
            const today = new Date().toISOString().split('T')[0];
            document.getElementById('recordDateInput').value = today;
            loadDailyRecords();
        });

        // 加载今日统计
        async function loadDailyStats() {
            try {
                console.log('正在请求每日统计...');
                const response = await fetch(`${API_BASE}/stats/daily`, { headers });
                console.log('响应状态:', response.status);
                console.log('响应头:', response.headers);
                
                if (!response.ok) {
                    const errorText = await response.text();
                    console.error('API 错误响应:', errorText);
                    throw new Error(`HTTP ${response.status}: ${errorText}`);
                }
                
                const data = await response.json();
                console.log('每日统计数据:', data);
                
                if (data.success) {
                    const stats = data.stats;
                    document.getElementById('totalUsers').textContent = stats.total_users;
                    document.getElementById('totalDraws').textContent = stats.total_draws;
                    
                    const ssrSpTotal = stats.rarity_stats.SSR + stats.rarity_stats.SP;
                    document.getElementById('totalSSRSP').textContent = ssrSpTotal;
                    
                    const ssrSpRate = ((ssrSpTotal / stats.total_draws) * 100).toFixed(2);
                    document.getElementById('ssrSpRate').textContent = ssrSpRate + '%';
                    
                    // 更新稀有度分布
                    updateRarityDistribution(stats.rarity_stats, stats.total_draws);
                } else {
                    console.error('API 返回失败:', data);
                }
            } catch (error) {
                console.error('加载统计数据失败:', error);
                // 显示错误信息给用户
                document.getElementById('totalUsers').textContent = '错误';
                document.getElementById('totalDraws').textContent = '错误';
                document.getElementById('totalSSRSP').textContent = '错误';
                document.getElementById('ssrSpRate').textContent = '错误';
            }
        }

        // 更新稀有度分布
        function updateRarityDistribution(rarityStats, totalDraws) {
            const rarities = ['R', 'SR', 'SSR', 'SP'];
            
            rarities.forEach(rarity => {
                const count = rarityStats[rarity];
                const rate = totalDraws > 0 ? (count / totalDraws * 100).toFixed(1) : 0;
                
                document.getElementById(`${rarity.toLowerCase()}Count`).textContent = count;
                document.getElementById(`${rarity.toLowerCase()}Rate`).style.width = rate + '%';
                document.getElementById(`${rarity.toLowerCase()}Rate`).textContent = rate + '%';
            });
        }

        // 加载排行榜
        async function loadRankList() {
            try {
                console.log('正在请求排行榜数据...');
                const response = await fetch(`${API_BASE}/stats/rank`, { headers });
                console.log('排行榜响应状态:', response.status);
                
                if (!response.ok) {
                    const errorText = await response.text();
                    console.error('排行榜 API 错误响应:', errorText);
                    throw new Error(`HTTP ${response.status}: ${errorText}`);
                }
                
                const data = await response.json();
                console.log('排行榜数据:', data);
                
                if (data.success) {
                    const tbody = document.getElementById('rankListBody');
                    tbody.innerHTML = '';
                    
                    data.data.forEach((user, index) => {
                        const row = document.createElement('tr');
                        row.innerHTML = `
                            <td>${index + 1}</td>
                            <td>${user.user_id}</td>
                            <td>${user.total_draws}</td>
                            <td class="rarity-r">${user.R_count}</td>
                            <td class="rarity-sr">${user.SR_count}</td>
                            <td class="rarity-ssr">${user.SSR_count}</td>
                            <td class="rarity-sp">${user.SP_count}</td>
                            <td><strong>${user.ssr_sp_total}</strong></td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="viewUserDetails('${user.user_id}')">
                                    <i class="bi bi-eye"></i> 详情
                                </button>
                            </td>
                        `;
                        tbody.appendChild(row);
                    });
                    
                    if (data.data.length === 0) {
                        tbody.innerHTML = '<tr><td colspan="9" class="text-center">暂无数据</td></tr>';
                    }
                } else {
                    console.error('排行榜 API 返回失败:', data);
                    document.getElementById('rankListBody').innerHTML = '<tr><td colspan="9" class="text-center">数据加载失败</td></tr>';
                }
            } catch (error) {
                console.error('加载排行榜失败:', error);
                document.getElementById('rankListBody').innerHTML = '<tr><td colspan="9" class="text-center">加载失败，请检查令牌</td></tr>';
            }
        }

        // 刷新排行榜
        function refreshRankList() {
            loadRankList();
        }

        // 查询用户
        async function queryUser() {
            const userId = document.getElementById('userIdInput').value.trim();
            if (!userId) {
                alert('请输入用户ID');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/stats/user/${userId}`, { headers });
                const data = await response.json();
                
                if (data.success) {
                    document.getElementById('userStatsResult').style.display = 'block';
                    
                    document.getElementById('userTotalDraws').textContent = data.total_draws;
                    document.getElementById('userRCount').textContent = data.R_count;
                    document.getElementById('userSRCount').textContent = data.SR_count;
                    document.getElementById('userSSRCount').textContent = data.SSR_count;
                    document.getElementById('userSPCount').textContent = data.SP_count;
                    
                    // 显示最近抽卡记录
                    const recentDrawsDiv = document.getElementById('recentDraws');
                    if (data.recent_draws && data.recent_draws.length > 0) {
                        recentDrawsDiv.innerHTML = data.recent_draws.map(draw => 
                            `<div class="mb-1">
                                <span class="badge bg-secondary">${draw.date}</span>
                                <span class="badge rarity-${draw.rarity.toLowerCase()}">${draw.rarity}</span>
                                ${draw.name}
                            </div>`
                        ).join('');
                    } else {
                        recentDrawsDiv.innerHTML = '<p class="text-muted">暂无抽卡记录</p>';
                    }
                } else {
                    alert('未找到用户数据');
                    document.getElementById('userStatsResult').style.display = 'none';
                }
            } catch (error) {
                console.error('查询用户失败:', error);
                alert('查询失败');
            }
        }

        // 查看用户详情
        function viewUserDetails(userId) {
            document.getElementById('userIdInput').value = userId;
            queryUser();
            document.getElementById('achievementUserIdInput').value = userId;
            queryAchievements();
            
            // 滚动到用户查询区域
            document.querySelector('.card:has(#userIdInput)').scrollIntoView({ behavior: 'smooth' });
        }

        // 查询成就
        async function queryAchievements() {
            const userId = document.getElementById('achievementUserIdInput').value.trim();
            if (!userId) {
                alert('请输入用户ID');
                return;
            }
            
            try {
                const response = await fetch(`${API_BASE}/achievements/${userId}`, { headers });
                const data = await response.json();
                
                if (data.success) {
                    document.getElementById('achievementResult').style.display = 'block';
                    
                    // 显示已解锁成就
                    const unlockedDiv = document.getElementById('unlockedAchievements');
                    const achievements = Object.entries(data.achievements);
                    
                    if (achievements.length > 0) {
                        unlockedDiv.innerHTML = achievements.map(([id, info]) => 
                            `<div class="achievement-card">
                                <div class="d-flex justify-content-between align-items-center">
                                    <span>${id}</span>
                                    <span class="badge bg-success">已解锁</span>
                                </div>
                                <small class="text-muted">${info.unlocked_date}</small>
                            </div>`
                        ).join('');
                    } else {
                        unlockedDiv.innerHTML = '<p class="text-muted">暂无已解锁成就</p>';
                    }
                    
                    // 显示成就进度
                    const progress = data.progress;
                    document.getElementById('consecutiveDays').textContent = progress.consecutive_days + ' 天';
                    document.getElementById('noSsrStreak').textContent = progress.no_ssr_streak + ' 次';
                    
                    // 更新进度条
                    const consecutiveProgress = Math.min((progress.consecutive_days / 150) * 100, 100);
                    document.getElementById('consecutiveDaysProgress').style.width = consecutiveProgress + '%';
                    
                    const noSsrProgress = Math.min((progress.no_ssr_streak / 180) * 100, 100);
                    document.getElementById('noSsrStreakProgress').style.width = noSsrProgress + '%';
                } else {
                    alert('未找到用户成就数据');
                    document.getElementById('achievementResult').style.display = 'none';
                }
            } catch (error) {
                console.error('查询成就失败:', error);
                alert('查询失败');
            }
        }

        // 每页记录数
        const RECORDS_PER_PAGE = 20;
        let currentRecords = [];
        let currentPage = 1;

        // 加载每日详细抽卡记录
        async function loadDailyRecords() {
            const date = document.getElementById('recordDateInput').value;
            if (!date) {
                alert('请选择日期');
                return;
            }
            
            try {
                console.log('正在请求每日详细抽卡记录...', date);
                const response = await fetch(`${API_BASE}/records/daily?date=${date}`, { headers });
                console.log('每日详细记录响应状态:', response.status);
                
                if (!response.ok) {
                    const errorText = await response.text();
                    console.error('每日详细记录 API 错误响应:', errorText);
                    throw new Error(`HTTP ${response.status}: ${errorText}`);
                }
                
                const data = await response.json();
                console.log('每日详细记录数据:', data);
                
                if (data.success) {
                    currentRecords = data.records;
                    currentPage = 1;
                    document.getElementById('totalRecordsCount').textContent = data.total_count;
                    displayRecords();
                } else {
                    console.error('每日详细记录 API 返回失败:', data);
                    document.getElementById('dailyRecordsBody').innerHTML = '<tr><td colspan="5" class="text-center">暂无数据</td></tr>';
                    document.getElementById('totalRecordsCount').textContent = '0';
                    document.getElementById('recordsPagination').innerHTML = '';
                }
            } catch (error) {
                console.error('加载每日详细记录失败:', error);
                document.getElementById('dailyRecordsBody').innerHTML = '<tr><td colspan="5" class="text-center">加载失败，请检查令牌</td></tr>';
                document.getElementById('totalRecordsCount').textContent = '0';
                document.getElementById('recordsPagination').innerHTML = '';
            }
        }

        // 显示记录（支持分页）
        function displayRecords() {
            const tbody = document.getElementById('dailyRecordsBody');
            tbody.innerHTML = '';
            
            // 计算分页
            const startIndex = (currentPage - 1) * RECORDS_PER_PAGE;
            const endIndex = Math.min(startIndex + RECORDS_PER_PAGE, currentRecords.length);
            const pageRecords = currentRecords.slice(startIndex, endIndex);
            
            if (pageRecords.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" class="text-center">暂无数据</td></tr>';
                document.getElementById('recordsPagination').innerHTML = '';
                return;
            }
            
            // 显示当前页的记录
            pageRecords.forEach(record => {
                const row = document.createElement('tr');
                
                // 格式化成就解锁信息
                let achievementsHtml = '';
                if (record.unlocked_achievements && record.unlocked_achievements.length > 0) {
                    achievementsHtml = record.unlocked_achievements.map(achievement =>
                        `<span class="badge bg-success me-1">${achievement}</span>`
                    ).join('');
                } else {
                    achievementsHtml = '<span class="text-muted">无</span>';
                }
                
                row.innerHTML = `
                    <td>${record.draw_time}</td>
                    <td>${record.user_id}</td>
                    <td>${record.shikigami_name}</td>
                    <td><span class="badge rarity-${record.rarity.toLowerCase()}">${record.rarity}</span></td>
                    <td>${achievementsHtml}</td>
                `;
                tbody.appendChild(row);
            });
            
            // 更新分页控件
            updatePagination();
        }

        // 更新分页控件
        function updatePagination() {
            const totalPages = Math.ceil(currentRecords.length / RECORDS_PER_PAGE);
            const pagination = document.getElementById('recordsPagination');
            pagination.innerHTML = '';
            
            if (totalPages <= 1) {
                return;
            }
            
            // 上一页按钮
            const prevLi = document.createElement('li');
            prevLi.className = `page-item ${currentPage === 1 ? 'disabled' : ''}`;
            prevLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage - 1})">上一页</a>`;
            pagination.appendChild(prevLi);
            
            // 页码按钮
            const maxVisiblePages = 5;
            let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
            let endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
            
            if (endPage - startPage + 1 < maxVisiblePages) {
                startPage = Math.max(1, endPage - maxVisiblePages + 1);
            }
            
            if (startPage > 1) {
                const firstLi = document.createElement('li');
                firstLi.className = 'page-item';
                firstLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(1)">1</a>`;
                pagination.appendChild(firstLi);
                
                if (startPage > 2) {
                    const ellipsisLi = document.createElement('li');
                    ellipsisLi.className = 'page-item disabled';
                    ellipsisLi.innerHTML = `<a class="page-link" href="#">...</a>`;
                    pagination.appendChild(ellipsisLi);
                }
            }
            
            for (let i = startPage; i <= endPage; i++) {
                const pageLi = document.createElement('li');
                pageLi.className = `page-item ${i === currentPage ? 'active' : ''}`;
                pageLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${i})">${i}</a>`;
                pagination.appendChild(pageLi);
            }
            
            if (endPage < totalPages) {
                if (endPage < totalPages - 1) {
                    const ellipsisLi = document.createElement('li');
                    ellipsisLi.className = 'page-item disabled';
                    ellipsisLi.innerHTML = `<a class="page-link" href="#">...</a>`;
                    pagination.appendChild(ellipsisLi);
                }
                
                const lastLi = document.createElement('li');
                lastLi.className = 'page-item';
                lastLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${totalPages})">${totalPages}</a>`;
                pagination.appendChild(lastLi);
            }
            
            // 下一页按钮
            const nextLi = document.createElement('li');
            nextLi.className = `page-item ${currentPage === totalPages ? 'disabled' : ''}`;
            nextLi.innerHTML = `<a class="page-link" href="#" onclick="changePage(${currentPage + 1})">下一页</a>`;
            pagination.appendChild(nextLi);
        }

        // 切换页面
        function changePage(page) {
            const totalPages = Math.ceil(currentRecords.length / RECORDS_PER_PAGE);
            if (page < 1 || page > totalPages) {
                return;
            }
            currentPage = page;
            displayRecords();
        }
    </script>
</body>
</html>