// 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>`;
}