/**
 * Markdown 富文本渲染工具。
 *
 * <p>统一为 chat / 工作流运行结果 / 运行记录页 三处提供一致的渲染：
 * 支持 GFM（表格 / 删除线 / 任务列表）、代码块、行内与块级公式（KaTeX）。
 *
 * <p>使用：
 * ```js
 * import { renderMarkdown } from '@/utils/markdown'
 * // 在 Vue 模板中
 * <div v-html="renderMarkdown(text)" class="md-body" />
 * ```
 *
 * <p>样式：本工具只产出 HTML 字符串；视觉表现（字号、配色、表格边框）由调用方
 * 通过 {@code .md-body :deep(...)} CSS 控制，参考 ChatMessageList.vue 的 {@code .assistant-md}。
 */
import { Marked } from 'marked'
import markedKatex from 'marked-katex-extension'
import DOMPurify from 'dompurify'
// KaTeX 样式：渲染数学公式必需，挂到全局一次即可
import 'katex/dist/katex.min.css'

// 模块级单例：避免每次调用都重新装配 marked
const marked = new Marked()
marked.use({ gfm: true, breaks: true })
marked.use(markedKatex({ throwOnError: false, output: 'html' }))

/**
 * 把 markdown 字符串渲染为已 sanitize 的 HTML。
 *
 * <p>流程：marked.parse → DOMPurify.sanitize（防 XSS）→ HTML 字符串。
 * 异常时降级为对纯文本做 sanitize，保证不抛错。
 *
 * @param {string} text 原始 markdown 文本，可为空
 * @returns {string} 可安全 v-html 注入的 HTML
 */
export function renderMarkdown(text) {
  if (!text) return ''
  try {
    const raw = marked.parse(text)
    // marked.parse 同步返回 string（未启用 async）；保险起见 toString
    return DOMPurify.sanitize(String(raw), {
      ADD_TAGS: ['span', 'math', 'semantics', 'annotation'],
      ADD_ATTR: ['class']
    })
  } catch (e) {
    console.warn('[utils/markdown] 渲染失败', e?.message || e)
    return DOMPurify.sanitize(String(text))
  }
}
