{% extends "cms/base.html" %}
{% block title %}数据分析 - ARIFU CMS{% endblock %}
{% set active='stats' %}
{% block content %}
<h2 style="margin-bottom:20px;">📊 网站数据分析</h2>

<!-- 概览卡片 -->
<div class="stats">
  <div class="stat-card"><div class="num">{{ stats.total_pv }}</div><div class="label">总浏览量 PV</div></div>
  <div class="stat-card"><div class="num green">{{ stats.total_uv }}</div><div class="label">独立访客 UV</div></div>
  <div class="stat-card"><div class="num orange">{{ stats.avg_duration }}s</div><div class="label">平均停留</div></div>
  <div class="stat-card"><div class="num">{{ stats.today_pv }}</div><div class="label">今日 PV <span style="font-size:11px;color:{{ '#e74c3c' if stats.pv_growth and '+' in stats.pv_growth else '#27ae60' }};">{{ stats.pv_growth }}</span></div></div>
  <div class="stat-card"><div class="num green">{{ stats.today_uv }}</div><div class="label">今日 UV</div></div>
  <div class="stat-card"><div class="num" id="onlineCount" style="color:#e74c3c;">{{ realtime.online }}</div><div class="label">当前在线</div></div>
</div>

<!-- 趋势图 -->
<div class="card">
  <h2>📈 访问趋势（近30天）</h2>
  <div style="position:relative;height:280px;">
    <canvas id="dailyChart"></canvas>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;">
  <!-- 设备分布 -->
  <div class="card">
    <h2>📱 设备分布</h2>
    <div style="height:220px;"><canvas id="deviceChart"></canvas></div>
  </div>
  <!-- 来源分布 -->
  <div class="card">
    <h2>🔗 访问来源</h2>
    <div style="height:220px;"><canvas id="refererChart"></canvas></div>
  </div>
</div>

<!-- 热门页面 -->
<div class="card" style="margin-top:20px;">
  <h2>🏆 热门页面 TOP 20</h2>
  <table>
    <tr><th>#</th><th>页面</th><th>浏览</th><th>访客</th><th>平均停留</th></tr>
    {% for p in top_pages %}
    <tr>
      <td style="color:var(--muted);font-size:12px;">{{ loop.index }}</td>
      <td><code style="font-size:12px;">{{ p.page_url }}</code></td>
      <td><strong style="color:var(--blue);">{{ p.pv }}</strong></td>
      <td>{{ p.uv }}</td>
      <td>{{ p.avg_dur or 0 }}s</td>
    </tr>
    {% endfor %}
  </table>
</div>

<!-- 下载统计（如果有资料库） -->
{% if download_stats %}
<div class="card" style="margin-top:20px;">
  <h2>📥 资料下载统计</h2>
  <div class="stats" style="margin-bottom:16px;">
    <div class="stat-card"><div class="num">{{ download_stats.total }}</div><div class="label">总下载次数</div></div>
    <div class="stat-card"><div class="num green">{{ download_stats.unique_customers }}</div><div class="label">下载客户数</div></div>
  </div>
  <table>
    <tr><th>资料名称</th><th>分类</th><th>下载次数</th></tr>
    {% for r in download_stats.hot %}
    <tr>
      <td>{{ r.title }}</td>
      <td style="color:var(--muted);">{{ r.category }}</td>
      <td><strong style="color:var(--green);">{{ r.download_count }}</strong></td>
    </tr>
    {% endfor %}
  </table>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
renderDailyChart('dailyChart', {{ daily_stats | tojson }});
renderPieChart('deviceChart', {{ device_stats | tojson }});
renderPieChart('refererChart', {{ referer_stats | tojson }});
// 每30秒轮询在线人数
setInterval(pollRealtime, 30000);
</script>
{% endblock %}