import { Fragment, type ReactNode } from "react";
import { parseContent } from "../lib/parseContent";
import { parseInlineMarkup, type InlineNode } from "../lib/inlineMarkup";

/** 渲染助手消息正文。`<action>` / `<narration>` 块在这里**不**进入气泡 —— 它们由
 *  `splitBubble` 剥出、以气泡外的注记呈现；剩下的文本段落交给行内白名单渲染。
 *
 *  🔴 这里**只**做行内（`b`/`strong`/`i`/`em`/`code`）的事：段落 `<p>` 与消息断隔
 *  `<br>` 都在上一层（`components/chat.tsx` 的 `splitParagraphs`）就已切成独立气泡，
 *  本函数拿到的每一段都是**单个气泡的正文** —— 所以这里绝不返回 `<br/>`（否则等于把
 *  「多条消息」偷偷变回「一条消息里的换行」，与主人口径冲突）。
 *
 *  🔴 安全：文本一律交给 React 当**文本子节点**渲染（默认转义），全程没有
 *  `innerHTML` / `dangerouslySetInnerHTML`，也没有字符串拼 HTML —— 白名单外的标签
 *  （`<script>` / `<br>` 等）只会变成可见的字面量文本，不产生 DOM 节点、不执行。 */
export function renderContent(content: string): ReactNode[] {
  return parseContent(content)
    .filter((part) => part.type === "text")
    .map((part, i) => <span key={i}>{renderInline(part.text)}</span>);
}

/** 一段（`<p>` / `<br>` 切分后的单气泡）文本 ⇒ 行内节点序列 ⇒ React 元素。 */
function renderInline(text: string): ReactNode[] {
  return parseInlineMarkup(text).map((node, i) => renderInlineNode(node, `n${i}`));
}

/** 单个行内节点 ⇒ React 元素。文本走 Fragment（React 转义），标签走原生元素名，
 *  因此不存在「把标签名当 HTML 执行」的路径；节点树里也没有任何属性位。 */
function renderInlineNode(node: InlineNode, key: string): ReactNode {
  if (node.kind === "text") return <Fragment key={key}>{node.text}</Fragment>;

  const children = node.children.map((child, i) => renderInlineNode(child, `${key}-${i}`));
  switch (node.tag) {
    case "b":
      return <b key={key}>{children}</b>;
    case "strong":
      return <strong key={key}>{children}</strong>;
    case "i":
      return <i key={key}>{children}</i>;
    case "em":
      return <em key={key}>{children}</em>;
    case "code":
      return (
        <code key={key} className="rounded-[var(--mu-radius-sm)] bg-[var(--mu-surface-2)] px-1 font-mono">
          {children}
        </code>
      );
  }
}