import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
import javascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
import json from 'react-syntax-highlighter/dist/esm/languages/prism/json';
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
import sql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
import css from 'react-syntax-highlighter/dist/esm/languages/prism/css';

// 只注册 AI 对话里常用的语言，避免 @ant-design/x 的 CodeHighlighter
// 把所有 prism 语言都打进主包
SyntaxHighlighter.registerLanguage('tsx', tsx);
SyntaxHighlighter.registerLanguage('typescript', typescript);
SyntaxHighlighter.registerLanguage('javascript', javascript);
SyntaxHighlighter.registerLanguage('json', json);
SyntaxHighlighter.registerLanguage('bash', bash);
SyntaxHighlighter.registerLanguage('shell', bash);
SyntaxHighlighter.registerLanguage('sql', sql);
SyntaxHighlighter.registerLanguage('css', css);

const SUPPORTED_LANGUAGES = new Set([
  'tsx',
  'typescript',
  'javascript',
  'json',
  'bash',
  'shell',
  'sql',
  'css',
]);

interface LiteCodeHighlighterProps {
  lang?: string;
  children: string;
}

export function LiteCodeHighlighter({ lang, children }: LiteCodeHighlighterProps) {
  const language = lang && SUPPORTED_LANGUAGES.has(lang) ? lang : undefined;
  return (
    <SyntaxHighlighter
      language={language}
      style={oneLight}
      customStyle={{ margin: '12px 0', borderRadius: 8, fontSize: 13 }}
    >
      {children}
    </SyntaxHighlighter>
  );
}
