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

{% block title %}Overview — cmdop admin{% endblock %}

{% block content %}
{# Plan 57 — pro-grade /admin overview.

   Five rows answering "is my system healthy right now?":

     Row 1: System health strip — 6 service pills (cached 10s)
     Row 2: KPI cards (machines / sessions / spend24h / errors24h)
     Row 3: Activity charts (LLM volume / bot volume — 24h hourly)
     Row 4: Recent activity feed (last 15 user_activity events)
     Row 5: Fleets summary (server-admin only)

   Endpoints fan out under /api/admin/overview/* — the v1 surface
   (jarvis/machines/sessions/invites/errors/bots) stays alive next
   to the new /system, /spend-24h, /errors-24h, /llm-volume-24h,
   /bot-volume-24h, /activity, /fleets-summary. Auto-refresh 30s
   reuses the Plan 50 `pageHelper()` mixin. #}
<div class="space-y-4" x-data="overviewPage()" x-init="load()">
  <div class="flex items-center justify-between gap-4 flex-wrap">
    <div>
      <h1 class="text-[22px] font-semibold text-ink-100 tracking-tight">Overview</h1>
      <p class="text-[13px] text-ink-500 mt-0.5">
        Fleet <span class="text-ink-300">{{ fleet.name }}</span>
        {% if user and user.is_server_admin %}
          · <span class="text-cmdop-400">server-admin view (cross-fleet)</span>
        {% endif %}
      </p>
    </div>
    <div class="flex items-center gap-2">
      <label class="flex items-center gap-1.5 text-[12px] text-ink-400 cursor-pointer select-none">
        <input type="checkbox" x-model="autoRefresh" @change="onAutoRefreshChange()"
               class="rounded bg-ink-900 border-white/[0.12] text-cmdop-500 focus:ring-cmdop-500 focus:ring-offset-0 w-3.5 h-3.5" />
        Auto-refresh 30s
      </label>
      <button @click="load()" class="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>

  {# Row 1 — system health #}
  {% include 'admin/components/overview/_system_row.html' %}

  {# Row 2 — KPI cards (4-wide) #}
  {% include 'admin/components/overview/_kpi_row.html' %}

  {# Row 3 — activity charts (2-wide) #}
  {% include 'admin/components/overview/_activity_charts_row.html' %}

  {# Row 4 — recent activity feed #}
  {% include 'admin/components/overview/_activity_feed.html' %}

  {# Row 5 — fleets summary (server-admin only) #}
  {% if user and user.is_server_admin %}
    {% include 'admin/components/overview/_fleets_summary.html' %}
  {% endif %}

  {# Row 6 — Plan 61/2b W3 — Bots health card (per-channel pills).
     Goes below the existing rows so W2's top-machines-spend card can
     land in/above the KPI row without colliding. #}
  {% include 'admin/components/overview/_bots_health_card.html' %}

  {# Row 7 — Plan 61/2b W2 — Top machines by LLM spend (server-admin only).
     NO equivalent on dashboard_owner.html — owner/admin keep the Plan 59
     clean disclosure (per per-machine-spend.md). #}
  {% if user and user.is_server_admin %}
    {% include 'admin/components/overview/_top_machines_spend.html' %}
  {% endif %}
</div>

<script>window.__IS_SERVER_ADMIN__ = {{ 'true' if (user and user.is_server_admin) else 'false' }};</script>
<script src="/static/admin/overview/overview.js?v={{ asset_version() }}"></script>
{% endblock %}