import React, { useState } from 'react';
import Editor from '@monaco-editor/react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { Radio, Space, Card, Divider, Button } from 'antd';
import { EditOutlined, EyeOutlined, ProjectOutlined, FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons';
import 'github-markdown-css/github-markdown-light.css';
import styles from './index.module.css';

interface MarkdownEditorProps {
    value?: string;
    onChange?: (value: string) => void;
    height?: string | number;
}

const MarkdownEditor: React.FC<MarkdownEditorProps> = ({
    value = '',
    onChange,
    height = '400px',
}) => {
    const [mode, setMode] = useState<'edit' | 'preview' | 'split'>('split');
    const [isFullscreen, setIsFullscreen] = useState(false);

    const toggleFullscreen = () => {
        setIsFullscreen(!isFullscreen);
    };

    return (
        <div
            className={`${styles.container} ${isFullscreen ? styles.fullscreen : ''}`}
            style={{ height: isFullscreen ? '100vh' : height }}
        >
            <div className={styles.toolbar}>
                <Radio.Group
                    value={mode}
                    onChange={(e) => setMode(e.target.value)}
                    size="small"
                    buttonStyle="solid"
                >
                    <Radio.Button value="edit">
                        <EditOutlined /> 编辑
                    </Radio.Button>
                    <Radio.Button value="preview">
                        <EyeOutlined /> 预览
                    </Radio.Button>
                    <Radio.Button value="split">
                        <ProjectOutlined /> 分屏
                    </Radio.Button>
                </Radio.Group>
                <Divider type="vertical" style={{ margin: '0 16px', height: '16px' }} />
                <Button
                    type="text"
                    icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
                    onClick={toggleFullscreen}
                    size="small"
                >
                    {isFullscreen ? '退出全屏' : '全屏'}
                </Button>
            </div>

            <div className={styles.content}>
                {(mode === 'edit' || mode === 'split') && (
                    <div className={styles.editorWrapper} style={{ width: mode === 'split' ? '50%' : '100%' }}>
                        <Editor
                            height="100%"
                            defaultLanguage="markdown"
                            value={value}
                            theme="vs-light"
                            options={{
                                minimap: { enabled: false },
                                wordWrap: 'on',
                                fontSize: 14,
                                lineNumbers: 'on',
                                scrollBeyondLastLine: false,
                                automaticLayout: true,
                            }}
                            onChange={(val) => onChange?.(val || '')}
                        />
                    </div>
                )}

                {mode === 'split' && <Divider type="vertical" style={{ height: '100%', margin: 0 }} />}

                {(mode === 'preview' || mode === 'split') && (
                    <div
                        className={`${styles.previewWrapper} markdown-body`}
                        style={{ width: mode === 'split' ? '50%' : '100%' }}
                    >
                        <ReactMarkdown remarkPlugins={[remarkGfm]}>
                            {value}
                        </ReactMarkdown>
                    </div>
                )}
            </div>
        </div>
    );
};

export default MarkdownEditor;
