import DOMPurify from "dompurify";
import { marked } from "marked";
import type {
  ActionGroup,
  ConfirmDefinition,
  ConversationItem,
  DeliveryState,
  InputForm,
  JsonObject,
  ToolCallRequest,
} from "../protocol";
import type { ToolCallRecord } from "./tool-call-state";
import type { TaskRecord } from "./task-state";

export type ToolInteractionHandlers = {
  submit: (callID: string, submission: JsonObject) => boolean;
  cancel: (callID: string, reason: string) => boolean;
  expire: (callID: string) => boolean;
  read: (callID: string) => ToolCallRecord | undefined;
  loadDraft: (callID: string) => JsonObject | undefined;
  saveDraft: (callID: string, values: JsonObject) => void;
  clearDraft: (callID: string) => void;
};

export type TaskInteractionHandlers = {
  requestCancel: (operationID: string) => boolean;
  read: (operationID: string) => TaskRecord | undefined;
};

/**
 * Trusted presentation context for the first-party chat shell.  It owns only
 * DOM nodes and display-local state; it deliberately has no Store, Transport,
 * Kernel, Tauri bridge, or capability reference.
 */
export class TrustedDOMRendererContext {
  private thinking: HTMLElement | undefined;
  private readonly userRows = new Map<string, HTMLElement>();
  private readonly taskCards = new Map<string, { card: HTMLElement; title: HTMLElement; progress: HTMLProgressElement; status: HTMLElement; cancel: HTMLButtonElement }>();
  private readonly expirationTimers = new Set<number>();

  public constructor(
    private readonly messages: HTMLElement,
    private readonly presence: HTMLElement,
    private readonly toolInteractions?: ToolInteractionHandlers,
    private readonly taskInteractions?: TaskInteractionHandlers,
  ) {}

  public reset(): void {
    this.thinking = undefined;
    this.userRows.clear();
    this.taskCards.clear();
    for (const timer of this.expirationTimers) window.clearTimeout(timer);
    this.expirationTimers.clear();
  }

  public renderUserMessage(item: Extract<ConversationItem, { kind: "user-message" }>): void {
    const row = this.appendBubble("human", item.text, false, deliveryLabel(item.delivery));
    if (item.id) this.userRows.set(item.id, row);
  }

  public renderMarkdown(item: Extract<ConversationItem, { kind: "markdown" }>): void {
    this.hideThinking();
    this.appendBubble("agent", item.markdown, true);
  }

  public renderAgentStatus(item: Extract<ConversationItem, { kind: "agent-status" }>): void {
    if (item.status === "thinking") this.showThinking(item.detail || "正在思考…");
    else {
      this.hideThinking();
      this.setPresence(item.detail || item.status || "在线");
    }
  }

  public renderProgress(item: Extract<ConversationItem, { kind: "progress" }>): void {
    if (item.task) {
      this.renderTaskProgress(this.taskInteractions?.read(item.task.operation_id) ?? {
        ...item.task,
        conversation_id: item.envelope?.conversation_id ?? "",
        updated_at: new Date().toISOString(),
      });
      return;
    }
    const percent = Math.max(0, Math.min(100, item.percent));
    this.renderSystemMessage(`${item.title || "Agent 任务"}：${percent}%${item.status ? ` · ${item.status}` : ""}`);
  }

  public renderError(item: Extract<ConversationItem, { kind: "error" }>): void {
    this.hideThinking();
    this.renderSystemMessage(`Agent 错误：${item.message}`);
  }

  public renderToolCall(item: Extract<ConversationItem, { kind: "tool-call" }>): void {
    const record = this.toolInteractions?.read(item.call.call_id);
    if (item.call.tool === "choice" && item.call.action_group) {
      this.renderActionGroup(item.call, item.call.action_group, record);
      return;
    }
    if (item.call.tool === "confirm" && item.call.confirm) {
      this.renderConfirmCard(item.call, item.call.confirm, record);
      return;
    }
    if (item.call.tool === "input" && item.call.form) {
      this.renderInputForm(item.call, item.call.form, record);
      return;
    }
    this.renderSystemMessage("收到无法安全展示的标准交互请求。");
  }

  public renderToolResult(item: Extract<ConversationItem, { kind: "tool-result" }>): void {
    this.renderSystemMessage(`收到工具调用结果（${item.result.call_id} · ${item.result.status}）。`);
  }

  public renderToolCancel(item: Extract<ConversationItem, { kind: "tool-cancel" }>): void {
    this.renderSystemMessage(`工具调用已取消（${item.cancel.call_id}）。`);
  }

  public renderSurface(item: Extract<ConversationItem, { kind: "surface" }>): void {
    this.renderSystemMessage(`收到扩展界面请求（${item.envelope.type}）；Mini Runtime Surface Host 将在下一步接入。`);
  }

  public renderAppCall(_item: Extract<ConversationItem, { kind: "app-call" }>): void {
    this.renderSystemMessage("收到 App 能力调用请求；Capability 授权 UI 将在下一步接入。");
  }

  public renderFallback(item: Extract<ConversationItem, { kind: "fallback" }>): void {
    this.renderSystemMessage(item.reason === "unsupported_type"
      ? `暂不支持的 Agent 内容：${item.envelope?.type ?? "unknown"}`
      : "收到无法安全展示的消息。");
  }

  public renderSystemMessage(message: string): void {
    const item = document.createElement("p");
    item.className = "system";
    item.textContent = message;
    this.messages.append(item);
    this.scrollLatest();
  }

  /** Updates the visible local echo without requiring DOM access in App Shell. */
  public updateUserDelivery(localID: string, delivery: DeliveryState): void {
    const meta = this.userRows.get(localID)?.querySelector<HTMLElement>(".meta");
    if (!meta) return;
    const time = meta.textContent?.split(" · ")[0] ?? "";
    meta.textContent = `${time} · ${deliveryLabel(delivery)}`;
  }

  public setPresence(value: string): void {
    this.presence.textContent = value;
  }

  private appendBubble(role: "human" | "agent", content: string, markdown = false, delivery = ""): HTMLElement {
    const row = document.createElement("article");
    row.className = `message-row ${role}`;
    if (role === "agent") {
      const avatar = document.createElement("span");
      avatar.className = "message-avatar";
      avatar.textContent = "✦";
      row.append(avatar);
    }
    const bubble = document.createElement("div");
    bubble.className = "bubble";
    if (markdown) {
      bubble.classList.add("markdown");
      bubble.innerHTML = DOMPurify.sanitize(marked.parse(content, { gfm: true, breaks: true }) as string, {
        FORBID_TAGS: ["style", "form", "input", "button"],
      });
      bubble.querySelectorAll("a").forEach(link => {
        link.target = "_blank";
        link.rel = "noopener noreferrer";
      });
    } else {
      bubble.textContent = content;
    }
    const meta = document.createElement("small");
    meta.className = "meta";
    meta.textContent = `${new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}${delivery ? ` · ${delivery}` : ""}`;
    bubble.append(meta);
    row.append(bubble);
    this.messages.append(row);
    this.scrollLatest();
    return row;
  }

  private renderTaskProgress(task: TaskRecord): void {
    const existing = this.taskCards.get(task.operation_id);
    if (existing) {
      this.updateTaskCard(existing, task);
      return;
    }
    const card = document.createElement("article");
    card.className = "task-card";
    card.dataset.operationId = task.operation_id;
    const title = document.createElement("strong");
    const progress = document.createElement("progress");
    progress.max = 100;
    const status = document.createElement("small");
    status.className = "task-card-status";
    const cancel = document.createElement("button");
    cancel.type = "button";
    cancel.className = "secondary-action";
    cancel.textContent = "请求取消";
    cancel.addEventListener("click", () => {
      if (!this.taskInteractions?.requestCancel(task.operation_id)) return;
      const current = this.taskInteractions.read(task.operation_id);
      if (current) this.updateTaskCard(this.taskCards.get(task.operation_id)!, current);
    });
    const entry = { card, title, progress, status, cancel };
    card.append(title, progress, status, cancel);
    this.taskCards.set(task.operation_id, entry);
    this.updateTaskCard(entry, task);
    this.messages.append(card);
    this.scrollLatest();
  }

  private updateTaskCard(entry: { card: HTMLElement; title: HTMLElement; progress: HTMLProgressElement; status: HTMLElement; cancel: HTMLButtonElement }, task: TaskRecord): void {
    entry.card.dataset.status = task.status;
    entry.title.textContent = task.title;
    entry.progress.value = Math.max(0, Math.min(100, task.percent));
    const requested = task.cancel_requested_at !== undefined && task.status !== "cancelled";
    entry.status.textContent = requested ? `取消请求已记录 · ${task.percent}%` : `${task.status} · ${task.percent}%`;
    entry.cancel.hidden = !task.cancellable || task.status === "completed" || task.status === "failed" || task.status === "cancelled";
    entry.cancel.disabled = requested;
  }

  private renderActionGroup(call: ToolCallRequest, group: ActionGroup, record?: ToolCallRecord): void {
    const card = document.createElement("article");
    card.className = "action-group-card";
    card.dataset.callId = call.call_id;
    const heading = document.createElement("strong");
    heading.textContent = call.title || "请选择";
    const detail = document.createElement("p");
    detail.textContent = call.prompt;
    const actions = document.createElement("div");
    actions.className = `action-group-actions ${group.mode}`;
    const status = document.createElement("small");
    status.className = "action-group-status";
    const locked = this.applyCallStatus(card, status, call, record);
    const buttons: HTMLButtonElement[] = [];
    const selected = new Set<string>();
    const submit = (actionIDs: readonly string[]) => {
      const accepted = this.toolInteractions?.submit(call.call_id, { action_ids: [...actionIDs] }) ?? false;
      if (!accepted) {
        status.textContent = "该交互已结束或已提交";
        return;
      }
      card.dataset.status = "submitted";
      status.textContent = "已提交，等待 Agent 确认";
      for (const button of buttons) button.disabled = true;
    };

    for (const action of group.actions) {
      const button = document.createElement("button");
      button.type = "button";
      button.className = "action-group-action";
      button.textContent = action.label;
      button.title = action.description ?? action.label;
      button.disabled = locked;
      button.addEventListener("click", () => {
        if (group.mode !== "multi-choice") {
          submit([action.id]);
          return;
        }
        if (selected.has(action.id)) selected.delete(action.id);
        else selected.add(action.id);
        button.setAttribute("aria-pressed", String(selected.has(action.id)));
        submitButton.disabled = selected.size === 0;
      });
      buttons.push(button);
      actions.append(button);
    }

    let submitButton: HTMLButtonElement;
    if (group.mode === "multi-choice") {
      submitButton = document.createElement("button");
      submitButton.type = "button";
      submitButton.className = "action-group-submit";
      submitButton.textContent = "提交选择";
      submitButton.disabled = true;
      submitButton.addEventListener("click", () => submit([...selected]));
      buttons.push(submitButton);
    } else {
      // It is only referenced by the multi-choice click handler above.
      submitButton = document.createElement("button");
    }

    card.append(heading, detail, actions);
    if (group.mode === "multi-choice") card.append(submitButton);
    card.append(status);
    this.messages.append(card);
    this.scheduleExpiry(card, status, call, buttons);
    this.scrollLatest();
  }

  private renderConfirmCard(call: ToolCallRequest, definition: ConfirmDefinition, record?: ToolCallRecord): void {
    const card = document.createElement("article");
    card.className = "tool-card confirm-card";
    card.dataset.callId = call.call_id;
    const heading = document.createElement("strong");
    heading.textContent = call.title || "请确认";
    const detail = document.createElement("p");
    detail.textContent = call.prompt;
    const actions = document.createElement("div");
    actions.className = "tool-card-actions";
    const approve = document.createElement("button");
    approve.type = "button";
    approve.textContent = definition.approve_label;
    const cancel = document.createElement("button");
    cancel.type = "button";
    cancel.className = "secondary-action";
    cancel.textContent = definition.cancel_label;
    const status = document.createElement("small");
    status.className = "tool-card-status";
    const buttons = [approve, cancel];
    const locked = this.applyCallStatus(card, status, call, record);
    for (const button of buttons) button.disabled = locked;
    approve.addEventListener("click", () => {
      if (!this.toolInteractions?.submit(call.call_id, { confirmed: true })) return this.markInteractionUnavailable(status);
      this.markSubmitted(card, status, buttons);
    });
    cancel.addEventListener("click", () => {
      if (!this.toolInteractions?.cancel(call.call_id, "用户取消确认")) return this.markInteractionUnavailable(status);
      this.markCancelled(card, status, buttons);
    });
    actions.append(approve, cancel);
    card.append(heading, detail, actions, status);
    this.messages.append(card);
    this.scheduleExpiry(card, status, call, buttons);
    this.scrollLatest();
  }

  private renderInputForm(call: ToolCallRequest, form: InputForm, record?: ToolCallRecord): void {
    const card = document.createElement("article");
    card.className = "tool-card input-form-card";
    card.dataset.callId = call.call_id;
    const heading = document.createElement("strong");
    heading.textContent = call.title || "填写信息";
    const detail = document.createElement("p");
    detail.textContent = call.prompt;
    const nativeForm = document.createElement("form");
    nativeForm.noValidate = true;
    const errors = document.createElement("p");
    errors.className = "tool-card-error";
    errors.setAttribute("role", "alert");
    const draft = this.toolInteractions?.loadDraft(call.call_id) ?? {};
    const fields = new Map<string, HTMLInputElement | HTMLTextAreaElement>();
    for (const definition of form.fields) {
      const label = document.createElement("label");
      label.textContent = definition.label;
      const control = definition.type === "textarea" ? document.createElement("textarea") : document.createElement("input");
      if (control instanceof HTMLInputElement) control.type = definition.type === "number" ? "number" : "text";
      control.name = definition.id;
      control.placeholder = definition.placeholder ?? "";
      const prior = draft[definition.id];
      control.value = typeof prior === "string" ? prior : "";
      control.addEventListener("input", () => this.toolInteractions?.saveDraft(call.call_id, this.readFormValues(fields)));
      fields.set(definition.id, control);
      label.append(control);
      nativeForm.append(label);
    }
    const actions = document.createElement("div");
    actions.className = "tool-card-actions";
    const submit = document.createElement("button");
    submit.type = "submit";
    submit.textContent = form.submit_label;
    const cancel = document.createElement("button");
    cancel.type = "button";
    cancel.className = "secondary-action";
    cancel.textContent = form.cancel_label;
    const status = document.createElement("small");
    status.className = "tool-card-status";
    const controls = [...fields.values(), submit, cancel];
    const locked = this.applyCallStatus(card, status, call, record);
    for (const control of controls) control.disabled = locked;
    nativeForm.addEventListener("submit", event => {
      event.preventDefault();
      const values = this.readFormValues(fields);
      const problem = validateFormValues(form, values);
      if (problem) { errors.textContent = problem; return; }
      if (!this.toolInteractions?.submit(call.call_id, { values })) return this.markInteractionUnavailable(status);
      errors.textContent = "";
      this.markSubmitted(card, status, controls);
    });
    cancel.addEventListener("click", () => {
      if (!this.toolInteractions?.cancel(call.call_id, "用户取消输入")) return this.markInteractionUnavailable(status);
      this.markCancelled(card, status, controls);
    });
    actions.append(submit, cancel);
    nativeForm.append(errors, actions);
    card.append(heading, detail, nativeForm, status);
    this.messages.append(card);
    this.scheduleExpiry(card, status, call, controls);
    this.scrollLatest();
  }

  private applyCallStatus(card: HTMLElement, status: HTMLElement, call: ToolCallRequest, record?: ToolCallRecord): boolean {
    const effective = record?.status ?? (call.expires_at && Date.parse(call.expires_at) <= Date.now() ? "expired" : "pending");
    if (effective === "pending") { status.textContent = "等待你的操作"; return false; }
    card.dataset.status = effective;
    status.textContent = effective === "submitted" ? "已提交，等待 Agent 确认" : effective === "cancelled" ? "已取消" : effective === "expired" ? "该交互已过期" : effective === "completed" ? "已完成" : "处理失败";
    return true;
  }

  private scheduleExpiry(card: HTMLElement, status: HTMLElement, call: ToolCallRequest, controls: readonly HTMLButtonElement[] | readonly (HTMLInputElement | HTMLTextAreaElement | HTMLButtonElement)[]): void {
    if (!call.expires_at || Date.parse(call.expires_at) <= Date.now()) return;
    const timer = window.setTimeout(() => {
      this.expirationTimers.delete(timer);
      if (!this.toolInteractions?.expire(call.call_id)) return;
      card.dataset.status = "expired";
      status.textContent = "该交互已过期";
      for (const control of controls) control.disabled = true;
    }, Math.max(0, Date.parse(call.expires_at) - Date.now()) + 1);
    this.expirationTimers.add(timer);
  }

  private readFormValues(fields: ReadonlyMap<string, HTMLInputElement | HTMLTextAreaElement>): JsonObject {
    return Object.fromEntries([...fields].map(([id, control]) => [id, control.value]));
  }

  private markSubmitted(card: HTMLElement, status: HTMLElement, controls: readonly (HTMLButtonElement | HTMLInputElement | HTMLTextAreaElement)[]): void {
    card.dataset.status = "submitted";
    status.textContent = "已提交，等待 Agent 确认";
    for (const control of controls) control.disabled = true;
  }

  private markCancelled(card: HTMLElement, status: HTMLElement, controls: readonly (HTMLButtonElement | HTMLInputElement | HTMLTextAreaElement)[]): void {
    card.dataset.status = "cancelled";
    status.textContent = "已取消";
    for (const control of controls) control.disabled = true;
  }

  private markInteractionUnavailable(status: HTMLElement): void {
    status.textContent = "该交互已结束或已提交";
  }

  private showThinking(detail: string): void {
    this.thinking?.remove();
    this.thinking = this.appendBubble("agent", detail);
    this.thinking.classList.add("thinking");
    this.setPresence("正在思考");
  }

  private hideThinking(): void {
    this.thinking?.remove();
    this.thinking = undefined;
  }

  private scrollLatest(): void {
    this.messages.scrollTop = this.messages.scrollHeight;
  }
}

function deliveryLabel(delivery: DeliveryState): string {
  if (delivery.status === "local_pending") return "发送中";
  if (delivery.status === "failed") return "发送失败";
  return "已发送";
}

function validateFormValues(form: InputForm, values: JsonObject): string | undefined {
  for (const field of form.fields) {
    const value = values[field.id];
    const text = typeof value === "string" ? value.trim() : "";
    if (field.required && !text) return `请填写“${field.label}”。`;
    if (!text) continue;
    if (field.min_length !== undefined && text.length < field.min_length) return `“${field.label}”至少需要 ${field.min_length} 个字符。`;
    if (field.max_length !== undefined && text.length > field.max_length) return `“${field.label}”最多允许 ${field.max_length} 个字符。`;
    if (field.type === "number" && !Number.isFinite(Number(text))) return `“${field.label}”必须是有效数字。`;
    if (field.pattern && !(new RegExp(field.pattern, "u")).test(text)) return `“${field.label}”格式不正确。`;
  }
  return undefined;
}