{% extends "base.html" %}
{% block title %}Models — SimpleAudit{% endblock %}
{% block content %}
<h1 class="text-lg font-semibold text-gray-100 mb-6">Model Registry</h1>
{% if error %}
<div class="mb-4 text-sm text-red-300 bg-red-900/30 rounded-lg px-4 py-2">{{ error }}</div>
{% endif %}

<!-- ═══ CONNECTIONS ═══════════════════════════════════════════════════════ -->
<div class="bg-surface-raised rounded-xl border border-gray-800 p-4 mb-6">
  <div class="flex items-center justify-between flex-wrap gap-3 mb-3">
    <h2 class="text-sm font-semibold text-gray-300">Connections</h2>
    <form method="get" class="flex gap-2">
      <input type="text" name="q" value="{{ search_query }}" placeholder="Search…" aria-label="Search connections and models"
             class="px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs w-48 focus:outline-none focus:ring-2 focus:ring-accent/50">
      <button type="submit" class="px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-400 hover:text-accent transition-colors">Search</button>
      {% if search_query %}<a href="{% url 'models' %}" class="px-2 py-1.5 text-xs text-gray-600 hover:text-accent">✕</a>{% endif %}
    </form>
  </div>

  {% if connections %}
  <div class="space-y-3 mb-4">
    {% for conn in connections %}
    <div id="conn-{{ conn.id }}" class="rounded-lg border border-gray-800/60 p-3">
      <div class="flex items-center justify-between flex-wrap gap-2">
        <div class="flex items-center gap-3 flex-wrap">
          <span class="font-medium text-gray-200 text-sm">{{ conn.name }}</span>
          <span class="text-xs text-gray-500">{{ conn.provider }} · {{ conn.base_url }}</span>
          {% if conn.has_key %}<span class="text-xs text-emerald-500">🔑 key set</span>{% else %}<span class="text-xs text-yellow-500">⚠ no key</span>{% endif %}
          <span class="text-xs text-gray-600">{{ conn.models.count }} model(s)</span>
        </div>
        <div class="flex items-center gap-2">
          <button onclick="pingConnection({{ conn.id }}, [{% for m in conn.models.all %}{{ m.id }}{% if not forloop.last %},{% endif %}{% endfor %}])"
                  class="text-xs text-gray-500 hover:text-emerald-400 transition-colors" title="Ping this server and check all models">check</button>
          <span id="conn-status-{{ conn.id }}" class="hidden text-[10px] px-1.5 py-0.5 rounded"></span>
          <button onclick="document.getElementById('edit-conn-{{ conn.id }}').classList.toggle('hidden')"
                  class="text-xs text-gray-500 hover:text-accent transition-colors">Edit</button>
          <form method="post" action="{% url 'connection_delete' conn.id %}" onsubmit="return confirm('Delete connection "{{ conn.name }}" and all its models?')">
            {% csrf_token %}
            <button class="text-xs text-gray-600 hover:text-red-400">✕</button>
          </form>
        </div>
      </div>

      <!-- Models under this connection -->
      {% if conn.models.all %}
      <div class="mt-2 pl-3 border-l-2 border-gray-800 space-y-1">
        {% for m in conn.models.all %}
        <div class="text-xs text-gray-400 group">
          <div class="flex items-center justify-between">
            <span class="flex items-center gap-1.5">
              <span id="model-dot-{{ m.id }}" class="hidden w-2 h-2 rounded-full"></span>
              <span id="model-label-{{ m.id }}">{{ m.display_name|default:m.model_id }}{% if m.display_name %} <span class="text-gray-600">({{ m.model_id }})</span>{% endif %}</span>
            </span>
            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
              <button onclick="editModel({{ m.id }}, '{{ m.display_name }}', '{{ m.model_id }}')"
                      class="text-gray-600 hover:text-accent px-1" title="Edit name / ID">✎</button>
              <form method="post" onsubmit="return confirm('Remove {{ m.display_name|default:m.model_id }}?')">
                {% csrf_token %}
                <input type="hidden" name="action" value="delete_model">
                <input type="hidden" name="rm_id" value="{{ m.id }}">
                <button class="text-gray-600 hover:text-red-400 px-1" title="Delete model">✕</button>
              </form>
            </div>
          </div>
          <!-- Inline edit form (hidden by default) -->
          <form id="edit-model-{{ m.id }}" method="post" class="hidden mt-1 flex gap-2 items-center">
            {% csrf_token %}
            <input type="hidden" name="action" value="edit_model">
            <input type="hidden" name="rm_id" value="{{ m.id }}">
            <input type="text" name="model_display_name" value="{{ m.display_name }}" placeholder="Display name" aria-label="Edit display name"
                   class="flex-1 px-2 py-1 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
            <input type="text" name="model_id_new" value="{{ m.model_id }}" placeholder="Model ID" aria-label="Edit model ID"
                   class="w-32 px-2 py-1 rounded bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-1 focus:ring-accent/50">
            <button class="px-2 py-1 rounded bg-accent/20 text-accent text-xs hover:bg-accent/30">Save</button>
            <button type="button" onclick="cancelEdit({{ m.id }})"
                    class="px-2 py-1 rounded text-gray-500 text-xs hover:text-gray-300">Cancel</button>
          </form>
        </div>
        {% endfor %}
      </div>
      {% endif %}

      <!-- Add model to this connection -->
      <form method="post" class="mt-2 pl-3 flex gap-2 items-end">
        {% csrf_token %}
        <input type="hidden" name="action" value="add_model">
        <input type="hidden" name="model_conn_id" value="{{ conn.id }}">
        <div class="flex-1">
          <label class="block text-xs text-gray-600 mb-0.5">Add model ID</label>
          <input type="text" name="model_id" list="discovered-{{ conn.id }}" placeholder="e.g. Qwen3.8-27B"
                 class="w-full px-2 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-accent/50">
          <datalist id="discovered-{{ conn.id }}"></datalist>
        </div>
        <div class="flex-1">
          <label class="block text-xs text-gray-600 mb-0.5">Display name (optional)</label>
          <input type="text" name="model_display_name" placeholder="auto = model ID"
                 class="w-full px-2 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs focus:outline-none focus:ring-2 focus:ring-accent/50">
        </div>
        <button type="button" onclick="discoverForConn({{ conn.id }}, '{{ conn.base_url }}', '{{ conn.api_key_direct|default:"" }}', '{{ conn.provider }}')"
                class="px-2 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-400 hover:text-accent hover:border-accent/50 whitespace-nowrap">🔍</button>
        <button class="px-3 py-1.5 rounded-lg bg-surface-overlay border border-gray-700 text-xs text-gray-300 hover:bg-accent/20 hover:text-accent whitespace-nowrap">+ Add</button>
      </form>

      <!-- Edit connection form -->
      <div id="edit-conn-{{ conn.id }}" class="hidden mt-3 pt-3 border-t border-gray-800/60">
        <form method="post" class="grid grid-cols-1 md:grid-cols-3 gap-3">
          {% csrf_token %}
          <input type="hidden" name="action" value="edit_connection">
          <input type="hidden" name="conn_id" value="{{ conn.id }}">
          <div>
            <label class="block text-xs text-gray-500 mb-1">Name</label>
            <input type="text" name="conn_name" value="{{ conn.name }}" required
                   class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Base URL</label>
            <input type="url" name="conn_base_url" value="{{ conn.base_url }}" required
                   class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">Provider</label>
            <select name="conn_provider" class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
              <option value="openai"{% if conn.provider == "openai" %} selected{% endif %}>openai</option>
              <option value="anthropic"{% if conn.provider == "anthropic" %} selected{% endif %}>anthropic</option>
              <option value="google"{% if conn.provider == "google" %} selected{% endif %}>google</option>
            </select>
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">API Key (env var)</label>
            <input type="text" name="conn_secret_ref" value="{{ conn.secret_reference }}" placeholder="MY_API_KEY"
                   class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
          </div>
          <div>
            <label class="block text-xs text-gray-500 mb-1">API Key (direct)</label>
            <input type="password" name="conn_api_key" placeholder="sk-... (leave blank to keep)" autocomplete="off"
                   class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-accent/50">
          </div>
          <div class="flex items-end gap-3">
            <label class="flex items-center gap-2 text-xs text-gray-400">
              <input type="checkbox" name="conn_enabled" value="1" {% if conn.enabled %}checked{% endif %} class="rounded"> Enabled
            </label>
            <button class="px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover ml-auto">Save</button>
          </div>
        </form>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="text-sm text-gray-500 mb-4">No connections registered.</p>
  {% endif %}

  <!-- Add connection form -->
  <form method="post" class="pt-3 border-t border-gray-800">
    {% csrf_token %}
    <input type="hidden" name="action" value="add_connection">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">
      <div>
        <label class="block text-xs text-gray-500 mb-1">Connection Name</label>
        <input type="text" name="conn_name" placeholder="Simulachat" required
               class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">Base URL</label>
        <input type="url" name="conn_base_url" placeholder="https://api.example.com/v1" required
               class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">Provider</label>
        <select name="conn_provider" class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
          <option value="openai">openai</option>
          <option value="anthropic">anthropic</option>
          <option value="google">google</option>
        </select>
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">API Key (env var)</label>
        <input type="text" name="conn_secret_ref" placeholder="SIMULACHAT_API_KEY"
               class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50">
      </div>
      <div>
        <label class="block text-xs text-gray-500 mb-1">API Key (direct)</label>
        <input type="password" name="conn_api_key" placeholder="sk-..." autocomplete="off"
               class="w-full px-3 py-2 rounded-lg bg-surface-overlay border border-gray-700 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-accent/50">
      </div>
    </div>
    <button class="px-4 py-2 rounded-lg bg-accent text-white text-sm font-medium hover:bg-accent-hover">+ Add Connection</button>
  </form>
</div>

<script>
async function discoverForConn(connId, baseUrl, apiKey, provider) {
  const btn = event.currentTarget;
  const datalist = document.getElementById('discovered-' + connId);
  btn.textContent = '⏳';
  btn.disabled = true;
  try {
    const body = new URLSearchParams({ base_url: baseUrl, api_key_direct: apiKey, provider });
    const resp = await fetch('{% url "models_discover" %}', { method: 'POST', headers: {'X-CSRFToken': getCookie('csrftoken')}, body });
    const data = await resp.json();
    if (!resp.ok) throw new Error(data.error || 'Request failed');
    datalist.innerHTML = '';
    data.models.forEach(m => {
      const opt = document.createElement('option');
      opt.value = m;
      datalist.appendChild(opt);
    });
    btn.textContent = `✓ ${data.models.length}`;
    // Focus the input so user sees the dropdown
    const input = datalist.previousElementSibling;
    if (input) input.focus();
  } catch (e) {
    alert('Discover failed: ' + e.message);
    btn.textContent = '🔍';
  } finally {
    btn.disabled = false;
  }
}
function getCookie(name) {
  const v = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
  return v ? v[2] : '';
}
function editModel(id, displayName, modelId) {
  document.getElementById('model-label-' + id).classList.add('hidden');
  const form = document.getElementById('edit-model-' + id);
  form.classList.remove('hidden');
  form.querySelector('[name="model_display_name"]').value = displayName || '';
  form.querySelector('[name="model_id_new"]').value = modelId;
  form.querySelector('[name="model_display_name"]').focus();
}
function cancelEdit(id) {
  document.getElementById('edit-model-' + id).classList.add('hidden');
  document.getElementById('model-label-' + id).classList.remove('hidden');
}
async function pingConnection(connId, modelPks) {
  const badge = document.getElementById('conn-status-' + connId);
  badge.classList.remove('hidden');
  badge.textContent = 'checking…';
  badge.className = 'text-[10px] px-1.5 py-0.5 rounded bg-surface-overlay text-gray-400';
  // Pulse only this connection's model dots
  modelPks.forEach(pk => {
    const d = document.getElementById('model-dot-' + pk);
    if (d) { d.classList.remove('hidden'); d.className = 'w-2 h-2 rounded-full bg-amber-500 animate-pulse'; }
  });
  try {
    const resp = await fetch('/api/models/ping-connection/' + connId + '/', { headers: { Accept: 'application/json' } });
    const data = await resp.json();
    if (data.status === 'up') {
      badge.textContent = 'online · ' + data.found + '/' + data.total + ' models';
      badge.className = 'text-[10px] px-1.5 py-0.5 rounded bg-emerald-900/30 text-emerald-400';
      (data.models || []).forEach(mk => {
        const dot = document.getElementById('model-dot-' + mk.id);
        if (dot) {
          dot.className = 'w-2 h-2 rounded-full ' + (mk.found ? 'bg-emerald-500' : 'bg-red-500');
          dot.title = mk.found ? 'Available' : 'Not found on server';
        }
      });
    } else {
      badge.textContent = data.detail || 'error';
      badge.className = 'text-[10px] px-1.5 py-0.5 rounded bg-red-900/30 text-red-400';
      modelPks.forEach(pk => {
        const d = document.getElementById('model-dot-' + pk);
        if (d) { d.className = 'w-2 h-2 rounded-full bg-red-500'; d.title = 'Server unreachable'; }
      });
    }
  } catch (e) {
    badge.textContent = 'unreachable';
    badge.className = 'text-[10px] px-1.5 py-0.5 rounded bg-red-900/30 text-red-400';
  }
}
</script>
{% endblock %}