<?php
ob_start();

// 用户仪表盘 - 显示统计概览
$user_id = $_SESSION['user_id'];
$user = currentUser();

// 统计数据
$apps_count = getUserAppsCount($user_id);
$licenses_count = getUserLicensesCount($user_id);
$open_tickets = getUserOpenTicketsCount($user_id);
$balance = $user['balance'];

// 获取用户当前用户组
$current_group = getUserCurrentGroup($user_id);

// 最近订单
$recent_orders = $db->fetchAll("
    SELECT o.*, 
           CASE 
               WHEN o.type = 'app' THEN (SELECT name FROM apps WHERE id = o.item_id)
               WHEN o.type = 'group' THEN (SELECT name FROM user_groups WHERE id = o.item_id)
               ELSE NULL
           END as item_name
    FROM orders o 
    WHERE o.user_id = $user_id 
    ORDER BY o.id DESC LIMIT 5
");

// 最近工单
$recent_tickets = $db->fetchAll("
    SELECT * FROM tickets 
    WHERE user_id = $user_id 
    ORDER BY id DESC LIMIT 5
");

// 获取公告
$announcements = $db->fetchAll("
    SELECT * FROM announcements 
    WHERE type = 'user_dashboard' AND status = 1 
    AND (start_time IS NULL OR start_time <= NOW()) 
    AND (end_time IS NULL OR end_time >= NOW())
    ORDER BY priority DESC, id DESC LIMIT 3
");
?>

<div class="dashboard-container">
    <!-- 第一行：用户卡片 + 余额卡片 -->
    <div class="top-row">
        <!-- 左侧：用户卡片 -->
        <div class="user-card">
            <div class="user-avatar">
                <img src="<?php echo htmlspecialchars($user['avatar'] ?? '/assets/uploads/default_avatar.png'); ?>" alt="avatar" onerror="this.src='/assets/uploads/default_avatar.png'">
            </div>
            <br><div class="user-info">
                <h3><?php echo htmlspecialchars($user['username']); ?></h3>
                <br><span class="user-email"><?php echo htmlspecialchars($user['email'] ?? ''); ?></span>
                <div class="user-meta">
                    <span class="meta-item">
                        <img src="https://api.iconify.design/mdi:calendar.svg?color=%236b7280" width="14" height="14" alt="">
                        注册：<?php echo date('Y-m-d', strtotime($user['created_at'])); ?>
                    </span>
                    <span class="meta-item">
                        <img src="https://api.iconify.design/mdi:shield-account.svg?color=%236b7280" width="14" height="14" alt="">
                        <?php echo htmlspecialchars($current_group['name']); ?>
                    </span>
                </div>
            </div>
            <div class="user-actions">
                <a href="?page=profile" class="action-icon" title="个人资料">
                    <img src="https://api.iconify.design/mdi:account-edit.svg?color=%23667eea" width="20" height="20" alt="">
                </a>
                <a href="?page=changepwd" class="action-icon" title="修改密码">
                    <img src="https://api.iconify.design/mdi:lock.svg?color=%23667eea" width="20" height="20" alt="">
                </a>
            </div>
        </div>
        
        <!-- 右侧：余额卡片 -->
        <div class="balance-card">
            <div class="balance-icon">
                <img src="https://api.iconify.design/mdi:wallet.svg?color=%23f59e0b" width="32" height="32" alt="">
            </div>
            <div class="balance-info">
                <span class="balance-label">账户余额</span>
                <span class="balance-value">¥<?php echo number_format($balance, 2); ?></span>
                <?php if ($current_group['discount'] < 100): ?>
                    <span class="discount-tag">
                        <img src="https://api.iconify.design/mdi:percent.svg?color=%23f59e0b" width="10" height="10" alt="">
                        <?php echo $current_group['discount']; ?>折优惠
                    </span>
                <?php endif; ?>
            </div>
            <a href="?page=recharge" class="btn-recharge">
                <img src="https://api.iconify.design/mdi:plus.svg?color=%23f59e0b" width="16" height="16" alt="">
                充值
            </a>
        </div>
    </div>
    
    <!-- 第二行：统计数据 -->
    <div class="stats-row">
        <div class="stat-item">
            <div class="stat-icon">
                <img src="https://api.iconify.design/mdi:application.svg?color=%23667eea" width="24" height="24" alt="">
            </div>
            <div class="stat-content">
                <span class="stat-value"><?php echo $apps_count; ?></span>
                <span class="stat-label">授权应用</span>
            </div>
        </div>
        <div class="stat-item">
            <div class="stat-icon">
                <img src="https://api.iconify.design/mdi:key.svg?color=%23f59e0b" width="24" height="24" alt="">
            </div>
            <div class="stat-content">
                <span class="stat-value"><?php echo $licenses_count; ?></span>
                <span class="stat-label">授权码</span>
            </div>
        </div>
        <div class="stat-item">
            <div class="stat-icon">
                <img src="https://api.iconify.design/mdi:ticket.svg?color=%23ef4444" width="24" height="24" alt="">
            </div>
            <div class="stat-content">
                <span class="stat-value"><?php echo $open_tickets; ?></span>
                <span class="stat-label">待处理工单</span>
            </div>
        </div>
        <div class="stat-item">
            <div class="stat-icon">
                <img src="https://api.iconify.design/mdi:star.svg?color=%23fbbf24" width="24" height="24" alt="">
            </div>
            <div class="stat-content">
                <span class="stat-value"><?php echo $current_group['discount']; ?>折</span>
                <span class="stat-label">购物折扣</span>
            </div>
        </div>
    </div>
    
    <!-- 第三行：快捷菜单 + 最近订单 -->
    <div class="middle-row">
        <!-- 左侧：快捷菜单 -->
        <div class="quick-menu-card">
            <div class="card-header">
                <h3>
                    <img src="https://api.iconify.design/mdi:menu.svg?color=%23667eea" width="20" height="20" style="margin-right: 8px;" alt="">
                    快捷菜单
                </h3>
            </div>
            <div class="quick-menu-grid">
                <a href="?page=buy_app" class="quick-menu-item">
                    <div class="menu-icon">
                        <img src="https://api.iconify.design/mdi:cart.svg?color=%23667eea" width="24" height="24" alt="">
                    </div>
                    <span>购买应用</span>
                </a>
                <a href="?page=buy_group" class="quick-menu-item">
                    <div class="menu-icon">
                        <img src="https://api.iconify.design/mdi:account-group.svg?color=%238b5cf6" width="24" height="24" alt="">
                    </div>
                    <span>购买会员</span>
                </a>
                <a href="?page=licenses" class="quick-menu-item">
                    <div class="menu-icon">
                        <img src="https://api.iconify.design/mdi:key.svg?color=%23f59e0b" width="24" height="24" alt="">
                    </div>
                    <span>授权管理</span>
                </a>
                <a href="?page=tickets" class="quick-menu-item">
                    <div class="menu-icon">
                        <img src="https://api.iconify.design/mdi:ticket.svg?color=%23ef4444" width="24" height="24" alt="">
                    </div>
                    <span>工单系统</span>
                </a>
                <a href="?page=recharge" class="quick-menu-item">
                    <div class="menu-icon">
                        <img src="https://api.iconify.design/mdi:wallet-plus.svg?color=%2310b981" width="24" height="24" alt="">
                    </div>
                    <span>余额充值</span>
                </a>
                <a href="?page=apps" class="quick-menu-item">
                    <div class="menu-icon">
                        <img src="/assets/svg/apps.svg" width="24" height="24" alt="">
                    </div>
                    <span>我的应用</span>
                </a>
                <a href="javascript:;" onclick="showDeviceQrcode()" class="quick-menu-item">
    <div class="menu-icon">
        <img src="https://api.iconify.design/mdi:qrcode-scan.svg?color=%23667eea" width="24" height="24" alt="">
    </div>
    <span>扫码登录</span>
</a>
            </div>
        </div>
        
        <!-- 右侧：最近订单 -->
        <div class="recent-orders-card">
            <div class="card-header">
                <h3>
                    <img src="https://api.iconify.design/mdi:package-variant.svg?color=%23667eea" width="20" height="20" style="margin-right: 8px;" alt="">
                    最近订单
                </h3>
                <a href="?page=orders" class="btn-link">
                    查看全部
                    <img src="https://api.iconify.design/mdi:arrow-right.svg?color=%23667eea" width="16" height="16" alt="">
                </a>
            </div>
            <div class="orders-list">
                <?php if (empty($recent_orders)): ?>
                    <div class="empty-row">
                        <img src="https://api.iconify.design/mdi:package-variant-closed.svg?color=%239ca3af" width="32" height="32" alt="">
                        <p>暂无订单</p>
                        <a href="?page=buy_app" class="btn-small">去购物</a>
                    </div>
                <?php else: ?>
                    <?php foreach ($recent_orders as $order): ?>
                        <div class="order-item">
                            <div class="order-icon">
                                <?php if ($order['type'] == 'app'): ?>
                                    <img src="https://api.iconify.design/mdi:application.svg?color=%23667eea" width="20" height="20" alt="">
                                <?php elseif ($order['type'] == 'group'): ?>
                                    <img src="https://api.iconify.design/mdi:account-group.svg?color=%238b5cf6" width="20" height="20" alt="">
                                <?php else: ?>
                                    <img src="https://api.iconify.design/mdi:wallet.svg?color=%2310b981" width="20" height="20" alt="">
                                <?php endif; ?>
                            </div>
                            <div class="order-info">
                                <div class="order-name"><?php echo htmlspecialchars($order['item_name'] ?: ($order['type'] == 'recharge' ? '余额充值' : '未知商品')); ?></div>
                                <div class="order-meta">
                                    <span class="order-amount">¥<?php echo number_format($order['amount'], 2); ?></span>
                                    <span class="order-status status-<?php echo $order['status']; ?>">
                                        <span class="status-dot"></span>
                                        <?php 
                                        $status_map = ['pending' => '待支付', 'paid' => '已支付', 'cancelled' => '已取消'];
                                        echo $status_map[$order['status']] ?? $order['status'];
                                        ?>
                                    </span>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
    
    <!-- 第四行：最近工单 + 公告须知 -->
    <div class="bottom-row">
        <!-- 左侧：最近工单 -->
        <div class="recent-tickets-card">
            <div class="card-header">
                <h3>
                    <img src="https://api.iconify.design/mdi:ticket.svg?color=%23667eea" width="20" height="20" style="margin-right: 8px;" alt="">
                    最近工单
                </h3>
                <a href="?page=tickets" class="btn-link">
                    查看全部
                    <img src="https://api.iconify.design/mdi:arrow-right.svg?color=%23667eea" width="16" height="16" alt="">
                </a>
            </div>
            <div class="tickets-list">
                <?php if (empty($recent_tickets)): ?>
                    <div class="empty-row">
                        <img src="https://api.iconify.design/mdi:ticket-outline.svg?color=%239ca3af" width="32" height="32" alt="">
                        <p>暂无工单</p>
                        <button class="btn-small" onclick="document.getElementById('newTicketBtn')?.click()">新建工单</button>
                    </div>
                <?php else: ?>
                    <?php foreach ($recent_tickets as $ticket): ?>
                        <div class="ticket-item">
                            <div class="ticket-icon">
                                <img src="https://api.iconify.design/mdi:ticket.svg?color=%23667eea" width="20" height="20" alt="">
                            </div>
                            <div class="ticket-info">
                                <a href="?page=ticket_view&id=<?php echo $ticket['id']; ?>" class="ticket-title">
                                    <?php echo htmlspecialchars($ticket['title']); ?>
                                </a>
                                <div class="ticket-meta">
                                    <span class="ticket-status status-<?php echo $ticket['status']; ?>">
                                        <span class="status-dot"></span>
                                        <?php 
                                        $status_map = ['open' => '待处理', 'processing' => '处理中', 'closed' => '已关闭'];
                                        echo $status_map[$ticket['status']] ?? $ticket['status'];
                                        ?>
                                    </span>
                                    <span class="ticket-time">
                                        <img src="https://api.iconify.design/mdi:clock-outline.svg?color=%236b7280" width="12" height="12" alt="">
                                        <?php echo date('m-d H:i', strtotime($ticket['created_at'])); ?>
                                    </span>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
        
        <!-- 右侧：公告须知 -->
        <div class="announcement-card">
            <div class="card-header">
                <h3>
                    <img src="https://api.iconify.design/mdi:bullhorn.svg?color=%23667eea" width="20" height="20" style="margin-right: 8px;" alt="">
                    公告须知
                </h3>
            </div>
            <div class="announcement-list">
                <?php if (empty($announcements)): ?>
                    <div class="empty-row">
                        <img src="https://api.iconify.design/mdi:bullhorn-outline.svg?color=%239ca3af" width="32" height="32" alt="">
                        <p>暂无公告</p>
                    </div>
                <?php else: ?>
                    <?php foreach ($announcements as $announce): ?>
                        <div class="announce-item" onclick="showAnnouncement(<?php echo htmlspecialchars(json_encode($announce)); ?>)">
                            <div class="announce-icon">
                                <img src="https://api.iconify.design/mdi:bullhorn.svg?color=%23f59e0b" width="16" height="16" alt="">
                            </div>
                            <div class="announce-content">
                                <div class="announce-title"><?php echo htmlspecialchars($announce['title']); ?></div>
                                <div class="announce-time">
                                    <img src="https://api.iconify.design/mdi:clock-outline.svg?color=%236b7280" width="12" height="12" alt="">
                                    <?php echo date('m-d H:i', strtotime($announce['created_at'])); ?>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</div>

<!-- 公告详情弹窗 -->
<div id="announcementDetailModal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="announceTitle">公告详情</h3>
            <button type="button" class="modal-close" onclick="closeAnnounceModal()">
                <img src="https://api.iconify.design/mdi:close.svg?color=%239ca3af" width="20" height="20" alt="">
            </button>
        </div>
        <div class="modal-body">
            <div id="announceContent"></div>
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" onclick="closeAnnounceModal()">关闭</button>
        </div>
    </div>
</div>

<style>
/* 基础变量 */
:root {
    --primary-color: #667eea;
    --primary-hover: #5a67d8;
    --danger-color: #ef4444;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border-color: #e5e7eb;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
}

.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4px;
}

/* 第一行：用户卡片 + 余额卡片 */
.top-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* 用户卡片 */
.user-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 20px;
}
.user-avatar img {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--primary-light);
}
.user-info {
    flex: 1;
}
.user-info h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 4px;
}
.user-email {
    font-size: 14px;
    color: var(--text-muted);
}
.user-meta {
    display: flex;
    gap: 16px;
    margin-top: 10px;
}
.meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.user-actions {
    display: flex;
    gap: 8px;
}
.action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}
.action-icon:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
}

/* 余额卡片 */
.balance-card {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    overflow: hidden;
}
.balance-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 150px;
    height: 150px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}
.balance-icon {
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.balance-info {
    flex: 1;
    position: relative;
    z-index: 1;
}
.balance-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}
.balance-value {
    font-size: 32px;
    font-weight: 700;
    color: white;
    line-height: 1.2;
}
.discount-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.25);
    color: white;
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 12px;
    margin-top: 6px;
}
.btn-recharge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: white;
    color: #d97706;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: all 0.2s;
}
.btn-recharge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 第二行：统计数据 */
.stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}
.stat-item {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.2s;
    box-shadow: var(--shadow-sm);
}
.stat-item:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(102, 126, 234, 0.05) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.stat-content {
    display: flex;
    flex-direction: column;
}
.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.stat-label {
    font-size: 13px;
    color: var(--text-muted);
}

/* 第三行：快捷菜单 + 最近订单 */
.middle-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* 快捷菜单 */
.quick-menu-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}
.card-header h3 {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.btn-link {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
}
.quick-menu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.quick-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all 0.2s;
}
.quick-menu-item:hover {
    background: var(--primary-light);
    transform: translateY(-2px);
}
.menu-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}
.quick-menu-item span {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 500;
}

/* 最近订单 */
.recent-orders-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.orders-list {
    max-height: 280px;
    overflow-y: auto;
}
.order-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}
.order-item:last-child {
    border-bottom: none;
}
.order-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.order-info {
    flex: 1;
}
.order-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.order-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.order-amount {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}
.order-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 30px;
}
.status-pending {
    background: #fef3c7;
    color: #92400e;
}
.status-paid {
    background: #d1fae5;
    color: #065f46;
}
.status-cancelled {
    background: #fee2e2;
    color: #991b1b;
}

/* 第四行：最近工单 + 公告须知 */
.bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 最近工单 */
.recent-tickets-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.tickets-list {
    max-height: 280px;
    overflow-y: auto;
}
.ticket-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
}
.ticket-item:last-child {
    border-bottom: none;
}
.ticket-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ticket-info {
    flex: 1;
}
.ticket-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    text-decoration: none;
    margin-bottom: 4px;
    display: block;
}
.ticket-title:hover {
    color: var(--primary-color);
}
.ticket-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ticket-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 30px;
}
.status-open {
    background: #fef3c7;
    color: #92400e;
}
.status-processing {
    background: #d1fae5;
    color: #065f46;
}
.status-closed {
    background: #e5e7eb;
    color: #4b5563;
}
.status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.status-open .status-dot {
    background: #f59e0b;
}
.status-processing .status-dot {
    background: #10b981;
}
.status-closed .status-dot {
    background: #6b7280;
}
.ticket-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

/* 公告须知 */
.announcement-card {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 20px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}
.announcement-list {
    max-height: 280px;
    overflow-y: auto;
}
.announce-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s;
}
.announce-item:hover {
    background: var(--bg-secondary);
    margin: 0 -12px;
    padding: 14px 12px;
    border-radius: var(--radius-sm);
}
.announce-item:last-child {
    border-bottom: none;
}
.announce-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: #fef3c7;
    display: flex;
    align-items: center;
    justify-content: center;
}
.announce-content {
    flex: 1;
}
.announce-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.announce-time {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
}

/* 空状态 */
.empty-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
}
.empty-row p {
    color: var(--text-muted);
    font-size: 14px;
    margin: 8px 0 12px;
}
.btn-small {
    display: inline-block;
    padding: 6px 16px;
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-size: 13px;
    border: none;
    cursor: pointer;
}

/* 弹窗 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.modal-content {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    max-height: 70vh;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.modal-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
}
.modal-body {
    padding: 24px;
    max-height: 50vh;
    overflow-y: auto;
}
.modal-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
}
.btn {
    padding: 10px 24px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: none;
}
.btn-primary {
    background: var(--primary-color);
    color: white;
}

/* 响应式 */
@media (max-width: 1024px) {
    .top-row {
        grid-template-columns: 1fr;
    }
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .stats-row {
        grid-template-columns: 1fr;
    }
    .middle-row,
    .bottom-row {
        grid-template-columns: 1fr;
    }
    .user-card {
        flex-wrap: wrap;
    }
    .user-actions {
        width: 100%;
        justify-content: flex-end;
    }
    .balance-card {
        flex-wrap: wrap;
    }
    .btn-recharge {
        width: 100%;
        justify-content: center;
    }
    .quick-menu-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

<script>
// 优先级标签映射
const priority_map_label = {
    'low': '低',
    'medium': '中',
    'high': '高'
};

// 显示公告详情
function showAnnouncement(announce) {
    const modal = document.getElementById('announcementDetailModal');
    document.getElementById('announceTitle').textContent = announce.title;
    document.getElementById('announceContent').innerHTML = announce.content;
    modal.style.display = 'flex';
    
    // 记录已读
    fetch('/api/mark_announcement_read.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `id=${announce.id}`
    });
}

function closeAnnounceModal() {
    document.getElementById('announcementDetailModal').style.display = 'none';
}

// 点击背景关闭
document.getElementById('announcementDetailModal')?.addEventListener('click', function(e) {
    if (e.target === this) {
        this.style.display = 'none';
    }
});
</script>
<!-- 扫码登录弹窗 -->
<div id="deviceQrcodeModal" class="modal" style="display: none;">
    <div class="modal-content" style="max-width: 360px;">
        <div class="modal-header">
            <h3>
                <img src="https://api.iconify.design/mdi:qrcode-scan.svg?color=%23667eea" width="22" height="22" style="margin-right: 8px;" alt="">
                扫码登录
            </h3>
            <button type="button" class="modal-close" onclick="closeDeviceQrcodeModal()">
                <img src="https://api.iconify.design/mdi:close.svg?color=%239ca3af" width="20" height="20" alt="">
            </button>
        </div>
        <div class="modal-body" style="text-align: center; padding: 24px;">
            <p style="color: var(--text-secondary); font-size: 13px; margin-bottom: 16px;">
                使用手机扫描二维码，即可在手机上登录同一账号
            </p>
            <div id="deviceQrcodeContainer" style="display: flex; justify-content: center; margin-bottom: 16px;">
                <div id="deviceQrcode" style="width: 200px; height: 200px; background: #f8fafc; border-radius: 16px; display: flex; align-items: center; justify-content: center;">
                    <img src="https://api.iconify.design/mdi:loading.svg?color=%2394a3b8" width="40" height="40" style="animation: spin 1s linear infinite;" alt="">
                </div>
            </div>
            <div id="deviceQrcodeStatus" style="font-size: 14px; color: var(--text-secondary); min-height: 40px;">
                等待扫描...
            </div>
            <div style="display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;">
                <img src="https://api.iconify.design/mdi:clock-outline.svg?color=%2394a3b8" width="14" height="14" alt="">
                <span id="deviceQrcodeCountdown" style="font-size: 12px; color: var(--text-muted);">30秒后刷新</span>
                <a href="javascript:;" onclick="refreshDeviceQrcode()" style="color: #667eea; font-size: 12px; text-decoration: none;">刷新</a>
            </div>
        </div>
    </div>
</div>

<script>
let deviceQrcodeTimer = null;
let deviceQrcodeCountdown = 30;
let deviceQrcodeToken = null;
let deviceQrcodePolling = null;
let deviceQrcodeInstance = null;

function showDeviceQrcode() {
    document.getElementById('deviceQrcodeModal').style.display = 'flex';
    generateDeviceQrcode();
}

function closeDeviceQrcodeModal() {
    document.getElementById('deviceQrcodeModal').style.display = 'none';
    if (deviceQrcodePolling) clearInterval(deviceQrcodePolling);
    if (deviceQrcodeTimer) clearInterval(deviceQrcodeTimer);
}

function generateDeviceQrcode() {
    const container = document.getElementById('deviceQrcode');
    const statusEl = document.getElementById('deviceQrcodeStatus');
    
    container.innerHTML = '<img src="https://api.iconify.design/mdi:loading.svg?color=%2394a3b8" width="40" height="40" style="animation: spin 1s linear infinite;" alt="">';
    
    fetch('/api/qrcode_generate.php')
        .then(res => res.json())
        .then(data => {
            if (data.code === 0) {
                deviceQrcodeToken = data.token;
                container.innerHTML = '';
                deviceQrcodeInstance = new QRCode(container, {
                    text: data.qrcode_url,
                    width: 200,
                    height: 200,
                    colorDark: '#1f2937',
                    colorLight: '#ffffff',
                    correctLevel: QRCode.CorrectLevel.M
                });
                statusEl.innerHTML = '<img src="https://api.iconify.design/mdi:cellphone.svg?color=%23667eea" width="16" height="16" style="vertical-align: middle; margin-right: 4px;">请使用手机扫描二维码';
                startDeviceQrcodePolling();
                startDeviceQrcodeCountdown();
            } else {
                container.innerHTML = '<span style="color: #ef4444;">生成失败</span>';
            }
        })
        .catch(() => {
            container.innerHTML = '<span style="color: #ef4444;">网络错误</span>';
        });
}

function startDeviceQrcodeCountdown() {
    deviceQrcodeCountdown = 30;
    const countdownEl = document.getElementById('deviceQrcodeCountdown');
    if (deviceQrcodeTimer) clearInterval(deviceQrcodeTimer);
    deviceQrcodeTimer = setInterval(() => {
        deviceQrcodeCountdown--;
        countdownEl.textContent = deviceQrcodeCountdown + '秒后刷新';
        if (deviceQrcodeCountdown <= 0) {
            clearInterval(deviceQrcodeTimer);
            refreshDeviceQrcode();
        }
    }, 1000);
}

function refreshDeviceQrcode() {
    if (deviceQrcodePolling) clearInterval(deviceQrcodePolling);
    if (deviceQrcodeTimer) clearInterval(deviceQrcodeTimer);
    generateDeviceQrcode();
}

function startDeviceQrcodePolling() {
    let count = 0;
    const maxCount = 150;
    const statusEl = document.getElementById('deviceQrcodeStatus');
    
    if (deviceQrcodePolling) clearInterval(deviceQrcodePolling);
    
    deviceQrcodePolling = setInterval(() => {
        count++;
        if (!deviceQrcodeToken) return;
        
        fetch('/api/qrcode_status.php?token=' + deviceQrcodeToken)
            .then(res => res.json())
            .then(data => {
                if (data.status === 'scanned') {
                    statusEl.innerHTML = '<img src="https://api.iconify.design/mdi:check-circle.svg?color=%2310b981" width="16" height="16" style="vertical-align: middle; margin-right: 4px;">已扫描，请在手机上确认';
                    statusEl.style.color = '#10b981';
                } else if (data.status === 'confirmed') {
                    clearInterval(deviceQrcodePolling);
                    clearInterval(deviceQrcodeTimer);
                    statusEl.innerHTML = '<img src="https://api.iconify.design/mdi:check-circle.svg?color=%2310b981" width="16" height="16" style="vertical-align: middle; margin-right: 4px;">手机端登录成功！';
                    setTimeout(() => {
                        closeDeviceQrcodeModal();
                    }, 1500);
                } else if (data.status === 'expired') {
                    statusEl.innerHTML = '<span style="color: #ef4444;">二维码已过期</span>';
                }
                if (count >= maxCount) {
                    clearInterval(deviceQrcodePolling);
                }
            });
    }, 2000);
}
</script>