// /flow.html entry point (#406 step 2 — flow-specific split from app.js).
//
// Owns the full-page broker terminal, the operator-inbox derived store
// (populated from the broker stream), the inbox pill flyout, and the
// @-mention compose box. Pulls shared infrastructure (DOM helpers, side
// panel, OS notifications, path linkification) from `./common.js`.
//
// Does NOT contain the dashboard's tab renderers, mutation-event
// dispatchers, or refreshState — that's `./app.js` (the legacy entry
// kept until step 3 renames it to `tabs.js`). For now 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 {
  $, el,
  Panel, NOTIF,
  appendLinkified,
} from './common.js';

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

  // ─── operator inbox (derived from the broker message stream) ───────────
  // No longer shipped on `/api/state.operator_inbox`. The broker
  // terminal feeds this via `onAnyEvent` — backfill from
  // `/dashboard/history` populates on load, live SSE keeps it current.
  // Newest-first to match the previous behaviour.
  const INBOX_LIMIT = 50;
  const operatorInbox = [];
  function inboxAppendFromEvent(ev) {
    if (ev.kind !== 'sent' || ev.to !== 'operator') return false;
    operatorInbox.unshift({
      from: ev.from,
      body: ev.body,
      at: ev.at,
      file_refs: ev.file_refs || [],
    });
    if (operatorInbox.length > INBOX_LIMIT) operatorInbox.length = INBOX_LIMIT;
    return true;
  }
  function buildInboxListNode() {
    if (!operatorInbox.length) return el('p', { class: 'empty' }, 'no messages');
    const fmt = (n) => new Date(n * 1000).toISOString().replace('T', ' ').slice(0, 19);
    const ul = el('ul', { class: 'inbox' });
    for (const m of operatorInbox) {
      const li = el('li');
      const body = el('span', { class: 'msg-body' });
      appendLinkified(body, m.body, m.file_refs);
      li.append(
        el('span', { class: 'msg-ts' }, fmt(m.at)), ' ',
        el('span', { class: 'msg-from' }, m.from), ' ',
        el('span', { class: 'msg-sep' }, '→ '),
        body,
      );
      ul.append(li);
    }
    return ul;
  }
  function renderInbox() {
    // Flow page surfaces inbox as a pill that opens the side-panel
    // flyout. Pill is hidden when empty; click handler below opens
    // the panel with the freshest list. If the panel is already
    // showing the inbox view, refresh its body in place so live
    // messages land without a re-open.
    const pill = $('inbox-pill');
    const pillCount = $('inbox-pill-count');
    if (pillCount) pillCount.textContent = String(operatorInbox.length);
    if (pill) pill.hidden = operatorInbox.length === 0;
    Panel.refresh('inbox', 'inbox · ' + operatorInbox.length, buildInboxListNode());
  }

  // Wire the inbox pill to open the side-panel flyout with the
  // operator inbox.
  const inboxPill = $('inbox-pill');
  if (inboxPill) {
    inboxPill.addEventListener('click', () => {
      Panel.openNamed('inbox', 'inbox · ' + operatorInbox.length,
        buildInboxListNode());
    });
  }

  // ─── local containers cache (for compose autocomplete) ──────────────────
  // The compose box's @-mention completion suggests known agent names.
  // /index.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);
  }).catch(() => { /* graceful: compose just shows `*` and nothing else */ });

  // ─── 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, inbox refresh on operator-bound
  // traffic, OS notifications).
  (() => {
    const flow = $('msgflow');
    if (!flow) return;
    flow.innerHTML = '';
    const tsFmt = (n) => new Date(n * 1000).toISOString().slice(11, 19);
    // Pulse the page banner whenever a broker event lands. (Note:
    // post-#389 the `.banner` lives in the dashboard's <footer>, not
    // in the flow page 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);
      }
      // Register this row so future replies can reference it.
      if (ev.id != null && ev.id > 0) msgRowMap.set(ev.id, row);
    }
    // Anchor the `↓ N new` pill in `.flow-main` (NOT the default
    // `log.parentElement` = `.terminal-wrap`). `.terminal-wrap`
    // applies `backdrop-filter`, which creates a CSS stacking
    // context — the pill's z-index would otherwise be trapped
    // inside and clipped under the fixed composer (issue #375).
    // `.flow-main` has no backdrop-filter / stacking-context
    // creators, so the pill's z-index reaches the root and floats
    // above the composer.
    const flowMain = document.querySelector('.flow-main');
    termCreate({
      logEl: flow,
      pillAnchor: flowMain,
      historyUrl: '/dashboard/history',
      streamUrl: '/dashboard/stream',
      renderers: {
        sent:      (ev, api) => renderMsg(ev, api, '→'),
        delivered: (ev, api) => 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);
          }
        },
        container_removed: (ev) => { flowContainers.delete(ev.name); },
        // 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 /index.html via tabs.js.
        _default: () => {},
      },
      // Both history backfill and live frames flow through here, so the
      // inbox section ends up populated correctly on first paint and
      // updated thereafter — no /api/state refetch needed for inbox
      // freshness.
      onAnyEvent: (ev /* , { fromHistory } */) => {
        if (inboxAppendFromEvent(ev)) renderInbox();
      },
      // 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 (issue #163). We don't try to recover
      // missed broker rows here — operator inbox briefly stales on
      // reconnect; HiveTerminal's history-replay covers the next
      // page load.
      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.
      // Broker uses the literal recipient `manager` for the manager's
      // inbox, not the container name `hm1nd`.
      const names = Array.from(flowContainers.values())
        .map((c) => (c.is_manager ? 'manager' : 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.innerHTML = '';
      suggestActive = -1;
    }
    function renderSuggest(matches) {
      suggest.innerHTML = '';
      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 + the
        // inbox updates on its own; no /api/state refetch needed.
        const resp = await fetch('/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;
      flow.insertBefore(row, flow.firstChild);
    }
    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();
  })();
})();