import {
  ChangeEvent,
  DragEvent,
  useCallback,
  useEffect,
  useLayoutEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import type {
  CSSProperties,
  KeyboardEvent as ReactKeyboardEvent,
  PointerEvent as ReactPointerEvent,
} from "react";
import {
  BellRing,
  ChevronDown,
  ChevronUp,
  ClipboardPaste,
  Copy,
  Download,
  FileCode2,
  FileDown,
  FileUp,
  FlipHorizontal2,
  FolderOpen,
  Grid2X2,
  Grip,
  ListChecks,
  Magnet,
  Maximize2,
  Minimize2,
  Move,
  Play,
  Redo2,
  RotateCw,
  Save,
  Square,
  SquareTerminal,
  Trash2,
  Undo2,
  type LucideIcon,
} from "lucide-react";
import {
  Background,
  BackgroundVariant,
  ConnectionLineType,
  ConnectionMode,
  Controls,
  Handle,
  Panel,
  Position,
  ReactFlow,
  ReactFlowProvider,
  SelectionMode,
  addEdge,
  type Connection,
  type Edge,
  type EdgeChange,
  type Node,
  type NodeChange,
  type NodeProps,
  type NodeTypes,
  useEdgesState,
  useNodesState,
  useReactFlow,
  useUpdateNodeInternals,
} from "@xyflow/react";
import {
  EmptySimulationResultsView,
  SimulationResultsView,
  type ResultVariableMetadata,
  type SimulationResultsSnapshot,
} from "./SimulationResultsView";
import {
  WorkspaceViewTabs,
  type WorkspaceView,
} from "./WorkspaceViewTabs";

type ParameterValue = number | string;
type UnitQuantity = "pressure" | "volume" | "temperature" | "length";
type PortKind = "physical" | "signal";
type PortNominalRole = "inlet" | "outlet" | "bidirectional" | "input" | "output";
type PortSide = "left" | "right";
type NodeRotation = 0 | 90 | 180 | 270;

type PortDefinition = {
  name: string;
  kind: PortKind;
  domain: string;
  nominalRole: PortNominalRole;
  positiveFlowDirection?: "intoComponent";
  side: PortSide;
};

type UnitOption = {
  value: string;
  label: string;
  toBase: (value: number) => number;
  fromBase: (value: number) => number;
};

type ParameterDefinition = {
  label: string;
  unit?: string;
  quantity?: UnitQuantity;
  default: ParameterValue;
  min?: number;
  max?: number;
  minExclusive?: boolean;
};

type ComponentDefinition = {
  type: string;
  label: string;
  modelType: string;
  ports: PortDefinition[];
  parameters: Record<string, ParameterDefinition>;
};

type SimulationNodeData = {
  label: string;
  componentType: string;
  modelType: string;
  ports: PortDefinition[];
  parameters: Record<string, ParameterValue>;
  parameterUnits: Record<string, string>;
  rotation: NodeRotation;
  mirrored: boolean;
};

type SimulationNode = Node<SimulationNodeData, "simulationComponent">;
type SimulationEdge = Edge;

type SimulationConfig = {
  t_start: number;
  t_stop: number;
  step: number;
  max_step: number;
  method: string;
};

type ProjectNodePayload = {
  id: string;
  type: "simulationComponent";
  position: {
    x: number;
    y: number;
  };
  data: Omit<SimulationNodeData, "parameterUnits"> & {
    parameterUnits?: Record<string, string>;
  };
};

type ProjectEdgePayload = {
  id: string;
  source: string;
  target: string;
  sourceHandle: string | null;
  targetHandle: string | null;
};

type ReactFlowProjectPayload = {
  name: string;
  nodes: ProjectNodePayload[];
  edges: ProjectEdgePayload[];
  simulation: SimulationConfig;
};

type SimulationResult = {
  success: boolean;
  status: "completed" | "stopped" | "stalled" | "failed";
  partial: boolean;
  message: string;
  simulatedUntil: number;
  requestedStopTime: number;
  variables: ResultVariableMetadata[];
  final: Record<string, number>;
  series: Record<string, number[]>;
  diagnostics: {
    pressureFlow: {
      solveCount: number;
      maxScaledResidual: number;
      maxEvaluationsPerSolve: number;
    };
    stream: {
      maxIterationsPerSolve: number;
    };
    stateCount: number;
    sampleCount: number;
  };
};

type ValidationIssue = {
  id: string;
  severity: "error" | "warning";
  message: string;
  nodeId?: string;
  edgeId?: string;
};

type EditorSnapshot = {
  nodes: SimulationNode[];
  edges: SimulationEdge[];
  projectName: string;
  simulationConfig: SimulationConfig;
};

type EditorClipboard = {
  nodes: SimulationNode[];
  edges: SimulationEdge[];
};

type ModelingPaneLayout = {
  paletteWidth: number;
  propertiesWidth: number;
};

type ModelingPaneResizeKind = "palette-width" | "properties-width";

type ModelingPaneResizeState = {
  kind: ModelingPaneResizeKind;
  pointerId: number;
  startX: number;
  startWidth: number;
};

type CanvasGridVisibility = {
  lines: boolean;
  dots: boolean;
};

const AUTOSAVE_KEY = "system-simulation-flow:autosave";
const PROJECT_KEY_PREFIX = "system-simulation-flow:project:";
const RESULT_SNAPSHOT_KEY = "system-simulation-flow:latest-result";
const CONSOLE_PLACEMENT_KEY = "system-simulation-flow:console-positions";
const MODELING_PANE_LAYOUT_KEY = "system-simulation-flow:modeling-pane-layout";
const CANVAS_GRID_VISIBILITY_KEY = "system-simulation-flow:canvas-grid-visibility";
const CONSOLE_VIEWPORT_MARGIN = 8;
const SIMULATION_STREAM_IDLE_TIMEOUT_MS = 30_000;
const SIMULATION_SOLVER_STALL_TIMEOUT_MS = 60_000;
const GRID_SIZE = 18;
const MODELING_PANE_SPLITTER_SIZE = 7;
const MIN_PALETTE_WIDTH = 180;
const MAX_PALETTE_WIDTH = 420;
const MIN_PROPERTIES_WIDTH = 280;
const MAX_PROPERTIES_WIDTH = 560;
const MIN_MODELING_CANVAS_WIDTH = 420;
const MODELING_PANE_KEYBOARD_STEP = 20;
const HISTORY_LIMIT = 50;
const NODE_FRAME_WIDTH = 132;
const NODE_FRAME_HEIGHT = 84;

function defaultModelingPaneLayout(): ModelingPaneLayout {
  return {
    paletteWidth: 230,
    propertiesWidth: 330,
  };
}

function loadModelingPaneLayout(): ModelingPaneLayout {
  const fallback = defaultModelingPaneLayout();
  try {
    const parsed = JSON.parse(
      localStorage.getItem(MODELING_PANE_LAYOUT_KEY) ?? "null",
    ) as Partial<ModelingPaneLayout> | null;
    if (
      !parsed ||
      !Number.isFinite(parsed.paletteWidth) ||
      !Number.isFinite(parsed.propertiesWidth)
    ) {
      return fallback;
    }
    return {
      paletteWidth: Math.min(
        MAX_PALETTE_WIDTH,
        Math.max(MIN_PALETTE_WIDTH, Number(parsed.paletteWidth)),
      ),
      propertiesWidth: Math.min(
        MAX_PROPERTIES_WIDTH,
        Math.max(MIN_PROPERTIES_WIDTH, Number(parsed.propertiesWidth)),
      ),
    };
  } catch {
    return fallback;
  }
}

function clampModelingPaneLayout(
  layout: ModelingPaneLayout,
  workbenchWidth: number,
): ModelingPaneLayout {
  let paletteWidth = Math.min(
    MAX_PALETTE_WIDTH,
    Math.max(MIN_PALETTE_WIDTH, layout.paletteWidth),
  );
  let propertiesWidth = Math.min(
    MAX_PROPERTIES_WIDTH,
    Math.max(MIN_PROPERTIES_WIDTH, layout.propertiesWidth),
  );
  const availableSideWidth = Math.max(
    MIN_PALETTE_WIDTH + MIN_PROPERTIES_WIDTH,
    workbenchWidth -
      MIN_MODELING_CANVAS_WIDTH -
      MODELING_PANE_SPLITTER_SIZE * 2,
  );
  let overflow = paletteWidth + propertiesWidth - availableSideWidth;
  if (overflow > 0) {
    const propertiesReduction = Math.min(
      overflow,
      propertiesWidth - MIN_PROPERTIES_WIDTH,
    );
    propertiesWidth -= propertiesReduction;
    overflow -= propertiesReduction;
  }
  if (overflow > 0) {
    paletteWidth -= Math.min(
      overflow,
      paletteWidth - MIN_PALETTE_WIDTH,
    );
  }
  return { paletteWidth, propertiesWidth };
}

function loadCanvasGridVisibility(): CanvasGridVisibility {
  try {
    const parsed = JSON.parse(
      localStorage.getItem(CANVAS_GRID_VISIBILITY_KEY) ?? "null",
    ) as Partial<CanvasGridVisibility> | null;
    if (
      parsed &&
      typeof parsed.lines === "boolean" &&
      typeof parsed.dots === "boolean"
    ) {
      return { lines: parsed.lines, dots: parsed.dots };
    }
  } catch {
    // Use the default view when browser storage is unavailable or invalid.
  }
  return { lines: false, dots: true };
}

const identityUnit = (value: number) => value;
const scaleUnit = (factor: number) => ({
  toBase: (value: number) => value * factor,
  fromBase: (value: number) => value / factor,
});

const unitOptions: Record<UnitQuantity, UnitOption[]> = {
  pressure: [
    { value: "Pa", label: "Pa", toBase: identityUnit, fromBase: identityUnit },
    { value: "kPa", label: "kPa", ...scaleUnit(1_000) },
    { value: "MPa", label: "MPa", ...scaleUnit(1_000_000) },
    { value: "bar", label: "bar", ...scaleUnit(100_000) },
  ],
  volume: [
    { value: "m3", label: "m³", toBase: identityUnit, fromBase: identityUnit },
    { value: "L", label: "L", ...scaleUnit(0.001) },
    { value: "mL", label: "mL", ...scaleUnit(0.000001) },
  ],
  temperature: [
    { value: "K", label: "K", toBase: identityUnit, fromBase: identityUnit },
    {
      value: "degC",
      label: "°C",
      toBase: (value) => value + 273.15,
      fromBase: (value) => value - 273.15,
    },
  ],
  length: [
    { value: "m", label: "m", toBase: identityUnit, fromBase: identityUnit },
    { value: "cm", label: "cm", ...scaleUnit(0.01) },
    { value: "mm", label: "mm", ...scaleUnit(0.001) },
  ],
};

const defaultSimulationConfig: SimulationConfig = {
  t_start: 0,
  t_stop: 2,
  step: 0.1,
  max_step: 0.005,
  method: "BDF",
};

type SimulationConsoleLevel = "info" | "success" | "warning" | "error";
type SimulationConsoleMode = "minimized" | "normal" | "maximized";

type ConsolePosition = {
  x: number;
  y: number;
};

type ConsolePlacement = ConsolePosition & {
  horizontalAnchor: "left" | "right";
  verticalAnchor: "top" | "bottom";
};

type ConsoleDragState = {
  pointerId: number;
  offsetX: number;
  offsetY: number;
  width: number;
  height: number;
};

type SimulationConsoleEntry = {
  id: number;
  timestamp: string;
  level: SimulationConsoleLevel;
  message: string;
};

type SimulationProgressState = {
  state: "idle" | "running" | "success" | "warning" | "error";
  percent: number;
  message: string;
  startTime: number;
  simulatedTime: number;
  totalTime: number;
};

type SimulationStreamIssue = {
  code?: string;
  message?: string;
};

type SimulationCancelReason = "user" | "stalled";

type SimulationTaskResponse = {
  simulationId: string;
  status: "queued" | "running" | "cancelling" | "completed" | "stopped" | "stalled" | "failed";
  cancelReason: SimulationCancelReason | null;
  result: SimulationResult | null;
  error: SimulationStreamEvent | null;
};

type SimulationStreamEvent =
  | {
      event: "progress";
      progress: number;
      phase: string;
      message: string;
      heartbeat?: boolean;
      simulatedTime?: number;
      totalTime?: number;
    }
  | {
      event: "result";
      progress: number;
      phase: "complete";
      message: string;
      simulatedTime?: number;
      totalTime?: number;
      result: SimulationResult;
    }
  | {
      event: "error";
      progress: number;
      phase: "failed";
      status: number;
      message: string;
      detail?: unknown;
      simulatedTime?: number;
      totalTime?: number;
    };
const SUPPORTED_SOLVER_METHODS = ["BDF", "Radau", "LSODA", "RK45", "RK23", "DOP853"];

function physicalPort(
  name: string,
  nominalRole: Extract<PortNominalRole, "inlet" | "outlet" | "bidirectional">,
  side: PortSide,
): PortDefinition {
  return {
    name,
    kind: "physical",
    domain: "pneumatic",
    nominalRole,
    positiveFlowDirection: "intoComponent",
    side,
  };
}

const componentDefinitions: ComponentDefinition[] = [
  {
    type: "cylinder",
    label: "气瓶",
    modelType: "cylinder",
    ports: [physicalPort("port_b", "outlet", "right")],
    parameters: {
      volume: {
        label: "容积",
        unit: "m3",
        quantity: "volume",
        default: 0.01,
        min: 0,
        minExclusive: true,
      },
      p0: { label: "初始压力", unit: "Pa", quantity: "pressure", default: 35000000, min: 0 },
      T0: {
        label: "初始温度",
        unit: "K",
        quantity: "temperature",
        default: 300,
        min: 0,
        minExclusive: true,
      },
    },
  },
  {
    type: "tank",
    label: "贮箱",
    modelType: "tank",
    ports: [physicalPort("port_a", "inlet", "left")],
    parameters: {
      volume: {
        label: "容积",
        unit: "m3",
        quantity: "volume",
        default: 0.1,
        min: 0,
        minExclusive: true,
      },
      p0: { label: "初始压力", unit: "Pa", quantity: "pressure", default: 100000, min: 0 },
      T0: {
        label: "初始温度",
        unit: "K",
        quantity: "temperature",
        default: 300,
        min: 0,
        minExclusive: true,
      },
    },
  },
  {
    type: "pipe",
    label: "管段",
    modelType: "pipe",
    ports: [
      physicalPort("port_a", "inlet", "left"),
      physicalPort("port_b", "outlet", "right"),
    ],
    parameters: {
      length: {
        label: "长度",
        unit: "m",
        quantity: "length",
        default: 5,
        min: 0,
        minExclusive: true,
      },
      diameter: {
        label: "直径",
        unit: "m",
        quantity: "length",
        default: 0.02,
        min: 0,
        minExclusive: true,
      },
      lambda_darcy: { label: "摩阻系数", default: 0.02, min: 0 },
      p0: { label: "初始压力", unit: "Pa", quantity: "pressure", default: 100000, min: 0 },
      T0: {
        label: "初始温度",
        unit: "K",
        quantity: "temperature",
        default: 300,
        min: 0,
        minExclusive: true,
      },
    },
  },
  {
    type: "orifice",
    label: "孔板/阀门",
    modelType: "orifice",
    ports: [
      physicalPort("port_a", "inlet", "left"),
      physicalPort("port_b", "outlet", "right"),
    ],
    parameters: {
      K: { label: "流量系数", default: 0.00001, min: 0 },
      opening: { label: "开度", default: 1, min: 0, max: 1 },
    },
  },
  {
    type: "tee",
    label: "三通",
    modelType: "tee",
    ports: [
      physicalPort("port_in", "bidirectional", "left"),
      physicalPort("port_out1", "bidirectional", "right"),
      physicalPort("port_out2", "bidirectional", "right"),
    ],
    parameters: {},
  },
];

const nextNodeNumberByType: Record<string, number> = {};

function defaultParameters(definition: ComponentDefinition) {
  return Object.fromEntries(
    Object.entries(definition.parameters).map(([key, parameter]) => [
      key,
      parameter.default,
    ]),
  );
}

function defaultParameterUnits(definition: ComponentDefinition) {
  return Object.fromEntries(
    Object.entries(definition.parameters)
      .filter(([, parameter]) => parameter.unit)
      .map(([key, parameter]) => [key, parameter.unit as string]),
  );
}

function buildNodeData(definition: ComponentDefinition): SimulationNodeData {
  return {
    label: definition.label,
    componentType: definition.type,
    modelType: definition.modelType,
    ports: definition.ports.map((port) => ({ ...port })),
    parameters: defaultParameters(definition),
    parameterUnits: defaultParameterUnits(definition),
    rotation: 0,
    mirrored: false,
  };
}

function SimulationComponentNode({ id, data, selected }: NodeProps<SimulationNode>) {
  const updateNodeInternals = useUpdateNodeInternals();
  const rotation = normalizeNodeRotation(data.rotation);
  const mirrored = Boolean(data.mirrored);
  const vertical = rotation === 90 || rotation === 270;
  const portPlacements = transformedPortPlacements(data.ports, rotation, mirrored);

  useEffect(() => {
    updateNodeInternals(id);
  }, [mirrored, rotation, id, updateNodeInternals]);

  return (
    <div
      className={`sim-node sim-node-${data.componentType} ${vertical ? "orientation-vertical" : ""} ${selected ? "selected" : ""}`}
    >
      <div
        className="sim-node-frame"
        style={{
          transform: `translate(-50%, -50%) rotate(${rotation}deg) scaleX(${mirrored ? -1 : 1})`,
        }}
      >
      </div>
      {portPlacements.map(({ port, position, x, y }) => (
        <Handle
          className={`port-handle port-handle-${port.kind}`}
          id={port.name}
          key={port.name}
          position={position}
          style={{ left: x, top: y, transform: "translate(-50%, -50%)" }}
          title={`${port.name} (${port.domain})`}
          type={portHandleType(port)}
        />
      ))}
      <div className="node-symbol-anchor" aria-hidden="true">
        <div
          className="node-symbol"
          style={{
            transform: `rotate(${rotation}deg) scaleX(${mirrored ? -1 : 1})`,
          }}
        >
          {symbolForComponent(data.componentType)}
        </div>
      </div>
      <div className="node-label">{data.label}</div>
    </div>
  );
}

function normalizeNodeRotation(value: unknown): NodeRotation {
  return value === 90 || value === 180 || value === 270 ? value : 0;
}

function nextNodeRotation(value: unknown): NodeRotation {
  return ((normalizeNodeRotation(value) + 90) % 360) as NodeRotation;
}

function nodeFrameDimensions(rotation: NodeRotation) {
  const vertical = rotation === 90 || rotation === 270;
  return vertical
    ? { width: NODE_FRAME_HEIGHT, height: NODE_FRAME_WIDTH }
    : { width: NODE_FRAME_WIDTH, height: NODE_FRAME_HEIGHT };
}

function rotateNodeClockwise(node: SimulationNode): SimulationNode {
  const currentRotation = normalizeNodeRotation(node.data.rotation);
  const nextRotation = nextNodeRotation(currentRotation);
  const currentSize = nodeFrameDimensions(currentRotation);
  const nextSize = nodeFrameDimensions(nextRotation);
  return {
    ...node,
    position: {
      x: node.position.x + (currentSize.width - nextSize.width) / 2,
      y: node.position.y + (currentSize.height - nextSize.height) / 2,
    },
    data: {
      ...node.data,
      rotation: nextRotation,
    },
  };
}

function portHandleType(port: PortDefinition) {
  if (port.kind === "signal") {
    return port.nominalRole === "output" ? ("source" as const) : ("target" as const);
  }
  return "source" as const;
}

function transformedPortPlacements(
  ports: PortDefinition[],
  rotation: NodeRotation,
  mirrored: boolean,
) {
  const renderedSize = nodeFrameDimensions(rotation);

  return (["left", "right"] as PortSide[]).flatMap((side) => {
    const sidePorts = ports.filter((port) => port.side === side);
    return sidePorts.map((port, index) => {
      let x = side === "left" ? -NODE_FRAME_WIDTH / 2 : NODE_FRAME_WIDTH / 2;
      let y =
        -NODE_FRAME_HEIGHT / 2 +
        ((index + 1) * NODE_FRAME_HEIGHT) / (sidePorts.length + 1);

      if (mirrored) {
        x = -x;
      }

      [x, y] = rotatePoint(x, y, rotation);
      const renderedX = renderedSize.width / 2 + x;
      const renderedY = renderedSize.height / 2 + y;

      return {
        port,
        position: portPosition(renderedX, renderedY, renderedSize),
        x: renderedX,
        y: renderedY,
      };
    });
  });
}

function rotatePoint(x: number, y: number, rotation: NodeRotation): [number, number] {
  if (rotation === 90) {
    return [-y, x];
  }
  if (rotation === 180) {
    return [-x, -y];
  }
  if (rotation === 270) {
    return [y, -x];
  }
  return [x, y];
}

function portPosition(
  x: number,
  y: number,
  size: { width: number; height: number },
) {
  if (Math.abs(x) < 0.01) {
    return Position.Left;
  }
  if (Math.abs(x - size.width) < 0.01) {
    return Position.Right;
  }
  if (Math.abs(y) < 0.01) {
    return Position.Top;
  }
  return Position.Bottom;
}

function symbolForComponent(type: string) {
  if (type === "cylinder") {
    return <div className="symbol-cylinder" />;
  }
  if (type === "tank") {
    return <div className="symbol-tank" />;
  }
  if (type === "pipe") {
    return <div className="symbol-pipe" />;
  }
  if (type === "orifice") {
    return <div className="symbol-orifice" />;
  }
  return <div className="symbol-tee" />;
}

type ToolbarButtonProps = {
  label: string;
  icon: LucideIcon;
  onClick: () => void;
  disabled?: boolean;
  pressed?: boolean;
  accent?: boolean;
  primary?: boolean;
};

function ToolbarButton({
  label,
  icon: Icon,
  onClick,
  disabled = false,
  pressed,
  accent = false,
  primary = false,
}: ToolbarButtonProps) {
  return (
    <span className="toolbar-item" data-tooltip={label}>
      <button
        aria-label={label}
        aria-pressed={pressed}
        className={`editor-tool-button ${pressed ? "active" : ""} ${accent ? "accent" : ""} ${primary ? "primary" : ""}`}
        disabled={disabled}
        onClick={onClick}
        type="button"
      >
        <Icon aria-hidden="true" size={18} strokeWidth={1.8} />
      </button>
    </span>
  );
}

type SimulationConsoleProps = {
  entries: SimulationConsoleEntry[];
  mode: SimulationConsoleMode;
  progress: SimulationProgressState;
  unreadCount: number;
  onClear: () => void;
  onModeChange: (mode: SimulationConsoleMode) => void;
  onStop: () => void;
  stopPending: boolean;
};

const consoleLevelLabels: Record<SimulationConsoleLevel, string> = {
  info: "信息",
  success: "完成",
  warning: "警告",
  error: "错误",
};

function simulationProgressClockText(progress: SimulationProgressState) {
  const simulatedTime = Number.isFinite(progress.simulatedTime)
    ? progress.simulatedTime
    : progress.startTime;
  const totalTime = Number.isFinite(progress.totalTime)
    ? progress.totalTime
    : progress.startTime;
  return `${simulatedTime.toFixed(2)} s / ${totalTime.toFixed(2)} s`;
}

function simulationTimePercent(
  startTime: number,
  simulatedTime: number,
  totalTime: number,
) {
  const duration = totalTime - startTime;
  if (!Number.isFinite(duration) || duration <= 0) {
    return 0;
  }
  return Math.min(
    100,
    Math.max(0, Math.round((100 * (simulatedTime - startTime)) / duration)),
  );
}

type NormalizedSimulationProgress = {
  percent: number;
  simulatedTime: number;
  totalTime: number;
};

function normalizeSimulationProgressEvent(
  event: Extract<SimulationStreamEvent, { event: "progress" }>,
  config: SimulationConfig,
): NormalizedSimulationProgress {
  const totalTime = Number.isFinite(event.totalTime)
    ? Number(event.totalTime)
    : config.t_stop;
  const preparationPhase = [
    "queued",
    "validation",
    "compilation",
    "initialization",
    "initializing",
  ].includes(event.phase);
  if (preparationPhase) {
    return {
      percent: 0,
      simulatedTime: config.t_start,
      totalTime,
    };
  }

  if (Number.isFinite(event.simulatedTime)) {
    const simulatedTime = Math.min(
      totalTime,
      Math.max(config.t_start, Number(event.simulatedTime)),
    );
    return {
      percent: simulationTimePercent(
        config.t_start,
        simulatedTime,
        totalTime,
      ),
      simulatedTime,
      totalTime,
    };
  }

  // Older backends mapped solver progress into the 12%-98% range.
  const legacyModelProgress = (event.progress - 12) / 86;
  const legacyTimeFraction = Math.min(
    1,
    Math.max(0, (legacyModelProgress - 0.05) / 0.75),
  );
  const simulatedTime =
    config.t_start + legacyTimeFraction * (totalTime - config.t_start);
  return {
    percent: simulationTimePercent(
      config.t_start,
      simulatedTime,
      totalTime,
    ),
    simulatedTime,
    totalTime,
  };
}

function isConsolePosition(value: unknown): value is ConsolePosition {
  if (!value || typeof value !== "object") {
    return false;
  }

  const position = value as Partial<ConsolePosition>;
  return (
    typeof position.x === "number" &&
    Number.isFinite(position.x) &&
    typeof position.y === "number" &&
    Number.isFinite(position.y)
  );
}

function isConsolePlacement(value: unknown): value is ConsolePlacement {
  if (!isConsolePosition(value)) {
    return false;
  }

  const placement = value as Partial<ConsolePlacement>;
  return (
    (placement.horizontalAnchor === "left" ||
      placement.horizontalAnchor === "right") &&
    (placement.verticalAnchor === "top" || placement.verticalAnchor === "bottom")
  );
}

function consolePlacementFromPosition(
  position: ConsolePosition,
  width: number,
  height: number,
  horizontalAnchor?: ConsolePlacement["horizontalAnchor"],
  verticalAnchor?: ConsolePlacement["verticalAnchor"],
): ConsolePlacement {
  const nextHorizontalAnchor =
    horizontalAnchor ??
    (position.x + width / 2 <= window.innerWidth / 2 ? "left" : "right");
  const nextVerticalAnchor =
    verticalAnchor ??
    (position.y + height / 2 <= window.innerHeight / 2 ? "top" : "bottom");

  return {
    x: Math.round(nextHorizontalAnchor === "left" ? position.x : position.x + width),
    y: Math.round(nextVerticalAnchor === "top" ? position.y : position.y + height),
    horizontalAnchor: nextHorizontalAnchor,
    verticalAnchor: nextVerticalAnchor,
  };
}

function estimateConsoleSize(mode: "minimized" | "normal") {
  const mobile = window.innerWidth <= 640;
  const viewportPadding = mobile ? 16 : 28;
  return {
    width: Math.min(mode === "minimized" ? 480 : 760, window.innerWidth - viewportPadding),
    height:
      mode === "minimized"
        ? 40
        : mobile
          ? Math.min(300, window.innerHeight - 16)
          : 270,
  };
}

function loadConsolePlacement(): ConsolePlacement | undefined {
  try {
    const storedValue = localStorage.getItem(CONSOLE_PLACEMENT_KEY);
    if (!storedValue) {
      return undefined;
    }

    const parsedValue = JSON.parse(storedValue) as Record<string, unknown>;
    if (isConsolePlacement(parsedValue)) {
      return parsedValue;
    }

    // 将旧版的分模式坐标迁移为一份共享锚点。
    const legacyMode = isConsolePosition(parsedValue.minimized)
      ? "minimized"
      : isConsolePosition(parsedValue.normal)
        ? "normal"
        : null;
    if (!legacyMode) {
      return undefined;
    }

    const legacyPosition = parsedValue[legacyMode] as ConsolePosition;
    const size = estimateConsoleSize(legacyMode);
    return consolePlacementFromPosition(
      clampConsolePosition(legacyPosition, size.width, size.height),
      size.width,
      size.height,
    );
  } catch {
    return undefined;
  }
}

function storeConsolePlacement(placement: ConsolePlacement | undefined) {
  try {
    if (placement) {
      localStorage.setItem(CONSOLE_PLACEMENT_KEY, JSON.stringify(placement));
    } else {
      localStorage.removeItem(CONSOLE_PLACEMENT_KEY);
    }
  } catch {
    // The console remains movable when browser storage is unavailable.
  }
}

function clampConsolePosition(
  position: ConsolePosition,
  width: number,
  height: number,
): ConsolePosition {
  const maxX = Math.max(
    CONSOLE_VIEWPORT_MARGIN,
    window.innerWidth - width - CONSOLE_VIEWPORT_MARGIN,
  );
  const maxY = Math.max(
    CONSOLE_VIEWPORT_MARGIN,
    window.innerHeight - height - CONSOLE_VIEWPORT_MARGIN,
  );

  return {
    x: Math.round(Math.min(Math.max(CONSOLE_VIEWPORT_MARGIN, position.x), maxX)),
    y: Math.round(Math.min(Math.max(CONSOLE_VIEWPORT_MARGIN, position.y), maxY)),
  };
}

function clampConsolePlacement(
  placement: ConsolePlacement,
  width: number,
  height: number,
): ConsolePlacement {
  const unclampedPosition = {
    x: placement.horizontalAnchor === "left" ? placement.x : placement.x - width,
    y: placement.verticalAnchor === "top" ? placement.y : placement.y - height,
  };
  const position = clampConsolePosition(unclampedPosition, width, height);
  return consolePlacementFromPosition(
    position,
    width,
    height,
    placement.horizontalAnchor,
    placement.verticalAnchor,
  );
}

function consolePlacementsEqual(
  first: ConsolePlacement,
  second: ConsolePlacement,
) {
  return (
    first.x === second.x &&
    first.y === second.y &&
    first.horizontalAnchor === second.horizontalAnchor &&
    first.verticalAnchor === second.verticalAnchor
  );
}

function SimulationConsole({
  entries,
  mode,
  progress,
  unreadCount,
  onClear,
  onModeChange,
  onStop,
  stopPending,
}: SimulationConsoleProps) {
  const logRef = useRef<HTMLDivElement>(null);
  const consoleRef = useRef<HTMLElement>(null);
  const dragStateRef = useRef<ConsoleDragState | null>(null);
  const [placement, setPlacement] = useState<ConsolePlacement | undefined>(
    loadConsolePlacement,
  );
  const [dragging, setDragging] = useState(false);

  useEffect(() => {
    if (mode !== "minimized" && logRef.current) {
      logRef.current.scrollTop = logRef.current.scrollHeight;
    }
  }, [entries, mode]);

  useEffect(() => {
    storeConsolePlacement(placement);
  }, [placement]);

  useEffect(() => {
    dragStateRef.current = null;
    setDragging(false);
  }, [mode]);

  useLayoutEffect(() => {
    if (mode === "maximized") {
      return;
    }

    const consoleElement = consoleRef.current;
    if (!consoleElement) {
      return;
    }

    const bounds = consoleElement.getBoundingClientRect();
    setPlacement((currentPlacement) => {
      const nextPlacement = currentPlacement
        ? clampConsolePlacement(currentPlacement, bounds.width, bounds.height)
        : consolePlacementFromPosition(
            { x: bounds.left, y: bounds.top },
            bounds.width,
            bounds.height,
          );
      return currentPlacement && consolePlacementsEqual(currentPlacement, nextPlacement)
        ? currentPlacement
        : nextPlacement;
    });
  }, [mode]);

  useEffect(() => {
    if (mode === "maximized") {
      return undefined;
    }

    const clampCurrentPlacement = () => {
      const consoleElement = consoleRef.current;
      if (!consoleElement) {
        return;
      }

      const bounds = consoleElement.getBoundingClientRect();
      setPlacement((currentPlacement) => {
        if (!currentPlacement) {
          return currentPlacement;
        }

        const nextPlacement = clampConsolePlacement(
          currentPlacement,
          bounds.width,
          bounds.height,
        );
        return consolePlacementsEqual(currentPlacement, nextPlacement)
          ? currentPlacement
          : nextPlacement;
      });
    };

    window.addEventListener("resize", clampCurrentPlacement);
    return () => window.removeEventListener("resize", clampCurrentPlacement);
  }, [mode]);

  const requestConsoleMode = (nextMode: SimulationConsoleMode) => {
    if (mode !== "maximized" && consoleRef.current) {
      const bounds = consoleRef.current.getBoundingClientRect();
      setPlacement(
        consolePlacementFromPosition(
          { x: bounds.left, y: bounds.top },
          bounds.width,
          bounds.height,
        ),
      );
    }
    onModeChange(nextMode);
  };

  const startConsoleDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
    if (mode === "maximized" || event.button !== 0 || !consoleRef.current) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();
    const bounds = consoleRef.current.getBoundingClientRect();
    dragStateRef.current = {
      pointerId: event.pointerId,
      offsetX: event.clientX - bounds.left,
      offsetY: event.clientY - bounds.top,
      width: bounds.width,
      height: bounds.height,
    };
    setPlacement(
      consolePlacementFromPosition(
        { x: bounds.left, y: bounds.top },
        bounds.width,
        bounds.height,
      ),
    );
    event.currentTarget.setPointerCapture(event.pointerId);
    setDragging(true);
  };

  const moveConsole = (event: ReactPointerEvent<HTMLButtonElement>) => {
    const dragState = dragStateRef.current;
    if (!dragState || dragState.pointerId !== event.pointerId) {
      return;
    }

    event.preventDefault();
    const nextPosition = clampConsolePosition(
      {
        x: event.clientX - dragState.offsetX,
        y: event.clientY - dragState.offsetY,
      },
      dragState.width,
      dragState.height,
    );
    setPlacement(
      consolePlacementFromPosition(
        nextPosition,
        dragState.width,
        dragState.height,
      ),
    );
  };

  const stopConsoleDrag = (event: ReactPointerEvent<HTMLButtonElement>) => {
    const dragState = dragStateRef.current;
    if (!dragState || dragState.pointerId !== event.pointerId) {
      return;
    }

    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
    dragStateRef.current = null;
    setDragging(false);
  };

  const resetConsolePosition = () => {
    if (mode === "maximized") {
      return;
    }

    const consoleElement = consoleRef.current;
    if (!consoleElement) {
      return;
    }

    const bounds = consoleElement.getBoundingClientRect();
    const viewportInset = window.innerWidth <= 640 ? 8 : 14;
    const defaultPosition =
      mode === "minimized"
        ? {
            x: window.innerWidth - bounds.width - viewportInset,
            y: window.innerHeight - bounds.height - viewportInset,
          }
        : {
            x: (window.innerWidth - bounds.width) / 2,
            y: window.innerHeight - bounds.height - viewportInset,
          };
    setPlacement(
      consolePlacementFromPosition(
        clampConsolePosition(defaultPosition, bounds.width, bounds.height),
        bounds.width,
        bounds.height,
      ),
    );
  };

  const canStop = progress.state === "running" && !stopPending;
  const consoleStyle: CSSProperties | undefined = mode !== "maximized" && placement
    ? {
        bottom:
          placement.verticalAnchor === "bottom"
            ? Math.round(window.innerHeight - placement.y)
            : "auto",
        left: placement.horizontalAnchor === "left" ? placement.x : "auto",
        right:
          placement.horizontalAnchor === "right"
            ? Math.round(window.innerWidth - placement.x)
            : "auto",
        top: placement.verticalAnchor === "top" ? placement.y : "auto",
        transform: "none",
      }
    : undefined;

  if (mode === "minimized") {
    const latestMessage = entries.at(-1)?.message ?? "等待仿真任务";
    return (
      <aside
        aria-label="仿真控制台"
        className={`simulation-console minimized ${unreadCount > 0 ? "has-unread" : ""} ${dragging ? "dragging" : ""}`}
        ref={consoleRef}
        style={consoleStyle}
      >
        <div className="simulation-console-collapsed">
          <button
            aria-label="移动控制台"
            className="simulation-console-collapsed-move"
            onDoubleClick={resetConsolePosition}
            onLostPointerCapture={stopConsoleDrag}
            onPointerCancel={stopConsoleDrag}
            onPointerDown={startConsoleDrag}
            onPointerMove={moveConsole}
            onPointerUp={stopConsoleDrag}
            title="拖动移动控制台，双击恢复默认位置"
            type="button"
          >
            <Move aria-hidden="true" size={16} strokeWidth={1.8} />
          </button>
          <button
            aria-label={stopPending ? "正在停止仿真" : "停止仿真"}
            className={`simulation-console-collapsed-stop ${canStop ? "active" : ""}`}
            disabled={!canStop}
            onClick={onStop}
            title={canStop ? "停止当前仿真" : "当前没有可停止的仿真"}
            type="button"
          >
            <Square aria-hidden="true" fill="currentColor" size={13} strokeWidth={1.8} />
          </button>
          <button
            aria-label="展开仿真控制台"
            className="simulation-console-collapsed-open"
            onClick={() => requestConsoleMode("normal")}
            title="展开仿真控制台"
            type="button"
          >
            <SquareTerminal aria-hidden="true" size={17} />
            <strong>仿真控制台</strong>
            {progress.state === "running" ? (
              <span className="simulation-console-collapsed-status">
                {simulationProgressClockText(progress)} · {progress.percent}%
              </span>
            ) : (
              <span className="simulation-console-collapsed-message">{latestMessage}</span>
            )}
            {unreadCount > 0 ? (
              <span className="simulation-console-unread" title={`${unreadCount} 条新消息`}>
                <BellRing aria-hidden="true" size={13} />
                {unreadCount > 99 ? "99+" : unreadCount}
              </span>
            ) : null}
            <ChevronUp aria-hidden="true" size={17} />
          </button>
        </div>
      </aside>
    );
  }

  return (
    <aside
      aria-label="仿真控制台"
      className={`simulation-console ${mode} ${dragging ? "dragging" : ""}`}
      ref={consoleRef}
      style={consoleStyle}
    >
      <header className="simulation-console-header">
        <div className="simulation-console-title">
          <SquareTerminal aria-hidden="true" size={17} />
          <strong>仿真控制台</strong>
          {progress.state === "running" ? <span>运行中</span> : null}
        </div>
        <div className="simulation-console-actions">
          {mode === "normal" ? (
            <button
              aria-label="移动控制台"
              className="simulation-console-move-button"
              onDoubleClick={resetConsolePosition}
              onLostPointerCapture={stopConsoleDrag}
              onPointerCancel={stopConsoleDrag}
              onPointerDown={startConsoleDrag}
              onPointerMove={moveConsole}
              onPointerUp={stopConsoleDrag}
              title="拖动移动控制台，双击恢复默认位置"
              type="button"
            >
              <Move aria-hidden="true" size={16} strokeWidth={1.8} />
            </button>
          ) : null}
          <button
            aria-label={stopPending ? "正在停止仿真" : "停止仿真"}
            className={`simulation-console-stop-button ${canStop ? "active" : ""}`}
            disabled={!canStop}
            onClick={onStop}
            title={canStop ? "停止当前仿真" : "当前没有可停止的仿真"}
            type="button"
          >
            <Square aria-hidden="true" fill="currentColor" size={13} strokeWidth={1.8} />
          </button>
          <button
            aria-label="清空控制台"
            disabled={entries.length === 0}
            onClick={onClear}
            title="清空控制台"
            type="button"
          >
            <Trash2 aria-hidden="true" size={16} />
          </button>
          {mode === "normal" ? (
            <button
              aria-label="最大化控制台"
              onClick={() => requestConsoleMode("maximized")}
              title="最大化控制台"
              type="button"
            >
              <Maximize2 aria-hidden="true" size={16} />
            </button>
          ) : (
            <button
              aria-label="还原控制台"
              onClick={() => requestConsoleMode("normal")}
              title="还原控制台"
              type="button"
            >
              <Minimize2 aria-hidden="true" size={16} />
            </button>
          )}
          <button
            aria-label="最小化控制台"
            onClick={() => requestConsoleMode("minimized")}
            title="最小化控制台"
            type="button"
          >
            <ChevronDown aria-hidden="true" size={17} />
          </button>
        </div>
      </header>

      <div className={`simulation-console-progress ${progress.state}`}>
        <div className="simulation-console-progress-label">
          <span>{progress.message}</span>
          <div className="simulation-console-progress-metrics">
            <span>{simulationProgressClockText(progress)}</span>
            <strong>{progress.percent}%</strong>
          </div>
        </div>
        <div
          aria-label={`仿真进度 ${progress.percent}%，${simulationProgressClockText(progress)}`}
          aria-valuemax={100}
          aria-valuemin={0}
          aria-valuenow={progress.percent}
          className="simulation-console-progress-track"
          role="progressbar"
        >
          <span style={{ width: `${progress.percent}%` }} />
        </div>
      </div>

      <div
        aria-live="polite"
        className="simulation-console-log"
        ref={logRef}
        role="log"
      >
        {entries.length === 0 ? (
          <div className="simulation-console-empty">暂无仿真消息</div>
        ) : (
          entries.map((entry) => (
            <div className={`simulation-console-entry ${entry.level}`} key={entry.id}>
              <time>{entry.timestamp}</time>
              <span className="simulation-console-entry-level">
                {consoleLevelLabels[entry.level]}
              </span>
              <span>{entry.message}</span>
            </div>
          ))
        )}
      </div>
    </aside>
  );
}

type DeferredNumberInputProps = {
  ariaLabel?: string;
  invalid?: boolean;
  value: number | string;
  onCommit: (value: string) => void;
  onEditEnd?: () => void;
  onEditStart?: () => void;
};

function DeferredNumberInput({
  ariaLabel,
  invalid = false,
  value,
  onCommit,
  onEditEnd,
  onEditStart,
}: DeferredNumberInputProps) {
  const committedText = String(value);
  const [draftText, setDraftText] = useState(committedText);
  const committedTextRef = useRef(committedText);
  const draftTextRef = useRef(committedText);
  const editingRef = useRef(false);
  const cancelCommitRef = useRef(false);

  useEffect(() => {
    committedTextRef.current = committedText;
    if (!editingRef.current) {
      draftTextRef.current = committedText;
      setDraftText(committedText);
    }
  }, [committedText]);

  return (
    <input
      aria-invalid={invalid}
      aria-label={ariaLabel}
      inputMode="decimal"
      onBlur={() => {
        editingRef.current = false;
        if (cancelCommitRef.current) {
          cancelCommitRef.current = false;
        } else {
          onCommit(draftTextRef.current);
        }
        window.setTimeout(() => onEditEnd?.(), 0);
      }}
      onChange={(event) => {
        draftTextRef.current = event.target.value;
        setDraftText(event.target.value);
      }}
      onFocus={() => {
        editingRef.current = true;
        cancelCommitRef.current = false;
        onEditStart?.();
      }}
      onKeyDown={(event) => {
        if (event.key === "Enter") {
          event.preventDefault();
          event.currentTarget.blur();
        } else if (event.key === "Escape") {
          event.preventDefault();
          cancelCommitRef.current = true;
          draftTextRef.current = committedTextRef.current;
          setDraftText(committedTextRef.current);
          event.currentTarget.blur();
        }
      }}
      spellCheck={false}
      type="text"
      value={draftText}
    />
  );
}

function FlowWorkbench() {
  const [nodes, setNodes, onNodesChange] = useNodesState<SimulationNode>([]);
  const [edges, setEdges, onEdgesChange] = useEdgesState<SimulationEdge>([]);
  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
  const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
  const [projectName, setProjectName] = useState("demo-system");
  const [simulationConfig, setSimulationConfig] = useState<SimulationConfig>(
    defaultSimulationConfig,
  );
  const [xmlText, setXmlText] = useState("");
  const [statusText, setStatusText] = useState("后端待调用");
  const [simulationResult, setSimulationResult] = useState<SimulationResult | null>(null);
  const [simulationResultSignature, setSimulationResultSignature] = useState("");
  const [resultSnapshot, setResultSnapshot] =
    useState<SimulationResultsSnapshot | null>(loadStoredResultSnapshot);
  const [hasUnreadResults, setHasUnreadResults] = useState(false);
  const [activeView, setActiveView] = useState<WorkspaceView>(
    workspaceViewFromLocation,
  );
  const [busy, setBusy] = useState(false);
  const [consoleEntries, setConsoleEntries] = useState<SimulationConsoleEntry[]>([]);
  const [consoleMode, setConsoleMode] = useState<SimulationConsoleMode>("minimized");
  const [consoleUnreadCount, setConsoleUnreadCount] = useState(0);
  const [simulationStopPending, setSimulationStopPending] = useState(false);
  const [simulationProgress, setSimulationProgress] = useState<SimulationProgressState>({
    state: "idle",
    percent: 0,
    message: "等待仿真任务",
    startTime: defaultSimulationConfig.t_start,
    simulatedTime: defaultSimulationConfig.t_start,
    totalTime: defaultSimulationConfig.t_stop,
  });
  const [snapEnabled, setSnapEnabled] = useState(true);
  const [gridVisibility, setGridVisibility] = useState<CanvasGridVisibility>(
    loadCanvasGridVisibility,
  );
  const [modelingPaneLayout, setModelingPaneLayout] =
    useState<ModelingPaneLayout>(loadModelingPaneLayout);
  const [activeModelingPaneResize, setActiveModelingPaneResize] =
    useState<ModelingPaneResizeKind | null>(null);
  const [validationIssues, setValidationIssues] = useState<ValidationIssue[]>([]);
  const [validatedSignature, setValidatedSignature] = useState("");
  const [saveState, setSaveState] = useState("正在检查本地草稿...");
  const [autosaveReady, setAutosaveReady] = useState(false);
  const [recoveryProject, setRecoveryProject] = useState<ReactFlowProjectPayload | null>(null);
  const [historyAvailability, setHistoryAvailability] = useState({
    canUndo: false,
    canRedo: false,
  });
  const reactFlow = useReactFlow<SimulationNode, SimulationEdge>();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const workbenchRef = useRef<HTMLElement>(null);
  const modelingPaneResizeRef = useRef<ModelingPaneResizeState | null>(null);
  const nodesRef = useRef(nodes);
  const edgesRef = useRef(edges);
  const projectNameRef = useRef(projectName);
  const simulationConfigRef = useRef(simulationConfig);
  const historyRef = useRef<EditorSnapshot[]>([]);
  const futureRef = useRef<EditorSnapshot[]>([]);
  const clipboardRef = useRef<EditorClipboard | null>(null);
  const pasteCountRef = useRef(0);
  const consoleModeRef = useRef<SimulationConsoleMode>("minimized");
  const consoleEntryIdRef = useRef(0);
  const activeSimulationIdRef = useRef<string | null>(null);

  nodesRef.current = nodes;
  edgesRef.current = edges;
  projectNameRef.current = projectName;
  simulationConfigRef.current = simulationConfig;
  consoleModeRef.current = consoleMode;

  useEffect(() => {
    try {
      localStorage.setItem(
        MODELING_PANE_LAYOUT_KEY,
        JSON.stringify(modelingPaneLayout),
      );
    } catch {
      // Resizing remains available when browser storage is unavailable.
    }
  }, [modelingPaneLayout]);

  useEffect(() => {
    try {
      localStorage.setItem(
        CANVAS_GRID_VISIBILITY_KEY,
        JSON.stringify(gridVisibility),
      );
    } catch {
      // Grid controls remain available when browser storage is unavailable.
    }
  }, [gridVisibility]);

  useLayoutEffect(() => {
    if (activeView !== "modeling") {
      return;
    }
    const workbench = workbenchRef.current;
    if (!workbench || typeof ResizeObserver === "undefined") {
      return;
    }
    const clampToWorkbench = (width: number) => {
      setModelingPaneLayout((current) => {
        const next = clampModelingPaneLayout(current, width);
        return next.paletteWidth === current.paletteWidth &&
          next.propertiesWidth === current.propertiesWidth
          ? current
          : next;
      });
    };
    clampToWorkbench(workbench.clientWidth);
    const observer = new ResizeObserver(([entry]) => {
      if (entry) {
        clampToWorkbench(entry.contentRect.width);
      }
    });
    observer.observe(workbench);
    return () => observer.disconnect();
  }, [activeView]);

  const setModelingPaneSize = (
    kind: ModelingPaneResizeKind,
    requestedWidth: number,
  ) => {
    const workbenchWidth = workbenchRef.current?.getBoundingClientRect().width;
    if (!workbenchWidth) {
      return;
    }
    setModelingPaneLayout((current) => {
      if (kind === "palette-width") {
        const maximum = Math.max(
          MIN_PALETTE_WIDTH,
          Math.min(
            MAX_PALETTE_WIDTH,
            workbenchWidth -
              current.propertiesWidth -
              MIN_MODELING_CANVAS_WIDTH -
              MODELING_PANE_SPLITTER_SIZE * 2,
          ),
        );
        return {
          ...current,
          paletteWidth: Math.min(
            maximum,
            Math.max(MIN_PALETTE_WIDTH, requestedWidth),
          ),
        };
      }
      const maximum = Math.max(
        MIN_PROPERTIES_WIDTH,
        Math.min(
          MAX_PROPERTIES_WIDTH,
          workbenchWidth -
            current.paletteWidth -
            MIN_MODELING_CANVAS_WIDTH -
            MODELING_PANE_SPLITTER_SIZE * 2,
        ),
      );
      return {
        ...current,
        propertiesWidth: Math.min(
          maximum,
          Math.max(MIN_PROPERTIES_WIDTH, requestedWidth),
        ),
      };
    });
  };

  const startModelingPaneResize = (
    event: ReactPointerEvent<HTMLDivElement>,
    kind: ModelingPaneResizeKind,
  ) => {
    event.preventDefault();
    modelingPaneResizeRef.current = {
      kind,
      pointerId: event.pointerId,
      startX: event.clientX,
      startWidth:
        kind === "palette-width"
          ? modelingPaneLayout.paletteWidth
          : modelingPaneLayout.propertiesWidth,
    };
    event.currentTarget.setPointerCapture(event.pointerId);
    setActiveModelingPaneResize(kind);
  };

  const moveModelingPaneResize = (
    event: ReactPointerEvent<HTMLDivElement>,
  ) => {
    const resize = modelingPaneResizeRef.current;
    if (!resize || resize.pointerId !== event.pointerId) {
      return;
    }
    event.preventDefault();
    const delta = event.clientX - resize.startX;
    setModelingPaneSize(
      resize.kind,
      resize.startWidth +
        (resize.kind === "palette-width" ? delta : -delta),
    );
  };

  const stopModelingPaneResize = (
    event: ReactPointerEvent<HTMLDivElement>,
  ) => {
    if (modelingPaneResizeRef.current?.pointerId !== event.pointerId) {
      return;
    }
    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
      event.currentTarget.releasePointerCapture(event.pointerId);
    }
    modelingPaneResizeRef.current = null;
    setActiveModelingPaneResize(null);
  };

  const resizeModelingPaneWithKeyboard = (
    event: ReactKeyboardEvent<HTMLDivElement>,
    kind: ModelingPaneResizeKind,
  ) => {
    if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") {
      return;
    }
    event.preventDefault();
    const direction = event.key === "ArrowRight" ? 1 : -1;
    const currentWidth =
      kind === "palette-width"
        ? modelingPaneLayout.paletteWidth
        : modelingPaneLayout.propertiesWidth;
    setModelingPaneSize(
      kind,
      currentWidth +
        MODELING_PANE_KEYBOARD_STEP *
          (kind === "palette-width" ? direction : -direction),
    );
  };

  const resetModelingPaneSize = (kind: ModelingPaneResizeKind) => {
    const defaults = defaultModelingPaneLayout();
    setModelingPaneSize(
      kind,
      kind === "palette-width"
        ? defaults.paletteWidth
        : defaults.propertiesWidth,
    );
  };

  const changeConsoleMode = useCallback((mode: SimulationConsoleMode) => {
    consoleModeRef.current = mode;
    setConsoleMode(mode);
    if (mode !== "minimized") {
      setConsoleUnreadCount(0);
    }
  }, []);

  const appendConsoleEntry = useCallback(
    (level: SimulationConsoleLevel, message: string) => {
      const entry: SimulationConsoleEntry = {
        id: ++consoleEntryIdRef.current,
        timestamp: new Date().toLocaleTimeString("zh-CN", { hour12: false }),
        level,
        message,
      };
      setConsoleEntries((currentEntries) => [
        ...currentEntries.slice(-399),
        entry,
      ]);
      if (consoleModeRef.current === "minimized") {
        setConsoleUnreadCount((count) => count + 1);
      }
    },
    [],
  );

  const changeWorkspaceView = useCallback((view: WorkspaceView) => {
    setActiveView(view);
    if (view === "results") {
      setHasUnreadResults(false);
    }
    const nextHash = view === "results" ? "#/results" : "#/modeling";
    if (window.location.hash !== nextHash) {
      window.history.pushState({ workspaceView: view }, "", nextHash);
    }
  }, []);

  const loadSimulationResultsSnapshot = useCallback(
    (snapshot: SimulationResultsSnapshot) => {
      setResultSnapshot(snapshot);
      storeResultSnapshot(snapshot);
      setSimulationResult(null);
      setSimulationResultSignature("");
      setStatusText(`已加载结果文件：${snapshot.project.name}`);
      changeWorkspaceView("results");
    },
    [changeWorkspaceView],
  );

  const nodeTypes = useMemo<NodeTypes>(
    () => ({ simulationComponent: SimulationComponentNode }),
    [],
  );

  const selectedNode = nodes.find((node) => node.id === selectedNodeId) ?? null;
  const selectedNodesForTools = nodes.filter(
    (node) => node.selected || node.id === selectedNodeId,
  );
  const allSelectedNodesMirrored =
    selectedNodesForTools.length > 0 &&
    selectedNodesForTools.every((node) => Boolean(node.data.mirrored));
  const selectedDefinition = selectedNode
    ? componentDefinitions.find((definition) => definition.type === selectedNode.data.componentType)
    : null;

  const buildCurrentProject = useCallback(
    () => buildProjectPayload(projectName, nodes, edges, simulationConfig),
    [edges, nodes, projectName, simulationConfig],
  );

  const validationSignature = useMemo(
    () => JSON.stringify(buildCurrentProject()),
    [buildCurrentProject],
  );
  const validationCurrent = validatedSignature === validationSignature;
  const simulationResultCurrent =
    Boolean(simulationResult) && simulationResultSignature === validationSignature;
  const duplicateNames = useMemo(() => findDuplicateNames(nodes), [nodes]);
  const validationSeverityByNode = useMemo(
    () => {
      const severities = new Map<string, ValidationIssue["severity"]>();
      if (!validationCurrent) {
        return severities;
      }
      validationIssues.forEach((issue) => {
        if (
          issue.nodeId &&
          (issue.severity === "error" || !severities.has(issue.nodeId))
        ) {
          severities.set(issue.nodeId, issue.severity);
        }
      });
      return severities;
    },
    [validationCurrent, validationIssues],
  );
  const renderedNodes = useMemo(
    () =>
      nodes.map((node) => ({
        ...node,
        className: validationSeverityByNode.has(node.id)
          ? `validation-${validationSeverityByNode.get(node.id)}`
          : node.className,
      })),
    [nodes, validationSeverityByNode],
  );
  const renderedEdges = useMemo(
    () =>
      edges.map((edge) => {
        const selected = edge.selected || edge.id === selectedEdgeId;
        const className = [edge.className, selected ? "editor-edge-selected" : ""]
          .filter(Boolean)
          .join(" ");
        return {
          ...edge,
          className: className || undefined,
          type: "step",
        };
      }),
    [edges, selectedEdgeId],
  );

  const updateHistoryAvailability = useCallback(() => {
    setHistoryAvailability({
      canUndo: historyRef.current.length > 0,
      canRedo: futureRef.current.length > 0,
    });
  }, []);

  const captureSnapshot = useCallback(
    (): EditorSnapshot => ({
      nodes: cloneValue(nodesRef.current),
      edges: cloneValue(edgesRef.current),
      projectName: projectNameRef.current,
      simulationConfig: { ...simulationConfigRef.current },
    }),
    [],
  );

  const recordHistory = useCallback(() => {
    const snapshot = captureSnapshot();
    const previous = historyRef.current.at(-1);
    if (!previous || snapshotSignature(previous) !== snapshotSignature(snapshot)) {
      historyRef.current.push(snapshot);
      if (historyRef.current.length > HISTORY_LIMIT) {
        historyRef.current.shift();
      }
    }
    futureRef.current = [];
    updateHistoryAvailability();
  }, [captureSnapshot, updateHistoryAvailability]);

  const finishHistoryEdit = useCallback(() => {
    const latest = historyRef.current.at(-1);
    if (latest && snapshotSignature(latest) === snapshotSignature(captureSnapshot())) {
      historyRef.current.pop();
      updateHistoryAvailability();
    }
  }, [captureSnapshot, updateHistoryAvailability]);

  const restoreSnapshot = useCallback(
    (snapshot: EditorSnapshot) => {
      const restoredNodes = cloneValue(snapshot.nodes).map((node) => ({
        ...node,
        selected: false,
      }));
      setNodes(restoredNodes);
      setEdges(cloneValue(snapshot.edges).map((edge) => ({ ...edge, selected: false })));
      setProjectName(snapshot.projectName);
      setSimulationConfig({ ...snapshot.simulationConfig });
      setSelectedNodeId(null);
      setSelectedEdgeId(null);
      setSimulationResult(null);
      setSimulationResultSignature("");
      setXmlText("");
      syncNextNodeNumbers(restoredNodes);
    },
    [setEdges, setNodes],
  );

  const undo = useCallback(() => {
    const previous = historyRef.current.pop();
    if (!previous) {
      return;
    }
    futureRef.current.push(captureSnapshot());
    restoreSnapshot(previous);
    updateHistoryAvailability();
    setStatusText("已撤销上一步操作");
  }, [captureSnapshot, restoreSnapshot, updateHistoryAvailability]);

  const redo = useCallback(() => {
    const next = futureRef.current.pop();
    if (!next) {
      return;
    }
    historyRef.current.push(captureSnapshot());
    restoreSnapshot(next);
    updateHistoryAvailability();
    setStatusText("已重做上一步操作");
  }, [captureSnapshot, restoreSnapshot, updateHistoryAvailability]);

  const rotateSelection = useCallback(() => {
    const selectedIds = new Set(
      nodesRef.current
        .filter((node) => node.selected || node.id === selectedNodeId)
        .map((node) => node.id),
    );
    if (selectedIds.size === 0) {
      setStatusText("请先选择需要旋转的组件");
      return;
    }
    recordHistory();
    setNodes((currentNodes) =>
      currentNodes.map((node) =>
        selectedIds.has(node.id) ? rotateNodeClockwise(node) : node,
      ),
    );
    setStatusText(`已顺时针旋转 ${selectedIds.size} 个组件`);
  }, [recordHistory, selectedNodeId, setNodes]);

  const mirrorSelection = useCallback(() => {
    const selectedNodes = nodesRef.current.filter(
      (node) => node.selected || node.id === selectedNodeId,
    );
    if (selectedNodes.length === 0) {
      setStatusText("请先选择需要镜像的组件");
      return;
    }
    const selectedIds = new Set(selectedNodes.map((node) => node.id));
    const nextMirrored = !selectedNodes.every((node) => Boolean(node.data.mirrored));
    recordHistory();
    setNodes((currentNodes) =>
      currentNodes.map((node) =>
        selectedIds.has(node.id)
          ? {
              ...node,
              data: {
                ...node.data,
                mirrored: nextMirrored,
              },
            }
          : node,
      ),
    );
    setStatusText(`${nextMirrored ? "已镜像" : "已取消镜像"} ${selectedIds.size} 个组件`);
  }, [recordHistory, selectedNodeId, setNodes]);

  const handleNodesChange = useCallback(
    (changes: NodeChange<SimulationNode>[]) => {
      if (changes.some((change) => change.type === "remove")) {
        recordHistory();
      }
      onNodesChange(changes);
    },
    [onNodesChange, recordHistory],
  );

  const handleEdgesChange = useCallback(
    (changes: EdgeChange<SimulationEdge>[]) => {
      if (changes.some((change) => change.type === "remove")) {
        recordHistory();
      }
      onEdgesChange(changes);
    },
    [onEdgesChange, recordHistory],
  );

  const onConnect = useCallback(
    (connection: Connection) => {
      recordHistory();
      setEdges((currentEdges) =>
        addEdge(
          {
            ...connection,
            id: `edge-${connection.source}-${connection.sourceHandle}-${connection.target}-${connection.targetHandle}-${Date.now()}`,
            type: "step",
          },
          currentEdges,
        ),
      );
    },
    [recordHistory, setEdges],
  );

  const isValidConnection = useCallback(
    (connection: Connection | SimulationEdge) => canConnectPorts(nodes, connection),
    [nodes],
  );

  const onDragStart = (event: DragEvent<HTMLButtonElement>, type: string) => {
    event.dataTransfer.setData("application/system-component", type);
    event.dataTransfer.effectAllowed = "move";
    const icon = event.currentTarget.querySelector<HTMLElement>(".palette-icon");
    if (icon) {
      const preview = document.createElement("div");
      const previewIcon = icon.cloneNode(true) as HTMLElement;
      const previewLabel = document.createElement("span");
      preview.className = "component-drag-preview";
      preview.setAttribute("aria-hidden", "true");
      previewLabel.className = "component-drag-preview-label";
      previewLabel.textContent = peekNextNodeId(type);
      preview.append(previewIcon, previewLabel);
      document.body.appendChild(preview);
      event.dataTransfer.setDragImage(
        preview,
        Math.round(preview.offsetWidth / 2),
        Math.round(preview.offsetHeight / 2),
      );
      window.setTimeout(() => preview.remove(), 0);
    }
  };

  const onDrop = useCallback(
    (event: DragEvent<HTMLDivElement>) => {
      event.preventDefault();
      const type = event.dataTransfer.getData("application/system-component");
      const definition = componentDefinitions.find((item) => item.type === type);
      if (!definition) {
        return;
      }

      const position = reactFlow.screenToFlowPosition({
        x: event.clientX,
        y: event.clientY,
      });
      const id = takeNextNodeId(definition.type);
      const node: SimulationNode = {
        id,
        type: "simulationComponent",
        position,
        data: { ...buildNodeData(definition), label: id },
      };
      recordHistory();
      setNodes((currentNodes) => [...currentNodes, node]);
      setSelectedNodeId(id);
    },
    [reactFlow, recordHistory, setNodes],
  );

  const updateSelectedNode = (updater: (node: SimulationNode) => SimulationNode) => {
    if (!selectedNodeId) {
      return;
    }
    setNodes((currentNodes) =>
      currentNodes.map((node) => (node.id === selectedNodeId ? updater(node) : node)),
    );
  };

  const updateSelectedParameter = (
    key: string,
    definition: ParameterDefinition,
    displayValue: string,
  ) => {
    const selectedUnit =
      selectedNode?.data.parameterUnits[key] ?? definition.unit ?? "";
    const unit = findUnitOption(definition, selectedUnit);
    const numericValue = Number(displayValue);
    const baseValue =
      displayValue.trim() === "" || !Number.isFinite(numericValue)
        ? displayValue
        : unit.toBase(numericValue);

    updateSelectedNode((node) => ({
      ...node,
      data: {
        ...node.data,
        parameters: {
          ...node.data.parameters,
          [key]: baseValue,
        },
      },
    }));
  };

  const updateSelectedParameterUnit = (key: string, unit: string) => {
    updateSelectedNode((node) => ({
      ...node,
      data: {
        ...node.data,
        parameterUnits: {
          ...node.data.parameterUnits,
          [key]: unit,
        },
      },
    }));
  };

  const copySelection = useCallback(() => {
    const selectedNodes = nodesRef.current.filter(
      (node) => node.selected || node.id === selectedNodeId,
    );
    if (selectedNodes.length === 0) {
      setStatusText("请先选择需要复制的组件");
      return;
    }
    const selectedIds = new Set(selectedNodes.map((node) => node.id));
    clipboardRef.current = {
      nodes: cloneValue(selectedNodes),
      edges: cloneValue(
        edgesRef.current.filter(
          (edge) => selectedIds.has(edge.source) && selectedIds.has(edge.target),
        ),
      ),
    };
    pasteCountRef.current = 0;
    setStatusText(`已复制 ${selectedNodes.length} 个组件`);
  }, [selectedNodeId]);

  const pasteSelection = useCallback(() => {
    const clipboard = clipboardRef.current;
    if (!clipboard || clipboard.nodes.length === 0) {
      setStatusText("剪贴板中没有可粘贴的组件");
      return;
    }

    recordHistory();
    pasteCountRef.current += 1;
    const offset = GRID_SIZE * 2 * pasteCountRef.current;
    const idMap = new Map<string, string>();
    const usedNames = new Set(nodesRef.current.map((node) => node.data.label.trim()));
    const pastedNodes = clipboard.nodes.map((node) => {
      const id = takeNextNodeId(node.data.componentType);
      idMap.set(node.id, id);
      const label = makeUniqueName(`${node.data.label}_副本`, usedNames);
      usedNames.add(label);
      return {
        ...cloneValue(node),
        id,
        position: {
          x: node.position.x + offset,
          y: node.position.y + offset,
        },
        selected: true,
        data: {
          ...cloneValue(node.data),
          label,
        },
      } satisfies SimulationNode;
    });
    const pastedEdges = clipboard.edges.map((edge, index) => ({
      ...cloneValue(edge),
      id: `edge-copy-${Date.now()}-${index}`,
      source: idMap.get(edge.source) as string,
      target: idMap.get(edge.target) as string,
      selected: false,
    }));

    setNodes((currentNodes) => [
      ...currentNodes.map((node) => ({ ...node, selected: false })),
      ...pastedNodes,
    ]);
    setEdges((currentEdges) => [
      ...currentEdges.map((edge) => ({ ...edge, selected: false })),
      ...pastedEdges,
    ]);
    setSelectedNodeId(pastedNodes.length === 1 ? pastedNodes[0].id : null);
    setSelectedEdgeId(null);
    setStatusText(`已粘贴 ${pastedNodes.length} 个组件`);
  }, [recordHistory, setEdges, setNodes]);

  const updateSimulationConfig = (key: keyof SimulationConfig, value: string) => {
    setSimulationConfig((current) => ({
      ...current,
      [key]: key === "method" ? value : Number(value),
    }));
  };

  const generateXml = () => {
    try {
      const xml = buildSystemXml(buildCurrentProject());
      setXmlText(xml);
      setStatusText(`XML 已生成：${nodes.length} 个组件，${edges.length} 条连接`);
    } catch (error) {
      setStatusText(`XML 生成失败：${formatError(error)}`);
    }
  };

  const downloadXml = () => {
    try {
      const xml = buildSystemXml(buildCurrentProject());
      setXmlText(xml);
      downloadText(`${safeFilename(projectName)}.xml`, xml);
      setStatusText("XML 已下载");
    } catch (error) {
      setStatusText(`XML 下载失败：${formatError(error)}`);
    }
  };

  const applyProject = useCallback(
    (project: ReactFlowProjectPayload, message: string, addToHistory = true) => {
      if (addToHistory) {
        recordHistory();
      }
      const loadedNodes = project.nodes.map(normalizeLoadedNode);
      setNodes(loadedNodes);
      setEdges(project.edges.map(normalizeLoadedEdge));
      setProjectName(project.name || "untitled");
      setSimulationConfig({ ...defaultSimulationConfig, ...project.simulation });
      setSelectedNodeId(null);
      setSelectedEdgeId(null);
      setSimulationResult(null);
      setSimulationResultSignature("");
      setValidationIssues([]);
      setValidatedSignature("");
      setXmlText("");
      syncNextNodeNumbers(loadedNodes);
      setStatusText(message);
      window.requestAnimationFrame(() => reactFlow.fitView({ padding: 0.18 }));
    },
    [reactFlow, recordHistory, setEdges, setNodes],
  );

  const saveProject = () => {
    try {
      const project = buildCurrentProject();
      localStorage.setItem(localProjectKey(project.name), JSON.stringify(project));
      localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(project));
      setSaveState(`已保存 ${formatTime(new Date())}`);
      setStatusText(
        `工程已保存到浏览器：${project.nodes.length} 个组件，${project.edges.length} 条连接`,
      );
    } catch (error) {
      setStatusText(`保存失败：${formatError(error)}`);
    }
  };

  const loadProject = () => {
    const name = projectName.trim() || "untitled";
    try {
      const project = parseProjectPayload(localStorage.getItem(localProjectKey(name)));
      if (!project) {
        setStatusText(`没有找到本地工程：${name}`);
        return;
      }
      applyProject(
        project,
        `工程已加载：${project.nodes.length} 个组件，${project.edges.length} 条连接`,
      );
    } catch (error) {
      setStatusText(`加载失败：${formatError(error)}`);
    }
  };

  const exportProject = () => {
    const project = buildCurrentProject();
    downloadFile(
      `${safeFilename(project.name)}.json`,
      JSON.stringify(project, null, 2),
      "application/json;charset=utf-8",
    );
    setStatusText("工程 JSON 已导出");
  };

  const importProject = async (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) {
      return;
    }
    try {
      const project = parseProjectPayload(await file.text());
      if (!project) {
        throw new Error("文件不是有效的 ReactFlow 工程 JSON");
      }
      applyProject(project, `已导入工程：${file.name}`);
    } catch (error) {
      setStatusText(`导入失败：${formatError(error)}`);
    }
  };

  const checkModel = useCallback(() => {
    const issues = validateModel(
      nodesRef.current,
      edgesRef.current,
      simulationConfigRef.current,
    );
    const signature = JSON.stringify(
      buildProjectPayload(
        projectNameRef.current,
        nodesRef.current,
        edgesRef.current,
        simulationConfigRef.current,
      ),
    );
    setValidationIssues(issues);
    setValidatedSignature(signature);
    const errorCount = issues.filter((issue) => issue.severity === "error").length;
    const warningCount = issues.length - errorCount;
    setStatusText(
      errorCount === 0
        ? warningCount === 0
          ? "模型检查通过"
          : `模型检查通过，存在 ${warningCount} 条警告`
        : `模型检查发现 ${errorCount} 个错误、${warningCount} 条警告`,
    );
    return issues;
  }, []);

  const focusValidationIssue = (issue: ValidationIssue) => {
    if (!issue.nodeId) {
      return;
    }
    const node = nodesRef.current.find((item) => item.id === issue.nodeId);
    if (!node) {
      return;
    }
    setNodes((currentNodes) =>
      currentNodes.map((item) => ({ ...item, selected: item.id === issue.nodeId })),
    );
    setSelectedNodeId(issue.nodeId);
    setSelectedEdgeId(null);
    reactFlow.setCenter(node.position.x, node.position.y, {
      duration: 250,
      zoom: Math.max(reactFlow.getZoom(), 1),
    });
  };

  const publishSimulationResult = (
    result: SimulationResult,
    project: ReactFlowProjectPayload,
  ) => {
    const resultStatus = result.status ?? (result.success ? "completed" : "failed");
    const sampleCount = Math.min(
      result.diagnostics.sampleCount,
      result.series.time?.length ?? 0,
    );
    const hasUsableSamples = sampleCount >= 2;
    const startTime = project.simulation.t_start;
    const finalSimulatedTime = Number.isFinite(result.simulatedUntil)
      ? result.simulatedUntil
      : startTime;
    const finalTotalTime = Number.isFinite(result.requestedStopTime)
      ? result.requestedStopTime
      : project.simulation.t_stop;
    const finalPercent =
      resultStatus === "completed"
        ? 100
        : simulationTimePercent(
            startTime,
            finalSimulatedTime,
            finalTotalTime,
          );
    const simulatedUntil = Number.isFinite(result.simulatedUntil)
      ? formatNumber(result.simulatedUntil)
      : "未知时间";
    const statusMessages = {
      completed: `仿真完成，已生成新的结果，共 ${sampleCount} 个采样点`,
      stopped: `仿真已手动终止，已保留计算至 ${simulatedUntil} s 的 ${sampleCount} 个采样点`,
      stalled: `仿真因进度异常而终止，已保留计算至 ${simulatedUntil} s 的 ${sampleCount} 个采样点`,
      failed: `仿真异常终止，已保留计算至 ${simulatedUntil} s 的 ${sampleCount} 个采样点`,
    } as const;
    const statusMessage = statusMessages[resultStatus];

    setStatusText(statusMessage);
    if (resultStatus === "completed") {
      setSimulationProgress({
        state: "success",
        percent: 100,
        message: "仿真完成，新结果可查看",
        startTime,
        simulatedTime: finalTotalTime,
        totalTime: finalTotalTime,
      });
      appendConsoleEntry(
        "success",
        `${statusMessage}，可在“结果”页签查看；最大方程残差 ${formatNumber(result.diagnostics.pressureFlow.maxScaledResidual)}`,
      );
    } else {
      setSimulationProgress((current) => ({
        ...current,
        state: resultStatus === "stopped" ? "warning" : "error",
        percent: finalPercent,
        message:
          resultStatus === "stopped"
            ? "仿真已停止"
            : resultStatus === "stalled"
              ? "仿真因进度异常终止"
              : "仿真异常终止",
        startTime,
        simulatedTime: finalSimulatedTime,
        totalTime: finalTotalTime,
      }));
      appendConsoleEntry(resultStatus === "stopped" ? "warning" : "error", statusMessage);
    }

    if (!hasUsableSamples) {
      appendConsoleEntry("warning", "有效计算步不足，未生成部分结果页面");
      return;
    }

    setSimulationResult(result);
    setSimulationResultSignature(JSON.stringify(project));
    const nextSnapshot: SimulationResultsSnapshot = {
      id: `simulation-${Date.now()}`,
      createdAt: new Date().toISOString(),
      project: cloneValue(project),
      result: cloneValue(result),
    };
    setResultSnapshot(nextSnapshot);
    storeResultSnapshot(nextSnapshot);
    setHasUnreadResults(true);
  };

  const stopSimulation = async () => {
    const simulationId = activeSimulationIdRef.current;
    if (!simulationId || simulationStopPending || simulationProgress.state !== "running") {
      return;
    }

    setSimulationStopPending(true);
    setSimulationProgress((current) => ({ ...current, message: "正在停止仿真" }));
    appendConsoleEntry("warning", "已请求停止仿真，正在等待当前积分步结束并整理部分结果");
    try {
      const response = await requestSimulationCancellation(simulationId, "user");
      if (!response.accepted) {
        appendConsoleEntry("info", "仿真任务已经结束，正在读取最终状态");
      }
    } catch (error) {
      setSimulationStopPending(false);
      setSimulationProgress((current) => ({
        ...current,
        message: "停止请求失败，仿真可能仍在运行",
      }));
      appendConsoleEntry("error", `停止仿真失败：${formatError(error)}`);
    }
  };

  const runSimulation = async () => {
    const issues = checkModel();
    const modelErrors = issues.filter((issue) => issue.severity === "error");
    if (modelErrors.length > 0) {
      changeConsoleMode("normal");
      setSimulationProgress({
        state: "error",
        percent: 0,
        message: "模型检查未通过",
        startTime: simulationConfigRef.current.t_start,
        simulatedTime: simulationConfigRef.current.t_start,
        totalTime: simulationConfigRef.current.t_stop,
      });
      appendConsoleEntry("error", `模型检查未通过，共 ${modelErrors.length} 个错误`);
      modelErrors.forEach((issue) => appendConsoleEntry("error", issue.message));
      return;
    }
    changeConsoleMode("normal");
    setSimulationProgress({
      state: "running",
      percent: 0,
      message: "正在提交仿真任务",
      startTime: simulationConfigRef.current.t_start,
      simulatedTime: simulationConfigRef.current.t_start,
      totalTime: simulationConfigRef.current.t_stop,
    });
    appendConsoleEntry(
      "info",
      `开始仿真：${projectNameRef.current || "untitled"}，时间范围 ${simulationConfigRef.current.t_start} - ${simulationConfigRef.current.t_stop} s`,
    );
    issues
      .filter((issue) => issue.severity === "warning")
      .forEach((issue) => appendConsoleEntry("warning", issue.message));

    await runBusyAction("正在编译模型并运行仿真...", async () => {
      const project = buildCurrentProject();
      const xml = buildSystemXml(project);
      const simulationId = createSimulationId();
      activeSimulationIdRef.current = simulationId;
      setSimulationStopPending(false);
      setXmlText(xml);
      let lastLoggedPhase = "";
      let lastLoggedBucket = -1;
      try {
        const result = await streamSystemSimulation(
          xml,
          (event) => {
            if (event.event !== "progress") {
              return;
            }
            const normalizedProgress = normalizeSimulationProgressEvent(
              event,
              project.simulation,
            );
            const reportsSimulationTime = ![
              "queued",
              "validation",
              "compilation",
              "initialization",
              "initializing",
            ].includes(event.phase);
            setSimulationProgress((current) => ({
              ...current,
              state: "running",
              percent: normalizedProgress.percent,
              message: event.message,
              simulatedTime: normalizedProgress.simulatedTime,
              totalTime: normalizedProgress.totalTime,
            }));
            const progressBucket = Math.floor(normalizedProgress.percent / 10);
            if (event.phase !== lastLoggedPhase || progressBucket !== lastLoggedBucket) {
              const progressDetail = reportsSimulationTime
                ? ` (${normalizedProgress.simulatedTime.toFixed(2)} s / ${normalizedProgress.totalTime.toFixed(2)} s，${normalizedProgress.percent}%)`
                : "";
              appendConsoleEntry("info", `${event.message}${progressDetail}`);
              lastLoggedPhase = event.phase;
              lastLoggedBucket = progressBucket;
            }
          },
          simulationId,
        );
        publishSimulationResult(result, project);
      } catch (error) {
        let failure: unknown = error;
        if (
          error instanceof SimulationStreamError &&
          (error.code === "STREAM_IDLE_TIMEOUT" || error.code === "SOLVER_STALLED")
        ) {
          setSimulationStopPending(true);
          appendConsoleEntry(
            "error",
            error.code === "SOLVER_STALLED"
              ? "求解器连续 60 秒没有接受新积分步，正在终止任务并恢复部分结果"
              : "超过 30 秒未收到后端数据，正在终止任务并恢复部分结果",
          );
          try {
            await requestSimulationCancellation(simulationId, "stalled");
            const task = await waitForSimulationTaskCompletion(simulationId);
            if (task.result) {
              publishSimulationResult(task.result, project);
              return;
            }
            if (task.error?.event === "error") {
              failure = new SimulationStreamError(
                task.error.message,
                [],
                task.error.status,
              );
            } else {
              failure = new SimulationStreamError("仿真异常终止且没有可恢复的部分结果");
            }
          } catch (recoveryError) {
            failure = recoveryError;
          }
        }

        const message = formatError(failure);
        setSimulationProgress((current) => ({
          ...current,
          state: "error",
          percent: current.percent,
          message: "仿真失败",
        }));
        appendConsoleEntry("error", `仿真失败：${message}`);
        if (failure instanceof SimulationStreamError) {
          failure.issues
            .filter((issue) => issue !== message)
            .forEach((issue) => appendConsoleEntry("error", issue));
        }
        throw failure;
      } finally {
        activeSimulationIdRef.current = null;
        setSimulationStopPending(false);
      }
    });
  };

  async function runBusyAction(message: string, action: () => Promise<void>) {
    setBusy(true);
    setStatusText(message);
    try {
      await action();
    } catch (error) {
      setStatusText(`操作失败：${formatError(error)}`);
    } finally {
      setBusy(false);
    }
  }

  const restoreRecoveryProject = () => {
    if (!recoveryProject) {
      return;
    }
    applyProject(recoveryProject, "已恢复上次自动保存的工程", false);
    setRecoveryProject(null);
    setAutosaveReady(true);
  };

  const discardRecoveryProject = () => {
    localStorage.removeItem(AUTOSAVE_KEY);
    setRecoveryProject(null);
    setAutosaveReady(true);
    setSaveState("尚未保存");
    setStatusText("已忽略上次的自动保存草稿");
  };

  const selectAllElements = useCallback(() => {
    setNodes((currentNodes) => currentNodes.map((node) => ({ ...node, selected: true })));
    setEdges((currentEdges) => currentEdges.map((edge) => ({ ...edge, selected: true })));
    setSelectedNodeId(null);
    setSelectedEdgeId(null);
  }, [setEdges, setNodes]);

  const deleteSelection = useCallback(() => {
    const nodeIds = new Set(
      nodesRef.current
        .filter((node) => node.selected || node.id === selectedNodeId)
        .map((node) => node.id),
    );
    const edgeIds = new Set(
      edgesRef.current
        .filter((edge) => edge.selected || edge.id === selectedEdgeId)
        .map((edge) => edge.id),
    );
    if (nodeIds.size === 0 && edgeIds.size === 0) {
      setStatusText("请先选择需要删除的组件或连接");
      return;
    }
    recordHistory();
    setNodes((currentNodes) => currentNodes.filter((node) => !nodeIds.has(node.id)));
    setEdges((currentEdges) =>
      currentEdges.filter(
        (edge) =>
          !edgeIds.has(edge.id) &&
          !nodeIds.has(edge.source) &&
          !nodeIds.has(edge.target),
      ),
    );
    setSelectedNodeId(null);
    setSelectedEdgeId(null);
    setStatusText(`已删除 ${nodeIds.size} 个组件和 ${edgeIds.size} 条连接`);
  }, [recordHistory, selectedEdgeId, selectedNodeId, setEdges, setNodes]);

  useEffect(() => {
    try {
      const project = parseProjectPayload(localStorage.getItem(AUTOSAVE_KEY));
      if (project && (project.nodes.length > 0 || project.edges.length > 0)) {
        setRecoveryProject(project);
        setSaveState("发现可恢复的本地草稿");
      } else {
        setAutosaveReady(true);
        setSaveState("尚未保存");
      }
    } catch {
      localStorage.removeItem(AUTOSAVE_KEY);
      setAutosaveReady(true);
      setSaveState("尚未保存");
    }
  }, []);

  useEffect(() => {
    if (!autosaveReady || recoveryProject) {
      return;
    }
    setSaveState("有未保存更改");
    const timer = window.setTimeout(() => {
      try {
        localStorage.setItem(AUTOSAVE_KEY, JSON.stringify(buildCurrentProject()));
        setSaveState(`已自动保存 ${formatTime(new Date())}`);
      } catch (error) {
        setSaveState(`自动保存失败：${formatError(error)}`);
      }
    }, 600);
    return () => window.clearTimeout(timer);
  }, [autosaveReady, buildCurrentProject, recoveryProject]);

  useEffect(() => {
    const syncViewFromLocation = () => {
      setActiveView(workspaceViewFromLocation());
    };
    window.addEventListener("hashchange", syncViewFromLocation);
    window.addEventListener("popstate", syncViewFromLocation);
    return () => {
      window.removeEventListener("hashchange", syncViewFromLocation);
      window.removeEventListener("popstate", syncViewFromLocation);
    };
  }, []);

  useEffect(() => {
    if (activeView === "results" && hasUnreadResults) {
      setHasUnreadResults(false);
    }
  }, [activeView, hasUnreadResults]);

  useEffect(() => {
    if (activeView !== "modeling") {
      return;
    }
    const handleKeyDown = (event: KeyboardEvent) => {
      const key = event.key.toLowerCase();
      if (event.ctrlKey && !event.shiftKey && key === "r") {
        event.preventDefault();
        rotateSelection();
        return;
      }
      if (isEditableTarget(event.target)) {
        return;
      }
      const commandKey = event.ctrlKey || event.metaKey;
      if (event.shiftKey && !commandKey && !event.altKey && key === "h") {
        event.preventDefault();
        mirrorSelection();
      } else if (commandKey && key === "z") {
        event.preventDefault();
        event.shiftKey ? redo() : undo();
      } else if (commandKey && key === "y") {
        event.preventDefault();
        redo();
      } else if (commandKey && key === "c") {
        event.preventDefault();
        copySelection();
      } else if (commandKey && key === "v") {
        event.preventDefault();
        pasteSelection();
      } else if (commandKey && key === "a") {
        event.preventDefault();
        selectAllElements();
      }
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [
    activeView,
    copySelection,
    mirrorSelection,
    pasteSelection,
    redo,
    rotateSelection,
    selectAllElements,
    undo,
  ]);

  const simulationConsole = (
    <SimulationConsole
      entries={consoleEntries}
      mode={consoleMode}
      onClear={() => setConsoleEntries([])}
      onModeChange={changeConsoleMode}
      onStop={() => void stopSimulation()}
      progress={simulationProgress}
      stopPending={simulationStopPending}
      unreadCount={consoleUnreadCount}
    />
  );

  if (activeView === "results") {
    return (
      <>
        {resultSnapshot ? (
          <SimulationResultsView
            key={resultSnapshot.id}
            nodeTypes={nodeTypes}
            onSnapshotLoad={loadSimulationResultsSnapshot}
            onViewChange={changeWorkspaceView}
            snapshot={resultSnapshot}
          />
        ) : (
          <EmptySimulationResultsView
            onSnapshotLoad={loadSimulationResultsSnapshot}
            onViewChange={changeWorkspaceView}
          />
        )}
        {simulationConsole}
      </>
    );
  }

  return (
    <>
      <div className="app-shell">
      <header className="topbar">
        <div>
          <div className="product-name">System Simulation Flow</div>
          <div className="product-meta">React Flow 建模与仿真 MVP</div>
        </div>
        <WorkspaceViewTabs
          activeView="modeling"
          hasResults={Boolean(resultSnapshot)}
          hasUnreadResults={hasUnreadResults}
          onViewChange={changeWorkspaceView}
        />
        <div className="topbar-actions">
          <label className="project-name-field">
            <span>工程</span>
            <input
              value={projectName}
              onChange={(event) => setProjectName(event.target.value)}
              onBlur={finishHistoryEdit}
              onFocus={recordHistory}
            />
          </label>
          <span className="save-indicator">{saveState}</span>
          <input
            accept="application/json,.json"
            className="visually-hidden"
            onChange={importProject}
            ref={fileInputRef}
            type="file"
          />
        </div>
      </header>

      <nav aria-label="工程与绘图工具" className="editor-toolbar">
        <div aria-label="工程文件" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={busy}
            icon={Save}
            label="保存工程"
            onClick={saveProject}
          />
          <ToolbarButton
            disabled={busy}
            icon={FolderOpen}
            label="加载工程"
            onClick={loadProject}
          />
          <ToolbarButton
            icon={FileDown}
            label="导出工程 JSON"
            onClick={exportProject}
          />
          <ToolbarButton
            icon={FileUp}
            label="导入工程 JSON"
            onClick={() => fileInputRef.current?.click()}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="系统 XML" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={busy}
            icon={FileCode2}
            label="生成系统 XML"
            onClick={generateXml}
          />
          <ToolbarButton
            disabled={busy}
            icon={Download}
            label="下载系统 XML"
            onClick={downloadXml}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="历史记录" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={!historyAvailability.canUndo}
            icon={Undo2}
            label="撤销 (Ctrl+Z)"
            onClick={undo}
          />
          <ToolbarButton
            disabled={!historyAvailability.canRedo}
            icon={Redo2}
            label="重做 (Ctrl+Y)"
            onClick={redo}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="编辑" className="toolbar-group" role="group">
          <ToolbarButton icon={Copy} label="复制 (Ctrl+C)" onClick={copySelection} />
          <ToolbarButton icon={ClipboardPaste} label="粘贴 (Ctrl+V)" onClick={pasteSelection} />
          <ToolbarButton icon={Trash2} label="删除 (Delete)" onClick={deleteSelection} />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="组件变换" className="toolbar-group" role="group">
          <ToolbarButton
            disabled={selectedNodesForTools.length === 0}
            icon={RotateCw}
            label="顺时针旋转 90° (Ctrl+R)"
            onClick={rotateSelection}
          />
          <ToolbarButton
            disabled={selectedNodesForTools.length === 0}
            icon={FlipHorizontal2}
            label="水平镜像 (Shift+H)"
            onClick={mirrorSelection}
            pressed={allSelectedNodesMirrored}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="画布显示" className="toolbar-group" role="group">
          <ToolbarButton
            icon={Magnet}
            label={snapEnabled ? "关闭网格吸附" : "开启网格吸附"}
            onClick={() => setSnapEnabled((enabled) => !enabled)}
            pressed={snapEnabled}
          />
          <ToolbarButton
            icon={Grid2X2}
            label={gridVisibility.lines ? "隐藏主网格线" : "显示主网格线"}
            onClick={() =>
              setGridVisibility((current) => ({
                ...current,
                lines: !current.lines,
              }))
            }
            pressed={gridVisibility.lines}
          />
          <ToolbarButton
            icon={Grip}
            label={gridVisibility.dots ? "隐藏网格点" : "显示网格点"}
            onClick={() =>
              setGridVisibility((current) => ({
                ...current,
                dots: !current.dots,
              }))
            }
            pressed={gridVisibility.dots}
          />
          <ToolbarButton
            icon={Maximize2}
            label="适配视图"
            onClick={() => reactFlow.fitView({ padding: 0.18 })}
          />
        </div>
        <span aria-hidden="true" className="toolbar-separator" />
        <div aria-label="模型检查与仿真" className="toolbar-group" role="group">
          <ToolbarButton
            accent
            icon={ListChecks}
            label="检查模型"
            onClick={checkModel}
          />
          <ToolbarButton
            disabled={busy}
            icon={Play}
            label="运行仿真"
            onClick={runSimulation}
            primary
          />
        </div>
      </nav>

      <main
        className={`workbench ${activeModelingPaneResize ? `resizing-${activeModelingPaneResize}` : ""}`}
        ref={workbenchRef}
        style={
          {
            "--palette-width": `${modelingPaneLayout.paletteWidth}px`,
            "--properties-width": `${modelingPaneLayout.propertiesWidth}px`,
          } as CSSProperties
        }
      >
        <aside className="palette">
          <div className="panel-title">组件库</div>
          <div className="palette-list">
            {componentDefinitions.map((definition) => (
              <button
                className="palette-item"
                draggable
                key={definition.type}
                onDragStart={(event) => onDragStart(event, definition.type)}
                type="button"
              >
                <span className={`palette-icon icon-${definition.type}`} />
                <span>
                  <strong>{definition.label}</strong>
                  <small>{definition.ports.map((port) => port.name).join(" / ") || "无端口"}</small>
                </span>
              </button>
            ))}
          </div>
        </aside>

        <div
          aria-label="调整组件库宽度"
          aria-orientation="vertical"
          aria-valuemax={MAX_PALETTE_WIDTH}
          aria-valuemin={MIN_PALETTE_WIDTH}
          aria-valuenow={Math.round(modelingPaneLayout.paletteWidth)}
          className="modeling-pane-splitter"
          onDoubleClick={() => resetModelingPaneSize("palette-width")}
          onKeyDown={(event) =>
            resizeModelingPaneWithKeyboard(event, "palette-width")
          }
          onLostPointerCapture={stopModelingPaneResize}
          onPointerCancel={stopModelingPaneResize}
          onPointerDown={(event) =>
            startModelingPaneResize(event, "palette-width")
          }
          onPointerMove={moveModelingPaneResize}
          onPointerUp={stopModelingPaneResize}
          role="separator"
          tabIndex={0}
          title="拖动调整组件库宽度，双击恢复默认"
        >
          <span aria-hidden="true" />
        </div>

        <section
          className="flow-canvas"
          onDragOver={(event) => {
            event.preventDefault();
            event.dataTransfer.dropEffect = "move";
          }}
          onDrop={onDrop}
        >
          <ReactFlow
            colorMode="light"
            connectionMode={ConnectionMode.Loose}
            connectionLineType={ConnectionLineType.Step}
            connectionRadius={24}
            defaultEdgeOptions={{ interactionWidth: 28, type: "step" }}
            edges={renderedEdges}
            fitView
            nodeTypes={nodeTypes}
            nodes={renderedNodes}
            deleteKeyCode={["Backspace", "Delete"]}
            onConnect={onConnect}
            isValidConnection={isValidConnection}
            onEdgeClick={(_, edge) => {
              setSelectedEdgeId(edge.id);
              setSelectedNodeId(null);
            }}
            onEdgesChange={handleEdgesChange}
            onEdgesDelete={() => setSelectedEdgeId(null)}
            onNodeClick={(_, node) => {
              setSelectedNodeId(node.id);
              setSelectedEdgeId(null);
            }}
            onNodeDragStart={recordHistory}
            onNodesChange={handleNodesChange}
            onNodesDelete={() => setSelectedNodeId(null)}
            onPaneClick={() => {
              setSelectedNodeId(null);
              setSelectedEdgeId(null);
            }}
            onSelectionChange={({ nodes: selectedNodes, edges: selectedEdges }) => {
              setSelectedNodeId(selectedNodes.length === 1 ? selectedNodes[0].id : null);
              setSelectedEdgeId(
                selectedNodes.length === 0 && selectedEdges.length === 1
                  ? selectedEdges[0].id
                  : null,
              );
            }}
            panActivationKeyCode="Space"
            panOnDrag={[1]}
            selectionMode={SelectionMode.Partial}
            selectionOnDrag
            snapGrid={[GRID_SIZE, GRID_SIZE]}
            snapToGrid={snapEnabled}
            zoomOnDoubleClick={false}
          >
            {gridVisibility.lines ? (
              <Background
                color="#d6e0ea"
                gap={GRID_SIZE * 5}
                id="major-grid-lines"
                lineWidth={1}
                variant={BackgroundVariant.Lines}
              />
            ) : null}
            {gridVisibility.dots ? (
              <Background
                color="#c4d0dd"
                gap={GRID_SIZE}
                id="minor-grid-dots"
                size={1}
                variant={BackgroundVariant.Dots}
              />
            ) : null}
            <Controls />
            {recoveryProject ? (
              <Panel className="recovery-banner" position="top-center">
                <span>检测到上次自动保存的工程</span>
                <button onClick={restoreRecoveryProject} type="button">恢复</button>
                <button onClick={discardRecoveryProject} type="button">忽略</button>
              </Panel>
            ) : null}
          </ReactFlow>
        </section>

        <div
          aria-label="调整参数面板宽度"
          aria-orientation="vertical"
          aria-valuemax={MAX_PROPERTIES_WIDTH}
          aria-valuemin={MIN_PROPERTIES_WIDTH}
          aria-valuenow={Math.round(modelingPaneLayout.propertiesWidth)}
          className="modeling-pane-splitter"
          onDoubleClick={() => resetModelingPaneSize("properties-width")}
          onKeyDown={(event) =>
            resizeModelingPaneWithKeyboard(event, "properties-width")
          }
          onLostPointerCapture={stopModelingPaneResize}
          onPointerCancel={stopModelingPaneResize}
          onPointerDown={(event) =>
            startModelingPaneResize(event, "properties-width")
          }
          onPointerMove={moveModelingPaneResize}
          onPointerUp={stopModelingPaneResize}
          role="separator"
          tabIndex={0}
          title="拖动调整参数面板宽度，双击恢复默认"
        >
          <span aria-hidden="true" />
        </div>

        <aside className="properties">
          <div className="status-strip">{statusText}</div>

          {validationIssues.length > 0 ? (
            <div className="validation-section">
              <div className="validation-heading">
                <strong>模型检查</strong>
                {!validationCurrent ? <span>结果已过期</span> : null}
              </div>
              <div className="validation-list">
                {validationIssues.map((issue) => (
                  <button
                    className={`validation-item ${issue.severity}`}
                    disabled={!issue.nodeId}
                    key={issue.id}
                    onClick={() => focusValidationIssue(issue)}
                    type="button"
                  >
                    <span>{issue.severity === "error" ? "错误" : "警告"}</span>
                    <strong>{issue.message}</strong>
                  </button>
                ))}
              </div>
            </div>
          ) : null}

          <div className="panel-title">组件参数</div>
          {selectedNode && selectedDefinition ? (
            <div className="parameter-form">
              <label
                className={`field ${
                  !selectedNode.data.label.trim() ||
                  duplicateNames.has(selectedNode.data.label.trim())
                    ? "invalid"
                    : ""
                }`}
              >
                <span>组件名称</span>
                <input
                  aria-invalid={
                    !selectedNode.data.label.trim() ||
                    duplicateNames.has(selectedNode.data.label.trim())
                  }
                  value={selectedNode.data.label}
                  onChange={(event) =>
                    updateSelectedNode((node) => ({
                      ...node,
                      data: { ...node.data, label: event.target.value },
                    }))
                  }
                  onBlur={finishHistoryEdit}
                  onFocus={recordHistory}
                />
                {!selectedNode.data.label.trim() ? (
                  <small className="field-error">组件名称不能为空</small>
                ) : duplicateNames.has(selectedNode.data.label.trim()) ? (
                  <small className="field-error">组件名称不能重复</small>
                ) : null}
              </label>
              <div className="node-id">{selectedNode.id}</div>
              {Object.entries(selectedDefinition.parameters).map(([key, definition]) => {
                const selectedUnit =
                  selectedNode.data.parameterUnits[key] ?? definition.unit ?? "";
                const units = definition.quantity ? unitOptions[definition.quantity] : [];
                const baseValue = selectedNode.data.parameters[key] ?? "";
                const displayValue = displayParameterValue(baseValue, definition, selectedUnit);
                const error = parameterValidationMessage(definition, baseValue);
                return (
                  <div className={`field ${error ? "invalid" : ""}`} key={key}>
                    <span>{definition.label}</span>
                    <div className={`parameter-control ${units.length === 0 ? "unitless" : ""}`}>
                      <DeferredNumberInput
                        ariaLabel={definition.label}
                        invalid={Boolean(error)}
                        onCommit={(value) =>
                          updateSelectedParameter(key, definition, value)
                        }
                        onEditEnd={finishHistoryEdit}
                        onEditStart={recordHistory}
                        value={displayValue}
                      />
                      {units.length > 0 ? (
                        <select
                          aria-label={`${definition.label}单位`}
                          onChange={(event) =>
                            updateSelectedParameterUnit(key, event.target.value)
                          }
                          onBlur={finishHistoryEdit}
                          onFocus={recordHistory}
                          value={selectedUnit}
                        >
                          {units.map((unit) => (
                            <option key={unit.value} value={unit.value}>
                              {unit.label}
                            </option>
                          ))}
                        </select>
                      ) : null}
                    </div>
                    {error ? <small className="field-error">{error}</small> : null}
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="empty-state">选择画布上的组件后编辑参数</div>
          )}

          <div className="panel-title">仿真设置</div>
          <div className="parameter-form compact-form">
            <label className="field">
              <span>起始时间</span>
              <DeferredNumberInput
                value={simulationConfig.t_start}
                onCommit={(value) => updateSimulationConfig("t_start", value)}
                onEditEnd={finishHistoryEdit}
                onEditStart={recordHistory}
              />
            </label>
            <label className="field">
              <span>结束时间</span>
              <DeferredNumberInput
                value={simulationConfig.t_stop}
                onCommit={(value) => updateSimulationConfig("t_stop", value)}
                onEditEnd={finishHistoryEdit}
                onEditStart={recordHistory}
              />
            </label>
            <label className="field">
              <span>采样步长</span>
              <DeferredNumberInput
                value={simulationConfig.step}
                onCommit={(value) => updateSimulationConfig("step", value)}
                onEditEnd={finishHistoryEdit}
                onEditStart={recordHistory}
              />
            </label>
            <label className="field">
              <span>最大积分步长</span>
              <DeferredNumberInput
                value={simulationConfig.max_step}
                onCommit={(value) => updateSimulationConfig("max_step", value)}
                onEditEnd={finishHistoryEdit}
                onEditStart={recordHistory}
              />
            </label>
            <label className="field">
              <span>求解器</span>
              <select
                value={simulationConfig.method}
                onChange={(event) => updateSimulationConfig("method", event.target.value)}
                onBlur={finishHistoryEdit}
                onFocus={recordHistory}
              >
                {SUPPORTED_SOLVER_METHODS.map((method) => (
                  <option key={method} value={method}>{method}</option>
                ))}
              </select>
            </label>
          </div>

          {simulationResult ? (
            <>
              <div className="panel-title result-title">
                <span>仿真结果</span>
                {!simulationResultCurrent ? <small>结果已过期</small> : null}
              </div>
              <div className="result-section">
                <div className="result-grid">
                  <span>结束时间</span>
                  <strong>{formatNumber(simulationResult.series.time.at(-1) ?? Number.NaN)} s</strong>
                  <span>采样点</span>
                  <strong>{simulationResult.diagnostics.sampleCount}</strong>
                  <span>状态数</span>
                  <strong>{simulationResult.diagnostics.stateCount}</strong>
                  <span>最大方程残差</span>
                  <strong>
                    {formatNumber(
                      simulationResult.diagnostics.pressureFlow.maxScaledResidual,
                    )}
                  </strong>
                </div>
                {nodes
                  .filter((node) => ["cylinder", "tank"].includes(node.data.modelType))
                  .map((node) => (
                    <div className="component-result" key={node.id}>
                      <strong>{node.data.label}</strong>
                      <div className="result-grid">
                        <span>压力</span>
                        <strong>
                          {formatNumber(simulationResult.final[`${node.id}.p`])} Pa
                        </strong>
                        <span>温度</span>
                        <strong>
                          {formatNumber(simulationResult.final[`${node.id}.T`])} K
                        </strong>
                        <span>质量</span>
                        <strong>
                          {formatNumber(simulationResult.final[`${node.id}.m`])} kg
                        </strong>
                      </div>
                    </div>
                  ))}
                <div className="run-message">{simulationResult.message}</div>
              </div>
            </>
          ) : null}

          {xmlText ? (
            <>
              <div className="panel-title">系统 XML</div>
              <textarea className="xml-output" readOnly value={xmlText} />
            </>
          ) : null}
        </aside>
        </main>
      </div>
      {simulationConsole}
    </>
  );
}

function buildProjectPayload(
  name: string,
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  simulation: SimulationConfig,
): ReactFlowProjectPayload {
  return {
    name: name.trim() || "untitled",
    nodes: nodes.map((node) => ({
      id: node.id,
      type: "simulationComponent",
      position: {
        x: node.position.x,
        y: node.position.y,
      },
      data: {
        label: node.data.label,
        componentType: node.data.componentType,
        modelType: node.data.modelType,
        ports: node.data.ports.map((port) => ({ ...port })),
        parameters: { ...node.data.parameters },
        parameterUnits: { ...node.data.parameterUnits },
        rotation: normalizeNodeRotation(node.data.rotation),
        mirrored: Boolean(node.data.mirrored),
      },
    })),
    edges: edges.map((edge) => ({
      id: edge.id,
      source: edge.source,
      target: edge.target,
      sourceHandle: edge.sourceHandle ?? null,
      targetHandle: edge.targetHandle ?? null,
    })),
    simulation,
  };
}

function normalizeLoadedNode(node: ProjectNodePayload): SimulationNode {
  const definition =
    componentDefinitions.find((item) => item.type === node.data.componentType) ??
    componentDefinitions.find((item) => item.modelType === node.data.modelType);
  const parameters = definition
    ? { ...defaultParameters(definition), ...node.data.parameters }
    : { ...node.data.parameters };
  const parameterUnits = definition
    ? { ...defaultParameterUnits(definition), ...(node.data.parameterUnits ?? {}) }
    : { ...(node.data.parameterUnits ?? {}) };

  return {
    id: node.id,
    type: "simulationComponent",
    position: {
      x: node.position?.x ?? 0,
      y: node.position?.y ?? 0,
    },
    data: {
      label: node.data.label || definition?.label || node.id,
      componentType: node.data.componentType || definition?.type || "component",
      modelType: node.data.modelType || definition?.modelType || node.data.componentType,
      ports: normalizeLoadedPorts(node.data.ports, definition),
      parameters,
      parameterUnits,
      rotation: normalizeNodeRotation(node.data.rotation),
      mirrored: Boolean(node.data.mirrored),
    },
  };
}

function normalizeLoadedPorts(
  rawPorts: unknown,
  definition?: ComponentDefinition,
): PortDefinition[] {
  if (!Array.isArray(rawPorts) || rawPorts.length === 0) {
    return definition?.ports.map((port) => ({ ...port })) ?? [];
  }

  return rawPorts.flatMap((rawPort, index) => {
    const record =
      rawPort !== null && typeof rawPort === "object"
        ? (rawPort as Record<string, unknown>)
        : undefined;
    const name = typeof rawPort === "string" ? rawPort : record?.name;
    if (typeof name !== "string" || !name.trim()) {
      return [];
    }

    const registered = definition?.ports.find((port) => port.name === name);
    const kind: PortKind =
      record?.kind === "signal" || record?.kind === "physical"
        ? record.kind
        : registered?.kind ?? "physical";
    const nominalRole = isPortNominalRole(record?.nominalRole)
      ? record.nominalRole
      : registered?.nominalRole ?? legacyPortRole(name);
    const side: PortSide =
      record?.side === "left" || record?.side === "right"
        ? record.side
        : registered?.side ?? (index === 0 ? "left" : "right");

    return [
      {
        name,
        kind,
        domain:
          typeof record?.domain === "string" && record.domain.trim()
            ? record.domain
            : registered?.domain ?? (kind === "physical" ? "pneumatic" : "signal"),
        nominalRole,
        ...(kind === "physical" ? { positiveFlowDirection: "intoComponent" as const } : {}),
        side,
      },
    ];
  });
}

function isPortNominalRole(value: unknown): value is PortNominalRole {
  return ["inlet", "outlet", "bidirectional", "input", "output"].includes(
    String(value),
  );
}

function legacyPortRole(name: string): PortNominalRole {
  if (name.includes("out") || name === "port_b") {
    return "outlet";
  }
  if (name.includes("in") || name === "port_a") {
    return "inlet";
  }
  return "bidirectional";
}

function findNodePort(
  nodes: SimulationNode[],
  componentId: string | null,
  portName: string | null,
) {
  if (!componentId || !portName) {
    return undefined;
  }
  return nodes
    .find((node) => node.id === componentId)
    ?.data.ports.find((port) => port.name === portName);
}

function arePortsCompatible(first: PortDefinition, second: PortDefinition) {
  if (first.kind !== second.kind) {
    return false;
  }
  if (first.kind === "physical") {
    return first.domain === second.domain;
  }
  return new Set([first.nominalRole, second.nominalRole]).size === 2 &&
    [first.nominalRole, second.nominalRole].every((role) =>
      role === "input" || role === "output",
    );
}

function canConnectPorts(
  nodes: SimulationNode[],
  connection: Connection | SimulationEdge,
) {
  if (
    !connection.source ||
    !connection.target ||
    connection.source === connection.target
  ) {
    return false;
  }
  const first = findNodePort(nodes, connection.source, connection.sourceHandle ?? null);
  const second = findNodePort(nodes, connection.target, connection.targetHandle ?? null);
  return Boolean(first && second && arePortsCompatible(first, second));
}

function connectionIdentity(edge: SimulationEdge, unordered: boolean) {
  const endpoints = [
    `${edge.source}:${edge.sourceHandle ?? ""}`,
    `${edge.target}:${edge.targetHandle ?? ""}`,
  ];
  if (unordered) {
    endpoints.sort();
  }
  return endpoints.join(unordered ? "--" : "->");
}

function normalizeLoadedEdge(edge: ProjectEdgePayload): SimulationEdge {
  return {
    id: edge.id,
    source: edge.source,
    target: edge.target,
    sourceHandle: edge.sourceHandle,
    targetHandle: edge.targetHandle,
    type: "step",
  };
}

function takeNextNodeId(componentType: string) {
  const nextNumber = nextNodeNumberByType[componentType] ?? 1;
  nextNodeNumberByType[componentType] = nextNumber + 1;
  return `${componentType}_${nextNumber}`;
}

function peekNextNodeId(componentType: string) {
  return `${componentType}_${nextNodeNumberByType[componentType] ?? 1}`;
}

function syncNextNodeNumbers(nodes: SimulationNode[]) {
  Object.keys(nextNodeNumberByType).forEach((type) => {
    delete nextNodeNumberByType[type];
  });

  nodes.forEach((node) => {
    const componentType = node.data.componentType;
    const idPrefix = `${componentType}_`;
    if (!node.id.startsWith(idPrefix)) {
      return;
    }

    const nodeNumber = Number(node.id.slice(idPrefix.length));
    if (!Number.isInteger(nodeNumber) || nodeNumber < 1) {
      return;
    }

    nextNodeNumberByType[componentType] = Math.max(
      nextNodeNumberByType[componentType] ?? 1,
      nodeNumber + 1,
    );
  });
}

function findUnitOption(definition: ParameterDefinition, unitValue: string) {
  if (!definition.quantity) {
    return { value: "", label: "", toBase: identityUnit, fromBase: identityUnit };
  }
  return (
    unitOptions[definition.quantity].find((unit) => unit.value === unitValue) ??
    unitOptions[definition.quantity][0]
  );
}

function displayParameterValue(
  baseValue: ParameterValue,
  definition: ParameterDefinition,
  selectedUnit: string,
) {
  if (typeof baseValue === "string" && baseValue.trim() === "") {
    return "";
  }
  const numericValue = Number(baseValue);
  if (!Number.isFinite(numericValue)) {
    return String(baseValue);
  }
  return formatEditableNumber(findUnitOption(definition, selectedUnit).fromBase(numericValue));
}

function formatEditableNumber(value: number) {
  if (!Number.isFinite(value)) {
    return "";
  }
  return Number(value.toPrecision(12)).toString();
}

function parameterValidationMessage(
  definition: ParameterDefinition,
  value: ParameterValue,
) {
  if (typeof value === "string" && value.trim() === "") {
    return "参数不能为空";
  }
  const numericValue = Number(value);
  if (!Number.isFinite(numericValue)) {
    return "请输入有效数字";
  }
  if (
    definition.min !== undefined &&
    (definition.minExclusive ? numericValue <= definition.min : numericValue < definition.min)
  ) {
    return definition.minExclusive
      ? `必须大于 ${definition.min}`
      : `不能小于 ${definition.min}`;
  }
  if (definition.max !== undefined && numericValue > definition.max) {
    return `不能大于 ${definition.max}`;
  }
  return "";
}

function findDuplicateNames(nodes: SimulationNode[]) {
  const counts = new Map<string, number>();
  nodes.forEach((node) => {
    const name = node.data.label.trim();
    if (name) {
      counts.set(name, (counts.get(name) ?? 0) + 1);
    }
  });
  return new Set(
    [...counts.entries()].filter(([, count]) => count > 1).map(([name]) => name),
  );
}

function validateModel(
  nodes: SimulationNode[],
  edges: SimulationEdge[],
  simulation: SimulationConfig,
) {
  const issues: ValidationIssue[] = [];
  let issueNumber = 0;
  const addIssue = (
    severity: ValidationIssue["severity"],
    message: string,
    location: Pick<ValidationIssue, "nodeId" | "edgeId"> = {},
  ) => {
    issueNumber += 1;
    issues.push({ id: `validation-${issueNumber}`, severity, message, ...location });
  };

  if (nodes.length === 0) {
    addIssue("error", "画布中没有组件");
  }

  const nodeMap = new Map(nodes.map((node) => [node.id, node]));
  const duplicateNames = findDuplicateNames(nodes);
  nodes.forEach((node) => {
    const definition = componentDefinitions.find(
      (item) => item.type === node.data.componentType,
    );
    if (!node.data.label.trim()) {
      addIssue("error", `${node.id} 的组件名称为空`, { nodeId: node.id });
    } else if (duplicateNames.has(node.data.label.trim())) {
      addIssue("error", `组件名称“${node.data.label.trim()}”重复`, { nodeId: node.id });
    }
    if (!definition) {
      addIssue("error", `${node.id} 的组件类型不受支持`, { nodeId: node.id });
      return;
    }
    Object.entries(definition.parameters).forEach(([key, parameter]) => {
      const message = parameterValidationMessage(parameter, node.data.parameters[key] ?? "");
      if (message) {
        addIssue("error", `${node.data.label}：${parameter.label}${message}`, {
          nodeId: node.id,
        });
      }
    });
    definition.ports.forEach((port) => {
      const connectionCount = edges.filter(
        (edge) =>
          (edge.source === node.id && edge.sourceHandle === port.name) ||
          (edge.target === node.id && edge.targetHandle === port.name),
      ).length;
      if (connectionCount === 0) {
        addIssue("error", `${node.data.label} 的端口 ${port.name} 未连接`, { nodeId: node.id });
      } else if (connectionCount > 1) {
        addIssue("error", `${node.data.label} 的端口 ${port.name} 存在多条连接`, {
          nodeId: node.id,
        });
      }
    });
  });

  const connectionKeys = new Set<string>();
  edges.forEach((edge) => {
    const source = nodeMap.get(edge.source);
    const target = nodeMap.get(edge.target);
    if (!source || !target) {
      addIssue("error", `连接 ${edge.id} 引用了不存在的组件`, { edgeId: edge.id });
      return;
    }
    const sourcePort = source.data.ports.find((port) => port.name === edge.sourceHandle);
    const targetPort = target.data.ports.find((port) => port.name === edge.targetHandle);
    if (!sourcePort) {
      addIssue("error", `连接 ${edge.id} 的源端口无效`, {
        edgeId: edge.id,
        nodeId: source.id,
      });
    }
    if (!targetPort) {
      addIssue("error", `连接 ${edge.id} 的目标端口无效`, {
        edgeId: edge.id,
        nodeId: target.id,
      });
    }
    if (sourcePort && targetPort && !arePortsCompatible(sourcePort, targetPort)) {
      addIssue("error", `连接 ${edge.id} 的端口类型或物理域不兼容`, { edgeId: edge.id });
    }
    const key = connectionIdentity(edge, sourcePort?.kind === "physical");
    if (connectionKeys.has(key)) {
      addIssue("warning", "检测到重复连接", { edgeId: edge.id });
    }
    connectionKeys.add(key);
  });

  if (!Number.isFinite(simulation.t_start) || !Number.isFinite(simulation.t_stop)) {
    addIssue("error", "仿真起止时间必须是有效数字");
  } else if (simulation.t_stop <= simulation.t_start) {
    addIssue("error", "仿真结束时间必须大于起始时间");
  }
  if (!Number.isFinite(simulation.step) || simulation.step <= 0) {
    addIssue("error", "采样步长必须大于 0");
  }
  if (!Number.isFinite(simulation.max_step) || simulation.max_step <= 0) {
    addIssue("error", "最大积分步长必须大于 0");
  }
  if (!SUPPORTED_SOLVER_METHODS.includes(simulation.method)) {
    addIssue("error", "求解器不受支持");
  }

  return issues;
}

function workspaceViewFromLocation(): WorkspaceView {
  return window.location.hash === "#/results" ? "results" : "modeling";
}

function loadStoredResultSnapshot(): SimulationResultsSnapshot | null {
  try {
    const raw = sessionStorage.getItem(RESULT_SNAPSHOT_KEY);
    if (!raw) {
      return null;
    }
    const value = JSON.parse(raw) as unknown;
    if (!isSimulationResultsSnapshot(value)) {
      sessionStorage.removeItem(RESULT_SNAPSHOT_KEY);
      return null;
    }
    return value;
  } catch {
    return null;
  }
}

function storeResultSnapshot(snapshot: SimulationResultsSnapshot) {
  try {
    sessionStorage.setItem(RESULT_SNAPSHOT_KEY, JSON.stringify(snapshot));
  } catch {
    // Large result sets remain available in memory for the current page.
  }
}

function isSimulationResultsSnapshot(
  value: unknown,
): value is SimulationResultsSnapshot {
  if (!value || typeof value !== "object") {
    return false;
  }
  const snapshot = value as Partial<SimulationResultsSnapshot>;
  return (
    typeof snapshot.id === "string" &&
    typeof snapshot.createdAt === "string" &&
    Boolean(snapshot.project) &&
    typeof snapshot.project?.name === "string" &&
    Array.isArray(snapshot.project?.nodes) &&
    Array.isArray(snapshot.project?.edges) &&
    Boolean(snapshot.result) &&
    Array.isArray(snapshot.result?.variables) &&
    Boolean(snapshot.result?.series) &&
    Array.isArray(snapshot.result?.series?.time)
  );
}

function cloneValue<T>(value: T): T {
  return structuredClone(value);
}

function snapshotSignature(snapshot: EditorSnapshot) {
  return JSON.stringify(
    buildProjectPayload(
      snapshot.projectName,
      snapshot.nodes,
      snapshot.edges,
      snapshot.simulationConfig,
    ),
  );
}

function makeUniqueName(baseName: string, usedNames: Set<string>) {
  if (!usedNames.has(baseName)) {
    return baseName;
  }
  let suffix = 2;
  while (usedNames.has(`${baseName}_${suffix}`)) {
    suffix += 1;
  }
  return `${baseName}_${suffix}`;
}

function parseProjectPayload(raw: string | null): ReactFlowProjectPayload | null {
  if (!raw) {
    return null;
  }
  const value = JSON.parse(raw) as unknown;
  if (!value || typeof value !== "object") {
    return null;
  }
  const project = value as Partial<ReactFlowProjectPayload>;
  if (
    typeof project.name !== "string" ||
    !Array.isArray(project.nodes) ||
    !Array.isArray(project.edges) ||
    !project.simulation ||
    typeof project.simulation !== "object"
  ) {
    return null;
  }
  return project as ReactFlowProjectPayload;
}

function localProjectKey(name: string) {
  return `${PROJECT_KEY_PREFIX}${encodeURIComponent(name.trim() || "untitled")}`;
}

function isEditableTarget(target: EventTarget | null) {
  return (
    target instanceof HTMLElement &&
    (target.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(target.tagName))
  );
}

function formatTime(date: Date) {
  return date.toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
}

function buildSystemXml(project: ReactFlowProjectPayload) {
  const xmlDocument = document.implementation.createDocument("", "System", null);
  const system = xmlDocument.documentElement;
  system.setAttribute("name", project.name);
  system.setAttribute("schemaVersion", "2");
  system.setAttribute("unitSystem", "SI");

  const simulation = xmlDocument.createElement("Simulation");
  simulation.setAttribute("tStart", String(project.simulation.t_start));
  simulation.setAttribute("tStop", String(project.simulation.t_stop));
  simulation.setAttribute("step", String(project.simulation.step));
  simulation.setAttribute("maxStep", String(project.simulation.max_step));
  simulation.setAttribute("method", project.simulation.method);
  const components = xmlDocument.createElement("Components");
  const connections = xmlDocument.createElement("Connections");
  system.append(simulation, components, connections);

  project.nodes.forEach((node) => {
    const component = xmlDocument.createElement("Component");
    component.setAttribute("id", node.id);
    component.setAttribute("name", node.data.label);
    component.setAttribute("type", node.data.modelType);
    component.setAttribute("componentType", node.data.componentType);
    component.setAttribute("x", formatEditableNumber(node.position.x));
    component.setAttribute("y", formatEditableNumber(node.position.y));
    component.setAttribute("rotation", String(normalizeNodeRotation(node.data.rotation)));
    component.setAttribute("mirrored", String(Boolean(node.data.mirrored)));

    node.data.ports.forEach((portDefinition) => {
      const port = xmlDocument.createElement("Port");
      port.setAttribute("name", portDefinition.name);
      port.setAttribute("kind", portDefinition.kind);
      port.setAttribute("domain", portDefinition.domain);
      port.setAttribute("nominalRole", portDefinition.nominalRole);
      port.setAttribute("side", portDefinition.side);
      if (portDefinition.positiveFlowDirection) {
        port.setAttribute("positiveFlowDirection", portDefinition.positiveFlowDirection);
      }
      component.appendChild(port);
    });
    Object.entries(node.data.parameters).forEach(([name, value]) => {
      const parameter = xmlDocument.createElement("Parameter");
      parameter.setAttribute("name", name);
      parameter.setAttribute("value", String(value));
      component.appendChild(parameter);
    });
    components.appendChild(component);
  });

  project.edges.forEach((edge) => {
    const metadata = projectConnectionMetadata(project, edge);
    const connection = xmlDocument.createElement("Connection");
    connection.setAttribute("id", edge.id);
    connection.setAttribute("kind", metadata.kind);
    connection.setAttribute("domain", metadata.domain);
    metadata.endpoints.forEach((endpoint) => {
      const endpointElement = xmlDocument.createElement("Endpoint");
      endpointElement.setAttribute("component", endpoint.component);
      endpointElement.setAttribute("port", endpoint.port);
      if (endpoint.role) {
        endpointElement.setAttribute("role", endpoint.role);
      }
      connection.appendChild(endpointElement);
    });
    connections.appendChild(connection);
  });

  indentXmlElement(system);
  return `<?xml version="1.0" encoding="UTF-8"?>\n${new XMLSerializer().serializeToString(system)}`;
}

function projectConnectionMetadata(
  project: ReactFlowProjectPayload,
  edge: ProjectEdgePayload,
) {
  const first = findProjectPort(project, edge.source, edge.sourceHandle);
  const second = findProjectPort(project, edge.target, edge.targetHandle);
  if (!first || !second) {
    throw new Error(`连接 ${edge.id} 引用了不存在的组件端口`);
  }
  if (!arePortsCompatible(first, second)) {
    throw new Error(`连接 ${edge.id} 的端口类型或物理域不兼容`);
  }

  const endpoints: Array<{
    component: string;
    port: string;
    role?: "source" | "target";
  }> = [
    { component: edge.source, port: first.name },
    { component: edge.target, port: second.name },
  ];
  if (first.kind === "signal") {
    if (first.nominalRole === "input") {
      endpoints.reverse();
    }
    endpoints[0].role = "source";
    endpoints[1].role = "target";
  }

  return {
    kind: first.kind,
    domain: first.domain,
    endpoints,
  };
}

function findProjectPort(
  project: ReactFlowProjectPayload,
  componentId: string,
  portName: string | null,
) {
  if (!portName) {
    return undefined;
  }
  return project.nodes
    .find((node) => node.id === componentId)
    ?.data.ports.find((port) => port.name === portName);
}

function indentXmlElement(element: Element, depth = 0) {
  const children = Array.from(element.children);
  if (children.length === 0) {
    return;
  }
  children.forEach((child) => {
    element.insertBefore(
      element.ownerDocument.createTextNode(`\n${"  ".repeat(depth + 1)}`),
      child,
    );
    indentXmlElement(child, depth + 1);
  });
  element.appendChild(
    element.ownerDocument.createTextNode(`\n${"  ".repeat(depth)}`),
  );
}

class SimulationStreamError extends Error {
  readonly issues: string[];
  readonly status?: number;
  readonly code?: "STREAM_IDLE_TIMEOUT" | "SOLVER_STALLED";

  constructor(
    message: string,
    issues: string[] = [],
    status?: number,
    code?: "STREAM_IDLE_TIMEOUT" | "SOLVER_STALLED",
  ) {
    super(message);
    this.name = "SimulationStreamError";
    this.issues = issues;
    this.status = status;
    this.code = code;
  }
}

async function readSimulationStreamChunk(
  reader: ReadableStreamDefaultReader<Uint8Array>,
): Promise<ReadableStreamReadResult<Uint8Array>> {
  let timeoutId: number | undefined;
  const inactivityTimeout = new Promise<never>((_, reject) => {
    timeoutId = window.setTimeout(() => {
      reject(
        new SimulationStreamError(
          "超过 30 秒未收到仿真进度，进度连接可能已经中断，请刷新页面后重试",
          [],
          undefined,
          "STREAM_IDLE_TIMEOUT",
        ),
      );
    }, SIMULATION_STREAM_IDLE_TIMEOUT_MS);
  });

  try {
    return await Promise.race([reader.read(), inactivityTimeout]);
  } finally {
    if (timeoutId !== undefined) {
      window.clearTimeout(timeoutId);
    }
  }
}

async function streamSystemSimulation(
  xml: string,
  onEvent: (event: SimulationStreamEvent) => void,
  simulationId: string,
): Promise<SimulationResult> {
  const abortController = new AbortController();
  const response = await fetch("/api/system-xml/simulate-stream", {
    method: "POST",
    headers: {
      "Content-Type": "application/xml",
      "X-Simulation-Id": simulationId,
    },
    body: xml,
    signal: abortController.signal,
  });
  if (!response.ok) {
    if (response.status === 404) {
      throw new SimulationStreamError(
        "当前 FastAPI 未加载流式仿真接口，请重启后端服务",
        [],
        response.status,
      );
    }
    if (response.status === 502 || response.status === 503) {
      throw new SimulationStreamError(
        "无法连接 FastAPI 仿真服务，请确认 8000 端口已启动",
        [],
        response.status,
      );
    }
    throw new SimulationStreamError(await readApiError(response), [], response.status);
  }
  if (!response.body) {
    throw new SimulationStreamError("浏览器未收到仿真进度数据流");
  }

  const reader = response.body.getReader();
  const decoder = new TextDecoder();
  let buffer = "";
  let result: SimulationResult | null = null;
  let lastSolverProgressAt = Date.now();

  const consumeLine = (line: string) => {
    const trimmed = line.trim();
    if (!trimmed) {
      return;
    }
    const parsed = JSON.parse(trimmed) as Partial<SimulationStreamEvent>;
    if (
      parsed.event !== "progress" &&
      parsed.event !== "result" &&
      parsed.event !== "error"
    ) {
      throw new SimulationStreamError("仿真服务返回了无法识别的进度消息");
    }
    const event = parsed as SimulationStreamEvent;
    if (event.event === "progress") {
      if (
        event.heartbeat === true &&
        Date.now() - lastSolverProgressAt >= SIMULATION_SOLVER_STALL_TIMEOUT_MS
      ) {
        throw new SimulationStreamError(
          "求解器连续 60 秒没有接受新的积分步，任务可能已经卡死",
          [],
          undefined,
          "SOLVER_STALLED",
        );
      }
      if (event.heartbeat !== true) {
        lastSolverProgressAt = Date.now();
      }
    }
    onEvent(event);
    if (event.event === "result") {
      result = event.result;
      return;
    }
    if (event.event === "error") {
      const detail = event.detail;
      const issues =
        detail && typeof detail === "object" && Array.isArray((detail as { issues?: unknown }).issues)
          ? ((detail as { issues: SimulationStreamIssue[] }).issues ?? [])
              .map((issue) => {
                if (typeof issue.message !== "string") {
                  return "";
                }
                return typeof issue.code === "string"
                  ? `${issue.code}：${issue.message}`
                  : issue.message;
              })
              .filter(Boolean)
          : typeof detail === "string" && detail !== event.message
            ? [detail]
            : [];
      throw new SimulationStreamError(event.message, issues, event.status);
    }
  };

  try {
    while (true) {
      const { done, value } = await readSimulationStreamChunk(reader);
      buffer += decoder.decode(value, { stream: !done });
      let newlineIndex = buffer.indexOf("\n");
      while (newlineIndex >= 0) {
        consumeLine(buffer.slice(0, newlineIndex));
        buffer = buffer.slice(newlineIndex + 1);
        newlineIndex = buffer.indexOf("\n");
      }
      if (done) {
        consumeLine(buffer);
        break;
      }
    }
  } finally {
    abortController.abort();
    try {
      await reader.cancel();
    } catch {
      // The stream may already be closed or aborted.
    }
    reader.releaseLock();
  }

  if (!result) {
    throw new SimulationStreamError("仿真进度流已结束，但没有返回结果");
  }
  return result;
}

function createSimulationId() {
  if (typeof crypto.randomUUID === "function") {
    return crypto.randomUUID();
  }
  return `simulation-${Date.now()}-${Math.random().toString(16).slice(2)}`;
}

async function requestSimulationCancellation(
  simulationId: string,
  reason: SimulationCancelReason,
) {
  const response = await fetch(
    `/api/system-xml/simulations/${encodeURIComponent(simulationId)}/cancel`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ reason }),
    },
  );
  if (!response.ok) {
    throw new SimulationStreamError(await readApiError(response), [], response.status);
  }
  return (await response.json()) as {
    simulationId: string;
    accepted: boolean;
    status: SimulationTaskResponse["status"];
  };
}

async function readSimulationTask(simulationId: string) {
  const response = await fetch(
    `/api/system-xml/simulations/${encodeURIComponent(simulationId)}`,
  );
  if (!response.ok) {
    throw new SimulationStreamError(await readApiError(response), [], response.status);
  }
  return (await response.json()) as SimulationTaskResponse;
}

async function waitForSimulationTaskCompletion(
  simulationId: string,
  timeoutMs = 30_000,
) {
  const deadline = Date.now() + timeoutMs;
  while (true) {
    const task = await readSimulationTask(simulationId);
    if (task.result || task.error || ["completed", "stopped", "stalled", "failed"].includes(task.status)) {
      return task;
    }
    if (Date.now() >= deadline) {
      throw new SimulationStreamError(
        "停止请求已发送，但后端未能在 30 秒内整理出部分结果",
      );
    }
    await new Promise((resolve) => window.setTimeout(resolve, 500));
  }
}

async function postXml<TResponse>(url: string, xml: string): Promise<TResponse> {
  const response = await fetch(url, {
    method: "POST",
    headers: { "Content-Type": "application/xml" },
    body: xml,
  });
  if (!response.ok) {
    throw new Error(await readApiError(response));
  }
  return (await response.json()) as TResponse;
}

async function readApiError(response: Response) {
  const text = await response.text();
  if (!text) {
    return `${response.status} ${response.statusText}`;
  }
  try {
    const parsed = JSON.parse(text) as { detail?: unknown };
    if (typeof parsed.detail === "string") {
      return parsed.detail;
    }
    if (parsed.detail && typeof parsed.detail === "object") {
      const detail = parsed.detail as {
        message?: unknown;
        issues?: Array<{ code?: unknown; message?: unknown }>;
      };
      const messages = Array.isArray(detail.issues)
        ? detail.issues
            .map((issue) =>
              typeof issue.message === "string"
                ? `${typeof issue.code === "string" ? `${issue.code}：` : ""}${issue.message}`
                : "",
            )
            .filter(Boolean)
        : [];
      if (messages.length > 0) {
        return messages.join("；");
      }
      if (typeof detail.message === "string") {
        return detail.message;
      }
    }
  } catch {
    return text;
  }
  return text;
}

function downloadText(filename: string, content: string) {
  downloadFile(filename, content, "application/xml;charset=utf-8");
}

function downloadFile(filename: string, content: string, mimeType: string) {
  const blob = new Blob([content], { type: mimeType });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  link.remove();
  URL.revokeObjectURL(url);
}

function safeFilename(value: string) {
  return (value.trim() || "system").replace(/[\\/:*?"<>|]+/g, "_");
}

function formatError(error: unknown) {
  if (error instanceof Error) {
    return error.message;
  }
  return String(error);
}

function formatNumber(value: number) {
  if (!Number.isFinite(value)) {
    return "-";
  }
  if (Math.abs(value) >= 100000 || (Math.abs(value) > 0 && Math.abs(value) < 0.001)) {
    return value.toExponential(4);
  }
  return value.toFixed(4).replace(/\.?0+$/, "");
}

export default function App() {
  return (
    <ReactFlowProvider>
      <FlowWorkbench />
    </ReactFlowProvider>
  );
}