// 背景分页功能
(function() {
    // 全局变量
    window.currentPage = 1;
    window.backgroundsData = [];
    window.itemsPerPage = 6;
    
    // 渲染当前页的背景图片
    window.renderBackgrounds = function() {
        const bgGrid = document.getElementById('bgGrid');
        if (!bgGrid || !window.backgroundsData || window.backgroundsData.length === 0) return;
        
        // 计算当前页的数据范围
        const startIndex = (window.currentPage - 1) * window.itemsPerPage;
        const endIndex = Math.min(startIndex + window.itemsPerPage, window.backgroundsData.length);
        const currentPageData = window.backgroundsData.slice(startIndex, endIndex);
        
        // 渲染背景选择器
        bgGrid.innerHTML = currentPageData.map(bg => {
            const isActive = bg.file === localStorage.getItem('currentBg');
            const timestamp = Date.now();
            return `
                <div class="bg-item ${isActive ? 'active' : ''}"
                     onclick="selectBackground('${bg.file}')"
                     data-bg="${bg.file}">
                    <img src="${getApiUrl('/background/' + bg.file)}?t=${timestamp}" alt="${bg.file}">
                    <div class="bg-name">${bg.name || bg.file}</div>
                </div>
            `;
        }).join('');
        
        // 确保网格布局
        bgGrid.style.display = 'grid';
        bgGrid.style.gridTemplateColumns = 'repeat(3, 1fr)';
        bgGrid.style.gridTemplateRows = 'repeat(2, 1fr)';
        bgGrid.style.gap = '8px';
        bgGrid.style.height = '240px';
        bgGrid.style.overflow = 'hidden';
    };
    
    // 渲染分页控件
    window.renderPagination = function() {
        const bgPagination = document.getElementById('bgPagination');
        if (!bgPagination || !window.backgroundsData || window.backgroundsData.length === 0) return;
        
        // 计算总页数
        const totalPages = Math.ceil(window.backgroundsData.length / window.itemsPerPage);
        
        // 如果只有一页，不需要显示分页控件
        if (totalPages <= 1) {
            bgPagination.innerHTML = '';
            return;
        }
        
        // 创建分页按钮HTML
        let paginationHTML = '';
        
        // 上一页按钮
        paginationHTML += `<button class="bg-page-btn" onclick="window.changePage(${window.currentPage - 1})" ${window.currentPage === 1 ? 'disabled' : ''}>上一页</button>`;
        
        // 页码按钮
        for (let i = 1; i <= totalPages; i++) {
            if (totalPages > 7) {
                if (i === 1 || i === totalPages || (i >= window.currentPage - 2 && i <= window.currentPage + 2)) {
                    paginationHTML += `<button class="bg-page-btn ${i === window.currentPage ? 'active' : ''}" onclick="window.changePage(${i})">${i}</button>`;
                } else if (i === window.currentPage - 3 || i === window.currentPage + 3) {
                    paginationHTML += `<span style="color: rgba(255,255,255,0.5); margin: 0 5px;">...</span>`;
                }
            } else {
                paginationHTML += `<button class="bg-page-btn ${i === window.currentPage ? 'active' : ''}" onclick="window.changePage(${i})">${i}</button>`;
            }
        }
        
        // 下一页按钮
        paginationHTML += `<button class="bg-page-btn" onclick="window.changePage(${window.currentPage + 1})" ${window.currentPage === totalPages ? 'disabled' : ''}>下一页</button>`;
        
        // 设置分页控件HTML
        bgPagination.innerHTML = paginationHTML;
    };
    
    // 切换页码
    window.changePage = function(page) {
        const totalPages = Math.ceil(window.backgroundsData.length / window.itemsPerPage);
        
        // 确保页码在有效范围内
        if (page < 1) page = 1;
        if (page > totalPages) page = totalPages;
        
        // 如果页码没有变化，不需要重新渲染
        if (page === window.currentPage) return;
        
        // 更新当前页码
        window.currentPage = page;
        
        // 重新渲染背景图片和分页控件
        window.renderBackgrounds();
        window.renderPagination();
    };
    
    console.log('背景分页功能已初始化');
})();