{# Plan 61/2b W2 — "Models" tab body of /admin/llm.
   Lifted from `admin/pages/llm_models.html` body. #}
{% from 'admin/components/ui.html' import card, tooltip %}

<div class="space-y-4" x-data="llmModelsPage()">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h2 class="text-headline text-ink-100">Models</h2>
      <p class="text-footnote mt-1">
        Read-only catalogue of models available through the gateway. Prices come
        from the periodic LiteLLM sync; rows with <span class="text-ink-300">override</span>
        badges are operator-set and not overwritten by sync.
      </p>
    </div>
    <button
      @click="syncNow()"
      :disabled="syncing"
      class="inline-flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-ink-100 disabled:opacity-50 disabled:cursor-wait text-black text-[13px] font-medium rounded-md whitespace-nowrap"
    >
      <i data-lucide="refresh-cw" class="w-4 h-4" :class="syncing && 'animate-spin'"></i>
      <span x-text="syncing ? 'Syncing…' : 'Sync prices'"></span>
    </button>
  </div>

  <!-- Provider tabs -->
  <div class="flex flex-wrap gap-2 border-b border-white/[0.06] pb-3">
    <template x-for="p in providers" :key="p.id">
      <button
        @click="setProvider(p.id)"
        class="px-3 py-1 rounded-md text-[12px] transition-colors"
        :class="filters.provider === p.id ? 'bg-white/[0.06] text-ink-100 font-medium' : 'text-ink-400 hover:text-ink-200 hover:bg-white/[0.03]'"
      >
        <span x-text="p.label"></span>
        <span class="text-[11px] ml-1 opacity-60 font-mono" x-text="`(${p.count})`"></span>
      </button>
    </template>
  </div>

  <!-- Tier tabs -->
  <div class="flex flex-wrap gap-2">
    <template x-for="t in tiers" :key="t.id">
      <button
        @click="setTier(t.id)"
        class="px-2.5 py-0.5 rounded text-[11px] uppercase tracking-wider transition-colors border"
        :class="filters.tier === t.id ? t.activeClass : 'border-white/[0.08] text-ink-500 hover:text-ink-300 hover:border-white/[0.16]'"
      >
        <span x-text="t.label"></span>
        <span class="ml-1 opacity-70 font-mono" x-text="`(${t.count})`"></span>
      </button>
    </template>
    <span class="ml-1 inline-flex items-center">
      {{ tooltip('1=cheapest, 5=premium. Used by aliases that ask for a price ceiling.') }}
    </span>
  </div>

  <!-- Filter bar -->
  <div class="card p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <div>
        <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500 mb-2">Search</label>
        <input
          type="text"
          x-model="filters.search"
          placeholder="model id…"
          class="w-full px-3 py-2 rounded-md bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 text-ink-100 text-[13px] font-mono placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors"
        />
      </div>
      <div>
        <label class="block text-[11px] uppercase tracking-wider font-medium text-ink-500 mb-2">Capabilities (AND)</label>
        <div class="flex flex-wrap gap-3">
          <template x-for="c in caps" :key="c.id">
            <label class="inline-flex items-center gap-2 text-[13px] text-ink-300 cursor-pointer">
              <input type="checkbox" :value="c.id" x-model="filters.caps" class="rounded bg-black border-white/[0.12] text-cmdop-500 focus:ring-cmdop-500/30">
              <span x-text="c.label"></span>
            </label>
          </template>
        </div>
      </div>
    </div>

    <div class="flex flex-wrap items-center gap-3 mt-4 pt-3 border-t border-white/[0.06]">
      <label class="inline-flex items-center gap-2 text-[12px] text-ink-300 cursor-pointer">
        <input type="checkbox" x-model="filters.missingPrice"
               class="rounded bg-black border-white/[0.12] text-amber-500 focus:ring-amber-500/30">
        <span>Pricing missing only
          <span class="text-amber-300 font-mono" x-show="missingPriceCount > 0" x-text="`(${missingPriceCount})`"></span>
        </span>
        {{ tooltip('Plan 53/7 — gateway logs cost.pricing_missing for these and bills $0 until pricing arrives.') }}
      </label>
      <button type="button" x-show="hasFilters" @click="resetFilters()"
              class="ml-auto text-[12px] text-ink-500 hover:text-ink-200">
        Clear filters
      </button>
    </div>
  </div>

  <!-- Last sync -->
  <div x-show="lastReport" class="text-[12px] text-ink-500 font-mono" x-cloak>
    Last sync: source=<span class="text-ink-200" x-text="lastReport?.source"></span>,
    inserted=<span class="text-emerald-300" x-text="lastReport?.inserted"></span>,
    updated=<span class="text-cmdop-300" x-text="lastReport?.updated"></span>,
    skipped (override)=<span class="text-ink-400" x-text="lastReport?.skipped_override"></span>.
  </div>

  <!-- Pricing-missing warning banner -->
  <div x-show="!loading && missingPriceCount > 0 && !filters.missingPrice" x-cloak
       class="card p-3 border border-amber-500/[0.12] bg-amber-500/[0.03]">
    <div class="flex items-center gap-3 text-[12px]">
      <i data-lucide="alert-triangle" class="w-4 h-4 text-amber-300 flex-shrink-0"></i>
      <span class="text-ink-200">
        <span class="text-amber-300 font-mono" x-text="missingPriceCount"></span>
        model<span x-show="missingPriceCount !== 1">s</span> have no pricing — requests log
        <span class="font-mono text-ink-300">cost.pricing_missing</span> and are billed as $0.
      </span>
      <button type="button" @click="filters.missingPrice = true"
              class="ml-auto text-cmdop-400 hover:text-cmdop-300 underline">Show only these</button>
    </div>
  </div>

  {% call card() %}
  <div class="overflow-x-auto">
    <table class="w-full text-[13px] text-left">
      <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06]">
        <tr>
          <th class="px-4 py-3 font-medium">Model</th>
          <th class="px-4 py-3 font-medium">Provider</th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">
              Tier
              {{ tooltip('1=cheapest, 5=premium. Used by aliases that ask for a price ceiling.') }}
            </span>
          </th>
          <th class="px-4 py-3 font-medium text-right">
            <span class="inline-flex items-center gap-1">
              Priority
              {{ tooltip('Tiebreaker within a tier. Higher is preferred by the resolver.') }}
            </span>
          </th>
          <th class="px-4 py-3 font-medium text-right">Context</th>
          <th class="px-4 py-3 font-medium text-right">$/1M in</th>
          <th class="px-4 py-3 font-medium text-right">$/1M out</th>
          <th class="px-4 py-3 font-medium text-right" title="Total cost on this model in the last 30 days">Spend 30d</th>
          <th class="px-4 py-3 font-medium text-right" title="Number of dispatch requests in the last 30 days">Reqs 30d</th>
          <th class="px-4 py-3 font-medium">Capabilities</th>
          <th class="px-4 py-3 font-medium">Source</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/[0.06]">
        <template x-if="loading">
          <tr><td colspan="11" class="px-4 py-4 text-ink-500">Loading…</td></tr>
        </template>
        <template x-if="!loading && filtered.length === 0 && rows.length === 0">
          <tr><td colspan="11" class="px-4 py-10 text-center text-ink-500">
            Catalogue is empty — click <span class="text-ink-300">Sync prices</span> to fetch from upstream.
          </td></tr>
        </template>
        <template x-if="!loading && filtered.length === 0 && rows.length > 0">
          <tr><td colspan="11" class="px-4 py-8 text-center text-ink-500">
            No models match these filters.
            <button @click="resetFilters()" class="text-cmdop-400 hover:text-cmdop-300 ml-1">Clear filters</button>
          </td></tr>
        </template>
        <template x-for="m in filtered" :key="m.id">
          <tr class="hover:bg-white/[0.02] transition-colors"
              :class="m.price_prompt == null ? 'bg-amber-500/[0.02]' : ''">
            <td class="px-4 py-3 text-ink-200 font-mono text-[12px] truncate max-w-[18rem]" :title="m.model_id" x-text="m.model_id"></td>
            <td class="px-4 py-3 text-ink-400" x-text="m.provider"></td>
            <td class="px-4 py-3">
              <span class="px-1.5 py-0.5 rounded text-[10px] font-mono uppercase border" :class="tierBadge(m.tier)" x-text="m.tier"></span>
            </td>
            <td class="px-4 py-3 text-right">
              <span class="inline-block min-w-[2.5rem] text-right font-mono text-[12px] px-1.5 py-0.5 rounded" :class="priorityBadge(m.priority)" x-text="m.priority"></span>
            </td>
            <td class="px-4 py-3 text-right text-ink-300 font-mono text-[12px]" x-text="fmtCtx(m.context_window)"></td>
            <td class="px-4 py-3 text-right font-mono text-[12px]"
                :class="m.price_prompt == null ? 'text-amber-300' : 'text-ink-300'"
                :title="m.price_prompt == null ? 'No pricing — cost.pricing_missing logs on each request' : ''"
                x-text="fmtPrice(m.price_prompt)"></td>
            <td class="px-4 py-3 text-right font-mono text-[12px]"
                :class="m.price_completion == null ? 'text-amber-300' : 'text-ink-300'"
                x-text="fmtPrice(m.price_completion)"></td>
            <td class="px-4 py-3 text-right text-ink-300 font-mono text-[12px]" x-text="fmtSpend(m.spend_30d_usd)"></td>
            <td class="px-4 py-3 text-right text-ink-500 font-mono text-[12px]" x-text="m.spend_30d_requests || '—'"></td>
            <td class="px-4 py-3">
              <div class="flex gap-1">
                <template x-for="cap in capBadges(m.capabilities)" :key="cap.id">
                  <span
                    class="inline-block px-1.5 py-0.5 rounded text-[10px] font-mono uppercase border"
                    :class="cap.active ? 'border-cmdop-500/30 text-cmdop-300' : 'border-white/[0.06] text-ink-600'"
                    :title="cap.label"
                    x-text="cap.id"
                  ></span>
                </template>
              </div>
            </td>
            <td class="px-4 py-3 text-[12px] text-ink-500 font-mono">
              <span x-text="m.source"></span>
              <span x-show="m.price_override" class="ml-2 px-1.5 py-0.5 rounded border border-amber-500/30 text-amber-300 text-[10px] uppercase">override</span>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
  {% endcall %}
</div>

<script>
function llmModelsPage() {
  return {
    rows: [],
    loading: true,
    syncing: false,
    lastReport: null,
    filters: { provider: 'all', tier: 'all', search: '', caps: [], missingPrice: false },
    caps: [
      { id: 'V', key: 'vision',        label: 'Vision' },
      { id: 'T', key: 'tools',         label: 'Tools' },
      { id: 'S', key: 'stream',        label: 'Streaming' },
      { id: 'C', key: 'cache_control', label: 'Cache control' },
    ],
    _tierActive: {
      all:     'border-white/[0.16] text-ink-100 bg-white/[0.06]',
      cheap:   'border-emerald-500/30 text-emerald-300',
      mid:     'border-cmdop-500/30 text-cmdop-300',
      premium: 'border-purple-500/30 text-purple-300',
    },

    async init() {
      await this.reload();
    },

    async reload() {
      this.loading = true;
      try {
        const res = await fetch('/api/admin/llm/models?per_page=200');
        if (!res.ok) { toast('Failed to load models', 'error'); this.rows = []; return; }
        const body = await res.json();
        this.rows = (body && body.items) || [];
      } finally {
        this.loading = false;
      }
    },

    async syncNow() {
      if (this.syncing) return;
      this.syncing = true;
      try {
        const res = await fetch('/api/admin/llm/models/sync', { method: 'POST' });
        if (!res.ok) { toast('Sync failed', 'error'); return; }
        this.lastReport = await res.json();
        toast(`Sync ok: +${this.lastReport.inserted} new, ~${this.lastReport.updated} updated`, 'success');
        await this.reload();
      } finally {
        this.syncing = false;
      }
    },

    setProvider(p) { this.filters.provider = p; },
    setTier(t) { this.filters.tier = t; },

    get tiers() {
      const counts = { all: this.rows.length };
      for (const r of this.rows) counts[r.tier] = (counts[r.tier] || 0) + 1;
      const order = ['all', 'cheap', 'mid', 'premium'];
      const labels = { all: 'All tiers', cheap: 'Cheap', mid: 'Mid', premium: 'Premium' };
      return order.map(id => ({
        id, label: labels[id], count: counts[id] || 0,
        activeClass: this._tierActive[id],
      }));
    },

    tierBadge(tier) {
      return this._tierActive[tier] || 'border-white/[0.08] text-ink-500';
    },

    priorityBadge(p) {
      if (p >= 90) return 'border border-emerald-500/30 text-emerald-300';
      if (p >= 60) return 'border border-cmdop-500/30 text-cmdop-300';
      if (p > 0)   return 'border border-white/[0.08] text-ink-300';
      return 'border border-white/[0.06] text-ink-600';
    },

    get providers() {
      const counts = { all: this.rows.length };
      for (const r of this.rows) counts[r.provider] = (counts[r.provider] || 0) + 1;
      const order = ['all', 'openai', 'anthropic', 'openrouter', 'dashscope'];
      const labels = { all: 'All', openai: 'OpenAI', anthropic: 'Anthropic', openrouter: 'OpenRouter', dashscope: 'DashScope' };
      return order.map(id => ({ id, label: labels[id], count: counts[id] || 0 }));
    },

    get missingPriceCount() {
      return this.rows.filter(r => r.price_prompt == null).length;
    },

    get hasFilters() {
      const f = this.filters;
      return f.provider !== 'all' || f.tier !== 'all' || f.search.trim() !== '' || f.caps.length > 0 || f.missingPrice;
    },

    resetFilters() {
      this.filters = { provider: 'all', tier: 'all', search: '', caps: [], missingPrice: false };
    },

    get filtered() {
      const q = this.filters.search.trim().toLowerCase();
      const matched = this.rows.filter(r => {
        if (this.filters.provider !== 'all' && r.provider !== this.filters.provider) return false;
        if (this.filters.tier !== 'all' && r.tier !== this.filters.tier) return false;
        if (q && !r.model_id.toLowerCase().includes(q)) return false;
        if (this.filters.missingPrice && r.price_prompt != null) return false;
        for (const id of this.filters.caps) {
          const cap = this.caps.find(c => c.id === id);
          if (!cap) continue;
          if (!(r.capabilities && r.capabilities[cap.key])) return false;
        }
        return true;
      });
      const tierRank = { premium: 3, mid: 2, cheap: 1 };
      matched.sort((a, b) => {
        const tr = (tierRank[b.tier] || 0) - (tierRank[a.tier] || 0);
        if (tr !== 0) return tr;
        if (b.priority !== a.priority) return b.priority - a.priority;
        const sa = parseFloat(a.spend_30d_usd) || 0;
        const sb = parseFloat(b.spend_30d_usd) || 0;
        if (sa !== sb) return sb - sa;
        const ap = parseFloat(a.price_prompt) || Infinity;
        const bp = parseFloat(b.price_prompt) || Infinity;
        return ap - bp;
      });
      return matched;
    },

    capBadges(capabilities) {
      const c = capabilities || {};
      return this.caps.map(x => ({ id: x.id, label: x.label, active: !!c[x.key] }));
    },

    fmtCtx(n) {
      if (!n) return '—';
      if (n >= 1000) return (n / 1000).toFixed(0) + 'k';
      return String(n);
    },

    fmtPrice(p) {
      if (p == null) return '—';
      const v = parseFloat(p) * 1_000_000;
      if (!isFinite(v)) return '—';
      return '$' + v.toFixed(2);
    },

    fmtSpend(v) {
      const n = parseFloat(v) || 0;
      if (n === 0) return '—';
      if (n < 0.01) return '$' + n.toFixed(6);
      return '$' + n.toFixed(2);
    },
  };
}
</script>