{% extends "base.html" %}
{% load json_filters %}
{% block title %}{% if agent %}Edit {{ agent.name }}{% else %}New Agent{% endif %} — SimpleAudit{% endblock %}
{% block content %}
<div class="max-w-3xl">
  <div class="flex items-center justify-between mb-5">
    <h1 class="text-lg font-semibold text-gray-100">{% if agent %}Edit Agent{% else %}New Agent{% endif %}</h1>
    <a href="{% url 'agents' %}" class="text-xs text-gray-400 hover:text-white">← Back to agents</a>
  </div>

  {% if not chat_enabled %}
  <div class="bg-surface-raised rounded-xl border border-gray-800 p-6 text-sm text-gray-400">
    Chat is not enabled on this server, so agents cannot be managed here.
    Enable it with <code class="text-gray-300">SIMPLEAUDIT_CHAT=embedded</code>.
  </div>
  {% else %}
  <form method="post" class="space-y-6">
    {% csrf_token %}

    <!-- Identity -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4 space-y-4">
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">Identity</legend>
      <div>
        <label for="name" class="block text-xs text-gray-400 mb-1">Name <span class="text-red-400">*</span></label>
        <input type="text" id="name" name="name" required value="{{ agent.name|default:'' }}"
               class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50">
      </div>
      <div>
        <label for="description" class="block text-xs text-gray-400 mb-1">Description</label>
        <textarea id="description" name="description" rows="2"
                  class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50">{{ agent.description|default:'' }}</textarea>
      </div>
    </fieldset>

    {% if agent and chat_enabled %}
    <!-- Chat sync status (live entry fetched on page load) -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4">
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide flex items-center justify-between gap-4 w-full">
        <span>Chat availability</span>
        <span class="flex items-center gap-3 normal-case tracking-normal">
          {% if agent.external_id %}
          <button type="button" data-expose
                  title="Get an API endpoint + key so other apps can call this agent"
                  aria-label="Expose {{ agent.name }} via API"
                  class="inline-flex items-center gap-1.5 text-[11px] text-gray-400 hover:text-accent">
            <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M9.5 1 3 9h3.5L6 15l6.5-8H9l1-6z"/></svg>
            Expose via API
          </button>
          {% endif %}
          <a href="{% url 'agent_test_chat' agent.id %}" title="Open a chat with {{ agent.name }}"
             aria-label="Chat with {{ agent.name }}"
             class="inline-flex items-center gap-1.5 text-[11px] text-gray-400 hover:text-accent">
            <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 1.5A6.5 6.5 0 0 0 1.5 8c0 1.1.27 2.15.75 3.08L1.5 14.5l3.55-.72A6.5 6.5 0 1 0 8 1.5Zm0 1.5a5 5 0 1 1-2.55 9.3l-.34-.18-2.06.42.43-1.98-.22-.34A5 5 0 0 1 8 3Z"/></svg>
            Test in Chat
          </a>
        </span>
      </legend>
      {% if agent.external_id %}
        {% if openwebui_live %}
        <p class="text-xs text-gray-300">
          <span class="text-emerald-400">● Synced</span> as model
          <code class="font-mono text-[11px] text-gray-400">{{ openwebui_live.model_id }}</code>
          {% if openwebui_live.base_model_id %} inheriting <code class="font-mono text-[11px] text-gray-400">{{ openwebui_live.base_model_id }}</code>{% endif %}
          {% if openwebui_live.knowledge %}
          · {{ openwebui_live.knowledge|length }} knowledge base{{ openwebui_live.knowledge|length|pluralize }}
          {% endif %}
        </p>
        {% else %}
        <p class="text-xs text-amber-400">
          ⚠ Registered in Studio as <code class="font-mono text-[11px]">{{ agent.external_id }}</code>,
          but the chat entry is not reachable right now. Save the agent to retry the sync.
        </p>
        {% endif %}
      {% else %}
      <p class="text-xs text-gray-500">Not available in chat yet — saving this agent will publish it there.</p>
      {% endif %}
    </fieldset>
    {% endif %}

    <!-- Model -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4 space-y-4">
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">Base Model</legend>
      <div>
        <label for="base_model" class="block text-xs text-gray-400 mb-1">Model <span class="text-red-400">*</span></label>
        <select id="base_model" name="base_model" required
                class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 focus:outline-none focus:ring-2 focus:ring-accent/50">
          <option value="">— Select a model —</option>
          {% for m in models %}
          <option value="{{ m.id }}" {% if agent and agent.base_model_id == m.id %}selected{% endif %}>
            {{ m.display_name }} ({{ m.connection.name }})
          </option>
          {% endfor %}
        </select>
      </div>
    </fieldset>

    <!-- Instructions -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4 space-y-4">
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">Instructions</legend>
      {% if system_prompts %}
      <fieldset data-axis="system_prompt_version">
        <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide mb-1">System Prompt</legend>
        <p class="text-xs text-gray-500 mb-2">Pick one prompt to fill the box below; open <em>Versions</em> to choose an older one. Type your own to override.</p>
        <div class="flex items-center gap-2 mb-2">
          <input type="search" data-filter placeholder="Search prompts…" aria-label="Search predefined prompts"
                 class="flex-1 px-2.5 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-accent/50">
          <a href="{% url 'prompts' %}" target="_blank" class="shrink-0 text-xs text-accent hover:text-accent-hover hover:underline">＋ New</a>
        </div>
        <div data-filter-list class="space-y-1.5 h-60 overflow-y-auto pr-1">
          {% for sp in system_prompts %}{% if sp.version_list %}
          <div data-filter-item data-prompt-row="system_prompt_version" class="rounded-lg border border-gray-800 bg-surface-overlay/40 text-sm">
            <div class="flex items-start gap-2 px-2.5 py-2">
              <label for="sp-{{ sp.id }}" class="flex items-start gap-2 min-w-0 flex-1 cursor-pointer">
                <input type="radio" name="system_prompt_version" value="{{ sp.version_list.0.id }}" data-content="{{ sp.version_list.0.content|escapejs }}" data-version="{{ sp.version_list.0.version }}" data-latest data-row-radio id="sp-{{ sp.id }}" class="mt-0.5 accent-emerald-500" {% if sp.ticked %}checked{% endif %}>
                <span class="min-w-0">
                  <span class="text-gray-200 block truncate">{{ sp.name }}</span>
                  <span class="text-[11px] text-gray-500" data-prompt-summary>v{{ sp.version_list.0.version }} · latest</span>
                </span>
              </label>
              <button type="button" data-version-toggle aria-expanded="{% if sp.show_versions %}true{% else %}false{% endif %}"
                      class="shrink-0 text-[11px] text-gray-400 hover:text-accent px-1.5 py-0.5 rounded hover:bg-surface-overlay">Versions {% if sp.show_versions %}▴{% else %}▾{% endif %}</button>
            </div>
            <div data-version-list class="{% if not sp.show_versions %}hidden{% endif %} border-t border-gray-800 px-2.5 py-1.5 space-y-0.5 max-h-44 overflow-y-auto">
              {% for v in sp.version_list %}
              <div class="flex items-baseline gap-2 text-xs py-0.5">
                <label class="flex items-baseline gap-2 min-w-0 flex-1 cursor-pointer">
                  <input type="radio" name="system_prompt_version" value="{{ v.id }}" data-content="{{ v.content|escapejs }}" data-version="{{ v.version }}" {% if forloop.first %}data-latest{% endif %}
                         {% if v.id|stringformat:"d" in sp.ticked %}checked{% endif %}>
                  <span class="text-gray-200 shrink-0">v{{ v.version }}{% if forloop.first %} <span class="text-accent">latest</span>{% endif %}</span>
                  <span class="text-gray-500 truncate" title="{{ v.content|truncatechars:300 }}">{% if v.note %}{{ v.note|truncatechars:60 }}{% else %}{{ v.content|truncatechars:60 }}{% endif %}</span>
                </label>
                <a href="{% url 'prompt_detail' sp.id %}?v={{ v.version }}" target="_blank" rel="noopener"
                   title="Open v{{ v.version }} of {{ sp.name }} in a new tab" class="shrink-0 text-gray-500 hover:text-accent">View ↗</a>
              </div>
              {% endfor %}
            </div>
          </div>
          {% endif %}{% endfor %}
          <div data-filter-empty class="hidden px-2.5 py-2 text-xs text-gray-500">No matches.</div>
        </div>
      </fieldset>
      {% endif %}
      <div>
        <label for="system_prompt" class="block text-xs text-gray-400 mb-1">Custom System Prompt <span class="text-gray-600">{% if system_prompts %}(optional — type to override the picker){% endif %}</span></label>
        <textarea id="system_prompt" name="system_prompt" rows="5"
                  class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100 font-mono focus:outline-none focus:ring-2 focus:ring-accent/50"
                  placeholder="You are a helpful assistant that…">{{ agent.system_prompt|default:'' }}</textarea>
      </div>
    </fieldset>

    <!-- Knowledge -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4 space-y-3" data-kb-fieldset>
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">
        Knowledge Bases
        {% if chat_enabled %}
        <a href="{% url 'agents_knowledge' %}?create=1" target="_blank" rel="noopener"
           class="ml-2 normal-case font-normal tracking-normal text-[11px] text-gray-500 hover:text-white transition-colors"
           title="Open Knowledge Bases in a new tab and start creating">＋ New</a>
        {% endif %}
      </legend>
      <div class="flex items-center gap-2">
        <input type="search" data-filter placeholder="Search knowledge bases…" aria-label="Search knowledge bases"
               class="flex-1 px-2.5 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-accent/50">
        <button type="button" data-sync-btn class="shrink-0 px-2 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-[11px] text-gray-400 hover:text-white hover:border-gray-500 transition-colors" title="Pull latest resources">
          ⟳ Sync
        </button>
      </div>
      {% if knowledge_bases %}
      <div data-filter-list class="space-y-1.5 max-h-52 overflow-y-auto pr-1">
        {% for kb in knowledge_bases %}
        <label data-filter-item class="flex items-center gap-2 text-sm text-gray-300">
          <input type="checkbox" name="knowledge_bases" value="{{ kb.id }}"
                 {% if agent and kb in agent.knowledge_bases.all %}checked{% endif %}
                 class="rounded border-gray-600 bg-surface-overlay text-accent focus:ring-accent/50">
          <span>{{ kb.name }}</span>
          {% if kb.description %}<span class="text-[10px] text-gray-500 truncate max-w-[12rem]">{{ kb.description }}</span>{% endif %}
        </label>
        {% endfor %}
        <div data-filter-empty class="hidden px-2.5 py-2 text-xs text-gray-500">No matches.</div>
      </div>
      {% else %}
      <p class="text-xs text-gray-500">No knowledge bases yet. Click <strong>Sync</strong> to pull the latest resources.</p>
      {% endif %}
    </fieldset>

    <!-- Retrieval -->
    {% if openwebui_rag %}
    <!-- Read-only global retrieval context. The platform setting remains authoritative. -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4">
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">Global retrieval configuration</legend>
      <p class="text-xs text-gray-500 mb-3">Configured by a platform admin. These values apply to all agents; this page does not edit them.</p>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-x-4 gap-y-2 text-xs">
        <div><span class="text-gray-500">Embedding</span><div class="text-gray-200 truncate" title="{{ openwebui_rag.embedding_model }}">{{ openwebui_rag.embedding_engine|default:"local" }} · {{ openwebui_rag.embedding_model|default:"default" }}</div></div>
        <div><span class="text-gray-500">Splitter</span><div class="text-gray-200">{{ openwebui_rag.text_splitter|default:"default" }}</div></div>
        <div><span class="text-gray-500">Chunks</span><div class="text-gray-200">{{ openwebui_rag.chunk_size|default:"—" }} / {{ openwebui_rag.chunk_overlap|default:"—" }}</div></div>
        <div><span class="text-gray-500">Top K</span><div class="text-gray-200">{{ openwebui_rag.top_k|default:"—" }}</div></div>
        <div><span class="text-gray-500">Hybrid search</span><div class="text-gray-200">{% if openwebui_rag.hybrid_search %}On{% else %}Off{% endif %}</div></div>
        <div><span class="text-gray-500">Reranking</span><div class="text-gray-200">{{ openwebui_rag.reranking_model|default:"Off" }}</div></div>
        <div><span class="text-gray-500">Full context</span><div class="text-gray-200">{% if openwebui_rag.full_context %}On{% else %}Off{% endif %}</div></div>
        <div><span class="text-gray-500">Extraction</span><div class="text-gray-200">{{ openwebui_rag.content_extraction_engine|default:"default" }}</div></div>
      </div>
    </fieldset>
    {% endif %}

    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4 space-y-4">
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">Retrieval</legend>
      <p class="text-xs text-gray-500">These query-time settings apply only to this agent. Embedding and chunking remain platform-wide.</p>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <label class="block text-xs text-gray-400">Search mode
          <select name="search_mode" class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100">
            <option value="semantic" {% if retrieval_settings.search_mode == 'semantic' %}selected{% endif %}>Semantic</option>
            <option value="hybrid" {% if retrieval_settings.search_mode == 'hybrid' %}selected{% endif %}>Hybrid (semantic + BM25)</option>
          </select>
        </label>
        <label class="block text-xs text-gray-400">Top K
          <input type="number" min="1" name="top_k" value="{{ retrieval_settings.top_k }}" class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100">
        </label>
        <label class="block text-xs text-gray-400">Rerank top K
          <input type="number" min="1" name="rerank_top_k" value="{{ retrieval_settings.rerank_top_k }}" class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100">
        </label>
        <label class="block text-xs text-gray-400">Relevance threshold
          <input type="number" step="0.01" min="0" max="1" name="relevance_threshold" value="{{ retrieval_settings.relevance_threshold|default:'' }}" class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100">
        </label>
        <label class="block text-xs text-gray-400">BM25 weight
          <input type="number" step="0.01" min="0" max="1" name="bm25_weight" value="{{ retrieval_settings.bm25_weight|default:'' }}" class="mt-1 w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm text-gray-100">
        </label>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-gray-300">
        <label class="flex items-center gap-2"><input type="checkbox" name="rerank_enabled" {% if retrieval_settings.rerank_enabled %}checked{% endif %} class="rounded border-gray-600 bg-surface-overlay text-accent"> Enable reranking</label>
        <label class="flex items-center gap-2"><input type="checkbox" name="full_context" {% if retrieval_settings.full_context %}checked{% endif %} class="rounded border-gray-600 bg-surface-overlay text-accent"> Full context mode</label>
      </div>
    </fieldset>

    <!-- Tools -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4 space-y-3" data-tools-fieldset>
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">
        Tools
        {% if chat_enabled %}
        <a href="{% url 'agents_tools' %}?create=1" target="_blank" rel="noopener"
           class="ml-2 normal-case font-normal tracking-normal text-[11px] text-gray-500 hover:text-white transition-colors"
           title="Open Tools in a new tab and start creating">＋ New</a>
        {% endif %}
      </legend>
      <div class="flex items-center gap-2">
        <input type="search" data-filter placeholder="Search tools…" aria-label="Search tools"
               class="flex-1 px-2.5 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-accent/50">
        <button type="button" data-sync-btn class="shrink-0 px-2 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-[11px] text-gray-400 hover:text-white hover:border-gray-500 transition-colors" title="Pull latest resources">
          ⟳ Sync
        </button>
      </div>
      {% if tools %}
      <div data-filter-list class="space-y-1.5 max-h-52 overflow-y-auto pr-1">
        {% for tool in tools %}
        <label data-filter-item class="flex items-center gap-2 text-sm text-gray-300">
          <input type="checkbox" name="tools" value="{{ tool.id }}"
                 {% if agent and tool in agent.tools.all %}checked{% endif %}
                 class="rounded border-gray-600 bg-surface-overlay text-accent focus:ring-accent/50">
          <span>{{ tool.name }}</span>
          <span class="text-[10px] text-gray-500">{{ tool.get_type_display }}</span>
          {% if tool.has_side_effects %}<span class="text-[10px] text-amber-400">⚡ side effects</span>{% endif %}
          {% if tool.external_network %}<span class="text-[10px] text-sky-400">🌐 network</span>{% endif %}
        </label>
        {% endfor %}
        <div data-filter-empty class="hidden px-2.5 py-2 text-xs text-gray-500">No matches.</div>
      </div>
      {% else %}
      <p class="text-xs text-gray-500">No tools yet. Click <strong>Sync</strong> to pull the latest resources.</p>
      {% endif %}
    </fieldset>

    <!-- Model controls -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4 space-y-3">
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">Model capabilities</legend>
      <p class="text-xs text-gray-500">Controls available on this agent's chat model. Knowledge bases and custom tools are selected above.</p>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
        {% for cap in capability_options %}
        <label class="flex items-start gap-2 text-sm text-gray-300" title="{{ cap.help }}">
          <input type="checkbox" name="model_capability_{{ cap.key }}" value="on"
                 {% if agent_capabilities.model|get_item:cap.key %}checked{% endif %}
                 class="checkbox checkbox-sm mt-0.5">
          <span><span class="block">{{ cap.label }}</span><span class="block text-[11px] text-gray-500">{{ cap.help }}</span></span>
        </label>
        {% endfor %}
      </div>
    </fieldset>

    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4 space-y-3">
      <legend class="px-2 text-xs font-semibold text-gray-300 uppercase tracking-wide">Builtin tools</legend>
      <p class="text-xs text-gray-500">Controls which platform tools this agent may use. Availability also depends on platform settings and user permissions.</p>
      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
        {% for tool in builtin_tool_options %}
        <label class="flex items-start gap-2 text-sm text-gray-300" title="{{ tool.help }}">
          <input type="checkbox" name="builtin_tool_{{ tool.key }}" value="on"
                 {% if agent_capabilities.builtin_tools|get_item:tool.key %}checked{% endif %}
                 class="checkbox checkbox-sm mt-0.5">
          <span><span class="block">{{ tool.label }}</span><span class="block text-[11px] text-gray-500">{{ tool.help }}</span></span>
        </label>
        {% endfor %}
      </div>
    </fieldset>

    <!-- Enabled -->
    <fieldset class="bg-surface-raised rounded-xl border border-gray-800 p-4">
      <label class="flex items-center gap-2 text-sm text-gray-300">
        <input type="checkbox" name="enabled" value="on" {% if not agent or agent.enabled %}checked{% endif %}
               class="rounded border-gray-600 bg-surface-overlay text-accent focus:ring-accent/50">
        <span>Enabled</span>
      </label>
    </fieldset>

    <!-- Actions -->
    <div class="flex items-center gap-3">
      <button type="submit" class="px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover">
        {% if agent %}Save changes{% else %}Create agent{% endif %}
      </button>
    </div>
  </form>
  {% endif %}
</div>

{% if agent and chat_enabled and agent.external_id %}
<!-- Expose this agent via API (endpoint + personal key, issue #24) -->
<dialog id="expose-dialog" class="sa-dialog w-[min(40rem,calc(100vw-2rem))] rounded-xl border border-gray-700 bg-surface-raised p-0 shadow-2xl">
  <div class="p-5 space-y-4">
    <div class="flex items-center justify-between">
      <h2 class="text-base font-semibold text-gray-100">Expose <span id="expose-model-name"></span> via API</h2>
      <button type="button" data-dialog-close aria-label="Close" title="Close" class="w-7 h-7 rounded text-gray-500 hover:text-gray-200">✕</button>
    </div>
    <p class="text-xs text-gray-400">Point any OpenAI-compatible client at this endpoint with your personal API key. The key acts as you — it can only call agents you can see.</p>

    <div class="space-y-3 text-xs">
      <div>
        <p class="text-gray-500 mb-1">Endpoint base URL</p>
        <div class="flex items-center gap-2">
          <code id="expose-endpoint" class="flex-1 bg-surface-overlay border border-gray-700 rounded-lg px-3 py-2 font-mono text-[11px] text-gray-200 break-all"></code>
          <button type="button" data-copy-target="expose-endpoint" class="px-2.5 py-2 rounded-lg text-xs text-gray-300 bg-surface-overlay hover:text-white whitespace-nowrap">Copy</button>
        </div>
      </div>
      <div>
        <p class="text-gray-500 mb-1">Model ID</p>
        <div class="flex items-center gap-2">
          <code id="expose-model-id" class="flex-1 bg-surface-overlay border border-gray-700 rounded-lg px-3 py-2 font-mono text-[11px] text-gray-200 break-all"></code>
          <button type="button" data-copy-target="expose-model-id" class="px-2.5 py-2 rounded-lg text-xs text-gray-300 bg-surface-overlay hover:text-white whitespace-nowrap">Copy</button>
        </div>
      </div>
      <div>
        <p class="text-gray-500 mb-1">Personal API key</p>
        <div class="flex items-center gap-2">
          <code id="expose-key" class="flex-1 bg-surface-overlay border border-gray-700 rounded-lg px-3 py-2 font-mono text-[11px] text-gray-200 break-all min-h-[2.35rem]">—</code>
          <button type="button" id="expose-issue" class="px-2.5 py-2 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover whitespace-nowrap">Generate my key</button>
          <button type="button" id="expose-revoke" class="px-2.5 py-2 rounded-lg text-xs text-gray-300 bg-surface-overlay hover:text-red-300 whitespace-nowrap" disabled>Revoke</button>
        </div>
        <p id="expose-key-warning" class="hidden mt-1.5 text-amber-300 bg-amber-900/20 rounded px-2 py-1.5">Copy your key now — it's shown only once and can't be retrieved later.</p>
      </div>
    </div>

    <div>
      <p class="text-gray-500 mb-1">Example (Python)</p>
      <pre id="expose-snippet" class="bg-surface-overlay border border-gray-700 rounded-lg p-3 font-mono text-[11px] text-gray-200 whitespace-pre-wrap break-all"></pre>
    </div>

    <p id="expose-error" class="hidden text-xs text-red-300 bg-red-900/20 rounded px-2 py-1.5"></p>
  </div>
</dialog>
<script>
(function() {
  // --- Expose this agent via API (endpoint + personal key) ---
  const exposeDialog = document.getElementById('expose-dialog');
  if (exposeDialog) {
    const $ = sel => document.querySelector(sel);
    const AGENT_ID = "{{ agent.external_id|escapejs }}";
    function endpointBase() { return location.origin.replace(/\/$/, '') + '/api/v1'; }
    function updateSnippet() {
      const ep = $('#expose-endpoint').textContent.trim();
      const mid = $('#expose-model-id').textContent.trim();
      const key = $('#expose-key').textContent.trim();
      const shownKey = key && key !== '—' ? key : 'sk-your-api-key';
      $('#expose-snippet').textContent =
        `from openai import OpenAI\n\n` +
        `client = OpenAI(\n` +
        `    base_url="${ep}",\n` +
        `    api_key="${shownKey}",\n` +
        `)\n\n` +
        `resp = client.chat.completions.create(\n` +
        `    model="${mid}",\n` +
        `    messages=[{"role": "user", "content": "Hello"}],\n` +
        `)\nprint(resp.choices[0].message.content)`;
    }
    function setError(msg) {
      const el = $('#expose-error');
      if (!msg) { el.classList.add('hidden'); el.textContent = ''; return; }
      el.classList.remove('hidden'); el.textContent = msg;
    }
    function openExpose() {
      $('#expose-model-name').textContent = "{{ agent.name|escapejs }}";
      $('#expose-endpoint').textContent = endpointBase();
      $('#expose-model-id').textContent = AGENT_ID;
      $('#expose-key').textContent = '—';
      $('#expose-key-warning').classList.add('hidden');
      $('#expose-revoke').disabled = true;
      $('#expose-issue').textContent = 'Generate my key';
      setError('');
      updateSnippet();
      exposeDialog.showModal();
    }
    document.querySelectorAll('[data-expose]').forEach(b => b.addEventListener('click', openExpose));
    document.addEventListener('click', e => { if (e.target.closest('[data-dialog-close]')) e.target.closest('dialog').close(); });
    document.addEventListener('click', async e => {
      const btn = e.target.closest('[data-copy-target]'); if (!btn) return;
      const val = $(`#${btn.dataset.copyTarget}`).textContent.trim();
      try { await navigator.clipboard.writeText(val); btn.textContent = 'Copied!'; }
      catch { btn.textContent = 'Failed'; }
      setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
    });
    $('#expose-issue').addEventListener('click', async () => {
      const btn = $('#expose-issue'); btn.disabled = true; btn.textContent = 'Generating…';
      setError('');
      try {
        const data = await apiFetch('{% url "api-v1-key-issue" %}', { body: { origin: location.origin } });
        $('#expose-key').textContent = data.token;
        $('#expose-key-warning').classList.remove('hidden');
        $('#expose-revoke').disabled = false;
        updateSnippet();
      } catch (err) { setError(err.message); }
      finally { btn.disabled = false; btn.textContent = 'Regenerate my key'; }
    });
    $('#expose-revoke').addEventListener('click', async () => {
      if (!confirm('Revoke your current API key? Anything using it stops working immediately.')) return;
      const btn = $('#expose-revoke'); btn.disabled = true;
      try {
        await apiFetch('{% url "api-v1-key-revoke" %}');
        $('#expose-key').textContent = '—';
        $('#expose-key-warning').classList.add('hidden');
        $('#expose-revoke').disabled = true;
        $('#expose-issue').textContent = 'Generate my key';
        updateSnippet();
      } catch (err) { setError(err.message); btn.disabled = false; }
    });
  }
})();
</script>
{% endif %}

<script>
(function() {
  // --- Search filter for KB and Tools pickers ---
  document.querySelectorAll('[data-filter]').forEach(input => {
    const scope = input.closest('fieldset');
    const apply = () => {
      const q = input.value.trim().toLowerCase();
      let shown = 0;
      scope.querySelectorAll('[data-filter-item]').forEach(item => {
        const hit = !q || item.textContent.toLowerCase().includes(q);
        item.classList.toggle('hidden', !hit);
        if (hit) shown++;
      });
      const empty = scope.querySelector('[data-filter-empty]');
      if (empty) empty.classList.toggle('hidden', shown > 0);
    };
    input.addEventListener('input', apply);
    input.addEventListener('keydown', e => { if (e.key === 'Enter') e.preventDefault(); });
  });

  // --- System Prompt picker: one selectable prompt. Each prompt row has a radio
  //     on its name (= latest) plus a "Versions ▾" expander with a radio per
  //     version. All radios share one name → exactly one is selected; picking
  //     any fills the box below. Typing your own text clears the selection. ---
  (function() {
    const fieldset = document.querySelector('[data-axis="system_prompt_version"]');
    const ta = document.getElementById('system_prompt');
    if (!fieldset || !ta) return;
    const allRadios = () => [...fieldset.querySelectorAll('input[name="system_prompt_version"]')];
    function syncAll() {
      const checked = allRadios().find(r => r.checked);
      fieldset.querySelectorAll('[data-prompt-row]').forEach(row => {
        const rs = [...row.querySelectorAll('input[name="system_prompt_version"]')];
        const rowChecked = rs.find(r => r.checked);
        const summary = row.querySelector('[data-prompt-summary]');
        if (!summary) return;
        if (rowChecked) summary.textContent = `v${rowChecked.dataset.version}` + (rowChecked.hasAttribute('data-latest') ? ' · latest' : ' · older version');
        else { const latest = rs.find(r => 'latest' in r.dataset); summary.textContent = latest ? `v${latest.dataset.version} · latest` : ''; }
      });
      if (checked && ta.value !== checked.dataset.content) ta.value = checked.dataset.content || '';
    }
    allRadios().forEach(r => r.addEventListener('change', syncAll));
    fieldset.querySelectorAll('[data-prompt-row]').forEach(row => {
      const btn = row.querySelector('[data-version-toggle]');
      if (btn) btn.addEventListener('click', () => {
        const list = row.querySelector('[data-version-list]');
        const open = list.classList.toggle('hidden') === false;
        btn.setAttribute('aria-expanded', String(open));
        btn.textContent = open ? 'Versions ▴' : 'Versions ▾';
      });
    });
    ta.addEventListener('input', () => {
      allRadios().forEach(r => { r.checked = false; });
      fieldset.querySelectorAll('[data-prompt-summary]').forEach(s => s.textContent = 'custom');
    });
    syncAll();
  })();

  // --- Sync button: POST to /agents/sync/ then reload ---
  document.querySelectorAll('[data-sync-btn]').forEach(btn => {
    btn.addEventListener('click', async () => {
      btn.disabled = true;
      btn.textContent = 'Syncing…';
      try {
        const resp = await fetch('{% url "agent_sync" %}', {
          method: 'POST',
          headers: {
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
            'Content-Type': 'application/json',
          },
        });
        const data = await resp.json();
        if (resp.ok) {
          btn.textContent = `✓ ${data.knowledge_bases} KB, ${data.tools} tools`;
          setTimeout(() => location.reload(), 800);
        } else {
          btn.textContent = '✗ ' + (data.error || 'Failed');
          btn.disabled = false;
        }
      } catch (e) {
        btn.textContent = '✗ Error';
        btn.disabled = false;
      }
    });
  });
})();
</script>
{% endblock %}