{% 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 { display:flex; align-items:stretch; gap:6px; height:200px; margin:10px 0 4px; position:relative; padding-left:44px; }
  .chart .grid { position:absolute; left:44px; right:0; border-top:1px dashed #2a2d37; }
  .chart .grid span { position:absolute; left:-42px; top:-7px; width:36px; text-align:right; font-size:11px; color:#666; }
  .chart .bar { flex:1; display:flex; flex-direction:column-reverse; position:relative; min-width:0; }
  .chart .seg { width:100%; }
  .chart .bar .total { position:absolute; top:-20px; width:100%; text-align:center; font-size:12px; color:#aaa; }
  .chart-labels { display:flex; gap:6px; margin-top:22px; }
  .chart-labels span { flex:1; text-align:center; font-size:11px; color:#666; }
  .legend { display:flex; gap:14px; flex-wrap:wrap; margin:8px 0 0; font-size:12px; color:#aaa; }
  .legend i { display:inline-block; width:10px; height:10px; border-radius:2px; 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>

<h2>每日产出(按站点堆叠)</h2>
<div class="chart">
  {% for g in [100, 75, 50, 25] %}
  <div class="grid" style="bottom:{{ g }}%"><span>{{ (chart_axis_max * g / 100)|int }}</span></div>
  {% endfor %}
  {% for b in bars %}
  <div class="bar" title="{{ b.day }} 共 {{ b.total }} 篇{% for s in b.segs %}&#10;{{ s.site }}: {{ s.v }}{% endfor %}">
    {% if b.total %}<div class="total">{{ b.total }}</div>{% endif %}
    {% for s in b.segs %}<div class="seg" style="height:{{ s.h }}%;background:{{ s.color }}"></div>{% endfor %}
  </div>
  {% endfor %}
</div>
<div class="chart-labels">{% for b in bars %}<span>{{ b.day[5:] }}</span>{% endfor %}</div>
<div class="legend">
  {% for s, color, n in sites %}<span><i style="background:{{ color }}"></i>{{ s }} {{ n }} 篇</span>{% endfor %}
</div>

<div style="display:flex;gap:24px;flex-wrap:wrap;margin-top:22px;align-items:flex-start">
  <div style="flex:3 1 420px;min-width:340px">
    <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="flex:2 1 260px;min-width:240px">
    <h2 style="margin-top:0">失败原因 Top(7 天)</h2>
    {% if fail_top %}
    <div class="table-wrap">
    <table>
      <thead><tr><th>类型</th><th>次数</th><th></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 %}