import React, { useEffect, useState } from 'react';
import { Collapse, Space, Tag, Button, Table, TableColumnProps, Modal, Dropdown, Menu } from '@arco-design/web-react';
import { IconDown, IconToBottom, IconEye } from '@arco-design/web-react/icon';
import styles from './style/collapseList.module.less';
import ListNode from '@/pages/componentDevelopment/componentDeployment/listNode';
import AddModal from '@/pages/componentDevelopment/componentDeployment/addModal';
import { componentOnSale, componentOffSale, getDeployList } from '@/api/componentDeploy';
import { runStatusConstant, runStatusDic } from '@/const/isdp/componentDeploy';

const CollapseItem = Collapse.Item;

interface CollapseListProps {
  searchKeyword?: string;
  runStatus?: string;
}

const CollapseList: React.FC<CollapseListProps> = ({ searchKeyword, runStatus }) => {
  const [collapses, setCollapses] = useState([]);
  const [visible, setVisible] = useState(false);
  const [showOffSaleModal, setShowOffSaleModal] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null); // 选中的折叠面板数据
  const [expandedItem, setExpandedItem] = useState(null); // 当前展开的折叠面板数据
  const [addItem, setAddItem] = useState(null); // 点击新增实例按钮时记录当前信息

  // 获取组件列表
  const getList = async () => {
    const params: any = {
      current: 1,
      size: 10
    };

    // 添加搜索关键词
    if (searchKeyword) {
      params.name = searchKeyword;
    }

    // 添加运行状态筛选
    if (runStatus) {
      params.runStatus = runStatus;
    }

    const res: any = await getDeployList(params);
    if (res.code === 200) setCollapses(res.data.records.reverse());
  };

  // 上架组件
  const componentOnSaleHandler = async (value) => {
    const res: any = await componentOnSale({ identifier: value.identifier });
    if (res.code === 200) getList();
    else {
      Modal.error({
        title: '上架失败',
        content: res.message
      });
    }
  };

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

  // 查看组件
  const handleViewComponent = (item: any) => {
    // 先触发跳转事件
    const navigateEvent = new CustomEvent('navigateToTab', {
      detail: {
        path: 'componentList'
      }
    });
    document.dispatchEvent(navigateEvent);

    // 延迟触发搜索事件，确保页面已经切换
    setTimeout(() => {
      const searchEvent = new CustomEvent('componentListSearch', {
        detail: {
          searchKeyword: item.name
        }
      });
      window.dispatchEvent(searchEvent);
    }, 100);
  };


  useEffect(() => {
    getList();
  }, [searchKeyword, runStatus]);

  // 折叠面板头部
  const headerNode = (item) => {
    const getRunStatus = () => {
      return runStatusDic.find((v) => v.value === runStatusConstant[item.runStatus]) || {
        color: 'gray',
        label: '未知'
      };
    };

    return (
      <div className={styles['header-node']}>
        <Space size={7} style={{ marginRight: 50 }}>
          <img src="https://picsum.photos/200/300"
               style={{ width: 50, height: 50, borderRadius: 6, overflow: 'hidden' }} />
          <div>{item.name}</div>
        </Space>

        <Space size={10}>
          <Tag>{item.componentClassify}</Tag>
          <Tag>{item.codeLanguage}</Tag>
          <Tag color={getRunStatus().color}>{getRunStatus().label}</Tag>
          <div className={styles['flex-box']}>
            <img src={'/icons/countIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
            <span style={{ color: '#A2A2AB' }}> 实例数:</span>
            <span style={{ color: '#A2A2AB' }}>{item.instanceCount}</span>
          </div>
        </Space>
      </div>
    );
  };

  // 折叠面板右侧的额外节点
  const extraNode = (item) => {
    return (
      <div className={styles['extra-node']}>
        <Space size={20}>
          {/*新增实例*/}
          {item.runStatus === 'RUN' && (
            <div className={styles['flex-box']} onClick={() => {
              setAddItem(item);
              setVisible(true);
            }}>
              <img src={'/icons/addIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
              <span style={{ color: '#A2A2AB' }}>新增实例</span>
            </div>
          )}
          {/*下架组件*/}
          {item.runStatus === 'RUN' && (
            <div className={`${styles['flex-box']} ${styles['custom-red']}`} onClick={() => {
              setSelectedItem(item);
              setShowOffSaleModal(true);
            }}>
              <img src={'/icons/removedIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
              <span>下架组件</span>
            </div>
          )}
          {/*上架组件*/}
          {item.runStatus === 'STOP' && (
            <div className={`${styles['flex-box']} ${styles['custom-blue']}`}
                 onClick={() => componentOnSaleHandler(item)}>
              <img src={'/icons/removedIcon.png'}
                   style={{ width: 16, height: 16, marginRight: 5, transform: 'rotate(180deg)' }} />
              <span>上架组件</span>
            </div>
          )}
          {/*更多操作*/}
          <Dropdown
            droplist={
              <Menu>
                <Menu.Item key="viewComponent" onClick={() => handleViewComponent(item)}>
                  <span style={{ color: '#3491FA' }}>
                    <IconEye />
                    查看组件
                  </span>
                </Menu.Item>
              </Menu>
            }
            position="br"
          >
            <div className={styles['flex-box']} style={{ cursor: 'pointer' }}>
              <img src={'/icons/moreIcon.png'} style={{ width: 16, height: 16, marginRight: 5 }} />
              <span style={{ color: '#A2A2AB' }}>更多操作</span>
              <IconDown style={{ fontSize: 12, marginLeft: 4, color: '#A2A2AB' }} />
            </div>
          </Dropdown>
        </Space>
      </div>
    );
  };

  return (
    <>
      <div className={styles['collapse-list']}>
        <Collapse
          expandIconPosition={'right'}
          bordered={false}
          onChange={(key, keys, e) => {
            // 当展开某个折叠面板时，记录当前展开的 item 数据
            if (keys && keys.length > 0) {
              // 获取最后一个展开的 key（当前操作的 key）
              const expandedKey = keys[keys.length - 1];
              const expandedIndex = parseInt(expandedKey, 10);
              const currentItem = collapses[expandedIndex];
              setExpandedItem(currentItem);
            }
            else {
              // 所有面板都折叠时，清空 expandedItem
              setExpandedItem(null);
            }
          }}
        >
          {collapses.map((item, index) => (
            <CollapseItem
              key={item.identifier}
              header={headerNode(item)}
              name={index.toString()}
              extra={extraNode(item)}
            >
              <ListNode componentData={item} />
            </CollapseItem>
          ))}
        </Collapse>
      </div>

      <AddModal
        addItem={addItem}
        visible={visible}
        setVisible={setVisible}
        onSuccess={getList}
      />

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