{% extends "base.html" %}
{% block title %}Network · Harbormaster{% endblock %}
{% block content %}

<nav class="mb-4 text-sm text-gray-400">
  <a href="/" class="hover:text-cyan-400">← Dashboard</a>
  <span class="mx-2 text-gray-700">/</span>
  <span class="text-gray-300">Network</span>
</nav>

<header class="mb-4 flex items-center justify-between gap-3 flex-wrap">
  <div>
    <h2 class="text-xl font-bold text-cyan-400">Inter-project network</h2>
    <p class="text-xs text-gray-500 mt-1">
      Live MCP-call events. Edges thicken with call frequency.
    </p>
  </div>
  <div class="flex items-center gap-2 text-xs">
    <span class="text-gray-500">view:</span>
    <button type="button" id="hm-network-view-graph"
            x-data
            @click="$dispatch('hm:network:view', 'graph')"
            aria-label="Switch to graph view"
            class="px-2 py-0.5 rounded border border-gray-700 hover:border-cyan-700 text-gray-300 hover:text-cyan-300">
      Graph
    </button>
    <button type="button" id="hm-network-view-chat"
            x-data
            @click="$dispatch('hm:network:view', 'chat')"
            aria-label="Switch to chat view"
            class="px-2 py-0.5 rounded border border-gray-700 hover:border-cyan-700 text-gray-300 hover:text-cyan-300">
      Chat
    </button>
  </div>
</header>

<section x-data="networkPanel()" x-init="init()"
         class="border border-gray-800 rounded-lg p-3 bg-gray-900/40">
  <div class="flex items-baseline justify-between gap-2 mb-2 text-xs">
    <span class="text-gray-500" x-text="`${events.length} event${events.length === 1 ? '' : 's'} recorded`"></span>
    {# v11.0.0a4: stateBadge unification — replaces two inline color-
       only spans with the shared icon+label badge component. #}
    <span x-show="connected"
          x-html="window.harbormaster.stateBadgeHtml({
            state: 'live', icon: '●', color: 'emerald', label: 'live',
          })"></span>
    <span x-show="!connected && initialized"
          x-html="window.harbormaster.stateBadgeHtml({
            state: 'offline', icon: '⊘', color: 'amber', label: 'offline',
          })"></span>
  </div>
  <p x-show="error" :aria-hidden="!error" role="alert"
     class="text-xs text-red-400 mb-2" x-text="error"></p>
  <p x-show="!error && events.length === 0" role="status"
     data-empty-state="network.no-events"
     class="text-xs text-gray-400 px-4 py-6 text-center">
    No MCP calls recorded yet — ask a project something and watch this fill in.
  </p>

  <!-- Graph view -->
  <div x-show="view === 'graph' && events.length > 0"
       id="hm-network-graph"
       class="border border-gray-800 rounded bg-gray-950"
       style="width: 100%; height: 60vh;"></div>

  <!-- v10.0.0a8: chat view (chronological event log).
       Each row: [time] caller → tool(target) "<truncated question>"
       Click a row to expand to the full preview text. -->
  <ul x-show="view === 'chat' && events.length > 0"
      id="hm-network-chat"
      class="border border-gray-800 rounded bg-gray-950 divide-y divide-gray-900 overflow-y-auto"
      style="max-height: 60vh;">
    <template x-for="(ev, i) in chatOrder()" :key="'ce:' + i + ':' + ev.timestamp_ms">
      <li x-data="{ open: false }"
          class="px-3 py-1.5 text-xs hover:bg-gray-900/30">
        <button type="button"
                @click="open = !open"
                :aria-expanded="open"
                aria-label="Toggle event details"
                class="w-full text-left flex items-baseline gap-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cyan-400">
          <span class="font-mono text-gray-500 shrink-0"
                x-text="new Date(ev.timestamp_ms).toLocaleTimeString()"></span>
          <span class="text-gray-400" x-text="ev.caller"></span>
          <span class="text-gray-600" aria-hidden="true">→</span>
          <span :class="{
                  'text-cyan-300': ev.tool === 'ask_project',
                  'text-purple-300': ev.tool === 'delegate_task',
                  'text-cyan-200': ev.tool === 'fan_out_ask',
                  'text-emerald-300': ev.tool === 'recall_qa',
                }"
                class="text-gray-300 font-mono"
                x-text="ev.tool"></span>
          <span class="text-gray-600" aria-hidden="true">(</span>
          <span class="text-cyan-400" x-text="ev.target"></span>
          <span class="text-gray-600" aria-hidden="true">)</span>
          <span class="truncate text-gray-400 italic"
                x-show="!open"
                x-text="ev.question_preview ? `“${ev.question_preview.slice(0, 80)}${ev.question_preview.length > 80 ? '…' : ''}”` : ''"></span>
          <span x-show="ev.status === 'error'"
                class="ml-auto text-rose-400 shrink-0">err</span>
        </button>
        <div x-show="open" class="mt-1 ml-12 text-[11px] text-gray-300 whitespace-pre-wrap"
             x-text="ev.question_preview || '(no preview)'"></div>
      </li>
    </template>
  </ul>
</section>

<script src="/static/vendor/cytoscape.min.js"></script>
<script>
  function networkPanel() {
    return {
      // v10.0.0a8: localStorage-backed view preference. Defaults
      // to 'graph' on first visit; subsequent loads pick up the
      // operator's last toggle.
      view: 'graph',          // toggled by hm:network:view dispatch from header
      events: [],
      cy: null,
      connected: false,
      initialized: false,
      error: '',
      _eventSource: null,

      async init() {
        // v10.0.0a8: restore the last-used view.
        try {
          const saved = localStorage.getItem('hm:network:view');
          if (saved === 'chat' || saved === 'graph') this.view = saved;
        } catch (_) { /* default 'graph' */ }
        // Listen for the header view-toggle. Persist on change.
        window.addEventListener('hm:network:view', (e) => {
          this.view = e.detail || 'graph';
          try { localStorage.setItem('hm:network:view', this.view); } catch (_) {}
          if (this.view === 'graph' && this.events.length > 0) {
            // Re-render after a tick — the container becomes visible
            // again and Cytoscape needs the layout pass to re-fit.
            requestAnimationFrame(() => this._renderGraph());
          }
        });
        await this._loadInitial();
        this._subscribe();
        if (this.view === 'graph' && this.events.length > 0) this._renderGraph();
        this.initialized = true;
      },

      // v10.0.0a8: chat view shows newest-first so the latest
      // activity is at the top without scrolling.
      chatOrder() {
        return [...this.events].reverse();
      },

      async _loadInitial() {
        try {
          const r = await hmFetch('/api/network/events?limit=500');
          if (!r.ok) throw new Error('HTTP ' + r.status);
          const data = await r.json();
          this.events = Array.isArray(data.events) ? data.events : [];
        } catch (e) {
          this.error = 'failed to load: ' + e.message;
        }
      },

      _subscribe() {
        // EventSource doesn't support custom headers, so the SSE
        // stream is bearer-protected via cookies/IP scope rather than
        // the bearer-token header. Acceptable for v10 (operator
        // reachable on loopback / private network).
        try {
          this._eventSource = new EventSource('/api/network/stream');
          this._eventSource.addEventListener('event', (msg) => {
            try {
              const ev = JSON.parse(msg.data);
              this.events.push(ev);
              if (this.events.length > 500) this.events.shift();
              if (this.view === 'graph' && this.cy) this._addEventToGraph(ev);
            } catch (_) { /* drop malformed */ }
          });
          this._eventSource.addEventListener('open', () => {
            this.connected = true;
          });
          this._eventSource.addEventListener('error', () => {
            this.connected = false;
          });
        } catch (e) {
          this.error = 'stream subscribe failed: ' + e.message;
        }
      },

      _renderGraph() {
        if (!window.cytoscape) {
          this.error = 'cytoscape failed to load';
          return;
        }
        // Aggregate events into nodes + weighted edges.
        const nodes = new Map();   // id → {data:{id,label}}
        const edges = new Map();   // edgeKey → {data:{source,target,tool,weight}}
        for (const ev of this.events) {
          for (const n of [ev.caller, ev.target]) {
            if (!nodes.has(n)) nodes.set(n, { data: { id: n, label: n } });
          }
          const key = ev.caller + '|' + ev.target + '|' + ev.tool;
          const existing = edges.get(key);
          if (existing) {
            existing.data.weight += 1;
          } else {
            edges.set(key, {
              data: {
                source: ev.caller,
                target: ev.target,
                tool: ev.tool,
                weight: 1,
              },
            });
          }
        }
        const elements = [...nodes.values(), ...edges.values()];
        if (this.cy) this.cy.destroy();
        this.cy = window.cytoscape({
          container: document.getElementById('hm-network-graph'),
          elements: elements,
          style: [
            {
              selector: 'node',
              style: {
                'background-color': '#0e7490',
                'label': 'data(label)',
                'color': '#e2e8f0',
                'font-size': '11px',
                'text-valign': 'center',
                'text-halign': 'center',
                'text-outline-color': '#0f172a',
                'text-outline-width': 2,
              },
            },
            {
              selector: 'edge',
              style: {
                'curve-style': 'bezier',
                'target-arrow-shape': 'triangle',
                'width': 'mapData(weight, 1, 20, 1, 8)',
                'line-color': '#475569',
                'target-arrow-color': '#475569',
              },
            },
            // v10.0.0a7: tool-color edges.
            { selector: 'edge[tool = "ask_project"]',
              style: { 'line-color': '#22d3ee', 'target-arrow-color': '#22d3ee' } },
            { selector: 'edge[tool = "delegate_task"]',
              style: { 'line-color': '#a78bfa', 'target-arrow-color': '#a78bfa' } },
            { selector: 'edge[tool = "fan_out_ask"]',
              style: { 'line-color': '#67e8f9', 'target-arrow-color': '#67e8f9' } },
            { selector: 'edge[tool = "recall_qa"]',
              style: { 'line-color': '#34d399', 'target-arrow-color': '#34d399' } },
          ],
          layout: { name: 'cose', idealEdgeLength: 100, animate: false },
        });
      },

      _addEventToGraph(ev) {
        // Cheap incremental update: bump or create the edge, add new
        // nodes, then run a quick layout step. Full re-render is
        // reserved for the initial mount.
        if (!this.cy) return;
        for (const n of [ev.caller, ev.target]) {
          if (!this.cy.getElementById(n).length) {
            this.cy.add({ data: { id: n, label: n } });
          }
        }
        const id = `${ev.caller}__${ev.target}__${ev.tool}`;
        const existing = this.cy.getElementById(id);
        if (existing.length) {
          existing.data('weight', (existing.data('weight') || 1) + 1);
        } else {
          this.cy.add({
            data: {
              id,
              source: ev.caller,
              target: ev.target,
              tool: ev.tool,
              weight: 1,
            },
          });
        }
      },
    };
  }
</script>
{% endblock %}