{# T55 admin dashboard — terminal-brutalist re-skin.                       #}
{# Extends the new admin_layout.html. Data shape (collect_all_stats) is    #}
{# unchanged; we render eight KPI panels as stat grids + mono data tables. #}
{% extends "admin_layout.html" %}

{% block page_title %}admin :: dashboard{% endblock %}

{% block breadcrumb %}
  <a href="/admin/dashboard">admin</a><span class="sep">/</span>
  <span class="here">dashboard</span>
{% endblock %}

{% block content %}
<div class="t55-eyebrow">01 — operations</div>
<h1 class="t55-h1">Stats. <span class="em">Eight panels, one truth.</span></h1>
<p class="t55-lede">KPIs aggregated by <code>admin_stats.collect_all_stats</code>. Volume, outcomes, cost, sandbox spend, and prompt-level reliability — all from the live <code>scans</code> + <code>llm_calls</code> tables. UTC throughout.</p>

{# ===================== Volume + Outcomes ===================== #}
<div class="t55-grid-2">
  <section class="t55-card" id="card-volume">
    <div class="t55-card-head"><span class="t55-card-title">scan volume</span></div>
    <div class="t55-stats">
      <div class="t55-stat"><div class="l">today</div><div class="v">{{ volume.today }}</div></div>
      <div class="t55-stat"><div class="l">last 7d</div><div class="v">{{ volume.last_7_days }}</div></div>
      <div class="t55-stat"><div class="l">last 30d</div><div class="v">{{ volume.last_30_days }}</div></div>
    </div>
  </section>

  <section class="t55-card" id="card-outcome">
    <div class="t55-card-head"><span class="t55-card-title">Outcomes</span></div>
    <div class="t55-stats">
      <div class="t55-stat">
        <div class="l">success rate</div>
        <div class="v">{{ '%.1f'|format(outcome.success_rate * 100) }}<small>%</small></div>
        <div class="sub">{{ outcome.errored_count }} errored / {{ outcome.total_scans }} total</div>
      </div>
    </div>
    <h3 class="t55-h3">Top error reasons</h3>
    {% if not outcome.top_error_reasons %}
      <div class="t55-empty">// No errors recorded.</div>
    {% else %}
      <div class="t55-table-wrap">
        <table class="t55-table">
          <thead><tr><th>reason</th><th class="t55-num">count</th></tr></thead>
          <tbody>
            {% for row in outcome.top_error_reasons %}
              <tr>
                <td style="max-width: 28em; overflow: hidden; text-overflow: ellipsis;">{{ row.reason }}</td>
                <td class="t55-num">{{ row.count }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>
</div>

{# ===================== Cost ===================== #}
<section class="t55-card" id="card-cost">
  <div class="t55-card-head"><span class="t55-card-title">cost</span></div>
  <div class="t55-stats">
    <div class="t55-stat"><div class="l">total</div><div class="v">$<span>{{ '%.2f'|format(cost.total_usd) }}</span></div></div>
    <div class="t55-stat"><div class="l">today</div><div class="v">$<span>{{ '%.2f'|format(cost.today_usd) }}</span></div></div>
    <div class="t55-stat"><div class="l">max / scan</div><div class="v">$<span>{{ '%.4f'|format(cost.max_per_scan_usd) }}</span></div></div>
    <div class="t55-stat"><div class="l">avg / scan</div><div class="v">$<span>{{ '%.4f'|format(cost.avg_per_scan_usd) }}</span></div></div>
  </div>
  <h3 class="t55-h3">Prompt cost trend (30 days)</h3>
  {% if not cost.prompt_cost_trend %}
    <div class="t55-empty">// No LLM cost data in the last 30 days.</div>
  {% else %}
    <div style="position: relative; width: 100%; height: 320px; background: var(--bg-3); border: 1px solid var(--rule); padding: 12px;">
      <canvas id="prompt-cost-chart" height="320"></canvas>
    </div>
  {% endif %}
</section>

{# ===================== Users + Sandbox spend ===================== #}
<div class="t55-grid-2">
  <section class="t55-card" id="card-users">
    <div class="t55-card-head"><span class="t55-card-title">users</span></div>
    <div class="t55-stats">
      <div class="t55-stat"><div class="l">total users</div><div class="v">{{ users.total_users }}</div></div>
      <div class="t55-stat"><div class="l">active (30d)</div><div class="v">{{ users.active_30d }}</div></div>
    </div>
    <h3 class="t55-h3">Top 5 spenders</h3>
    {% if not users.top_5_spenders %}
      <div class="t55-empty">// No spend recorded yet.</div>
    {% else %}
      <div class="t55-table-wrap">
        <table class="t55-table">
          <thead><tr><th>user</th><th class="t55-num">scans</th><th class="t55-num">spend</th></tr></thead>
          <tbody>
            {% for row in users.top_5_spenders %}
              <tr>
                <td><code>{{ row.label }}</code></td>
                <td class="t55-num">{{ row.scan_count }}</td>
                <td class="t55-num">${{ '%.4f'|format(row.total_usd) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>

  <section class="t55-card" id="card-experiment-cost">
    <div class="t55-card-head"><span class="t55-card-title">sandbox experiments</span></div>
    <div class="t55-stats">
      <div class="t55-stat"><div class="l">total</div><div class="v">$<span>{{ '%.2f'|format(experiment_cost.total_usd) }}</span></div></div>
      <div class="t55-stat"><div class="l">today</div><div class="v">$<span>{{ '%.2f'|format(experiment_cost.today_usd) }}</span></div></div>
      <div class="t55-stat"><div class="l">runs</div><div class="v">{{ experiment_cost.experiment_count }}</div></div>
    </div>
    <h3 class="t55-h3">Top experimenters</h3>
    {% if not experiment_cost.top_experimenters %}
      <div class="t55-empty">// No sandbox spend yet.</div>
    {% else %}
      <div class="t55-table-wrap">
        <table class="t55-table">
          <thead><tr><th>admin</th><th class="t55-num">runs</th><th class="t55-num">spend</th></tr></thead>
          <tbody>
            {% for row in experiment_cost.top_experimenters %}
              <tr>
                <td><code>{{ row.label }}</code></td>
                <td class="t55-num">{{ row.experiment_count }}</td>
                <td class="t55-num">${{ '%.4f'|format(row.total_usd) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
    <p style="margin-top: 14px;">
      <a href="/admin/experiments" class="t55-btn">all experiments</a>
    </p>
  </section>
</div>

{# ===================== LLM reliability ===================== #}
<section class="t55-card" id="card-llm-reliability">
  <div class="t55-card-head"><span class="t55-card-title">LLM reliability</span></div>
  {% if not llm_reliability.per_prompt %}
    <div class="t55-empty">// No LLM calls recorded yet.</div>
  {% else %}
    <div class="t55-table-wrap">
      <table class="t55-table">
        <thead>
          <tr>
            <th>prompt</th>
            <th class="t55-num">ok</th>
            <th class="t55-num">fail</th>
            <th class="t55-num">retries</th>
            <th class="t55-num">p95 (ms)</th>
          </tr>
        </thead>
        <tbody>
          {% for row in llm_reliability.per_prompt %}
            <tr>
              <td><code>{{ row.prompt_name }}</code></td>
              <td class="t55-num">{{ row.success_count }}</td>
              <td class="t55-num" style="{% if row.failure_count > 0 %}color: var(--danger);{% endif %}">{{ row.failure_count }}</td>
              <td class="t55-num">{{ row.retry_count }}</td>
              <td class="t55-num">{{ '%.0f'|format(row.p95_latency_ms) }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
</section>

{# ===================== Prompt cost ===================== #}
<section class="t55-card" id="card-prompt-cost">
  <div class="t55-card-head"><span class="t55-card-title">Prompt cost</span></div>
  {% if not prompt_cost.per_prompt %}
    <div class="t55-empty">// No LLM cost data recorded yet.</div>
  {% else %}
    <div class="t55-table-wrap">
      <table class="t55-table">
        <thead>
          <tr>
            <th>prompt</th>
            <th class="t55-num">calls</th>
            <th class="t55-num">avg</th>
            <th class="t55-num">max</th>
            <th class="t55-num">min</th>
          </tr>
        </thead>
        <tbody>
          {% for row in prompt_cost.per_prompt %}
            <tr>
              <td><code>{{ row.prompt_name }}</code></td>
              <td class="t55-num">{{ row.call_count }}</td>
              <td class="t55-num">${{ '%.4f'|format(row.avg_usd) }}</td>
              <td class="t55-num">${{ '%.4f'|format(row.max_usd) }}</td>
              <td class="t55-num">${{ '%.4f'|format(row.min_usd) }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% endif %}
</section>

{# ===================== Top domains + templates ===================== #}
<div class="t55-grid-2">
  <section class="t55-card" id="card-top-domains">
    <div class="t55-card-head"><span class="t55-card-title">scan type — top domains</span></div>
    {% if not top_domains %}
      <div class="t55-empty">// No scans yet.</div>
    {% else %}
      <div class="t55-table-wrap">
        <table class="t55-table">
          <thead><tr><th>domain</th><th class="t55-num">scans</th></tr></thead>
          <tbody>
            {% for row in top_domains %}
              <tr><td><code>{{ row.domain }}</code></td><td class="t55-num">{{ row.count }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>

  <section class="t55-card" id="card-top-templates">
    <div class="t55-card-head"><span class="t55-card-title">template — top scanned</span></div>
    {% if not top_templates %}
      <div class="t55-empty">// No scans yet.</div>
    {% else %}
      <div class="t55-table-wrap">
        <table class="t55-table">
          <thead><tr><th>template</th><th class="t55-num">scans</th></tr></thead>
          <tbody>
            {% for row in top_templates %}
              <tr><td><code>{{ row.template }}</code></td><td class="t55-num">{{ row.count }}</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>
</div>
{% endblock %}

{% block scripts %}
{% if cost.prompt_cost_trend %}
<script>
(function(){
  // ``trend`` is a flat list of {date, prompt_name, usd}. Pivot into
  // {prompt_name -> {date -> usd}} so Chart.js renders one line per
  // prompt across the union of dates.
  const trend = {{ cost.prompt_cost_trend | tojson }};
  const byPrompt = {};
  const dates = new Set();
  for (const row of trend) {
    dates.add(row.date);
    if (!byPrompt[row.prompt_name]) byPrompt[row.prompt_name] = {};
    byPrompt[row.prompt_name][row.date] = row.usd;
  }
  const sortedDates = Array.from(dates).sort();
  // Terminal-brutalist palette — accent + complementary mono shades.
  const css = getComputedStyle(document.documentElement);
  const accent = (css.getPropertyValue('--accent') || '#c77dff').trim();
  const palette = [accent, '#7cfc7c', '#ffb454', '#ff6b6b', '#7a8290', '#aab1bb', '#e6e8eb'];
  let i = 0;
  const datasets = Object.entries(byPrompt).map(function (entry) {
    const name = entry[0];
    const byDate = entry[1];
    const color = palette[i % palette.length]; i += 1;
    return {
      label: name,
      data: sortedDates.map(function (d) { return byDate[d] || 0; }),
      borderColor: color,
      backgroundColor: color,
      tension: 0.2,
      pointRadius: 2,
    };
  });
  const ctx = document.getElementById('prompt-cost-chart');
  if (ctx && window.Chart) {
    const gridColor = (css.getPropertyValue('--rule') || '#232930').trim();
    const inkColor = (css.getPropertyValue('--ink-2') || '#aab1bb').trim();
    new window.Chart(ctx, {
      type: 'line',
      data: { labels: sortedDates, datasets: datasets },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            ticks: {
              color: inkColor,
              callback: function (v) { return '$' + Number(v).toFixed(4); },
            },
            grid: { color: gridColor },
          },
          x: {
            ticks: { color: inkColor },
            grid: { color: gridColor },
          },
        },
        plugins: {
          legend: {
            position: 'bottom',
            maxHeight: 60,
            labels: { color: inkColor, boxWidth: 12, font: { family: 'IBM Plex Mono', size: 11 } },
          },
        },
      },
    });
  }
})();
</script>
{% endif %}
{% endblock %}