import { useState, useEffect } from 'react';

interface SimpleCodeEditorProps {
  id: string;
  initialValue?: string;
  language?: 'javascript' | 'python';
  onChange?: (value: string) => void;
}

export function SimpleCodeEditor({ 
  id, 
  initialValue = '', 
  language = 'javascript',
  onChange 
}: SimpleCodeEditorProps) {
  const [code, setCode] = useState(initialValue || getDefaultCode(language));
  const [copySuccess, setCopySuccess] = useState(false);

  // 复制代码到剪贴板
  const copyToClipboard = () => {
    navigator.clipboard.writeText(code).then(() => {
      setCopySuccess(true);
      setTimeout(() => setCopySuccess(false), 2000);
    });
  };

  // 处理代码变化
  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value;
    setCode(value);
    if (onChange) {
      onChange(value);
    }
  };

  // 初始示例代码
  function getDefaultCode(lang: string) {
    if (lang === 'javascript') {
      return `// 示例代码
function checkRule(data) {
  // data 包含抽取的字段
  try {
    // 在此编写检查逻辑
    if (data.fieldName && condition) {
      return {
        pass: true, 
        message: "检查通过"
      }; 
    } else {
      return {
        pass: false,
        message: "检查不通过，原因：..."
      };
    }
  } catch (error) {
    return {
      pass: false,
      message: "执行出错：" + error.message
    };
  }
}`;
    } else {
      return `# 示例代码
def check_rule(data):
    # data 包含抽取的字段
    try:
        # 在此编写检查逻辑
        if 'field_name' in data and condition:
            return {
                'pass': True,
                'message': "检查通过"
            }
        else:
            return {
                'pass': False,
                'message': "检查不通过，原因：..."
            }
    except Exception as error:
        return {
            'pass': False,
            'message': f"执行出错：{str(error)}"
        }`;
    }
  }

  // 当语言变化时更新代码
  useEffect(() => {
    if (!initialValue) {
      setCode(getDefaultCode(language));
    }
  }, [language, initialValue]);

  return (
    <div>
      <div className="code-editor-wrapper">
        <div className="code-editor-header">
          <div className="code-editor-filename">{language === 'javascript' ? 'script.js' : 'script.py'}</div>
          <div className="code-editor-actions">
            <button 
              className="bg-transparent border-0 p-0 cursor-pointer" 
              title="复制代码" 
              onClick={copyToClipboard}
              onKeyDown={(e) => {
                if (e.key === 'Enter' || e.key === ' ') {
                  copyToClipboard();
                }
              }}
              aria-label="复制代码"
              tabIndex={0}
            >
              <i className="ri-file-copy-line"></i>
            </button>
          </div>
        </div>
        <div className="code-editor-container">
          <textarea 
            id={id}
            className="code-editor-textarea" 
            value={code}
            onChange={handleChange}
            placeholder="请输入自定义代码"
            style={{
              fontFamily: 'Consolas, Monaco, Courier New, monospace',
              fontSize: '14px',
              lineHeight: '1.5',
              padding: '12px',
              width: '100%',
              height: '400px',
              backgroundColor: '#272822',
              color: '#f8f8f2',
              border: 'none',
              resize: 'vertical',
              tabSize: '4'
            }}
          ></textarea>
        </div>
      </div>
      {copySuccess && (
        <div className="code-copy-success show">
          代码已复制到剪贴板
        </div>
      )}
    </div>
  );
}