import React from 'react';
import ReactMarkdown from 'react-markdown';
import 'katex/dist/katex.min.css';
import RemarkMath from 'remark-math';
import RemarkBreaks from 'remark-breaks';
import RehypeKatex from 'rehype-katex';
import RemarkGfm from 'remark-gfm';
import '../../styles/components/chat-with-llm/markdown.css';

interface MarkdownProps {
    content: string;
    className?: string;
}

/**
 * Markdown 渲染组件
 * 使用 react-markdown 库进行标准 Markdown 解析，支持流式渲染
 */
export default function Markdown({ content, className = '' }: MarkdownProps) {
    // console.log('🎨 [Markdown] 渲染组件:', {
    //     contentLength: content?.length || 0,
    //     contentPreview: content?.substring(0, 100) + (content && content.length > 100 ? '...' : ''),
    //     className,
    //     hasContent: !!content
    // });

    if (!content) {
        console.log('⚠️ [Markdown] 内容为空，返回null');
        return null;
    }

    return (
        <div className={`markdown-content ${className}`}>
            <ReactMarkdown
                remarkPlugins={[RemarkMath, RemarkGfm, RemarkBreaks]}
                rehypePlugins={[RehypeKatex]}
                components={{
                    code({ className, children, ...props }: any) {
                        const match = /language-(\w+)/.exec(className || '');
                        const isCodeBlock = match;

                        if (isCodeBlock) {
                            // 代码块
                            return (
                                <pre style={{
                                    backgroundColor: '#f6f8fa',
                                    padding: '16px',
                                    borderRadius: '6px',
                                    overflow: 'auto',
                                    fontSize: '14px',
                                    lineHeight: '1.45',
                                    margin: '1em 0'
                                }}>
                                    <code style={{
                                        backgroundColor: 'transparent',
                                        padding: '0',
                                        fontSize: 'inherit',
                                        fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
                                    }}>
                                        {String(children).replace(/\n$/, '')}
                                    </code>
                                </pre>
                            );
                        } else {
                            // 内联代码
                            return (
                                <code
                                    className={className}
                                    style={{
                                        backgroundColor: 'rgba(175, 184, 193, 0.2)',
                                        padding: '0.2em 0.4em',
                                        borderRadius: '3px',
                                        fontSize: '85%',
                                        fontFamily: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace'
                                    }}
                                    {...props}
                                >
                                    {children}
                                </code>
                            );
                        }
                    },
                }}
            >
                {content}
            </ReactMarkdown>
        </div>
    );
}