{% extends "base.html" %}
{% block title %}流量统计 · SOCKS Manager{% endblock %}

{% block content %}
<div class="page-header">
  <h5><i class="bi bi-graph-up"></i> 流量统计</h5>
</div>

<!-- 流量趋势图表 -->
<div class="card mb-3">
  <div class="card-header d-flex justify-content-between align-items-center">
    <span><i class="bi bi-bar-chart"></i> 近 30 天流量趋势</span>
  </div>
  <div class="card-body">
    <canvas id="trafficChart" height="100"></canvas>
  </div>
</div>

<!-- 用户流量排名 -->
<div class="card mb-3">
  <div class="card-header"><span><i class="bi bi-people"></i> 用户流量排名</span></div>
  <div class="card-body p-0">
    <table class="table table-dark table-sm">
      <thead><tr><th>用户名</th><th>入站</th><th>出站</th><th>总计</th><th>流量上限</th><th>用量</th></tr></thead>
      <tbody>
        {% for u in users[:10] %}
        <tr>
          <td>{{ u.username }}</td>
          <td>{{ u.bytes_in_mb }} MB</td>
          <td>{{ u.bytes_out_mb }} MB</td>
          <td><strong>{{ u.total_mb }} MB</strong></td>
          <td>{% if u.limit_mb %}{{ u.limit_mb }} MB{% else %}不限{% endif %}</td>
          <td>
            {% if u.usage_pct is not none %}
            <div class="progress" style="height:18px">
              <div class="progress-bar bg-{{ 'danger' if u.usage_pct>90 else 'warning' if u.usage_pct>70 else 'info' }}"
                   style="width:{{ u.usage_pct }}%;min-width:2rem">{{ "%.0f"|format(u.usage_pct) }}%</div>
            </div>
            {% else %}<span class="text-muted">不限</span>{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if not users %}
    <div class="text-center py-4 text-muted">暂无数据</div>
    {% endif %}
  </div>
</div>

<!-- 实例流量 -->
<div class="card">
  <div class="card-header"><span><i class="bi bi-server"></i> 各实例流量</span></div>
  <div class="card-body p-0">
    <table class="table table-dark table-sm">
      <thead><tr><th>实例</th><th>地址</th><th>入站</th><th>出站</th><th>连接数</th></tr></thead>
      <tbody>
        {% for inst in instances %}
        <tr>
          <td>{{ inst.name }}</td>
          <td><code>{{ inst.host }}:{{ inst.port }}</code></td>
          <td>{{ inst.bytes_in_mb }} MB</td>
          <td>{{ inst.bytes_out_mb }} MB</td>
          <td>{{ inst.total_connections }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% if not instances %}
    <div class="text-center py-4 text-muted">暂无数据</div>
    {% endif %}
  </div>
</div>

{% endblock %}

{% block extra_script %}
<script>
const ctx = document.getElementById('trafficChart');
const data = {{ trend | tojson }};
new Chart(ctx, {
  type: 'bar',
  data: {
    labels: data.map(d => d.date),
    datasets: [
      { label: '入站 (MB)', data: data.map(d => d.bytes_in_mb),
        backgroundColor: 'rgba(129,140,248,.7)' },
      { label: '出站 (MB)', data: data.map(d => d.bytes_out_mb),
        backgroundColor: 'rgba(16,185,129,.7)' },
    ]
  },
  options: {
    responsive: true, maintainAspectRatio: false,
    plugins: { legend: { labels: { color: '#cbd5e1' } } },
    scales: {
      x: { grid: { color: '#262b3d' }, ticks: { color: '#a3acbf', maxTicksLimit: 10 } },
      y: { grid: { color: '#262b3d' }, ticks: { color: '#a3acbf' } },
    },
  }
});
</script>
{% endblock %}