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

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

{% block content %}
{% from 'admin/components/ui.html' import card, badge, empty_state, pagination, tooltip, page_header %}

<div class="space-y-6" x-data="machinesPage()" x-init="load()">
  <div class="flex items-center justify-between gap-4 flex-wrap">
    <div>
      <h1 class="text-[20px] font-semibold text-ink-100 tracking-tight">Machines</h1>
      <p class="text-[12px] text-ink-500 mt-1">
        Fleet <span class="text-ink-300">{{ fleet.name if fleet else '—' }}</span> · your machines and server-side agents
      </p>
    </div>
    <div class="flex items-center gap-2">
      {% if member_role != 'member' %}
      <a href="/admin/wizards/add-machine" class="btn btn-primary btn-sm">
        <i data-lucide="plus" class="w-3.5 h-3.5"></i>
        Add machine
      </a>
      {% endif %}
      <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>

  {# Search + status filter chips. Client-side filter over the current
     paginated page — for large fleets the keyset-paginated API still
     governs how much we have to filter through. #}
  {% call card(kind='compact') %}
  <div class="flex flex-wrap items-center gap-3">
    <div class="relative flex-1 min-w-[220px]">
      <i data-lucide="search" class="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-ink-500"></i>
      <input type="search"
             x-model="query"
             placeholder="Search by hostname, OS or id…"
             aria-label="Filter machines"
             class="input pl-8 w-full" />
    </div>
    <div class="inline-flex rounded-md border border-white/[0.08] overflow-hidden" role="tablist">
      <template x-for="opt in ['all','online','stale','offline']" :key="opt">
        <button type="button"
                @click="statusFilter = opt"
                :class="statusFilter === opt
                  ? 'bg-white/[0.06] text-ink-100'
                  : 'text-ink-400 hover:text-ink-200 hover:bg-white/[0.04]'"
                class="px-3 py-1 text-[12px] capitalize transition-colors"
                x-text="opt + (counts[opt] != null ? ' (' + counts[opt] + ')' : '')"></button>
      </template>
    </div>
    <span x-show="query || statusFilter !== 'all'" x-cloak class="text-[11px] text-ink-500" x-text="filteredItems().length + ' shown'"></span>
  </div>
  {% endcall %}

  {% call card() %}
  <div class="overflow-x-auto">
    <table class="w-full text-[13px] text-left">
      <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06]">
        <tr>
          <th class="px-4 py-3 font-medium">Hostname</th>
          <th class="px-4 py-3 font-medium">Fleet</th>
          <th class="px-4 py-3 font-medium">OS</th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">
              Presence
              {{ tooltip(label='Online = heartbeat within 2 min. Stale = 2–10 min. Offline = silent for >10 min.') }}
            </span>
          </th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">
              Last seen
              {{ tooltip(label='Time since the last heartbeat the agent sent.') }}
            </span>
          </th>
          <th class="px-4 py-3 font-medium text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/[0.06]">
        <tr x-show="pagination.loading" x-cloak>
          <td colspan="6" class="px-4 py-8 text-center text-ink-500">
            <i data-lucide="loader-2" class="w-4 h-4 inline-block animate-spin mr-1.5"></i>
            Loading machines…
          </td>
        </tr>
        <tr x-show="!pagination.loading && pagination.error" x-cloak>
          <td colspan="6" class="px-4 py-8 text-center">
            <i data-lucide="alert-triangle" class="w-6 h-6 mx-auto text-red-400 mb-2"></i>
            <p class="text-[13px] text-ink-200">Couldn't load machines.</p>
            <p class="text-[12px] text-ink-500 mt-1" x-text="pagination.error"></p>
            <button @click="load()" class="mt-3 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">Try again</button>
          </td>
        </tr>
        <tr x-show="!pagination.loading && !pagination.error && nonJarvisCount() === 0" x-cloak>
          <td colspan="6" class="px-4 py-12 text-center">
            <i data-lucide="server" class="w-10 h-10 mx-auto text-ink-600 mb-3"></i>
            <p class="text-[13px] font-medium text-ink-200">No machines yet</p>
            <p class="text-[12px] text-ink-500 mt-1">Install the agent and run <code class="px-1.5 py-0.5 bg-white/[0.04] border border-white/[0.06] rounded text-cmdop-300 font-mono">cmdop login</code> on a host to enroll it.</p>
            {% if member_role != 'member' %}
            <a href="/admin/wizards/add-machine" class="btn btn-primary btn-md mt-4 inline-flex">
              <i data-lucide="plus" class="w-3.5 h-3.5"></i>
              Add your first machine
            </a>
            {% endif %}
          </td>
        </tr>
        <template x-for="m in filteredItems()" :key="m.id">
          <tr class="hover:bg-white/[0.02] transition-colors" :class="m.is_jarvis ? 'bg-cmdop-500/[0.03]' : ''">
            <td class="px-4 py-3">
              <div class="flex items-center gap-2 min-w-0">
                <i x-show="m.is_jarvis" data-lucide="sparkles" class="w-3.5 h-3.5 text-cmdop-400 flex-shrink-0" title="Pinned — server-side agent"></i>
                <div class="min-w-0">
                  <div class="font-medium text-ink-100 truncate max-w-[260px] flex items-center gap-1.5"
                       :title="m.is_jarvis ? 'Jarvis (server agent)' : (m.hostname || m.name || '—')">
                    <span x-text="m.is_jarvis ? 'Jarvis' : (m.hostname || m.name || '—')"></span>
                    <template x-if="m.is_jarvis">
                      <span class="badge badge-info text-[10px]">Server agent · always-on</span>
                    </template>
                  </div>
                  <div class="text-[11px] text-ink-500 font-mono truncate max-w-[260px]" :title="m.id" x-text="(m.id || '').slice(0, 8)"></div>
                </div>
              </div>
            </td>
            <td class="px-4 py-3">
              <template x-if="(m.fleets || []).length === 0"><span class="text-[12px] text-ink-600">—</span></template>
              <template x-for="f in (m.fleets || [])" :key="f.id">
                <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium border border-cmdop-500/30 text-cmdop-300 mr-1" x-text="f.name"></span>
              </template>
            </td>
            <td class="px-4 py-3 text-ink-400 font-mono text-[12px] truncate max-w-[180px]" :title="[m.os, m.os_version].filter(Boolean).join(' ')" x-text="[m.os, m.os_version].filter(Boolean).join(' ') || '—'"></td>
            <td class="px-4 py-3">
              <div class="flex items-center gap-2">
                <span class="w-1.5 h-1.5 rounded-full" :class="dotClass(presenceFor(m))"></span>
                <span class="text-[12px] text-ink-300 capitalize" x-text="presenceFor(m)"></span>
              </div>
            </td>
            <td class="px-4 py-3 text-ink-500 text-[12px] font-mono">
              <span :title="lastSeenFor(m) ? new Date(lastSeenFor(m)).toLocaleString() : ''" x-text="formatRelative(lastSeenFor(m))"></span>
            </td>
            <td class="px-4 py-3 text-right">
              <template x-if="m.is_jarvis">
                <button @click="openJarvis(m.id)"
                        class="text-[12px] text-cmdop-400 hover:text-cmdop-300 font-medium inline-flex items-center gap-0.5 focus:outline-none focus:ring-2 focus:ring-cmdop-500/40 rounded px-1.5 py-0.5"
                        aria-label="Chat with Jarvis">
                  Chat
                  <i data-lucide="message-square" class="w-3 h-3"></i>
                </button>
              </template>
              <template x-if="!m.is_jarvis">
                <a :href="'/admin/machines/' + m.id" class="text-[12px] text-cmdop-400 hover:text-cmdop-300 font-medium inline-flex items-center gap-0.5 focus:outline-none focus:ring-2 focus:ring-cmdop-500/40 rounded px-1.5 py-0.5" :aria-label="'Open ' + (m.hostname || m.name || 'machine')">
                  Open
                  <i data-lucide="arrow-right" class="w-3 h-3"></i>
                </a>
              </template>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
  {{ pagination('pagination') }}
  {% endcall %}
</div>

<script>
function machinesPage() {
  return {
    // Plan 60 Phase 1.5 — pagination wired via shared paginationState().
    // Cursor mode because the underlying /api/machines is keyset-paginated
    // on (created_at, id) — see core/services/machine_service/_crud.py.
    pagination: paginationState({
      mode: 'cursor',
      endpoint: '/api/machines',
      perPage: 50,
      storageKey: 'cmdop.pagination.machines.perPage',
    }),
    autoRefresh: false,
    _autoTimer: null,
    query: '',
    statusFilter: 'all',

    async load() {
      await this.pagination.fetch();
      this.$nextTick(() => { if (window.lucide) window.lucide.createIcons(); });
    },

    onAutoRefreshChange() {
      if (this._autoTimer) { clearInterval(this._autoTimer); this._autoTimer = null; }
      if (this.autoRefresh) {
        this._autoTimer = setInterval(() => { this.load(); }, 30000);
      }
    },

    // Plan 61/2b/W1 §E — pin Jarvis to the top of the list.
    sortedItems() {
      const items = this.pagination.items || [];
      return [...items].sort((a, b) => {
        if (a.is_jarvis && !b.is_jarvis) return -1;
        if (!a.is_jarvis && b.is_jarvis) return 1;
        return 0;
      });
    },

    // Plan 62 — search + status filter. Status 'all' bypasses presence
    // filter; Jarvis is always shown regardless of filter so the user
    // doesn't lose it when narrowing to 'online'.
    filteredItems() {
      const q = (this.query || '').trim().toLowerCase();
      const status = this.statusFilter;
      return this.sortedItems().filter((m) => {
        if (m.is_jarvis) return true;
        if (status !== 'all' && this.presenceFor(m) !== status) return false;
        if (!q) return true;
        const hay = [m.hostname, m.os, m.os_version, m.id, (m.fleets || []).map((f) => f.name).join(' ')]
          .filter(Boolean).join(' ').toLowerCase();
        return hay.includes(q);
      });
    },

    get counts() {
      const items = (this.pagination.items || []).filter((m) => !m.is_jarvis);
      const c = { all: items.length, online: 0, stale: 0, offline: 0 };
      for (const m of items) {
        const p = this.presenceFor(m);
        if (c[p] != null) c[p] += 1;
      }
      return c;
    },

    // "Are there any non-jarvis machines?" — used by the empty-state CTA.
    nonJarvisCount() {
      return (this.pagination.items || []).filter((m) => !m.is_jarvis).length;
    },

    openJarvis(machineId) {
      // Future Jarvis dock will listen for this event; until then we
      // fall back to the machine detail page.
      const evt = new CustomEvent('jarvis-dock:open', { detail: { machineId } });
      window.dispatchEvent(evt);
      // Best-effort fallback so the link still works in browsers without
      // the dock wired up.
      setTimeout(() => {
        if (document.querySelector('[data-jarvis-dock-open="1"]') === null) {
          window.location.href = `/admin/machines/${machineId}`;
        }
      }, 50);
    },

    presenceFor(m) {
      const live = Alpine.store('machinePresence')?.byId?.[m.id];
      return (live && live.presence) || m.presence || 'offline';
    },
    lastSeenFor(m) {
      const live = Alpine.store('machinePresence')?.byId?.[m.id];
      return (live && live.last_heartbeat_at) || m.last_heartbeat_at;
    },
    dotClass(p) {
      if (p === 'online') return 'bg-emerald-400';
      if (p === 'stale') return 'bg-amber-300';
      return 'bg-ink-500';
    },

    formatRelative(iso) {
      if (!iso) return '—';
      const t = new Date(iso).getTime();
      if (!t) return iso;
      const diff = Math.max(0, Date.now() - t);
      const s = Math.floor(diff / 1000);
      if (s < 60) return `${s}s ago`;
      const m = Math.floor(s / 60);
      if (m < 60) return `${m}m ago`;
      const h = Math.floor(m / 60);
      if (h < 24) return `${h}h ago`;
      const d = Math.floor(h / 24);
      if (d < 7) return `${d}d ago`;
      return new Date(iso).toLocaleDateString();
    },
  };
}
</script>
{% endblock %}