{% 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>

  <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>
        <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 normal-case tracking-normal 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>
      </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>
      <div>
        <label for="system_prompt" class="block text-xs text-gray-400 mb-1">System Prompt</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>
</div>

<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(); });
  });

  // --- 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 %}