import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import {
  ReactFlow,
  Background,
  Controls,
  MiniMap,
  Panel,
  useNodesState,
  useEdgesState,
  useReactFlow,
  ConnectionMode,
  SelectionMode,
  type Connection,
  type Edge,
  type Node,
  type OnNodesChange,
  type OnSelectionChangeFunc,
} from '@xyflow/react';
import '@xyflow/react/dist/style.css';
import type { Theme } from '../../types/index';
import type { LogicNode, ConditionDSL } from '../../utils/strategyTypes';
import {
  addChild,
  deleteNode,
  mergeAtRoot,
  makeNode,
  makeNodeOptionsFromPalette,
  updateNode,
  type DefType,
} from '../../utils/strategyEditorShared';
import {
  START_NODE_ID,
  applyEdgeHandles,
  buildConnectionFromPositions,
  canAcceptPaletteAsParent,
  connectionSidesFromDrop,
  disconnectTreeEdge,
  extractNode,
  findNodeAtFlowPosition,
  findNodeInTree,
  FLOW_NODE_H,
  FLOW_NODE_W,
  getNodeDimensions,
  isDescendant,
  isOrphanNode,
  isPaletteConnectTarget,
  isStartNodeId,
  isValidStrategyConnection,
  resolveStrategyConnection,
  resolveOrphanDragConnection,
  logicNodeToFlow,
  computeAutoFlowLayout,
  spawnPositionNearAnchor,
  subtreeToFlatOrphans,
  type EdgeHandleBinding,
} from '../../utils/strategyFlowLayout';
import {
  createStartNodeId,
  defaultStartMeta,
  DEFAULT_START_CANDLE,
  normalizeStartCandleType,
  type StartNodeMeta,
} from '../../utils/strategyStartNodes';
import { ConditionFlowNode, LogicGateNode, StartNode } from './FlowNodes';
import { StrategyFlowEdge } from './StrategyFlowEdge';
import { edgeDisconnectRef, edgeBindingUpdateRef, layoutFlushRef } from './strategyEditorCallbacks';
import { MultiSelectionDeleteButton } from './MultiSelectionDeleteButton';
import { getMinimapColors } from './minimapTheme';
import {
  loadCanvasInteractionMode,
  saveCanvasInteractionMode,
  type StrategyCanvasInteractionMode,
} from '../../utils/strategyCanvasInteractionStorage';
import type { FlowLayoutChangePayload } from '../../utils/strategyEditorLayoutStorage';

export type FlowLayoutSeed = {
  seedKey: string;
  positions: Record<string, { x: number; y: number }>;
  edgeHandles: Record<string, EdgeHandleBinding>;
};

const nodeTypes = {
  start: StartNode,
  logic: LogicGateNode,
  condition: ConditionFlowNode,
};

const edgeTypes = {
  strategy: StrategyFlowEdge,
};

interface Props {
  theme: Theme;
  root: LogicNode | null;
  orphans: LogicNode[];
  onOrphansChange: (nodes: LogicNode[]) => void;
  def: DefType;
  signalTab: 'buy' | 'sell';
  onChange: (root: LogicNode | null) => void;
  selectedNodeId: string | null;
  onSelectNode: (id: string | null) => void;
  layoutSeed: FlowLayoutSeed;
  onLayoutChange?: (snapshot: FlowLayoutChangePayload) => void;
  startMeta?: Record<string, StartNodeMeta>;
  extraStartIds?: string[];
  extraRoots?: Record<string, LogicNode | null>;
  onStartMetaChange?: (meta: Record<string, StartNodeMeta>) => void;
  onExtraStartIdsChange?: (ids: string[]) => void;
  onExtraRootsChange?: (roots: Record<string, LogicNode | null>) => void;
}

function collectTreeIds(node: LogicNode | null): string[] {
  if (!node) return [];
  const ids = [node.id];
  for (const c of node.children ?? []) ids.push(...collectTreeIds(c));
  return ids;
}

function saveEdgeHandles(
  handles: Map<string, EdgeHandleBinding>,
  edgeId: string,
  conn: Pick<Connection, 'sourceHandle' | 'targetHandle'>,
  lockHandles = false,
) {
  handles.set(edgeId, {
    sourceHandle: conn.sourceHandle,
    targetHandle: conn.targetHandle,
    manual: lockHandles,
    manualSource: lockHandles,
    manualTarget: lockHandles,
  });
}

function applyTreeConnection(
  sourceId: string,
  targetId: string,
  root: LogicNode | null,
  extraRoots: Record<string, LogicNode | null>,
  onChange: (root: LogicNode | null) => void,
  onExtraRootsChange: (roots: Record<string, LogicNode | null>) => void,
) {
  const promoteToStart = (startId: string, node: LogicNode, remainder: LogicNode | null) => {
    if (startId === START_NODE_ID) {
      onChange(remainder ? mergeAtRoot(node, remainder, false) : node);
      return;
    }
    const branch = extraRoots[startId] ?? null;
    onExtraRootsChange({
      ...extraRoots,
      [startId]: branch ? mergeAtRoot(branch, node, false) : node,
    });
  };

  if (isStartNodeId(sourceId)) {
    if (root && (root.id === targetId || findNodeInTree(root, targetId))) {
      const { tree, node } = extractNode(root, targetId);
      if (!node) return;
      onChange(tree);
      promoteToStart(sourceId, node, tree);
      return;
    }
    for (const [sid, branch] of Object.entries(extraRoots)) {
      if (!branch || !findNodeInTree(branch, targetId)) continue;
      const { tree, node } = extractNode(branch, targetId);
      if (!node) return;
      onExtraRootsChange({ ...extraRoots, [sid]: tree });
      promoteToStart(sourceId, node, null);
      return;
    }
    return;
  }

  if (!root) return;
  const sourceNode = findNodeInTree(root, sourceId)
    ?? Object.values(extraRoots).map(br => findNodeInTree(br, sourceId)).find(Boolean);
  if (!sourceNode || !['AND', 'OR', 'NOT'].includes(sourceNode.type)) return;

  if (findNodeInTree(root, targetId)) {
    if (isDescendant(root, targetId, sourceId)) return;
    const { tree: afterRemove, node: moved } = extractNode(root, targetId);
    if (!moved) return;
    onChange(addChild(afterRemove ?? root, sourceId, moved));
    return;
  }

  for (const [sid, branch] of Object.entries(extraRoots)) {
    if (!branch || !findNodeInTree(branch, targetId)) continue;
    if (isDescendant(branch, targetId, sourceId)) return;
    const { tree, node: moved } = extractNode(branch, targetId);
    if (!moved) return;
    onExtraRootsChange({ ...extraRoots, [sid]: tree });
    if (findNodeInTree(root, sourceId)) {
      onChange(addChild(root, sourceId, moved));
    } else {
      const parentBranch = Object.entries(extraRoots).find(([, br]) => br && findNodeInTree(br, sourceId));
      if (parentBranch) {
        const [psid, pbr] = parentBranch;
        onExtraRootsChange({
          ...extraRoots,
          [sid]: tree,
          [psid]: addChild(pbr!, sourceId, moved),
        });
      }
    }
    return;
  }
}

function pruneEdgeHandles(handles: Map<string, EdgeHandleBinding>, edges: Edge[]) {
  const ids = new Set(edges.map(e => e.id));
  for (const id of handles.keys()) {
    if (!ids.has(id)) handles.delete(id);
  }
}

function connectOrphanIntoTree(
  conn: Connection,
  orphan: LogicNode,
  root: LogicNode | null,
  extraRoots: Record<string, LogicNode | null>,
  onChange: (root: LogicNode | null) => void,
  onExtraRootsChange: (roots: Record<string, LogicNode | null>) => void,
): void {
  const sourceId = conn.source!;
  if (isStartNodeId(sourceId)) {
    if (sourceId === START_NODE_ID) {
      onChange(root ? mergeAtRoot(root, orphan, false) : orphan);
      return;
    }
    const branch = extraRoots[sourceId] ?? null;
    onExtraRootsChange({
      ...extraRoots,
      [sourceId]: branch ? mergeAtRoot(branch, orphan, false) : orphan,
    });
    return;
  }
  if (!root) return;
  onChange(addChild(root, sourceId, orphan));
}

function connectOrphanAsParent(
  conn: Connection,
  orphan: LogicNode,
  root: LogicNode | null,
  onChange: (root: LogicNode | null) => void,
): void {
  if (!root) return;
  const { tree, node: moved } = extractNode(root, conn.target!);
  if (!moved) return;
  const isOp = ['AND', 'OR', 'NOT'].includes(orphan.type);
  const combined = { ...orphan, children: [...(orphan.children ?? []), moved] };
  onChange(tree ? mergeAtRoot(tree, combined, isOp) : combined);
}

function StrategyEditorCanvasInner({
  theme,
  root,
  orphans,
  onOrphansChange,
  def,
  signalTab,
  onChange,
  selectedNodeId,
  onSelectNode,
  layoutSeed,
  onLayoutChange,
  startMeta = defaultStartMeta(),
  extraStartIds = [],
  extraRoots = {},
  onStartMetaChange,
  onExtraStartIdsChange,
  onExtraRootsChange,
}: Props) {
  const { fitView, screenToFlowPosition } = useReactFlow();
  const positionsRef = useRef(new Map<string, { x: number; y: number }>());
  const edgeHandlesRef = useRef(new Map<string, EdgeHandleBinding>());
  const structureKeyRef = useRef<string | null>(null);
  const orphanKeyRef = useRef<string | null>(null);
  const layoutEmitTimerRef = useRef<number | null>(null);
  const [interactionMode, setInteractionMode] = useState<StrategyCanvasInteractionMode>(
    () => loadCanvasInteractionMode(),
  );

  const handleInteractionModeChange = useCallback((mode: StrategyCanvasInteractionMode) => {
    setInteractionMode(mode);
    saveCanvasInteractionMode(mode);
  }, []);

  const [nodes, setNodes, onNodesChangeBase] = useNodesState<Node>([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
  const nodesRef = useRef(nodes);
  const edgesRef = useRef(edges);
  nodesRef.current = nodes;
  edgesRef.current = edges;

  const treeStructureKey = useMemo(() => {
    const parts = [collectTreeIds(root).join('|')];
    for (const sid of extraStartIds) parts.push(sid);
    for (const br of Object.values(extraRoots)) parts.push(collectTreeIds(br).join('|'));
    return parts.join('::');
  }, [root, extraStartIds, extraRoots]);
  const orphanKey = useMemo(() => orphans.map(o => o.id).join('|'), [orphans]);

  /** START에서 연결된 트리 전체 (미연결 고아 제외) */
  const treeLinkedIds = useMemo(() => {
    const ids = new Set<string>([START_NODE_ID, ...extraStartIds]);
    for (const id of collectTreeIds(root)) ids.add(id);
    for (const br of Object.values(extraRoots)) {
      for (const id of collectTreeIds(br)) ids.add(id);
    }
    return ids;
  }, [root, extraStartIds, extraRoots]);

  const minimapColors = useMemo(() => getMinimapColors(theme, signalTab), [theme, signalTab]);

  const minimapNodeColor = useCallback((node: Node) => {
    if (isStartNodeId(node.id)) return minimapColors.start;
    if (node.type === 'condition') return minimapColors.condition;
    return minimapColors.logic;
  }, [minimapColors]);

  const minimapNodeStrokeColor = useCallback((node: Node) => {
    if (isStartNodeId(node.id)) return minimapColors.start;
    return minimapColors.stroke;
  }, [minimapColors]);

  const signalTabRef = useRef(signalTab);
  signalTabRef.current = signalTab;

  const emitLayoutChange = useCallback((tab: 'buy' | 'sell') => {
    if (!onLayoutChange) return;
    onLayoutChange({
      tab,
      positions: Object.fromEntries(positionsRef.current),
      edgeHandles: Object.fromEntries(edgeHandlesRef.current),
    });
  }, [onLayoutChange]);

  const scheduleLayoutEmit = useCallback(() => {
    if (!onLayoutChange) return;
    const tabAtSchedule = signalTabRef.current;
    if (layoutEmitTimerRef.current != null) window.clearTimeout(layoutEmitTimerRef.current);
    layoutEmitTimerRef.current = window.setTimeout(() => {
      layoutEmitTimerRef.current = null;
      emitLayoutChange(tabAtSchedule);
    }, 120);
  }, [onLayoutChange, emitLayoutChange]);

  useEffect(() => () => {
    if (layoutEmitTimerRef.current != null) window.clearTimeout(layoutEmitTimerRef.current);
  }, []);

  useEffect(() => {
    positionsRef.current = new Map(Object.entries(layoutSeed.positions));
    edgeHandlesRef.current = new Map(Object.entries(layoutSeed.edgeHandles));
  }, [layoutSeed.edgeHandles, layoutSeed.positions, layoutSeed.seedKey]);

  useEffect(() => {
    layoutFlushRef.current = () => {
      if (layoutEmitTimerRef.current != null) {
        window.clearTimeout(layoutEmitTimerRef.current);
        layoutEmitTimerRef.current = null;
      }
      for (const n of nodesRef.current) {
        positionsRef.current.set(n.id, { x: n.position.x, y: n.position.y });
      }
      emitLayoutChange(signalTabRef.current);
    };
    return () => {
      layoutFlushRef.current = null;
    };
  }, [emitLayoutChange]);

  const handleStartCandleTypesChange = useCallback((startId: string, candleTypes: string[]) => {
    const types = candleTypes.length > 0 ? candleTypes : [DEFAULT_START_CANDLE];
    const normalized = types.map(normalizeStartCandleType);
    onStartMetaChange?.({
      ...startMeta,
      [startId]: { candleTypes: normalized, candleType: normalized[0] },
    });
  }, [startMeta, onStartMetaChange]);

  const handleDeleteStart = useCallback((startId: string) => {
    if (startId === START_NODE_ID) return;
    const branch = extraRoots[startId];
    if (branch) {
      onOrphansChange([...orphans, ...subtreeToFlatOrphans(branch)]);
    }
    onExtraStartIdsChange?.(extraStartIds.filter(id => id !== startId));
    const nextMeta = { ...startMeta };
    delete nextMeta[startId];
    onStartMetaChange?.(nextMeta);
    const nextRoots = { ...extraRoots };
    delete nextRoots[startId];
    onExtraRootsChange?.(nextRoots);
    positionsRef.current.delete(startId);
    scheduleLayoutEmit();
  }, [
    extraRoots, extraStartIds, startMeta, orphans,
    onOrphansChange, onExtraStartIdsChange, onStartMetaChange, onExtraRootsChange, scheduleLayoutEmit,
  ]);

  const addStartAt = useCallback((flowPos: { x: number; y: number }) => {
    const newId = createStartNodeId();
    onExtraStartIdsChange?.([...extraStartIds, newId]);
    onStartMetaChange?.({
      ...startMeta,
      [newId]: { candleTypes: [DEFAULT_START_CANDLE], candleType: DEFAULT_START_CANDLE },
    });
    onExtraRootsChange?.({ ...extraRoots, [newId]: null });
    positionsRef.current.set(newId, {
      x: flowPos.x - getNodeDimensions(newId).w / 2,
      y: flowPos.y - getNodeDimensions(newId).h / 2,
    });
    scheduleLayoutEmit();
  }, [
    extraStartIds, extraRoots, startMeta,
    onExtraStartIdsChange, onStartMetaChange, onExtraRootsChange, scheduleLayoutEmit,
  ]);

  const handleDelete = useCallback((id: string) => {
    if (isStartNodeId(id)) return;
    if (isOrphanNode(orphans, id)) {
      onOrphansChange(orphans.filter(o => o.id !== id));
      positionsRef.current.delete(id);
      if (selectedNodeId === id) onSelectNode(null);
      return;
    }
    if (root && (root.id === id || findNodeInTree(root, id))) {
      if (root.id === id) {
        onChange(null);
      } else {
        onChange(deleteNode(root, id));
      }
      positionsRef.current.delete(id);
      if (selectedNodeId === id) onSelectNode(null);
      scheduleLayoutEmit();
      return;
    }
    for (const [sid, branch] of Object.entries(extraRoots)) {
      if (!branch || !findNodeInTree(branch, id)) continue;
      if (branch.id === id) {
        onExtraRootsChange?.({ ...extraRoots, [sid]: null });
      } else {
        onExtraRootsChange?.({ ...extraRoots, [sid]: deleteNode(branch, id) });
      }
      positionsRef.current.delete(id);
      if (selectedNodeId === id) onSelectNode(null);
      scheduleLayoutEmit();
      return;
    }
  }, [
    root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange,
    onSelectNode, selectedNodeId, scheduleLayoutEmit,
  ]);

  const deleteSelectedNodes = useCallback(() => {
    const ids = nodesRef.current
      .filter(n => n.selected && !isStartNodeId(n.id))
      .map(n => n.id);
    if (!ids.length) return;

    const orphanIds = new Set(ids.filter(id => isOrphanNode(orphans, id)));
    if (orphanIds.size) {
      onOrphansChange(orphans.filter(o => !orphanIds.has(o.id)));
      orphanIds.forEach(id => positionsRef.current.delete(id));
    }

    const treeIds = ids.filter(id => !orphanIds.has(id));
    if (treeIds.length && root) {
      let tree: LogicNode | null = root;
      for (const id of treeIds) {
        if (!tree) break;
        if (tree.id === id) {
          tree = null;
          positionsRef.current.delete(id);
          continue;
        }
        const next = deleteNode(tree, id);
        if (next !== tree) positionsRef.current.delete(id);
        tree = next;
      }
      onChange(tree);
    }
    onSelectNode(null);
    scheduleLayoutEmit();
  }, [root, orphans, onChange, onOrphansChange, onSelectNode, scheduleLayoutEmit]);

  const clearDropPreview = useCallback(() => {
    setNodes(nds => nds.map(n => ({
      ...n,
      data: {
        ...n.data,
        dragOver: false,
        activeSourceSide: undefined,
      },
    })));
  }, [setNodes]);

  const updateDropPreview = useCallback((anchorId: string, flowPos: { x: number; y: number }) => {
    const anchor = nodesRef.current.find(n => n.id === anchorId);
    if (!anchor) return;

    const canParent = canAcceptPaletteAsParent(anchorId, root);
    if (!canParent) {
      setNodes(nds => nds.map(n => ({
        ...n,
        data: { ...n.data, dragOver: false, activeSourceSide: undefined },
      })));
      return;
    }

    const dim = getNodeDimensions(anchorId);
    const { sourceSide } = connectionSidesFromDrop(anchor.position, dim, flowPos);
    setNodes(nds => nds.map(n => ({
      ...n,
      data: {
        ...n.data,
        dragOver: n.id === anchorId,
        activeSourceSide: n.id === anchorId ? sourceSide : undefined,
      },
    })));
  }, [setNodes, root]);

  const orphanDragTargetRef = useRef<{ parentId: string; childId: string } | null>(null);

  const updateOrphanConnectPreview = useCallback((
    resolved: { parentId: string; childId: string },
    draggedOrphanId: string,
    orphanPos: { x: number; y: number },
  ) => {
    const { parentId, childId } = resolved;
    const nodesSnapshot = nodesRef.current;
    const parentNode = nodesSnapshot.find(n => n.id === parentId);
    const childNode = nodesSnapshot.find(n => n.id === childId);
    if (!parentNode || !childNode) return;

    const parentDim = getNodeDimensions(parentId);
    const childDim = getNodeDimensions(childId);
    const parentPos = parentId === draggedOrphanId ? orphanPos : parentNode.position;
    const childPos = childId === draggedOrphanId ? orphanPos : childNode.position;
    const childCenter = {
      x: childPos.x + childDim.w / 2,
      y: childPos.y + childDim.h / 2,
    };
    const { sourceSide } = connectionSidesFromDrop(parentPos, parentDim, childCenter);

    setNodes(nds => nds.map(n => ({
      ...n,
      data: {
        ...n.data,
        dragOver: n.id === parentId,
        activeSourceSide: n.id === parentId ? sourceSide : undefined,
      },
    })));
  }, [setNodes]);

  const addOrphanAt = useCallback((
    data: { type: string; value: string; label: string; composite?: boolean },
    flowPos: { x: number; y: number },
  ) => {
    const newNode = makeNode(data.type, data.value, signalTab, def, makeNodeOptionsFromPalette(data));
    positionsRef.current.set(newNode.id, {
      x: flowPos.x - FLOW_NODE_W / 2,
      y: flowPos.y - FLOW_NODE_H / 2,
    });
    onOrphansChange([...orphans, newNode]);
    scheduleLayoutEmit();
  }, [orphans, onOrphansChange, signalTab, def, scheduleLayoutEmit]);

  const applyDropWithAttach = useCallback((
    anchorId: string,
    data: { type: string; value: string; label: string; composite?: boolean },
    flowPos: { x: number; y: number },
  ) => {
    if (data.type === 'start') {
      addStartAt(flowPos);
      return;
    }

    const newNode = makeNode(data.type, data.value, signalTab, def, makeNodeOptionsFromPalette(data));
    const anchor = nodesRef.current.find(n => n.id === anchorId);
    if (!anchor) return;

    const anchorDim = getNodeDimensions(anchorId);
    const { sourceHandle, targetHandle, sourceSide } = connectionSidesFromDrop(anchor.position, anchorDim, flowPos);
    positionsRef.current.set(newNode.id, spawnPositionNearAnchor(anchor.position, anchorDim, sourceSide));

    const saveAttachHandles = (parentId: string) => {
      saveEdgeHandles(edgeHandlesRef.current, `${parentId}-${newNode.id}`, { sourceHandle, targetHandle });
    };

    if (isStartNodeId(anchorId)) {
      if (anchorId === START_NODE_ID) {
        onChange(root ? mergeAtRoot(root, newNode, data.type === 'operator') : newNode);
      } else {
        const branch = extraRoots[anchorId] ?? null;
        onExtraRootsChange?.({
          ...extraRoots,
          [anchorId]: branch ? mergeAtRoot(branch, newNode, data.type === 'operator') : newNode,
        });
      }
      saveAttachHandles(anchorId);
      scheduleLayoutEmit();
      return;
    }

    const anchorNode = findNodeInTree(root, anchorId)
      ?? Object.values(extraRoots).map(br => findNodeInTree(br, anchorId)).find(Boolean);
    if (anchorNode?.type === 'CONDITION') {
      onChange(mergeAtRoot(root, newNode, data.type === 'operator'));
      return;
    }

    if (!canAcceptPaletteAsParent(anchorId, root)) return;

    if (root && findNodeInTree(root, anchorId)) {
      onChange(addChild(root, anchorId, newNode));
    } else {
      const parentBranch = Object.entries(extraRoots).find(([, br]) => br && findNodeInTree(br, anchorId));
      if (parentBranch) {
        const [sid, br] = parentBranch;
        onExtraRootsChange?.({
          ...extraRoots,
          [sid]: addChild(br!, anchorId, newNode),
        });
      }
    }
    saveAttachHandles(anchorId);
    scheduleLayoutEmit();
  }, [root, extraRoots, signalTab, def, onChange, onExtraRootsChange, addStartAt, scheduleLayoutEmit]);

  const handleDragOverTarget = useCallback((anchorId: string, flowPos: { x: number; y: number }) => {
    updateDropPreview(anchorId, flowPos);
  }, [updateDropPreview]);

  const handleDragLeaveTarget = useCallback((anchorId: string) => {
    setNodes(nds => nds.map(n => (
      n.id === anchorId
        ? { ...n, data: { ...n.data, dragOver: false, activeSourceSide: undefined } }
        : n
    )));
  }, [setNodes]);

  const handleDropTarget = useCallback((
    anchorId: string,
    data: { type: string; value: string; label: string },
    flowPos: { x: number; y: number },
  ) => {
    clearDropPreview();
    if (isPaletteConnectTarget(anchorId, root, orphans)) {
      applyDropWithAttach(anchorId, data, flowPos);
    } else {
      addOrphanAt(data, flowPos);
    }
  }, [clearDropPreview, applyDropWithAttach, addOrphanAt, root, orphans]);

  const handleUpdateCondition = useCallback((id: string, condition: ConditionDSL) => {
    if (isOrphanNode(orphans, id)) {
      onOrphansChange(orphans.map(o => (
        o.id === id ? { ...o, condition } : o
      )));
      return;
    }
    if (root && findNodeInTree(root, id)) {
      onChange(updateNode(root, id, n => ({ ...n, condition })));
      return;
    }
    for (const [sid, branch] of Object.entries(extraRoots)) {
      if (branch && findNodeInTree(branch, id)) {
        onExtraRootsChange?.({
          ...extraRoots,
          [sid]: updateNode(branch, id, n => ({ ...n, condition })),
        });
        return;
      }
    }
  }, [root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange]);

  const handleChangeLogicGateType = useCallback((id: string, gateType: 'AND' | 'OR') => {
    if (isOrphanNode(orphans, id)) {
      onOrphansChange(orphans.map(o => (
        o.id === id && (o.type === 'AND' || o.type === 'OR')
          ? { ...o, type: gateType }
          : o
      )));
      return;
    }
    if (root && findNodeInTree(root, id)) {
      onChange(updateNode(root, id, n => (
        n.type === 'AND' || n.type === 'OR' ? { ...n, type: gateType } : n
      )));
      return;
    }
    for (const [sid, branch] of Object.entries(extraRoots)) {
      if (branch && findNodeInTree(branch, id)) {
        onExtraRootsChange?.({
          ...extraRoots,
          [sid]: updateNode(branch, id, n => (
            n.type === 'AND' || n.type === 'OR' ? { ...n, type: gateType } : n
          )),
        });
        return;
      }
    }
  }, [root, extraRoots, orphans, onChange, onOrphansChange, onExtraRootsChange]);

  const flowCallbacks = useMemo(() => ({
    onDelete: handleDelete,
    onUpdateCondition: handleUpdateCondition,
    onChangeLogicGateType: handleChangeLogicGateType,
    onDropTarget: handleDropTarget,
    onDragOverTarget: handleDragOverTarget,
    onDragLeaveTarget: handleDragLeaveTarget,
    onStartCandleTypesChange: handleStartCandleTypesChange,
    onDeleteStart: handleDeleteStart,
  }), [
    handleDelete, handleUpdateCondition, handleChangeLogicGateType,
    handleDropTarget, handleDragOverTarget, handleDragLeaveTarget,
    handleStartCandleTypesChange, handleDeleteStart,
  ]);

  const rebuildFlow = useCallback(() => logicNodeToFlow(
    root,
    def,
    signalTab,
    positionsRef.current,
    flowCallbacks,
    null,
    orphans,
    startMeta,
    extraStartIds,
    extraRoots,
  ), [root, def, signalTab, flowCallbacks, orphans, startMeta, extraStartIds, extraRoots]);

  // 트리 구조 변경 → 전체 재배치 / 조건 편집 → 라벨만 갱신(위치 유지)
  useEffect(() => {
    const { nodes: layoutNodes, edges: layoutEdges } = rebuildFlow();
    const mergedEdges = applyEdgeHandles(layoutEdges, positionsRef.current, edgeHandlesRef.current);
    pruneEdgeHandles(edgeHandlesRef.current, mergedEdges);
    const structureChanged = structureKeyRef.current !== treeStructureKey;
    const orphansChanged = orphanKeyRef.current !== orphanKey;
    structureKeyRef.current = treeStructureKey;
    orphanKeyRef.current = orphanKey;

    const syncNodesFromLayout = () => setNodes(layoutNodes.map(n => {
      const prev = nodesRef.current.find(p => p.id === n.id);
      const savedPos = layoutSeed.positions[n.id];
      return {
        ...n,
        position: savedPos ? { x: savedPos.x, y: savedPos.y } : n.position,
        selected: prev?.selected ?? false,
      };
    }));

    const hasSavedLayout = layoutNodes.some(
      n => n.id !== START_NODE_ID && layoutSeed.positions[n.id] != null,
    );

    const needsNodeSync = layoutNodes.length !== nodesRef.current.length
      || !nodesRef.current.some(n => n.id === START_NODE_ID);

    if (structureChanged || orphansChanged || needsNodeSync) {
      syncNodesFromLayout();
      setEdges(mergedEdges);
      if (structureChanged && !hasSavedLayout) {
        requestAnimationFrame(() => {
          fitView({ padding: 0.4, duration: 200 });
        });
      }
    } else {
      setNodes(prev => prev.map(n => {
        const fresh = layoutNodes.find(ln => ln.id === n.id);
        if (!fresh) return n;
        const savedPos = layoutSeed.positions[n.id];
        return {
          ...n,
          position: savedPos ? { x: savedPos.x, y: savedPos.y } : fresh.position,
          data: fresh.data,
        };
      }));
      setEdges(mergedEdges);
    }
  }, [treeStructureKey, orphanKey, root, orphans, def, rebuildFlow, setNodes, setEdges, fitView, layoutSeed]);

  const handleDisconnectEdge = useCallback((edgeId: string) => {
    const edge = edgesRef.current.find(e => e.id === edgeId);
    if (!edge?.source || !edge.target) return;

    edgeHandlesRef.current.delete(edgeId);
    const { root: nextRoot, orphans: nextOrphans, extraRoots: nextExtraRoots } = disconnectTreeEdge(
      edge.source,
      edge.target,
      root,
      orphans,
      extraRoots,
    );

    if (nextRoot === root && nextOrphans.length === orphans.length && nextExtraRoots === extraRoots) return;

    onChange(nextRoot);
    onOrphansChange(nextOrphans);
    onExtraRootsChange?.(nextExtraRoots);
    onSelectNode(null);
    setEdges(prev => prev.map(e => ({ ...e, selected: false })));
  }, [root, orphans, extraRoots, onChange, onOrphansChange, onExtraRootsChange, onSelectNode, setEdges]);

  useEffect(() => {
    edgeDisconnectRef.current = handleDisconnectEdge;
    edgeBindingUpdateRef.current = (edgeId, patch) => {
      const prev = edgeHandlesRef.current.get(edgeId) ?? {};
      const next: EdgeHandleBinding = { ...prev, ...patch };
      if (patch.sourceHandle != null) next.manualSource = true;
      if (patch.targetHandle != null) next.manualTarget = true;
      if (patch.centerX != null || patch.centerY != null) next.manualCenter = true;
      if (next.manualSource && next.manualTarget) next.manual = true;
      edgeHandlesRef.current.set(edgeId, next);
      setEdges(prevEdges => applyEdgeHandles(prevEdges, positionsRef.current, edgeHandlesRef.current));
      scheduleLayoutEmit();
    };
    return () => {
      edgeDisconnectRef.current = null;
      edgeBindingUpdateRef.current = null;
    };
  }, [handleDisconnectEdge, setEdges, scheduleLayoutEmit]);

  const handleAutoLayout = useCallback(() => {
    const nextPositions = computeAutoFlowLayout(root, extraStartIds, extraRoots, orphans);
    positionsRef.current = new Map(Object.entries(nextPositions));
    edgeHandlesRef.current.clear();

    const { nodes: layoutNodes, edges: layoutEdges } = rebuildFlow();
    const mergedEdges = applyEdgeHandles(layoutEdges, positionsRef.current, edgeHandlesRef.current);

    setNodes(layoutNodes.map(n => ({
      ...n,
      position: positionsRef.current.get(n.id) ?? n.position,
      selected: nodesRef.current.find(p => p.id === n.id)?.selected ?? false,
    })));
    setEdges(mergedEdges);
    scheduleLayoutEmit();
    requestAnimationFrame(() => {
      fitView({ padding: 0.35, duration: 320 });
    });
  }, [
    root, extraStartIds, extraRoots, orphans, rebuildFlow, setNodes, setEdges,
    scheduleLayoutEmit, fitView,
  ]);

  const onSelectionChange: OnSelectionChangeFunc = useCallback(({ nodes: selNodes, edges: selEdges }) => {
    const picked = selNodes.filter(n => !isStartNodeId(n.id));
    if (picked.length === 1) onSelectNode(picked[0].id);
    else onSelectNode(null);
    if (selEdges.length === 1) {
      // 연결선만 선택된 경우 노드 선택 해제
      if (picked.length === 0) onSelectNode(null);
    }
  }, [onSelectNode]);

  const isValidConnection = useCallback(
    (conn: Connection | Edge) => isValidStrategyConnection(
      { source: conn.source, target: conn.target, sourceHandle: conn.sourceHandle ?? null, targetHandle: conn.targetHandle ?? null },
      root,
      orphans,
      extraRoots,
    ),
    [root, orphans, extraRoots],
  );

  const applyResolvedConnection = useCallback((
    parentId: string,
    childId: string,
    conn: Connection,
  ) => {
    const wired: Connection = { ...conn, source: parentId, target: childId };
    saveEdgeHandles(edgeHandlesRef.current, `${parentId}-${childId}`, wired);

    const childOrphan = orphans.find(o => o.id === childId);
    const parentOrphan = orphans.find(o => o.id === parentId);

    if (childOrphan) {
      onOrphansChange(orphans.filter(o => o.id !== childId));
      connectOrphanIntoTree(
        wired,
        childOrphan,
        root,
        extraRoots,
        onChange,
        next => onExtraRootsChange?.(next),
      );
      scheduleLayoutEmit();
      return;
    }
    if (parentOrphan) {
      onOrphansChange(orphans.filter(o => o.id !== parentId));
      connectOrphanAsParent(wired, parentOrphan, root, onChange);
      scheduleLayoutEmit();
      return;
    }

    applyTreeConnection(
      parentId,
      childId,
      root,
      extraRoots,
      onChange,
      next => onExtraRootsChange?.(next),
    );
    scheduleLayoutEmit();
  }, [root, orphans, extraRoots, onChange, onExtraRootsChange, onOrphansChange, scheduleLayoutEmit]);

  const onNodesChange: OnNodesChange = useCallback((changes) => {
    const positionChanges = changes.filter(
      (ch): ch is Extract<typeof ch, { type: 'position' }> => ch.type === 'position' && !!ch.position,
    );
    const startChange = positionChanges.find(ch => ch.id === START_NODE_ID);
    const otherTreePositionChanges = positionChanges.filter(
      ch => ch.id !== START_NODE_ID && treeLinkedIds.has(ch.id),
    );

    let startGroupDelta: { dx: number; dy: number } | null = null;
    const startPos = startChange?.position;
    if (startChange && startPos && otherTreePositionChanges.length === 0) {
      const prev = positionsRef.current.get(START_NODE_ID);
      if (prev) {
        startGroupDelta = {
          dx: startPos.x - prev.x,
          dy: startPos.y - prev.y,
        };
      }
    }

    onNodesChangeBase(changes);

    let positionsChanged = false;

    if (startGroupDelta && startPos && (startGroupDelta.dx !== 0 || startGroupDelta.dy !== 0)) {
      positionsRef.current.set(START_NODE_ID, { x: startPos.x, y: startPos.y });
      for (const id of treeLinkedIds) {
        if (id === START_NODE_ID) continue;
        const p = positionsRef.current.get(id);
        if (p) {
          positionsRef.current.set(id, {
            x: p.x + startGroupDelta.dx,
            y: p.y + startGroupDelta.dy,
          });
        }
      }
      setNodes(nds => nds.map(n => {
        if (!treeLinkedIds.has(n.id)) return n;
        const p = positionsRef.current.get(n.id);
        return p ? { ...n, position: { x: p.x, y: p.y } } : n;
      }));
      positionsChanged = true;
    }

    for (const ch of positionChanges) {
      if (!ch.position) continue;
      if (startGroupDelta && treeLinkedIds.has(ch.id)) continue;

      if (isOrphanNode(orphans, ch.id)) {
        positionsRef.current.set(ch.id, { x: ch.position.x, y: ch.position.y });

        if (ch.dragging === true) {
          positionsChanged = true;
          const nodesSnapshot = nodesRef.current.map(n => (
            n.id === ch.id
              ? { id: n.id, position: ch.position! }
              : { id: n.id, position: n.position }
          ));
          const resolved = resolveOrphanDragConnection(
            ch.id,
            ch.position,
            nodesSnapshot,
            root,
            orphans,
            extraRoots,
          );
          orphanDragTargetRef.current = resolved;
          if (resolved) {
            updateOrphanConnectPreview(resolved, ch.id, ch.position);
          } else {
            clearDropPreview();
          }
        } else if (ch.dragging === false) {
          const pending = orphanDragTargetRef.current;
          orphanDragTargetRef.current = null;
          clearDropPreview();
          if (pending) {
            const conn = buildConnectionFromPositions(
              pending.parentId,
              pending.childId,
              positionsRef.current,
            );
            applyResolvedConnection(pending.parentId, pending.childId, conn);
          }
          positionsChanged = true;
        }
        continue;
      }

      positionsRef.current.set(ch.id, { x: ch.position.x, y: ch.position.y });
      positionsChanged = true;
    }

    if (positionsChanged) {
      setEdges(prev => applyEdgeHandles(prev, positionsRef.current, edgeHandlesRef.current));
      scheduleLayoutEmit();
    }
  }, [
    onNodesChangeBase,
    setNodes,
    setEdges,
    treeLinkedIds,
    orphans,
    root,
    clearDropPreview,
    updateOrphanConnectPreview,
    applyResolvedConnection,
    scheduleLayoutEmit,
  ]);

  const onConnect = useCallback((conn: Connection) => {
    const resolved = resolveStrategyConnection(conn, root, orphans, extraRoots);
    if (!resolved) return;
    applyResolvedConnection(resolved.parentId, resolved.childId, conn);
  }, [root, orphans, extraRoots, applyResolvedConnection]);

  const onReconnect = useCallback((oldEdge: Edge, newConnection: Connection) => {
    const resolved = resolveStrategyConnection(newConnection, root, orphans, extraRoots);
    if (!resolved) return;

    edgeHandlesRef.current.delete(oldEdge.id);

    const endpointsChanged = oldEdge.source !== resolved.parentId || oldEdge.target !== resolved.childId;
    if (endpointsChanged) {
      applyResolvedConnection(resolved.parentId, resolved.childId, newConnection);
      return;
    }

    saveEdgeHandles(edgeHandlesRef.current, `${resolved.parentId}-${resolved.childId}`, newConnection, true);
    setEdges(prev => applyEdgeHandles(
      prev.map(e => (
        e.id === oldEdge.id
          ? {
            ...e,
            sourceHandle: newConnection.sourceHandle,
            targetHandle: newConnection.targetHandle,
          }
          : e
      )),
      positionsRef.current,
      edgeHandlesRef.current,
    ));
  }, [root, orphans, extraRoots, applyResolvedConnection, setEdges]);

  const isPaletteDrag = (e: React.DragEvent) => e.dataTransfer.types.includes('application/json');

  const resolvePaletteDrop = useCallback((flowPos: { x: number; y: number }) => {
    const hit = findNodeAtFlowPosition(flowPos, nodesRef.current);
    if (hit && isPaletteConnectTarget(hit.id, root, orphans)) {
      return { mode: 'connect' as const, anchorId: hit.id };
    }
    return { mode: 'orphan' as const };
  }, [root, orphans]);

  const onPaneDrop = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    clearDropPreview();
    try {
      const data = JSON.parse(e.dataTransfer.getData('application/json'));
      const flowPos = screenToFlowPosition({ x: e.clientX, y: e.clientY });
      if (data.type === 'start') {
        addStartAt(flowPos);
        return;
      }
      const drop = resolvePaletteDrop(flowPos);
      if (drop.mode === 'connect') {
        applyDropWithAttach(drop.anchorId, data, flowPos);
      } else {
        addOrphanAt(data, flowPos);
      }
    } catch { /* ignore */ }
  }, [clearDropPreview, screenToFlowPosition, applyDropWithAttach, addOrphanAt, addStartAt, resolvePaletteDrop]);

  const onPaneDragOver = useCallback((e: React.DragEvent) => {
    e.preventDefault();
    if (!isPaletteDrag(e)) return;
    e.dataTransfer.dropEffect = 'copy';
    const flowPos = screenToFlowPosition({ x: e.clientX, y: e.clientY });
    const drop = resolvePaletteDrop(flowPos);
    if (drop.mode === 'connect') {
      updateDropPreview(drop.anchorId, flowPos);
    } else {
      clearDropPreview();
    }
  }, [screenToFlowPosition, resolvePaletteDrop, updateDropPreview, clearDropPreview]);

  const onPaneDragLeave = useCallback((e: React.DragEvent) => {
    const rel = e.relatedTarget as Element | null;
    if (rel && e.currentTarget.contains(rel)) return;
    clearDropPreview();
  }, [clearDropPreview]);

  const onKeyDown = useCallback((e: React.KeyboardEvent) => {
    if (e.key !== 'Delete' && e.key !== 'Backspace') return;

    const selectedEdge = edgesRef.current.find(ed => ed.selected);
    if (selectedEdge) {
      e.preventDefault();
      handleDisconnectEdge(selectedEdge.id);
      return;
    }

    const selectedCount = nodesRef.current.filter(n => n.selected && n.id !== START_NODE_ID).length;
    if (selectedCount > 1) {
      e.preventDefault();
      deleteSelectedNodes();
    } else if (selectedNodeId && selectedNodeId !== START_NODE_ID) {
      e.preventDefault();
      handleDelete(selectedNodeId);
    }
  }, [selectedNodeId, handleDelete, deleteSelectedNodes, handleDisconnectEdge]);

  return (
    <div
      className={`se-canvas-wrap se-canvas-wrap--${signalTab} se-canvas-wrap--${interactionMode}`}
      onKeyDown={onKeyDown}
      tabIndex={0}
    >
      <ReactFlow
        nodes={nodes}
        edges={edges}
        nodeTypes={nodeTypes}
        edgeTypes={edgeTypes}
        onNodesChange={onNodesChange}
        onEdgesChange={onEdgesChange}
        onSelectionChange={onSelectionChange}
        onConnect={onConnect}
        isValidConnection={isValidConnection}
        onReconnect={onReconnect}
        onDrop={onPaneDrop}
        onDragOver={onPaneDragOver}
        onDragLeave={onPaneDragLeave}
        connectionMode={ConnectionMode.Loose}
        edgesReconnectable
        reconnectRadius={24}
        minZoom={0.25}
        maxZoom={1.8}
        nodesDraggable
        nodesConnectable
        elementsSelectable
        selectionOnDrag={interactionMode === 'select'}
        selectionMode={SelectionMode.Partial}
        panOnDrag={interactionMode === 'pan' ? true : [1, 2]}
        selectNodesOnDrag={false}
        multiSelectionKeyCode={['Meta', 'Control', 'Shift']}
        deleteKeyCode={null}
        defaultEdgeOptions={{
          type: 'strategy',
          className: 'se-flow-edge',
          style: { strokeWidth: 2 },
        }}
        proOptions={{ hideAttribution: true }}
      >
        <Background gap={24} size={1} className="se-flow-bg" />
        <Controls className="se-flow-controls" showInteractive={false} />
        <MiniMap
          className="se-flow-minimap"
          zoomable
          pannable
          nodeStrokeWidth={2}
          bgColor={minimapColors.bg}
          maskColor={minimapColors.mask}
          maskStrokeColor={minimapColors.maskStroke}
          nodeColor={minimapNodeColor}
          nodeStrokeColor={minimapNodeStrokeColor}
        />
        <Panel position="top-right" className="se-canvas-auto-layout">
          <button
            type="button"
            className="se-canvas-auto-layout-btn"
            title="자동 정렬"
            aria-label="노드 자동 정렬"
            onClick={handleAutoLayout}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden>
              <rect x="3" y="3" width="7" height="7" rx="1" />
              <rect x="14" y="3" width="7" height="7" rx="1" />
              <rect x="3" y="14" width="7" height="7" rx="1" />
              <path d="M14 17h7M17.5 14v7" />
            </svg>
          </button>
        </Panel>
        <Panel position="top-left" className="se-canvas-toolbar">
          <span className="se-canvas-toolbar-title">전략 빌더</span>
          <div className="se-canvas-interaction" role="group" aria-label="캔버스 조작 모드">
            <button
              type="button"
              className={`se-canvas-interaction-btn${interactionMode === 'pan' ? ' se-canvas-interaction-btn--on' : ''}`}
              title="빈 영역 드래그로 그래프 이동"
              onClick={() => handleInteractionModeChange('pan')}
            >
              이동
            </button>
            <button
              type="button"
              className={`se-canvas-interaction-btn${interactionMode === 'select' ? ' se-canvas-interaction-btn--on' : ''}`}
              title="드래그로 전략 요소 다중 선택"
              onClick={() => handleInteractionModeChange('select')}
            >
              드래그
            </button>
          </div>
          <span className="se-canvas-toolbar-hint">
            {interactionMode === 'pan'
              ? '빈 영역 드래그 → 그래프 이동 · 노드 드래그 → 위치 변경'
              : '빈 영역 드래그 → 다중 선택 · Del 삭제 · 연결선 × 끊기'}
            {orphans.length > 0 ? ` · 미연결 ${orphans.length}` : ''}
          </span>
        </Panel>
        {!root && (
          <Panel position="top-center" className="se-canvas-empty">
            우측에서 지표·연산자를 드래그하거나 클릭하여 조건을 구성하세요
          </Panel>
        )}
        <MultiSelectionDeleteButton onDelete={deleteSelectedNodes} />
      </ReactFlow>
    </div>
  );
}

export default function StrategyEditorCanvas(props: Props) {
  return <StrategyEditorCanvasInner {...props} />;
}