import { isValidElement, type ComponentPropsWithoutRef, type ReactNode } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import remarkMath from 'remark-math';
import rehypeHighlight from 'rehype-highlight';
import rehypeSlug from 'rehype-slug';
import rehypeKatex from 'rehype-katex';

/** 从 code 元素的 className（如 "language-python"）中提取语言名 */
function extractLanguage(children: ReactNode): string {
  if (isValidElement<{ className?: string }>(children)) {
    const match = /language-(\w+)/.exec(children.props.className ?? '');
    if (match) return match[1];
  }
  return 'text';
}

/** 自定义代码块：浅色底框 + 顶部语言标注栏 */
function Pre({ children }: ComponentPropsWithoutRef<'pre'>) {
  const lang = extractLanguage(children);
  return (
    <div className="code-block-wrapper">
      <div className="code-block-header">
        <span>{lang}</span>
      </div>
      <pre className="code-block-content">{children}</pre>
    </div>
  );
}

/** 统一的 Markdown 渲染组件，文章页与编辑器预览共用 */
export function Markdown({ content }: { content: string }) {
  return (
    <ReactMarkdown
      remarkPlugins={[remarkGfm, remarkMath]}
      rehypePlugins={[rehypeKatex, rehypeHighlight, rehypeSlug]}
      components={{ pre: Pre }}
    >
      {content}
    </ReactMarkdown>
  );
}