// /flow.html entry point. Owns the full-page broker terminal and the
// @-mention compose box. Pulls shared infrastructure (DOM helpers,
// side panel, OS notifications, path linkification) from `./common.js`.
//
// The operator inbox lives on the dashboard's Y3R C4LL tab now; FL0W
// stays the pure event firehose.
//
// Does NOT contain the dashboard's tab renderers, mutation-event
// dispatchers, or refreshState — that's `./tabs.js`, loaded only by
// /dashboard.html. The flow page runs purely on the broker stream + an
// initial /api/state fetch (compose autocomplete needs the live
// container list).

import { create as termCreate } from '@hive/shared/terminal.js';
import {
  $,
  NOTIF,
  appendLinkified,
  openStream, initServerWarnings,
} from './common.js';
import { el } from '@hive/shared/dom.js';
import { epochSec } from './util.js';

(() => {
  NOTIF.bind();
  initServerWarnings();

  // ─── local containers cache (for compose autocomplete) ──────────────────
  // The compose box's @-mention completion suggests known agent names.
  // /dashboard.html (tabs.js) maintains the canonical `containersState`
  // from /api/state + SSE; here we keep a small local mirror updated
  // by the same `container_state_changed` / `container_removed` events
  // the dashboard would handle.
  const flowContainers = new Map();
  fetch('/api/state').then((r) => r.ok ? r.json() : null).then((s) => {
    if (!s || !Array.isArray(s.containers)) return;
    for (const c of s.containers) flowContainers.set(c.name, c);
    populateAgentFilter();
  }).catch(() => { /* graceful: compose just shows `*` and nothing else */ });

  // ─── agent filter ───────────────────────────────────────────────
  // A select in the FL0W header narrows the timeline to messages involving
  // one agent (matched on `from` OR `to`). Each rendered row carries
  // `data-from` / `data-to`; non-matching rows get `.flow-hidden`. New rows
  // pick up the active filter at render time (see renderMsg); changing the
  // filter re-scans existing rows. Selection persists in localStorage so a
  // reload / tab-switch keeps the view. Uses `$('msgflow')` for row access
  // so it works regardless of the message-flow IIFE's local scope.
  let agentFilter = localStorage.getItem('flow-agent-filter') || '';
  function rowMatchesFilter(from, to) {
    return !agentFilter || from === agentFilter || to === agentFilter;
  }
  function applyAgentFilter() {
    const flow = $('msgflow');
    if (!flow) return;
    for (const row of flow.children) {
      const { from, to } = row.dataset;
      if (from === undefined && to === undefined) continue; // non-message row
      row.classList.toggle('flow-hidden', !rowMatchesFilter(from, to));
    }
  }
  function populateAgentFilter() {
    const sel = $('flow-agent-filter');
    if (!sel) return;
    const names = [...flowContainers.keys()].sort();
    sel.replaceChildren();
    sel.append(el('option', { value: '' }, 'all agents'));
    for (const n of names) sel.append(el('option', { value: n }, n));
    // Preserve a saved selection even if that agent isn't in the live
    // container list (yet / anymore) so the filter doesn't silently reset.
    if (agentFilter && !names.includes(agentFilter)) {
      sel.append(el('option', { value: agentFilter }, agentFilter));
    }
    sel.value = agentFilter;
  }
  {
    const sel = $('flow-agent-filter');
    if (sel) {
      sel.addEventListener('change', () => {
        agentFilter = sel.value;
        if (agentFilter) localStorage.setItem('flow-agent-filter', agentFilter);
        else localStorage.removeItem('flow-agent-filter');
        applyAgentFilter();
      });
    }
  }

  // ─── message flow: shared terminal pane ────────────────────────────────
  // Scroll, pill, backfill + SSE plumbing live in @hive/shared/terminal.
  // What stays here is the broker-message renderer + the page-local
  // side effects (banner pulse, OS notifications on operator-bound
  // traffic).
  (() => {
    const flow = $('msgflow');
    if (!flow) return;
    flow.replaceChildren();
    const tsFmt = (ts) => new Date(ts).toISOString().slice(11, 19);
    // Pulse the page banner whenever a broker event lands. The
    // `.banner` element lives in the dashboard's <footer> rather than
    // in the flow chrome — `pulseBanner` no-ops on /flow.html since
    // there's no element to find. Kept for parity if a future chrome
    // change reintroduces a banner.
    const banner = document.querySelector('.banner');
    let bannerOffTimer = null;
    function pulseBanner() {
      if (!banner) return;
      banner.classList.add('active');
      if (bannerOffTimer) clearTimeout(bannerOffTimer);
      bannerOffTimer = setTimeout(() => banner.classList.remove('active'), 4000);
    }
    // Map of broker row id → rendered row element. Lets reply rows add
    // a visual "↳ in reply to" indicator that links back to the parent.
    // Bounded by the history window (~200 msgs from /dashboard/history),
    // well within normal memory.
    const msgRowMap = new Map();

    function renderMsg(ev, api, glyph) {
      const isReply = ev.in_reply_to != null;
      const cls = 'msgrow ' + ev.kind + (isReply ? ' msg-reply' : '');
      const row = api.row(cls, '');
      // Build via DOM so path anchors stay live + escape rules are
      // automatic (text nodes don't need esc()).
      const ts = document.createElement('span');
      ts.className = 'msg-ts'; ts.textContent = tsFmt(ev.at);
      const arrow = document.createElement('span');
      arrow.className = 'msg-arrow'; arrow.textContent = glyph;
      const from = document.createElement('span');
      from.className = 'msg-from'; from.textContent = ev.from;
      const sep = document.createElement('span');
      sep.className = 'msg-sep'; sep.textContent = '→';
      const to = document.createElement('span');
      to.className = 'msg-to'; to.textContent = ev.to;
      const body = document.createElement('span');
      body.className = 'msg-body';
      appendLinkified(body, ev.body, ev.file_refs);
      // Reply thread indicator: a small "↳ reply to <from>" hint that
      // shows which message this is responding to. If we have the parent
      // in our row map, clicking scrolls it into view.
      if (isReply) {
        const replyTag = document.createElement('span');
        replyTag.className = 'msg-reply-tag';
        const parentRow = msgRowMap.get(ev.in_reply_to);
        if (parentRow) {
          const link = document.createElement('a');
          link.href = '#';
          link.textContent = '↳ reply';
          link.title = 'scroll to parent message';
          link.addEventListener('click', (e) => {
            e.preventDefault();
            parentRow.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
            parentRow.classList.add('msg-highlight');
            setTimeout(() => parentRow.classList.remove('msg-highlight'), 1500);
          });
          replyTag.append(link);
        } else {
          replyTag.textContent = '↳ reply';
        }
        row.prepend(replyTag);
        row.append(ts, ' ', arrow, ' ', from, ' ', sep, ' ', to, ' ', body);
      } else {
        row.append(ts, ' ', arrow, ' ', from, ' ', sep, ' ', to, ' ', body);
      }
      // Tag with the participants so the agent filter can match
      // on `from`/`to`, and hide the row up-front if a filter is active.
      row.dataset.from = ev.from;
      row.dataset.to = ev.to;
      if (!rowMatchesFilter(ev.from, ev.to)) row.classList.add('flow-hidden');
      // Register this row so future replies can reference it.
      if (ev.id != null && ev.id > 0) msgRowMap.set(ev.id, row);
      return row;
    }

    // Sent→Delivered collapse. When a message directly wakes its
    // recipient the broker emits `sent` then `delivered` for the same row
    // id back-to-back, rendering two near-identical lines. We track each
    // recent `sent` row and, when its `delivered` lands within
    // COLLAPSE_SECS, upgrade that row in place (✓) instead of adding a
    // second line. A delivery that arrives *later* (recipient was busy)
    // stays a separate row so the latency remains visible.
    const COLLAPSE_SECS = 3;
    const recentSent = new Map(); // broker row id → { row, at }
    function rememberSent(ev, row) {
      if (ev.id == null || ev.id <= 0) return;
      recentSent.set(ev.id, { row, at: epochSec(ev.at) });
      // Bound the map — drop the oldest entries once it grows past a
      // page of un-collapsed sends (insertion order = oldest first).
      while (recentSent.size > 256) {
        recentSent.delete(recentSent.keys().next().value);
      }
    }
    // Returns true if the delivered event was folded into its sent row.
    function collapseDelivered(ev) {
      if (ev.id == null || ev.id <= 0) return false;
      const s = recentSent.get(ev.id);
      if (!s || epochSec(ev.at) - s.at > COLLAPSE_SECS) return false;
      const arrow = s.row.querySelector('.msg-arrow');
      if (arrow) arrow.textContent = '✓';
      // Re-style the row as delivered (green ✓) — the collapsed line now
      // represents the delivered state; it was sent + delivered as one.
      s.row.classList.remove('sent');
      s.row.classList.add('delivered');
      s.row.title = 'sent + delivered';
      recentSent.delete(ev.id);
      return true;
    }
    // Anchor the `↓ N new` pill in `.flow-main` rather than the
    // default `.terminal-wrap` parent — see docs/web-ui.md::Per-agent
    // page (Terminal-wrap) for the backdrop-filter stacking-context
    // gotcha (same shape on the flow page).
    const flowMain = document.querySelector('.flow-main');
    termCreate({
      logEl: flow,
      pillAnchor: flowMain,
      historyUrl: '/api/dashboard/history',
      // Server-side filter — only the kinds this page actually renders
      // or routes (sent/delivered → broker terminal,
      // container_state_changed/_removed → local autocomplete cache).
      // Backend pre-parses the allow-list at subscribe time so the
      // per-frame hot path is one HashSet::contains and the
      // JSON-serialise is skipped entirely on irrelevant kinds. The
      // dashboard tabs page (tabs.js) keeps the unfiltered subscribe
      // since it routes every mutation kind into its derived stores.
      streamUrl: '/api/dashboard/stream?kinds=sent,delivered,container_state_changed,container_removed',
      // Route through the SharedWorker — see docs/web-ui.md (SSE
      // multiplexing paragraph). Worker keys on the full URL incl.
      // query string, so this filtered subscribe is its own upstream
      // and won't accidentally share with tabs.js's wider subscribe.
      streamFactory: openStream,
      renderers: {
        sent:      (ev, api) => rememberSent(ev, renderMsg(ev, api, '→')),
        delivered: (ev, api) => {
          // Fold into the matching sent row when it just happened;
          // otherwise render the delivery as its own line.
          if (!collapseDelivered(ev)) renderMsg(ev, api, '✓');
        },
        // Maintain the local containers cache from the same stream
        // (compose autocomplete reads from `flowContainers`). The
        // dashboard's tab renderers aren't on this page, so we don't
        // need to dispatch to applyContainerStateChanged etc. — just
        // keep the autocomplete list current.
        container_state_changed: (ev) => {
          if (ev.container && ev.container.name) {
            flowContainers.set(ev.container.name, ev.container);
            populateAgentFilter(); // keep the filter dropdown current
          }
        },
        container_removed: (ev) => {
          flowContainers.delete(ev.name);
          populateAgentFilter();
        },
        // Drop every other mutation kind silently — without this
        // they'd fall through to the terminal module's default
        // renderer and clutter the log with JSON dumps. The dashboard
        // tabs handle these on /dashboard.html via tabs.js.
        _default: () => {},
      },
      // Re-sync the local containers cache on every SSE (re)connect.
      // Live mutation events that fired during a disconnect window
      // are never replayed, so without this the compose autocomplete
      // could drift stale.
      onStreamOpen: () => {
        fetch('/api/state').then((r) => r.ok ? r.json() : null).then((s) => {
          if (!s || !Array.isArray(s.containers)) return;
          flowContainers.clear();
          for (const c of s.containers) flowContainers.set(c.name, c);
        }).catch(() => {});
      },
      onLiveEvent: (ev) => {
        pulseBanner();
        if (ev.kind === 'sent' && ev.to === 'operator') {
          NOTIF.show(
            '◆ ' + ev.from + ' → operator',
            String(ev.body || '').slice(0, 200),
            // Unique-per-arrival tag so a burst stacks instead of
            // overwriting itself in the OS notification center.
            'hyperhive:msg:' + ev.at + ':' + Math.random().toString(36).slice(2, 6),
          );
        }
      },
    });
  })();

  // ─── compose: @-mention with sticky recipient ───────────────────────────
  (() => {
    const input = $('op-compose-input');
    const prompt = $('op-compose-prompt');
    const suggest = $('op-compose-suggest');
    if (!input || !prompt || !suggest) return;
    const STORAGE_KEY = 'hyperhive:op-compose:to';
    let stickyTo = localStorage.getItem(STORAGE_KEY) || '';
    let suggestActive = -1;
    function renderPrompt() {
      prompt.textContent = stickyTo ? `@${stickyTo}>` : '@—>';
    }
    function knownAgents() {
      // Read live from the flow-local containers cache so newly-spawned
      // agents become addressable without a manual reload.
      const names = Array.from(flowContainers.values())
        .map((c) => c.name);
      // `*` fans out to every registered agent (server-side
      // broadcast_send).
      names.unshift('*');
      return names;
    }
    function autosize() {
      input.style.height = 'auto';
      input.style.height = `${input.scrollHeight}px`;
    }
    /// Parse "@name body…" — return {to, body} when the input opens
    /// with a known @-mention, otherwise null.
    function parseAddressed(raw) {
      const m = raw.match(/^@([\w*-]+)\s+([\s\S]+)$/);
      if (!m) return null;
      return { to: m[1], body: m[2] };
    }
    function hideSuggest() {
      suggest.hidden = true;
      suggest.replaceChildren();
      suggestActive = -1;
    }
    function renderSuggest(matches) {
      suggest.replaceChildren();
      if (!matches.length) { hideSuggest(); return; }
      for (let i = 0; i < matches.length; i += 1) {
        const item = document.createElement('div');
        item.className = 'item' + (i === suggestActive ? ' active' : '');
        item.textContent = '@' + matches[i];
        item.addEventListener('mousedown', (e) => {
          e.preventDefault();
          applySuggestion(matches[i]);
        });
        suggest.append(item);
      }
      suggest.hidden = false;
    }
    function applySuggestion(name) {
      // Replace the partial @-token at the start with the full name.
      const v = input.value;
      const m = v.match(/^@(\S*)/);
      if (m) {
        input.value = `@${name} ` + v.slice(m[0].length).replace(/^\s+/, '');
      } else {
        input.value = `@${name} ` + v;
      }
      hideSuggest();
      input.focus();
      input.setSelectionRange(input.value.length, input.value.length);
      autosize();
    }
    function updateSuggest() {
      const v = input.value;
      // Only suggest when an @-token sits at the very start of the
      // input — switching recipient is always "redirect this whole
      // line." Mid-message @-mentions stay literal.
      const m = v.match(/^@(\S*)/);
      if (!m) { hideSuggest(); return; }
      const partial = m[1].toLowerCase();
      const matches = knownAgents().filter((n) => n.toLowerCase().startsWith(partial));
      if (!matches.length) { hideSuggest(); return; }
      if (suggestActive < 0 || suggestActive >= matches.length) suggestActive = 0;
      renderSuggest(matches);
    }
    async function submit() {
      const raw = input.value.trim();
      if (!raw) return;
      let to;
      let body;
      const addressed = parseAddressed(raw);
      if (addressed) {
        to = addressed.to;
        body = addressed.body.trim();
      } else if (stickyTo) {
        to = stickyTo;
        body = raw;
      } else {
        flashError('no recipient — start with @name to address a message');
        return;
      }
      if (!body) return;
      const fd = new FormData();
      fd.append('to', to);
      fd.append('body', body);
      input.disabled = true;
      try {
        // /op-send returns 200. The SSE channel carries the resulting
        // MessageEvent → the terminal renders the sent row on its own;
        // no /api/state refetch needed.
        const resp = await fetch('/api/op-send', {
          method: 'POST',
          body: new URLSearchParams(fd),
        });
        if (!resp.ok) {
          flashError(`send failed: http ${resp.status}`);
          return;
        }
      } catch (err) {
        flashError(`send failed: ${err}`);
        return;
      } finally {
        input.disabled = false;
      }
      stickyTo = to;
      localStorage.setItem(STORAGE_KEY, to);
      input.value = '';
      autosize();
      renderPrompt();
      input.focus();
    }
    function flashError(msg) {
      const flow = $('msgflow');
      if (!flow) return;
      const row = document.createElement('div');
      row.className = 'msgrow meta';
      row.textContent = '✗ ' + msg;
      // Append at the bottom so the error is visible — the terminal
      // renders newest-last, so inserting before firstChild would place
      // the error at the top (oldest end) and hide it from view.
      flow.append(row);
      // Scroll the terminal wrap so the error is in view.
      const wrap = flow.parentElement;
      if (wrap) wrap.scrollTop = wrap.scrollHeight;
    }
    input.addEventListener('input', () => { autosize(); updateSuggest(); });
    input.addEventListener('keydown', (e) => {
      if (!suggest.hidden) {
        if (e.key === 'ArrowDown') {
          const items = suggest.querySelectorAll('.item');
          suggestActive = (suggestActive + 1) % items.length;
          renderSuggest(Array.from(items).map((i) => i.textContent.slice(1)));
          e.preventDefault();
          return;
        }
        if (e.key === 'ArrowUp') {
          const items = suggest.querySelectorAll('.item');
          suggestActive = (suggestActive - 1 + items.length) % items.length;
          renderSuggest(Array.from(items).map((i) => i.textContent.slice(1)));
          e.preventDefault();
          return;
        }
        if (e.key === 'Tab' || (e.key === 'Enter' && !e.shiftKey)) {
          const active = suggest.querySelector('.item.active');
          if (active) {
            applySuggestion(active.textContent.slice(1));
            e.preventDefault();
            return;
          }
        }
        if (e.key === 'Escape') {
          hideSuggest();
          e.preventDefault();
          return;
        }
      }
      if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        submit();
      }
    });
    input.addEventListener('blur', () => {
      // Defer so a click on a suggestion item (mousedown) lands first.
      setTimeout(hideSuggest, 100);
    });
    renderPrompt();
    autosize();
  })();
})();