{% extends 'eval/base.html' %}
{% load static %}
{% block title %}Regression Evals | Eval Admin{% endblock %}
{% block extra_head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-zoom@2.0.1/dist/chartjs-plugin-zoom.min.js"></script>
<script src="{% static 'eval/js/eval-charts.js' %}"></script>
{% endblock %}

{% block action_bar %}
<span class="font-semibold">Regression Evals</span>
{% endblock %}

{% block content %}
<div x-data="regressionEvalsData()" x-init="applyFilters(); $watch('filters', () => applyFilters(), { deep: true }); $watch('filters.groupBy', () => refreshTrendChart())">
  <!-- Stat cards — one row, compact -->
  <div class="flex flex-row gap-3 mb-6">
    <c-card class="flex-1 min-w-0 px-3 py-2.5">
      <p class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">Total Runs</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="statsLoading ? '0' : (stats.total_runs ?? '0')"></p>
    </c-card>
    <c-card class="flex-1 min-w-0 px-3 py-2.5">
      <p class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">Avg Pass Rate</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="statsLoading ? '—' : (stats.avg_pass_rate ?? '—')"></p>
    </c-card>
    <c-card class="flex-1 min-w-0 px-3 py-2.5">
      <p class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">Last Run Pass</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="statsLoading ? '—' : (stats.last_run_pass ?? '—')"></p>
    </c-card>
    <c-card class="flex-1 min-w-0 px-3 py-2.5">
      <p class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">Regressions Detected</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="statsLoading ? '0' : (stats.regressions_detected ?? '0')"></p>
    </c-card>
  </div>

  {% include "eval/components/_run_filters.html" %}

  <!-- Regression Pass Rate Trends graph -->
  <div class="mb-6">
    {% include "eval/components/_pass_rate_trend_chart.html" with canvas_id="regressionPassRateChart" title="Regression Pass Rate Trends" pass_rate_domains=pass_rate_domains %}
  </div>

  {% include "eval/components/_latest_regression_run.html" with cases=latest_regression_cases %}

  {% include "eval/components/_run_table.html" with title="Recent regression runs" columns=table_columns export_url=export_url export_formats="json,xlsx" %}
</div>

<script id="eval-regression-evals-data" type="application/json">
{
  "stats": {{ stats_json|safe }},
  "trendData": {{ trend_data_json|safe }},
  "apiTrendUrl": "{% url 'Eval:api_trend_data' %}",
  "apiStatsUrl": "{% url 'Eval:api_trace_evals_stats' %}",
  "apiFilteredRunsUrl": "{% url 'Eval:api_filtered_regression_runs' %}",
  "apiExportUrl": "{% url 'Eval:api_export_regression_runs' %}",
  "filterTags": {{ filter_tags_json|safe }},
  "passRateDomains": {{ pass_rate_domains_json|safe }},
  "filterTokenOptions": {{ filter_token_options_json|safe }},
  "filterCostOptions": {{ filter_cost_options_json|safe }}
}
</script>
<script src="{% static 'eval/js/eval-regression-evals.js' %}"></script>
{% endblock %}