{% extends 'eval/base.html' %}
{% load static %}
{% block title %}Trace 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">Trace Evals</span>
{% endblock %}

{% block content %}
<div x-data="traceEvalsData()" 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 Judge Score</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="statsLoading ? '0' : (stats.judge_score != null && stats.judge_score !== '—' ? stats.judge_score + '%' : '—')"></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 Threshold Score</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="statsLoading ? '—' : (stats.threshold_score ?? '—')"></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</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="statsLoading ? 'N/A' : (stats.last_run_ago ?? 'N/A')"></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">Total Cost</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="statsLoading ? '$0.00' : (stats.total_cost ?? '$0.00')"></p>
    </c-card>
  </div>

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

  <!-- Trend graphs — row 1 (max height ~359px for chart area) -->
  <div class="grid grid-cols-2 gap-6 mb-6" style="grid-auto-rows: minmax(0, 359px);">
    {% include "eval/components/_score_trend_chart.html" with canvas_id="trendChart" title="Trace Score Trends" %}
    {% include "eval/components/_cost_latency_chart.html" with canvas_id="costLatencyChart" title="Cost & Latency Trends" %}
  </div>

  {% include "eval/components/_run_table.html" with title="Recent trace runs" columns=table_columns %}
</div>

<script id="eval-trace-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_runs' %}",
  "apiExportUrl": "{% url 'Eval:api_export_trace_runs' %}",
  "filterTags": {{ filter_tags_json|safe }},
  "filterTokenOptions": {{ filter_token_options_json|safe }},
  "filterCostOptions": {{ filter_cost_options_json|safe }}
}
</script>
<script src="{% static 'eval/js/eval-trace-evals.js' %}"></script>
{% endblock %}