{% extends "base.html" %}
{% block title %}数据看板 — News Harvester{% endblock %}
{% block extra_head %}
<meta http-equiv="refresh" content="300">
<style>
  .kpi { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin:14px 0; }
  .kpi .card { padding:14px 16px; }
  .kpi .num { font-size:26px; font-weight:700; line-height:1.2; }
  .kpi .sub { color:#888; font-size:12px; margin-top:2px; }
  .chart-svg { width:100%; max-width:800px; height:auto; display:block; }
  .chart-svg .barg rect { opacity:.82; transition:opacity .15s; }
  .chart-svg .barg:hover rect { opacity:1; }
  .chart-svg .axis { font-size:11px; fill:#6a7080; }
  .chart-svg .gline { stroke:#232633; stroke-width:1; }
  .chart-svg .dlabel { font-size:11px; fill:#7a8090; }
  .chart-svg .tlabel { font-size:12px; fill:#aab2c0; font-weight:600; }
  .chart-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-top:18px; }
  .chart-head h2 { margin:0; }
  .legend { display:flex; gap:12px; flex-wrap:wrap; margin-left:auto; font-size:12px; color:#aab2c0; }
  .legend i { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:5px; vertical-align:-1px; }
</style>
{% endblock %}
{% block content %}

<h1>数据看板</h1>
<p style="color:#666;font-size:13px">最近 7 天采集产出统计,每 5 分钟自动刷新 · 文章数=归档并推送成功的篇数</p>

<div class="kpi">
  <div class="card"><div class="label">今日文章</div><div class="num" style="color:#4ec9b0">{{ tot.today_arts }}</div><div class="sub">篇已交付</div></div>
  <div class="card"><div class="label">今日场次</div><div class="num">{{ tot.today_runs }}</div><div class="sub"><span style="color:#6bbb6b">{{ tot.today_ok }} 成功</span> · <span style="color:#e8c34a">{{ tot.today_warn }} 部分</span> · <span style="color:#bb6b6b">{{ tot.today_fail }} 失败</span></div></div>
  <div class="card"><div class="label">7 天文章</div><div class="num">{{ tot.arts }}</div><div class="sub">篇</div></div>
  <div class="card"><div class="label">7 天场次</div><div class="num">{{ tot.runs }}</div><div class="sub"><span style="color:#6bbb6b">{{ tot.ok }} ✓</span> · <span style="color:#e8c34a">{{ tot.warn }} ⚠</span> · <span style="color:#bb6b6b">{{ tot.fail }} ✗</span></div></div>
  <div class="card"><div class="label">7 天成本</div><div class="num">${{ '%.2f'|format(tot.cost) }}</div><div class="sub">全部 provider 合计</div></div>
  <div class="card"><div class="label">当前运行</div>
    {% if active %}<div class="num" style="color:#e8c34a;font-size:20px">{{ active|length }}</div><div class="sub">{{ active|join('、') }}</div>
    {% else %}<div class="num" style="color:#666">0</div><div class="sub">空闲</div>{% endif %}
  </div>
</div>

<div class="chart-head">
  <h2>每日产出</h2>
  <div class="legend">
    {% for s, color, n in sites %}<span><i style="background:{{ color }}"></i>{{ s }} <b style="color:#d4d4d4">{{ n }}</b></span>{% endfor %}
  </div>
</div>
<svg class="chart-svg" viewBox="0 0 760 260" role="img">
  {% for g in grid %}
  <line class="gline" x1="46" x2="750" y1="{{ g.y }}" y2="{{ g.y }}"></line>
  <text class="axis" x="40" y="{{ g.y + 4 }}" text-anchor="end">{{ g.val }}</text>
  {% endfor %}
  {% for b in bars %}
  <g class="barg">
    <title>{{ b.day }} · 共 {{ b.total }} 篇
{% for sg in b.segs %}{{ sg.site }}: {{ sg.v }}
{% endfor %}</title>
    {% if b.total %}<text class="tlabel" x="{{ b.x + b.w / 2 }}" y="{{ b.segs[0].y - 7 }}" text-anchor="middle">{{ b.total }}</text>{% endif %}
    {% for sg in b.segs %}<rect x="{{ sg.x }}" y="{{ sg.y }}" width="{{ b.w }}" height="{{ sg.h }}" rx="2.5" fill="{{ sg.color }}"></rect>{% endfor %}
    <text class="dlabel" x="{{ b.x + b.w / 2 }}" y="252" text-anchor="middle">{{ b.label }}</text>
  </g>
  {% endfor %}
</svg>

<div>
  <div>
    <h2 style="margin-top:0">逐源表现(7 天)</h2>
    <div class="table-wrap">
    <table>
      <thead><tr><th>栏目</th><th>今日</th><th>7天文章</th><th>场次 ✓/⚠/✗</th><th>最近运行</th></tr></thead>
      <tbody>
        {% for r in rows %}
        <tr>
          <td><code>{{ r.name }}</code>{% if r.display and r.display != r.name %} <span style="color:#888">{{ r.display }}</span>{% endif %}</td>
          <td style="font-weight:{{ 'bold' if r.today else 'normal' }}">{{ r.today or '—' }}</td>
          <td>{{ r.d7 }}</td>
          <td>{{ r.runs7 }} · <span style="color:#6bbb6b">{{ r.ok }}</span>/<span style="color:#e8c34a">{{ r.warn }}</span>/<span style="color:#bb6b6b">{{ r.fail }}</span></td>
          <td>{{ r.last_at[5:16] if r.last_at != '—' else '—' }}
            {% if r.last_status == 'SUCCESS' %}<span class="badge ok">✓</span>
            {% elif r.last_status == 'WARNING' %}<span class="badge warn">⚠</span>
            {% elif r.last_status != '—' %}<span class="badge fail">✗</span>{% endif %}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
  </div>

  <div style="margin-top:22px">
    <h2 style="margin-top:0">失败原因 Top(7 天)</h2>
    {% if fail_top %}
    <div class="table-wrap">
    <table>
      <thead><tr><th>类型</th><th>次数</th><th style="width:45%">占比</th></tr></thead>
      <tbody>
        {% for k, v in fail_top %}
        <tr><td><code>{{ k }}</code></td><td>{{ v }}</td>
          <td><div style="background:#e05555;border-radius:2px;height:10px;width:{{ (v * 100 / fail_top[0][1])|round }}%"></div></td></tr>
        {% endfor %}
      </tbody>
    </table>
    </div>
    {% else %}<p style="color:#666">近 7 天无失败记录 🎉</p>{% endif %}
  </div>
</div>

{% endblock %}