{% extends "admin/base.html" %}

{% block title %}Model routing — cmdop admin{% endblock %}

{% block head %}
  {# Spend tab pulls Chart.js + cockpit JS just like the legacy spend page. #}
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>
  <script src="/static/admin/spend_cockpit.js?v={{ asset_version() }}"></script>
{% endblock %}

{% block content %}
{# Plan 61/2b W2 — consolidated LLM Gateway page.

   The four sibling pages (keys / models / aliases / spend) used to be four
   top-level routes; sidebar + cmd-K both showed them separately. A1 IA
   audit flagged this as the #1 LLM-area discoverability gap: the four
   pages serve a single mental model ("when an agent asks for a model, who
   gets the bill, which key is used, and which fallback fires?") and
   reading them needed three sidebar clicks.

   New shape: one route `/admin/llm`, four tabs. URL preserves the tab so
   bookmarks + deep links still work (`?tab=models` etc.); the old routes
   redirect with 301.
#}
{% from 'admin/components/ui.html' import card, page_header, tooltip, collapsible_section %}

{# Spend leads: it's the everyday monitoring view. Provider keys / models /
   aliases remain one click away. #}
{% set active_tab = active_tab|default('spend') %}

{% set _kebab = [
  {'label': 'Add LLM key (wizard)', 'href': '/admin/wizards/add-llm-key', 'icon': 'wand-2'},
  {'label': 'gRPC monitoring',      'href': '/admin/monitoring',          'icon': 'activity'},
  {'label': 'Help — Model routing', 'href': '/admin/help/architecture',   'icon': 'book-open', 'target': '_blank'},
] %}

<div class="space-y-6" x-data="{ tab: '{{ active_tab }}' }"
     x-init="$watch('tab', v => {
       const u = new URL(window.location);
       u.searchParams.set('tab', v);
       history.replaceState({}, '', u);
     })">

  {{ page_header(
    title='Model routing',
    subtitle='Spend · provider keys · models · aliases',
    eyebrow='LLM Gateway',
    help_anchor='architecture',
    help_label='Open the LLM Gateway docs',
    kebab_items=_kebab,
    actions=[
      {'label': 'Add LLM key', 'kind': 'primary', 'icon': 'plus',
       'href': '/admin/wizards/add-llm-key'},
    ]
  ) }}

  {# ────────────────── Resolver-trace card (always visible) ─────────────── #}
  {# A1 §3 — the four-tab page begs the question "what _actually_ happens
     when an agent asks for a model?". The trace card is the legend. Static
     copy for now; a future plan can wire it to a live "trace this request"
     drawer. #}
  {# Decluttered: the resolver explainer is reference material — collapsed by
     default so the keys/models/spend tabs lead. Open state persists. #}
  {% call collapsible_section('Resolver trace', key='llm.resolver-trace',
        subtitle='what happens when an agent asks for a model', icon='route') %}
    <ol class="flex flex-wrap items-stretch gap-2 text-[12px]">
      <li class="flex-1 min-w-[200px] rounded-md border border-white/[0.06] bg-white/[0.02] px-3 py-2">
        <p class="text-ink-500 text-[10px] uppercase tracking-wider mb-1">1. Look up alias</p>
        <p class="text-ink-200">Agent asks for <span class="font-mono text-cmdop-300">alias:chat</span> or a raw <span class="font-mono">gpt-4o</span>. Aliases resolve to a tier + ordered fallback list.</p>
      </li>
      <li class="flex-1 min-w-[200px] rounded-md border border-white/[0.06] bg-white/[0.02] px-3 py-2">
        <p class="text-ink-500 text-[10px] uppercase tracking-wider mb-1">2. Pick provider</p>
        <p class="text-ink-200">Resolver scans the alias's fallback order, then cheapest-in-tier. First model whose provider has an active key wins.</p>
      </li>
      <li class="flex-1 min-w-[200px] rounded-md border border-white/[0.06] bg-white/[0.02] px-3 py-2">
        <p class="text-ink-500 text-[10px] uppercase tracking-wider mb-1">3. Check key</p>
        <p class="text-ink-200">Provider key is decrypted, base_url applied. <span class="font-mono text-amber-300">corrupt</span> rows are skipped; <span class="font-mono">default</span> is preferred if multiple exist.</p>
      </li>
      <li class="flex-1 min-w-[200px] rounded-md border border-white/[0.06] bg-white/[0.02] px-3 py-2">
        <p class="text-ink-500 text-[10px] uppercase tracking-wider mb-1">4. Dispatch &amp; bill</p>
        <p class="text-ink-200">Call goes out; on response the per-fleet spend counter is INCRBY'd and a row lands in <span class="font-mono">llm_spend_record</span>.</p>
      </li>
    </ol>
  {% endcall %}

  {# ─────────────────────────────── Tabs ───────────────────────────────── #}
  <div class="border-b border-white/[0.06]" role="tablist" aria-label="Model routing tabs">
    <nav class="flex flex-wrap gap-1">
      {% set tabs = [
        ('spend',   'Spend',         'circle-dollar-sign',  'Server-wide ledger, fleet/model/machine breakdowns.'),
        ('keys',    'Provider keys', 'key',                 'Encrypted API credentials. One default per provider.'),
        ('models',  'Models',        'cpu',                 'Sync-driven catalogue. Tier + price drive resolver picks.'),
        ('aliases', 'Aliases',       'tag',                 'Named tier slots agents request as alias:<name>.'),
      ] %}
      {% for tid, tlabel, ticon, _ttip in tabs %}
        <button
          type="button"
          role="tab"
          :aria-selected="tab === '{{ tid }}'"
          @click="tab = '{{ tid }}'"
          class="inline-flex items-center gap-2 px-3 py-2 -mb-px border-b-2 text-[13px] transition-colors"
          :class="tab === '{{ tid }}'
            ? 'border-cmdop-400 text-ink-100 font-medium'
            : 'border-transparent text-ink-400 hover:text-ink-200 hover:border-white/[0.08]'"
        >
          <i data-lucide="{{ ticon }}" class="w-3.5 h-3.5"></i>
          {{ tlabel }}
        </button>
      {% endfor %}
    </nav>
  </div>

  {# ──────────────────────────── Tab panels ─────────────────────────────── #}
  <div role="tabpanel" x-show="tab === 'keys'"    x-cloak>{% include 'admin/components/llm/_tab_keys.html' %}</div>
  <div role="tabpanel" x-show="tab === 'models'"  x-cloak>{% include 'admin/components/llm/_tab_models.html' %}</div>
  <div role="tabpanel" x-show="tab === 'aliases'" x-cloak>{% include 'admin/components/llm/_tab_aliases.html' %}</div>
  <div role="tabpanel" x-show="tab === 'spend'"   x-cloak>{% include 'admin/components/llm/_tab_spend.html' %}</div>
</div>
{% endblock %}