{# Plan 61/2b W2 — "Spend" tab body of /admin/llm.

   Hosts the legacy spend cockpit chrome (totals / by-provider / timeline /
   by-model / by-fleet / errors / live-tail) plus a new "By machine"
   sub-tab from per-machine-spend.md (D3).

   The sub-tab switcher mirrors the existing dashboard cards: By model /
   By fleet / By machine / By key. The first two stay rendered as the
   pre-existing tables; the new "By machine" panel hits a new endpoint
   and degrades gracefully when the W1 schema migration hasn't landed
   yet. #}
{% from 'admin/components/ui.html' import card, page_header, tooltip, pagination %}

<div x-data="spendCockpit()" x-init="init()" class="space-y-6">
  <header class="flex items-baseline justify-between gap-4 flex-wrap">
    <div>
      <h2 class="text-headline text-ink-100">Spend cockpit</h2>
      <p class="text-footnote mt-1">
        Server-wide ledger across all fleets. Auto-refreshes every 30s
        (live tail every 5s).
      </p>
    </div>
    <div class="text-[11px] text-ink-500 font-mono" x-show="lastRefresh">
      <span x-text="freshnessLabel()"></span>
      <span x-show="summary && summary.cached"
            class="ml-1 px-1.5 py-0.5 rounded border border-white/[0.08] text-ink-400"
            title="served from Redis cache (TTL 30s)">cached</span>
    </div>
  </header>

  {% include 'admin/components/spend/_totals_cards.html' %}

  <div class="grid grid-cols-1 lg:grid-cols-5 gap-3">
    <div class="lg:col-span-3">
      {% include 'admin/components/spend/_by_provider_chart.html' %}
    </div>
    <div class="lg:col-span-2">
      {% include 'admin/components/spend/_timeline_chart.html' %}
    </div>
  </div>

  {# Sub-tab switcher: model / fleet / machine / key.

     Plan 61/2b W2 — "machine" is new. "key" is a placeholder for a
     future drill-down (resolver attributes each request to a key id;
     the data is there, the UI isn't yet). #}
  <div x-data="spendBreakdownSwitcher()" class="space-y-3">
    <div class="flex items-center gap-1 border-b border-white/[0.06]">
      <template x-for="b in breakdowns" :key="b.id">
        <button type="button"
                @click="active = b.id"
                class="px-3 py-2 -mb-px border-b-2 text-[13px] transition-colors"
                :class="active === b.id
                  ? '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="b.icon" class="w-3.5 h-3.5 inline-block mr-1"></i>
          <span x-text="b.label"></span>
        </button>
      </template>
    </div>

    <div x-show="active === 'model'" x-cloak>
      {% include 'admin/components/spend/_by_model_table.html' %}
    </div>
    <div x-show="active === 'fleet'" x-cloak>
      {% include 'admin/components/spend/_by_fleet_table.html' %}
    </div>
    <div x-show="active === 'machine'" x-cloak>
      {% include 'admin/components/llm/_by_machine_table.html' %}
    </div>
    <div x-show="active === 'key'" x-cloak>
      <div class="card p-6 text-center">
        <p class="text-footnote">
          Per-key attribution is logged but the breakdown table is not yet wired.
          Filed as a follow-up in plan 61/2b.
        </p>
      </div>
    </div>
  </div>

  {% include 'admin/components/spend/_errors_strip.html' %}

  {% include 'admin/components/spend/_live_tail.html' %}
</div>

<script>
function spendBreakdownSwitcher() {
  return {
    active: 'model',
    breakdowns: [
      { id: 'model',   label: 'By model',   icon: 'cpu' },
      { id: 'fleet',   label: 'By fleet',   icon: 'boxes' },
      { id: 'machine', label: 'By machine', icon: 'monitor' },
      { id: 'key',     label: 'By key',     icon: 'key' },
    ],
    init() {
      // Refresh lucide icons after Alpine mounts since the buttons render
      // inside a sub-tab `<template>`.
      this.$nextTick(() => window.lucide && window.lucide.createIcons());
    },
  };
}
</script>