import React, { useMemo } from 'react';
import { useStore } from '@xyflow/react';
import styles from '@/components/FlowEditor/node/style/baseOther.module.less';
import NodeContent from '@/pages/flowEditor/components/nodeContentApp';
import NodeStatusIndicator, { NodeStatus } from '@/components/FlowEditor/NodeStatusIndicator';
import { useStore as useFlowStore } from '@xyflow/react';

const AppNode = ({ data, id }: { data: any; id: string }) => {
  const title = data.title || '应用节点';

  // 生成随机背景色，使用useMemo确保颜色只在节点首次创建时生成一次
  const backgroundColor = useMemo(() => {
    const colors = ['#e59428', '#4a90e2', '#7b68ee', '#50c878', '#ff6347', '#9370db', '#00bfff', '#ff8c00'];
    return colors[Math.floor(Math.random() * colors.length)];
  }, []);

  // 获取节点选中状态 - 适配React Flow v12 API
  const isSelected = useStore((state) =>
    state.nodeLookup.get(id)?.selected || false
  );

  // 获取节点运行状态
  const nodeStatus: NodeStatus = useFlowStore((state) => 
    (state.nodeLookup.get(id)?.data?.status as NodeStatus) || 'waiting'
  );
  
  // 获取运行状态可见性
  const isStatusVisible = useFlowStore((state) => 
    !!state.nodeLookup.get(id)?.data?.isStatusVisible
  );

  return (
    <div className={`${styles['node-container']} ${isSelected ? styles.selected : ''}`}>
      <div className={styles['node-header']} style={{ backgroundColor }}>
        {title}
        <NodeStatusIndicator status={nodeStatus} isVisible={isStatusVisible} />
      </div>
      <NodeContent data={data} />
    </div>
  );
};

export default AppNode;