{% load static %}

<div class="grid gap-6" style="grid-template-columns: 2fr 3fr;">
  <!-- LEFT: Experiment setup -->
  <c-card>
    <c-card-header class="pb-0 pt-4 px-5">
      <c-card-title>Experiment setup</c-card-title>
    </c-card-header>
    <c-card-content class="space-y-4 px-5 pt-3 pb-5">

      <!-- Evaluation depth -->
      <div>
        <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-2">Evaluation depth</label>
        <div class="space-y-2">
          <!-- + LLM judge -->
          <button type="button"
                  {% if not any_gold_set_has_assertions %}disabled{% endif %}
                  @click="{% if any_gold_set_has_assertions %}form.experimentDepth = 'llm_judge'{% endif %}"
                  :class="form.experimentDepth === 'llm_judge'
                    ? 'border-eval-metric-good ring-1 ring-eval-metric-good/30'
                    : 'border-border {% if any_gold_set_has_assertions %}hover:border-muted-foreground/40{% endif %}'"
                  class="w-full flex items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors {% if not any_gold_set_has_assertions %}opacity-50 cursor-not-allowed{% endif %}">
            <span class="shrink-0 flex items-center justify-center w-5 h-5 rounded-full border-2 transition-colors"
                  :class="form.experimentDepth === 'llm_judge' ? 'border-eval-metric-good' : 'border-muted-foreground/40'">
              <span x-show="form.experimentDepth === 'llm_judge'" class="w-2.5 h-2.5 rounded-full bg-eval-metric-good"></span>
            </span>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium transition-colors"
                 :class="form.experimentDepth === 'llm_judge' ? 'text-eval-metric-good' : 'text-foreground'">LLM Judge + Regression Scores</p>
              <p class="text-xs transition-colors"
                 :class="form.experimentDepth === 'llm_judge' ? 'text-eval-metric-good' : 'text-muted-foreground'">Full evaluation with LLM judging + scoring against test questions</p>
            </div>
            {% if any_gold_set_has_assertions %}
            <span class="shrink-0 inline-flex items-center px-2 py-0.5 rounded text-[10px] font-semibold uppercase tracking-wide"
                  :class="form.experimentDepth === 'llm_judge'
                    ? 'bg-eval-metric-good/15 text-eval-metric-good'
                    : 'bg-muted text-muted-foreground'">Default</span>
            {% endif %}
          </button>

          <!-- + Regression scores -->
          <button type="button"
                  {% if not any_gold_set_has_assertions %}disabled{% endif %}
                  @click="{% if any_gold_set_has_assertions %}form.experimentDepth = 'regression'{% endif %}"
                  :class="form.experimentDepth === 'regression'
                    ? 'border-eval-metric-good ring-1 ring-eval-metric-good/30'
                    : 'border-border {% if any_gold_set_has_assertions %}hover:border-muted-foreground/40{% endif %}'"
                  class="w-full flex items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors {% if not any_gold_set_has_assertions %}opacity-50 cursor-not-allowed{% endif %}">
            <span class="shrink-0 flex items-center justify-center w-5 h-5 rounded-full border-2 transition-colors"
                  :class="form.experimentDepth === 'regression' ? 'border-eval-metric-good' : 'border-muted-foreground/40'">
              <span x-show="form.experimentDepth === 'regression'" class="w-2.5 h-2.5 rounded-full bg-eval-metric-good"></span>
            </span>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium transition-colors"
                 :class="form.experimentDepth === 'regression' ? 'text-eval-metric-good' : 'text-foreground'">Regression Scores only</p>
              <p class="text-xs transition-colors"
                 :class="form.experimentDepth === 'regression' ? 'text-eval-metric-good' : 'text-muted-foreground'">Score against test questions (gold sets with assertions only)</p>
            </div>
          </button>

          <!-- Exploratory -->
          <button type="button"
                  @click="form.experimentDepth = 'exploratory'"
                  :class="form.experimentDepth === 'exploratory'
                    ? 'border-eval-metric-good ring-1 ring-eval-metric-good/30'
                    : 'border-border hover:border-muted-foreground/40'"
                  class="w-full flex items-center gap-3 rounded-lg border px-4 py-3 text-left transition-colors">
            <span class="shrink-0 flex items-center justify-center w-5 h-5 rounded-full border-2 transition-colors"
                  :class="form.experimentDepth === 'exploratory' ? 'border-eval-metric-good' : 'border-muted-foreground/40'">
              <span x-show="form.experimentDepth === 'exploratory'" class="w-2.5 h-2.5 rounded-full bg-eval-metric-good"></span>
            </span>
            <div class="flex-1 min-w-0">
              <p class="text-sm font-medium transition-colors"
                 :class="form.experimentDepth === 'exploratory' ? 'text-eval-metric-good' : 'text-foreground'">LLM Judge only</p>
              <p class="text-xs transition-colors"
                 :class="form.experimentDepth === 'exploratory' ? 'text-eval-metric-good' : 'text-muted-foreground'">Auto-grade with LLM judge (gold sets without assertions only)</p>
            </div>
          </button>

          {% if not any_gold_set_has_assertions %}
          <!-- No assertions notice -->
          <p class="text-xs text-muted-foreground mt-1 flex items-start gap-1.5">
            <svg class="shrink-0 w-3.5 h-3.5 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            Regression scores and LLM judge require gold sets with assertions. Add assertions to a gold set to enable these modes.
          </p>
          {% endif %}
        </div>

        <!-- Hint text -->
        <p class="text-sm text-foreground mt-3 flex items-start gap-2">
          <svg class="shrink-0 w-4 h-4 mt-0.5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
          </svg>
          <span x-text="experimentDepthHint"></span>
        </p>
      </div>

      <!-- Run mode -->
      <div>
        <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1.5">Run mode</label>
        <div class="inline-flex rounded-lg border border-input bg-muted/30 p-0.5">
          <button type="button" @click="form.experimentRunMode = 'sweep'"
                  :class="form.experimentRunMode === 'sweep' ? '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">
            Sweep
          </button>
          <button type="button" @click="form.experimentRunMode = 'full'"
                  :class="form.experimentRunMode === 'full' ? '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">
            Full
          </button>
          <button type="button" @click="form.experimentRunMode = 'isolated'"
                  :class="form.experimentRunMode === 'isolated' ? '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">
            Isolated
          </button>
        </div>
        <p class="text-xs text-muted-foreground mt-1" x-text="experimentRunModeHint"></p>
      </div>

      <!-- Target subagent (isolated mode) -->
      <div x-show="form.experimentRunMode === 'isolated'" x-transition>
        <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Target subagent</label>
        <select x-model="form.experimentTargetSubagentId"
                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="">—</option>
          {% for sa in active_subagents %}
          <option value="{{ sa.key }}">{{ sa.display_name }}</option>
          {% endfor %}
        </select>
        <template x-if="experimentSubmitted && form.experimentRunMode === 'isolated' && !form.experimentTargetSubagentId">
          <p class="text-sm text-destructive mt-1">Pick a target subagent for isolated mode.</p>
        </template>
      </div>

      <!-- Configs multi-select (hidden for sweep) -->
      <div x-show="form.experimentRunMode !== 'sweep'">
        <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Configs</label>
        <select multiple x-model="form.experimentConfigIds" x-searchable
                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 configs</option>
          {% for cfg in experiment_configs %}
          <option value="{{ cfg.config_id }}"
                  {% if cfg.has_inactive_model %}disabled{% endif %}
                  data-overrides="{{ cfg.overridden_count }}">{{ cfg.name }}</option>
          {% endfor %}
        </select>
        {% if not experiment_configs %}
        <p class="text-sm text-muted-foreground mt-1">No configs yet. Create one in the <a href="{% url 'Eval:experiment_configs' %}" class="text-eval-link hover:underline">Config Builder</a>.</p>
        {% endif %}
        <template x-if="experimentSubmitted && form.experimentRunMode !== 'sweep' && form.experimentConfigIds.length === 0">
          <p class="text-sm text-destructive mt-2">Pick at least one config.</p>
        </template>
      </div>

      <!-- Sweep model selection (shown only for sweep) -->
      <div x-show="form.experimentRunMode === 'sweep'" x-transition>
        <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1.5">Models</label>
        <template x-if="activeModels.length === 0">
          <p class="text-sm text-muted-foreground">No active models. Run a sync to populate the model registry.</p>
        </template>
        <template x-if="activeModels.length > 0">
          <div>
            <div class="rounded-md border border-border bg-background max-h-48 overflow-y-auto">
              <!-- Select all -->
              <label class="flex items-center gap-2.5 px-3 py-2 border-b border-border cursor-pointer hover:bg-muted/30 transition-colors">
                <input type="checkbox"
                       :checked="sweepModelIds.length === activeModels.length"
                       @change="toggleAllSweepModels()"
                       class="rounded border-input">
                <span class="text-xs font-medium text-foreground">Select all</span>
                <span class="ml-auto text-[10px] text-muted-foreground"
                      x-text="sweepModelIds.length + '/' + activeModels.length"></span>
              </label>
              <!-- Model list -->
              <template x-for="model in activeModels" :key="model.id">
                <label class="flex items-center gap-2.5 px-3 py-1.5 cursor-pointer hover:bg-muted/30 transition-colors">
                  <input type="checkbox"
                         :value="model.id"
                         :checked="sweepModelIds.includes(model.id)"
                         @change="toggleSweepModel(model.id)"
                         class="rounded border-input">
                  <span class="text-sm text-foreground truncate" x-text="model.name"></span>
                  <span class="ml-auto text-[10px] text-muted-foreground shrink-0" x-text="model.provider"></span>
                </label>
              </template>
            </div>
          </div>
        </template>
        <template x-if="experimentSubmitted && form.experimentRunMode === 'sweep' && sweepModelIds.length === 0">
          <p class="text-sm text-destructive mt-1">Select at least one model.</p>
        </template>
      </div>

      <!-- Baseline info (hidden for sweep) -->
      <aside x-show="form.experimentRunMode !== 'sweep'" class="rounded-md border border-border bg-muted/20 px-4 py-2.5 text-sm text-muted-foreground flex items-center gap-2">
        <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-muted text-muted-foreground border border-border font-mono">baseline</span>
        Production config is always included (prompts + models).
      </aside>

      <!-- Gold set -->
      <div>
        <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Gold set</label>
        <select x-model="form.experimentGoldSetId" @change="onExperimentGoldSetChange($event)"
                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="" disabled>Select a gold set</option>
          {% for gs in experiment_gold_sets %}
          <option value="{{ gs.gold_set_id }}"
                  data-has-assertions="{{ gs.has_assertions|yesno:'true,false' }}"
                  data-case-count="{{ gs.case_count }}"
                  :disabled="(experimentNeedsAssertions && '{{ gs.has_assertions }}' === 'False') || (form.experimentDepth === 'exploratory' && '{{ gs.has_assertions }}' === 'True')">
            {% if gs.is_default %}★ {% endif %}{{ gs.name }}{% if not gs.has_assertions %} · no assertions{% endif %}
          </option>
          {% endfor %}
        </select>
        <p class="text-xs text-muted-foreground mt-1" x-text="experimentGoldSetHelpText"></p>
        <template x-if="experimentSubmitted && !form.experimentGoldSetId">
          <p class="text-sm text-destructive mt-1">Gold set is required.</p>
        </template>
      </div>

      <!-- Incompatible gold set warning -->
      <div x-show="experimentGoldSetIncompatible" x-transition
           class="rounded-md border border-eval-metric-warning/50 bg-eval-metric-warning/10 px-4 py-2.5 text-sm text-eval-metric-warning">
        <span x-text="experimentGoldSetIncompatibleMsg"></span>
      </div>

      <!-- Criteria config (always required) -->
      <div>
        <label class="text-[11px] font-medium text-muted-foreground uppercase tracking-wide block mb-1">Criteria config</label>
        <select x-model="form.experimentCriteriaConfigId"
                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="">—</option>
          {% for cc in experiment_criteria_configs %}
          <option value="{{ cc.config_id }}">{{ cc.label }}{% if forloop.first %} latest{% endif %}</option>
          {% endfor %}
        </select>
        <p class="text-xs text-muted-foreground mt-1">Auto-selected the latest available criteria config.</p>
        <template x-if="experimentSubmitted && !form.experimentCriteriaConfigId">
          <p class="text-sm text-destructive mt-1">Criteria config is required.</p>
        </template>
      </div>

      <!-- LLM Judge banner (depth = llm_judge) -->
      <div x-show="form.experimentDepth === 'llm_judge'" x-transition
           class="rounded-md border border-eval-metric-good/30 bg-eval-metric-good/10 px-4 py-2.5 text-sm text-eval-metric-good flex items-center gap-2">
        <svg class="shrink-0 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
        </svg>
        Enabled — pairwise comparison against baseline outputs.
      </div>

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

  <!-- RIGHT: Run configuration -->
  <c-card>
    <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">Name</label>
        <input type="text" x-model="form.experimentName" :placeholder="experimentDefaultName"
               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>
        <input type="text" x-model="form.experimentTag" placeholder="e.g. sprint-42"
               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">Notes</label>
        <textarea x-model="form.experimentNotes" rows="2" placeholder="Optional notes about this experiment..."
                  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>
</div>

<!-- Cost warning -->
<div x-show="experimentCostWarning" x-transition
     class="rounded-md border border-eval-metric-warning/50 bg-eval-metric-warning/10 px-4 py-3 flex items-start gap-2.5">
  <svg class="shrink-0 w-4 h-4 mt-0.5 text-eval-metric-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
  </svg>
  <div class="text-sm text-eval-metric-warning">
    <p class="font-medium">Heads up</p>
    <p x-text="experimentCostWarning"></p>
  </div>
</div>

<!-- Validation errors (full width, below the grid) -->
<div x-show="experimentSubmitted && experimentErrors.length" class="rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3">
  <template x-for="err in experimentErrors" :key="err">
    <p class="text-sm text-destructive" x-text="err"></p>
  </template>
</div>