{# Plan 61/2b W2 — "By machine" sub-tab content.

   D3 from per-machine-spend.md. Sorts by total descending; shows top
   models + a 24h sparkline + a burn-rate warning badge when the
   last-hour spend exceeds 5× the 7d-avg-per-hour for that machine.

   Coordinates with W1: the `llm_spend_record.machine_id` column is
   owned by the parallel agent W1's migration. Until that lands, the
   endpoint returns an empty list with `meta.machine_id_column_pending=true`
   and we surface a pending-state notice instead of an empty table.

   Plan 60/1.5 pagination — uses paginationState({mode:'offset'}) but
   we read `meta.machine_id_column_pending` ourselves by wrapping
   `fetch()` so the pending flag bubbles back to the component. #}
{% from 'admin/components/ui.html' import card, pagination, tooltip, empty_state %}

<div x-data="spendByMachineTable()" x-init="init()" class="space-y-3">
  <div class="flex items-center gap-3 flex-wrap">
    <div class="inline-flex items-center gap-1 rounded-md border border-white/[0.08] p-0.5">
      <template x-for="w in windows" :key="w.id">
        <button type="button"
                @click="setWindow(w.id)"
                class="px-2.5 py-1 rounded text-[11px] transition-colors"
                :class="windowSel === w.id ? 'bg-white/[0.06] text-ink-100' : 'text-ink-400 hover:text-ink-200'">
          <span x-text="w.label"></span>
        </button>
      </template>
    </div>
    <span class="text-footnote inline-flex items-center gap-1">
      Burn rate
      {{ tooltip('Last-hour spend > 5× the 7-day average per hour for this machine. Surfaces unexpected spikes.') }}
    </span>
    <button type="button"
            @click="refresh()"
            class="ml-auto inline-flex items-center gap-1.5 px-2.5 py-1 text-[12px] text-ink-300 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded-md transition-colors">
      <i data-lucide="refresh-cw" class="w-3 h-3"></i>
      Refresh
    </button>
  </div>

  <div x-show="pending" x-cloak>
    {{ empty_state(
      "Waiting for per-machine attribution",
      "The llm_spend_record.machine_id column is being added by Plan 61/2b W1. The breakdown will start populating once that migration lands.",
      icon="hourglass"
    ) }}
  </div>

  <div x-show="!pending" x-cloak>
    {% call card() %}
    <div class="overflow-x-auto">
      <table class="w-full text-[12px] text-left">
        <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06]">
          <tr>
            <th class="px-4 py-2 font-medium">Machine</th>
            <th class="px-4 py-2 font-medium text-right">Spend</th>
            <th class="px-4 py-2 font-medium text-right">% of fleet</th>
            <th class="px-4 py-2 font-medium">Top models</th>
            <th class="px-4 py-2 font-medium">24h trend</th>
            <th class="px-4 py-2 font-medium">Flags</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-white/[0.06]">
          <template x-if="pagination.loading && pagination.items.length === 0">
            <tr><td colspan="6" class="px-4 py-6 text-ink-500">Loading…</td></tr>
          </template>
          <template x-if="!pagination.loading && pagination.items.length === 0">
            <tr><td colspan="6" class="px-4 py-6 text-center text-ink-500">no spend in this window</td></tr>
          </template>
          <template x-for="m in pagination.items" :key="m.machine_id">
            <tr class="hover:bg-white/[0.02] transition-colors">
              <td class="px-4 py-2">
                <a :href="`/admin/machines/${m.machine_id}`"
                   class="text-ink-100 font-mono hover:text-cmdop-300" x-text="m.hostname || m.machine_id"></a>
                <template x-if="m.fleet_name">
                  <div class="text-[10px] text-ink-500" x-text="m.fleet_name"></div>
                </template>
              </td>
              <td class="px-4 py-2 text-right font-mono text-ink-200" x-text="fmtSpend(m.cost_usd)"></td>
              <td class="px-4 py-2 text-right font-mono text-ink-400" x-text="fmtPct(m.share)"></td>
              <td class="px-4 py-2 text-[11px] text-ink-400 font-mono truncate max-w-[18rem]"
                  :title="(m.top_models || []).join(', ')"
                  x-text="(m.top_models || []).slice(0, 3).join(', ') || '—'"></td>
              <td class="px-4 py-2" x-html="spark(m.hourly)"></td>
              <td class="px-4 py-2">
                <template x-if="m.burn_rate">
                  <span class="badge badge-warning"
                        :title="`Last hour spend ${fmtSpend(m.last_hour_usd)} vs 7d avg ${fmtSpend(m.avg_hour_usd)}/h`">
                    <i data-lucide="flame" class="w-3 h-3"></i>
                    Burn rate
                  </span>
                </template>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
    {{ pagination('pagination') }}
    {% endcall %}
  </div>
</div>

<script>
function spendByMachineTable() {
  return {
    windowSel: '24h',
    windows: [
      { id: '24h', label: '24 hours' },
      { id: '7d',  label: '7 days'   },
      { id: '30d', label: '30 days'  },
    ],
    pending: false,
    pagination: paginationState({
      mode: 'offset',
      endpoint: '/api/admin/llm/spend/by-machine',
      perPage: 25,
      storageKey: 'cmdop.pagination.llm-spend-by-machine.perPage',
      extraParams: { window: '24h' },
    }),

    async init() {
      await this.refresh();
      this.$nextTick(() => window.lucide && window.lucide.createIcons());
    },

    async refresh() {
      // pagination.fetch() reads body.items / total etc; meta.machine_id_column_pending
      // is not part of OffsetPage envelope so we side-channel it with a direct
      // probe of the same endpoint. Cheap (one extra GET per refresh) and lets
      // pagination state stay generic.
      await this.pagination.fetch();
      try {
        const sep = '/api/admin/llm/spend/by-machine'.includes('?') ? '&' : '?';
        const res = await fetch(`/api/admin/llm/spend/by-machine${sep}window=${encodeURIComponent(this.windowSel)}&per_page=1`);
        if (res.ok) {
          const body = await res.json();
          const meta = (body && body.meta) || {};
          this.pending = !!meta.machine_id_column_pending;
        }
      } catch (e) { /* leave pending=false on error */ }
    },

    setWindow(w) {
      this.windowSel = w;
      this.pagination.extraParams = { window: w };
      this.pagination.page = 1;
      this.refresh();
    },

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

    fmtPct(s) {
      const n = parseFloat(s) || 0;
      if (n === 0) return '—';
      return (n * 100).toFixed(1) + '%';
    },

    /* Single-series polyline sparkline mirroring overview.js helpers. */
    spark(data) {
      if (!data || !data.length) return '';
      const w = 80, h = 24;
      const max = Math.max(...data, 1);
      const pts = data.map((v, i) => {
        const x = (i / Math.max(1, data.length - 1)) * w;
        const y = h - ((v || 0) / max) * (h - 2) - 1;
        return x.toFixed(1) + ',' + y.toFixed(1);
      }).join(' ');
      return '<svg viewBox="0 0 ' + w + ' ' + h + '" width="' + w + '" height="' + h + '" preserveAspectRatio="none">' +
        '<polyline points="' + pts + '" fill="none" stroke="#60a5fa" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />' +
        '</svg>';
    },
  };
}
</script>