{% extends "admin/base.html" %}
{% from "partials/_macros.html" import pill, empty_state, notice %}

{% block page %}
<div class="page-header">
  <div>
    <div class="page-header__eyebrow">Diagnostics</div>
    <h1 class="page-header__title">Test provider</h1>
    <p class="page-header__subtitle">Round-trip a single prompt through any configured provider/model to confirm the wiring before letting brains route real traffic to it.</p>
  </div>
</div>

<div class="split-2" style="display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-5); align-items: start;">
  <div class="panel">
    <div class="panel__header">
      <div>
        <h2 class="panel__title">{{ icon('plug-zap') }} Ping</h2>
        <p class="panel__subtitle">Sends a minimal completion request and reports latency + ok/failed status. Response body is never shown back (SSRF guard).</p>
      </div>
    </div>
    <form method="post" action="/admin/test" class="form-grid">
      <div class="form-row">
        <label class="form-label" for="provider">Provider</label>
        <select id="provider" name="provider" class="form-control">
          {% for p in providers %}
          <option value="{{ p }}" {% if p == chosen_provider %}selected{% endif %}>{{ p }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-row">
        <label class="form-label" for="model">Model</label>
        <input
          type="text"
          id="model"
          name="model"
          list="model-catalog"
          value="{{ chosen_model or '' }}"
          placeholder="Start typing or pick from the list…"
          autocomplete="off"
          class="form-control mono"
        />
        <datalist id="model-catalog"></datalist>
        <p class="muted" id="model-status" style="margin-top: var(--space-2); font-size: var(--fs-xs);">
          Pick a provider above to load its model catalog.
        </p>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn is-primary">
          {{ icon('zap') }}<span>Run ping</span>
        </button>
      </div>
    </form>
  </div>

  <div class="panel">
    <div class="panel__header">
      <div>
        <h2 class="panel__title">{{ icon('layers') }} Tier hint</h2>
        <p class="panel__subtitle">What the current overlay maps each tier to.</p>
      </div>
    </div>
    {% if config.models %}
    <dl class="kv">
      {% for tier, route in config.models.items() %}
      <dt><code class="mono">{{ tier }}</code></dt>
      <dd>{{ pill(route.provider, tone='accent') }} <span class="mono muted">{{ route.model }}</span></dd>
      {% endfor %}
    </dl>
    {% else %}
      {{ empty_state('No tiers defined yet', body='Define a tier in Config first.', icon_name='layers') }}
    {% endif %}
  </div>
</div>

{% if result is not none %}
<div class="panel" style="margin-top: var(--space-5);">
  <div class="panel__header">
    <div>
      <h2 class="panel__title">{{ icon('activity') }} Result</h2>
      <p class="panel__subtitle">Last ping for <code>{{ chosen_provider }}</code> / <code>{{ chosen_model }}</code>.</p>
    </div>
    <div class="panel__actions">
      {% if result.ok %}
        {{ pill('ok', tone='success', dot=True) }}
      {% else %}
        {{ pill('failed · ' ~ (result.stage or 'unknown'), tone='danger', dot=True) }}
      {% endif %}
    </div>
  </div>
  <dl class="kv">
    <dt>Latency</dt><dd class="tabular">{{ result.latency_ms or 0 }} ms</dd>
    {% if result.response_fingerprint %}
    <dt>Response fingerprint</dt><dd><code class="mono">{{ result.response_fingerprint }}</code></dd>
    {% endif %}
  </dl>
  {% if result.error %}
    {{ notice(result.error, tone='danger') }}
  {% endif %}
</div>
{% endif %}

<script>
(function () {
  var providerEl = document.getElementById('provider');
  var modelEl = document.getElementById('model');
  var dl = document.getElementById('model-catalog');
  var statusEl = document.getElementById('model-status');
  if (!providerEl || !modelEl || !dl) return;

  function renderOptions(items) {
    dl.innerHTML = '';
    items.forEach(function (m) {
      var opt = document.createElement('option');
      opt.value = m.id;
      var labelParts = [];
      if (m.label) labelParts.push(m.label);
      if (m.vendor) labelParts.push('(' + m.vendor + ')');
      if (labelParts.length) opt.label = labelParts.join(' ');
      dl.appendChild(opt);
    });
  }

  function loadModels(name) {
    if (!name) return;
    statusEl.textContent = 'Loading models for ' + name + '…';
    fetch('/admin/api/providers/' + encodeURIComponent(name) + '/models', {
      credentials: 'same-origin',
      headers: { Accept: 'application/json' },
    })
      .then(function (r) { return r.ok ? r.json() : Promise.reject(r.statusText); })
      .then(function (body) {
        var items = (body && body.models) || [];
        renderOptions(items);
        if (body && body.error) {
          statusEl.textContent = items.length + ' suggestion(s) — discovery warning: ' + body.error;
        } else if (items.length === 0) {
          statusEl.textContent = 'No catalog available — type the model id manually.';
        } else {
          statusEl.textContent = items.length + ' model(s) loaded. Field stays free-text.';
        }
      })
      .catch(function (err) {
        renderOptions([]);
        statusEl.textContent = 'Model discovery failed — type the model id manually. (' + err + ')';
      });
  }

  providerEl.addEventListener('change', function () {
    modelEl.value = '';
    loadModels(providerEl.value);
  });
  loadModels(providerEl.value);
})();
</script>
{% endblock %}