{% extends 'eval/base.html' %}
{% block title %}New Run | Eval Admin{% endblock %}

{% block extra_head %}
{% load static %}
<script src="{% static 'eval/js/eval-new-run.js' %}"></script>
{% endblock %}

{% block action_bar %}
<a href="{% url 'Eval:trace_evals' %}" class="text-primary hover:underline">← Trace Evals</a>
<span class="font-semibold ml-2">New Run</span>
{% endblock %}

{% block content %}
<div x-data="newRunForm()" class="space-y-4">
  <script id="eval-new-run-data" type="application/json">
  {
    "chatEvalUrl": "{{ chat_eval_url }}",
    "regressionRunStreamUrl": "{{ regression_run_stream_url }}",
    "regressionRunDetailUrlTemplate": "{{ regression_run_detail_url_template }}",
    "traceRunStreamUrl": "{{ trace_run_stream_url }}",
    "traceRunDetailUrlTemplate": "{{ trace_run_detail_url_template }}",
    "judgeModels": {{ judge_models_json|safe }},
    "goldSetsOptions": {{ gold_sets_options_json|safe }},
    "goldSetsFull": {{ gold_sets_full_json|safe }},
    "tagOptions": {{ tag_options_json|safe }},
    "regressionRunsOptions": {{ regression_runs_options_json|safe }},
    "deleteRegressionRunUrlTemplate": "{{ delete_regression_run_url_template }}",
    "deleteTraceRunUrlTemplate": "{{ delete_trace_run_url_template }}"
  }
  </script>
  <!-- Run type toggle -->
  <div class="flex items-center gap-2">
    <span class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">Run type</span>
    <div class="inline-flex rounded-lg border border-input bg-muted/30 p-0.5">
      <button type="button"
              @click="runType = 'evaluation'"
              :class="runType === 'evaluation' ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
              class="px-4 py-1.5 text-sm font-medium rounded-md transition-colors">
        Trace Run
      </button>
      <button type="button"
              @click="runType = 'regression'"
              :class="runType === 'regression' ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
              class="px-4 py-1.5 text-sm font-medium rounded-md transition-colors">
        Regression Run
      </button>
    </div>
  </div>

  <!-- Two-column form -->
  <div class="grid gap-6" style="grid-template-columns: 2fr 3fr;">
    <!-- LEFT: Trace input (evaluation) or Gold set select (regression) -->
    <c-card x-show="runType === 'evaluation'" x-transition>
      <c-card-header class="pb-0 pt-4 px-5">
        <c-card-title>Trace input</c-card-title>
      </c-card-header>
      <c-card-content class="space-y-3 px-5 pt-3 pb-5">
        <div class="border-2 border-dashed border-border rounded-lg p-6 text-center hover:border-primary/50 hover:bg-muted/30 transition-colors cursor-pointer"
             @click="$refs.traceInput.click()"
             @dragover.prevent="traceDragOver = true"
             @dragleave="traceDragOver = false"
             @drop.prevent="handleTraceDrop($event)"
             :class="traceDragOver ? 'border-primary/50 bg-muted/30' : ''">
          <input type="file" x-ref="traceInput" @change="handleTraceSelect($event)" class="hidden" accept=".json,application/json" />
          <svg class="mx-auto h-8 w-8 text-muted-foreground mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
          </svg>
          <p class="text-sm font-medium text-foreground">Drop a trace file or click to upload</p>
          <p class="text-xs text-muted-foreground mt-1">Supports LangFuse JSON exports</p>
        </div>
        <div class="text-xs" x-show="traceFileName">
          <span class="text-muted-foreground">File:</span>
          <span class="font-mono text-foreground ml-1" x-text="traceFileName"></span>
        </div>
        <div x-show="duplicateWarning" class="rounded-md border border-eval-metric-warning/50 bg-eval-metric-warning/10 px-3 py-2 text-sm text-eval-metric-warning">
          Duplicate warning: a run with this trace already exists.
        </div>
      </c-card-content>
    </c-card>

    <!-- LEFT: Gold set select (regression only) -->
    <c-card x-show="runType === 'regression'" x-transition>
      <c-card-header class="pb-0 pt-4 px-5">
        <c-card-title>Gold set</c-card-title>
      </c-card-header>
      <c-card-content class="space-y-3 px-5 pt-3 pb-5">
        <p class="text-sm text-muted-foreground">Select an existing gold set to run regression against.</p>
        <div>
          <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Gold set</label>
          <select x-model="form.goldSetId" class="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <option value="">Select gold set</option>
            {% for gs in gold_sets_options %}
            <option value="{{ gs.id }}">{{ gs.name }}</option>
            {% endfor %}
          </select>
        </div>
        <div>
          <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Baseline run</label>
          <select x-model="form.baselineRunId" class="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
            <option value="">Select baseline run (optional)</option>
            <template x-for="r in baselineRunOptionsFiltered" :key="r.id">
              <option :value="r.id" x-text="r.name"></option>
            </template>
          </select>
        </div>
      </c-card-content>
    </c-card>

    <!-- RIGHT: Run configuration (evaluation) or Cases (regression) -->
    <c-card x-show="runType === 'evaluation'" x-transition>
      <c-card-header class="pb-0 pt-5 px-6">
        <c-card-title>Run configuration</c-card-title>
      </c-card-header>
      <c-card-content class="space-y-3.5 px-6 pt-4 pb-6">
        <div>
          <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Label</label>
          <input type="text" x-model="form.label" placeholder="e.g. rag_system_eval_v1"
                 class="h-8 w-full rounded-md border border-input bg-background px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
        </div>
        <div>
          <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Tag</label>
          <div x-show="!tagCreateNew">
            <select x-model="form.tag"
                    @change="form.tag === '__create_new__' ? (tagCreateNew = true, form.tag = '') : null"
                    class="h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
              <option value="">Select tag</option>
              {% for t in tag_options %}
              <option value="{{ t }}">{{ t }}</option>
              {% endfor %}
              <option value="__create_new__">Create new...</option>
            </select>
          </div>
          <div x-show="tagCreateNew" class="flex items-center gap-2">
            <input type="text" x-model="form.tag" placeholder="Enter new tag"
                   class="h-9 flex-1 rounded-md border border-input bg-background px-3 py-1 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
            <button x-show="tagOptions.length" type="button" @click="tagCreateNew = false; form.tag = (tagOptions.includes(defaultTag) ? defaultTag : tagOptions[0])"
                    class="text-xs text-muted-foreground hover:text-foreground">Choose from list</button>
          </div>
        </div>
        <div>
          <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Notes</label>
          <textarea x-model="form.notes" rows="2" placeholder="Optional notes about this run..."
                    class="w-full rounded-md border border-input bg-background px-3 py-1.5 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring resize-none"></textarea>
        </div>
      </c-card-content>
    </c-card>

    <c-card x-show="runType === 'regression'" x-transition>
      <c-card-header class="pb-0 pt-5 px-6">
        <c-card-title>Cases</c-card-title>
      </c-card-header>
      <c-card-content class="px-6 pt-4 pb-6">
        <p x-show="selectedGoldSetCases.length === 0" class="text-sm text-muted-foreground">Select a gold set to view its cases.</p>
        <div x-show="selectedGoldSetCases.length > 0" class="space-y-3 max-h-[400px] overflow-y-auto pr-1">
          <template x-for="(c, i) in selectedGoldSetCases" :key="c.id || i">
            <div class="rounded-md border border-border bg-muted/20 p-3 text-sm space-y-2">
              <div>
                <span class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">ID</span>
                <p class="font-mono text-foreground mt-0.5" x-text="c.id || '—'"></p>
              </div>
              <div>
                <span class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">Input</span>
                <p class="text-foreground mt-0.5" x-text="c.input || '—'"></p>
              </div>
              <div x-show="c.assertions && Object.keys(c.assertions).length" class="space-y-2.5">
                <button type="button"
                        @click="toggleAssertions(i)"
                        class="w-full flex flex-col items-start gap-1 text-left group">
                  <div class="w-full flex items-center justify-between gap-2">
                    <span class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide">Assertions</span>
                    <svg class="shrink-0 w-3.5 h-3.5 text-muted-foreground transition-transform" :class="expandedAssertions[i] ? 'rotate-180' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                  </div>
                  <span x-show="!expandedAssertions[i]" class="text-xs text-eval-link text-left">View assertions</span>
                  <div x-show="expandedAssertions[i]" x-transition class="space-y-2 text-xs w-full">
                  <div x-show="c.assertions.assert_subagents_used && c.assertions.assert_subagents_used.length">
                    <p class="text-muted-foreground mb-1">Subagents used</p>
                    <div class="flex flex-wrap gap-1">
                      <template x-for="(agent, j) in c.assertions.assert_subagents_used" :key="'used-' + j">
                        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-eval-metric-good/15 text-eval-metric-good border border-eval-metric-good/30" x-text="agent"></span>
                      </template>
                    </div>
                  </div>
                  <div x-show="c.assertions.assert_subagents_not_used && c.assertions.assert_subagents_not_used.length">
                    <p class="text-muted-foreground mb-1">Subagents not used</p>
                    <div class="flex flex-wrap gap-1">
                      <template x-for="(agent, j) in c.assertions.assert_subagents_not_used" :key="'not-' + j">
                        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-eval-metric-bad/15 text-eval-metric-bad border border-eval-metric-bad/30" x-text="agent"></span>
                      </template>
                    </div>
                  </div>
                  <div x-show="c.assertions.assert_tool_params_match && c.assertions.assert_tool_params_match.length">
                    <p class="text-muted-foreground mb-1">Tool params match</p>
                    <div class="space-y-1">
                      <template x-for="(toolEntry, j) in c.assertions.assert_tool_params_match" :key="'tool-' + j">
                        <p class="font-mono text-foreground" x-text="formatToolParams(toolEntry)"></p>
                      </template>
                    </div>
                  </div>
                </div>
                </button>
              </div>
            </div>
          </template>
        </div>
      </c-card-content>
    </c-card>
  </div>

  <!-- Action buttons -->
  <div class="flex items-center gap-3">
    <c-button variant="default" class="h-9 px-4 bg-eval-cta-primary hover:bg-eval-cta-primary-hover text-eval-cta-primary-foreground" :disabled="running" @click="startRun()">
      <span class="inline-flex items-center gap-2">
        <svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
        Start Run
      </span>
    </c-button>
    <c-button variant="outline" class="h-9 px-4" x-show="running" @click="cancelRun()">
      Cancel Run
    </c-button>
  </div>

  <!-- Terminal log -->
  <div x-show="terminal.visible" x-transition class="border-t border-border pt-3">
    <p class="text-[11px] font-semibold text-muted-foreground uppercase tracking-wide mb-2">Run log</p>
    <div id="log-terminal-scroll"
         class="bg-zinc-950 rounded-md p-3 max-h-80 overflow-y-auto font-mono text-xs space-y-0.5">
      <template x-for="(entry, i) in terminal.entries" :key="i">
        <div>
          <div x-show="entry.type === 'log'" class="text-zinc-300" x-text="entry.message"></div>
          <div x-show="entry.type === 'error'" class="text-red-400" x-text="'✗ ' + entry.message"></div>
          <div x-show="entry.type === 'complete'" class="mt-2 pt-2 border-t border-zinc-700 space-y-1">
            <div x-show="entry.summary && entry.summary.pass_rate !== undefined"
                 class="text-zinc-100 font-semibold">
              Run complete —
              <span :class="(entry.summary && entry.summary.pass_rate >= 80) ? 'text-green-400' : 'text-red-400'"
                    x-text="entry.summary ? entry.summary.pass_rate + '% pass rate' : ''"></span>
            </div>
            <div x-show="entry.summary && entry.summary.total !== undefined" class="text-zinc-400">
              <span x-text="entry.summary ? entry.summary.passed + '/' + entry.summary.total + ' passed' : ''"></span>
              <span x-show="entry.summary && entry.summary.errors > 0"
                    class="text-yellow-400 ml-2"
                    x-text="entry.summary ? entry.summary.errors + ' errors' : ''"></span>
            </div>
            <div x-show="entry.summary && entry.summary.summary_text"
                 class="text-zinc-300"
                 x-text="entry.summary && entry.summary.summary_text"></div>
            <a x-show="entry.summary && entry.summary.detailUrl && entry.summary.detailUrl !== '#'"
               :href="entry.summary && entry.summary.detailUrl"
               class="inline-block mt-1 text-blue-400 hover:underline"
               x-text="(entry.summary && entry.summary.linkText) || 'View run \u2192'"></a>
          </div>
        </div>
      </template>
      <div x-show="terminal.entries.length > 0 && terminal.entries[terminal.entries.length - 1] && terminal.entries[terminal.entries.length - 1].type === 'log'"
           class="text-zinc-500 animate-pulse">&#x258C;</div>
    </div>
  </div>
</div>
{% endblock %}