import React, { useState, useRef, useEffect, useMemo, useCallback, memo } from 'react';
import { ResizeBox, Tabs, Message, Spin, Table, TableColumnProps, Button } from '@arco-design/web-react';
import { IconCheckCircleFill, IconLoading, IconCloseCircleFill, IconLeft } from '@arco-design/web-react/icon';
import FlowEditor from '@/pages/flowEditor/index';
import { getInstanceDefinition } from '@/api/appIns';
import { formatSeconds } from '@/utils/common';
import dayjs from 'dayjs';
import styles from './index.module.less';

const TabPane = Tabs.TabPane;

// 使用 memo 包装 FlowEditor，防止不必要的重新渲染
const MemoizedFlowEditor = memo(({ flowData, instanceId }: { flowData: any; instanceId: string }) => {
  return (
    <FlowEditor
      key={instanceId}
      initialData={flowData}
      useDefault={true}
      readOnly={true}
    />
  );
}, (prevProps, nextProps) => {
  // 自定义比较函数：只有当 instanceId 变化时才重新渲染
  return prevProps.instanceId === nextProps.instanceId;
});

interface LogMessage {
  id: number;
  type: string;
  message: string;
  timestamp: string;
}

interface RuntimeData {
  [key: string]: any;
}

interface InstanceCanvasProps {
  instanceData: any; // 实例数据
  title?: string; // 实例标题
  onBack?: () => void; // 返回回调
}

const InstanceCanvas: React.FC<InstanceCanvasProps> = ({ instanceData, title, onBack }) => {
  const [activeTab, setActiveTab] = useState('1');
  const [logBarExpanded, setLogBarExpanded] = useState(true);
  const [logContainerHeight, setLogContainerHeight] = useState('250px');
  const [runtimeLogs, setRuntimeLogs] = useState<LogMessage[]>([]);
  const [runtimeData, setRuntimeData] = useState<RuntimeData>({});
  const [flowData, setFlowData] = useState<any>(null); // 流程数据
  const [nodeStatusMap, setNodeStatusMap] = useState<Record<string, string>>({}); // 节点状态映射
  const [loading, setLoading] = useState(false); // 加载状态
  const resizeBoxRef = useRef<HTMLDivElement>(null);
  const flowDataRef = useRef<any>(null); // 使用 ref 来存储 flowData，避免重复设置

  // 获取实例定义数据
  const fetchInstanceDefinition = useCallback(async () => {
    if (!instanceData?.id) return;

    setLoading(true);
    try {
      const res: any = await getInstanceDefinition(instanceData.id);
      if (res.code === 200 && res.data) {

        const components = res.data.main?.flow?.components;
        // 包装数据格式，使其符合 FlowEditor 的期望
        // FlowEditor 使用 useDefault=true 时，会调用 projectFlowHandle
        // projectFlowHandle 期望 initialData?.main?.components 或 initialData?.components
        if (components && typeof components === 'object') {
          // 转换连接格式：将单 $ 转换为 $$
          const convertedComponents = Object.entries(components).reduce((acc, [nodeId, nodeConfig]: [string, any]) => {
            const converted = { ...nodeConfig };

            // 转换 apiDownstream
            if (converted.apiDownstream && Array.isArray(converted.apiDownstream)) {
              converted.apiDownstream = converted.apiDownstream.map((targetArray: string[]) => {
                if (Array.isArray(targetArray)) {
                  return targetArray.map((target: string) => {
                    if (typeof target === 'string' && target.includes('$') && !target.includes('$$')) {
                      return target.replace('$', '$$');
                    }
                    return target;
                  });
                }
                return targetArray;
              });
            }

            // 转换 apiUpstream
            if (converted.apiUpstream && Array.isArray(converted.apiUpstream)) {
              converted.apiUpstream = converted.apiUpstream.map((sourceArray: string[]) => {
                if (Array.isArray(sourceArray)) {
                  return sourceArray.map((source: string) => {
                    if (typeof source === 'string' && source.includes('$') && !source.includes('$$')) {
                      return source.replace('$', '$$');
                    }
                    return source;
                  });
                }
                return sourceArray;
              });
            }

            acc[nodeId] = converted;
            return acc;
          }, {} as any);

          const newFlowData = {
            components: convertedComponents,
            main: {
              components: convertedComponents
            }
          };

          // 只在数据真正变化时才更新
          if (!flowDataRef.current) {
            flowDataRef.current = newFlowData;
            setFlowData(newFlowData);
          }
        }

        // 处理运行日志和节点状态
        if (res.data.main?.nodeLogs && Array.isArray(res.data.main.nodeLogs) && res.data.main.nodeLogs.length > 0) {
          const logs = res.data.main.nodeLogs.map((log: any, index: number) => ({
            id: index,
            type: 'runtime',
            message: log.runLog || '',
            timestamp: new Date(log.startTime).toLocaleString('zh-CN'),
            nodeId: log.nodeId,
            nodeName: log.name,
            duration: log.duration,
            state: log.state
          }));
          setRuntimeLogs(logs);

          // 构建节点状态映射
          const statusMap: Record<string, string> = {};
          res.data.main.nodeLogs.forEach((log: any) => {
            // state: 1=成功(success), 0=运行中(running), -1=失败(failed)
            if (log.state === 1) {
              statusMap[log.nodeId] = 'success';
            } else if (log.state === -1) {
              statusMap[log.nodeId] = 'failed';
            } else if (log.state === 0) {
              statusMap[log.nodeId] = 'running';
            }
          });
          setNodeStatusMap(statusMap);
        }

        // 处理运行数据（input/output）
        if (res.data.main?.nodeLogs && Array.isArray(res.data.main.nodeLogs) && res.data.main.nodeLogs.length > 0) {
          const dataMap: RuntimeData = {};
          res.data.main.nodeLogs.forEach((log: any) => {
            if (log.input || log.output) {
              dataMap[log.nodeId] = {
                nodeName: log.name,
                input: log.input || {},
                output: log.output || {},
                duration: log.duration,
                startTime: log.startTime,
                endTime: log.endTime,
                state: log.state === 1 ? '成功' : log.state === -1 ? '失败' : '运行中'
              };
            }
          });
          setRuntimeData(dataMap);
        }
      }
      else {
        Message.error(res.msg || '获取实例数据失败');
      }
    } catch (error) {
      console.error('获取实例定义失败:', error);
      Message.error('获取实例数据失败');
    } finally {
      setLoading(false);
    }
  }, [instanceData?.id]);

  // 当 instanceData 变化时，重新获取数据
  useEffect(() => {
    flowDataRef.current = null; // 重置 ref
    fetchInstanceDefinition();
  }, [instanceData?.id, fetchInstanceDefinition]);

  // 处理 Tab 点击事件
  const handleTabClick = (key: string) => {
    if (key === activeTab) {
      setLogBarExpanded(!logBarExpanded);
    }
    else {
      setActiveTab(key);
      setLogBarExpanded(true);
    }
  };

  // 当展开/收起状态改变时，更新元素样式
  useEffect(() => {
    if (resizeBoxRef.current) {
      resizeBoxRef.current.style.height = logBarExpanded ? logContainerHeight : '0px';
    }
  }, [logBarExpanded, logContainerHeight]);

  // 处理 ResizeBox 手动调整大小事件
  const handleResize = useCallback((e: MouseEvent, size: { width: number; height: number }) => {
    if (size.height <= 40) {
      setLogBarExpanded(false);
    }
    else {
      setLogBarExpanded(true);
      setLogContainerHeight(`${size.height}px`);
    }
  }, []);

  // 使用 useMemo 创建带有节点状态的 flowData
  const flowDataWithStatus = useMemo(() => {
    if (!flowData || Object.keys(nodeStatusMap).length === 0) {
      return flowData;
    }

    // 深拷贝 flowData 并注入节点状态
    const componentsWithStatus = { ...flowData.components };
    Object.keys(nodeStatusMap).forEach((nodeId) => {
      if (componentsWithStatus[nodeId]) {
        componentsWithStatus[nodeId] = {
          ...componentsWithStatus[nodeId],
          status: nodeStatusMap[nodeId],
          isStatusVisible: true // 显示状态指示器
        };
      }
    });

    const result = {
      ...flowData,
      components: componentsWithStatus,
      main: {
        ...flowData.main,
        components: componentsWithStatus
      }
    };

    return result;
  }, [flowData, nodeStatusMap]);

  // 渲染运行日志内容
  const renderRuntimeLogs = () => {
    return (
      <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
        {runtimeLogs.length === 0 ? (
          <p>暂无运行日志</p>
        ) : (
          runtimeLogs.map((log: any) => (
            <div key={log.id} style={{ marginBottom: '8px', padding: '4px', borderBottom: '1px solid #eee' }}>
              <div style={{ fontSize: '12px', color: '#999' }}>
                {log.timestamp}
              </div>
              <div style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
                {log.message}
              </div>
            </div>
          ))
        )}
      </div>
    );
  };

  // 定义运行数据表格列
  const dataColumns: TableColumnProps[] = [
    {
      title: '节点',
      dataIndex: 'nodeName',
      width: 120
    },
    {
      title: '时间',
      width: 160,
      render: (_: any, record: any) => (
        <>
          <span>开始 {dayjs(record.startTime).format('MM-DD HH:mm:ss')}</span>
          <br />
          {record.endTime > 0 && <span>结束 {dayjs(record.endTime).format('MM-DD HH:mm:ss')}</span>}
        </>
      )
    },
    {
      title: '耗时',
      dataIndex: 'duration',
      width: 80,
      render: (_: any, record: any) => (
        record.duration > 1000 ?
          <span>{formatSeconds((record.duration / 1000).toString())}</span> :
          <span>{record.duration}ms</span>
      )
    },
    {
      title: '状态',
      dataIndex: 'state',
      width: 60,
      align: 'center',
      render: (_: any, record: any) => (
        <>
          {record.state === 1 && <IconCheckCircleFill fontSize={24} style={{ color: 'rgb(var(--green-6))' }} />}
          {record.state === 0 && <IconLoading fontSize={24} style={{ color: 'rgb(var(--arcoblue-4))' }} />}
          {record.state === -1 && <IconCloseCircleFill fontSize={24} style={{ color: 'rgb(var(--red-6))' }} />}
        </>
      )
    },
    {
      title: '输入参数',
      dataIndex: 'input',
      width: 200,
      render: (_: any, record: any) => (
        <div style={{ wordBreak: 'break-all', whiteSpace: 'pre-wrap' }}>{JSON.stringify(record.input)}</div>
      )
    },
    {
      title: '输出参数',
      dataIndex: 'output',
      width: 200,
      render: (_: any, record: any) => (
        <div style={{ wordBreak: 'break-all', whiteSpace: 'pre-wrap' }}>{JSON.stringify(record.output)}</div>
      )
    }
  ];

  // 渲染运行数据内容
  const renderRuntimeData = () => {
    // 将 runtimeData 对象转换为表格数据数组
    const tableData = Object.entries(runtimeData).map(([nodeId, data]: [string, any]) => ({
      key: nodeId,
      nodeId,
      nodeName: data.nodeName,
      startTime: data.startTime || 0,
      endTime: data.endTime || 0,
      duration: data.duration,
      state: data.state === '成功' ? 1 : data.state === '失败' ? -1 : 0,
      input: data.input,
      output: data.output
    }));

    return (
      <div style={{ padding: '10px', height: 'calc(100% - 40px)', overflowY: 'auto' }}>
        {tableData.length === 0 ? (
          <p>暂无运行数据</p>
        ) : (
          <Table
            columns={dataColumns}
            data={tableData}
            tableLayoutFixed
            scroll={{ x: 'max-content' }}
            pagination={false}
          />
        )}
      </div>
    );
  };

  return (
    <div className={styles.instanceCanvas}>
      {/* 顶部标题栏 */}
      {title && (
        <div className={styles.header}>
          {onBack && (
            <Button
              type="text"
              icon={<IconLeft />}
              onClick={onBack}
              className={styles.backButton}
            >
              返回列表
            </Button>
          )}
          <h2 className={styles.title}>实例名称：{title}</h2>
        </div>
      )}

      {/* 主内容区域 */}
      <div className={styles.mainContent}>
        {/* 流程画布 */}
        <div className={styles.canvasArea}>
          {loading ? (
            <div className={styles.loadingContainer}>
              <Spin size={40} />
              <span style={{ marginTop: '16px', color: 'var(--color-text-3)' }}>加载中...</span>
            </div>
          ) : flowDataWithStatus ? (
            <MemoizedFlowEditor
              flowData={flowDataWithStatus}
              instanceId={instanceData?.id || 'instance-canvas'}
            />
          ) : (
            <div className={styles.emptyContainer}>
              <span>暂无流程数据</span>
            </div>
          )}
        </div>

        {/* 底部日志栏 */}
        <div className={styles.logBarContainer}>
          <ResizeBox
            directions={['top']}
            onMoving={handleResize}
            style={{
              minHeight: '0px',
              maxHeight: '80vh',
              height: logBarExpanded ? logContainerHeight : '0px',
              transition: logBarExpanded ? 'none' : 'height 0.3s ease'
            }}
          >
            <div ref={resizeBoxRef} className={styles.logBar}>
              <Tabs
                activeTab={activeTab}
                type="line"
                className={styles.logTabs}
                onClickTab={handleTabClick}
              >
                <TabPane key="1" title="运行日志">
                  {renderRuntimeLogs()}
                </TabPane>
                <TabPane key="2" title="运行数据">
                  {renderRuntimeData()}
                </TabPane>
              </Tabs>
            </div>
          </ResizeBox>

          {/* Tab 标签栏（始终可见） */}
          {!logBarExpanded && (
            <div className={styles.collapsedTabBar}>
              <Tabs
                activeTab={activeTab}
                type="line"
                className={styles.collapsedTabs}
                onClickTab={handleTabClick}
              >
                <TabPane key="1" title="运行日志" />
                <TabPane key="2" title="运行数据" />
              </Tabs>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default InstanceCanvas;