import React, { useRef, useEffect, useState } from 'react';
import { Card, Alert, Button, Space, message, Modal, Input } from 'antd';
import { CopyOutlined, DownloadOutlined, UploadOutlined, DeleteOutlined } from '@ant-design/icons';
import './index.less';

/**
 * 表单设计器页面
 * 
 * 注意：使用 React 版本的表单设计器或自定义实现
 */
const FormCreate: React.FC = () => {
  const [formJson, setFormJson] = useState<string>('');
  const [previewVisible, setPreviewVisible] = useState(false);
  const [importVisible, setImportVisible] = useState(false);
  const [importJson, setImportJson] = useState('');

  // 默认表单配置
  const defaultConfig = {
    fieldReadonly: false,
  };

  // 复制JSON到剪贴板
  const handleCopyJson = () => {
    if (!formJson) {
      message.warning('暂无表单配置');
      return;
    }
    navigator.clipboard.writeText(formJson).then(() => {
      message.success('已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败');
    });
  };

  // 导出JSON文件
  const handleExportJson = () => {
    if (!formJson) {
      message.warning('暂无表单配置');
      return;
    }
    const blob = new Blob([formJson], { type: 'application/json' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `form-config-${Date.now()}.json`;
    a.click();
    URL.revokeObjectURL(url);
    message.success('导出成功');
  };

  // 导入JSON
  const handleImportJson = () => {
    try {
      JSON.parse(importJson);
      setFormJson(importJson);
      setImportVisible(false);
      setImportJson('');
      message.success('导入成功');
    } catch (e) {
      message.error('JSON格式错误');
    }
  };

  // 清空表单
  const handleClear = () => {
    Modal.confirm({
      title: '确认清空',
      content: '确定要清空当前表单配置吗？',
      onOk: () => {
        setFormJson('');
        message.success('已清空');
      },
    });
  };

  return (
    <div className="form-create-container">
      <Alert
        message="表单设计器"
        description="拖拽组件到画布中设计表单，支持导入导出JSON配置。此功能需要集成 form-create-designer React 版本。"
        type="info"
        showIcon
        className="form-create-alert"
      />

      <Card
        title="表单设计器"
        extra={
          <Space>
            <Button icon={<UploadOutlined />} onClick={() => setImportVisible(true)}>
              导入JSON
            </Button>
            <Button icon={<CopyOutlined />} onClick={handleCopyJson}>
              复制JSON
            </Button>
            <Button icon={<DownloadOutlined />} onClick={handleExportJson}>
              导出JSON
            </Button>
            <Button icon={<DeleteOutlined />} danger onClick={handleClear}>
              清空
            </Button>
          </Space>
        }
      >
        <div className="form-designer-wrapper">
          {/* 
            使用 fc-designer 组件：
            <fc-designer ref="designer" :config="config" height="calc(100vh - 160px)" />
            
            React 版本需要使用 @form-create/designer 的 React 版本
            或者使用其他 React 表单设计器如 formily、amis 等
          */}
          <div className="form-designer-placeholder">
            <div className="placeholder-content">
              <h3>表单设计器区域</h3>
              <p>此处需要集成 React 版本的表单设计器组件</p>
              <p>推荐方案：</p>
              <ul>
                <li>@form-create/designer (React版)</li>
                <li>@formily/antd-v5</li>
                <li>amis-editor</li>
              </ul>
            </div>
          </div>
        </div>

        {formJson && (
          <div className="form-json-preview">
            <h4>当前表单配置：</h4>
            <pre>{formJson}</pre>
          </div>
        )}
      </Card>

      {/* 导入JSON弹窗 */}
      <Modal
        title="导入JSON配置"
        open={importVisible}
        onOk={handleImportJson}
        onCancel={() => {
          setImportVisible(false);
          setImportJson('');
        }}
        width={600}
      >
        <Input.TextArea
          rows={10}
          value={importJson}
          onChange={(e) => setImportJson(e.target.value)}
          placeholder="请粘贴JSON配置"
        />
      </Modal>

      {/* 预览弹窗 */}
      <Modal
        title="表单预览"
        open={previewVisible}
        onCancel={() => setPreviewVisible(false)}
        footer={null}
        width={800}
      >
        <div className="form-preview-content">
          {/* 表单预览内容 */}
        </div>
      </Modal>
    </div>
  );
};

export default FormCreate;
