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

const Group = Radio.Group;

const GlobalVarContainer = () => {
  const [selectedItem, setSelectedItem] = useState('我的组件');
  const [selectComponent, setSelectComponent] = useState(null);
  const [componentData, setComponentData] = useState<ComponentItem[]>([]);
  const [pagination, setPagination] = useState({
    totalCount: 0,
    pageSize: 10,
    totalPage: 0,
    currPage: 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 [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 dispatch = useDispatch();

  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'
    },
    {
      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'
    },
    {
      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}
          onHandlePublishComponent={(row) => {
            setSelectedPublishComponent(row);
            setPublishModalVisible(true);
          }}
          onGoToReview={(row) => {
            // TODO: 实现查看审核逻辑
            console.log('Go to review', 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) => {
            // TODO: 实现分享协作逻辑
            console.log('Share collaboration', row);
          }}
          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 === '协同组件') {
      // 当切换菜单或搜索条件变化时，重置到第一页
      setPagination({
        ...pagination,
        currPage: 1
      });
      // 延迟执行搜索，确保分页参数已更新
      setTimeout(() => {
        fetchComponentData();
      }, 0);
    }
    else if (selectedItem === '组件审核') {
      fetchComponentReview();
    }
  }, [selectedItem, searchValue]);

  // 监听来自其他页面的搜索关键词
  useEffect(() => {
    const handleNavigateWithSearch = (event: any) => {
      const { searchKeyword } = event.detail || {};
      if (searchKeyword) {
        // 设置搜索值
        setTimeout(() => {
          setSearchValue(searchKeyword);
        }, 500);
      }
    };

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

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

  // 下架组件
  const componentOffSaleHandler = async (stopInstance: boolean) => {
    const res: any = await componentOffSale({ identifier: offSaleComponent.identifier, stopInstance });
    if (res.code === 200) {
      setShowOffSaleModal(false);
      setOffSaleComponent(null);
      fetchComponentReview();
    }
    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 fetchComponentData = async (extraParams: any = {}) => {
    setLoading(true);
    const apiMap = {
      '我的组件': getMyComponentList,
      '协同组件': getCooperationComponentList
    };
    try {
      const params = {
        currPage: pagination.currPage,
        pageSize: pagination.pageSize,
        ...extraParams
      };

      // 如果有搜索关键词，则添加到参数中
      if (searchValue.trim()) {
        params.name = searchValue.trim();
      }

      // 如果选择了组件状态，则添加到参数中
      if (componentStatus) {
        params.componentStatus = componentStatus.toUpperCase();
      }

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

      setComponentData(res.data.list);
      setPagination({
        totalCount: res.data.totalCount,
        pageSize: res.data.pageSize,
        totalPage: res.data.totalPage,
        currPage: res.data.currPage
      });
    } catch (error) {
      console.error('获取组件列表失败:', error);
      Message.error('获取组件列表失败');
    } finally {
      setLoading(false);
    }
  };

  // 获取组件审核列表数据
  const fetchComponentReview = async () => {
    const res: any = await getReviewGroupByNew({
      queryType: 'create',
      current: pagination.currPage,
      size: pagination.pageSize
    });

    console.log('组件审核列表:', res);
  };

  const handlePageChange = (page: number, pageSize?: number) => {
    setPagination({
      ...pagination,
      currPage: page,
      pageSize: pageSize || pagination.pageSize
    });
  };

  // 修改分页变化处理函数
  useEffect(() => {
    if (selectedItem === '我的组件' || selectedItem === '协同组件') {
      fetchComponentData();
    }
  }, [pagination.currPage, pagination.pageSize, componentStatus]);

  // 搜索处理函数
  const searchHandle = () => {
    // 重置到第一页并触发搜索
    setPagination({
      ...pagination,
      currPage: 1
    });
    fetchComponentData();
  };

  // 重置搜索
  const resetSearch = () => {
    setSearchValue('');
    setComponentStatus(''); // 同时重置组件状态筛选
    setPagination({
      ...pagination,
      currPage: 1
    });
    fetchComponentData();
  };

  // 修改导出组件的回调函数
  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']}>
          {/*头部*/}
          <div className={styles['comp-list-header']}>
            <div className={styles['comp-list-search']}>
              <Space>
                <Input
                  prefix={<IconSearch />}
                  placeholder={'输入组件名称搜索'}
                  style={{ width: 236 }}
                  value={searchValue}
                  onChange={(value) => setSearchValue(value)}
                  onPressEnter={searchHandle}
                />
                <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>
          {/*数据列表*/}
          {selectedItem !== '组件审核' && (<div className={styles['comp-list-list']}>
            <Table
              columns={columns}
              data={componentData}
              loading={loading}
              pagination={false}
              scroll={{ x: 1500, y: 'calc(100vh - 280px)' }}
              border={{
                wrapper: true,
                cell: true
              }}
            />
            <div className={styles['pagination-container']}>
              <Pagination
                current={pagination.currPage}
                pageSize={pagination.pageSize}
                total={pagination.totalCount}
                onChange={handlePageChange}
              />
            </div>
          </div>)}
        </div>
      </div>

      {/*新增弹窗*/}
      <AddComponentModal
        visible={visible}
        baseInfo={selectComponent}
        setVisible={(visible) => {
          setVisible(visible);
          // 当关闭模态框时重置模式为create
          if (!visible) {
            setMode('create');
          }
        }}
        onReFresh={fetchComponentData}
        mode={mode} // 传递模式
      />

      {/*发布组件弹窗*/}
      <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}
      />

      <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;