{% extends 'eval/base.html' %}
{% load static %}
{% block title %}Experiment 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="{% static 'eval/js/eval-charts.js' %}"></script>
{% endblock %}

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

{% block content %}
<div x-data="experimentEvalsPage()" x-init="init()">

  <!-- Stat cards -->
  <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="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="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</p>
      <p class="text-2xl font-bold mt-0.5 leading-tight" x-text="stats.last_run_at ?? '—'"></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="stats.total_cost ?? '—'"></p>
    </c-card>
  </div>

  <!-- Charts row 1: trend + scatter -->
  <div class="grid grid-cols-2 gap-6 mb-6" style="grid-auto-rows: minmax(0, 359px);">
    <!-- Aggregate pass rate trend -->
    <c-card class="flex flex-col" style="height: 100%;">
      <c-card-header class="shrink-0 overflow-visible">
        <div class="flex items-center justify-between w-full">
          <c-card-title>Pass Rate Trend</c-card-title>
          <!-- Config overlay picker -->
          <div class="relative" x-data="{ open: false }">
            <button @click="open = !open"
                    class="text-xs px-2 py-1 rounded border border-input bg-background hover:bg-muted/50 text-muted-foreground">
              Overlay configs <span class="text-muted-foreground">▼</span>
            </button>
            <div x-show="open" @click.outside="open = false" x-cloak
                 class="absolute right-0 top-full mt-1 min-w-[200px] max-h-[240px] overflow-y-auto rounded-md border border-border bg-card p-2 shadow-lg z-50">
              <template x-if="configs.length === 0">
                <p class="text-xs text-muted-foreground px-1 py-1">No configs</p>
              </template>
              <template x-for="cfg in configs" :key="cfg.id">
                <label class="flex items-center gap-2 cursor-pointer px-1 py-1 text-sm hover:bg-muted/30 rounded">
                  <input type="checkbox" class="h-3.5 w-3.5 rounded border-input"
                         :checked="overlayConfigIds.indexOf(cfg.id) >= 0"
                         :disabled="overlayConfigIds.indexOf(cfg.id) < 0 && overlayConfigIds.length >= 4"
                         @change="toggleOverlayConfig(cfg.id)" />
                  <span x-text="cfg.name" class="truncate"></span>
                </label>
              </template>
              <p class="text-[10px] text-muted-foreground mt-1 px-1">Max 4 overlays</p>
            </div>
          </div>
        </div>
      </c-card-header>
      <c-card-content class="flex-1 flex flex-col" style="min-height: 0;">
        <div class="flex-1 relative min-h-0" style="max-height: 280px;">
          <canvas id="experimentTrendChart" class="w-full"></canvas>
          <div x-show="trendData && (!trendData.aggregate || !trendData.aggregate.length)" x-cloak
               class="absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
            No completed scoring runs yet.
          </div>
        </div>
      </c-card-content>
    </c-card>

    <!-- Cost vs latency scatter (colored by pass rate) -->
    <c-card class="flex flex-col" style="height: 100%;">
      <c-card-header class="shrink-0">
        <c-card-title>Cost vs. Latency</c-card-title>
        <p class="text-[11px] text-muted-foreground mt-0.5">Each point = one run (averaged across configs). Color = pass rate.</p>
      </c-card-header>
      <c-card-content class="flex-1 flex flex-col" style="min-height: 0;">
        <div class="flex-1 relative min-h-0" style="max-height: 240px;">
          <canvas id="costLatencyScatter" class="w-full"></canvas>
          <div x-show="!scatterHasData" x-cloak
               class="absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
            No completed runs with cost data yet.
          </div>
        </div>
        <div id="costLatencyScatter-legend" class="mt-2 flex flex-wrap gap-3 text-xs shrink-0 text-muted-foreground" style="padding-bottom: 4px;"></div>
      </c-card-content>
    </c-card>
  </div>

  <!-- Latest run: radar + config breakdown side by side -->
  <div class="grid grid-cols-2 gap-6 mb-6">
    <c-card class="flex flex-col">
      <c-card-header class="shrink-0">
        <div class="flex items-center justify-between w-full">
          <div>
            <c-card-title>Latest Run — Config Comparison</c-card-title>
            <p x-show="radarData && radarData.capped" x-cloak
               class="text-[11px] text-muted-foreground mt-0.5">
              Showing top 5 configs by pass rate
              <span x-text="'(of ' + (radarData ? radarData.total_configs : '') + ')'"></span>
            </p>
          </div>
        </div>
      </c-card-header>
      <c-card-content class="flex-1 flex flex-col" style="min-height: 0;">
        <div class="flex-1 relative min-h-0" style="max-height: 280px;">
          <canvas id="latestRunRadar" class="w-full"></canvas>
          <div x-show="!radarData || !radarData.configs || !radarData.configs.length" x-cloak
               class="absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
            No completed runs yet.
          </div>
        </div>
        <div id="latestRunRadar-legend" class="mt-2 flex flex-wrap gap-3 text-xs shrink-0 text-muted-foreground"></div>
        <div x-show="radarExcluded.length > 0" x-cloak class="exp-radar-excluded-note">
          <span>⚠️</span>
          <span>
            Not included in radar, these configs had scoring errors:
            <strong x-text="radarExcluded.join(', ')"></strong>
          </span>
        </div>
      </c-card-content>
    </c-card>

    {% include "eval/components/_latest_experiment_run.html" %}
  </div>

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

<script id="experiment-evals-data" type="application/json">
{
  "stats": {{ stats_json|safe }},
  "latestRadar": {{ latest_radar_json|safe }},
  "latestRun": {{ latest_summary_json|safe }},
  "scatterData": {{ scatter_json|safe }},
  "configs": {{ configs_json|safe }},
  "apiStatsUrl": "{% url 'Eval:api_experiment_evals_stats' %}",
  "apiTrendUrl": "{% url 'Eval:api_experiment_trend_data' %}",
  "apiFilteredRunsUrl": "{% url 'Eval:api_filtered_experiment_runs' %}",
  "apiExportUrl": "{% url 'Eval:export_experiment_runs' %}"
}
</script>
<script src="{% static 'eval/js/eval-experiment-evals.js' %}"></script>
{% endblock %}