import { Input } from 'antd';
import React from 'react';

interface JsonEditorProps {
  /** JSON 文本内容 */
  value: string;
  /** 内容变化回调 */
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
}

/**
 * JSON 编辑区域。
 * 用户可直接粘贴或编辑完整的工具集配置 JSON，修改会自动同步到可视化表单。
 */
export default function JsonEditor({ value, onChange }: JsonEditorProps) {
  return (
    <div style={{ padding: '4px 0 16px' }}>
      <div style={{ marginBottom: 8, color: '#666', fontSize: 12 }}>
        提示：您可以直接编辑下方 JSON 内容，可视化表单将自动同步更新。
      </div>
      <Input.TextArea
        value={value}
        onChange={onChange}
        rows={25}
        className="agent-editor-code-input"
        placeholder="请输入完整的工具集配置 JSON"
        style={{ fontFamily: 'monospace' }}
      />
    </div>
  );
}