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

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

{% block content %}
<div x-data="goldSetsPageData()" x-init="applyFilters(); $watch('filters', () => applyFilters(), { deep: true })">
  <script id="eval-gold-sets-data" type="application/json">
  {"apiFilteredGoldSetsUrl": "{% url 'Eval:api_filtered_gold_sets' %}", "apiGoldSetUploadUrl": "{% url 'Eval:api_gold_set_upload' %}", "referenceDateIso": "{{ reference_date_iso }}", "tableLimit": {{ table_limit|default:20 }}}
  </script>
  {% include "eval/components/_gold_set_filters.html" %}
  <div class="mb-4 space-y-3">
    <div class="flex items-center gap-3">
      <a href="{% url 'Eval:gold_set_editor_new' %}" class="eval-btn-blue inline-flex items-center gap-1.5 h-9 px-4 rounded-md text-sm font-semibold transition-colors">
        <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.5" d="M12 4v16m8-8H4"/></svg>
        Create Gold Set
      </a>
      <c-button variant="default" class="h-9 px-4 bg-eval-cta-primary text-eval-cta-primary-foreground hover:bg-eval-cta-primary-hover" @click="uploadOpen = !uploadOpen">
        <span class="inline-flex items-center gap-2">
          <svg class="h-4 w-4" 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>
          Upload Gold Set
        </span>
      </c-button>
    </div>
    <div x-show="uploadOpen" x-cloak x-transition class="space-y-2">
      <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.goldSetInput.click()"
           @dragover.prevent="goldSetDragOver = true"
           @dragleave="goldSetDragOver = false"
           @drop.prevent="handleGoldSetDrop($event)"
           :class="goldSetDragOver ? 'border-primary/50 bg-muted/30' : ''">
        <input type="file" x-ref="goldSetInput" @change="handleGoldSetSelect($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 gold set file or click to upload</p>
        <p class="text-xs text-muted-foreground mt-1">Supports JSON gold set exports</p>
      </div>
      <div class="text-xs" x-show="goldSetFileName">
        <span class="text-muted-foreground">File:</span>
        <span class="font-mono text-foreground ml-1" x-text="goldSetFileName || '—'"></span>
      </div>
    </div>
  </div>
  <div x-show="uploadError" x-cloak x-transition
       class="mb-4 flex items-center justify-between gap-3 rounded-md border border-eval-metric-bad/50 bg-eval-metric-bad/10 px-4 py-3 text-sm text-eval-metric-bad">
    <span x-text="uploadError"></span>
    <button type="button" @click="uploadError = ''" class="shrink-0 text-eval-metric-bad hover:opacity-80" aria-label="Dismiss">
      <svg class="h-4 w-4" 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>
  <!-- Developer-maintained gold sets (collapsed by default) -->
  {% if default_count > 0 %}
  <div x-data="defaultGoldSetsData()" class="mb-6">
    <button type="button" @click="defaultOpen = !defaultOpen; if (defaultOpen && !defaultLoaded) { defaultLoaded = true; _fetchDefaultPage(); }"
            class="w-full flex items-center justify-between gap-3 rounded-lg border border-blue-500/20 bg-blue-500/5 px-4 py-3 text-left transition-colors hover:bg-blue-500/10">
      <div class="flex items-center gap-2">
        <span class="inline-flex items-center justify-center rounded-full border border-blue-500/30 bg-blue-500/10 px-2 py-0.5 text-xs font-medium text-blue-400">★</span>
        <span class="text-sm font-medium text-foreground">Developer-maintained gold sets</span>
        <span class="text-xs text-muted-foreground">({{ default_count }})</span>
      </div>
      <svg class="h-4 w-4 text-muted-foreground transition-transform" :class="defaultOpen && '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>
    </button>
    <div x-show="defaultOpen" x-cloak x-transition class="mt-3">
      {% include "eval/components/_gold_set_table.html" with title="Developer-maintained gold sets" columns=table_columns show_actions=True actions=default_table_actions empty_message="No default gold sets found." %}
    </div>
  </div>
  {% endif %}

  {% include "eval/components/_gold_set_table.html" with title="My gold sets" columns=table_columns show_actions=True actions=table_actions %}
</div>

{% load static %}
<script src="{% static 'eval/js/eval-gold-sets.js' %}"></script>
{% endblock %}