{# T28 admin dashboard — Tailwind redesign. Extends the new admin layout. #}
{# Data shape (collect_all_stats) is unchanged; this template only        #}
{# re-skins the eight KPI cards into a 12-column grid.                    #}
{% extends "admin_layout.html" %}

{% block page_title %}Admin dashboard{% endblock %}

{% block breadcrumb %}
  <span class="text-gray-500">Admin</span>
  <span class="px-1.5 text-gray-300">/</span>
  <span class="text-gray-900 font-medium">Dashboard</span>
{% endblock %}

{% macro stat_tile(label, value) -%}
  <div class="bg-blue-50 rounded-md p-4 flex-1 min-w-[120px]">
    <div class="text-xs text-blue-700 uppercase font-medium tracking-wide">{{ label }}</div>
    <div class="text-2xl font-bold text-blue-900 mt-1 tabular-nums">{{ value }}</div>
  </div>
{%- endmacro %}

{% macro empty_state(text) -%}
  <div class="text-sm text-gray-400 italic py-2">{{ text }}</div>
{%- endmacro %}

{% macro card_heading(text) -%}
  <h2 class="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-4">{{ text }}</h2>
{%- endmacro %}

{% block content %}
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

  {# ===================== Volume ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-6" id="card-volume">
    {{ card_heading('Scan Volume') }}
    <div class="flex flex-wrap gap-3">
      {{ stat_tile('Today',      volume.today) }}
      {{ stat_tile('Last 7d',    volume.last_7_days) }}
      {{ stat_tile('Last 30d',   volume.last_30_days) }}
    </div>
  </section>

  {# ===================== Outcomes ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-6" id="card-outcome">
    {{ card_heading('Outcomes') }}
    <div class="flex items-baseline gap-3">
      <div class="text-4xl font-bold text-gray-900 tabular-nums">{{ '%.1f'|format(outcome.success_rate * 100) }}%</div>
      <div class="text-sm text-gray-500">success rate</div>
    </div>
    <div class="text-sm text-gray-500 mt-1">
      {{ outcome.errored_count }} errored / {{ outcome.total_scans }} total
    </div>
    <div class="mt-5">
      <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">Top error reasons</h3>
      {% if not outcome.top_error_reasons %}
        {{ empty_state('No errors recorded.') }}
      {% else %}
        <table class="min-w-full divide-y divide-gray-200 text-sm">
          <thead>
            <tr>
              <th class="text-left font-medium text-gray-500 py-1.5 pr-3">Reason</th>
              <th class="text-right font-medium text-gray-500 py-1.5 pl-3">Count</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            {% for row in outcome.top_error_reasons %}
              <tr class="even:bg-gray-50">
                <td class="py-1.5 pr-3 text-gray-700 max-w-[28em] truncate">{{ row.reason }}</td>
                <td class="py-1.5 pl-3 text-right text-gray-900 tabular-nums">{{ row.count }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% endif %}
    </div>
  </section>

  {# ===================== Cost ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-12" id="card-cost">
    {{ card_heading('Cost') }}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
      {{ stat_tile('Total',     '$' ~ '%.2f'|format(cost.total_usd)) }}
      {{ stat_tile('Today',     '$' ~ '%.2f'|format(cost.today_usd)) }}
      {{ stat_tile('Max / scan', '$' ~ '%.4f'|format(cost.max_per_scan_usd)) }}
      {{ stat_tile('Avg / scan', '$' ~ '%.4f'|format(cost.avg_per_scan_usd)) }}
    </div>
    <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">Prompt cost trend (30 days)</h3>
    {% if not cost.prompt_cost_trend %}
      {{ empty_state('No LLM cost data in the last 30 days.') }}
    {% else %}
      <div class="relative w-full" style="height: 320px;">
        <canvas id="prompt-cost-chart" height="320"></canvas>
      </div>
    {% endif %}
  </section>

  {# ===================== Users ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-6" id="card-users">
    {{ card_heading('Users') }}
    <div class="flex flex-wrap gap-3 mb-5">
      {{ stat_tile('Total users',  users.total_users) }}
      {{ stat_tile('Active (30d)', users.active_30d) }}
    </div>
    <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">Top 5 spenders</h3>
    {% if not users.top_5_spenders %}
      {{ empty_state('No spend recorded yet.') }}
    {% else %}
      <table class="min-w-full divide-y divide-gray-200 text-sm">
        <thead>
          <tr>
            <th class="text-left font-medium text-gray-500 py-1.5 pr-3">User</th>
            <th class="text-right font-medium text-gray-500 py-1.5 px-3">Scans</th>
            <th class="text-right font-medium text-gray-500 py-1.5 pl-3">Spend</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          {% for row in users.top_5_spenders %}
            <tr class="even:bg-gray-50">
              <td class="py-1.5 pr-3 text-gray-700"><code class="text-xs">{{ row.label }}</code></td>
              <td class="py-1.5 px-3 text-right text-gray-900 tabular-nums">{{ row.scan_count }}</td>
              <td class="py-1.5 pl-3 text-right text-gray-900 tabular-nums">${{ '%.4f'|format(row.total_usd) }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </section>

  {# ===================== Sandbox experiments ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-6" id="card-experiment-cost">
    {{ card_heading('Sandbox experiments') }}
    <div class="grid grid-cols-3 gap-3 mb-5">
      {{ stat_tile('Total',  '$' ~ '%.2f'|format(experiment_cost.total_usd)) }}
      {{ stat_tile('Today',  '$' ~ '%.2f'|format(experiment_cost.today_usd)) }}
      {{ stat_tile('Runs',   experiment_cost.experiment_count) }}
    </div>
    <h3 class="text-xs font-semibold text-gray-700 uppercase tracking-wide mb-2">Top experimenters</h3>
    {% if not experiment_cost.top_experimenters %}
      {{ empty_state('No sandbox spend yet.') }}
    {% else %}
      <table class="min-w-full divide-y divide-gray-200 text-sm">
        <thead>
          <tr>
            <th class="text-left font-medium text-gray-500 py-1.5 pr-3">Admin</th>
            <th class="text-right font-medium text-gray-500 py-1.5 px-3">Runs</th>
            <th class="text-right font-medium text-gray-500 py-1.5 pl-3">Spend</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          {% for row in experiment_cost.top_experimenters %}
            <tr class="even:bg-gray-50">
              <td class="py-1.5 pr-3 text-gray-700"><code class="text-xs">{{ row.label }}</code></td>
              <td class="py-1.5 px-3 text-right text-gray-900 tabular-nums">{{ row.experiment_count }}</td>
              <td class="py-1.5 pl-3 text-right text-gray-900 tabular-nums">${{ '%.4f'|format(row.total_usd) }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
    <p class="mt-4">
      <a href="/admin/sandbox/list" class="text-sm text-blue-600 hover:text-blue-800 font-medium">All experiments &rarr;</a>
    </p>
  </section>

  {# ===================== LLM reliability ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-12" id="card-llm-reliability">
    {{ card_heading('LLM reliability') }}
    {% if not llm_reliability.per_prompt %}
      {{ empty_state('No LLM calls recorded yet.') }}
    {% else %}
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
          <thead>
            <tr>
              <th class="text-left font-medium text-gray-500 py-2 pr-3">Prompt</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3">OK</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3">Fail</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3">Retries</th>
              <th class="text-right font-medium text-gray-500 py-2 pl-3">p95 (ms)</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            {% for row in llm_reliability.per_prompt %}
              <tr class="even:bg-gray-50">
                <td class="py-2 pr-3 text-gray-700"><code class="text-xs">{{ row.prompt_name }}</code></td>
                <td class="py-2 px-3 text-right text-gray-900 tabular-nums">{{ row.success_count }}</td>
                <td class="py-2 px-3 text-right {% if row.failure_count > 0 %}text-red-600{% else %}text-gray-900{% endif %} tabular-nums">{{ row.failure_count }}</td>
                <td class="py-2 px-3 text-right text-gray-900 tabular-nums">{{ row.retry_count }}</td>
                <td class="py-2 pl-3 text-right text-gray-900 tabular-nums">{{ '%.0f'|format(row.p95_latency_ms) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>

  {# ===================== Prompt cost ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-12" id="card-prompt-cost">
    {{ card_heading('Prompt cost') }}
    {% if not prompt_cost.per_prompt %}
      {{ empty_state('No LLM cost data recorded yet.') }}
    {% else %}
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 text-sm">
          <thead>
            <tr>
              <th class="text-left font-medium text-gray-500 py-2 pr-3">Prompt</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3">Calls</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3">Avg</th>
              <th class="text-right font-medium text-gray-500 py-2 px-3">Max</th>
              <th class="text-right font-medium text-gray-500 py-2 pl-3">Min</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-100">
            {% for row in prompt_cost.per_prompt %}
              <tr class="even:bg-gray-50">
                <td class="py-2 pr-3 text-gray-700"><code class="text-xs">{{ row.prompt_name }}</code></td>
                <td class="py-2 px-3 text-right text-gray-900 tabular-nums">{{ row.call_count }}</td>
                <td class="py-2 px-3 text-right text-gray-900 tabular-nums">${{ '%.4f'|format(row.avg_usd) }}</td>
                <td class="py-2 px-3 text-right text-gray-900 tabular-nums">${{ '%.4f'|format(row.max_usd) }}</td>
                <td class="py-2 pl-3 text-right text-gray-900 tabular-nums">${{ '%.4f'|format(row.min_usd) }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% endif %}
  </section>

  {# ===================== Top domains ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-6" id="card-top-domains">
    {{ card_heading('Scan type — top domains') }}
    {% if not top_domains %}
      {{ empty_state('No scans yet.') }}
    {% else %}
      <table class="min-w-full divide-y divide-gray-200 text-sm">
        <thead>
          <tr>
            <th class="text-left font-medium text-gray-500 py-1.5 pr-3">Domain</th>
            <th class="text-right font-medium text-gray-500 py-1.5 pl-3">Scans</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          {% for row in top_domains %}
            <tr class="even:bg-gray-50">
              <td class="py-1.5 pr-3 text-gray-700"><code class="text-xs">{{ row.domain }}</code></td>
              <td class="py-1.5 pl-3 text-right text-gray-900 tabular-nums">{{ row.count }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </section>

  {# ===================== Top templates ===================== #}
  <section class="bg-white border border-gray-200 rounded-lg shadow-sm p-6 lg:col-span-6" id="card-top-templates">
    {{ card_heading('Template — top scanned') }}
    {% if not top_templates %}
      {{ empty_state('No scans yet.') }}
    {% else %}
      <table class="min-w-full divide-y divide-gray-200 text-sm">
        <thead>
          <tr>
            <th class="text-left font-medium text-gray-500 py-1.5 pr-3">Template</th>
            <th class="text-right font-medium text-gray-500 py-1.5 pl-3">Scans</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          {% for row in top_templates %}
            <tr class="even:bg-gray-50">
              <td class="py-1.5 pr-3 text-gray-700"><code class="text-xs">{{ row.template }}</code></td>
              <td class="py-1.5 pl-3 text-right text-gray-900 tabular-nums">{{ row.count }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% 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();
  // Light-theme palette tuned for the new Tailwind surface.
  const palette = ['#2563eb', '#ea580c', '#16a34a', '#9333ea', '#ca8a04', '#0891b2', '#dc2626'];
  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) {
    new window.Chart(ctx, {
      type: 'line',
      data: { labels: sortedDates, datasets: datasets },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            ticks: { callback: function (v) { return '$' + Number(v).toFixed(4); } },
          },
        },
        plugins: {
          legend: {
            position: 'bottom',
            maxHeight: 60,
            labels: { boxWidth: 12, font: { size: 11 } },
          },
        },
      },
    });
  }
})();
</script>
{% endif %}
{% endblock %}