/**
 * CodeBlockRenderer - 代码块渲染器
 * 
 * Tool C 专用：显示 AI 生成的代码，支持语法高亮和执行
 */

import React, { useEffect } from 'react';
import { Button } from 'antd';
import { PlayCircleOutlined, LoadingOutlined } from '@ant-design/icons';
import Prism from 'prismjs';
import 'prismjs/themes/prism-tomorrow.css';
import 'prismjs/components/prism-python';
import type { CodeBlockRendererProps } from './types';

export const CodeBlockRenderer: React.FC<CodeBlockRendererProps> = ({
  code,
  language = 'python',
  onExecute,
  isExecuting = false,
  executionResult,
}) => {
  // 语法高亮
  useEffect(() => {
    Prism.highlightAll();
  }, [code]);

  const handleExecute = () => {
    if (onExecute && !isExecuting) {
      onExecute(code);
    }
  };

  return (
    <div className="code-block-container">
      <div className="code-block-header">
        <span className="code-language">{language}</span>
        {onExecute && (
          <Button
            type="primary"
            size="small"
            icon={isExecuting ? <LoadingOutlined /> : <PlayCircleOutlined />}
            onClick={handleExecute}
            disabled={isExecuting}
            className="execute-button"
          >
            {isExecuting ? '执行中...' : '运行代码'}
          </Button>
        )}
      </div>

      <pre className="code-block">
        <code className={`language-${language}`}>
          {code}
        </code>
      </pre>

      {executionResult && (
        <div className={`execution-result ${executionResult.success ? 'success' : 'error'}`}>
          {executionResult.success ? (
            <span>✅ 执行成功</span>
          ) : (
            <span>❌ {executionResult.message || '执行失败'}</span>
          )}
        </div>
      )}
    </div>
  );
};

export default CodeBlockRenderer;