{% extends 'eval/base.html' %}
{% load static %}
{% block title %}{% if is_edit %}Edit Gold Set{% else %}New Gold Set{% endif %} | Eval Admin{% endblock %}

{% block action_bar %}
<c-detail-nav
  back_url="{% url 'Eval:gold_sets' %}"
  back_label="Gold Sets"
  title="{% if is_edit %}Edit Gold Set{% else %}New Gold Set{% endif %}"
/>
{% endblock %}

{% block content %}
<div x-data="goldSetEditorData()" x-init="initFormGuard()" class="gse-page">
  <div class="gse-main">

    {% if is_default %}
    <div class="rounded-lg border border-blue-500/30 bg-blue-500/5 px-4 py-3 mb-4">
      <div class="flex items-center justify-between">
        <div>
          <p class="text-sm font-medium text-blue-400">Default Gold Set</p>
          <p class="text-xs text-muted-foreground mt-0.5">This gold set is maintained and updated by developers to ensure correctness and reduce false positives. To customize, duplicate this gold set to create your own editable copy.</p>
        </div>
        <button type="button" @click="duplicateDefault()" class="eval-btn-blue inline-flex items-center gap-1.5 h-8 px-3 rounded-md text-xs font-semibold transition-colors shrink-0 ml-4">
          <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg>
          Duplicate
        </button>
      </div>
    </div>
    {% endif %}

    <!-- Header card -->
    <div class="gse-header-card">
      <div class="gse-field">
        <label class="gse-label">Name *</label>
        <input type="text" x-model="name" class="gse-input" placeholder="e.g. QA Regression Tests">
      </div>
      <div class="gse-field">
        <label class="gse-label">Description</label>
        <textarea x-model="description" rows="2" class="gse-input gse-textarea" placeholder="Optional notes about this gold set"></textarea>
      </div>
    </div>

    <!-- Cases -->
    <template x-for="(c, idx) in cases" :key="c._key">
      <div class="gse-case">
        <div class="gse-case-accent"></div>
        <div class="gse-case-body">

          <!-- Case header -->
          <div class="gse-case-header">
            <div class="gse-case-header-left">
              <span class="gse-case-number" x-text="'Case ' + (idx + 1)"></span>
              <input type="text" x-model="c.id" class="gse-case-id" placeholder="case_001">
            </div>
            <div class="gse-case-actions">
              <button @click="duplicateCase(idx)" class="gse-action-btn" style="padding: 0.25rem 0.5rem; font-size: 0.75rem; font-weight: 500;" title="Duplicate case">Duplicate</button>
              <button @click="removeCase(idx)" x-show="cases.length > 1" class="gse-action-btn gse-action-btn--danger" title="Delete case">
                <svg class="gse-action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
              </button>
            </div>
          </div>

          <!-- Case fields -->
          <div class="gse-case-fields">
            <div class="gse-field">
              <label class="gse-label">Domain *</label>
              <div x-data="{ custom: false }">
                <select x-show="!custom" x-model="c.domain" @change="if (c.domain === '__custom__') { c.domain = ''; custom = true; $nextTick(() => $refs.domainInput.focus()); }" class="gse-tool-select" style="width:100%">
                  <option value="">Select domain...</option>
                  <template x-for="d in domainSuggestions" :key="d">
                    <option :value="d" x-text="d"></option>
                  </template>
                  <option value="__custom__">Custom...</option>
                </select>
                <div x-show="custom" class="flex gap-1.5">
                  <input x-ref="domainInput" type="text" x-model="c.domain" class="gse-input" style="flex:1" placeholder="e.g. tickets">
                  <button type="button" @click="custom = false" class="gse-action-btn" title="Back to list" style="padding:0.375rem">
                    <svg class="gse-action-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                  </button>
                </div>
              </div>
            </div>
            <div class="gse-field gse-field--wide">
              <label class="gse-label">Input *</label>
              <textarea x-model="c.input" rows="2" class="gse-input gse-textarea" placeholder="User message sent to the agent"></textarea>
            </div>
          </div>

          <!-- Assertions panel (collapsible, closed by default) -->
          <div class="gse-assertions">
            <button type="button" @click="c._assertionsOpen = !c._assertionsOpen" class="gse-assertions-toggle">
              <svg class="gse-assertions-chevron" :class="c._assertionsOpen && 'gse-assertions-chevron--open'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
              <span class="gse-assertions-title">Assertions</span>
              <span x-show="assertionCount(c) > 0" class="gse-assertions-badge" x-text="assertionCount(c)"></span>
            </button>
            <div x-show="c._assertionsOpen" x-cloak class="gse-assertions-body">

            <!-- Summary bar -->
            <div class="gse-assertions-summary">
              <span class="gse-assertions-summary-text" x-text="assertionCount(c) + ' assertion' + (assertionCount(c) !== 1 ? 's' : '') + ' configured'"></span>
              <div x-show="assertionCount(c) > 0" class="gse-clear-all-group">
                <button type="button" x-show="!c._confirmClear" @click="c._confirmClear = true" class="gse-clear-all-btn">
                  <svg class="gse-clear-all-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                  Clear all
                </button>
                <div x-show="c._confirmClear" class="gse-confirm-group">
                  <button type="button" @click="clearAllAssertions(c); c._confirmClear = false" class="gse-confirm-btn">Confirm</button>
                  <button type="button" @click="c._confirmClear = false" class="gse-confirm-cancel">Cancel</button>
                </div>
              </div>
            </div>

            <!-- Subagents -->
            <div class="gse-section">
              <p class="gse-section-label">Subagents Used</p>
              <p class="gse-section-desc">Select subagents that must be invoked. Unselected are asserted as not used.</p>
              <div class="gse-chips">
                <template x-for="sa in subagents" :key="sa.key">
                  <button type="button"
                    @click="toggleSubagent(c, sa.key)"
                    class="gse-chip"
                    :class="c.assertions.subagents_used.includes(sa.key) ? 'gse-chip--used' : 'gse-chip--neutral'"
                    x-text="sa.display_name">
                  </button>
                </template>
              </div>
            </div>

            <div class="gse-divider"></div>

            <!-- Tool params match -->
            <div class="gse-section">
              <div class="gse-section-header">
                <div>
                  <p class="gse-section-label">Tool Param Assertions</p>
                  <p class="gse-section-desc">Tool calls with parameters that must match exactly.</p>
                </div>
                <div x-show="c.assertions.tool_params_match.length > 0" class="gse-clear-all-group">
                  <button type="button" x-show="!c._confirmRemoveMatch" @click="c._confirmRemoveMatch = true" class="gse-remove-btn">
                    <svg class="gse-remove-btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    Remove
                  </button>
                  <div x-show="c._confirmRemoveMatch" class="gse-confirm-group">
                    <button type="button" @click="c.assertions.tool_params_match = []; c._confirmRemoveMatch = false" class="gse-confirm-btn">Confirm</button>
                    <button type="button" @click="c._confirmRemoveMatch = false" class="gse-confirm-cancel">Cancel</button>
                  </div>
                </div>
              </div>
              <div class="gse-tool-list">
                <template x-for="(tp, tpi) in c.assertions.tool_params_match" :key="tpi">
                  <div class="gse-tool-card">
                    <div class="gse-tool-header">
                      <select x-model="tp.tool" x-effect="$nextTick(() => { $el.value = tp.tool })" class="gse-tool-select">
                        <option value="">Select tool...</option>
                        <template x-for="tn in toolsForCase(c)" :key="tn">
                          <option :value="tn" x-text="tn"></option>
                        </template>
                      </select>
                    </div>
                    <template x-for="(p, pi) in tp.params" :key="pi">
                      <div class="gse-param-row">
                        <input type="text" x-model="p.param" placeholder="param" class="gse-param-name">
                        <select x-model="p.type" class="gse-param-type">
                          <option value="string">string</option>
                          <option value="integer">int</option>
                          <option value="bool">bool</option>
                          <option value="list">list</option>
                        </select>
                        <input x-show="p.type === 'string'" type="text" x-model="p.value" placeholder="value" class="gse-param-value">
                        <input x-show="p.type === 'integer'" type="number" x-model.number="p.value" placeholder="0" class="gse-param-value">
                        <select x-show="p.type === 'bool'" x-model="p.value" class="gse-param-value">
                          <option :value="true">true</option>
                          <option :value="false">false</option>
                        </select>
                        <input x-show="p.type === 'list'" type="text" x-model="p.value" placeholder='["a","b"]' class="gse-param-value">
                        <label class="gse-param-opt"><input type="checkbox" x-model="p.optional"> Optional</label>
                        <button @click="tp.params.splice(pi, 1)" class="gse-param-remove" title="Remove param">&times;</button>
                      </div>
                    </template>
                    <button @click="tp.params.push({param:'',type:'string',value:'',optional:false})" class="gse-add-btn">
                      <svg class="gse-add-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                      Add param
                    </button>
                  </div>
                </template>
              </div>
              <button @click="c.assertions.tool_params_match.push({tool:'',params:[{param:'',type:'string',value:'',optional:false}]})" class="gse-add-btn">
                <svg class="gse-add-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Add tool assertion
              </button>
            </div>

            <div class="gse-divider"></div>

            <!-- Tool params fallbacks -->
            <div class="gse-section">
              <div class="gse-section-header">
                <div>
                  <p class="gse-section-label">Tool Params Fallbacks</p>
                  <p class="gse-section-desc">Acceptable alternative tool call parameters.</p>
                </div>
                <div x-show="c.assertions.tool_params_fallbacks.length > 0" class="gse-clear-all-group">
                  <button type="button" x-show="!c._confirmRemoveFallbacks" @click="c._confirmRemoveFallbacks = true" class="gse-remove-btn">
                    <svg class="gse-remove-btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.75" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                    Remove
                  </button>
                  <div x-show="c._confirmRemoveFallbacks" class="gse-confirm-group">
                    <button type="button" @click="c.assertions.tool_params_fallbacks = []; c._confirmRemoveFallbacks = false" class="gse-confirm-btn">Confirm</button>
                    <button type="button" @click="c._confirmRemoveFallbacks = false" class="gse-confirm-cancel">Cancel</button>
                  </div>
                </div>
              </div>
              <div class="gse-tool-list">
                <template x-for="(tp, tpi) in c.assertions.tool_params_fallbacks" :key="tpi">
                  <div class="gse-tool-card">
                    <div class="gse-tool-header">
                      <select x-model="tp.tool" x-effect="$nextTick(() => { $el.value = tp.tool })" class="gse-tool-select">
                        <option value="">Select tool...</option>
                        <template x-for="tn in toolsForCase(c)" :key="tn">
                          <option :value="tn" x-text="tn"></option>
                        </template>
                      </select>
                    </div>
                    <template x-for="(p, pi) in tp.params" :key="pi">
                      <div class="gse-param-row">
                        <input type="text" x-model="p.param" placeholder="param" class="gse-param-name">
                        <select x-model="p.type" class="gse-param-type">
                          <option value="string">string</option>
                          <option value="integer">int</option>
                          <option value="bool">bool</option>
                          <option value="list">list</option>
                        </select>
                        <input x-show="p.type === 'string'" type="text" x-model="p.value" placeholder="value" class="gse-param-value">
                        <input x-show="p.type === 'integer'" type="number" x-model.number="p.value" placeholder="0" class="gse-param-value">
                        <select x-show="p.type === 'bool'" x-model="p.value" class="gse-param-value">
                          <option :value="true">true</option>
                          <option :value="false">false</option>
                        </select>
                        <input x-show="p.type === 'list'" type="text" x-model="p.value" placeholder='["a","b"]' class="gse-param-value">
                        <label class="gse-param-opt"><input type="checkbox" x-model="p.optional"> Optional</label>
                        <button @click="tp.params.splice(pi, 1)" class="gse-param-remove" title="Remove param">&times;</button>
                      </div>
                    </template>
                    <button @click="tp.params.push({param:'',type:'string',value:'',optional:false})" class="gse-add-btn">
                      <svg class="gse-add-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                      Add param
                    </button>
                  </div>
                </template>
              </div>
              <button @click="c.assertions.tool_params_fallbacks.push({tool:'',params:[{param:'',type:'string',value:'',optional:false}]})" class="gse-add-btn">
                <svg class="gse-add-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Add tool assertion
              </button>
            </div>

            </div>
          </div>
        </div>
      </div>
    </template>

    <!-- Add case -->
    <button @click="addCase()" class="gse-add-case">
      <svg class="gse-add-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
      Add Case
    </button>

    <!-- Sticky footer -->
    <div class="gse-footer">
      <div class="gse-footer-summary" x-text="cases.length + ' case' + (cases.length !== 1 ? 's' : '')"></div>
      <div class="gse-footer-actions">
        <a href="{% url 'Eval:gold_sets' %}" class="gse-btn-discard">Discard</a>
        <button @click="save()" :disabled="saving" class="gse-btn-save">
          <span x-show="!saving">Save Gold Set</span>
          <span x-show="saving">Saving...</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Right: JSON preview -->
  <div class="gse-preview">
    <div class="gse-preview-card">
      <div class="gse-preview-header">JSON Preview</div>
      <pre class="gse-preview-body" x-text="jsonPreview()"></pre>
    </div>
  </div>

</div>

<script id="eval-gold-set-editor-data" type="application/json">
{
  "goldSet": {{ gold_set_json|safe }},
  "domainSuggestions": {{ domain_suggestions_json|safe }},
  "subagents": {{ subagents_json|safe }},
  "saveUrl": "{% url 'Eval:api_gold_set_editor_save' %}",
  "libraryUrl": "{% url 'Eval:gold_sets' %}"
}
</script>
<script src="{% static 'eval/js/eval-gold-set-editor.js' %}"></script>
{% endblock %}