import React, { useMemo } from 'react';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import { Handle, Position, useStore } from '@xyflow/react';
import { deserializeValue, formatDataType, isJSON } from '@/utils/common';
import cronstrue from 'cronstrue/i18n';
import { useSelector } from 'react-redux';

interface NodeContentData {
  parameters?: {
    dataIns?: any[];
    dataOuts?: any[];
    apiIns?: any[];
    apiOuts?: any[];
  };
  showFooter?: boolean;
  type?: string;
  id?: string;

  [key: string]: any;
}

// 定义通用的句柄样式
const handleStyles = {
  mainSource: {
    background: '#2290f6',
    width: '8px',
    height: '8px',
    border: '2px solid #fff',
    boxShadow: '0 0 4px rgba(0,0,0,0.2)'
  },
  mainTarget: {
    background: '#2290f6',
    width: '8px',
    height: '8px',
    border: '2px solid #fff',
    boxShadow: '0 0 4px rgba(0,0,0,0.2)'
  },
  data: {
    background: '#555',
    width: '6px',
    height: '6px',
    border: '1px solid #fff',
    boxShadow: '0 0 2px rgba(0,0,0,0.2)'
  }
};

// 渲染特殊节点（开始/结束节点）的句柄
const renderSpecialNodeHandles = (isStartNode: boolean, isEndNode: boolean, dataIns: any[], dataOuts: any[], apiIns: any[], apiOuts: any[]) => {
  const renderStartNodeHandles = () => {
    if (!isStartNode) return null;

    return (
      <>
        {apiOuts.map((_, index) => (
          <Handle
            key={`start-output-handle-${index}`}
            type="source"
            position={Position.Right}
            id={apiOuts[index].name || `start-output-${index}`}
            style={{
              ...handleStyles.mainSource,
              top: `${35 + index * 20}px`
            }}
          />
        ))}
        {dataOuts.length > 0 && dataOuts.map((_, index) => (
          <Handle
            key={`output-handle-${index}`}
            type="source"
            position={Position.Right}
            id={dataOuts[index].name || `output-${index}`}
            style={{
              ...handleStyles.data,
              top: `${70 + apiIns.length * 20 + index * 20}px`
            }}
          />
        ))}
      </>
    );
  };

  const renderEndNodeHandles = () => {
    if (!isEndNode) return null;

    return (
      <>
        {apiIns.map((_, index) => (
          <Handle
            key={`end-input-handle-${index}`}
            type="target"
            position={Position.Left}
            id={apiIns[index].name || `end-input-${index}`}
            style={{
              ...handleStyles.mainTarget,
              top: `${35 + index * 20}px`
            }}
          />
        ))}
        {dataIns.length > 0 && dataIns.map((_, index) => (
          <Handle
            key={`input-handle-${index}`}
            type="target"
            position={Position.Left}
            id={dataIns[index].name || `input-${index}`}
            style={{
              ...handleStyles.data,
              top: `${70 + apiIns.length * 20 + index * 20}px`
            }}
          />
        ))}
      </>
    );
  };

  return (
    <>
      {renderStartNodeHandles()}
      {renderEndNodeHandles()}
    </>
  );
};

// 获取连接到特定 API 句柄的 edges
const getConnectedEdgesForHandle = (edges: any[], nodeId: string, handleId: string, handleType: 'source' | 'target') => {
  return edges.filter(edge => {
    if (handleType === 'target') {
      // 检查目标节点ID和目标句柄ID都匹配
      return edge.target === nodeId && edge.targetHandle === handleId;
    }
    else {
      // 检查源节点ID和源句柄ID都匹配
      return edge.source === nodeId && edge.sourceHandle === handleId;
    }
  });
};

// 根据 apiIns 中的 fieldIns/fieldOuts 获取对应的 dataIns/dataOuts
const getDataFieldsForApi = (apiItem: any, dataFields: any[], type: string) => {
  if (!apiItem.fieldIns && !apiItem.fieldOuts) return [];

  const fieldNames = type === 'in' ? apiItem.fieldIns : apiItem.fieldOuts;
  return fieldNames
    .map((fieldName: string) => dataFields.find(df => df.name === fieldName || df.id === fieldName))
    .filter(Boolean);
};

// 渲染普通节点的句柄
const renderRegularNodeHandles = (
  dataIns: any[],
  dataOuts: any[],
  apiIns: any[],
  apiOuts: any[],
  connectedDataIns: any[],
  connectedDataOuts: any[]
) => {
  return (
    <>
      {/* API 输出连接点 */}
      {apiOuts.map((_, index) => (
        <Handle
          key={`api-output-handle-${index}`}
          type="source"
          position={Position.Right}
          id={apiOuts[index].name || apiOuts[index].id || `output-${index}`}
          style={{
            ...handleStyles.mainSource,
            top: `${37 + index * 22}px`
          }}
        />
      ))}

      {/* API 输入连接点 */}
      {apiIns.map((_, index) => (
        <Handle
          key={`api-input-handle-${index}`}
          type="target"
          position={Position.Left}
          id={apiIns[index].name || apiIns[index].id || `input-${index}`}
          style={{
            ...handleStyles.mainTarget,
            top: `${37 + index * 22}px`
          }}
        />
      ))}

      {/* Data 输入参数连接端点 - 只渲染已连接API的data字段 */}
      {connectedDataIns.map((dataIn, index) => (
        <Handle
          key={`data-input-handle-${dataIn.name || dataIn.id || index}`}
          type="target"
          position={Position.Left}
          id={dataIn.name || dataIn.id || `data-input-${index}`}
          style={{
            ...handleStyles.data,
            top: `${65 + (apiIns.length) * 22 + index * 22}px`
          }}
        />
      ))}

      {/* Data 输出参数连接端点 - 只渲染已连接API的data字段 */}
      {connectedDataOuts.map((dataOut, index) => (
        <Handle
          key={`data-output-handle-${dataOut.name || dataOut.id || index}`}
          type="source"
          position={Position.Right}
          id={dataOut.name || dataOut.id || `data-output-${index}`}
          style={{
            ...handleStyles.data,
            top: `${65 + (apiIns.length) * 22 + index * 22}px`
          }}
        />
      ))}
    </>
  );
};

const formatFooter = (data: any, eventListOld = []) => {
  try {
    switch (data?.type) {
      case 'WAIT':
        const { duration } = deserializeValue(data.customDef);
        const hours = Math.floor(duration / 3600);
        const minutes = Math.floor((duration % 3600) / 60);
        const seconds = Math.floor(duration % 60);
        return `${hours}小时${minutes}分钟${seconds}秒`;
      case 'CYCLE':
        const { intervalSeconds } = deserializeValue(data.customDef);
        return cronstrue.toString(intervalSeconds, { locale: 'zh_CN' });
      case 'EVENTSEND':
      case 'EVENTLISTENE':
        const parsedData = isJSON(data.customDef) ? JSON.parse(data.customDef) : null;
        // 数据是JSON字符串，标识是接口回来的，数据是普通对象标识是当前操作
        if (parsedData) {
          const { eventId, topic, name } = parsedData;
          if (topic.includes('**empty**')) return '';
          const currentEvent = eventListOld.length > 0 ? eventListOld.find(item => item.eventId === eventId) : { name: '无' };
          return `事件: ${currentEvent.name}`;
        }
        else {
          const { name, topic } = data.customDef;
          if (topic.includes('**empty**')) return '';
          return `事件: ${name}`;
        }
      case 'BASIC':
      case 'BASIC_LOOP':
        return data.compIdentifier ? `当前实例:${data.compIdentifier}` : '';
      default:
        return '';
    }
  } catch (e) {
    console.log(e);
  }
};

const formatTitle = (text) => {
  return text === 'start' || text === 'end' ? '' : text;
};

const NodeContent = ({ data }: { data: NodeContentData }) => {
  const { eventListOld } = useSelector((state) => state.ideContainer);

  // 使用 useStore 获取 edges 信息
  const edges = useStore((state) => state.edges);

  const apiIns = data.parameters?.apiIns || [];
  const apiOuts = data.parameters?.apiOuts || [];
  const dataIns = data.parameters?.dataIns || [];
  const dataOuts = data.parameters?.dataOuts || [];
  const showFooter = formatFooter(data.component) || false;
  const footerData = (showFooter && data.component) || {};
  const nodeId = data.id;

  // 判断节点类型
  const isStartNode = data.type === 'start';
  const isEndNode = data.type === 'end';
  const isSpecialNode = isStartNode || isEndNode;

  // 获取连接到当前节点 API 句柄的 data 字段
  const connectedDataFields = useMemo(() => {
    const connectedIns: any[] = [];
    const connectedOuts: any[] = [];

    // 通过api数据获取对应的data输入输出
    apiIns.forEach(apiIn => {
      const handleIdIn = apiIn.name || apiIn.id;
      const hasConnectionIn = getConnectedEdgesForHandle(edges, nodeId, handleIdIn, 'target').length > 0;

      if (hasConnectionIn) {
        const relatedDataIn = getDataFieldsForApi(apiIn, dataIns, 'in');
        connectedIns.push(...relatedDataIn);

        const relatedDataOut = getDataFieldsForApi(apiIn, dataOuts, 'out');
        connectedOuts.push(...relatedDataOut);
      }
    });

    return { connectedIns, connectedOuts };
  }, [edges, nodeId, apiIns, apiOuts, dataIns, dataOuts]);

  return (
    <>
      {/*content栏-api部分*/}
      <div className={styles['node-api-box']}>
        <div className={styles['node-content-api']}>
          {apiIns.length > 0 && (
            <div className={styles['node-inputs']}>
              {apiIns.map((input, index) => (
                <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
                  {formatTitle(input.desc || input.id || input.name)}
                </div>
              ))}
            </div>
          )}

          {apiOuts.length > 0 && (
            <div className={styles['node-outputs']}>
              {apiOuts.map((output, index) => (
                <div key={output.id || `output-${index}`} className={styles['node-output-label']}>
                  {output.desc}
                </div>
              ))}
            </div>
          )}
        </div>
      </div>

      {/* Data 区域 - 仅当有连接的 API 时显示对应的 data 字段 */}
      {(connectedDataFields.connectedIns.length > 0 || connectedDataFields.connectedOuts.length > 0) && (
        <>
          {/*分割*/}
          <div className={styles['node-split-line']}></div>

          {/*content栏-data部分*/}
          <div className={styles['node-data-box']}>
            <div className={styles['node-content']}>
              {/* Data 输入 */}
              {connectedDataFields.connectedIns.length > 0 && (
                <div className={styles['node-inputs']}>
                  {connectedDataFields.connectedIns.map((input, index) => (
                    <div key={input.id || `input-${index}`} className={styles['node-input-label']}>
                      <span className={styles['node-data-type']}>
                        {input.name || input.id || `输入${index + 1}`} {formatDataType(input.dataType)}
                      </span>
                    </div>
                  ))}
                </div>
              )}

              {connectedDataFields.connectedIns.length === 0 && (
                <div className={styles['node-inputs']}>
                  <div key={`input-${Date.now()}`} className={styles['node-input-label']}>
                      <span className={styles['node-data-type']}>
                      </span>
                  </div>
                </div>
              )}

              {/* Data 输出 */}
              {connectedDataFields.connectedOuts.length > 0 && !isEndNode && (
                <div className={styles['node-outputs']}>
                  {connectedDataFields.connectedOuts.map((output, index) => (
                    <div key={output.id || `output-${index}`} className={styles['node-output-label']}>
                      <span className={styles['node-data-type']}>
                        {formatDataType(output.dataType)} {output.name || output.id || `输出${index + 1}`}
                      </span>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </>
      )}

      {/*footer栏*/}
      {showFooter && (
        <div className={styles['node-footer']}>
          {formatFooter(footerData, eventListOld)}
        </div>
      )}

      {/* 根据节点类型渲染不同的句柄 */}
      {isSpecialNode
        ? renderSpecialNodeHandles(isStartNode, isEndNode, dataIns, dataOuts, apiIns, apiOuts)
        : renderRegularNodeHandles(
          dataIns,
          dataOuts,
          apiIns,
          apiOuts,
          connectedDataFields.connectedIns,
          connectedDataFields.connectedOuts
        )}
    </>
  );
};

export default NodeContent;