{# Plan 61/2b W2 — top machines by LLM spend card.

   D2 from per-machine-spend.md. Server-admin only — gated at template
   level in dashboard.html; the endpoint also enforces server-admin
   on the API side.

   Auto-refresh piggy-backs on overviewPage's 30s tick (see overview.js).
   Click any row → /admin/machines/<id> for the per-machine drill-down
   (W1 owns that page; this card is the "land here, then drill" entry
   point).

   `data.topMachinesSpend` is populated by overview.js (extended in
   plan 61/2b W2 to fetch `/api/admin/overview/top-machines-spend`).
   It is `null` while loading and an object once the request resolves;
   the object has `items` + `machine_id_column_pending` so we can flip
   between "live data" and "pending W1 migration" states. #}
{% from 'admin/components/ui.html' import tooltip %}

{# Decluttered: the whole card is hidden unless there's actual spend to
   show. An empty "No LLM spend" / "waiting for migration" card is pure
   noise on a quiet fleet — it reappears the moment a row lands. Shown
   while loading so the skeleton doesn't flash. #}
<div class="card p-4"
     x-show="data.topMachinesSpend === null || (!data.topMachinesSpend.machine_id_column_pending && (data.topMachinesSpend.items?.length ?? 0) > 0)"
     x-cloak>
  <div class="flex items-center justify-between mb-3">
    <div class="flex items-center gap-2">
      <i data-lucide="flame" class="w-4 h-4 text-amber-300"></i>
      <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Top machines · LLM spend (24h)</h2>
      <span class="text-[10px] uppercase tracking-wider text-cmdop-400 font-medium">server admin</span>
      <span class="ml-1 inline-flex items-center">
        {{ tooltip('Per-machine cost attribution from the spend ledger. Burn-rate flags machines whose last-hour cost exceeds 5× their 7d hourly average.') }}
      </span>
    </div>
    <a href="/admin/llm?tab=spend" class="text-[11px] text-cmdop-400 hover:text-cmdop-300">View all →</a>
  </div>

  <template x-if="data.topMachinesSpend === null">
    <div class="text-[13px] text-ink-500">Loading…</div>
  </template>

  <template x-if="data.topMachinesSpend && data.topMachinesSpend.machine_id_column_pending">
    <p class="text-[12px] text-ink-500">
      Waiting for per-machine attribution to be enabled (plan 61/2b W1 migration).
      <br />
      <span class="text-ink-600">The dashboard card will start populating once `llm_spend_record.machine_id` lands.</span>
    </p>
  </template>

  <template x-if="data.topMachinesSpend && !data.topMachinesSpend.machine_id_column_pending && (data.topMachinesSpend.items?.length ?? 0) === 0">
    <p class="text-[12px] text-ink-500">No LLM spend in the last 24h.</p>
  </template>

  <template x-if="data.topMachinesSpend && !data.topMachinesSpend.machine_id_column_pending && (data.topMachinesSpend.items?.length ?? 0) > 0">
    <div class="overflow-x-auto">
      <table class="w-full text-[12px]">
        <thead>
          <tr class="text-[10px] uppercase tracking-wider text-ink-500 border-b border-white/[0.06]">
            <th class="text-left py-1.5 pr-2 font-medium">Machine</th>
            <th class="text-right py-1.5 px-2 font-medium">Spend</th>
            <th class="text-right py-1.5 px-2 font-medium">Trend</th>
            <th class="text-right py-1.5 pl-2 font-medium">Flags</th>
          </tr>
        </thead>
        <tbody>
          <template x-for="m in data.topMachinesSpend.items" :key="m.machine_id">
            <tr class="border-b border-white/[0.04] hover:bg-white/[0.02] cursor-pointer"
                @click="window.location.href = `/admin/machines/${m.machine_id}`">
              <td class="py-2 pr-2">
                <div class="text-ink-100 font-mono truncate max-w-[180px]" x-text="m.hostname || m.machine_id"></div>
                <div class="text-[10px] text-ink-500 truncate max-w-[180px]" x-text="m.fleet_name || ''"></div>
              </td>
              <td class="text-right px-2 font-mono text-ink-200"
                  x-text="m.cost_usd >= 0.01 ? ('$' + m.cost_usd.toFixed(2)) : '<$0.01'"></td>
              <td class="text-right px-2" x-html="sparkline(m.hourly, 60, 20)"></td>
              <td class="text-right pl-2">
                <template x-if="m.burn_rate">
                  <span class="badge badge-warning">
                    <i data-lucide="flame" class="w-3 h-3"></i>
                    Burn
                  </span>
                </template>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </div>
  </template>
</div>