import React, { useState, useRef, useEffect } from 'react';
import { Modal, Button, Message, Divider, Tabs, Checkbox } from '@arco-design/web-react';
import { IconUpload, IconDelete, IconFile } from '@arco-design/web-react/icon';
import styles from './style/importComponentModal.module.less';

interface ImportComponentModalProps {
  visible: boolean;
  onCancel: () => void;
  onOk: (files: FileItem[]) => void;
  onFileSelect: (file: File) => void;
  componentInfo: any; // 单次文件解析的结果
  loading: boolean;
}

interface FileItem {
  file: File;
  componentInfo: any[]; // 该文件包含的组件列表
}

const ImportComponentModal: React.FC<ImportComponentModalProps> = ({
                                                                     visible,
                                                                     onCancel,
                                                                     onOk,
                                                                     onFileSelect,
                                                                     componentInfo,
                                                                     loading
                                                                   }) => {
  const [fileItems, setFileItems] = useState<FileItem[]>([]);
  const [activeTabKey, setActiveTabKey] = useState<string>('0');
  const [pendingFile, setPendingFile] = useState<File | null>(null); // 等待解析的文件
  const fileInputRef = useRef<HTMLInputElement>(null);

  // 当弹窗关闭时清空所有状态
  useEffect(() => {
    if (!visible) {
      setFileItems([]);
      setActiveTabKey('0');
      setPendingFile(null);
    }
  }, [visible]);

  // 当 componentInfo 更新时，添加到 fileItems`
  useEffect(() => {
    if (pendingFile && componentInfo) {
      const componentList = Array.isArray(componentInfo) ? componentInfo : [componentInfo];

      // 检查文件是否已存在
      const existingIndex = fileItems.findIndex(item => item.file.name === pendingFile.name);

      if (existingIndex >= 0) {
        // 更新现有文件
        const newFileItems = [...fileItems];
        newFileItems[existingIndex] = {
          file: pendingFile,
          componentInfo: componentList
        };
        setFileItems(newFileItems);
      }
      else {
        // 添加新文件
        const newFileItem: FileItem = {
          file: pendingFile,
          componentInfo: componentList
        };
        const updatedFileItems = [...fileItems, newFileItem];
        setFileItems(updatedFileItems);
        setActiveTabKey(String(fileItems.length)); // 切换到新添加的标签页
      }

      setPendingFile(null);
    }
  }, [componentInfo]);

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files || files.length === 0) return;

    // 验证文件类型 (.zip)
    const file = files[0];
    if (!file.name.match(/\.zip$/i)) {
      Message.error('请选择ZIP压缩包文件');
      event.target.value = '';
      return;
    }

    setPendingFile(file);
    onFileSelect(file);
    event.target.value = '';
  };

  const handleSelectFile = () => {
    fileInputRef.current?.click();
  };

  // 删除文件
  const handleDeleteFile = (index: number) => {
    const newFileItems = fileItems.filter((_, i) => i !== index);
    setFileItems(newFileItems);

    // 如果删除的是当前激活的标签页，切换到第一个
    if (String(index) === activeTabKey && newFileItems.length > 0) {
      setActiveTabKey('0');
    }
  };

  const handleUpload = () => {

    if (fileItems.length === 0) {
      Message.warning('请至少选择一个组件');
      return;
    }

    onOk(fileItems);
  };

  const handleClose = () => {
    setFileItems([]);
    setActiveTabKey('0');
    setPendingFile(null);
    onCancel();
  };

  return (
    <Modal
      title="导入组件"
      visible={visible}
      onCancel={handleClose}
      style={{ width: 900 }}
      footer={
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <Button onClick={handleSelectFile} type="outline" icon={<IconUpload />}>
              添加文件
            </Button>
          </div>
          <div>
            <Button onClick={handleClose} style={{ marginRight: 12 }}>
              取消
            </Button>
            <Button
              type="primary"
              onClick={handleUpload}
              disabled={fileItems.length === 0}
              loading={loading}
            >
              确认导入
            </Button>
          </div>
        </div>
      }
    >
      <input
        ref={fileInputRef}
        type="file"
        accept=".zip"
        style={{ display: 'none' }}
        onChange={handleFileChange}
      />

      <div className={styles['import-modal-content']}>
        {fileItems.length === 0 && !pendingFile && (
          <div className={styles['empty-state']}>
            <p className={styles['empty-text']}>请点击下方&#34;添加文件&#34;按钮选择组件压缩包</p>
            <p className={styles['empty-hint']}>支持 .zip 格式文件，可添加多个文件</p>
          </div>
        )}

        {fileItems.length > 0 && (
          <Tabs
            activeTab={activeTabKey}
            onChange={setActiveTabKey}
            type="card"
          >
            {fileItems.map((fileItem, fileIndex) => {
              const current = fileItems[activeTabKey];
              const baseInfo = current.componentInfo[0].baseInfo;
              const operates = current.componentInfo[0].operates;
              return (
                <Tabs.TabPane
                  key={String(fileIndex)}
                  title={
                    <div className={styles['tab-title']}>
                      <IconFile style={{ marginRight: 4 }} />
                      <span>{fileItem.file.name}</span>
                      <Button
                        type="text"
                        size="mini"
                        icon={<IconDelete />}
                        status="danger"
                        onClick={(e) => {
                          e.stopPropagation();
                          handleDeleteFile(fileIndex);
                        }}
                        style={{ marginLeft: 8 }}
                      />
                    </div>
                  }
                >
                  <div className={styles['file-content']}>
                    <div className={styles['component-list']}>
                      <div
                        className={styles['component-card']}
                      >
                        <div className={styles['card-header']}>
                                <span className={styles['component-name']} style={{ fontWeight: 600, fontSize: 16 }}>
                                  {baseInfo.name || baseInfo.identifier || baseInfo.projectId || '组件信息'}
                                </span>
                        </div>
                        {/* 组件基本信息 */}
                        <div className={styles['component-info']}>
                          {baseInfo.projectId && (
                            <div className={styles['info-item']}>
                              <span className={styles['info-label']}>组件标识:</span>
                              <span className={styles['info-value']}>{baseInfo.projectId}</span>
                            </div>
                          )}
                          {baseInfo.codeLanguage && (
                            <div className={styles['info-item']}>
                              <span className={styles['info-label']}>代码语言:</span>
                              <span className={styles['info-value']}>{baseInfo.codeLanguage}</span>
                            </div>
                          )}
                          {baseInfo.componentClassify && (
                            <div className={styles['info-item']}>
                              <span className={styles['info-label']}>组件分类:</span>
                              <span className={styles['info-value']}>{baseInfo.componentClassify}</span>
                            </div>
                          )}
                          {baseInfo.desc && (
                            <div className={styles['component-desc']}>
                              {baseInfo.desc}
                            </div>
                          )}
                        </div>

                        {/* 接口列表 */}
                        {operates.length > 0 && (
                          <div className={styles['operates-section']}>
                            <div className={styles['section-title']}>
                              接口列表 ({operates.length})
                            </div>
                            <div className={styles['operates-list']}>
                              {operates.map((operate: any, opIndex: number) => (
                                <div key={opIndex} className={styles['operate-item']}>
                                  <div className={styles['operate-header']}>
                                            <span className={styles['operate-ident']}>
                                              {operate.ident}
                                            </span>
                                    <span className={styles['operate-type']}>
                                              {operate.type}
                                            </span>
                                  </div>
                                  {operate.name && (
                                    <div className={styles['operate-name']}>{operate.name}</div>
                                  )}
                                  <div className={styles['operate-params']}>
                                    {operate.parameters && operate.parameters.length > 0 && (
                                      <span className={styles['param-info']}>
                                                输入: {operate.parameters.length} 个参数
                                              </span>
                                    )}
                                    {operate.responses && operate.responses.length > 0 && (
                                      <span className={styles['param-info']}>
                                                输出: {operate.responses.length} 个参数
                                              </span>
                                    )}
                                  </div>
                                </div>
                              ))}
                            </div>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </Tabs.TabPane>
              );
            })}
          </Tabs>
        )}
      </div>
    </Modal>
  );
};

export default ImportComponentModal;
