import type { ComponentType, JSXElement } from '../../jsx';
import { Defs, getElementBounds, Group, Path, Rect, Text } from '../../jsx';
import type { RelationEdgeDatum } from '../../types';
import {
  BtnAdd,
  BtnRemove,
  BtnsGroup,
  ItemLabel,
  ItemsGroup,
} from '../components';
import { FlexLayout } from '../layouts';
import {
  createArrowElements,
  getColorPrimary,
  getEdgePathD,
  getLabelPosition,
  getNodesAnchors,
  getPaletteColor,
  getTangentAngle,
  getThemeColors,
} from '../utils';
import { registerStructure } from './registry';
import type { BaseStructureProps } from './types';

/**
 * 泳道内的节点数据
 */
export interface InteractionChildDatum {
  id: string;
  label?: string;
  desc?: string;
  icon?: string;
  /**
   * 手动指定节点的垂直顺序（层级），默认为数组索引
   * 相同 step 的节点会处于同一高度
   */
  step?: number;
}

/**
 * 泳道数据（顶层item）
 * label 作为泳道标题
 * children 作为泳道内的节点列表
 */
export interface InteractionLaneDatum {
  label: string;
  desc?: string;
  icon?: string;
  children?: InteractionChildDatum[];
}

/**
 * 交互流程的数据结构
 * items: 泳道列表，每个泳道有 label 和 children
 * relations: 节点间的关系
 */
export interface InteractionFlowData {
  title?: string;
  desc?: string;
  items?: InteractionLaneDatum[];
  relations?: RelationEdgeDatum[];
}

// 创建节点ID到位置的映射
interface NodeLayout {
  x: number;
  y: number;
  width: number;
  height: number;
  centerX: number;
  centerY: number;
  laneIndex: number;
  rowIndex: number;
}

export interface SequenceInteractionProps extends BaseStructureProps {
  laneGap?: number;
  nodeGap?: number;
  lifelineWidth?: number;
  arrowWidth?: number;
  showLifeline?: boolean;
  padding?: number;
  arrowType?: 'arrow' | 'triangle';
  showLaneHeader?: boolean;
  laneHeaderHeight?: number;
  edgeStyle?: 'solid' | 'dashed';
  animated?: boolean;
  edgeColorMode?: 'solid' | 'gradient';
}

const DEFAULT_LANE_GAP = 350;
const DEFAULT_NODE_GAP = 80;
const DEFAULT_LIFELINE_WIDTH = 2;
const DEFAULT_ARROW_WIDTH = 2;
const DEFAULT_PADDING = 40;
const DEFAULT_LANE_HEADER_HEIGHT = 60;
const DEFAULT_ITEM_WIDTH = 120;
const DEFAULT_ITEM_HEIGHT = 50;

const FONT_SIZE = 14;
const ARROW_SIZE = 14;
const CORNER_RADIUS_NODE = 6;
const LIFELINE_MASK_GAP = 2;
const LANE_PADDING = 60;

const BTN_HALF_SIZE = 12;
const BTN_MARGIN = 10;
const BTN_LANE_ADD_Gap = 20;
const BOTTOM_AREA_HEIGHT = 60;

const LANE_HEADER_MARGIN = 10;
const LABEL_OFFSET_Y = 10;
const FIRST_GAP = 20;

const PATH_OFFSET = 40;

const calculateEdgePath = (
  fromId: string,
  toId: string,
  fromLayout: NodeLayout,
  toLayout: NodeLayout,
  edgeMap: Map<string, RelationEdgeDatum[]>,
  fromOutDegree: number,
  toInDegree: number,
  fromInDegree: number,
  toOutDegree: number,
) => {
  const fromAnchors = getNodesAnchors(fromLayout);
  const toAnchors = getNodesAnchors(toLayout);

  const reverseKey = `${toId}-${fromId}`;
  const hasReverse = edgeMap.has(reverseKey);

  const isStartLane = fromLayout.laneIndex === 0;

  let points: [number, number][] = [];

  if (fromId === toId) {
    // 1. 自连接 (A->A)
    //  RT -> Right Arc -> RB
    const start = isStartLane ? fromAnchors.LT : fromAnchors.RT;
    const end = isStartLane ? fromAnchors.LB : fromAnchors.RB;
    const offset = isStartLane ? -PATH_OFFSET : PATH_OFFSET;

    points = [
      [start.x, start.y],
      [start.x + offset, start.y],
      [end.x + offset, end.y],
      [end.x, end.y],
    ];
  } else if (fromLayout.laneIndex === toLayout.laneIndex) {
    // 2. 同泳道回环 (Bottom -> Top)
    const start = isStartLane ? fromAnchors.LB : fromAnchors.RB;
    const end = isStartLane ? toAnchors.LT : toAnchors.RT;
    const offset = isStartLane ? -PATH_OFFSET : PATH_OFFSET;

    points = [
      [start.x, start.y],
      [start.x + offset, start.y],
      [end.x + offset, end.y],
      [end.x, end.y],
    ];
  } else {
    // 3. 互连 & 单向连接
    const isToRight = toLayout.centerX > fromLayout.centerX;
    const isToLeft = toLayout.centerX < fromLayout.centerX;

    const isSameY = Math.abs(fromLayout.centerY - toLayout.centerY) < 1;
    const isTargetBelow = toLayout.centerY > fromLayout.centerY;
    const isTargetStrictRight = toLayout.x >= fromLayout.x + fromLayout.width;

    let startPoint: { x: number; y: number };
    let endPoint: { x: number; y: number };

    // 优先处理同行情况
    if (isSameY) {
      startPoint = isToRight ? fromAnchors.RC : fromAnchors.LC;
      endPoint = isToRight ? toAnchors.LC : toAnchors.RC;
    }
    // 处理互连情况 (避免重叠，使用对角锚点)
    else if (hasReverse) {
      if (isTargetBelow) {
        startPoint = isToRight ? fromAnchors.RB : fromAnchors.LT;
        endPoint = isToRight ? toAnchors.LT : toAnchors.RB;
      } else {
        startPoint = isToRight ? fromAnchors.RT : fromAnchors.LT;
        endPoint = isToRight ? toAnchors.LB : toAnchors.RB;
      }
    }
    // 处理普通单向连接
    else {
      // 1. 确定终点 (End Point)
      if (toInDegree === 1 && toOutDegree === 0) {
        endPoint = isToRight ? toAnchors.LC : toAnchors.RC;
      } else if (isTargetBelow) {
        endPoint = isTargetStrictRight ? toAnchors.LT : toAnchors.RT;
      } else {
        endPoint = isTargetStrictRight ? toAnchors.LB : toAnchors.RB;
      }

      // 2. 确定起点 (Start Point)
      if (fromOutDegree === 1 && fromInDegree === 0) {
        startPoint = isToRight ? fromAnchors.RC : fromAnchors.LC;
      } else if (isToRight) {
        startPoint = fromAnchors.RB;
      } else if (isToLeft) {
        startPoint = fromAnchors.LB;
      } else {
        startPoint = fromAnchors.RB;
      }
    }

    if (hasReverse && !isSameY) {
      // 1. 跨行（不同 Y 轴）的双向连接
      const startArr: [number, number] = [startPoint.x, startPoint.y];
      const endArr: [number, number] = [endPoint.x, endPoint.y];

      const cx = (startArr[0] + endArr[0]) / 2;
      const cy = startArr[1];

      points = [startArr, [cx, cy], endArr];
    } else if (hasReverse && isSameY) {
      // 2. 同行（相同 Y 轴）的双向连接
      const startArr: [number, number] = [startPoint.x, startPoint.y];
      const endArr: [number, number] = [endPoint.x, endPoint.y];

      const midX = (startArr[0] + endArr[0]) / 2;
      const midY = (startArr[1] + endArr[1]) / 2;

      const offsetY = 30;
      const isL2R = startArr[0] < endArr[0];
      const cpY = isL2R ? midY - offsetY : midY + offsetY;

      points = [startArr, [midX, cpY], endArr];
    } else {
      // 3. 普通单向连接
      points = [
        [startPoint.x, startPoint.y],
        [endPoint.x, endPoint.y],
      ];
    }
  }

  return { points };
};

export const SequenceInteractionFlow: ComponentType<
  SequenceInteractionProps
> = (props) => {
  // 生成实例级唯一ID以避免多图表冲突
  const instanceId = Math.random().toString(36).slice(2, 9);

  const {
    Title,
    Item,
    data,
    laneGap = DEFAULT_LANE_GAP,
    nodeGap = DEFAULT_NODE_GAP,
    lifelineWidth = DEFAULT_LIFELINE_WIDTH,
    arrowWidth = DEFAULT_ARROW_WIDTH,
    showLifeline = true,
    padding = DEFAULT_PADDING,
    arrowType = 'triangle',
    showLaneHeader = true,
    laneHeaderHeight = DEFAULT_LANE_HEADER_HEIGHT,
    edgeStyle = 'solid',
    animated = false,
    edgeColorMode = 'gradient',
    options,
  } = props;

  // 获取主题颜色
  const themeColors = getThemeColors(options.themeConfig, options);
  const colorText = themeColors?.colorText ?? '#333333';
  const colorBg = themeColors?.colorBg ?? '#ffffff';
  const colorBorder = themeColors?.colorTextSecondary ?? '#e0e0e0';

  const flowData = data as InteractionFlowData;
  const { title, desc, items = [], relations = [] } = flowData;

  const titleContent = Title ? <Title title={title} desc={desc} /> : null;

  // 空状态处理
  if (!items || items.length === 0) {
    const btnBounds = getElementBounds(<BtnAdd indexes={[0]} />);
    return (
      <FlexLayout
        id="infographic-container"
        flexDirection="column"
        justifyContent="center"
        alignItems="center"
      >
        {titleContent}
        <Group>
          <BtnsGroup>
            <BtnAdd
              indexes={[0]}
              x={-btnBounds.width / 2}
              y={-btnBounds.height / 2}
            />
          </BtnsGroup>
          <Text
            x={0}
            y={btnBounds.height / 2 + BTN_MARGIN}
            width={200}
            height={40}
            fontSize={14}
            alignHorizontal="center"
            alignVertical="middle"
            fill={themeColors?.colorTextSecondary ?? '#999'}
          >
            暂无数据
          </Text>
        </Group>
      </FlexLayout>
    );
  }

  // 泳道列表（每个顶层item是一个泳道）
  const lanes = items as InteractionLaneDatum[];

  // 计算最大行数（所有泳道中 children 的最大 step 或 索引），至少为1
  let maxStep = 0;
  lanes.forEach((lane) => {
    lane.children?.forEach((child, index) => {
      const currentStep = child.step ?? index;
      if (currentStep > maxStep) {
        maxStep = currentStep;
      }
    });
  });
  const maxRows = Math.max(1, maxStep + 1);

  const nodeLayoutById = new Map<string, NodeLayout>();

  // 测量Item尺寸
  const designItem = options.design?.item;
  const itemConfig = Array.isArray(designItem) ? designItem[0] : designItem;

  // 使用类型安全的访问或默认值
  let itemWidth = itemConfig?.width ?? DEFAULT_ITEM_WIDTH;
  let itemHeight = itemConfig?.height ?? DEFAULT_ITEM_HEIGHT;

  // 构建一个扁平化的节点列表用于Item渲染
  const flatNodes: {
    datum: InteractionChildDatum;
    laneIndex: number;
    rowIndex: number;
  }[] = [];
  lanes.forEach((lane, laneIndex) => {
    lane.children?.forEach((child, rowIndex) => {
      flatNodes.push({ datum: child, laneIndex, rowIndex });
    });
  });

  // 尝试通过采样修正尺寸 (仅当配置未指定时)
  if (
    (!itemConfig?.width || !itemConfig?.height) &&
    Item &&
    flatNodes.length > 0
  ) {
    const sampleNode = flatNodes[0];
    const sampleBounds = getElementBounds(
      <Item
        indexes={[0]}
        datum={sampleNode.datum}
        positionH="center"
        positionV="middle"
      />,
    );
    // 确保尺寸有效
    if (sampleBounds.width > 0) itemWidth = sampleBounds.width;
    if (sampleBounds.height > 0) itemHeight = sampleBounds.height;
  }

  // 测量relations标签的最大宽度，自动调整泳道间距
  let maxLabelWidth = 0;
  relations.forEach((relation) => {
    if (relation.label) {
      const labelBounds = getElementBounds(
        <Text fontSize={FONT_SIZE} fontWeight="normal">
          {relation.label}
        </Text>,
      );
      maxLabelWidth = Math.max(maxLabelWidth, labelBounds.width);
    }
  });

  // 动态计算泳道宽度：需要兼顾节点宽度、标签宽度需求以及用户设置的间距
  const baseWidth = itemWidth + LANE_PADDING;
  const labelWidthRequirement = itemWidth + maxLabelWidth + LANE_PADDING * 2;
  const laneWidth = Math.max(laneGap, baseWidth, labelWidthRequirement);

  // 计算行高度和总高度
  const headerOffset = showLaneHeader ? laneHeaderHeight : 0;
  const contentHeight =
    FIRST_GAP + maxRows * itemHeight + Math.max(0, maxRows - 1) * nodeGap;
  const totalHeight =
    headerOffset + contentHeight + padding * 2 + BOTTOM_AREA_HEIGHT;
  const totalWidth = laneWidth * lanes.length + padding * 2;

  // 计算每个泳道的中心X坐标
  const getLaneCenterX = (laneIndex: number) => {
    return padding + laneWidth / 2 + laneIndex * laneWidth;
  };

  // 计算每行的Y坐标
  const getRowY = (rowIndex: number) => {
    return (
      padding +
      headerOffset +
      FIRST_GAP +
      rowIndex * (itemHeight + nodeGap) +
      itemHeight / 2
    );
  };

  const itemElements: JSXElement[] = [];
  const decorElements: JSXElement[] = [];
  const defsElements: JSXElement[] = [];
  const btnElements: JSXElement[] = [];

  // 绘制泳道标题
  if (showLaneHeader) {
    lanes.forEach((lane, laneIndex) => {
      const centerX = getLaneCenterX(laneIndex);
      const laneColor = getPaletteColor(options, [laneIndex]);
      const laneThemeColors = getThemeColors(
        { colorPrimary: laneColor },
        options,
      );

      // 泳道标题背景
      if (Item) {
        decorElements.push(
          <Item
            indexes={[laneIndex]}
            datum={{
              label: lane.label,
              icon: lane.icon,
              desc: lane.desc,
            }}
            x={centerX - itemWidth / 2}
            y={padding}
            width={itemWidth}
            height={laneHeaderHeight - LANE_HEADER_MARGIN}
            themeColors={laneThemeColors}
            positionH="center"
          />,
        );

        // 泳道标题删除按钮 (右上角)
        btnElements.push(
          <BtnRemove
            indexes={[laneIndex]}
            x={centerX + itemWidth / 2 - BTN_MARGIN}
            y={padding - BTN_MARGIN}
          />,
        );
      }
    });
  }

  // 绘制节点（按行对齐）
  lanes.forEach((lane, laneIndex) => {
    lane.children?.forEach((child, rowIndex) => {
      // 使用 step 属性作为行索引，如果未定义则回退到数组索引
      const effectiveRowIndex = child.step ?? rowIndex;

      const centerX = getLaneCenterX(laneIndex);
      const centerY = getRowY(effectiveRowIndex);

      const x = centerX - itemWidth / 2;
      const y = centerY - itemHeight / 2;

      // 保存节点布局信息
      nodeLayoutById.set(child.id, {
        x,
        y,
        width: itemWidth,
        height: itemHeight,
        centerX,
        centerY,
        laneIndex,
        rowIndex: effectiveRowIndex,
      });

      const nodeColor = getPaletteColor(options, [laneIndex]);
      const nodeThemeColors = getThemeColors(
        { colorPrimary: nodeColor },
        options,
      );

      // 构造类似 hierarchy-tree 的 _originalIndex
      const originalIndex = [laneIndex, rowIndex];
      // 附加到数据上，确保 Item 组件能正确识别
      const childWithIndex = {
        ...child,
        _originalIndex: originalIndex,
      };

      if (Item) {
        itemElements.push(
          <Item
            indexes={originalIndex}
            datum={childWithIndex}
            data={data}
            x={x}
            y={y}
            positionH="center"
            positionV="middle"
            themeColors={nodeThemeColors}
          />,
        );

        // 节点删除按钮 (底部剧中)
        btnElements.push(
          <BtnRemove
            indexes={originalIndex}
            x={x + itemWidth / 2 - BTN_MARGIN}
            y={y + itemHeight + BTN_MARGIN / 2}
          />,
        );
      } else {
        // 默认节点渲染
        decorElements.push(
          <Rect
            x={x}
            y={y}
            width={itemWidth}
            height={itemHeight}
            fill={nodeThemeColors?.colorPrimaryBg ?? colorBg}
            stroke={nodeColor}
            strokeWidth={2}
            rx={CORNER_RADIUS_NODE}
            data-element-type="shape"
          />,
        );

        if (child.label) {
          decorElements.push(
            <Text
              x={x}
              y={y}
              width={itemWidth}
              height={itemHeight}
              fontSize={14}
              fontWeight="bold"
              alignHorizontal="center"
              alignVertical="middle"
              fill={colorText}
            >
              {child.label}
            </Text>,
          );
        }
      }
    });

    // 每个泳道底部的添加节点按钮
    const childCount = lane.children?.length ?? 0;

    // 找出当前泳道最大的 step
    let lastEffectRowIndex = -1;
    lane.children?.forEach((child, index) => {
      const s = child.step ?? index;
      if (s > lastEffectRowIndex) lastEffectRowIndex = s;
    });

    const lastRowY =
      lastEffectRowIndex >= 0
        ? getRowY(lastEffectRowIndex)
        : padding + headerOffset;
    const addNodeY =
      childCount > 0
        ? lastRowY + itemHeight / 2 + BTN_LANE_ADD_Gap
        : lastRowY + FIRST_GAP + BTN_MARGIN;
    const centerX = getLaneCenterX(laneIndex);

    btnElements.push(
      <BtnAdd
        indexes={[laneIndex, childCount]}
        x={centerX - BTN_HALF_SIZE}
        y={addNodeY}
      />,
    );
  });

  // 绘制生命线（使用 mask 挖空节点区域，避免虚线穿透半透明节点）
  if (showLifeline) {
    // 预先按泳道分组节点，避免每条泳道都遍历全部节点
    const nodeRectsByLane = new Map<
      number,
      { x: number; y: number; width: number; height: number }[]
    >();
    nodeLayoutById.forEach((layout) => {
      let list = nodeRectsByLane.get(layout.laneIndex);
      if (!list) {
        list = [];
        nodeRectsByLane.set(layout.laneIndex, list);
      }
      list.push({
        x: layout.x,
        y: layout.y,
        width: layout.width,
        height: layout.height,
      });
    });

    lanes.forEach((_lane, laneIndex) => {
      const centerX = getLaneCenterX(laneIndex);
      const startY = padding + headerOffset;
      const endY = totalHeight - padding;

      const laneNodeRects = nodeRectsByLane.get(laneIndex) ?? [];

      // 如果该泳道有节点，创建 mask 来挖空节点区域
      let lifelineMaskAttr: string | undefined;
      if (laneNodeRects.length > 0) {
        const maskId = `lifeline-mask-${instanceId}-${laneIndex}`;
        defsElements.push(
          <mask
            id={maskId}
            maskUnits="userSpaceOnUse"
            x={0}
            y={0}
            width={totalWidth}
            height={totalHeight}
          >
            {/* 白色底：显示所有线条 */}
            <Rect
              x={0}
              y={0}
              width={totalWidth}
              height={totalHeight}
              fill="white"
            />
            {/* 黑色块：在节点位置挖空生命线，上下各留 LIFELINE_MASK_GAP 间距 */}
            {laneNodeRects.map((rect) => (
              <Rect
                x={rect.x}
                y={rect.y - LIFELINE_MASK_GAP}
                width={rect.width}
                height={rect.height + LIFELINE_MASK_GAP * 2}
                fill="black"
              />
            ))}
          </mask>,
        );
        lifelineMaskAttr = `url(#${maskId})`;
      }

      decorElements.push(
        <Path
          d={`M ${centerX} ${startY} L ${centerX} ${endY}`}
          stroke={colorBorder}
          strokeWidth={lifelineWidth}
          strokeDasharray="5,5"
          fill="none"
          data-element-type="shape"
          mask={lifelineMaskAttr}
        />,
      );

      // 绘制生命线末端箭头（实心）
      decorElements.push(
        ...createArrowElements(
          centerX,
          endY,
          Math.PI / 2,
          'triangle',
          colorBorder,
          1,
          10,
        ),
      );
    });
  }

  // 添加新泳道按钮 (最右侧)
  const lastLaneRightX = getLaneCenterX(lanes.length - 1) + laneWidth / 2;
  const newLaneX =
    lanes.length > 0 ? lastLaneRightX + BTN_LANE_ADD_Gap : padding;
  const newLaneY = padding + headerOffset / 2 - BTN_HALF_SIZE; // 垂直居中于标题栏
  btnElements.push(
    <BtnAdd indexes={[lanes.length]} x={newLaneX} y={newLaneY} />,
  );

  // 预处理边，方便快速查找反向边
  const edgeMap = new Map<string, RelationEdgeDatum[]>();
  // 统计入度和出度
  const inDegreeMap = new Map<string, number>();
  const outDegreeMap = new Map<string, number>();

  relations.forEach((r) => {
    const key = `${r.from}-${r.to}`;
    if (!edgeMap.has(key)) edgeMap.set(key, []);
    edgeMap.get(key)?.push(r);

    const fromId = String(r.from);
    const toId = String(r.to);
    if (fromId === toId) return;
    outDegreeMap.set(fromId, (outDegreeMap.get(fromId) || 0) + 1);
    inDegreeMap.set(toId, (inDegreeMap.get(toId) || 0) + 1);
  });

  // 绘制消息箭头
  relations.forEach((relation, relIndex) => {
    const fromId = String(relation.from);
    const toId = String(relation.to);

    // 使用精确的节点布局信息
    const fromLayout = nodeLayoutById.get(fromId);
    const toLayout = nodeLayoutById.get(toId);

    if (!fromLayout || !toLayout) return;

    // 颜色处理
    const fromColor =
      getPaletteColor(options, [fromLayout.laneIndex]) || '#000000';
    const toColor = getPaletteColor(options, [toLayout.laneIndex]) || '#000000';
    const themePrimary = getColorPrimary(options);

    // 确定线条和箭头颜色
    let edgeStroke = themePrimary || '#999999';
    let targetArrowColor = themePrimary || '#999999';
    let sourceArrowColor = themePrimary || '#999999';

    // 如果是渐变模式，使用渐变色
    const gradientId = `arrow-gradient-${instanceId}-${relIndex}`;
    if (edgeColorMode === 'gradient') {
      edgeStroke = `url(#${gradientId})`;
      targetArrowColor = toColor;
      sourceArrowColor = fromColor;
    }

    const { points } = calculateEdgePath(
      fromId,
      toId,
      fromLayout,
      toLayout,
      edgeMap,
      outDegreeMap.get(fromId) || 0,
      inDegreeMap.get(toId) || 0,
      inDegreeMap.get(fromId) || 0,
      outDegreeMap.get(toId) || 0,
    );

    let maskId: string | undefined;
    let labelRenderNode: JSXElement | null = null;

    if (relation.label) {
      const labelPoint = getLabelPosition(points);

      if (labelPoint) {
        const labelX = labelPoint[0];
        const labelY = labelPoint[1] - LABEL_OFFSET_Y;

        // 预先计算 Label 的尺寸
        const labelBounds = getElementBounds(
          <ItemLabel
            indexes={[relIndex]}
            fontSize={FONT_SIZE}
            fontWeight="normal"
          >
            {relation.label}
          </ItemLabel>,
        );

        const bgX = labelX - labelBounds.width / 2;
        const bgY = labelY - labelBounds.height / 2;
        const bgW = labelBounds.width;
        const bgH = labelBounds.height;

        maskId = `edge-mask-${instanceId}-${relIndex}`;

        // 将 Mask 推入 defsElements
        // 逻辑：白色区域显示(全图)，黑色区域隐藏(标签位置)
        defsElements.push(
          <mask
            id={maskId}
            maskUnits="userSpaceOnUse"
            x={0}
            y={0}
            width={totalWidth}
            height={totalHeight}
          >
            {/* 1. 全屏白色底，保证线条其他部分显示 */}
            <Rect
              x={0}
              y={0}
              width={totalWidth}
              height={totalHeight}
              fill="white"
            />
            {/* 2. 标签位置黑色块，将线条“挖空” */}
            <Rect x={bgX} y={bgY} width={bgW} height={bgH} fill="black" />
          </mask>,
        );

        labelRenderNode = (
          <ItemLabel
            indexes={[relIndex]}
            x={labelX - labelBounds.width / 2}
            y={labelY - labelBounds.height / 2}
            width={labelBounds.width}
            height={labelBounds.height}
            fontSize={FONT_SIZE}
            fontWeight="normal"
            alignHorizontal="center"
            alignVertical="middle"
            fill={colorText}
          >
            {relation.label}
          </ItemLabel>
        );
      }
    }

    // 生成路径字符串
    const pathD = getEdgePathD(points);
    if (edgeColorMode === 'gradient') {
      const startPoint = points[0];
      const endPoint = points[points.length - 1];
      defsElements.push(
        <linearGradient
          id={gradientId}
          gradientUnits="userSpaceOnUse"
          x1={startPoint[0]}
          y1={startPoint[1]}
          x2={endPoint[0]}
          y2={endPoint[1]}
        >
          <stop offset="0%" stopColor={fromColor} />
          <stop offset="100%" stopColor={toColor} />
        </linearGradient>,
      );
    }

    decorElements.push(
      <Path
        d={pathD}
        stroke={edgeStroke}
        strokeWidth={arrowWidth}
        fill="none"
        data-element-type="shape"
        // 如果存在 maskId，则应用遮罩
        mask={maskId ? `url(#${maskId})` : undefined}
        strokeDasharray={
          relation.lineStyle === 'solid'
            ? undefined
            : (relation.lineStyle ?? edgeStyle) === 'dashed' || animated
              ? '5,5'
              : undefined
        }
      >
        {animated && (
          <animate
            attributeName="stroke-dashoffset"
            from="10"
            to="0"
            dur="1s"
            repeatCount="indefinite"
          />
        )}
      </Path>,
    );

    // 绘制箭头头部 (箭头不需要遮罩，保持原样)
    const effectiveArrowSize = ARROW_SIZE;
    const direction = relation.direction ?? 'forward';

    const arrowConfigs = [
      {
        show: direction === 'forward' || direction === 'both',
        angle: getTangentAngle(points, 1),
        point: points[points.length - 1],
        color: targetArrowColor,
      },
      {
        show: direction === 'both',
        angle: getTangentAngle(points, 0) + Math.PI,
        point: points[0],
        color: sourceArrowColor,
      },
    ];

    arrowConfigs.forEach((cfg) => {
      if (cfg.show) {
        decorElements.push(
          ...createArrowElements(
            cfg.point[0],
            cfg.point[1],
            cfg.angle,
            relation.arrowType ?? arrowType,
            cfg.color,
            arrowWidth,
            effectiveArrowSize,
          ),
        );
      }
    });

    if (labelRenderNode) {
      decorElements.push(labelRenderNode);
    }
  });

  return (
    <FlexLayout
      id="infographic-container"
      flexDirection="column"
      justifyContent="center"
      alignItems="center"
    >
      {Title ? <Title title={title} desc={desc} /> : null}
      <Group>
        <Rect x={0} y={0} width={totalWidth} height={totalHeight} fill="none" />
        <Defs>{defsElements}</Defs>
        <Group>{decorElements}</Group>
        <ItemsGroup>{itemElements}</ItemsGroup>
        <BtnsGroup>{btnElements}</BtnsGroup>
      </Group>
    </FlexLayout>
  );
};

registerStructure('sequence-interaction', {
  component: SequenceInteractionFlow,
  composites: ['title', 'item'],
});