/**
 * 代码编辑器字段渲染组件
 * 基于 Monaco Editor 实现
 */

import React, { useState, useRef } from 'react';
import { Button, Space, Tooltip } from 'antd';
import { FullscreenOutlined, FullscreenExitOutlined, FormatPainterOutlined } from '@ant-design/icons';
import type { FieldRendererProps } from '../config';
import Editor from '@/components/Editor';
import type { editor } from 'monaco-editor';

const CodeEditorField: React.FC<FieldRendererProps> = ({ field, value, onChange, isPreview }) => {
  const [isFullscreen, setIsFullscreen] = useState(false);
  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
  
  const language = field.language || 'javascript';
  const height = field.height || 300;
  const theme = field.theme || 'vs-dark';
  const readOnly = field.readOnly || false;
  const showMinimap = field.showMinimap !== false; // 默认显示

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

  const handleFormat = () => {
    if (editorRef.current) {
      editorRef.current.getAction('editor.action.formatDocument')?.run();
    }
  };

  const handleEditorMount = (editor: editor.IStandaloneCodeEditor) => {
    editorRef.current = editor;
  };

  const editorHeight = isFullscreen ? 'calc(100vh - 160px)' : `${height - 40}px`; // 减去工具栏高度

  return (
    <>
      {/* 全屏遮罩 */}
      {isFullscreen && (
        <div
          style={{
            position: 'fixed',
            top: 0,
            left: 0,
            right: 0,
            bottom: 0,
            backgroundColor: 'rgba(0, 0, 0, 0.5)',
            zIndex: 999,
          }}
          onClick={toggleFullscreen}
        />
      )}

      {/* 编辑器主容器 */}
      <div style={{
        position: isFullscreen ? 'fixed' : 'relative',
        top: isFullscreen ? '60px' : 'auto',
        left: isFullscreen ? '20px' : 'auto',
        right: isFullscreen ? '20px' : 'auto',
        bottom: isFullscreen ? '20px' : 'auto',
        zIndex: isFullscreen ? 1000 : 'auto',
        width: isFullscreen ? 'auto' : '100%',
        maxWidth: '100%',
        border: '1px solid #d9d9d9',
        borderRadius: '4px',
        overflow: 'hidden',
        height: isFullscreen ? 'auto' : `${height}px`,
        display: 'flex',
        flexDirection: 'column',
        boxSizing: 'border-box',
      }}>
        {/* 顶部工具栏 */}
        <div style={{
          display: 'flex',
          justifyContent: 'flex-end',
          alignItems: 'center',
          padding: '6px 12px',
          backgroundColor: theme === 'vs-dark' ? '#252526' : '#f3f3f3',
          borderBottom: `1px solid ${theme === 'vs-dark' ? '#3e3e42' : '#e5e5e5'}`,
          flexShrink: 0,
          height: '40px',
        }}>
          <Space size="small">
            <Tooltip title="格式化代码">
              <Button
                type="text"
                size="small"
                icon={<FormatPainterOutlined />}
                onClick={handleFormat}
                style={{
                  color: theme === 'vs-dark' ? '#cccccc' : '#616161',
                }}
              />
            </Tooltip>
            <Tooltip title={isFullscreen ? '退出全屏' : '全屏显示'}>
              <Button
                type="text"
                size="small"
                icon={isFullscreen ? <FullscreenExitOutlined /> : <FullscreenOutlined />}
                onClick={toggleFullscreen}
                style={{
                  color: theme === 'vs-dark' ? '#cccccc' : '#616161',
                }}
              />
            </Tooltip>
          </Space>
        </div>

        {/* 编辑器容器 */}
        <div style={{
          flex: 1,
          overflow: 'hidden',
          backgroundColor: theme === 'vs-dark' ? '#1e1e1e' : '#ffffff',
        }}>
          <Editor
            height={editorHeight}
            language={language}
            theme={theme}
            value={value || ''}
            onChange={(newValue) => {
              if (!readOnly && onChange) {
                onChange(newValue);
              }
            }}
            onMount={handleEditorMount}
            options={{
              readOnly: readOnly || !isPreview,
              minimap: { 
                enabled: showMinimap,
                scale: 1,
                showSlider: 'always',
              },
              scrollBeyondLastLine: false,
              fontSize: 14,
              lineNumbers: 'on',
              formatOnPaste: true,
              formatOnType: false,
              automaticLayout: true,
              wordWrap: 'on',
              tabSize: 2,
              scrollbar: {
                vertical: 'visible',
                horizontal: 'visible',
              },
            }}
          />
        </div>
      </div>
    </>
  );
};

export default CodeEditorField;
