import React, { useState, useEffect, useRef } from 'react';
import styles from './style/index.module.less';
import {
  Button,
  Divider,
  Input,
  Space,
  Table,
  Radio,
  Pagination,
  Modal,
  Message,
  Rate,
  Tag,
  Form,
  Select
} from '@arco-design/web-react';
import { IconSearch } from '@arco-design/web-react/icon';
import {
  getMyComponentList,
  getCooperationComponentList,
  remove,
  exportComponent,
  getImportComponentInfo,
  importComponent
} from '@/api/componentBase';
import { deleteComponentMarket, getComponentHistoryReview } from '@/api/componentMarket';
import { componentRelease, componentRevoke } from '@/api/componentRelease';
import { ComponentItem } from '@/api/interface';
import { getComponentClassify } from '@/api/componentClassify';
import AddComponentModal from '@/pages/componentDevelopment/componentList/addComponentModal';
import PublishComponentModal from '@/pages/componentDevelopment/componentList/publishComponentModal';
import ImportComponentModal from '@/pages/componentDevelopment/componentList/importComponentModal';
import ShareCollaborationModal from '@/pages/componentDevelopment/componentList/shareCollaborationModal';
import HandleButtonGroup from '@/pages/componentDevelopment/componentList/handleButtonGroup';
import CompAudit from '@/pages/componentDevelopment/componentList/compAudit';
import {
  componentStatusConstant,
  componentStatusDict,
  publicStatusDict,
  publishStatusDict
} from '@/const/isdp/componentBase';
import dayjs from 'dayjs';
import { updateComponentCodingPath } from '@/store/ideContainer';
import { useDispatch, useSelector } from 'react-redux';
import { componentOffSale } from '@/api/componentDeploy';

const Group = Radio.Group;
const FormItem = Form.Item;

const GlobalVarContainer = () => {
  const [selectedItem, setSelectedItem] = useState('我的组件');
  const [selectComponent, setSelectComponent] = useState(null);
  const [componentData, setComponentData] = useState<ComponentItem[]>([]);
  const [pagination, setPagination] = useState({
    total: 0,
    size: 10,
    current: 1
  });
  const [loading, setLoading] = useState(false);
  const [visible, setVisible] = useState(false);
  const [publishModalVisible, setPublishModalVisible] = useState(false);
  const [selectedPublishComponent, setSelectedPublishComponent] = useState(null);
  const [mode, setMode] = useState<'create' | 'edit' | 'copy'>('create'); // 添加模式状态
  const [searchValue, setSearchValue] = useState(''); // 添加搜索状态
  const [componentStatus, setComponentStatus] = useState(''); // 添加组件状态筛选

  // 搜索表单字段
  const [searchForm, setSearchForm] = useState({
    name: '',           // 组件名称
    projectId: '',      // 组件标识
    componentClassify: '', // 组件分类
    createUserName: '', // 创建人
    codeLanguage: ''    // 代码语言
  });

  // 组件分类选项
  const [classifyOptions, setClassifyOptions] = useState([]);

  // 代码语言选项
  const codeLanguageOptions = [
    { label: 'Java', value: 'Java' },
    { label: 'Python', value: 'Python' }
  ];
  const [importModalVisible, setImportModalVisible] = useState(false); // 导入弹窗
  const [importComponentInfo, setImportComponentInfo] = useState(null); // 导入组件信息
  const [importLoading, setImportLoading] = useState(false); // 导入加载状态
  const [showOffSaleModal, setShowOffSaleModal] = useState(false);
  const [offSaleComponent, setOffSaleComponent] = useState(null);

  // 审核历史弹窗状态
  const [historyModalVisible, setHistoryModalVisible] = useState(false);
  const [historyLoading, setHistoryLoading] = useState(false);
  const [historyData, setHistoryData] = useState([]);
  const [currentReviewComponent, setCurrentReviewComponent] = useState(null);

  // 分享协作弹窗状态
  const [shareModalVisible, setShareModalVisible] = useState(false);
  const [shareComponent, setShareComponent] = useState<ComponentItem | null>(null);

  const dispatch = useDispatch();
  const skipNextFetchRef = useRef(false); // 用于跳过下一次由分页变化触发的请求

  // 获取用户信息，判断是否为超管
  const userInfo = useSelector((state: any) => state.user?.userInfo);
  const isAdmin = userInfo?.isAdmin === true;

  const menuItems = [
    {
      key: '1',
      label: '我的组件',
      icon: '/ideContainer/icon/myComp.png',
      activeIcon: '/ideContainer/icon/myComp_active.png'
    },
    {
      key: '2',
      label: '协同组件',
      icon: '/ideContainer/icon/teamComp.png',
      activeIcon: '/ideContainer/icon/teamComp_active.png'
    },
    // 只有超管才显示组件审核菜单
    ...(isAdmin ? [{
      key: '3',
      label: '组件审核',
      icon: '/ideContainer/icon/compAudit.png',
      activeIcon: '/ideContainer/icon/compAudit_active.png'
    }] : [])
  ];

  const columns = [
    {
      title: '组件名称',
      dataIndex: 'name'
    },
    {
      title: '组件标识',
      dataIndex: 'projectId'
    },
    {
      title: '分类',
      dataIndex: 'componentClassify'
    },
    {
      title: '创建人',
      dataIndex: 'createUserName'
    },
    // 协同组件列表显示权限
    ...(selectedItem === '协同组件' ? [{
      title: '协作权限',
      dataIndex: 'permission',
      render: (_, record) => {
        const permissionMap = {
          read: '读',
          write: '写',
          admin: '管理'
        };
        return <span>{permissionMap[record.permission] || record.permission || '-'}</span>;
      }
    }] : []),
    {
      title: '代码语言',
      dataIndex: 'codeLanguage'
    },
    {
      title: '组件类型',
      dataIndex: 'type',
      render: (_, record) => {
        return (
          <span>{record.type === 'normal' ? '普通组件' : '监听组件'}</span>
        );
      }
    },
    {
      title: '组件状态',
      dataIndex: 'componentStatus',
      render: (_, record) => {
        const formattedData = componentStatusDict.find(item => item.value === componentStatusConstant[record.componentStatus]) || { label: '' };
        return (
          <span>{formattedData.label}</span>
        );
      }
    },
    {
      title: '发布状态',
      dataIndex: 'publicStatus',
      render: (_, record) => {
        const formattedData = publicStatusDict.find(item => item.value === record.publicStatus) || { label: '' };
        return (
          <span>{formattedData.label}</span>
        );
      }
    },
    {
      title: '公开状态',
      dataIndex: 'publishStatus',
      render: (_, record) => {
        const formattedData = publishStatusDict.find(item => item.value === record.publishStatus) || { label: '' };
        return (
          <span>{formattedData.label}</span>
        );
      }
    },
    {
      title: '修改时间',
      dataIndex: 'updateTime',
      render: (_, record) => {
        return (
          <span>{dayjs(record.updateTime).format('YYYY-MM-DD HH:mm:ss')}</span>
        );
      }
    },
    {
      title: '操作',
      dataIndex: 'operations',
      fixed: 'right' as const,
      width: 400,
      render: (_, record, index) => (
        <HandleButtonGroup
          row={record}
          index={index}
          permission={selectedItem === '协同组件' ? record.permission : undefined}
          isCollaborator={selectedItem === '协同组件'}
          onHandlePublishComponent={(row) => {
            setSelectedPublishComponent(row);
            setPublishModalVisible(true);
          }}
          onGoToReview={(row) => {
            if (isAdmin) {
              // 超管：切换到组件审核页面
              setSelectedItem('组件审核');
            }
            else {
              // 普通用户：弹出审核历史弹窗
              handleShowReviewHistory(row);
            }
          }}
          onPublishOrRevokeComponent={async (action, identifier, version) => {
            try {
              if (action === 'publish') {
                await componentRelease({ identifier, version });
                Message.success('组件公开成功');
              }
              else if (action === 'revoke') {
                await componentRevoke({ identifier, version });
                Message.success('组件撤销成功');
              }
              // 重新获取数据以更新状态
              fetchComponentData();
            } catch (error) {
              console.error('操作失败:', error);
              Message.error(`组件${action === 'publish' ? '公开' : '撤销'}失败: ${error.message || ''}`);
            }
          }}
          onSourceCodeView={(row) => {
            dispatch(updateComponentCodingPath({
              localProjectPath: row.localProjectPath,
              name: row.name,
              projectId: row.projectId,
              id: row.id
            }));
            const event = new CustomEvent('navigateToTab', {
              detail: {
                path: 'componentCoding'
              }
            });

            document.dispatchEvent(event);
          }}
          onShowEdit={(row, index) => {
            setSelectComponent(row);
            setVisible(true);
            setMode('edit'); // 设置模式为复制
          }}
          onCopyHandler={(row) => {
            setSelectComponent(row);
            setVisible(true);
            setMode('copy'); // 设置模式为复制
          }}
          onShareCollaboration={(row) => {
            setShareComponent(row);
            setShareModalVisible(true);
          }}
          onExportComponent={(row) => {
            // 实现导出组件逻辑
            onExportComponent(row);
          }}
          onStopComponentShow={(row) => {
            setOffSaleComponent(row);
            setShowOffSaleModal(true);
          }}
          onCancelPublish={handleCancelPublish}
          onRowDel={(row) => {
            // 显示确认框
            Modal.confirm({
              title: '确认删除',
              content: `确定要删除组件 "${row.name}" 吗？此操作不可恢复。`,
              okButtonProps: { status: 'danger' },
              onOk: async () => {
                try {
                  const res = await remove(row.id);
                  console.log('res:', res);
                  Message.success('组件删除成功');
                  // 重新获取数据
                  fetchComponentData();
                } catch (error) {
                  console.error('删除组件失败:', error);
                  Message.error('组件删除失败');
                }
              }
            });
          }}
        />
      )
    }
  ];

  useEffect(() => {
    if (selectedItem === '我的组件' || selectedItem === '协同组件') {
      if (pagination.current !== 1) {
        setPagination(prev => ({
          ...prev,
          current: 1
        }));
      }
      else {
        // 第一页j就直接请求数据
        fetchComponentData({ current: 1, size: pagination.size });
      }
    }
  }, [selectedItem]);

  // 获取组件分类选项
  useEffect(() => {
    const fetchClassifyOptions = async () => {
      try {
        const res: any = await getComponentClassify('component');
        if (res.code === 200 && res.data) {
          setClassifyOptions(res.data.map(item => ({
            label: item.classifyName,
            value: item.classifyName
          })));
        }
      } catch (error) {
        console.error('获取组件分类失败:', error);
      }
    };
    fetchClassifyOptions();
  }, []);

  // 监听来自其他页面的搜索关键词
  useEffect(() => {
    const handleNavigateWithSearch = (event: any) => {
      const { searchKeyword } = event.detail || {};
      if (searchKeyword) {
        setSearchValue(searchKeyword);
        // 标记跳过下一次由分页变化触发的请求
        skipNextFetchRef.current = true;
        setPagination(prev => ({
          ...prev,
          current: 1
        }));
        setTimeout(() => {
          fetchComponentData({ current: 1, size: pagination.size, name: searchKeyword });
        }, 500);
      }
    };

    // 监听导航事件（如果有搜索关键词）
    window.addEventListener('componentListSearch', handleNavigateWithSearch);

    return () => {
      window.removeEventListener('componentListSearch', handleNavigateWithSearch);
    };
  }, [pagination.size]);

  // 下架组件
  const componentOffSaleHandler = async (stopInstance: boolean) => {
    const res: any = await componentOffSale({ identifier: offSaleComponent.identifier, stopInstance });
    if (res.code === 200) {
      setShowOffSaleModal(false);
      setOffSaleComponent(null);
      fetchComponentData();
    }
    else {
      Modal.error({
        title: '下架失败',
        content: res.message
      });
    }
  };

  // 取消发布组件
  const handleCancelPublish = async (row: ComponentItem) => {
    Modal.confirm({
      title: '确认取消发布',
      content: `确定要取消发布组件 "${row.name}" 吗？取消后该组件将从组件市场下架。`,
      okButtonProps: { status: 'warning' },
      onOk: async () => {
        try {
          const res: any = await deleteComponentMarket(row.id);
          if (res.code === 200) {
            Message.success('取消发布成功');
            // 重新获取数据以更新状态
            fetchComponentData();
          }
          else {
            Message.error(res.message || '取消发布失败');
          }
        } catch (error) {
          console.error('取消发布失败:', error);
          Message.error('取消发布失败');
        }
      }
    });
  };

  // 处理导入组件 - 文件选择后获取组件信息
  const handleImportFileSelect = async (file: File) => {
    try {
      setImportLoading(true);
      const res: any = await getImportComponentInfo({ file });

      if (res.code === 200) {
        setImportComponentInfo(res.data);
        Message.success('组件信息解析成功');
      }
      else {
        Message.error(res.msg || '解析组件信息失败');
        setImportComponentInfo(null);
      }
    } catch (error) {
      Message.error('解析组件信息失败');
      setImportComponentInfo(null);
    } finally {
      setImportLoading(false);
    }
  };

  // 处理导入组件 - 确认上传
  const handleImportConfirm = async (files) => {
    try {
      setImportLoading(true);

      const params = {
        file: files.map(file => file.file)
      };

      const res: any = await importComponent(params);

      console.log('res:', res);
      if (res.code === 200) {
        Message.success('组件导入成功');
        setImportModalVisible(false);
        setImportComponentInfo(null);
        fetchComponentData(); // 刷新列表
      }
      else {
        Message.error(res.msg || '组件导入失败');
      }

    } catch (error) {
      console.error('导入组件失败:', error);
      Message.error('导入组件失败');
    } finally {
      setImportLoading(false);
    }
  };

  // 关闭导入弹窗
  const handleImportCancel = () => {
    setImportModalVisible(false);
    setImportComponentInfo(null);
  };

  // 查看审核历史
  const handleShowReviewHistory = async (row) => {
    setCurrentReviewComponent(row);
    setHistoryModalVisible(true);
    setHistoryLoading(true);

    try {
      const res: any = await getComponentHistoryReview({
        identifier: row.identifier
      });

      if (res.code === 200 && res.data) {
        setHistoryData(res.data.list || []);
      }
      else {
        Message.error(res.msg || '获取审核历史失败');
      }
    } catch (error) {
      console.error('获取审核历史失败:', error);
      Message.error('获取审核历史失败');
    } finally {
      setHistoryLoading(false);
    }
  };

  // 获取组件列表数据，支持传入额外参数
  const fetchComponentData = async (extraParams: any = {}) => {
    setLoading(true);
    const apiMap = {
      '我的组件': getMyComponentList,
      '协同组件': getCooperationComponentList
    };
    try {
      const params: any = {
        current: extraParams.current ?? pagination.current,
        size: extraParams.size ?? pagination.size
      };

      // 处理搜索表单参数
      const formData = extraParams.searchForm !== undefined ? extraParams.searchForm : searchForm;

      // 组件名称
      if (formData.name?.trim()) {
        params.name = formData.name.trim();
      }

      // 组件标识
      if (formData.projectId?.trim()) {
        params.projectId = formData.projectId.trim();
      }

      // 组件分类
      if (formData.componentClassify?.trim()) {
        params.componentClassify = formData.componentClassify.trim();
      }

      // 创建人
      if (formData.createUserName?.trim()) {
        params.createUserName = formData.createUserName.trim();
      }

      // 代码语言
      if (formData.codeLanguage?.trim()) {
        params.codeLanguage = formData.codeLanguage.trim();
      }

      const status = extraParams.componentStatus !== undefined ? extraParams.componentStatus : componentStatus;
      if (status) {
        params.componentStatus = status.toUpperCase();
      }

      const res: any = await apiMap[selectedItem](params);

      setComponentData(res.data.records || res.data.list);
      setPagination(prev => ({
        ...prev,
        total: res.data.total || res.data.totalCount
      }));
    } catch (error) {
      console.error('获取组件列表失败:', error);
      Message.error('获取组件列表失败');
    } finally {
      setLoading(false);
    }
  };

  const handlePageChange = (page: number, size?: number) => {
    const newSize = size || pagination.size;
    setPagination(prev => ({
      ...prev,
      current: page,
      size: newSize
    }));
  };

  // 监听分页变化
  useEffect(() => {
    if (skipNextFetchRef.current) {
      skipNextFetchRef.current = false;
      return;
    }
    if (selectedItem === '我的组件' || selectedItem === '协同组件') {
      fetchComponentData({ current: pagination.current, size: pagination.size });
    }
  }, [pagination.current, pagination.size, componentStatus]);

  // 搜索处理函数
  const searchHandle = () => {
    if (pagination.current !== 1) {
      setPagination(prev => ({
        ...prev,
        current: 1
      }));
    }
    else {
      fetchComponentData({ current: 1, size: pagination.size });
    }
  };

  // 重置搜索
  const resetSearch = () => {
    const emptyForm = {
      name: '',
      projectId: '',
      componentClassify: '',
      createUserName: '',
      codeLanguage: ''
    };
    setSearchForm(emptyForm);
    setSearchValue('');
    setComponentStatus('');
    setPagination(prev => ({
      ...prev,
      current: 1
    }));
    fetchComponentData({ current: 1, size: pagination.size, searchForm: emptyForm, componentStatus: '' });
  };

  // 修改导出组件的回调函数
  const onExportComponent = async (row) => {
    /*
    * 特殊说明， next.js 使用rewrites 代理和静态导出会导致代理异常，这个时候使用dev运行会出现二进制接口返回异常的问题，
    * 导致无法正确处理二进制数据并把二进制数据转换成字符串，导致导出功能异常。这里需要使用 pnpm run build 和pnpm run start 运行项目。
    * */
    try {
      const res: any = await exportComponent(row.id);

      console.log('导出响应:', {
        type: typeof res,
        isBlob: res instanceof Blob,
        size: res?.size,
        blobType: res?.type
      });

      // 如果后端返回错误，可能会是 JSON 格式
      if (res instanceof Blob && res.type === 'application/json') {
        const text = await res.text();
        const errorData = JSON.parse(text);
        console.error('后端返回错误:', errorData);
        Message.error(errorData.msg || '导出失败');
        return;
      }

      // 确保 res 是 Blob 对象
      if (!(res instanceof Blob)) {
        console.error('响应不是 Blob 对象:', res);
        Message.error('导出失败：响应格式错误');
        return;
      }

      // 直接使用返回的 blob
      const url = window.URL.createObjectURL(res);
      const link = document.createElement('a');
      link.href = url;

      // 设置文件名
      const fileName = `${row.name}.zip`;
      link.setAttribute('download', fileName);

      // 触发下载
      document.body.appendChild(link);
      link.click();

      // 清理
      document.body.removeChild(link);
      window.URL.revokeObjectURL(url);

      Message.success('组件导出成功');
    } catch (error) {
      console.error('导出组件失败:', error);
      Message.error('组件导出失败');
    }
  };

  // 组件状态筛选处理函数
  const handleStatusChange = (value) => {
    setComponentStatus(value);
  };

  return (
    <>
      <div className={styles['comp-list-container']}>
        {/*左侧菜单*/}
        <div className={styles['comp-list-menu']}>
          {menuItems.map((item, index) => (
            <div
              key={index}
              className={selectedItem === item.label ? styles['selected'] : ''}
              onClick={() => setSelectedItem(item.label)}
            >
              <img src={selectedItem === item.label ? item.activeIcon : item.icon} alt=""
                   style={{ width: 20, height: 20, marginRight: 12 }} />
              <span>{item.label}</span>
            </div>
          ))}
        </div>
        <div className={styles['comp-list-content']}>
          {selectedItem !== '组件审核' && (
            <>
              {/*头部*/}
              <div className={styles['comp-list-header']}>
                <div className={styles['comp-list-search']}>
                  <Space>
                    <Form
                      style={{ width: '100%' }}
                      autoComplete="off"
                      layout="inline"
                    >
                      <FormItem label="组件名称" style={{ marginBottom: 0 }}>
                        <Input
                          value={searchForm.name}
                          onChange={(value) => setSearchForm({ ...searchForm, name: value })}
                          onPressEnter={searchHandle}
                          placeholder={'输入组件名称'}
                          allowClear
                          style={{ width: 200 }}
                        />
                      </FormItem>
                      <FormItem label="组件标识" style={{ marginBottom: 0 }}>
                        <Input
                          value={searchForm.projectId}
                          onChange={(value) => setSearchForm({ ...searchForm, projectId: value })}
                          onPressEnter={searchHandle}
                          placeholder={'输入组件标识'}
                          allowClear
                          style={{ width: 200 }}
                        />
                      </FormItem>
                      <FormItem label="分类" style={{ marginBottom: 0 }}>
                        <Select
                          value={searchForm.componentClassify}
                          onChange={(value) => setSearchForm({ ...searchForm, componentClassify: value })}
                          placeholder={'选择组件分类'}
                          allowClear
                          style={{ width: 150 }}
                        >
                          {classifyOptions.map(option => (
                            <Select.Option key={option.value} value={option.value}>
                              {option.label}
                            </Select.Option>
                          ))}
                        </Select>
                      </FormItem>
                      <FormItem label="创建人" style={{ marginBottom: 0 }}>
                        <Input
                          value={searchForm.createUserName}
                          onChange={(value) => setSearchForm({ ...searchForm, createUserName: value })}
                          onPressEnter={searchHandle}
                          placeholder={'输入创建人'}
                          allowClear
                          style={{ width: 150 }}
                        />
                      </FormItem>
                      <FormItem label="代码语言" style={{ marginBottom: 0 }}>
                        <Select
                          value={searchForm.codeLanguage}
                          onChange={(value) => setSearchForm({ ...searchForm, codeLanguage: value })}
                          placeholder={'选择代码语言'}
                          allowClear
                          style={{ width: 150 }}
                        >
                          {codeLanguageOptions.map(option => (
                            <Select.Option key={option.value} value={option.value}>
                              {option.label}
                            </Select.Option>
                          ))}
                        </Select>
                      </FormItem>
                    </Form>
                    <Button
                      type="primary"
                      style={{ marginLeft: 5, borderRadius: 4 }}
                      onClick={searchHandle}
                    >
                      搜索
                    </Button>
                    <Button
                      type="outline"
                      style={{ marginLeft: 5, borderRadius: 4 }}
                      onClick={resetSearch}
                    >
                      重置
                    </Button>
                  </Space>
                </div>
                <div className={styles['comp-list-handle']}>
                  <Radio.Group
                    defaultValue={''}
                    name="button-radio-group"
                    value={componentStatus}
                    onChange={handleStatusChange}
                    style={{ marginRight: 30 }}
                  >
                    {[{ label: '全部', value: '' }, ...componentStatusDict].map((item) => {
                      return (
                        <Radio key={item.value} value={item.value}>
                          {({ checked }) => {
                            return (
                              <Button
                                tabIndex={-1}
                                key={item.value}
                                shape="round"
                                type={checked ? 'primary' : 'default'}
                              >
                                {item.label}
                              </Button>
                            );
                          }}
                        </Radio>
                      );
                    })}
                  </Radio.Group>
                  {selectedItem === '我的组件' && <Space split={<Divider type="vertical" />}>
                    {/*<Button type="secondary" status="success" style={{ borderRadius: 4 }}>生成组件</Button>*/}
                    <Button
                      type="outline"
                      style={{ borderRadius: 4 }}
                      onClick={() => setImportModalVisible(true)}
                    >
                      导入组件
                    </Button>
                    <Button type="primary" style={{ borderRadius: 4 }} onClick={() => {
                      setSelectComponent(null);
                      setVisible(true);
                    }}>+
                      新增组件</Button>
                  </Space>}
                </div>
              </div>
              {/*数据列表*/}
              <div className={styles['comp-list-list']}>
                <Table
                  columns={columns}
                  data={componentData}
                  loading={loading}
                  pagination={false}
                  scroll={{ x: 1500, y: 'calc(100vh - 380px)' }}
                  border={{
                    wrapper: true,
                    cell: true
                  }}
                />
                <div className={styles['pagination-container']}>
                  <Pagination
                    current={pagination.current}
                    pageSize={pagination.size}
                    total={pagination.total}
                    onChange={handlePageChange}
                  />
                </div>
              </div>
            </>
          )}

          {selectedItem === '组件审核' && (
            <CompAudit />
          )}
        </div>
      </div>

      {/*新增弹窗*/}
      <AddComponentModal
        visible={visible}
        baseInfo={selectComponent}
        setVisible={(visible) => {
          setVisible(visible);
          // 当关闭模态框时重置模式为create
          if (!visible) {
            setMode('create');
          }
        }}
        onReFresh={fetchComponentData}
        mode={mode} // 传递模式
        permission={selectedItem === '协同组件' && selectComponent ? selectComponent.permission : 'write'} // 传递权限
      />

      {/*发布组件弹窗*/}
      <PublishComponentModal
        visible={publishModalVisible}
        componentInfo={selectedPublishComponent}
        onCancel={() => {
          setPublishModalVisible(false);
          setSelectedPublishComponent(null);
        }}
        onSuccess={() => {
          fetchComponentData();
        }}
      />

      {/*导入组件弹窗*/}
      <ImportComponentModal
        visible={importModalVisible}
        onCancel={handleImportCancel}
        onOk={handleImportConfirm}
        onFileSelect={handleImportFileSelect}
        componentInfo={importComponentInfo}
        loading={importLoading}
      />

      {/*分享协作弹窗*/}
      <ShareCollaborationModal
        visible={shareModalVisible}
        componentInfo={shareComponent}
        isReadOnly={selectedItem === '协同组件'} // 协同组件tab下为只读模式
        currentPermission={selectedItem === '协同组件' && shareComponent ? shareComponent.permission : undefined} // 传递当前用户权限
        onCancel={() => {
          setShareModalVisible(false);
          setShareComponent(null);
        }}
        onSuccess={() => {
          // 协作者变更后可以选择刷新列表或其他操作
        }}
      />

      {/* 审核历史弹窗 */}
      <Modal
        title={`审核历史 - ${currentReviewComponent?.name || ''}`}
        visible={historyModalVisible}
        onCancel={() => setHistoryModalVisible(false)}
        footer={null}
        style={{ width: '90%', maxWidth: 1400, minWidth: 800 }}
      >
        <div style={{ minHeight: 400 }}>
          <Table
            columns={[
              {
                title: '组件名称',
                dataIndex: 'name',
                width: 150,
                render: (_, record: any) => record.main?.name || '-'
              },
              {
                title: '分类',
                dataIndex: 'componentClassify',
                width: 120,
                render: (_, record: any) => record.main?.componentClassify || '-'
              },
              {
                title: '组件标识',
                dataIndex: 'identifier',
                width: 180,
                render: (_, record: any) => record.main?.identifier || '-'
              },
              {
                title: '组件版本',
                dataIndex: 'componentVersion',
                width: 100,
                render: (_, record: any) => record.main?.componentVersion ? `v${record.main.componentVersion}` : '-'
              },
              {
                title: '发布状态',
                dataIndex: 'publicStatus',
                width: 120,
                render: (_, record: any) => {
                  const status = record.main?.publicStatus;
                  const statusMap = {
                    '-1': { text: '未发布', color: 'orange' },
                    0: { text: '未发布', color: 'orange' },
                    1: { text: '已发布', color: 'green' },
                    2: { text: '审核中', color: 'arcoblue' },
                    3: { text: '审核被拒', color: 'red' }
                  };
                  const statusInfo = statusMap[status] || { text: '未知', color: 'gray' };
                  return <Tag color={statusInfo.color}>{statusInfo.text}</Tag>;
                }
              },
              {
                title: '组件评分',
                dataIndex: 'stars',
                width: 200,
                render: (_, record: any) => {
                  const stars = record.main?.stars;
                  if (stars < 0) return <span style={{ color: '#999' }}>暂无评分</span>;
                  return <Rate disabled allowHalf value={stars} />;
                }
              },
              {
                title: '审核人',
                dataIndex: 'reviewUserName',
                width: 120,
                render: (_, record: any) => record.main?.reviewUserName || '-'
              },
              {
                title: '审核结果',
                dataIndex: 'reviewOpinion',
                render: (_, record: any) => record.main?.reviewOpinion || '-'
              }
            ]}
            data={historyData}
            loading={historyLoading}
            pagination={false}
            scroll={{ x: 1600, y: 500 }}
            border={{
              wrapper: true,
              cell: true
            }}
          />
        </div>
      </Modal>

      <Modal
        title={'下架组件'}
        visible={showOffSaleModal}
        style={{ width: '45%' }}
        onCancel={() => {
          setSelectedItem(null);
          setShowOffSaleModal(false);
        }}
        footer={[
          <Button key="cancel" onClick={() => setShowOffSaleModal(false)}>
            取消
          </Button>,
          <Button key="offshelf" type="primary" onClick={() => {
            componentOffSaleHandler(false);
          }}>
            仅下架组件
          </Button>,
          <Button key="stopAndOffshelf" type="primary" status="danger" onClick={() => {
            componentOffSaleHandler(true);
          }}>
            停止线上实例并下架组件
          </Button>
        ]}
      >
        <p>下架后该组件状态为编码中，不可继续新增实例等。</p>
        <p> 该组件存在线上部署的实例，可继续使用原有的代码逻辑继续运行，是否需要同步停止所有线上实例？</p>
      </Modal>
    </>
  );
};

export default GlobalVarContainer;