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

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

{% block head %}
{# deep-chat + machine-chat.js are loaded globally by base.html (when
   user and fleet are present, which always holds on this page) — no need
   to re-load them here. Only the page-specific terminal glue is local. #}
<script src="/static/admin/machine-terminal.js?v={{ asset_version() }}"></script>
{% endblock %}

{% block content %}
{% from 'admin/components/ui.html' import card, info_row, badge, stat, tooltip %}

<div class="space-y-6"
     x-data="machineDetailPage({ machineId: '{{ machine_id }}', sessionId: '{{ session_id }}' })"
     x-init="load()">

  <div>
    <a href="/admin/machines" class="inline-flex items-center gap-1 text-[12px] text-ink-500 hover:text-ink-300 transition-colors">
      <i data-lucide="chevron-left" class="w-3 h-3"></i>
      <span>Machines</span>
    </a>
  </div>

  <!-- Header -->
  <div class="flex items-start justify-between gap-4 flex-wrap">
    <div class="min-w-0 flex-1">
      <h1 class="text-[20px] font-semibold text-ink-100 tracking-tight truncate font-mono"
          :title="machine?.hostname || ''"
          x-text="machine?.hostname || 'Loading…'"></h1>
      <div class="flex items-center gap-2 mt-1 text-[12px] text-ink-500 flex-wrap">
        <template x-if="machine">
          <div class="flex items-center gap-2 flex-wrap">
            <span class="inline-flex items-center gap-1.5">
              <span class="w-1.5 h-1.5 rounded-full" :class="presenceColor(currentPresence())"></span>
              <span class="capitalize" x-text="currentPresence()"></span>
              {{ tooltip(
                  label='Online = heartbeat in the last 2 min. Stale = 2–10 min. Offline = nothing for >10 min.',
              ) }}
            </span>
            <span class="text-ink-700">·</span>
            <span class="font-mono" :title="absoluteTime(currentLastSeen())" x-text="lastSeenLabel(currentLastSeen())"></span>
            <template x-if="machine.os || machine.os_version">
              <span class="text-ink-700">·</span>
            </template>
            <template x-if="machine.os || machine.os_version">
              <span class="font-mono truncate" x-text="((machine.os || '') + ' ' + (machine.os_version || '')).trim()"></span>
            </template>
          </div>
        </template>
        <template x-if="!machine && loadError">
          <span class="text-red-300" x-text="loadError"></span>
        </template>
      </div>
      <div class="flex flex-wrap gap-1.5 mt-2">
        <template x-for="f in (machine?.fleets || [])" :key="f.fleet_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"
                x-text="f.name"></span>
        </template>
      </div>
    </div>
    <button @click="load()" :disabled="loading"
            title="Refresh machine metadata" aria-label="Refresh"
            class="inline-flex items-center gap-1.5 px-3 py-1.5 text-[13px] text-ink-300 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded-md transition-colors disabled:opacity-50">
      <i data-lucide="refresh-cw" class="w-3.5 h-3.5" :class="loading ? 'animate-spin' : ''"></i>
      <span>Refresh</span>
    </button>
  </div>

  <!-- Tabs -->
  <div class="border-b border-white/[0.06]">
    <div class="flex gap-1">
      <button @click="tab = 'overview'"
              :class="tab === 'overview' ? 'border-cmdop-500 text-ink-100' : 'border-transparent text-ink-500 hover:text-ink-300'"
              class="px-4 py-2 text-[13px] font-medium border-b-2 transition-colors">
        Overview
      </button>
      <button @click="tab = 'info'"
              :class="tab === 'info' ? 'border-cmdop-500 text-ink-100' : 'border-transparent text-ink-500 hover:text-ink-300'"
              class="px-4 py-2 text-[13px] font-medium border-b-2 transition-colors">
        Info
      </button>
      <button @click="tab = 'ai'"
              :class="tab === 'ai' ? 'border-cmdop-500 text-ink-100' : 'border-transparent text-ink-500 hover:text-ink-300'"
              class="px-4 py-2 text-[13px] font-medium border-b-2 transition-colors">
        AI
      </button>
      <button @click="tab = 'pty'"
              :class="tab === 'pty' ? 'border-cmdop-500 text-ink-100' : 'border-transparent text-ink-500 hover:text-ink-300'"
              class="px-4 py-2 text-[13px] font-medium border-b-2 transition-colors">
        Terminal
      </button>
    </div>
  </div>

  <!-- ── Overview tab ── -->
  <div x-show="tab === 'overview'" x-cloak class="space-y-4">
    <div x-data="machineSpendCard({ machineId: '{{ machine_id }}' })" x-init="load()">
      {% call card(title='Spend on this machine', subtitle='Per-machine attribution from the LLM gateway ledger.') %}
        <div class="flex items-center gap-2 mb-3 text-footnote">
          <span class="text-ink-500">Window</span>
          <select class="input !py-1 !px-2 !text-footnote" x-model="window" @change="load()">
            <option value="24h">24h</option>
            <option value="7d">7d</option>
            <option value="30d">30d</option>
          </select>
          <span x-show="loading" x-cloak class="inline-flex items-center gap-1 text-ink-500">
            <i data-lucide="loader-2" class="w-3 h-3 animate-spin"></i>
            Loading
          </span>
        </div>
        <template x-if="!data && !loading && !error">
          <p class="text-footnote text-ink-500 py-4">No spend recorded for this machine yet.</p>
        </template>
        <template x-if="error">
          <p class="text-footnote text-red-300 py-2" x-text="error"></p>
        </template>
        <template x-if="data">
          <div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-4">
              <div class="card card-elevated p-3">
                <p class="text-caption text-ink-500">Total</p>
                <p class="text-headline text-ink-100 font-mono mt-1">$<span x-text="(data.total_usd || 0).toFixed(2)"></span></p>
                <p class="text-footnote mt-0.5"
                   :class="(data.delta_usd || 0) >= 0 ? 'text-emerald-400' : 'text-red-300'"
                   x-text="((data.delta_usd || 0) >= 0 ? '+' : '') + (data.delta_pct || 0).toFixed(1) + '%'"></p>
              </div>
              <div class="card card-elevated p-3">
                <p class="text-caption text-ink-500">Calls</p>
                <p class="text-headline text-ink-100 font-mono mt-1" x-text="(data.calls || 0).toLocaleString()"></p>
              </div>
              <div class="card card-elevated p-3">
                <p class="text-caption text-ink-500">Tokens in</p>
                <p class="text-headline text-ink-100 font-mono mt-1" x-text="(data.tokens_in || 0).toLocaleString()"></p>
              </div>
              <div class="card card-elevated p-3">
                <p class="text-caption text-ink-500">Tokens out</p>
                <p class="text-headline text-ink-100 font-mono mt-1" x-text="(data.tokens_out || 0).toLocaleString()"></p>
              </div>
            </div>
            <template x-if="(data.top_models || []).length > 0">
              <div>
                <h4 class="text-caption text-ink-500 mb-2">Top models</h4>
                <ul class="space-y-1.5">
                  <template x-for="m in data.top_models" :key="m.model">
                    <li class="flex items-center gap-2 text-footnote">
                      <span class="text-ink-200 font-mono truncate w-48" x-text="m.model"></span>
                      <div class="flex-1 bg-white/[0.04] rounded-full h-1.5 overflow-hidden">
                        <div class="h-full bg-cmdop-500/60 rounded-full" :style="'width: ' + Math.min(100, m.pct) + '%'"></div>
                      </div>
                      <span class="text-ink-300 font-mono text-right w-16">$<span x-text="m.usd.toFixed(2)"></span></span>
                    </li>
                  </template>
                </ul>
              </div>
            </template>
          </div>
        </template>
      {% endcall %}
    </div>
  </div>

  <!-- ── Info tab (Plan 61/2b/W1 §C) ── -->
  <div x-show="tab === 'info'" x-cloak class="space-y-4" x-data="machineInfoTab({ machineId: '{{ machine_id }}' })" x-init="load()">
    <template x-if="info && info.presence.status === 'expired'">
      <div class="rounded-md border border-amber-500/30 bg-amber-500/[0.05] px-4 py-3 text-footnote text-amber-200">
        <i data-lucide="alert-triangle" class="w-4 h-4 inline-block mr-1"></i>
        Machine offline. Last reported <span x-text="relativeAge(info.presence.last_seen_at)"></span>. Values below are cached.
      </div>
    </template>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
      <template x-if="info">
        <div>
          {% call card(title='Identity', kind='compact') %}
            {{ info_row('Hostname', '<span x-text="info.identity.hostname"></span>'|safe, stale='fresh') }}
            {{ info_row('OS', '<span x-text="info.identity.os + \' \' + info.identity.os_version"></span>'|safe, stale='fresh') }}
            {{ info_row('Kernel', '<span x-text="info.identity.kernel_version || \'—\'"></span>'|safe, stale='fresh') }}
            {{ info_row('Agent', '<span x-text="info.identity.agent_version || \'—\'"></span>'|safe, stale='fresh') }}
            {{ info_row('Fingerprint', '<span x-text="(info.fingerprint.public_key_fingerprint || \'—\').slice(0, 16)"></span>'|safe, stale='fresh') }}
          {% endcall %}
        </div>
      </template>
      <template x-if="info">
        <div>
          {% call card(title='Hardware', kind='compact') %}
            {{ info_row('CPU', '<span x-text="info.hardware.cpu || \'—\'"></span>'|safe, stale='fresh') }}
            {{ info_row('Cores', '<span x-text="info.hardware.cpu_cores"></span>'|safe, stale='fresh') }}
            {{ info_row('Memory', '<span x-text="info.hardware.memory_total_gb + \' GB\'"></span>'|safe, stale='fresh') }}
            {{ info_row('Disk', '<span x-text="info.hardware.disk_total_gb + \' GB\'"></span>'|safe, stale='fresh') }}
          {% endcall %}
        </div>
      </template>
      <template x-if="info && info.live_state">
        <div>
          {% call card(title='Live state', kind='compact', subtitle='') %}
            <p x-show="info.live_state.stale" x-cloak class="text-footnote text-amber-300 mb-2">
              <i data-lucide="info" class="w-3 h-3 inline-block mr-0.5"></i>
              Cached snapshot — agent hasn't reported since
              <span x-text="relativeAge(info.live_state.recorded_at)"></span>.
            </p>
            <template x-bind:set="dot = info.live_state.stale ? 'stale' : 'fresh'"></template>
            {{ info_row('CPU usage', '<span x-text="info.live_state.cpu_usage.toFixed(1) + \'%\'"></span>'|safe, stale='fresh') }}
            {{ info_row('Memory free', '<span x-text="info.live_state.memory_free_gb.toFixed(1) + \' / \' + info.live_state.memory_total_gb.toFixed(1) + \' GB\'"></span>'|safe, stale='fresh') }}
            {{ info_row('Disk free', '<span x-text="info.live_state.disk_free_gb.toFixed(1) + \' / \' + info.live_state.disk_total_gb.toFixed(1) + \' GB\'"></span>'|safe, stale='fresh') }}
            {{ info_row('Uptime', '<span x-text="formatUptime(info.live_state.uptime_seconds)"></span>'|safe, stale='fresh') }}
            {{ info_row('Processes', '<span x-text="info.live_state.process_count"></span>'|safe, stale='fresh') }}
          {% endcall %}
        </div>
      </template>
      <template x-if="info">
        <div>
          {% call card(title='Session', kind='compact') %}
            {{ info_row('Connected', '<span x-text="formatTs(info.session.connected_at)"></span>'|safe, stale='fresh') }}
            {{ info_row('Last heartbeat', '<span x-text="formatTs(info.session.last_heartbeat_at)"></span>'|safe, stale='fresh') }}
            {{ info_row('Reconnects (24h)', '<span x-text="info.session.reconnect_count_24h"></span>'|safe, stale='fresh') }}
            {{ info_row('Active tunnels', '<span x-text="info.session.tunnel_count_active"></span>'|safe, stale='fresh') }}
          {% endcall %}
        </div>
      </template>
    </div>
    <template x-if="!info && !error">
      <p class="text-footnote text-ink-500 py-4">Loading info…</p>
    </template>
    <template x-if="error">
      <p class="text-footnote text-red-300 py-2" x-text="error"></p>
    </template>
  </div>

  <!-- ── AI tab (existing) ── -->
  <div x-show="tab === 'ai'"
       x-data="machineChat({ machineId: '{{ machine_id }}', sessionId: '{{ session_id }}', placeholder: 'Ask the agent…' })"
       x-init="$nextTick(() => initAI())"
       class="space-y-2 w-full" x-cloak>
    <div class="flex items-center justify-end">
      <button @click="clearChat()"
              :disabled="clearing"
              title="Clear chat history" aria-label="Clear chat history"
              class="inline-flex items-center gap-1.5 px-2.5 py-1 text-[11px] text-ink-400 hover:text-ink-200 border border-white/[0.08] hover:border-white/[0.16] rounded transition-colors disabled:opacity-40">
        <span x-show="!clearing" class="inline-flex"><i data-lucide="trash-2" class="w-3.5 h-3.5"></i></span>
        <span x-show="clearing" class="inline-flex"><i data-lucide="loader-2" class="w-3.5 h-3.5 animate-spin"></i></span>
        <span x-show="!clearing">Clear chat</span>
        <span x-show="clearing">Clearing…</span>
      </button>
    </div>
    {# Styling (bubbles, input, scrollbar, intro panel) is applied as JS
       PROPERTIES in machine-chat.js::applyJarvisChatTheme — not template
       attributes (deep-chat's attribute JSON parser was throwing at
       position 230 on multi-key configs). The intro panel below is the
       native deep-chat feature: a display:none child auto-shown centered
       and auto-hidden on first message. #}
    <deep-chat
      x-ref="deepchat"
      style="display: block; width: 100%; min-width: 100%; height: 560px; border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; background: #0a0a0a;"
      stream="true"
    >
      <div style="display:none">
        <div style="text-align:center;max-width:280px">
          <div class="jarvis-intro-title">Ask the agent.</div>
          <div class="jarvis-intro-sub">Run a command, inspect files, or check status on this machine.</div>
        </div>
      </div>
    </deep-chat>
  </div>

  <!-- ── PTY tab (existing) ── -->
  <div x-show="tab === 'pty'" class="space-y-2" x-cloak>
    <template x-if="machine?.specs?.device_type === 'virtual'">
      <div class="rounded-md border border-white/[0.06] bg-ink-950 flex flex-col items-center justify-center text-center px-6"
           style="height: 560px;">
        <i data-lucide="lock" class="w-10 h-10 text-ink-600 mb-4"></i>
        <h3 class="text-[13px] font-medium text-ink-200">Terminal not available</h3>
        <p class="text-[12px] text-ink-500 mt-1 max-w-sm">
          This is a virtual system machine managed by cmdop — there is no shell to attach to. Use the AI tab to interact with it.
        </p>
      </div>
    </template>
    <template x-if="machine && machine.specs?.device_type !== 'virtual'">
      <div x-data="machineTerminal({ machineId: '{{ machine_id }}' })"
           x-init="$nextTick(() => initTerminal())"
           class="space-y-2">
        <div class="flex items-center gap-3 text-[12px]">
          <span class="inline-flex items-center gap-1.5">
            <span class="w-1.5 h-1.5 rounded-full"
                  :class="status === 'live' ? 'bg-emerald-400' : status === 'connecting' ? 'bg-amber-300' : 'bg-ink-500'"></span>
            <span class="text-ink-300 capitalize" x-text="status || 'idle'"></span>
          </span>
          <span class="text-ink-500 truncate" x-text="statusMsg" x-show="statusMsg" :title="statusMsg"></span>
          <button @click="sendSigInt()"
                  :disabled="status !== 'live'"
                  title="Send SIGINT (Ctrl-C) to the foreground process"
                  aria-label="Send SIGINT"
                  class="ml-auto inline-flex items-center gap-1.5 px-2 py-0.5 text-[11px] text-ink-400 hover:text-ink-200 border border-white/[0.08] hover:border-white/[0.16] rounded transition-colors disabled:opacity-40">
            <i data-lucide="square" class="w-3 h-3"></i>
            <span>Ctrl-C</span>
          </button>
        </div>
        <div x-ref="termHost"
             class="rounded-md border border-white/[0.06] bg-ink-950"
             style="height: 560px;"></div>
      </div>
    </template>
  </div>
</div>

<script>
function machineDetailPage({ machineId, sessionId }) {
  return {
    machineId,
    sessionId,
    machine: null,
    // Plan 61/2b/W1 §C — default to Info when offline; AI when online.
    tab: 'overview',
    loading: false,
    loadError: null,

    async load() {
      this.loading = true;
      this.loadError = null;
      try {
        const res = await fetch(`/api/machines/${this.machineId}`);
        if (!res.ok) {
          this.loadError = `Failed to load machine (HTTP ${res.status})`;
          toast(this.loadError, 'error');
          return;
        }
        this.machine = await res.json();
        // Pick a sensible default tab once we know presence.
        if (this.tab === 'overview') {
          const presence = (this.machine && this.machine.presence) || 'offline';
          this.tab = presence === 'online' ? 'overview' : 'info';
        }
      } catch (e) {
        this.loadError = `Network error: ${e.message}`;
        toast(this.loadError, 'error');
      } finally {
        this.loading = false;
        this.$nextTick(() => window.lucide && window.lucide.createIcons());
      }
    },

    presenceColor(p) {
      return p === 'online' ? 'bg-emerald-400' : p === 'stale' ? 'bg-amber-300' : 'bg-ink-500';
    },

    currentPresence() {
      const live = Alpine.store('machinePresence')?.byId?.[this.machineId];
      return (live && live.presence) || (this.machine && this.machine.presence) || 'offline';
    },

    currentLastSeen() {
      const live = Alpine.store('machinePresence')?.byId?.[this.machineId];
      return (live && live.last_heartbeat_at) || (this.machine && this.machine.last_heartbeat_at);
    },

    absoluteTime(iso) {
      if (!iso) return '';
      try { return new Date(iso).toLocaleString(); } catch (_) { return iso; }
    },

    lastSeenLabel(iso) {
      if (!iso) return 'never';
      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) {
        try { return new Date(iso).toLocaleDateString(); } catch (_) { return `${d}d ago`; }
      }
      return `${d}d ago`;
    },
  };
}

function machineInfoTab({ machineId }) {
  return {
    machineId,
    info: null,
    error: null,
    async load() {
      this.error = null;
      try {
        const res = await fetch(`/api/admin/machines/${this.machineId}/info`);
        if (!res.ok) {
          this.error = `HTTP ${res.status}`;
          return;
        }
        this.info = await res.json();
        this.$nextTick(() => window.lucide && window.lucide.createIcons());
      } catch (e) {
        this.error = `Network error: ${e.message}`;
      }
    },
    formatTs(iso) {
      if (!iso) return '—';
      try { return new Date(iso).toLocaleString(); } catch (_) { return iso; }
    },
    relativeAge(iso) {
      if (!iso) return '—';
      const t = new Date(iso).getTime();
      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);
      return `${d}d ago`;
    },
    formatUptime(secs) {
      if (!secs) return '—';
      const d = Math.floor(secs / 86400);
      const h = Math.floor((secs % 86400) / 3600);
      if (d > 0) return `${d}d ${h}h`;
      const m = Math.floor((secs % 3600) / 60);
      return `${h}h ${m}m`;
    },
  };
}

function machineSpendCard({ machineId }) {
  return {
    machineId,
    window: localStorage.getItem('cmdop.machine.spend.window') || '7d',
    loading: false,
    error: null,
    data: null,
    async load() {
      this.loading = true;
      this.error = null;
      localStorage.setItem('cmdop.machine.spend.window', this.window);
      try {
        const res = await fetch(`/api/admin/machines/${this.machineId}/spend?window=${this.window}`);
        if (!res.ok) {
          if (res.status === 403) {
            this.error = null;
            this.data = null;
            return;
          }
          this.error = `HTTP ${res.status}`;
          return;
        }
        this.data = await res.json();
        this.$nextTick(() => window.lucide && window.lucide.createIcons());
      } catch (e) {
        this.error = `Network error: ${e.message}`;
      } finally {
        this.loading = false;
      }
    },
  };
}
</script>
{% endblock %}