// The chat panel: connection status, streamed replies, tool activity, and the input box.
import type { ChatEvent } from "../chat/client.ts";

function escapeHtml(s: string) { return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;"); }

/** Minimal markdown: fenced code, inline code, bold, bullet lists, paragraphs. */
export function renderMarkdown(src: string): string {
  const parts = src.split(/```/);
  let out = "";
  parts.forEach((part, i) => {
    if (i % 2 === 1) { const body = part.replace(/^[a-z]*\n/, ""); out += `<pre><code>${escapeHtml(body)}</code></pre>`; return; }
    const blocks = part.split(/\n{2,}/);
    for (const b of blocks) {
      const lines = b.split("\n").filter((l) => l.length);
      if (!lines.length) continue;
      const inline = (t: string) => escapeHtml(t).replace(/`([^`]+)`/g, "<code>$1</code>").replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
      if (lines.every((l) => /^\s*[-*] /.test(l))) out += `<ul>${lines.map((l) => `<li>${inline(l.replace(/^\s*[-*] /, ""))}</li>`).join("")}</ul>`;
      else if (lines.every((l) => /^\s*\d+\. /.test(l))) out += `<ol>${lines.map((l) => `<li>${inline(l.replace(/^\s*\d+\. /, ""))}</li>`).join("")}</ol>`;
      else if (/^#{1,3} /.test(lines[0]) && lines.length === 1) out += `<h4>${inline(lines[0].replace(/^#+ /, ""))}</h4>`;
      else out += `<p>${lines.map(inline).join("<br>")}</p>`;
    }
  });
  return out;
}

export class ChatPanel {
  private readonly log: HTMLElement; private readonly status: HTMLElement; private readonly input: HTMLTextAreaElement;
  private readonly sendBtn: HTMLButtonElement; private readonly stopBtn: HTMLButtonElement; private readonly help: HTMLElement;
  private current: { el: HTMLElement; text: string } | null = null;
  private working = false; private connected = false;
  onSend: ((text: string) => void) | null = null; onInterrupt: (() => void) | null = null; onReset: (() => void) | null = null;

  constructor(root: HTMLElement, bridgeUrl: string) {
    root.innerHTML = `
      <div class="chat-head"><span class="dot"></span><span class="chat-status">not connected</span>
        <span class="spacer"></span><button class="chat-new" title="start a new session">New</button><button class="chat-close" title="hide the panel">×</button></div>
      <div class="chat-help"></div>
      <div class="chat-log"></div>
      <div class="chat-input"><textarea rows="2" placeholder="Ask Claude to set up a cymbal, run it, or explain a result"></textarea>
        <div class="chat-buttons"><button class="chat-stop" disabled>Stop</button><button class="chat-send primary">Send</button></div></div>`;
    this.log = root.querySelector(".chat-log")!; this.status = root.querySelector(".chat-status")!; this.help = root.querySelector(".chat-help")!;
    this.input = root.querySelector("textarea")!; this.sendBtn = root.querySelector(".chat-send")!; this.stopBtn = root.querySelector(".chat-stop")!;
    this.help.innerHTML = `Chat with Claude Code about this app. It needs the local bridge running on your machine:<br>
      <code>git clone https://vault1.magland.org/proof-of-concept/cymsimweb && cd cymsimweb && npm install && npm run bridge</code><br>
      It uses your Claude Code login and connects at <code>${escapeHtml(bridgeUrl)}</code> (change with <code>?bridge=ws://host:port</code>).`;
    this.sendBtn.onclick = () => this.submit();
    this.stopBtn.onclick = () => this.onInterrupt?.();
    root.querySelector<HTMLButtonElement>(".chat-new")!.onclick = () => { this.onReset?.(); this.log.replaceChildren(); this.current = null; this.system("new session"); };
    root.querySelector<HTMLButtonElement>(".chat-close")!.onclick = () => root.dispatchEvent(new CustomEvent("chat-close", { bubbles: true }));
    this.input.addEventListener("keydown", (e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); this.submit(); } });
    this.updateButtons();
  }

  focus() { this.input.focus(); }

  private submit() {
    const text = this.input.value.trim();
    if (!text || !this.connected) return;
    this.input.value = "";
    this.append("user", text);
    this.current = null;
    this.onSend?.(text);
  }

  private append(cls: string, text: string): HTMLElement {
    const el = document.createElement("div"); el.className = `msg ${cls}`;
    if (cls === "assistant") el.innerHTML = renderMarkdown(text); else el.textContent = text;
    this.log.appendChild(el); this.log.scrollTop = this.log.scrollHeight;
    return el;
  }
  private system(text: string) { this.append("system", text); }

  private updateButtons() {
    this.sendBtn.disabled = !this.connected; this.stopBtn.disabled = !this.working;
    this.status.textContent = !this.connected ? "not connected" : this.working ? "Claude is working ..." : "connected";
    this.status.parentElement!.querySelector(".dot")!.className = `dot ${!this.connected ? "off" : this.working ? "busy" : "on"}`;
    this.help.style.display = this.connected ? "none" : "";
  }

  handle(e: ChatEvent) {
    switch (e.type) {
      case "connection": this.connected = e.state === "open"; if (e.state === "closed") this.working = false; break;
      case "hello": this.system(`bridge ready (model: ${e.model})`); break;
      case "init": break;
      case "status": this.working = e.state === "working"; if (!this.working) this.current = null; break;
      case "block_start": this.current = null; break;
      case "delta":
        if (!this.current) this.current = { el: this.append("assistant", ""), text: "" };
        this.current.text += e.text; this.current.el.innerHTML = renderMarkdown(this.current.text); this.log.scrollTop = this.log.scrollHeight;
        break;
      case "tool_use": this.current = null; this.append("tool", `${e.name} ${e.input}`); break;
      case "tool_call": break;
      case "result": if (!e.ok) this.system(`ended with ${e.error}`); break;
      case "reset": this.system("session reset"); break;
      case "error": this.system(`error: ${e.message}`); break;
    }
    this.updateButtons();
  }
}