// A channel as an editor tab (spec §5.3): its messages, newest at the

// bottom, threads opened in place, and a compose box that posts as you.

import * as vscode from "vscode";

import type { Message, Messages, Posted } from "./spectra-api";

import { Bridge } from "./bridge";

import { Model } from "./model";

import { esc, when } from "./pure";

const panels = new Map<string, ChannelPanel>();

export function openChannel(ctx: vscode.ExtensionContext, bridge: Bridge, model: Model, name: string): void {

  const existing = panels.get(name);

  if (existing) {

    existing.panel.reveal();

    return;

  }

  panels.set(name, new ChannelPanel(ctx, bridge, model, name));

}

class ChannelPanel {

  readonly panel: vscode.WebviewPanel;

  private subs: vscode.Disposable[] = [];

  private openThread: string | undefined;

  constructor(ctx: vscode.ExtensionContext, private readonly bridge: Bridge, private readonly model: Model, private readonly name: string) {

    const title = name.startsWith("dm:") ? `@${name.slice(3)}` : `#${name}`;

    this.panel = vscode.window.createWebviewPanel("spectra.channel", title, vscode.ViewColumn.Active, { enableScripts: true, retainContextWhenHidden: true });

    this.panel.iconPath = vscode.Uri.joinPath(ctx.extensionUri, "assets", "spectra.svg");

    this.panel.webview.html = page(this.panel.webview, title);

    this.subs.push(

      this.panel.webview.onDidReceiveMessage((m) => void this.onMessage(m)),

      model.onEvent((e) => {

        if (e.kind === "message.posted" || e.kind === "message.redacted") void this.load();

      }),

      this.panel.onDidDispose(() => {

        panels.delete(name);

        this.subs.forEach((s) => s.dispose());

      }),

    );

    void this.load();

  }

  private async load(): Promise<void> {

    try {

      const m = await this.bridge.request<Messages>("GET", `/api/v1/channels/${encodeURIComponent(this.name)}/messages?limit=200`);

      const thread = this.openThread

        ? await this.bridge.request<Messages>("GET", `/api/v1/threads/${encodeURIComponent(this.openThread)}`).catch(() => undefined)

        : undefined;

      // Each message's latest replies show beneath it, so none is hidden.

      const replies = new Map<string, Message[]>();

      await Promise.all(

        m.items

          .filter((x) => x.replies > 0)

          .map(async (x) => {

            const t = await this.bridge.request<Messages>("GET", `/api/v1/threads/${encodeURIComponent(x.id)}`).catch(() => undefined);

            if (t) replies.set(x.id, t.items.filter((y) => y.id !== x.id));

          }),

      );

      const brief = this.model.briefs.projects.find((b) => b.project === this.name)?.text;

      const purpose = this.model.channels.find((c) => c.name === this.name)?.purpose ?? "";

      // Names for @-completion: every agent, its project, presence; @channel, @here, @all.

      const names = this.model.agents

        .filter((a) => !a.disabled)

        .map((a) => ({ name: a.name, detail: `${a.kind} · #${a.project} · ${a.presence}` }))

        .concat([

          { name: "channel", detail: "every agent who belongs in this channel" },

          { name: "here", detail: "every agent online in this channel" },

          { name: "all", detail: "every agent, everywhere" },

        ]);

      void this.panel.webview.postMessage({ type: "render", html: render(m.items, thread?.items, this.openThread, replies), brief: brief ?? "", purpose, names });

    } catch (e) {

      void this.panel.webview.postMessage({ type: "error", text: (e as Error).message });

    }

  }

  private async onMessage(m: { type: string; body?: string; thread?: string }): Promise<void> {

    if (m.type === "post" && m.body?.trim()) {

      try {

        const body = { body: m.body, reply_to: m.thread ?? null };

        const p = await this.bridge.request<Posted>("POST", `/api/v1/channels/${encodeURIComponent(this.name)}/messages`, body);

        if (p.duplicate) void vscode.window.showInformationMessage("You said exactly that a moment ago.");

        void this.panel.webview.postMessage({ type: "posted" });

        await this.load();

      } catch (e) {

        void vscode.window.showErrorMessage(`Spectra: not posted: ${(e as Error).message}`);

        void this.panel.webview.postMessage({ type: "failed" });

      }

    } else if (m.type === "thread") {

      this.openThread = m.thread || undefined;

      await this.load();

    } else if (m.type === "brief") {

      void vscode.commands.executeCommand("spectra.editProjectBrief", this.name);

    }

  }

}

/** Markdown enough for chat: code, bold, italics, links, line breaks. Escaped first. */

function md(s: string): string {

  let h = esc(s);

  h = h.replace(/```([\s\S]*?)```/g, (_m, c) => `<pre>${c.replace(/^\n/, "")}</pre>`);

  h = h.replace(/`([^`\n]+)`/g, "<code>$1</code>");

  h = h.replace(/\*\*([^*\n]+)\*\*/g, "<strong>$1</strong>");

  h = h.replace(/(^|[\s(])\*([^*\n]+)\*/g, "$1<em>$2</em>");

  h = h.replace(/(^|\s)(@[a-z0-9][a-z0-9-]*)/g, '$1<span class="at">$2</span>');

  return h.replace(/\n/g, "<br>");

}

const INLINE_REPLIES = 3;

function one(m: Message, inThread: boolean, latest?: Message[]): string {

  const who = m.author === "human" ? "you" : m.author_display || m.author;

  const link = !inThread ? `<a class="replies" data-thread="${esc(m.id)}">${m.replies ? "open thread" : "reply"}</a>` : "";

  const body = m.redacted ? `<div class="redacted">${esc(m.body)}</div>` : `<div class="body">${md(m.body)}</div>`;

  const kind = m.kind && m.kind !== "chat" ? ` <span class="pill">${esc(m.kind)}</span>` : "";

  let under = "";

  if (!inThread && latest && latest.length) {

    const more = latest.length > INLINE_REPLIES ? `<a class="more" data-thread="${esc(m.id)}">${latest.length - INLINE_REPLIES} earlier repl${latest.length - INLINE_REPLIES === 1 ? "y" : "ies"}</a>` : "";

    under = `<div class="inline">${more}${latest.slice(-INLINE_REPLIES).map((x) => one(x, true)).join("")}<a class="replies" data-thread="${esc(m.id)}">Reply in thread</a></div>`;

  }

  return `<div class="msg${m.author === "human" ? " mine" : ""}"><div class="meta"><strong>${esc(who)}</strong> · ${esc(when(m.at_ms))}${kind} ${link}</div>${body}${under}</div>`;

}

function render(items: Message[], thread: Message[] | undefined, open: string | undefined, replies: Map<string, Message[]>): string {

  if (!items.length && !thread) return `<p class="empty">No messages yet. Say hello below.</p>`;

  const list = items.map((m) => one(m, false, replies.get(m.id))).join("");

  if (!thread || !open) return list;

  return `${list}<div class="thread"><div class="thead">Thread <a class="close" data-thread="">close</a></div>${thread.map((m) => one(m, true)).join("")}</div>`;

}

function page(webview: vscode.Webview, title: string): string {

  const nonce = Math.random().toString(36).slice(2) + Math.random().toString(36).slice(2);

  return `<!doctype html><html><head><meta charset="utf-8">

<meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src ${webview.cspSource} 'nonce-${nonce}'; script-src 'nonce-${nonce}';">

<style nonce="${nonce}">

body { font: var(--vscode-font-size) var(--vscode-font-family); color: var(--vscode-foreground); margin: 0; display: flex; flex-direction: column; height: 100vh; }

header { padding: 10px 16px; border-bottom: 1px solid var(--vscode-panel-border); }

header h1 { font-size: 15px; margin: 0; } header .purpose { color: var(--vscode-descriptionForeground); }

details.brief { margin-top: 6px; } details.brief summary { cursor: pointer; color: var(--vscode-textLink-foreground); } details.brief pre { white-space: pre-wrap; background: var(--vscode-textBlockQuote-background); padding: 8px; margin: 6px 0; }

#log { flex: 1; overflow-y: auto; padding: 8px 16px; }

.msg { padding: 6px 0; border-bottom: 1px solid var(--vscode-panel-border); }

.msg.mine .meta strong { color: var(--vscode-textLink-foreground); }

.meta { color: var(--vscode-descriptionForeground); font-size: 12px; }

.body { margin-top: 2px; line-height: 1.45; } .body pre { background: var(--vscode-textCodeBlock-background); padding: 6px 8px; overflow-x: auto; }

.at { color: var(--vscode-textLink-foreground); }

.redacted { color: var(--vscode-disabledForeground); font-style: italic; }

.pill { border: 1px solid var(--vscode-panel-border); border-radius: 8px; padding: 0 6px; font-size: 11px; }

a { color: var(--vscode-textLink-foreground); cursor: pointer; }

.inline { margin: 6px 0 2px 10px; padding-left: 10px; border-left: 3px solid var(--vscode-textLink-foreground); }

.inline .msg { border-bottom: 0; padding: 3px 0; } .inline .more, .inline > .replies { font-size: 12px; }

.thread { margin: 10px 0 4px 16px; padding-left: 10px; border-left: 2px solid var(--vscode-textLink-foreground); }

.thead { font-weight: 600; margin-bottom: 4px; }

.empty, .error { color: var(--vscode-descriptionForeground); padding: 12px 0; } .error { color: var(--vscode-errorForeground); }

form { position: relative; display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--vscode-panel-border); }

#ac { position: absolute; left: 16px; bottom: 100%; margin-bottom: 2px; min-width: 280px; max-height: 220px; overflow-y: auto; background: var(--vscode-editorSuggestWidget-background); border: 1px solid var(--vscode-editorSuggestWidget-border); color: var(--vscode-editorSuggestWidget-foreground); z-index: 10; }

#ac[hidden] { display: none; }

#ac div { padding: 3px 8px; cursor: pointer; display: flex; gap: 10px; justify-content: space-between; }

#ac div.on { background: var(--vscode-editorSuggestWidget-selectedBackground); color: var(--vscode-editorSuggestWidget-selectedForeground, inherit); }

#ac .d { color: var(--vscode-descriptionForeground); font-size: 11px; }

textarea { flex: 1; min-height: 44px; max-height: 200px; resize: vertical; font: inherit; color: var(--vscode-input-foreground); background: var(--vscode-input-background); border: 1px solid var(--vscode-input-border, transparent); padding: 6px 8px; }

button { background: var(--vscode-button-background); color: var(--vscode-button-foreground); border: 0; padding: 6px 14px; cursor: pointer; align-self: flex-end; }

button:disabled { opacity: .6; }

</style></head><body>

<header><h1>${esc(title)}</h1><div class="purpose" id="purpose"></div><details class="brief" id="brief" hidden><summary>Project brief · <a id="edit">edit</a></summary><pre id="brieftext"></pre></details></header>

<div id="log"><p class="empty">Loading…</p></div>

<form id="f"><div id="ac" role="listbox" hidden></div><textarea id="t" placeholder="Write as yourself. @name mentions an agent. Ctrl+Enter sends."></textarea><button id="b" type="submit">Send</button></form>

<script nonce="${nonce}">

const vscode = acquireVsCodeApi();

const log = document.getElementById("log"), t = document.getElementById("t"), b = document.getElementById("b");

let thread = "";

// @-completion of agent names.

const ac = document.getElementById("ac");

let names = [], shown = [], sel = 0, at = -1;

function token() {

  const upto = t.value.slice(0, t.selectionStart);

  const m = /(^|[\s(])@([a-z0-9-]*)$/i.exec(upto);

  return m ? { start: upto.length - m[2].length - 1, word: m[2].toLowerCase() } : null;

}

function close() { ac.hidden = true; shown = []; at = -1; }

function draw() {

  ac.innerHTML = "";

  shown.forEach((n, i) => {

    const d = document.createElement("div");

    d.className = i === sel ? "on" : "";

    d.setAttribute("role", "option");

    const a = document.createElement("span"); a.textContent = "@" + n.name;

    const b = document.createElement("span"); b.className = "d"; b.textContent = n.detail;

    d.append(a, b);

    d.addEventListener("mousedown", (e) => { e.preventDefault(); pick(i); });

    ac.appendChild(d);

  });

  ac.hidden = !shown.length;

  const on = ac.children[sel]; if (on) on.scrollIntoView({ block: "nearest" });

}

function suggest() {

  const tk = token();

  if (!tk) return close();

  at = tk.start;

  const w = tk.word;

  const starts = names.filter((n) => n.name.startsWith(w));

  const parts = names.filter((n) => !n.name.startsWith(w) && n.name.split("-").some((p) => p.startsWith(w)));

  shown = starts.concat(parts).slice(0, 12);

  sel = 0;

  draw();

}

function pick(i) {

  const n = shown[i]; if (!n || at < 0) return;

  const end = t.selectionStart;

  t.value = t.value.slice(0, at) + "@" + n.name + " " + t.value.slice(end);

  const caret = at + n.name.length + 2;

  t.setSelectionRange(caret, caret);

  close(); t.focus();

}

t.addEventListener("input", suggest);

t.addEventListener("click", suggest);

t.addEventListener("blur", () => setTimeout(close, 100));

t.addEventListener("keydown", (e) => {

  if (ac.hidden) return;

  if (e.key === "ArrowDown") { e.preventDefault(); sel = (sel + 1) % shown.length; draw(); }

  else if (e.key === "ArrowUp") { e.preventDefault(); sel = (sel - 1 + shown.length) % shown.length; draw(); }

  else if ((e.key === "Enter" && !e.ctrlKey && !e.metaKey) || e.key === "Tab") { e.preventDefault(); e.stopImmediatePropagation(); pick(sel); }

  else if (e.key === "Escape") { e.preventDefault(); close(); }

}, true);

function send(e) { if (e) e.preventDefault(); const body = t.value.trim(); if (!body) return; b.disabled = true; vscode.postMessage({ type: "post", body, thread: thread || undefined }); }

document.getElementById("f").addEventListener("submit", send);

t.addEventListener("keydown", (e) => { if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) { close(); send(e); } });

document.getElementById("edit").addEventListener("click", (e) => { e.preventDefault(); vscode.postMessage({ type: "brief" }); });

log.addEventListener("click", (e) => { const a = e.target.closest("[data-thread]"); if (!a) return; thread = a.getAttribute("data-thread"); t.placeholder = thread ? "Reply in the thread. Ctrl+Enter sends." : "Write as yourself. @name mentions an agent. Ctrl+Enter sends."; vscode.postMessage({ type: "thread", thread }); });

window.addEventListener("message", (ev) => {

  const m = ev.data;

  if (m.type === "render") {

    const atEnd = log.scrollTop + log.clientHeight >= log.scrollHeight - 30;

    log.innerHTML = m.html;

    document.getElementById("purpose").textContent = m.purpose || "";

    if (m.names) names = m.names;

    const br = document.getElementById("brief"); br.hidden = !m.brief; document.getElementById("brieftext").textContent = m.brief || "";

    if (atEnd) log.scrollTop = log.scrollHeight;

  } else if (m.type === "posted") { t.value = ""; b.disabled = false; t.focus(); }

  else if (m.type === "failed") { b.disabled = false; }

  else if (m.type === "error") { log.innerHTML = '<p class="error"></p>'; log.firstChild.textContent = m.text; }

});

</script></body></html>`;

}