{% extends 'grades/base.html' %}
{% block title %}系统监控{% endblock %}
{% block breadcrumb %}<li class="breadcrumb-item active">系统监控</li>{% endblock %}

{% block content %}
<h4 class="mb-4"><i class="bi bi-activity"></i> 系统监控</h4>

<!-- 概览卡片 -->
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="stat-card">
            <div class="stat-value">{{ today_ops }}</div>
            <div class="stat-label"><i class="bi bi-lightning"></i> 今日操作数</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card green">
            <div class="stat-value">{{ total_ops }}</div>
            <div class="stat-label"><i class="bi bi-bar-chart-line"></i> 累计操作数</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card cyan">
            <div class="stat-value">{{ user_count }}</div>
            <div class="stat-label"><i class="bi bi-people"></i> 用户总数</div>
        </div>
    </div>
</div>

<div class="row g-3 mb-4">
    <!-- 近7天操作趋势 -->
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">近 7 天操作趋势</div>
            <div class="card-body">
                <div id="trendChart" style="height:300px;"></div>
            </div>
        </div>
    </div>
    <!-- 模块操作分布 -->
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">模块操作分布</div>
            <div class="card-body">
                <div id="moduleChart" style="height:300px;"></div>
            </div>
        </div>
    </div>
</div>

<!-- 活跃用户排行 -->
<div class="row g-3">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><i class="bi bi-trophy"></i> 活跃用户 Top10</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead><tr><th>排名</th><th>用户</th><th>操作次数</th></tr></thead>
                    <tbody>
                        {% for u in active_users %}
                        <tr>
                            <td>
                                {% if forloop.counter <= 3 %}
                                <span class="badge bg-warning text-dark">{{ forloop.counter }}</span>
                                {% else %}
                                {{ forloop.counter }}
                                {% endif %}
                            </td>
                            <td>{{ u.user__username }}</td>
                            <td><span class="badge bg-primary">{{ u.cnt }}</span></td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="3" class="text-center text-muted py-3">暂无数据</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="card">
            <div class="card-header"><i class="bi bi-pie-chart"></i> 各模块操作统计</div>
            <div class="card-body p-0">
                <table class="table table-hover mb-0">
                    <thead><tr><th>模块</th><th>操作次数</th><th>占比</th></tr></thead>
                    <tbody>
                        {% for s in module_stats %}
                        <tr>
                            <td>{{ s.module }}</td>
                            <td><span class="badge bg-info">{{ s.cnt }}</span></td>
                            <td>
                                <div class="progress" style="height:18px;">
                                    <div class="progress-bar" style="width:{% widthratio s.cnt total_ops 100 %}%">
                                        {% widthratio s.cnt total_ops 100 %}%
                                    </div>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr><td colspan="3" class="text-center text-muted py-3">暂无数据</td></tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script>
(function() {
    // 趋势折线图
    const trendChart = echarts.init(document.getElementById('trendChart'));
    trendChart.setOption({
        tooltip: { trigger: 'axis' },
        xAxis: { type: 'category', data: {{ chart_days|safe }} },
        yAxis: { type: 'value', minInterval: 1 },
        series: [{
            type: 'line', data: {{ chart_counts|safe }},
            smooth: true, areaStyle: { color: 'rgba(78,115,223,0.15)' },
            lineStyle: { color: '#4e73df', width: 3 },
            itemStyle: { color: '#4e73df' },
            label: { show: true, position: 'top' }
        }]
    });

    // 模块分布饼图
    const moduleChart = echarts.init(document.getElementById('moduleChart'));
    const moduleData = [
        {% for s in module_stats %}
        { name: '{{ s.module }}', value: {{ s.cnt }} },
        {% endfor %}
    ];
    moduleChart.setOption({
        tooltip: { trigger: 'item' },
        series: [{
            type: 'pie', radius: ['35%', '65%'],
            data: moduleData,
            label: { formatter: '{b}\n{c}' }
        }]
    });

    window.addEventListener('resize', () => { trendChart.resize(); moduleChart.resize(); });
})();
</script>
{% endblock %}