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

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

{% block content %}
{# Plan 61/2b W3 — Jarvis first-class page.

   Header: large status pill + fleet name + last heartbeat.
   Body: 4 cards (chat shortcut, recent actions, configuration,
   connection). Empty state when no Jarvis is bound to the fleet. #}
{% from 'admin/components/ui.html' import page_header, card, empty_state, tooltip %}

<div x-data="jarvisPage()" x-init="load()" class="space-y-6">
  {{ page_header(
    'Jarvis',
    'Your fleet\'s always-on AI coordinator.',
    help_anchor='jarvis',
    actions=[
      {'label': 'Refresh', 'kind': 'secondary', 'icon': 'refresh-cw',
       'attrs': '@click="load()"'},
    ]
  ) }}

  <template x-if="loading">
    <div class="card p-6 text-[13px] text-ink-500 flex items-center gap-2">
      <i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i>
      Loading Jarvis…
    </div>
  </template>

  <template x-if="!loading && !jarvisId">
    <div class="card p-12 text-center">
      <i data-lucide="brain-circuit" class="w-10 h-10 mx-auto text-ink-600 mb-4"></i>
      <h2 class="text-[16px] font-semibold text-ink-200">No Jarvis in this fleet</h2>
      <p class="text-[12px] text-ink-500 mt-2 max-w-md mx-auto">
        Jarvis is a server-side AI agent that joins the relay as a virtual machine.
        Configure it with a fleet-bound <span class="font-mono">jarvis_master</span>
        api_key.
      </p>
      <a href="/admin/help/jarvis" target="_blank" rel="noopener"
         class="btn btn-secondary btn-md mt-4 inline-flex">
        <i data-lucide="book-open" class="w-3.5 h-3.5"></i>
        Read the Jarvis docs
      </a>
    </div>
  </template>

  <template x-if="!loading && jarvisId">
    <div class="space-y-4">

      {# Status header card — large pill + fleet name + last heartbeat. #}
      <div class="card card-elevated p-6 flex items-center gap-6 flex-wrap">
        <div class="flex items-center gap-3">
          <span class="w-10 h-10 rounded-full bg-cmdop-500/10 border border-cmdop-500/30 flex items-center justify-center">
            <i data-lucide="brain-circuit" class="w-5 h-5 text-cmdop-300"></i>
          </span>
          <div>
            <p class="text-[11px] uppercase tracking-wider text-ink-500">Fleet</p>
            <p class="text-[15px] font-semibold text-ink-100">{{ fleet.name }}</p>
          </div>
        </div>
        <div class="flex items-center gap-2 ml-auto">
          <span class="inline-flex items-center gap-2 px-3 py-1.5 rounded-full text-[12px] font-medium border"
                :class="statusClass">
            <span class="w-2 h-2 rounded-full" :class="dotClass"></span>
            <span x-text="statusLabel"></span>
          </span>
          <span class="text-[11px] text-ink-500" x-show="lastHeartbeatRel">
            heartbeat <span class="font-mono" x-text="lastHeartbeatRel"></span>
          </span>
        </div>
      </div>

      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

        {# Chat shortcut. #}
        <div class="card p-5">
          <div class="flex items-center gap-2 mb-3">
            <i data-lucide="message-square" class="w-4 h-4 text-cmdop-400"></i>
            <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Chat with Jarvis</h2>
          </div>
          <p class="text-[12px] text-ink-500 mb-4">
            Open the slide-out chat dock. Same prompt surface as the per-machine page,
            anchored to this fleet's Jarvis. Keyboard: <span class="font-mono text-ink-300">cmd+\</span>.
          </p>
          <button
            type="button"
            class="btn btn-primary btn-md"
            @click="window.dispatchEvent(new CustomEvent('jarvis-dock:open'))">
            <i data-lucide="message-circle" class="w-3.5 h-3.5"></i>
            Open chat dock
          </button>
          <div class="mt-4 border-t border-white/[0.06] pt-3">
            <p class="text-[11px] uppercase tracking-wider text-ink-500 mb-2">
              Recent conversations
            </p>
            <template x-if="recentConversations === null">
              <p class="text-[12px] text-ink-500">Loading…</p>
            </template>
            <template x-if="recentConversations && recentConversations.length === 0">
              <p class="text-[12px] text-ink-500">No prior conversations yet.</p>
            </template>
            <template x-if="recentConversations && recentConversations.length > 0">
              <ul class="space-y-1">
                <template x-for="msg in recentConversations.slice(0, 5)" :key="msg.id">
                  <li class="text-[12px] text-ink-300 truncate"
                      :title="msg.preview"
                      x-text="msg.preview"></li>
                </template>
              </ul>
            </template>
          </div>
        </div>

        {# Recent actions. #}
        <div class="card p-5">
          <div class="flex items-center gap-2 mb-3">
            <i data-lucide="activity" class="w-4 h-4 text-cmdop-400"></i>
            <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Recent actions</h2>
            {{ tooltip('Commands Jarvis dispatched on this fleet — ordered most-recent first.') }}
          </div>
          <template x-if="recentActions === null">
            <p class="text-[12px] text-ink-500">Loading…</p>
          </template>
          <template x-if="recentActions && recentActions.length === 0">
            <p class="text-[12px] text-ink-500">No actions yet. Try opening the chat dock above and asking Jarvis a question.</p>
          </template>
          <template x-if="recentActions && recentActions.length > 0">
            <ul class="space-y-1 max-h-72 overflow-y-auto">
              <template x-for="a in recentActions" :key="a.id">
                <li class="flex items-center gap-2 text-[12px]">
                  <span class="font-mono text-ink-500 w-16 flex-shrink-0"
                        :title="a.created_at"
                        x-text="formatRelative(a.created_at)"></span>
                  <span class="font-mono text-cmdop-300 truncate"
                        :title="a.activity_type"
                        x-text="a.activity_type"></span>
                </li>
              </template>
            </ul>
          </template>
        </div>

        {# Configuration. #}
        <div class="card p-5">
          <div class="flex items-center gap-2 mb-3">
            <i data-lucide="settings-2" class="w-4 h-4 text-cmdop-400"></i>
            <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Configuration</h2>
          </div>
          <dl class="space-y-2 text-[12px]">
            <div class="flex justify-between gap-3">
              <dt class="text-ink-500">Model alias</dt>
              <dd class="font-mono text-ink-200" x-text="config.alias || 'alias:chat'"></dd>
            </div>
            <div class="flex justify-between gap-3">
              <dt class="text-ink-500">Temperature</dt>
              <dd class="font-mono text-ink-200" x-text="config.temperature ?? '0.2'"></dd>
            </div>
            <div class="flex justify-between gap-3">
              <dt class="text-ink-500">System prompt</dt>
              <dd class="font-mono text-ink-200 text-right max-w-[60%] truncate"
                  :title="config.system_prompt"
                  x-text="config.system_prompt || '(default fleet-coordinator prompt)'"></dd>
            </div>
          </dl>
          <a href="/admin/help/llm-tier-and-priority-routing" target="_blank" rel="noopener"
             class="inline-flex items-center gap-1 text-[12px] text-cmdop-300 hover:text-cmdop-200 mt-3">
            <i data-lucide="external-link" class="w-3 h-3"></i>
            How model routing works
          </a>
        </div>

        {# Connection. #}
        <div class="card p-5">
          <div class="flex items-center gap-2 mb-3">
            <i data-lucide="plug" class="w-4 h-4 text-cmdop-400"></i>
            <h2 class="text-[13px] font-semibold text-ink-100 tracking-tight">Connection</h2>
          </div>
          <dl class="space-y-2 text-[12px]">
            <div class="flex justify-between gap-3">
              <dt class="text-ink-500">Version</dt>
              <dd class="font-mono text-ink-200" x-text="conn.version || '—'"></dd>
            </div>
            <div class="flex justify-between gap-3">
              <dt class="text-ink-500">Uptime</dt>
              <dd class="font-mono text-ink-200" x-text="conn.uptime_s ? (Math.floor(conn.uptime_s / 60) + 'm') : '—'"></dd>
            </div>
            <div class="flex justify-between gap-3">
              <dt class="text-ink-500">Session id</dt>
              <dd class="font-mono text-ink-200 truncate max-w-[60%]"
                  :title="conn.session_id"
                  x-text="conn.session_id ? conn.session_id.slice(0, 8) + '…' : '—'"></dd>
            </div>
            <div class="flex justify-between gap-3">
              <dt class="text-ink-500">Last reconnect</dt>
              <dd class="font-mono text-ink-200" x-text="conn.last_reconnect_at || '—'"></dd>
            </div>
          </dl>
        </div>

      </div>

    </div>
  </template>
</div>

<script src="/static/admin/jarvis/jarvis.js?v={{ asset_version() }}"></script>
{% endblock %}