import type { ReactNode } from "react";

/**
 * 富文本渲染：把后端说明文本里的 **粗体** 与 `行内代码` 渲染成真实样式。
 *
 * 为什么需要：`describe_strategy`（以及引擎的 `unimplemented` 说明）用 Markdown 的
 * `**…**` / `` `…` `` 做**强调协议**——纯文本接口下这是合理的表达方式。但 React 不会
 * 解析 Markdown，直接 `{text}` 会把星号和反引号**原样显示**出来（实测归档页/策略页
 * 有 10 处这样的漏字），让「说明」看起来像没写完的草稿。
 *
 * 为什么不引 markdown 渲染器：说明文本来自后端（可信），但仍不需要为两种标记引入
 * `dangerouslySetInnerHTML` 与整个解析器；这里只做**结构化切分后生成 React 元素**，
 * 不产生 HTML 注入面，也不支持链接/图片等其它语法（不支持就按字面显示，不猜）。
 */
export function RichText({ text }: { text?: string | null }): ReactNode {
  if (!text) return null;
  // 一次切分同时处理 **粗体** 与 `代码`（分隔符保留在结果里以便识别）
  const parts = text.split(/(\*\*[^*]+\*\*|`[^`]+`)/g).filter((p) => p !== "");
  return (
    <>
      {parts.map((p, i) => {
        if (p.length > 4 && p.startsWith("**") && p.endsWith("**")) {
          return <b key={i}>{p.slice(2, -2)}</b>;
        }
        if (p.length > 2 && p.startsWith("`") && p.endsWith("`")) {
          return (
            <code key={i} className="inline-code">
              {p.slice(1, -1)}
            </code>
          );
        }
        return <span key={i}>{p}</span>;
      })}
    </>
  );
}