import React, { useState } from 'react';
import { Modal, Form, Input, Upload, Button, Message } from '@arco-design/web-react';
import { IconUpload, IconDelete } from '@arco-design/web-react/icon';
import styles from './style/publishComponentModal.module.less';
import { publishComponent, uploadComponentFile } from '@/api/componentMarket';
import { PublishComponentParams } from '@/api/interface';

const FormItem = Form.Item;

interface PublishComponentModalProps {
  visible: boolean;
  componentInfo: any;
  onCancel: () => void;
  onSuccess: () => void;
}

const PublishComponentModal: React.FC<PublishComponentModalProps> = ({
                                                                       visible,
                                                                       componentInfo,
                                                                       onCancel,
                                                                       onSuccess
                                                                     }) => {
  const [form] = Form.useForm();
  const [fileList, setFileList] = useState([]);
  const [uploading, setUploading] = useState(false);
  const [uploadedFiles, setUploadedFiles] = useState<any[]>([]); // 保存上传成功后的文件信息

  // 处理文件选择
  const handleFileChange = (fileList) => {
    // 验证每个文件大小
    const invalidFiles = fileList.filter(file => file.originFile && file.originFile.size > 10 * 1024 * 1024);
    if (invalidFiles.length > 0) {
      Message.error('上传文件大小不能超过10MB!');
      return;
    }
    setFileList(fileList);
  };


  // 文件上传
  const uploadFile = async () => {
    if (fileList.length === 0) {
      Message.warning('请选择要上传的文件');
      return;
    }

    try {
      setUploading(true);

      const formData = new FormData();
      fileList.forEach((file) => {
        formData.append('files', file.originFile);
      });

      const result: any = await uploadComponentFile(formData);

      if (result.code === 200) {
        Message.success(`成功上传 ${fileList.length} 个文件`);
        // 保存上传成功后的文件信息
        setUploadedFiles(result.data || []);
      }
      else {
        Message.error(result.msg || '上传失败');
      }
    } catch (error) {
      console.error('上传失败:', error);
      Message.error('上传失败');
    } finally {
      setUploading(false);
    }
  };

  // 删除单个文件
  const handleRemoveFile = (index: number) => {
    const newFileList = fileList.filter((_, i) => i !== index);
    setFileList(newFileList);
  };

  // 处理提交
  const handleSubmit = async () => {
    try {
      const values = await form.validate();

      // 调用发布接口
      const publishParams: PublishComponentParams = {
        id: componentInfo?.id || '',
        recommend: values.recommend
      };

      if (uploadedFiles.length > 0) {
        // 拼接 files 和 filesName
        const files = uploadedFiles.map(file => file.link).join(',');
        const filesName = uploadedFiles.map(file => file.originalName).join(',');
        publishParams.files = files;
        publishParams.filesName = filesName;
      }

      setUploading(true);


      const result: any = await publishComponent(publishParams);

      if (result.code === 200) {
        Message.success('组件发布成功');
        handleCancel();
        onSuccess();
      }
      else {
        Message.error(result.msg || '组件发布失败');
      }
    } catch (error) {
      console.error('发布组件失败:', error);
      Message.error('组件发布失败');
    } finally {
      setUploading(false);
    }
  };

  // 处理取消
  const handleCancel = () => {
    form.resetFields();
    setFileList([]);
    setUploadedFiles([]);
    setUploading(false);
    onCancel();
  };

  return (
    <Modal
      title="组件发布"
      visible={visible}
      onCancel={handleCancel}
      footer={
        <div className={styles['modal-footer']}>
          <Button onClick={handleCancel}>取消</Button>
          <Button type="primary" onClick={handleSubmit} loading={uploading}>
            确定
          </Button>
        </div>
      }
      style={{ width: 600 }}
    >
      <Form
        form={form}
        layout="vertical"
      >
        <FormItem
          label="组件描述:"
          field="recommend"
          rules={[{ required: true, message: '请输入组件描述' }]}
        >
          <Input placeholder="请输入组件描述" />
        </FormItem>

        <FormItem label="上传附件:">
          <div className={styles['upload-section']}>
            <Upload
              fileList={fileList}
              onChange={handleFileChange}
              accept="*"
              multiple
              autoUpload={false}
              showUploadList={false}
            >
              <Button type="outline" icon={<IconUpload />}>
                选取文件
              </Button>
            </Upload>
            <Button type="primary" style={{ marginLeft: 12 }} onClick={uploadFile} loading={uploading}>
              点击上传
            </Button>
          </div>
          <div className={styles['upload-tip']}>
            上传文件大小不能超过10MB！
          </div>
          {fileList.length > 0 && (
            <div className={styles['file-list']}>
              {fileList.map((file, index) => (
                <div key={index} className={styles['file-item']}>
                  <span className={styles['file-name']}>
                    {index + 1}. {file.name}
                  </span>
                  <IconDelete
                    className={styles['delete-icon']}
                    onClick={() => handleRemoveFile(index)}
                  />
                </div>
              ))}
            </div>
          )}
        </FormItem>
      </Form>
    </Modal>
  );
};

export default PublishComponentModal;
