<?php
/**
 * HuSNS - 数据统计后台页面
 */
?>
<div class="admin-content">
    <div class="admin-header">
        <h1>数据统计分析</h1>
    </div>
    
    <!-- 统计概览卡片 -->
    <div class="stats-cards">
        <div class="stat-card">
            <div class="stat-icon bg-blue">
                <i class="fa fa-users"></i>
            </div>
            <div class="stat-info">
                <div class="stat-value"><?php echo number_format($overview['users']); ?></div>
                <div class="stat-label">总用户数</div>
            </div>
            <div class="stat-trend positive">
                <i class="fa fa-arrow-up"></i> +<?php echo $overview['today_users']; ?> 今日新增
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon bg-green">
                <i class="fa fa-file-text"></i>
            </div>
            <div class="stat-info">
                <div class="stat-value"><?php echo number_format($overview['posts']); ?></div>
                <div class="stat-label">总帖子数</div>
            </div>
            <div class="stat-trend positive">
                <i class="fa fa-arrow-up"></i> +<?php echo $overview['today_posts']; ?> 今日发布
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon bg-purple">
                <i class="fa fa-comment"></i>
            </div>
            <div class="stat-info">
                <div class="stat-value"><?php echo number_format($overview['comments']); ?></div>
                <div class="stat-label">总评论数</div>
            </div>
            <div class="stat-trend positive">
                <i class="fa fa-arrow-up"></i> +<?php echo $overview['today_comments']; ?> 今日评论
            </div>
        </div>
        
        <div class="stat-card">
            <div class="stat-icon bg-orange">
                <i class="fa fa-eye"></i>
            </div>
            <div class="stat-info">
                <div class="stat-value"><?php echo number_format($overview['online_users']); ?></div>
                <div class="stat-label">在线用户</div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- 用户增长趋势 -->
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-header">
                    <h3>用户增长趋势</h3>
                </div>
                <div class="panel-body">
                    <canvas id="userGrowthChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 内容发布趋势 -->
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-header">
                    <h3>内容发布趋势</h3>
                </div>
                <div class="panel-body">
                    <canvas id="contentTrendChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- 用户活跃度分布 -->
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-header">
                    <h3>用户活跃度分布</h3>
                </div>
                <div class="panel-body">
                    <canvas id="activityDistributionChart"></canvas>
                </div>
            </div>
        </div>
        
        <!-- 帖子来源分布 -->
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-header">
                    <h3>帖子来源分布</h3>
                </div>
                <div class="panel-body">
                    <canvas id="postSourceChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- 热门话题 -->
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-header">
                    <h3>热门话题 TOP10</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>排名</th>
                                <th>话题名称</th>
                                <th>帖子数</th>
                                <th>状态</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($hotTopics as $index => $topic): ?>
                            <tr>
                                <td><?php echo $index + 1; ?></td>
                                <td>#<?php echo htmlspecialchars($topic['name']); ?></td>
                                <td><?php echo $topic['post_count']; ?></td>
                                <td>
                                    <?php if ($topic['is_pinned']): ?>
                                    <span class="badge badge-primary">置顶</span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 活跃用户 -->
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-header">
                    <h3>活跃用户 TOP10</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>排名</th>
                                <th>用户</th>
                                <th>帖子数</th>
                                <th>评论数</th>
                                <th>积分</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($activeUsers as $index => $user): ?>
                            <tr>
                                <td><?php echo $index + 1; ?></td>
                                <td>
                                    <img src="<?php echo $user['avatar'] ? $this->uploadUrl($user['avatar']) : $this->assetUrl('images/default-avatar.png'); ?>" 
                                         alt="" class="avatar-xs">
                                    <?php echo htmlspecialchars($user['username']); ?>
                                </td>
                                <td><?php echo $user['post_count']; ?></td>
                                <td><?php echo $user['comment_count']; ?></td>
                                <td><?php echo $user['points']; ?></td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <!-- 举报统计 -->
        <div class="col-md-6">
            <div class="panel">
                <div class="panel-header">
                    <h3>举报统计</h3>
                </div>
                <div class="panel-body">
                    <div class="report-stats-row">
                        <div class="report-stat-item">
                            <div class="report-stat-value"><?php echo $reportStats['total']; ?></div>
                            <div class="report-stat-label">总举报数</div>
                        </div>
                        <div class="report-stat-item pending">
                            <div class="report-stat-value"><?php echo $reportStats['pending']; ?></div>
                            <div class="report-stat-label">待处理</div>
                        </div>
                        <div class="report-stat-item handled">
                            <div class="report-stat-value"><?php echo $reportStats['handled']; ?></div>
                            <div class="report-stat-label">已处理</div>
                        </div>
                        <div class="report-stat-item rejected">
                            <div class="report-stat-value"><?php echo $reportStats['rejected']; ?></div>
                            <div class="report-stat-label">已驳回</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
$(function() {
    // 用户增长趋势图
    var userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
    new Chart(userGrowthCtx, {
        type: 'line',
        data: {
            labels: <?php echo json_encode(array_column($userGrowth, 'date')); ?>,
            datasets: [{
                label: '新用户注册',
                data: <?php echo json_encode(array_column($userGrowth, 'count')); ?>,
                borderColor: '#3B82F6',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
    
    // 内容发布趋势图
    var contentCtx = document.getElementById('contentTrendChart').getContext('2d');
    new Chart(contentCtx, {
        type: 'line',
        data: {
            labels: <?php echo json_encode(array_column($contentTrend, 'date')); ?>,
            datasets: [
                {
                    label: '帖子',
                    data: <?php echo json_encode(array_column($contentTrend, 'posts')); ?>,
                    borderColor: '#22C55E',
                    backgroundColor: 'rgba(34, 197, 94, 0.1)',
                    fill: true,
                    tension: 0.4
                },
                {
                    label: '评论',
                    data: <?php echo json_encode(array_column($contentTrend, 'comments')); ?>,
                    borderColor: '#8B5CF6',
                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
                    fill: true,
                    tension: 0.4
                }
            ]
        },
        options: {
            responsive: true,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });
    
    // 用户活跃度分布图
    var activityCtx = document.getElementById('activityDistributionChart').getContext('2d');
    new Chart(activityCtx, {
        type: 'doughnut',
        data: {
            labels: <?php echo json_encode(array_column($activityDistribution, 'period')); ?>,
            datasets: [{
                data: <?php echo json_encode(array_column($activityDistribution, 'count')); ?>,
                backgroundColor: ['#22C55E', '#3B82F6', '#8B5CF6', '#F59E0B', '#EF4444']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
    
    // 帖子来源分布图
    var sourceCtx = document.getElementById('postSourceChart').getContext('2d');
    new Chart(sourceCtx, {
        type: 'pie',
        data: {
            labels: <?php echo json_encode(array_column($postSourceDistribution, 'type')); ?>,
            datasets: [{
                data: <?php echo json_encode(array_column($postSourceDistribution, 'percentage')); ?>,
                backgroundColor: ['#3B82F6', '#F59E0B', '#22C55E']
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: {
                    position: 'bottom'
                },
                tooltip: {
                    callbacks: {
                        label: function(context) {
                            return context.label + ': ' + context.raw + '%';
                        }
                    }
                }
            }
        }
    });
});
</script>
