{# Audit dashboard - adapted from governor_web/templates/dashboard/index.html
   @ 19455c57c5a9. Same layout grammar (ui-shell → ui-page-header → stat
   cards → main grid with cost drivers + active issues panes) so the
   styling matches governor-web 1:1. The audit package's empty-state
   redirect lives at the route level, so this template only renders
   when there is data to show. #}
{% extends "layout.html" %}

{% block content %}
<section class="ui-shell">
  <div class="ui-page-header flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
    <div>
      <h1 class="ui-page-title">Dashboard</h1>
    </div>
    <a href="/admin/configurations" class="text-sm text-brand-500 dark:text-brand-300 hover:underline whitespace-nowrap">Configuration &amp; re-scan &rarr;</a>
  </div>

  {# ── Headline card - single dollar value that answers
     "what is Governor telling me to act on?". flagged_spend is the
     sum of cached job cost across jobs with ≥1 active opportunity,
     deduped by job_id. The "Review opportunities" CTA turns this
     from a passive report into an actionable workflow surface. #}
  {% if totals.flagged_spend and totals.flagged_spend > 0 %}
  <div class="mt-6 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6 flex flex-col md:flex-row md:items-center md:justify-between gap-4">
    <div>
      <p class="text-sm font-medium uppercase tracking-wider text-amber-600 dark:text-amber-300">Optimisable spend</p>
      <p class="mt-2 text-4xl font-semibold text-slate-900 dark:text-slate-100">{{ totals.flagged_spend | format_usd }}</p>
      <p class="mt-2 text-sm text-slate-500 dark:text-slate-400">
        Across {{ "{:,}".format(totals.total_issues) }} flagged finding{{ "s" if totals.total_issues != 1 else "" }}
        {% if totals.total_cost_usd and totals.flagged_spend %}
        · {{ "%.0f" | format(totals.flagged_spend / totals.total_cost_usd * 100) }}% of scanned spend
        {% endif %}
      </p>
    </div>
    <a href="/opportunities" class="inline-flex items-center gap-2 px-5 py-2.5 bg-brand-500 hover:bg-brand-600 dark:bg-brand-400 dark:hover:bg-brand-300 text-white dark:text-slate-900 text-sm font-semibold rounded-full transition-colors whitespace-nowrap">
      Review opportunities
      <span aria-hidden="true">&rarr;</span>
    </a>
  </div>
  {% endif %}

  {# ── Next actions - top three destination tables ranked by
     *aggregated* cost across all flagged executions, not per-execution
     cost. A model that ran 20 times at $10 ($200 total) outranks a
     one-off $100 query. Skipped when fewer than two qualifying
     tables have an opportunity_id (avoid showing a stunted list). #}
  {% if next_actions and next_actions | length >= 2 %}
  {% from "components/_section_title.html" import section_title %}
  <div class="mt-4 border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-6">
    {{ section_title(
         "Next actions",
         description="The three destination tables with the highest <em>aggregated</em> cost across every flagged execution. Acting on these first delivers the largest reduction in optimisable spend."
    ) }}
    <ol class="mt-4 space-y-2">
      {% for j in next_actions %}
      <li>
        <a href="/opportunities/{{ j.opportunity_id }}" class="flex items-center justify-between gap-4 px-3 py-2 -mx-3 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors group">
          <span class="flex items-center gap-3 min-w-0">
            <span class="text-sm font-mono font-semibold text-slate-400 dark:text-slate-500 w-4">{{ loop.index }}</span>
            <span class="min-w-0">
              <span class="block truncate text-sm font-mono text-slate-900 dark:text-slate-100">{{ j.destination_dataset }}.{{ j.destination_object }}</span>
              <span class="block text-sm text-slate-500 dark:text-slate-400">
                ran {{ j.execution_count }} time{{ "s" if j.execution_count != 1 else "" }}
                {% if j.issue_count > 0 %} · {{ j.issue_count }} issue{{ "s" if j.issue_count != 1 else "" }}{% endif %}
                {% if j.suggestion_count > 0 %} · {{ j.suggestion_count }} suggestion{{ "s" if j.suggestion_count != 1 else "" }}{% endif %}
              </span>
            </span>
          </span>
          <span class="flex items-center gap-3 whitespace-nowrap">
            <span class="text-sm font-semibold text-slate-900 dark:text-slate-100">{{ j.cost_usd | format_usd }}</span>
            <span class="text-slate-400 dark:text-slate-600 group-hover:text-brand-500 dark:group-hover:text-brand-300 transition-colors" aria-hidden="true">&rarr;</span>
          </span>
        </a>
      </li>
      {% endfor %}
    </ol>
  </div>
  {% endif %}

  {# ── Stat cards (secondary, supporting context to the headline) ── #}
  <div class="mt-4">
  {% include "dashboard/_cost_summary.html" %}
  </div>

  {# ── Main grid: bar chart + cost drivers ──
     The "Active Issues" rule-type breakdown was removed - issues are
     listed (and filterable) on /opportunities, so a duplicate card
     here was just extra scrolling. #}
  <div class="mt-8 grid gap-6 lg:grid-cols-2">
    <div class="lg:col-span-2">
      {% include "dashboard/_trend_chart.html" %}
    </div>
    <div class="lg:col-span-2">
      {% include "dashboard/_cost_drivers.html" %}
    </div>
    {# Top Failed Jobs widget removed - failed jobs don't carry direct
       on-demand BigQuery cost (BigQuery refunds bytes-billed on most
       failure modes), and a second 10-row table on the dashboard
       diluted the cost-first narrative. Reliability detail lives on
       /failures (sidebar nav) where it belongs. #}
  </div>
</section>
{% endblock %}