{% extends 'eval/base.html' %}
{% load eval_tags %}
{% block title %}Criteria | Eval Admin{% endblock %}

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

{% block content %}
<div x-data="criteriaPageData()" class="flex gap-6">
  <!-- LEFT: Versions list -->
  <div class="w-[280px] min-w-[280px] max-w-[280px] shrink-0 overflow-hidden">
  <c-card class="h-fit">
    <c-card-content class="pt-6 space-y-2">
      <div class="space-y-1">
        <template x-for="ver in versions" :key="ver.label">
          <button @click="selectedLabel = ver.label"
                  :class="selectedLabel === ver.label ? 'bg-muted ring-1 ring-border' : 'hover:bg-muted/50'"
                  class="w-full text-left px-4 py-3 rounded-lg transition-colors">
            <div class="flex items-center justify-between gap-2 w-full">
              <div>
                <span class="font-semibold block" x-text="ver.label"></span>
                <span class="text-xs text-muted-foreground" x-text="(ver.criteria || []).length + ' criteria'"></span>
              </div>
              <div class="flex items-center gap-1.5">
                <span x-show="!ver.is_saved" class="text-[10px] shrink-0 bg-muted text-muted-foreground border border-border px-2 py-0.5 rounded-full font-medium">draft</span>
                <span x-show="ver.is_current" class="text-[10px] shrink-0 bg-eval-cta-primary text-eval-cta-primary-foreground border-0 px-2 py-0.5 rounded-full font-medium">current</span>
              </div>
            </div>
          </button>
        </template>
      </div>
    </c-card-content>
  </c-card>
  </div>

  <!-- RIGHT: Editable detail panel (all versions) -->
  <div class="flex-1 min-w-0">
  <c-card>
    <c-card-content class="pt-6">

      <div class="flex items-center justify-between mb-6">
        <h3 class="text-lg font-semibold">
          <span x-text="selectedVersion ? selectedVersion.label : ''"></span>
          <span x-show="isSelectedSaved && selectedVersion && !selectedVersion.is_current" class="text-muted-foreground text-sm font-normal ml-1">(editing creates a new version)</span>
        </h3>
        <div class="flex items-center gap-2">
          <!-- Diff picker (only for current version) -->
          <template x-if="selectedVersion && selectedVersion.is_current">
            <div class="relative">
              <button @click="diffPickerOpen = !diffPickerOpen"
                      class="h-9 px-3 rounded-md border border-input bg-background text-sm hover:bg-muted/50 flex items-center gap-1.5"
                      :class="diffBase ? 'ring-1 ring-primary' : ''">
                <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M8 7h8m-8 5h5m-1 5H6a2 2 0 01-2-2V5a2 2 0 012-2h7l5 5v7m-4-9v4h4"/><path stroke-linecap="round" stroke-linejoin="round" d="M16 19h2m2 0h-2m0 0v-2m0 2v2"/></svg>
                <span x-text="diffBase ? 'Diff vs ' + diffBase : 'Compare...'"></span>
                <span class="text-muted-foreground">&#x25BC;</span>
              </button>
              <div x-show="diffPickerOpen" @click.outside="diffPickerOpen = false" x-cloak x-transition
                   class="absolute right-0 top-full mt-1 w-44 rounded-md border border-border bg-card py-1 shadow-lg z-50">
                <template x-for="v in previousLabels" :key="v">
                  <button @click="diffBase = diffBase === v ? null : v; diffPickerOpen = false"
                          class="block w-full px-3 py-1.5 text-sm text-left hover:bg-muted"
                          :class="diffBase === v ? 'bg-muted font-medium' : ''">
                    <span x-text="'Compare with ' + v"></span>
                  </button>
                </template>
                <template x-if="diffBase">
                  <button @click="diffBase = null; diffPickerOpen = false"
                          class="block w-full px-3 py-1.5 text-sm text-left text-destructive hover:bg-muted border-t border-border">Clear</button>
                </template>
              </div>
            </div>
          </template>

          <!-- Set current button (for old saved versions that aren't current) -->
          <template x-if="selectedVersion && selectedVersion.is_saved && !selectedVersion.is_current">
            <button type="button"
                    class="btn-set-current h-9 px-4 rounded-md text-sm font-medium transition-colors"
                    @click="setCurrentVersion(selectedVersion.config_id)">Set current</button>
          </template>

          <!-- Save button -->
          <c-button variant="default"
                    class="h-9 px-4 bg-eval-cta-primary text-eval-cta-primary-foreground hover:bg-eval-cta-primary-hover"
                    :disabled="saving"
                    @click="saveConfig()">
            <span x-text="saveButtonLabel"></span>
          </c-button>
        </div>
      </div>

      <!-- Diff panel -->
      <div x-show="diffBase" x-cloak x-transition class="mb-6 rounded-lg border border-border bg-muted/20 overflow-hidden">
        <div class="flex items-center justify-between px-4 py-2.5 border-b border-border bg-muted/40">
          <span class="text-sm font-medium">Changes from <span x-text="diffBase" class="font-semibold"></span> &#x2192; <span x-text="currentVersion ? currentVersion.label : ''"></span></span>
          <button @click="diffBase = null" class="text-xs text-muted-foreground hover:text-destructive">Close</button>
        </div>
        <div class="p-4 space-y-4 text-sm font-mono">
          <template x-for="section in getDiffSections()" :key="section.label">
            <div>
              <p class="text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1.5 font-sans" x-text="section.label"></p>
              <div class="space-y-0.5">
                <template x-for="(line, i) in section.lines" :key="i">
                  <div class="px-2 py-0.5 rounded-sm text-[13px]"
                       :style="line.type === 'removed' ? 'background:rgba(239,68,68,0.1);color:#b91c1c' : line.type === 'added' ? 'background:rgba(34,197,94,0.1);color:#15803d' : 'color:var(--muted-foreground)'">
                    <span :style="line.type === 'removed' ? 'color:#ef4444' : line.type === 'added' ? 'color:#22c55e' : 'color:var(--muted-foreground)'" x-text="line.type === 'removed' ? '− ' : line.type === 'added' ? '+ ' : '  '"></span><span x-text="line.text"></span>
                  </div>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- Editable fields -->
      <div class="space-y-6">
        <div>
          <label class="block text-sm font-medium mb-2">Description</label>
          <input type="text" x-model="description"
                 placeholder="Describe this criteria configuration"
                 class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm" />
        </div>

        <div>
          <label class="block text-sm font-medium mb-2">Judge Model</label>
          <div class="grid grid-cols-3 gap-4">
            <div>
              <label class="block text-xs text-muted-foreground mb-1">Model</label>
              <select x-model="judgeModel" class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm">
                <template x-for="m in judgeModels" :key="m.id">
                  <option :value="m.id" x-text="m.label" :selected="m.id === judgeModel"></option>
                </template>
              </select>
            </div>
            <div>
              <label class="block text-xs text-muted-foreground mb-1">Temperature</label>
              <input type="number" x-model.number="temperature" step="0.1" min="0" max="1"
                     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="block text-xs text-muted-foreground mb-1">Provider</label>
              <input type="text" :value="judgeProvider" readonly
                     class="flex h-9 w-full rounded-md border border-input bg-muted px-3 py-1 text-sm text-muted-foreground cursor-not-allowed" />
            </div>
          </div>
        </div>

        <div class="border-t border-border pt-6">
          <div class="flex gap-1 border-b border-border mb-4">
            <button @click="criteriaTab = 'llm'"
                    :class="criteriaTab === 'llm' ? 'border-b-2 border-primary text-primary font-medium' : 'text-muted-foreground hover:text-foreground'"
                    class="px-4 py-2 text-sm transition-colors">
              LLM JUDGE CRITERIA
            </button>
            <button @click="criteriaTab = 'threshold'"
                    :class="criteriaTab === 'threshold' ? 'border-b-2 border-primary text-primary font-medium' : 'text-muted-foreground hover:text-foreground'"
                    class="px-4 py-2 text-sm transition-colors">
              THRESHOLD CRITERIA
            </button>
          </div>

          <!-- LLM Judge Criteria (editable) -->
          <div x-show="criteriaTab === 'llm'" x-transition>
            <p class="text-sm text-muted-foreground mb-4">LLM-judged quality criteria with rubrics (defined in config)</p>
            <div class="space-y-4">
              <template x-for="(c, idx) in criteria" :key="c._id">
                <div class="criterion-card rounded-lg border border-border bg-card px-5 py-4">
                  <div class="mb-4">
                    <label class="block text-xs text-muted-foreground mb-1">Key</label>
                    <p class="text-sm font-medium text-foreground" x-text="c.key"></p>
                  </div>
                  <div class="mb-4">
                    <label class="block text-xs text-muted-foreground mb-1">Description</label>
                    <textarea class="criterion-input text-sm" rows="2" x-model="c.description"
                              placeholder="What does this criteria measure?"></textarea>
                  </div>
                  <div>
                    <label class="block text-xs text-muted-foreground mb-2">Rubric</label>
                    <div class="divide-y divide-border rounded-md border border-border overflow-hidden">
                      <template x-for="score in ['1','2','3','4','5']" :key="c.key + '-' + score">
                        <div class="rubric-row flex items-start gap-3 px-2 py-2">
                          <span class="flex items-center justify-center w-8 h-7 shrink-0 text-sm font-semibold rounded mt-0.5"
                                :class="'rubric-score-' + score" x-text="score"></span>
                          <textarea x-model="c.scoring_rubric[score]"
                                    class="criterion-input text-sm" rows="2"
                                    :placeholder="'Describe what a ' + score + ' means'"></textarea>
                        </div>
                      </template>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>

          <!-- Threshold Criteria (editable) -->
          <div x-show="criteriaTab === 'threshold'" x-transition x-cloak>
            <p class="text-sm text-muted-foreground mb-4">Set min/max thresholds for cost, token, and latency metrics</p>
            <div class="rounded-xl border border-border overflow-hidden shadow-sm">
              <div class="grid threshold-table-cols text-xs threshold-head">
                <div class="px-4 py-3 font-semibold uppercase tracking-wider text-muted-foreground">Metric</div>
                <div class="px-4 py-3 font-semibold uppercase tracking-wider text-muted-foreground text-center border-l border-border">Min</div>
                <div class="px-4 py-3 font-semibold uppercase tracking-wider text-muted-foreground text-center border-l border-border">Max</div>
              </div>
              <template x-for="tc in thresholds" :key="tc.key">
                <div class="threshold-row grid threshold-table-cols text-sm border-t border-border">
                  <div class="px-4 py-3 flex items-center gap-2">
                    <span class="font-medium text-foreground" x-text="tc.label"></span>
                    <span class="threshold-label-unit" x-text="'(' + tc.unit + ')'"></span>
                  </div>
                  <div class="threshold-input-cell px-4 py-2.5 flex items-center justify-center border-l border-border">
                    <span x-show="tc.unit === 'USD'" class="text-muted-foreground text-sm shrink-0 mr-0.5">$</span>
                    <input type="number" x-model="tc.min_threshold"
                           step="any" placeholder="—"
                           class="threshold-input w-full min-w-0 bg-transparent border-none outline-none text-sm text-center py-0.5" />
                  </div>
                  <div class="threshold-input-cell px-4 py-2.5 flex items-center justify-center border-l border-border">
                    <span x-show="tc.unit === 'USD'" class="text-muted-foreground text-sm shrink-0 mr-0.5">$</span>
                    <input type="number" x-model="tc.max_threshold"
                           step="any" placeholder="—"
                           class="threshold-input w-full min-w-0 bg-transparent border-none outline-none text-sm text-center py-0.5" />
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>

    </c-card-content>
  </c-card>
  </div>
</div>

{% load static %}
<script id="eval-criteria-data" type="application/json">
{
  "versions": {{ criteria_versions_json|safe }},
  "judgeModels": {{ judge_models_json|safe }}
}
</script>
<script src="{% static 'eval/js/eval-criteria.js' %}"></script>
{% endblock %}