<?php
/**
 * HuSNS - 积分等级页面
 */
$currentPage = 'points';
$pageType = 'points';
$bodyClass = 'points-page';
$showBack = true;
$headerTitle = '积分中心';

// 页面特定CSS和JS文件
$pageCssFiles = [$this->themeUrl() . '/app/css/points.css'];
$pageJsFiles = [$this->themeUrl() . '/app/js/points.js'];

$this->assign('pageCssFiles', $pageCssFiles);
$this->assign('pageJsFiles', $pageJsFiles);

$this->setLayout('app');
?>

<div class="points-content">
    <div class="points-header">
        <div class="user-level" id="userLevel">--</div>
        <div class="level-icon" id="levelIcon">⭐</div>
        <div class="user-points" id="userPoints">0</div>
        <div class="points-label">积分</div>
        
        <div class="progress-section">
            <div class="progress-text" id="progressText">距离下一等级还需 0 积分</div>
            <div class="progress-bar">
                <div class="progress-fill" id="progressFill" style="width: 0%"></div>
            </div>
        </div>
    </div>

    <div class="tabs">
        <div class="tab-item active" onclick="showTab('rules')">积分规则</div>
        <div class="tab-item" onclick="showTab('history')">积分记录</div>
        <div class="tab-item" onclick="showTab('levels')">等级列表</div>
    </div>

    <div class="tab-content" id="rulesTab">
        <div class="rules-list" id="rulesList">
            <div class="empty-state">
                <div class="empty-icon"><span class="iconify" data-icon="mdi:loader"></span></div>
                <div class="empty-text">加载中...</div>
            </div>
        </div>
    </div>

    <div class="tab-content" id="historyTab" style="display: none;">
        <div class="logs-list" id="logsList">
            <div class="empty-state">
                <div class="empty-icon"><span class="iconify" data-icon="mdi:loader"></span></div>
                <div class="empty-text">加载中...</div>
            </div>
        </div>
    </div>

    <div class="tab-content" id="levelsTab" style="display: none;">
        <div class="levels-list" id="levelsList">
            <div class="empty-state">
                <div class="empty-icon"><span class="iconify" data-icon="mdi:loader"></span></div>
                <div class="empty-text">加载中...</div>
            </div>
        </div>
    </div>
</div>