"use client";

import "./xmind-native.css";
import { XmindMarkerPanel } from "./xmind-marker-panel";
import { withXmindMarkers } from "./mind-marker-board";
import { getXmindMarker, getXmindMarkerIds, toggleXmindMarker, type XmindMarker } from "@/lib/flow-board/xmind-markers";
import { XmindSearchPanel } from "./xmind-search-panel";
import { XmindPresentation } from "./xmind-presentation";
import { replaceTopicText, type TopicSearchResult } from "@/lib/flow-board/topic-search";

import { Drawnix, type DrawnixProps } from "@drawnix/drawnix";
import {
  BoardCreationMode,
  getTextEditorsByElement,
  memorizeLatest,
  setCreationMode,
} from "@plait/common";
import {
  BoardTransforms,
  DEFAULT_COLOR,
  PlaitBoard,
  PlaitHistoryBoard,
  type PlaitElement,
  PlaitNode,
  PlaitPointerType,
  type PlaitTheme,
  type Point,
  type Selection,
  type ThemeColorMode,
  Transforms,
  type Viewport,
  getHitElementsBySelection,
  getSelectedElements,
  toHostPoint,
  toViewBoxPoint,
} from "@plait/core";
import {
  ArrowLineShape,
  BasicShapes,
  DrawTransforms,
  MemorizeKey,
} from "@plait/draw";
import { MindLayoutType } from "@plait/layouts";
import {
  BranchShape,
  canSetAbstract,
  DEFAULT_MIND_IMAGE_WIDTH,
  getBranchShapeByMindElement,
  getRectangleByNode,
  getFontSizeByMindElement,
  getSelectedMindElements,
  getShapeByElement,
  MindElement,
  MindElementShape,
  MindPointerType,
  MindTransforms,
  PlaitMind,
  type PlaitMindBoard,
} from "@plait/mind";
import {
  type FontSizes,
  getTextMarksByElement,
  MarkTypes,
  TextTransforms,
} from "@plait/text-plugins";
import type { BoardChangeData } from "@plait-board/react-board";
import {
  FLOW_BOARD_MIND_MAP_IMPORT_ACCEPT,
  getMindMapImportTitle,
  isSupportedMindMapImportFile,
  parseMindMapFileToDocument,
  MindMapImportError,
} from "@/lib/flow-board/mind-map-import";
import { fetchUploadWithRetry } from "@/lib/client/upload-with-retry";
import {
  IMAGE_UPLOAD_MAX_BYTES,
  IMAGE_UPLOAD_TOO_LARGE_MESSAGE,
} from "@/lib/image-upload-limits";
import {
  type FlowBoardLayoutOption,
  type FlowBoardThemeOption,
  type FlowBoardToolId,
  XmindEditorTopBar,
  XmindFormatPanel,
  XmindSheetBar,
} from "@/components/flow-board/xmind-editor-chrome";
import {
  FileText,
  Loader2,
  Plus,
  Trash2,
  X,
} from "lucide-react";
import { useTheme } from "next-themes";
import {
  type ChangeEvent,
  type ClipboardEvent,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { toast as appToast } from "sonner";
import { insertMindAnnotation, withMindAnnotations } from "./mind-annotation-board";
import { isMindAnnotation, validateTopicRange } from "@/lib/flow-board/mind-annotations";
import { XmindAnnotationPanel } from "./xmind-annotation-panel";
import { XmindTopicPanel, type TopicDetailSection } from "./xmind-topic-panel";
import { XmindTaskEditor } from "./xmind-task-editor";
import { XmindGantt } from "./xmind-gantt";
import { XmindProjectCalendar } from "./xmind-project-calendar";
import { XmindImageExport } from "./xmind-image-export";
import type { ImageExportOptions } from "@/lib/flow-board/image-export";
import { calendarRoot, getProjectCalendar, patchProjectCalendar, validateWorkingCalendar, type ProjectCalendarConfig } from "@/lib/flow-board/project-calendar";
import { XmindTopicBadges } from "./xmind-topic-badges";
import { XmindNotesPopover } from "./xmind-notes-popover";
import { getTopicTask, patchTopicTask, scheduleTaskChanges, type TopicTask } from "@/lib/flow-board/topic-tasks";
import { XmindOutline } from "./xmind-outline";
import { withSpecialMindLayouts } from "./mind-special-layout-board";
import { SPECIAL_MIND_LAYOUTS, isSpecialMindLayout } from "@/lib/flow-board/mind-special-layout";
import { applyOutlineCommand, renameOutlineTopic, type OutlineCommand, type OutlineDrop } from "@/lib/flow-board/mind-outline";
import { getTopicEntries, patchTopicDetails, type TopicDetails } from "@/lib/flow-board/topic-details";

// Keep editor feedback away from the floating tools and their hover targets.
const toast = {
  ...appToast,
  success: (message: Parameters<typeof appToast.success>[0], options?: Parameters<typeof appToast.success>[1]) => appToast.success(message, { position: "bottom-center", ...options }),
  info: (message: Parameters<typeof appToast.info>[0], options?: Parameters<typeof appToast.info>[1]) => appToast.info(message, { position: "bottom-center", ...options }),
  error: (message: Parameters<typeof appToast.error>[0], options?: Parameters<typeof appToast.error>[1]) => appToast.error(message, { position: "bottom-center", ...options }),
  warning: (message: Parameters<typeof appToast.warning>[0], options?: Parameters<typeof appToast.warning>[1]) => appToast.warning(message, { position: "bottom-center", ...options }),
};

type FlowBoardWorkspaceProps = {
  siteName: string;
  siteLogo: string | null;
  siteLogoDark: string | null;
  previewMode?: boolean;
};

type FlowBoardSnapshot = {
  version?: number;
  activeSheetId?: string;
  sheets?: FlowBoardSheetSnapshot[];
  children: PlaitElement[];
  viewport?: Viewport;
  theme?: PlaitTheme;
  canvas: FlowBoardCanvasSettings;
  updatedAt?: string;
};

type FlowBoardCanvasSettings = {
  backgroundColor: string;
  gridColor: string;
  gridEnabled: boolean;
  gridSize: number;
};

type FlowBoardSheetSnapshot = {
  id: string;
  title: string;
  children: PlaitElement[];
  viewport?: Viewport;
  theme?: PlaitTheme;
  canvas: FlowBoardCanvasSettings;
};

type FlowBoardCloudFile = {
  id: string;
  title: string;
  createdAt?: string | null;
  updatedAt?: string | null;
};

type FlowBoardCloudFilePayload = FlowBoardCloudFile & {
  snapshot?: unknown;
};

type FlowBoardMarkerSelectionState = {
  count: number;
  names: string[];
  mixedNames: string[];
};

type FlowBoardSelectionStyleState = {
  branchColor: string;
  branchShape: BranchShape;
  branchWidth: number;
  fill: string;
  fontSize: string;
  isBold: boolean;
  isItalic: boolean;
  isUnderlined: boolean;
  layout: string;
  nodeShape: MindElementShape;
  textColor: string;
};

const FLOW_BOARD_FILES_API = "/api/flow-board/files";
const DEFAULT_FLOW_BOARD_CANVAS: FlowBoardCanvasSettings = {
  backgroundColor: "#ffffff",
  gridColor: "#d8dde8",
  gridEnabled: false,
  gridSize: 24,
};
const FLOW_BOARD_DEFAULT_TEXT_COLOR = DEFAULT_COLOR;
const FLOW_BOARD_IMAGE_UPLOAD_MAX_BYTES = IMAGE_UPLOAD_MAX_BYTES;
const FLOW_BOARD_IMAGE_UPLOAD_TYPES = new Set([
  "image/jpeg",
  "image/png",
  "image/webp",
]);
const FLOW_BOARD_LAYOUT_OPTIONS: FlowBoardLayoutOption[] = [
  { id: MindLayoutType.standard, label: "思维导图", preview: "both" },
  { id: MindLayoutType.right, label: "向右逻辑", preview: "right" },
  { id: MindLayoutType.left, label: "向左逻辑", preview: "left" },
  { id: MindLayoutType.downward, label: "向下逻辑", preview: "down" },
  { id: MindLayoutType.upward, label: "向上逻辑", preview: "up" },
  {
    id: MindLayoutType.rightBottomIndented,
    label: "目录组织",
    preview: "indent",
  },
  ...Object.entries(SPECIAL_MIND_LAYOUTS).map(([id, value]) => ({ id, label: value.label, preview: value.preview })),
];
const FLOW_BOARD_PLUGINS = [withSpecialMindLayouts, withXmindMarkers];
const FLOW_BOARD_THEME_OPTIONS: FlowBoardThemeOption[] = [
  { id: "default", label: "经典", colors: ["#2f6feb", "#8fb3ff", "#dbe7ff"] },
  { id: "colorful", label: "彩虹", colors: ["#ef6461", "#f4c95d", "#5abf90"] },
  { id: "soft", label: "柔和", colors: ["#7d8fc7", "#b7c2e2", "#e4e9f5"] },
  { id: "retro", label: "复古", colors: ["#bf6b55", "#d7a86e", "#6b8b75"] },
  { id: "dark", label: "深色", colors: ["#24272d", "#59616e", "#9aa4b2"] },
  { id: "starry", label: "星空", colors: ["#243b74", "#5471c6", "#9cadf0"] },
];
function isFlowBoardRecord(value: unknown): value is Record<string, unknown> {
  return Boolean(value) && typeof value === "object" && !Array.isArray(value);
}

function shouldUseDefaultTextColor(value: unknown) {
  if (typeof value !== "string") {
    return true;
  }
  const normalized = value.trim().toUpperCase();
  return (
    normalized === "" ||
    normalized === "NO_COLOR" ||
    normalized === "TRANSPARENT"
  );
}

function normalizeFlowBoardTextPayload(value: unknown): unknown {
  if (Array.isArray(value)) {
    let changed = false;
    const nextValue = value.map((item) => {
      const nextItem = normalizeFlowBoardTextPayload(item);
      if (nextItem !== item) {
        changed = true;
      }
      return nextItem;
    });
    return changed ? nextValue : value;
  }

  if (!isFlowBoardRecord(value)) {
    return value;
  }

  let nextValue: Record<string, unknown> | null = null;
  const ensureNextValue = () => {
    if (!nextValue) {
      nextValue = { ...value };
    }
    return nextValue;
  };

  if (
    typeof value.text === "string" &&
    shouldUseDefaultTextColor(value.color)
  ) {
    ensureNextValue().color = FLOW_BOARD_DEFAULT_TEXT_COLOR;
  } else if (Array.isArray(value.text) || isFlowBoardRecord(value.text)) {
    const nextText = normalizeFlowBoardTextPayload(value.text);
    if (nextText !== value.text) {
      ensureNextValue().text = nextText;
    }
  }

  if (Array.isArray(value.children)) {
    const nextChildren = normalizeFlowBoardTextPayload(value.children);
    if (nextChildren !== value.children) {
      ensureNextValue().children = nextChildren;
    }
  }

  return nextValue || value;
}

function normalizeFlowBoardElementText(element: unknown): PlaitElement {
  if (!isFlowBoardRecord(element)) {
    return element as PlaitElement;
  }

  let nextElement: Record<string, unknown> | null = null;
  const ensureNextElement = () => {
    if (!nextElement) {
      nextElement = { ...element };
    }
    return nextElement;
  };

  if (Array.isArray(element.text) || isFlowBoardRecord(element.text)) {
    const nextText = normalizeFlowBoardTextPayload(element.text);
    if (nextText !== element.text) {
      ensureNextElement().text = nextText;
    }
  }

  if (Array.isArray(element.texts)) {
    const nextTexts = normalizeFlowBoardTextPayload(element.texts);
    if (nextTexts !== element.texts) {
      ensureNextElement().texts = nextTexts;
    }
  }

  if (
    element.shape === "text" &&
    shouldUseDefaultTextColor(element.strokeColor)
  ) {
    ensureNextElement().strokeColor = FLOW_BOARD_DEFAULT_TEXT_COLOR;
  }

  return (nextElement || element) as PlaitElement;
}

function normalizeFlowBoardChildren(children: unknown): PlaitElement[] {
  if (!Array.isArray(children)) {
    return [];
  }

  let changed = false;
  const nextChildren = children.map((element) => {
    const nextElement = normalizeFlowBoardElementText(element);
    if (nextElement !== element) {
      changed = true;
    }
    return nextElement;
  });

  return changed ? nextChildren : (children as PlaitElement[]);
}

function seedFlowBoardDefaultTextColor() {
  const remember = memorizeLatest as (
    memorizedKey: string,
    propertyKey: string,
    propertyValue: unknown
  ) => void;
  [
    MemorizeKey.text,
    MemorizeKey.basicShape,
    MemorizeKey.flowchart,
    MemorizeKey.arrowLine,
    MemorizeKey.UML,
  ].forEach((memorizedKey) => {
    remember(memorizedKey, "text", { color: FLOW_BOARD_DEFAULT_TEXT_COLOR });
  });
}

function createFlowBoardSheetId() {
  if (typeof globalThis.crypto?.randomUUID === "function") {
    return `sheet-${globalThis.crypto.randomUUID()}`;
  }
  return `sheet-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
}

function cloneFlowBoardSheet<T>(value: T): T {
  if (typeof globalThis.structuredClone === "function") {
    return globalThis.structuredClone(value);
  }
  return JSON.parse(JSON.stringify(value)) as T;
}

function normalizeFlowBoardCanvasSettings(
  value: unknown
): FlowBoardCanvasSettings {
  const canvas = isFlowBoardRecord(value) ? value : {};
  const normalizeColor = (color: unknown, fallback: string) =>
    typeof color === "string" && /^#[0-9a-f]{6}$/i.test(color)
      ? color.toLowerCase()
      : fallback;
  const requestedGridSize =
    typeof canvas.gridSize === "number" && Number.isFinite(canvas.gridSize)
      ? Math.round(canvas.gridSize)
      : DEFAULT_FLOW_BOARD_CANVAS.gridSize;

  return {
    backgroundColor: normalizeColor(
      canvas.backgroundColor,
      DEFAULT_FLOW_BOARD_CANVAS.backgroundColor
    ),
    gridColor: normalizeColor(
      canvas.gridColor,
      DEFAULT_FLOW_BOARD_CANVAS.gridColor
    ),
    gridEnabled:
      typeof canvas.gridEnabled === "boolean"
        ? canvas.gridEnabled
        : DEFAULT_FLOW_BOARD_CANVAS.gridEnabled,
    gridSize: Math.min(64, Math.max(8, requestedGridSize)),
  };
}

function normalizeFlowBoardSheet(
  value: unknown,
  index: number
): FlowBoardSheetSnapshot | null {
  if (!isFlowBoardRecord(value)) {
    return null;
  }

  const id = typeof value.id === "string" ? value.id.trim() : "";
  const title = typeof value.title === "string" ? value.title.trim() : "";
  return {
    id: id || `sheet-${index + 1}`,
    title: title || `画布 ${index + 1}`,
    children: normalizeFlowBoardChildren(value.children),
    viewport: isFlowBoardRecord(value.viewport)
      ? (value.viewport as Viewport)
      : undefined,
    theme: isFlowBoardRecord(value.theme)
      ? (value.theme as unknown as PlaitTheme)
      : undefined,
    canvas: normalizeFlowBoardCanvasSettings(value.canvas),
  };
}

function normalizeSnapshot(value: unknown): FlowBoardSnapshot {
  const raw =
    value && typeof value === "object" && !Array.isArray(value)
      ? (value as Partial<FlowBoardSnapshot>)
      : {};

  const normalizedSheets = Array.isArray(raw.sheets)
    ? raw.sheets
        .map(normalizeFlowBoardSheet)
        .filter((sheet): sheet is FlowBoardSheetSnapshot => Boolean(sheet))
    : [];
  const sheets =
    normalizedSheets.length > 0
      ? normalizedSheets
      : [
          {
            id: "sheet-1",
            title: "画布 1",
            children: normalizeFlowBoardChildren(raw.children),
            viewport: raw.viewport,
            theme: raw.theme,
            canvas: normalizeFlowBoardCanvasSettings(raw.canvas),
          },
        ];
  const requestedActiveSheetId =
    typeof raw.activeSheetId === "string" ? raw.activeSheetId : "";
  const activeSheet =
    sheets.find((sheet) => sheet.id === requestedActiveSheetId) || sheets[0];
  const activeChildren = normalizeFlowBoardChildren(
    raw.children ?? activeSheet.children
  );
  const activeViewport = raw.viewport ?? activeSheet.viewport;
  const activeTheme = raw.theme ?? activeSheet.theme;
  const activeCanvas = normalizeFlowBoardCanvasSettings(
    raw.canvas ?? activeSheet.canvas
  );
  const nextSheets = sheets.map((sheet) =>
    sheet.id === activeSheet.id
      ? {
          ...sheet,
          children: activeChildren,
          viewport: activeViewport,
          theme: activeTheme,
          canvas: activeCanvas,
        }
      : sheet
  );

  return {
    version: 2,
    activeSheetId: activeSheet.id,
    sheets: nextSheets,
    children: activeChildren,
    viewport: activeViewport,
    theme: activeTheme,
    canvas: activeCanvas,
    updatedAt: typeof raw.updatedAt === "string" ? raw.updatedAt : undefined,
  };
}

function formatFileUpdatedAt(value?: string | null) {
  if (!value) return "刚刚";
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) return "刚刚";
  return date.toLocaleString("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function normalizeCloudFile(value: unknown): FlowBoardCloudFilePayload | null {
  if (!value || typeof value !== "object" || Array.isArray(value)) {
    return null;
  }
  const raw = value as Partial<FlowBoardCloudFilePayload>;
  const id = typeof raw.id === "string" ? raw.id.trim() : "";
  if (!id) return null;

  return {
    id,
    title:
      typeof raw.title === "string" && raw.title.trim()
        ? raw.title.trim()
        : "未命名流程白板",
    snapshot: raw.snapshot,
    createdAt: typeof raw.createdAt === "string" ? raw.createdAt : null,
    updatedAt: typeof raw.updatedAt === "string" ? raw.updatedAt : null,
  };
}

function getFlowBoardFileUrl(fileId: string) {
  return `${FLOW_BOARD_FILES_API}/${encodeURIComponent(fileId)}`;
}

function sortCloudFiles(files: FlowBoardCloudFile[]) {
  return [...files].sort(
    (a, b) =>
      new Date(b.updatedAt || b.createdAt || 0).getTime() -
      new Date(a.updatedAt || a.createdAt || 0).getTime()
  );
}

function getExistingFlowBoardMindElements(
  board: PlaitBoard,
  elements: MindElement[]
) {
  return elements.flatMap((element) => {
    try {
      const path = PlaitBoard.findPath(board, element);
      const currentElement = PlaitNode.get(board, path);
      return MindElement.isMindElement(board, currentElement)
        ? [currentElement]
        : [];
    } catch (_error) {
      return [];
    }
  });
}

function uniqueFlowBoardMindElements(elements: MindElement[]) {
  const seen = new Set<MindElement>();
  return elements.filter((element) => {
    if (seen.has(element)) {
      return false;
    }
    seen.add(element);
    return true;
  });
}

function preferFlowBoardNodeElements(elements: MindElement[]) {
  const nodeElements = elements.filter((element) => !PlaitMind.isMind(element));
  return nodeElements.length > 0 ? nodeElements : elements;
}

function getFlowBoardMindElementsBySelection(
  board: PlaitBoard,
  selection: Selection | null | undefined
) {
  if (!selection) {
    return [] as MindElement[];
  }

  const hitElements = getHitElementsBySelection(board, selection, (element) =>
    MindElement.isMindElement(board, element)
  );
  return getSelectedMindElements(board, hitElements);
}

function getFlowBoardSelectedMindElements(
  board: PlaitBoard,
  selection: Selection | null | undefined
) {
  return preferFlowBoardNodeElements(
    uniqueFlowBoardMindElements([
      ...getSelectedMindElements(board),
      ...getFlowBoardMindElementsBySelection(board, selection),
    ])
  );
}

function getFlowBoardMarkerSelectionState(
  board: PlaitBoard | null,
  selectedElements?: MindElement[]
): FlowBoardMarkerSelectionState {
  if (!board) {
    return { count: 0, names: [], mixedNames: [] };
  }

  const targetElements = uniqueFlowBoardMindElements(getExistingFlowBoardMindElements(board, selectedElements || getSelectedMindElements(board)));
  const counts = new Map<string, number>();
  targetElements.forEach(element => {
    getXmindMarkerIds(element.data?.emojis).forEach(id => counts.set(id, (counts.get(id) || 0) + 1));
  });
  return {
    count: targetElements.length,
    names: [...counts].filter(([, count]) => count === targetElements.length).map(([id]) => id),
    mixedNames: [...counts].filter(([, count]) => count < targetElements.length).map(([id]) => id),
  };
}

function getFlowBoardSelectionStyleState(
  board: PlaitBoard | null,
  selectedElements: MindElement[]
): FlowBoardSelectionStyleState {
  const element = selectedElements[0];
  if (!board || !element) {
    return {
      branchColor: "#5b7fd8",
      branchShape: BranchShape.bight,
      branchWidth: 2,
      fill: "#ffffff",
      fontSize: "14",
      isBold: false,
      isItalic: false,
      isUnderlined: false,
      layout: MindLayoutType.standard,
      nodeShape: MindElementShape.roundRectangle,
      textColor: FLOW_BOARD_DEFAULT_TEXT_COLOR,
    };
  }

  let root: MindElement = element;
  try {
    root = MindElement.getRoot(board, element);
  } catch (_error) {
    root = element;
  }

  const marks = getTextMarksByElement(element);
  return {
    branchColor: element.branchColor || root.branchColor || "#5b7fd8",
    branchShape:
      getBranchShapeByMindElement(board, element) || BranchShape.bight,
    branchWidth: element.branchWidth || root.branchWidth || 2,
    fill: element.fill || "#ffffff",
    fontSize: String(
      marks[MarkTypes.fontSize] || getFontSizeByMindElement(board, element) || 14
    ),
    isBold: Boolean(marks[MarkTypes.bold]),
    isItalic: Boolean(marks[MarkTypes.italic]),
    isUnderlined: Boolean(marks[MarkTypes.underline]),
    layout: isSpecialMindLayout(root.specialLayout) ? root.specialLayout : root.layout || MindLayoutType.standard,
    nodeShape: getShapeByElement(board, element),
    textColor:
      (typeof marks[MarkTypes.color] === "string" && marks[MarkTypes.color]) ||
      FLOW_BOARD_DEFAULT_TEXT_COLOR,
  };
}

function persistFlowBoardTopicEditors(
  board: PlaitBoard,
  element: MindElement,
  editors: ReturnType<typeof getTextEditorsByElement>
) {
  const topic = editors[0]?.children[0];
  if (!topic) {
    return;
  }
  const currentElement =
    getExistingFlowBoardMindElements(board, [element])[0] || element;
  MindTransforms.setTopic(
    board as PlaitMindBoard,
    currentElement,
    cloneFlowBoardSheet(topic) as Parameters<typeof MindTransforms.setTopic>[2]
  );
}

function getFlowBoardPastePoint(board: PlaitBoard): Point {
  const movingPoint = PlaitBoard.getMovingPointInBoard(board);
  if (movingPoint) {
    return toViewBoxPoint(board, toHostPoint(board, movingPoint[0], movingPoint[1]));
  }

  const container = PlaitBoard.getBoardContainer(board);
  const rect = container.getBoundingClientRect();
  return toViewBoxPoint(
    board,
    toHostPoint(board, rect.left + rect.width / 2, rect.top + rect.height / 2)
  );
}

function isFlowBoardEditablePasteTarget(target: HTMLElement | null) {
  if (!target) {
    return false;
  }

  return Boolean(
    target.isContentEditable ||
      target.closest(
        [
          "input",
          "textarea",
          "select",
          "[contenteditable='true']",
          "[role='textbox']",
          "[data-slate-editor='true']",
          ".slate-editable-container",
          ".plait-text-container",
          ".ttd-dialog-input",
        ].join(", ")
      )
  );
}

function getFlowBoardImageDimensions(file: File, maxWidth = 400) {
  return new Promise<{ width: number; height: number }>((resolve) => {
    const url = URL.createObjectURL(file);
    const image = new Image();
    image.onload = () => {
      const originalWidth = image.naturalWidth || 400;
      const originalHeight = image.naturalHeight || 300;
      const width = Math.min(originalWidth, maxWidth);
      const height = Math.round((width / originalWidth) * originalHeight);
      URL.revokeObjectURL(url);
      resolve({ width, height });
    };
    image.onerror = () => {
      URL.revokeObjectURL(url);
      resolve({ width: 400, height: 300 });
    };
    image.src = url;
  });
}

function readFlowBoardImageFile(file: File) {
  return new Promise<string>((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(String(reader.result));
    reader.onerror = () => reject(reader.error || new Error("图片读取失败"));
    reader.readAsDataURL(file);
  });
}

async function uploadFlowBoardImageFile(file: File) {
  const formData = new FormData();
  formData.append("file", file);
  formData.append("purpose", "canvas-upload");

  const response = await fetchUploadWithRetry(formData);
  if (!response.ok) {
    throw new Error(`Flow board image upload failed: ${response.status}`);
  }

  const payload = (await response.json()) as { url?: unknown };
  const url = typeof payload.url === "string" ? payload.url : "";
  if (!url) {
    throw new Error("Flow board image upload response missing url");
  }

  return url;
}

export function DrawnixWorkspace({
  siteName,
  siteLogo,
  siteLogoDark,
  previewMode = false,
}: FlowBoardWorkspaceProps) {
  const { resolvedTheme } = useTheme();
  const [snapshot, setSnapshot] = useState<FlowBoardSnapshot>(() =>
    normalizeSnapshot({ children: [] })
  );
  const [isReady, setIsReady] = useState(false);
  const [currentFileId, setCurrentFileId] = useState<string | null>(null);
  const [currentTitle, setCurrentTitle] = useState("流程白板");
  const [cloudFiles, setCloudFiles] = useState<FlowBoardCloudFile[]>([]);
  const [isFilePanelOpen, setIsFilePanelOpen] = useState(false);
  const [isFileListLoading, setIsFileListLoading] = useState(false);
  const [isSavingNow, setIsSavingNow] = useState(false);
  const [isExporting, setIsExporting] = useState(false);
  const [isImageExportOpen, setIsImageExportOpen] = useState(false);
  const [isExportingImage, setIsExportingImage] = useState(false);
  const [isOutlineOpen, setIsOutlineOpen] = useState(false);
  const [isSearchOpen, setIsSearchOpen] = useState(false);
  const [isZenMode, setIsZenMode] = useState(false);
  const [isPresenting, setIsPresenting] = useState(false);
  const [pendingTopicJump, setPendingTopicJump] = useState<TopicSearchResult | null>(null);
  const searchUndoRef = useRef<{ before: FlowBoardSheetSnapshot[]; after: FlowBoardSheetSnapshot[] }[]>([]);
  const searchRedoRef = useRef<{ before: FlowBoardSheetSnapshot[]; after: FlowBoardSheetSnapshot[] }[]>([]);
  const [outlineZoomPercent, setOutlineZoomPercent] = useState(100);
  const [, setLastSavedAt] = useState<Date | null>(null);
  const [activeTool, setActiveTool] =
    useState<FlowBoardToolId>("selection");
  const [isFormatPanelOpen, setIsFormatPanelOpen] = useState(true);
  const [zoomPercent, setZoomPercent] = useState(100);
  const snapshotRef = useRef<FlowBoardSnapshot>(snapshot);
  const currentFileIdRef = useRef<string | null>(null);
  const currentTitleRef = useRef("流程白板");
  const saveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const boardRef = useRef<PlaitBoard | null>(null);
  const [relationshipSourceId, setRelationshipSourceState] = useState<string | null>(null);
  const relationshipSourceRef = useRef<string | null>(null);
  const setRelationshipSourceId = useCallback((id: string | null) => {
    relationshipSourceRef.current = id;
    setRelationshipSourceState(id);
  }, []);
  const [selectedTopicId, setSelectedTopicId] = useState<string | null>(null);
  const [isTopicPanelOpen, setIsTopicPanelOpen] = useState(false);
  const [isNotesPopoverOpen, setIsNotesPopoverOpen] = useState(false);
  const [isGanttOpen, setIsGanttOpen] = useState(false);
  const [isCalendarOpen, setIsCalendarOpen] = useState(false);
  const [taskTopicId, setTaskTopicId] = useState<string | null>(null);
  const [topicDetailSection, setTopicDetailSection] = useState<TopicDetailSection>("notes");
  const [annotationId, setAnnotationId] = useState<string | null>(null);
  const mindMapFileInputRef = useRef<HTMLInputElement | null>(null);
  const imageFileInputRef = useRef<HTMLInputElement | null>(null);
  const selectedMindElementsRef = useRef<MindElement[]>([]);
  const selectedMindSelectionRef = useRef<Selection | null>(null);
  const shellControlInteractionRef = useRef(false);
  const [isMarkerPanelOpen, setIsMarkerPanelOpen] = useState(false);
  const [isImportingMindMap, setIsImportingMindMap] = useState(false);
  const [markerSelectionState, setMarkerSelectionState] =
    useState<FlowBoardMarkerSelectionState>({
      count: 0,
      names: [],
      mixedNames: [],
    });
  const [selectionStyleState, setSelectionStyleState] =
    useState<FlowBoardSelectionStyleState>(() =>
      getFlowBoardSelectionStyleState(null, [])
    );

  useEffect(() => {
    const onKey = (event: KeyboardEvent) => {
      if (isPresenting || (event.target as HTMLElement)?.closest(".xmind-gantt, .xmind-task-backdrop, .xmind-project-calendar-backdrop, .xmind-image-export")) return;
      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f" && !isFlowBoardEditablePasteTarget(event.target as HTMLElement)) {
        event.preventDefault(); event.stopPropagation(); setIsSearchOpen(true);
      }
      if (event.key === "Escape" && (isZenMode || isSearchOpen)) {
        event.preventDefault(); event.stopPropagation(); setIsZenMode(false); setIsSearchOpen(false);
      }
    };
    window.addEventListener("keydown",onKey,true);
    return () => window.removeEventListener("keydown",onKey,true);
  }, [isZenMode,isSearchOpen,isPresenting]);

  const displayLogo = useMemo(() => {
    if (resolvedTheme === "dark" && siteLogoDark) {
      return siteLogoDark;
    }
    return siteLogo || siteLogoDark;
  }, [resolvedTheme, siteLogo, siteLogoDark]);

  const getActiveMarkerElements = useCallback(() => {
    const board = boardRef.current;
    if (!board) {
      selectedMindElementsRef.current = [];
      return [] as MindElement[];
    }

    const selectedElements = getFlowBoardSelectedMindElements(
      board,
      selectedMindSelectionRef.current || board.selection
    );
    if (selectedElements.length > 0) {
      selectedMindElementsRef.current = selectedElements;
      return selectedElements;
    }

    const fallbackElements = getExistingFlowBoardMindElements(
      board,
      selectedMindElementsRef.current
    );
    selectedMindElementsRef.current = fallbackElements;
    return fallbackElements;
  }, []);

  const refreshMarkerSelectionState = useCallback(
    (
      options: {
        preserveFallback?: boolean;
        selection?: Selection | null;
      } = {}
    ) => {
      const board = boardRef.current;
      if (!board) {
        selectedMindElementsRef.current = [];
        setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
        setSelectionStyleState(getFlowBoardSelectionStyleState(null, []));
        return;
      }

      const focusedShellControl = document.activeElement?.closest('[data-flow-board-shell-control="true"]');
      const preserveFallback = options.preserveFallback || Boolean(focusedShellControl);
      const annotation = getSelectedElements(board).find(isMindAnnotation);
      if (!preserveFallback || annotation) {
        setAnnotationId(annotation?.id || null);
      }
      if (annotation) {
        setSelectedTopicId(null);
        selectedMindElementsRef.current = [];
        setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
        return;
      }
      const selectedElements = getFlowBoardSelectedMindElements(
        board,
        options.selection ?? selectedMindSelectionRef.current ?? board.selection
      );
      if (selectedElements.length > 0) {
        setSelectedTopicId(selectedElements.length === 1 ? selectedElements[0].id : null);
        selectedMindElementsRef.current = selectedElements;
        setMarkerSelectionState(
          getFlowBoardMarkerSelectionState(board, selectedElements)
        );
        if (!preserveFallback) {
          setSelectionStyleState(
            getFlowBoardSelectionStyleState(board, selectedElements)
          );
        }
        return;
      }

      if (!preserveFallback) {
        setSelectedTopicId(null);
        selectedMindElementsRef.current = [];
        setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
        setSelectionStyleState(getFlowBoardSelectionStyleState(null, []));
        return;
      }

      const fallbackElements = getExistingFlowBoardMindElements(
        board,
        selectedMindElementsRef.current
      );
      selectedMindElementsRef.current = fallbackElements;
      setMarkerSelectionState(
        getFlowBoardMarkerSelectionState(board, fallbackElements)
      );
    },
    []
  );

  const handleDrawnixInit = useCallback((board: PlaitBoard) => {
    boardRef.current = board;
    withMindAnnotations(board);
    BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
    setCreationMode(board, BoardCreationMode.dnd);
    setRelationshipSourceId(null);
    setAnnotationId(null);
    setSelectedTopicId(null);
    seedFlowBoardDefaultTextColor();
    selectedMindSelectionRef.current = board.selection;
    selectedMindElementsRef.current = getFlowBoardSelectedMindElements(
      board,
      board.selection
    );
    setMarkerSelectionState(
      getFlowBoardMarkerSelectionState(board, selectedMindElementsRef.current)
    );
    setSelectionStyleState(
      getFlowBoardSelectionStyleState(
        board,
        selectedMindElementsRef.current
      )
    );
    setActiveTool("selection");
    setZoomPercent(Math.round((board.viewport?.zoom || 1) * 100));
  }, []);

  useEffect(() => {
    seedFlowBoardDefaultTextColor();
  }, []);

  useEffect(() => {
    currentFileIdRef.current = currentFileId;
  }, [currentFileId]);

  useEffect(() => {
    currentTitleRef.current = currentTitle;
  }, [currentTitle]);

  const updateBrowserFileParam = useCallback((fileId: string | null) => {
    if (typeof window === "undefined") return;

    const url = new URL(window.location.href);
    if (fileId) {
      url.searchParams.set("file", fileId);
    } else {
      url.searchParams.delete("file");
    }
    window.history.replaceState(null, "", `${url.pathname}${url.search}`);
  }, []);

  const loadCloudFiles = useCallback(async () => {
    setIsFileListLoading(true);
    try {
      const response = await fetch(FLOW_BOARD_FILES_API, {
        cache: "no-store",
        credentials: "include",
      });
      if (!response.ok) {
        throw new Error(`Failed to load flow board files: ${response.status}`);
      }
      const result = (await response.json()) as { data?: unknown[] };
      const files = sortCloudFiles(
        (Array.isArray(result.data) ? result.data : [])
          .map(normalizeCloudFile)
          .filter((file): file is FlowBoardCloudFile => Boolean(file))
      );
      setCloudFiles(files);
      return files;
    } finally {
      setIsFileListLoading(false);
    }
  }, []);

  const hydrateCloudFile = useCallback(
    (file: FlowBoardCloudFilePayload) => {
      const nextSnapshot = normalizeSnapshot(file.snapshot);
      snapshotRef.current = nextSnapshot;
      setSnapshot(nextSnapshot);
      searchUndoRef.current = [];
      searchRedoRef.current = [];
      setCurrentFileId(file.id);
      setCurrentTitle(file.title || "未命名流程白板");
      setLastSavedAt(
        file.updatedAt
          ? new Date(file.updatedAt)
          : nextSnapshot.updatedAt
            ? new Date(nextSnapshot.updatedAt)
            : null
      );
      setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
      setSelectionStyleState(getFlowBoardSelectionStyleState(null, []));
      selectedMindElementsRef.current = [];
      updateBrowserFileParam(file.id);
    },
    [updateBrowserFileParam]
  );

  const persistSnapshot = useCallback(
    async (
      nextSnapshot: FlowBoardSnapshot,
      options: { fileId?: string | null; title?: string; toast?: boolean } = {}
    ) => {
      const targetFileId =
        options.fileId !== undefined ? options.fileId : currentFileIdRef.current;
      const nextTitle =
        String((options.title ?? currentTitleRef.current) || "").trim() ||
        "未命名流程白板";
      if (previewMode) {
        setLastSavedAt(new Date(nextSnapshot.updatedAt || Date.now()));
        if (options.toast) {
          toast.success("本地预览状态已保留");
        }
        return {
          id: "local-preview",
          title: nextTitle,
          snapshot: nextSnapshot,
          updatedAt: nextSnapshot.updatedAt || new Date().toISOString(),
        };
      }
      const response = await fetch(
        targetFileId ? getFlowBoardFileUrl(targetFileId) : FLOW_BOARD_FILES_API,
        {
          body: JSON.stringify({
            snapshot: nextSnapshot,
            title: nextTitle,
          }),
          credentials: "include",
          headers: {
            "Content-Type": "application/json",
          },
          method: targetFileId ? "PUT" : "POST",
        }
      );
      if (!response.ok) {
        throw new Error(`Failed to save flow board file: ${response.status}`);
      }

      const result = (await response.json()) as { data?: unknown };
      const savedFile = normalizeCloudFile(result.data);
      if (!savedFile) {
        throw new Error("Flow board save response is invalid");
      }

      currentFileIdRef.current = savedFile.id;
      currentTitleRef.current = savedFile.title;
      setCurrentFileId(savedFile.id);
      setCurrentTitle(savedFile.title);
      setLastSavedAt(
        savedFile.updatedAt
          ? new Date(savedFile.updatedAt)
          : new Date(nextSnapshot.updatedAt || Date.now())
      );
      updateBrowserFileParam(savedFile.id);
      setCloudFiles((current) =>
        sortCloudFiles([
          {
            id: savedFile.id,
            title: savedFile.title,
            createdAt: savedFile.createdAt,
            updatedAt: savedFile.updatedAt,
          },
          ...current.filter((file) => file.id !== savedFile.id),
        ])
      );

      if (options.toast) {
        toast.success("流程白板已保存到云端");
      }

      return savedFile;
    },
    [previewMode, updateBrowserFileParam]
  );

  useEffect(() => {
    let cancelled = false;

    if (previewMode) {
      setIsReady(true);
      return () => {
        if (saveTimerRef.current) {
          clearTimeout(saveTimerRef.current);
        }
      };
    }

    const loadDraft = async () => {
      try {
        const files = await loadCloudFiles();
        const requestedFileId =
          typeof window === "undefined"
            ? ""
            : new URLSearchParams(window.location.search).get("file") || "";
        const initialFile =
          files.find((file) => file.id === requestedFileId) || files[0] || null;

        if (!initialFile) {
          if (!cancelled) {
            const emptySnapshot = normalizeSnapshot({ children: [] });
            snapshotRef.current = emptySnapshot;
            setSnapshot(emptySnapshot);
            setCurrentFileId(null);
            setCurrentTitle("流程白板");
            setLastSavedAt(null);
            setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
            setSelectionStyleState(
              getFlowBoardSelectionStyleState(null, [])
            );
            selectedMindElementsRef.current = [];
            updateBrowserFileParam(null);
          }
          return;
        }

        const response = await fetch(getFlowBoardFileUrl(initialFile.id), {
          cache: "no-store",
          credentials: "include",
        });
        if (!response.ok) {
          throw new Error(
            `Failed to load flow board file: ${response.status}`
          );
        }
        const result = (await response.json()) as {
          data?: unknown;
        };
        const file = normalizeCloudFile(result.data);
        if (!file) {
          throw new Error("Flow board file response is invalid");
        }
        if (!cancelled) {
          hydrateCloudFile(file);
        }
      } catch (error) {
        console.error("[FlowBoard] Failed to load cloud file:", error);
        toast.error("流程白板云文件加载失败");
      } finally {
        if (!cancelled) {
          setIsReady(true);
        }
      }
    };

    loadDraft().catch(console.error);

    return () => {
      cancelled = true;
      if (saveTimerRef.current) {
        clearTimeout(saveTimerRef.current);
      }
    };
  }, [previewMode]);

  const scheduleSave = useCallback(
    (nextSnapshot: FlowBoardSnapshot) => {
      if (saveTimerRef.current) {
        clearTimeout(saveTimerRef.current);
      }

      saveTimerRef.current = setTimeout(async () => {
        setIsSavingNow(true);
        try {
          await persistSnapshot(nextSnapshot);
        } catch (error) {
          console.error("[FlowBoard] Failed to save cloud file:", error);
          toast.error("流程白板保存到云端失败");
        } finally {
          setIsSavingNow(false);
        }
      }, 350);
    },
    [persistSnapshot]
  );

  const updateSnapshot = useCallback(
    (partialSnapshot: Partial<FlowBoardSnapshot>) => {
      const nextSnapshot = normalizeSnapshot({
        ...snapshotRef.current,
        ...partialSnapshot,
        updatedAt: new Date().toISOString(),
      });
      snapshotRef.current = nextSnapshot;
      setSnapshot(nextSnapshot);
      scheduleSave(nextSnapshot);
    },
    [scheduleSave]
  );

  const handleDrawnixChange = useCallback(
    (value: BoardChangeData) => {
      const shouldPersist = value.operations.some(
        (operation) => operation.type !== "set_selection"
      );
      if (!shouldPersist) {
        refreshMarkerSelectionState({
          preserveFallback: shellControlInteractionRef.current,
        });
        return;
      }

      updateSnapshot({
        children: value.children,
        theme: value.theme,
        viewport: value.viewport,
      });
      refreshMarkerSelectionState({ preserveFallback: shellControlInteractionRef.current });
    },
    [refreshMarkerSelectionState, updateSnapshot]
  );

  const handleDrawnixSelectionChange = useCallback(
    (selection: Selection | null) => {
      selectedMindSelectionRef.current = selection;
      refreshMarkerSelectionState({
        preserveFallback: shellControlInteractionRef.current,
        selection,
      });
      const board = boardRef.current;
      const sourceId = relationshipSourceRef.current;
      if (board && sourceId && !shellControlInteractionRef.current) {
        const target = getFlowBoardSelectedMindElements(board, selection)
          .find((element) => element.id !== sourceId);
        if (target) {
          setRelationshipSourceId(null);
          // Finish the selection operation before inserting another board operation.
          queueMicrotask(() => {
            if (boardRef.current !== board) return;
            const annotation = insertMindAnnotation(board, {
              kind: "relationship",
              sourceId,
              targetId: target.id,
            });
            if (annotation) setAnnotationId(annotation.id);
            setActiveTool("selection");
          });
        }
      }
    },
    [refreshMarkerSelectionState, setRelationshipSourceId]
  );

  const handlePatchTopicDetails = useCallback((patch: Partial<TopicDetails>) => {
    const board = boardRef.current;
    if (!board || !selectedTopicId) return;
    const topic = getTopicEntries(board.children).find(({ element }) => element.id === selectedTopicId)?.element;
    if (topic) {
      const metadata = patchTopicDetails(topic, patch);
      if (JSON.stringify(metadata) === JSON.stringify(topic.xmind || {})) return;
      PlaitHistoryBoard.withNewBatch(board, () => Transforms.setNode(board, { xmind: metadata }, PlaitBoard.findPath(board, topic)));
    }
  }, [selectedTopicId]);

  const handleSaveTopicTask = useCallback((id: string, task: TopicTask | null) => {
    const board = boardRef.current;
    if (!board) return;
    const entries = getTopicEntries(board.children);
    try {
      const changes = task ? scheduleTaskChanges(board.children, id, task) : new Map<string, TopicTask | null>([[id, null]]);
      if (!task) for (const entry of entries) {
        const existing = getTopicTask(entry.element);
        if (existing?.dependencies.some(dep => dep.id === id)) changes.set(entry.element.id, {...existing, dependencies: existing.dependencies.filter(dep => dep.id !== id)});
      }
      PlaitHistoryBoard.withNewBatch(board, () => {
        for (const [topicId, value] of changes) {
          const entry = getTopicEntries(board.children).find(e => e.element.id === topicId);
          if (entry) Transforms.setNode(board, {xmind: patchTopicTask(entry.element, value)}, entry.path);
        }
      });
    } catch (error) { toast.error(error instanceof Error ? error.message : "无法保存任务"); }
  }, []);

  const handleSaveProjectCalendar = useCallback((config: ProjectCalendarConfig) => {
    const board = boardRef.current;
    const root = board && calendarRoot(board.children);
    if (!board || !root) { toast.error("请先创建一个中心主题。"); return false; }
    try {
      const problem = config.settings && validateWorkingCalendar(config.settings);
      if (problem) throw new Error(problem);
      const first = getTopicEntries(board.children).find(entry => getTopicTask(entry.element));
      const changes = first ? scheduleTaskChanges(board.children, first.element.id, getTopicTask(first.element)!, config) : new Map<string, TopicTask>();
      PlaitHistoryBoard.withNewBatch(board, () => {
        Transforms.setNode(board, {xmind: patchProjectCalendar(root, config)}, PlaitBoard.findPath(board, root));
        for (const [id, task] of changes) {
          const entry = getTopicEntries(board.children).find(item => item.element.id === id);
          if (entry) Transforms.setNode(board, {xmind: patchTopicTask(entry.element, task)}, entry.path);
        }
      });
      return true;
    } catch (error) { toast.error(error instanceof Error ? error.message : "无法保存工作日设置"); return false; }
  }, []);

  const handleJumpToTopic = useCallback((id: string) => {
    const board = boardRef.current;
    if (!board) return;
    const entry = getTopicEntries(board.children).find(({ element }) => element.id === id);
    if (!entry) return;
    // Collapsed descendants have no rendered Plait path yet.
    const path = entry.path;
    for (let length = 1; length < path.length; length++) {
      const ancestorPath = path.slice(0, length);
      const ancestor = PlaitNode.get(board, ancestorPath);
      if (ancestor.isCollapsed) Transforms.setNode(board, { isCollapsed: false }, ancestorPath);
    }
    requestAnimationFrame(() => {
      if (boardRef.current !== board) return;
      const target = getTopicEntries(board.children).find(({ element }) => element.id === id)?.element;
      if (!target) return;
      const node = MindElement.getNode(target as MindElement);
      if (!node) return;
      const rect = getRectangleByNode(node);
      const center: Point = [rect.x + rect.width / 2, rect.y + rect.height / 2];
      Transforms.setSelection(board, { anchor: center, focus: center });
      BoardTransforms.moveToCenter(board, center);
      setSelectedTopicId(id);
    });
  }, []);

  const handleOutlineRename = useCallback((id: string, title: string) => {
    const board = boardRef.current;
    const entry = board && getTopicEntries(board.children).find(({ element }) => element.id === id);
    if (!board || !entry || entry.title === (title.trim() || "未命名主题")) return;
    PlaitHistoryBoard.withNewBatch(board, () => Transforms.setNode(board, { data: renameOutlineTopic(entry.element, title) }, entry.path));
  }, []);

  const handleOutlineToggle = useCallback((id: string) => {
    const board = boardRef.current;
    const entry = board && getTopicEntries(board.children).find(({ element }) => element.id === id);
    if (board && entry) PlaitHistoryBoard.withNewBatch(board, () => Transforms.setNode(board, { isCollapsed: !entry.element.isCollapsed }, entry.path));
  }, []);

  const handleOutlineCommand = useCallback((id: string | null, command: OutlineCommand | OutlineDrop) => {
    const board = boardRef.current;
    if (!board) return null;
    try {
      const result = applyOutlineCommand(board.children, id, command);
      PlaitHistoryBoard.withNewBatch(board, () => {
        for (let index = board.children.length - 1; index >= 0; index--) {
          const before = board.children[index];
          if (!["mind", "mindmap"].includes(String(before.type))) continue;
          const after = result.children.find(element => element.id === before.id);
          if (!after) Transforms.removeNode(board, [index]);
          else if (JSON.stringify(before) !== JSON.stringify(after)) {
            const { id: _id, type: _type, ...properties } = after;
            Transforms.setNode(board, properties, [index]);
          }
        }
        for (const element of result.children) {
          if (!board.children.some(before => before.id === element.id)) Transforms.insertNode(board, element, [board.children.length]);
        }
      });
      setSelectedTopicId(result.selectedId || null);
      if (result.selectedId) requestAnimationFrame(() => handleJumpToTopic(result.selectedId));
      return result.selectedId;
    } catch (error) {
      toast.info(error instanceof Error ? error.message : "大纲操作失败");
      return null;
    }
  }, [handleJumpToTopic]);

  const handleApplyFlowBoardMarker = useCallback((marker: XmindMarker) => {
    const board = boardRef.current;
    if (!board) return;
    const elements = uniqueFlowBoardMindElements(getExistingFlowBoardMindElements(board, getActiveMarkerElements()));
    if (!elements.length) { toast.info("请先选中一个主题"); return; }
    const remove = elements.every(element => getXmindMarkerIds(element.data?.emojis).includes(marker.id));
    PlaitHistoryBoard.withNewBatch(board, () => {
      elements.forEach(element => {
        const data = { ...element.data, emojis: toggleXmindMarker(element.data?.emojis || [], marker.id, remove) };
        Transforms.setNode(board, { data }, PlaitBoard.findPath(board, element));
      });
    });
    refreshMarkerSelectionState({ preserveFallback: true });
  }, [getActiveMarkerElements, refreshMarkerSelectionState]);

  const handleClearFlowBoardMarkers = useCallback(() => {
    const board = boardRef.current;
    if (!board) return;
    const elements = uniqueFlowBoardMindElements(getExistingFlowBoardMindElements(board, getActiveMarkerElements()));
    if (!elements.length) { toast.info("请先选中一个主题"); return; }
    PlaitHistoryBoard.withNewBatch(board, () => {
      elements.forEach(element => {
        const data = { ...element.data, emojis: (element.data?.emojis || []).filter(emoji => !getXmindMarker(emoji.name)) };
        const xmind = isFlowBoardRecord(element.xmind) ? { ...element.xmind } : {};
        delete xmind.markers;
        Transforms.setNode(board, { data, xmind }, PlaitBoard.findPath(board, element));
      });
    });
    refreshMarkerSelectionState({ preserveFallback: true });
  }, [getActiveMarkerElements, refreshMarkerSelectionState]);

  const handleInsertFlowBoardAbstract = useCallback(() => {
    const board = boardRef.current;
    if (!board) {
      return;
    }

    const selectedElements = getActiveMarkerElements().filter(canSetAbstract);
    if (selectedElements.length === 0) {
      toast.info("请先选中要汇总的思维导图节点");
      return;
    }
    const paths = selectedElements.map((element) => PlaitBoard.findPath(board, element));
    const parent = PlaitNode.get(board, paths[0].slice(0, -1));
    const rangeError = validateTopicRange(paths, parent.rightNodeCount);
    if (rangeError) {
      toast.info(rangeError);
      return;
    }

    try {
      MindTransforms.insertAbstract(board, selectedElements);
      refreshMarkerSelectionState({ preserveFallback: true });
      toast.success("已添加合并汇总");
    } catch (error) {
      console.error("[FlowBoard] Failed to insert abstract:", error);
      toast.error("合并汇总失败，请选择同一组思维导图分支节点");
    }
  }, [getActiveMarkerElements, refreshMarkerSelectionState]);

  const handleInsertRelationship = useCallback(() => {
    const board = boardRef.current;
    if (!board) return;
    if (relationshipSourceId) {
      setRelationshipSourceId(null);
      return;
    }
    const elements = getActiveMarkerElements();
    if (elements.length === 1) {
      setRelationshipSourceId(elements[0].id);
      BoardTransforms.updatePointerType(board, PlaitPointerType.selection);
      setActiveTool("selection");
      return;
    }
    if (elements.length !== 2) {
      toast.info("请选择两个主题，或先选一个主题再点选联系目标");
      return;
    }
    const annotation = insertMindAnnotation(board, {
      kind: "relationship", sourceId: elements[0].id, targetId: elements[1].id,
    });
    if (annotation) setAnnotationId(annotation.id);
  }, [getActiveMarkerElements, relationshipSourceId]);

  const handleInsertBoundary = useCallback(() => {
    const board = boardRef.current;
    const elements = getActiveMarkerElements().filter((element) => element.start === undefined);
    if (!board || elements.length === 0) return;
    const paths = elements.map((element) => PlaitBoard.findPath(board, element));
    const parent = paths[0].length > 1 ? PlaitNode.get(board, paths[0].slice(0, -1)) : null;
    const rangeError = validateTopicRange(paths, parent?.rightNodeCount);
    if (rangeError) { toast.info(rangeError); return; }
    const annotation = insertMindAnnotation(board, {
      kind: "boundary", topicIds: elements.map((element) => element.id), padding: 18,
    });
    if (annotation) setAnnotationId(annotation.id);
    setRelationshipSourceId(null);
  }, [getActiveMarkerElements]);

  const handleToolChange = useCallback((tool: FlowBoardToolId) => {
    if (tool === "image") {
      imageFileInputRef.current?.click();
      return;
    }

    const board = boardRef.current;
    if (!board) {
      return;
    }

    const pointers: Record<Exclude<FlowBoardToolId, "image">, string> = {
      arrow: ArrowLineShape.curve,
      hand: PlaitPointerType.hand,
      mind: MindPointerType.mind,
      selection: PlaitPointerType.selection,
      shape: BasicShapes.roundRectangle,
      text: BasicShapes.text,
    };
    BoardTransforms.updatePointerType(board, pointers[tool]);
    setCreationMode(board, tool === "selection" || tool === "hand" || tool === "mind"
      ? BoardCreationMode.dnd : BoardCreationMode.drawing);
    setActiveTool(tool);
  }, []);

  useEffect(() => {
    const handlePointerShortcut = (event: KeyboardEvent) => {
      if (isPresenting || isOutlineOpen || event.metaKey || event.ctrlKey || event.altKey ||
          isFlowBoardEditablePasteTarget(event.target as HTMLElement)) return;
      const key = event.key.toLowerCase();
      if (key !== "v" && key !== "h") return;
      event.preventDefault();
      event.stopImmediatePropagation();
      handleToolChange(key === "v" ? "selection" : "hand");
    };
    window.addEventListener("keydown", handlePointerShortcut, true);
    return () => window.removeEventListener("keydown", handlePointerShortcut, true);
  }, [handleToolChange, isPresenting, isOutlineOpen]);

  const handleInsertChildTopic = useCallback(() => {
    const board = boardRef.current;
    const element = getActiveMarkerElements()[0];
    if (!board || !element) {
      toast.info("请先选中一个主题");
      return;
    }

    try {
      MindTransforms.insertChildNode(board as PlaitMindBoard, element);
      setActiveTool("selection");
    } catch (error) {
      console.error("[FlowBoard] Failed to insert child topic:", error);
      toast.error("新增子主题失败");
    }
  }, [getActiveMarkerElements]);

  const handleInsertSiblingTopic = useCallback(() => {
    const board = boardRef.current;
    const element = getActiveMarkerElements()[0];
    if (!board || !element || PlaitMind.isMind(element)) {
      toast.info("请先选中一个非中心主题");
      return;
    }

    try {
      MindTransforms.insertSiblingNode(board as PlaitMindBoard, element);
      setActiveTool("selection");
    } catch (error) {
      console.error("[FlowBoard] Failed to insert sibling topic:", error);
      toast.error("新增同级主题失败");
    }
  }, [getActiveMarkerElements]);

  const handleLayoutChange = useCallback(
    (layout: string) => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        toast.info("请先选中一个思维导图主题");
        return;
      }

      const roots = new Set<MindElement>();
      selectedElements.forEach((element) => {
        try {
          roots.add(MindElement.getRoot(board, element));
        } catch (_error) {
          roots.add(element);
        }
      });
      roots.forEach((root) => {
        Transforms.setNode(
          board,
          { layout: (isSpecialMindLayout(layout) ? SPECIAL_MIND_LAYOUTS[layout].base : layout) as MindLayoutType, specialLayout: isSpecialMindLayout(layout) ? layout : null },
          PlaitBoard.findPath(board, root)
        );
      });
      setSelectionStyleState((current) => ({
        ...current,
        layout: layout as MindLayoutType,
      }));
    },
    [getActiveMarkerElements]
  );

  const handleNodeFillChange = useCallback(
    (fill: string) => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        return;
      }
      selectedElements.forEach((element) => {
        Transforms.setNode(
          board,
          { fill },
          PlaitBoard.findPath(board, element)
        );
      });
      setSelectionStyleState((current) => ({ ...current, fill }));
    },
    [getActiveMarkerElements]
  );

  const handleNodeShapeChange = useCallback(
    (shape: "round-rectangle" | "underline") => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        return;
      }
      const nodeShape = shape as MindElementShape;
      selectedElements.forEach((element) => {
        Transforms.setNode(
          board,
          { shape: nodeShape },
          PlaitBoard.findPath(board, element)
        );
      });
      setSelectionStyleState((current) => ({ ...current, nodeShape }));
    },
    [getActiveMarkerElements]
  );

  const handleBranchColorChange = useCallback(
    (branchColor: string) => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        return;
      }
      selectedElements.forEach((element) => {
        Transforms.setNode(
          board,
          { branchColor },
          PlaitBoard.findPath(board, element)
        );
      });
      setSelectionStyleState((current) => ({ ...current, branchColor }));
    },
    [getActiveMarkerElements]
  );

  const handleBranchWidthChange = useCallback(
    (branchWidth: number) => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        return;
      }
      selectedElements.forEach((element) => {
        Transforms.setNode(
          board,
          { branchWidth },
          PlaitBoard.findPath(board, element)
        );
      });
      setSelectionStyleState((current) => ({ ...current, branchWidth }));
    },
    [getActiveMarkerElements]
  );

  const handleBranchShapeChange = useCallback(
    (shape: "bight" | "polyline") => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        return;
      }
      const branchShape = shape as BranchShape;
      selectedElements.forEach((element) => {
        Transforms.setNode(
          board,
          { branchShape },
          PlaitBoard.findPath(board, element)
        );
      });
      setSelectionStyleState((current) => ({ ...current, branchShape }));
    },
    [getActiveMarkerElements]
  );

  const handleFontSizeChange = useCallback(
    (fontSize: string) => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        return;
      }
      selectedElements.forEach((element) => {
        const editors = getTextEditorsByElement(element);
        TextTransforms.setFontSize(
          board,
          fontSize as FontSizes,
          getFontSizeByMindElement(board, element),
          editors
        );
        persistFlowBoardTopicEditors(board, element, editors);
      });
      setSelectionStyleState((current) => ({ ...current, fontSize }));
    },
    [getActiveMarkerElements]
  );

  const handleTextColorChange = useCallback(
    (textColor: string) => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        return;
      }
      selectedElements.forEach((element) => {
        const editors = getTextEditorsByElement(element);
        TextTransforms.setTextColor(board, textColor, undefined, editors);
        persistFlowBoardTopicEditors(board, element, editors);
      });
      setSelectionStyleState((current) => ({ ...current, textColor }));
    },
    [getActiveMarkerElements]
  );

  const handleToggleTextMark = useCallback(
    (mark: "bold" | "italic" | "underlined") => {
      const board = boardRef.current;
      const selectedElements = getActiveMarkerElements();
      if (!board || selectedElements.length === 0) {
        return;
      }
      const markType =
        mark === "bold"
          ? MarkTypes.bold
          : mark === "italic"
            ? MarkTypes.italic
            : MarkTypes.underline;
      selectedElements.forEach((element) => {
        const editors = getTextEditorsByElement(element);
        TextTransforms.setTextMarks(board, markType, editors);
        persistFlowBoardTopicEditors(board, element, editors);
      });
      setSelectionStyleState((current) => {
        if (mark === "bold") {
          return { ...current, isBold: !current.isBold };
        }
        if (mark === "italic") {
          return { ...current, isItalic: !current.isItalic };
        }
        return { ...current, isUnderlined: !current.isUnderlined };
      });
    },
    [getActiveMarkerElements]
  );

  const handleThemePresetChange = useCallback((themeId: string) => {
    const board = boardRef.current;
    if (!board) {
      return;
    }
    BoardTransforms.updateThemeColor(board, themeId as ThemeColorMode);
  }, []);

  const searchFingerprint = (sheets: FlowBoardSheetSnapshot[]) => JSON.stringify(sheets.map(sheet => ({ id: sheet.id, children: sheet.children })));
  const restoreSearchSheets = useCallback((sheets: FlowBoardSheetSnapshot[]) => {
    const board = boardRef.current;
    const current = snapshotRef.current;
    const active = sheets.find(sheet => sheet.id === current.activeSheetId);
    if (!board || !active) return;
    PlaitHistoryBoard.withoutSaving(board, () => {
      for (const entry of getTopicEntries(board.children)) {
        const target = getTopicEntries(active.children).find(item => item.element.id === entry.element.id);
        if (target && JSON.stringify(target.element.data) !== JSON.stringify(entry.element.data)) {
          Transforms.setNode(board, { data: structuredClone(target.element.data) }, entry.path);
        }
      }
    });
    updateSnapshot({ sheets: structuredClone(sheets), children: board.children });
  }, [updateSnapshot]);

  const handleUndo = useCallback(() => {
    const edit = searchUndoRef.current.at(-1);
    if (edit && searchFingerprint(snapshotRef.current.sheets || []) === searchFingerprint(edit.after)) {
      searchUndoRef.current.pop(); searchRedoRef.current.push(edit); restoreSearchSheets(edit.before);
    } else boardRef.current?.undo();
  }, [restoreSearchSheets]);

  const handleRedo = useCallback(() => {
    const edit = searchRedoRef.current.at(-1);
    if (edit && searchFingerprint(snapshotRef.current.sheets || []) === searchFingerprint(edit.before)) {
      searchRedoRef.current.pop(); searchUndoRef.current.push(edit); restoreSearchSheets(edit.after);
    } else boardRef.current?.redo();
  }, [restoreSearchSheets]);

  const handleZoom = useCallback((delta: number) => {
    const board = boardRef.current;
    if (!board) {
      return;
    }
    const nextZoom = Math.min(
      4,
      Math.max(0.1, (board.viewport?.zoom || 1) + delta)
    );
    BoardTransforms.updateZoom(board, nextZoom);
    setZoomPercent(Math.round(nextZoom * 100));
  }, []);

  const handleFitViewport = useCallback(() => {
    const board = boardRef.current;
    if (!board) {
      return;
    }
    BoardTransforms.fitViewport(board);
    setZoomPercent(Math.round((board.viewport?.zoom || 1) * 100));
  }, []);

  const handleTitleChange = useCallback((value: string) => {
    currentTitleRef.current = value;
    setCurrentTitle(value);
  }, []);

  const handleTitleCommit = useCallback(async () => {
    const title = currentTitleRef.current.trim() || "未命名流程白板";
    currentTitleRef.current = title;
    setCurrentTitle(title);
    setIsSavingNow(true);
    try {
      await persistSnapshot(snapshotRef.current, { title });
    } catch (error) {
      console.error("[FlowBoard] Failed to rename cloud file:", error);
      toast.error("文件重命名失败");
    } finally {
      setIsSavingNow(false);
    }
  }, [persistSnapshot]);

  const handleSwitchSheet = useCallback(
    (sheetId: string) => {
      const current = snapshotRef.current;
      if (sheetId === current.activeSheetId) {
        return;
      }
      const target = current.sheets?.find((sheet) => sheet.id === sheetId);
      if (!target) {
        return;
      }
      updateSnapshot({
        activeSheetId: target.id,
        canvas: target.canvas,
        children: target.children,
        viewport: target.viewport,
        theme: target.theme,
      });
      selectedMindElementsRef.current = [];
      selectedMindSelectionRef.current = null;
      setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
      setSelectionStyleState(getFlowBoardSelectionStyleState(null, []));
    },
    [updateSnapshot]
  );

  const handleSearchJump = useCallback((result: TopicSearchResult) => {
    if (result.sheetId === snapshotRef.current.activeSheetId) handleJumpToTopic(result.id);
    else {
      setPendingTopicJump(result);
      handleSwitchSheet(result.sheetId);
    }
  }, [handleJumpToTopic, handleSwitchSheet]);

  useEffect(() => {
    if (!pendingTopicJump || snapshot.activeSheetId !== pendingTopicJump.sheetId) return;
    let frame = 0;
    let attempts = 0;
    const jump = () => {
      const entries = getTopicEntries(boardRef.current?.children || []);
      if (entries.some(entry => entry.element.id === pendingTopicJump.id)) {
        handleJumpToTopic(pendingTopicJump.id); setPendingTopicJump(null);
      } else if (++attempts < 30) frame = requestAnimationFrame(jump);
    };
    frame = requestAnimationFrame(jump);
    return () => cancelAnimationFrame(frame);
  }, [pendingTopicJump, snapshot.activeSheetId, handleJumpToTopic]);

  const handleSearchReplace = useCallback((results: TopicSearchResult[], query: string, replacement: string, caseSensitive: boolean) => {
    const board = boardRef.current;
    if (!board || !query || !results.length) return;
    const current = snapshotRef.current;
    const before = structuredClone(current.sheets || []);
    const ids = new Set(results.map(result => `${result.sheetId}:${result.id}`));
    const after = structuredClone(before);
    for (const sheet of after) {
      for (const entry of getTopicEntries(sheet.children)) {
        if (ids.has(`${sheet.id}:${entry.element.id}`)) entry.element.data = { ...entry.element.data, topic: replaceTopicText(entry.element,query,replacement,caseSensitive) };
      }
    }
    if (searchFingerprint(before) === searchFingerprint(after)) return;
    searchUndoRef.current.push({ before, after });
    searchRedoRef.current = [];
    restoreSearchSheets(after);
  }, [restoreSearchSheets]);

  const handleAddSheet = useCallback(() => {
    const current = snapshotRef.current;
    const sheets = current.sheets || [];
    const nextSheet: FlowBoardSheetSnapshot = {
      id: createFlowBoardSheetId(),
      title: `画布 ${sheets.length + 1}`,
      children: [],
      theme: current.theme,
      canvas: cloneFlowBoardSheet(current.canvas),
    };
    updateSnapshot({
      activeSheetId: nextSheet.id,
      canvas: nextSheet.canvas,
      children: nextSheet.children,
      viewport: undefined,
      theme: nextSheet.theme,
      sheets: [...sheets, nextSheet],
    });
    selectedMindElementsRef.current = [];
    selectedMindSelectionRef.current = null;
    setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
    setSelectionStyleState(getFlowBoardSelectionStyleState(null, []));
  }, [updateSnapshot]);

  const handleRenameSheet = useCallback(
    (sheetId: string, title: string) => {
      const nextTitle = title.trim();
      if (!nextTitle) {
        return;
      }
      const current = snapshotRef.current;
      const sheets = (current.sheets || []).map((sheet) =>
        sheet.id === sheetId ? { ...sheet, title: nextTitle } : sheet
      );
      updateSnapshot({ sheets });
    },
    [updateSnapshot]
  );

  const handleDuplicateSheet = useCallback(
    (sheetId: string) => {
      const current = snapshotRef.current;
      const sheets = current.sheets || [];
      const sourceIndex = sheets.findIndex((sheet) => sheet.id === sheetId);
      const source = sheets[sourceIndex];
      if (!source) {
        return;
      }
      const duplicatedSheet: FlowBoardSheetSnapshot = {
        ...cloneFlowBoardSheet(source),
        id: createFlowBoardSheetId(),
        title: `${source.title} 副本`,
      };
      const nextSheets = [...sheets];
      nextSheets.splice(sourceIndex + 1, 0, duplicatedSheet);
      updateSnapshot({
        activeSheetId: duplicatedSheet.id,
        canvas: duplicatedSheet.canvas,
        children: duplicatedSheet.children,
        sheets: nextSheets,
        theme: duplicatedSheet.theme,
        viewport: duplicatedSheet.viewport,
      });
      selectedMindElementsRef.current = [];
      selectedMindSelectionRef.current = null;
      setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
      setSelectionStyleState(getFlowBoardSelectionStyleState(null, []));
    },
    [updateSnapshot]
  );

  const handleDeleteSheet = useCallback(
    (sheetId: string) => {
      const current = snapshotRef.current;
      const sheets = current.sheets || [];
      if (sheets.length <= 1) {
        return;
      }
      const targetIndex = sheets.findIndex((sheet) => sheet.id === sheetId);
      if (targetIndex < 0 || !window.confirm("确定要删除当前画布吗？")) {
        return;
      }
      const nextSheets = sheets.filter((sheet) => sheet.id !== sheetId);
      const activeSheet =
        current.activeSheetId === sheetId
          ? nextSheets[Math.min(targetIndex, nextSheets.length - 1)]
          : nextSheets.find((sheet) => sheet.id === current.activeSheetId) ||
            nextSheets[0];
      updateSnapshot({
        activeSheetId: activeSheet.id,
        canvas: activeSheet.canvas,
        children: activeSheet.children,
        sheets: nextSheets,
        theme: activeSheet.theme,
        viewport: activeSheet.viewport,
      });
      selectedMindElementsRef.current = [];
      selectedMindSelectionRef.current = null;
      setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
      setSelectionStyleState(getFlowBoardSelectionStyleState(null, []));
    },
    [updateSnapshot]
  );

  const handleFlowBoardPastedImages = useCallback(async (
    board: PlaitBoard,
    files: File[],
    topicId: string | null = null
  ) => {
    const supportedFiles = files.filter((file) =>
      FLOW_BOARD_IMAGE_UPLOAD_TYPES.has(file.type)
    );

    if (supportedFiles.length !== files.length) {
      toast.error("流程白板粘贴图片仅支持 JPEG、PNG 或 WebP");
    }

    if (supportedFiles.length === 0) {
      return;
    }

    const basePoint = getFlowBoardPastePoint(board);
    // A topic has one image. Capture its identity before any asynchronous upload.
    const filesToInsert = topicId ? supportedFiles.slice(0, 1) : supportedFiles;
    let insertedCount = 0;

    for (let index = 0; index < filesToInsert.length; index += 1) {
      const file = filesToInsert[index];
      if (file.size > FLOW_BOARD_IMAGE_UPLOAD_MAX_BYTES) {
        toast.error(IMAGE_UPLOAD_TOO_LARGE_MESSAGE);
        continue;
      }

      try {
        const [url, dimensions] = await Promise.all([
          previewMode ? readFlowBoardImageFile(file) : uploadFlowBoardImageFile(file),
          getFlowBoardImageDimensions(file, topicId ? DEFAULT_MIND_IMAGE_WIDTH : 400),
        ]);
        // Switching sheets or deleting the target while uploading must not paste elsewhere.
        if (boardRef.current !== board) return;
        if (topicId) {
          const topic = getTopicEntries(board.children).find(entry => entry.element.id === topicId)?.element;
          if (!topic || !MindElement.isMindElement(board, topic)) return;
          MindTransforms.setImage(board, topic, { url, ...dimensions });
          insertedCount += 1;
          continue;
        }
        const targetPoint: Point = [
          basePoint[0] + index * 24,
          basePoint[1] + index * 24,
        ];
        DrawTransforms.insertImage(board, { url, ...dimensions }, targetPoint);
        insertedCount += 1;
      } catch (error) {
        console.error("[FlowBoard] Failed to paste image:", error);
        toast.error("图片上传失败");
      }
    }

    if (insertedCount > 0) {
      toast.success(
        insertedCount === 1
          ? topicId ? "已插入主题图片" : "已粘贴图片到白板"
          : `已粘贴 ${insertedCount} 张图片到白板`,
        { position: "bottom-center" }
      );
    }
  }, [previewMode]);

  const handleFlowBoardPasteCapture = useCallback((event: ClipboardEvent<HTMLElement>) => {
    const board = boardRef.current;
    if (!board || !event.clipboardData) {
      return;
    }

    const target = event.target instanceof HTMLElement ? event.target : null;
    const selectedTopics = getSelectedMindElements(board);
    const topicId = selectedTopics.length === 1 ? selectedTopics[0].id : null;
    const isTopicEditor = Boolean(topicId && target?.closest(".drawnix [data-slate-editor='true']"));
    if (
      target?.closest("[data-flow-board-shell-control='true']") ||
      (isFlowBoardEditablePasteTarget(target) && !isTopicEditor)
    ) {
      return;
    }

    let imageFiles = Array.from(event.clipboardData.items || [])
      .filter((item) => item.kind === "file" && item.type.startsWith("image/"))
      .map((item) => item.getAsFile())
      .filter((file): file is File => Boolean(file));
    if (imageFiles.length === 0) {
      imageFiles = Array.from(event.clipboardData.files || []).filter(file => file.type.startsWith("image/"));
    }

    if (imageFiles.length === 0) {
      return;
    }

    event.preventDefault();
    event.stopPropagation();

    void handleFlowBoardPastedImages(board, imageFiles, topicId);
  }, [handleFlowBoardPastedImages]);

  const handleFlowBoardFileInputChangeCapture = useCallback(
    (event: ChangeEvent<HTMLElement>) => {
      const board = boardRef.current;
      const target = event.target instanceof HTMLInputElement ? event.target : null;
      if (
        !board ||
        !target ||
        target.type !== "file" ||
        target.closest("[data-flow-board-shell-control='true']")
      ) {
        return;
      }

      const files = Array.from(target.files || []);
      const imageFiles = files.filter((file) => file.type.startsWith("image/"));
      if (imageFiles.length === 0) {
        return;
      }

      event.preventDefault();
      event.stopPropagation();
      void handleFlowBoardPastedImages(board, imageFiles);
      target.value = "";
    },
    [handleFlowBoardPastedImages]
  );

  const handleValueChange = useCallback(
    (children: PlaitElement[]) => {
      if (snapshotRef.current.children === children) {
        return;
      }
      updateSnapshot({ children });
      refreshMarkerSelectionState();
    },
    [refreshMarkerSelectionState, updateSnapshot]
  );

  const handleViewportChange = useCallback(
    (viewport: Viewport) => {
      setZoomPercent(Math.round((viewport.zoom || 1) * 100));
      if (snapshotRef.current.viewport === viewport) {
        return;
      }
      updateSnapshot({ viewport });
    },
    [updateSnapshot]
  );

  const handleThemeChange = useCallback(
    (themeColorMode: ThemeColorMode) => {
      if (snapshotRef.current.theme?.themeColorMode === themeColorMode) {
        return;
      }
      updateSnapshot({ theme: { themeColorMode } });
    },
    [updateSnapshot]
  );

  const handleCanvasSettingsChange = useCallback(
    (partialCanvas: Partial<FlowBoardCanvasSettings>) => {
      updateSnapshot({
        canvas: normalizeFlowBoardCanvasSettings({
          ...snapshotRef.current.canvas,
          ...partialCanvas,
        }),
      });
    },
    [updateSnapshot]
  );

  const flushPendingSave = useCallback(
    async (showToast = false) => {
      if (saveTimerRef.current) {
        clearTimeout(saveTimerRef.current);
        saveTimerRef.current = null;
      }

      setIsSavingNow(true);
      try {
        await persistSnapshot(snapshotRef.current, { toast: showToast });
      } catch (error) {
        console.error("[FlowBoard] Manual cloud save failed:", error);
        toast.error("流程白板保存到云端失败");
      } finally {
        setIsSavingNow(false);
      }
    },
    [persistSnapshot]
  );

  const handleExportXmind = useCallback(async () => {
    if (isExporting) return;
    setIsExporting(true);
    try {
      const { exportXmind } = await import("@/lib/flow-board/xmind-export");
      const { blob, warnings } = await exportXmind({ ...snapshotRef.current, children: boardRef.current?.children || snapshotRef.current.children }, currentTitleRef.current);
      const url = URL.createObjectURL(blob);
      const anchor = document.createElement("a");
      anchor.href = url;
      anchor.download = `${currentTitleRef.current.replace(/[\\/:*?"<>|]/g, "_") || "思维导图"}.xmind`;
      anchor.click();
      setTimeout(() => URL.revokeObjectURL(url), 30_000);
      if (warnings.length) toast.warning(warnings.join("；"), { duration: 10_000 });
      else toast.success("XMind 文件已导出");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "XMind 导出失败，请重试");
    } finally {
      setIsExporting(false);
    }
  }, [isExporting]);

  const handleExportImage = useCallback(async (options: Pick<ImageExportOptions, "scale" | "transparent">) => {
    const board = boardRef.current;
    if (!board || isExportingImage) return;
    setIsExportingImage(true);
    try {
      const { exportBoardImage } = await import("@/lib/flow-board/image-export");
      const { blob } = await exportBoardImage(board, { ...options, backgroundColor: snapshotRef.current.canvas.backgroundColor || "#ffffff" });
      const url = URL.createObjectURL(blob);
      const anchor = document.createElement("a");
      anchor.href = url;
      const sheet = snapshotRef.current.sheets?.find(item => item.id === snapshotRef.current.activeSheetId);
      anchor.download = `${`${currentTitleRef.current || "思维导图"}-${sheet?.title || "工作表"}`.replace(/[\\/:*?"<>|]/g, "_")}.png`;
      anchor.click();
      setTimeout(() => URL.revokeObjectURL(url), 30_000);
      setIsImageExportOpen(false);
      toast.success("PNG 图片已导出");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "图片导出失败，请重试");
    } finally {
      setIsExportingImage(false);
    }
  }, [isExportingImage]);

  const handleImportMindMapFile = useCallback(
    async (file: File) => {
      if (!isSupportedMindMapImportFile(file)) {
        toast.error("请选择 XMind、MD、OPML 或 FreeMind .mm 文件");
        return;
      }

      setIsImportingMindMap(true);
      setIsSavingNow(true);
      try {
        const hasCurrentContent =
          Boolean(currentFileIdRef.current) ||
          snapshotRef.current.children.length > 0;
        if (hasCurrentContent) {
          await flushPendingSave(false);
        }

        if (typeof document !== "undefined" && document.fonts) {
          await Promise.all([document.fonts.load("18px NeverMind"), document.fonts.load("bold 30px NeverMind"), document.fonts.load("500 18px NeverMind"), document.fonts.load("800 30px NeverMind")]);
        }
        const title = getMindMapImportTitle(file.name);
        const imported = await parseMindMapFileToDocument(file, title);
        const nextSnapshot = normalizeSnapshot({
          activeSheetId: imported.sheets[0].id,
          sheets: imported.sheets,
          updatedAt: new Date().toISOString(),
        });
        if (previewMode) {
          hydrateCloudFile({ id: `preview-${crypto.randomUUID()}`, title, snapshot: nextSnapshot });
          setIsFilePanelOpen(false);
          setIsMarkerPanelOpen(false);
          toast.success(`已导入 ${imported.sheets.length} 张画布（本地预览）`);
          if (imported.warnings.length) toast.info(imported.warnings.join("；"), { duration: 12000 });
          return;
        }

        const response = await fetch(FLOW_BOARD_FILES_API, {
          body: JSON.stringify({
            title,
            snapshot: nextSnapshot,
          }),
          credentials: "include",
          headers: {
            "Content-Type": "application/json",
          },
          method: "POST",
        });
        if (!response.ok) {
          throw new Error(`Failed to import mind map flow board: ${response.status}`);
        }

        const result = (await response.json()) as { data?: unknown };
        const importedFile = normalizeCloudFile(result.data);
        if (!importedFile) {
          throw new Error("Flow board mind map import response is invalid");
        }

        hydrateCloudFile(importedFile);
        setCloudFiles((current) =>
          sortCloudFiles([
            {
              id: importedFile.id,
              title: importedFile.title,
              createdAt: importedFile.createdAt,
              updatedAt: importedFile.updatedAt,
            },
            ...current.filter((item) => item.id !== importedFile.id),
          ])
        );
        setIsFilePanelOpen(false);
        setIsMarkerPanelOpen(false);
        toast.success(`已导入 ${imported.sheets.length} 张画布`);
        if (imported.warnings.length) toast.info(imported.warnings.join("；"), { duration: 12000 });
      } catch (error) {
        console.error("[FlowBoard] Failed to import mind map:", error);
        toast.error(error instanceof MindMapImportError ? error.message : "思维导图导入失败，请检查文件或稍后重试");
      } finally {
        setIsImportingMindMap(false);
        setIsSavingNow(false);
        if (mindMapFileInputRef.current) {
          mindMapFileInputRef.current.value = "";
        }
      }
    },
    [flushPendingSave, hydrateCloudFile, previewMode]
  );

  const handleOpenFilePanel = useCallback(async () => {
    setIsMarkerPanelOpen(false);
    setIsFormatPanelOpen(false);
    setIsFilePanelOpen(true);
    try {
      await loadCloudFiles();
    } catch (error) {
      console.error("[FlowBoard] Failed to refresh file list:", error);
      toast.error("云文件列表加载失败");
    }
  }, [loadCloudFiles]);

  const handleOpenCloudFile = useCallback(
    async (fileId: string) => {
      if (fileId === currentFileIdRef.current) {
        setIsFilePanelOpen(false);
        setIsFormatPanelOpen(true);
        return;
      }

      const hasCurrentContent =
        Boolean(currentFileIdRef.current) ||
        snapshotRef.current.children.length > 0;
      if (hasCurrentContent) {
        await flushPendingSave(false);
      }

      try {
        const response = await fetch(getFlowBoardFileUrl(fileId), {
          cache: "no-store",
          credentials: "include",
        });
        if (!response.ok) {
          throw new Error(`Failed to open flow board file: ${response.status}`);
        }
        const result = (await response.json()) as { data?: unknown };
        const file = normalizeCloudFile(result.data);
        if (!file) {
          throw new Error("Flow board file response is invalid");
        }
        hydrateCloudFile(file);
        setIsFilePanelOpen(false);
        setIsFormatPanelOpen(true);
      } catch (error) {
        console.error("[FlowBoard] Failed to open cloud file:", error);
        toast.error("流程白板云文件打开失败");
      }
    },
    [flushPendingSave, hydrateCloudFile]
  );

  const handleCreateCloudFile = useCallback(async () => {
    const hasCurrentContent =
      Boolean(currentFileIdRef.current) ||
      snapshotRef.current.children.length > 0;
    if (hasCurrentContent) {
      await flushPendingSave(false);
    }

    setIsSavingNow(true);
    try {
      const now = new Date();
      const nextSnapshot = normalizeSnapshot({
        children: [],
        updatedAt: now.toISOString(),
      });
      const response = await fetch(FLOW_BOARD_FILES_API, {
        body: JSON.stringify({
          title: `流程白板 ${now.toLocaleString("zh-CN", {
            month: "2-digit",
            day: "2-digit",
            hour: "2-digit",
            minute: "2-digit",
          })}`,
          snapshot: nextSnapshot,
        }),
        credentials: "include",
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
      });
      if (!response.ok) {
        throw new Error(`Failed to create flow board file: ${response.status}`);
      }
      const result = (await response.json()) as { data?: unknown };
      const file = normalizeCloudFile(result.data);
      if (!file) {
        throw new Error("Flow board create response is invalid");
      }
      hydrateCloudFile(file);
      setCloudFiles((current) =>
        sortCloudFiles([
          {
            id: file.id,
            title: file.title,
            createdAt: file.createdAt,
            updatedAt: file.updatedAt,
          },
          ...current.filter((item) => item.id !== file.id),
        ])
      );
      setIsFilePanelOpen(false);
      setIsFormatPanelOpen(true);
      toast.success("已新建云端流程白板");
    } catch (error) {
      console.error("[FlowBoard] Failed to create cloud file:", error);
      toast.error("新建流程白板云文件失败");
    } finally {
      setIsSavingNow(false);
    }
  }, [flushPendingSave, hydrateCloudFile]);

  const handleDeleteCloudFile = useCallback(
    async (fileId: string) => {
      if (!window.confirm("确定要删除这个流程白板云文件吗？")) {
        return;
      }

      try {
        const response = await fetch(getFlowBoardFileUrl(fileId), {
          credentials: "include",
          method: "DELETE",
        });
        if (!response.ok) {
          throw new Error(
            `Failed to delete flow board file: ${response.status}`
          );
        }

        const remainingFiles = cloudFiles.filter((file) => file.id !== fileId);
        setCloudFiles(remainingFiles);
        toast.success("已删除流程白板云文件");

        if (fileId !== currentFileIdRef.current) {
          return;
        }

        const nextFile = remainingFiles[0] || null;
        if (nextFile) {
          const nextResponse = await fetch(getFlowBoardFileUrl(nextFile.id), {
            cache: "no-store",
            credentials: "include",
          });
          if (!nextResponse.ok) {
            throw new Error(
              `Failed to open next flow board file: ${nextResponse.status}`
            );
          }
          const result = (await nextResponse.json()) as { data?: unknown };
          const file = normalizeCloudFile(result.data);
          if (file) {
            hydrateCloudFile(file);
          }
          return;
        }

        const emptySnapshot = normalizeSnapshot({ children: [] });
        snapshotRef.current = emptySnapshot;
        setSnapshot(emptySnapshot);
        setCurrentFileId(null);
        setCurrentTitle("流程白板");
        setLastSavedAt(null);
        setMarkerSelectionState({ count: 0, names: [], mixedNames: [] });
        setSelectionStyleState(getFlowBoardSelectionStyleState(null, []));
        selectedMindElementsRef.current = [];
        updateBrowserFileParam(null);
      } catch (error) {
        console.error("[FlowBoard] Failed to delete cloud file:", error);
        toast.error("删除流程白板云文件失败");
      }
    },
    [cloudFiles, hydrateCloudFile, updateBrowserFileParam]
  );

  const isFormatPanelVisible =
    !isZenMode && isFormatPanelOpen && !isFilePanelOpen && !isMarkerPanelOpen;
  const topicEntries = getTopicEntries(snapshot.children);
  const selectedTopic = topicEntries.find(({ element }) => element.id === selectedTopicId)?.element || null;
  const selectedAnnotation = snapshot.children.find(
    (element) => element.id === annotationId && isMindAnnotation(element)
  );
  const sheetTabs = (snapshot.sheets || []).map((sheet) => ({
    id: sheet.id,
    title: sheet.title,
  }));

  if (!isReady) {
    return (
      <div className="flex h-svh w-full items-center justify-center bg-[#f7f8fb] text-[#697386]">
        <div className="rounded-md border border-black/10 bg-white px-5 py-3 font-medium text-sm shadow-sm">
          正在恢复流程白板...
        </div>
      </div>
    );
  }

  return (
    <main
      className="xmind-workspace relative h-svh w-full overflow-hidden"
      style={{ "--xmind-panel-offset": !isZenMode && (isFormatPanelVisible || isFilePanelOpen || isMarkerPanelOpen) ? "calc(var(--xmind-panel-width) + 16px)" : "0px" } as React.CSSProperties}
      onChangeCapture={handleFlowBoardFileInputChangeCapture}
      onKeyDownCapture={(event) => {
        if (isPresenting || (event.target as HTMLElement)?.closest(".xmind-gantt, .xmind-task-backdrop, .xmind-project-calendar-backdrop, .xmind-image-export")) return;
        if (event.key === "Escape") {
          if (isSearchOpen) { event.preventDefault(); setIsSearchOpen(false); }
          if (isZenMode) { event.preventDefault(); setIsZenMode(false); }
        }
        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "f" && !isFlowBoardEditablePasteTarget(event.target as HTMLElement)) {
          event.preventDefault(); event.stopPropagation(); setIsSearchOpen(true);
        }
        if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "z" && !isFlowBoardEditablePasteTarget(event.target as HTMLElement)) {
          event.preventDefault(); event.stopPropagation();
          if (event.shiftKey) handleRedo(); else handleUndo();
        }
        if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key.toLowerCase() === "n" && !isFlowBoardEditablePasteTarget(event.target as HTMLElement)) {
          event.preventDefault(); setIsNotesPopoverOpen(true); setIsTopicPanelOpen(false); setIsFormatPanelOpen(true); setIsFilePanelOpen(false); setIsMarkerPanelOpen(false); setTopicDetailSection("notes");
        }
        if (event.key === "Escape" && relationshipSourceId) {
          event.preventDefault();
          setRelationshipSourceId(null);
        }
        if (
          (event.metaKey || event.ctrlKey) &&
          event.key.toLowerCase() === "s"
        ) {
          event.preventDefault();
          void flushPendingSave(true);
        }
      }}
      onKeyDown={(event) => {
        if (isFlowBoardEditablePasteTarget(event.target as HTMLElement) && (event.target as HTMLElement).closest('[data-flow-board-shell-control="true"]')) event.stopPropagation();
      }}
      onKeyUp={(event) => {
        if (isFlowBoardEditablePasteTarget(event.target as HTMLElement) && (event.target as HTMLElement).closest('[data-flow-board-shell-control="true"]')) event.stopPropagation();
      }}
      onCopy={(event) => {
        if (isFlowBoardEditablePasteTarget(event.target as HTMLElement) && (event.target as HTMLElement).closest('[data-flow-board-shell-control="true"]')) event.stopPropagation();
      }}
      onCut={(event) => {
        if (isFlowBoardEditablePasteTarget(event.target as HTMLElement) && (event.target as HTMLElement).closest('[data-flow-board-shell-control="true"]')) event.stopPropagation();
      }}
      onPasteCapture={handleFlowBoardPasteCapture}
      onPointerDownCapture={(event) => {
        const target = event.target;
        shellControlInteractionRef.current =
          target instanceof Element &&
          Boolean(target.closest('[data-flow-board-shell-control="true"]'));
        window.setTimeout(() => {
          shellControlInteractionRef.current = false;
        }, 1000);
      }}
    >
      <style>
        {`
          /* 隐藏 drawnix 自带应用菜单中的 Language 和 GitHub 选项及附近的分隔线 */
          [aria-label="Language"],
          [aria-label="GitHub"],
          [aria-label="Language"] + div,
          [aria-label="GitHub"] + div,
          div:has(+ [aria-label="Language"]) {
            display: none !important;
          }

          .drawnix .slate-editable-container,
          .drawnix .plait-text-container {
            color: ${FLOW_BOARD_DEFAULT_TEXT_COLOR};
          }

          .flow-board-canvas-shell > .drawnix,
          .flow-board-canvas-shell > .drawnix > .plait-board-container,
          .flow-board-canvas-shell > .drawnix .viewport-container {
            width: 100% !important;
            height: 100% !important;
            background-color: transparent !important;
          }

          .drawnix .app-toolbar,
          .drawnix .draw-toolbar,
          .drawnix .zoom-toolbar,
          .drawnix .theme-toolbar {
            display: none !important;
          }
        `}
      </style>
      <input
        accept={FLOW_BOARD_MIND_MAP_IMPORT_ACCEPT}
        className="hidden"
        data-flow-board-shell-control="true"
        onChange={(event) => {
          const file = event.currentTarget.files?.[0];
          if (file) {
            void handleImportMindMapFile(file);
          }
        }}
        ref={mindMapFileInputRef}
        type="file"
      />
      <input
        accept="image/jpeg,image/png,image/webp"
        className="hidden"
        data-flow-board-shell-control="true"
        multiple
        onChange={(event) => {
          const board = boardRef.current;
          const files = Array.from(event.currentTarget.files || []);
          if (board && files.length > 0) {
            const topics = getActiveMarkerElements();
            void handleFlowBoardPastedImages(board, files, topics.length === 1 ? topics[0].id : null);
          }
          event.currentTarget.value = "";
        }}
        ref={imageFileInputRef}
        type="file"
      />

      {!isZenMode ? <XmindEditorTopBar
        onSearch={() => setIsSearchOpen(true)}
        onToggleZen={() => setIsZenMode(true)}
        onToggleOutline={() => setIsOutlineOpen(value => !value)}
        onPresentation={() => setIsPresenting(true)}
        onGantt={() => setIsGanttOpen(true)}
        onTask={() => {
          const selected = getActiveMarkerElements();
          if (selected.length !== 1) {toast.info("请选择一个主题"); return;}
          setTaskTopicId(selected[0].id);
        }}
        activeTool={activeTool}
        canEditMind={markerSelectionState.count > 0}
        currentTitle={currentTitle}
        formatPanelOpen={isFormatPanelVisible}
        markerPanelOpen={isMarkerPanelOpen}
        isSaving={isSavingNow || isImportingMindMap}
        onBack={() => {
          window.location.href = "/";
        }}
        onImport={() => mindMapFileInputRef.current?.click()}
        onExport={() => void handleExportXmind()}
        onExportImage={() => setIsImageExportOpen(true)}
        isExporting={isExporting || isExportingImage}
        onInsertChild={isOutlineOpen ? () => { handleOutlineCommand(selectedTopicId, "child"); } : handleInsertChildTopic}
        onInsertSibling={isOutlineOpen ? () => { handleOutlineCommand(selectedTopicId, "sibling"); } : handleInsertSiblingTopic}
        onRelationship={handleInsertRelationship}
        onBoundary={handleInsertBoundary}
        relationshipPending={Boolean(relationshipSourceId)}
        onOpenFiles={() => {
          void handleOpenFilePanel();
        }}
        onRedo={handleRedo}
        onSave={() => {
          void flushPendingSave(true);
        }}
        onSummary={handleInsertFlowBoardAbstract}
        onTopicDetails={(section) => {
          const selected = getActiveMarkerElements();
          if (selected.length !== 1) { toast.info("请选择一个主题"); return; }
          setSelectedTopicId(selected[0].id);
          setTopicDetailSection(section);
          setIsNotesPopoverOpen(section === "notes");
          setIsTopicPanelOpen(section !== "notes");
          setIsFormatPanelOpen(true);
          setIsFilePanelOpen(false);
          setIsMarkerPanelOpen(false);
        }}
        onTitleChange={handleTitleChange}
        onTitleCommit={() => {
          void handleTitleCommit();
        }}
        onToggleFormat={() => {
          setIsTopicPanelOpen(false);
          setIsFilePanelOpen(false);
          setIsMarkerPanelOpen(false);
          setIsFormatPanelOpen((open) => !open);
        }}
        onToggleMarkers={() => {
          setIsFilePanelOpen(false);
          setIsFormatPanelOpen(false);
          setIsMarkerPanelOpen((open) => !open);
          refreshMarkerSelectionState({ preserveFallback: true });
        }}
        onToolChange={handleToolChange}
        onUndo={handleUndo}
        siteLogo={displayLogo}
        siteName={siteName}
      /> : <button type="button" aria-label="退出 ZEN 模式" className="xmind-zen-exit" data-flow-board-shell-control="true" onClick={() => setIsZenMode(false)}><X size={14} />退出 ZEN · Esc</button>}

      {isFormatPanelVisible && isTopicPanelOpen ? (
        <XmindTopicPanel topic={selectedTopic} topics={topicEntries} section={topicDetailSection}
          onPatch={handlePatchTopicDetails} onJump={handleJumpToTopic} onClose={() => setIsTopicPanelOpen(false)} />
      ) : isFormatPanelVisible && selectedAnnotation && isMindAnnotation(selectedAnnotation) ? (
        <XmindAnnotationPanel
          element={selectedAnnotation}
          onClose={() => setIsFormatPanelOpen(false)}
          onChange={(patch) => {
            const board = boardRef.current;
            const index = board?.children.findIndex((element) => element.id === annotationId) ?? -1;
            if (board && index >= 0) Transforms.setNode(board, patch, [index]);
          }}
          onDelete={() => {
            const board = boardRef.current;
            const index = board?.children.findIndex((element) => element.id === annotationId) ?? -1;
            if (board && index >= 0) Transforms.removeNode(board, [index]);
            setAnnotationId(null);
          }}
        />
      ) : isFormatPanelVisible ? (
        <XmindFormatPanel
          activeLayoutId={selectionStyleState.layout}
          activeThemeId={snapshot.theme?.themeColorMode || "default"}
          branchColor={selectionStyleState.branchColor}
          branchShape={selectionStyleState.branchShape}
          branchWidth={selectionStyleState.branchWidth}
          canvasBackgroundColor={snapshot.canvas.backgroundColor}
          canvasGridColor={snapshot.canvas.gridColor}
          canvasGridEnabled={snapshot.canvas.gridEnabled}
          canvasGridSize={snapshot.canvas.gridSize}
          fontSize={selectionStyleState.fontSize}
          isBold={selectionStyleState.isBold}
          isItalic={selectionStyleState.isItalic}
          isUnderlined={selectionStyleState.isUnderlined}
          layouts={FLOW_BOARD_LAYOUT_OPTIONS}
          nodeFill={selectionStyleState.fill}
          nodeShape={selectionStyleState.nodeShape}
          onBranchColorChange={handleBranchColorChange}
          onBranchShapeChange={handleBranchShapeChange}
          onBranchWidthChange={handleBranchWidthChange}
          onCanvasBackgroundColorChange={(backgroundColor) =>
            handleCanvasSettingsChange({ backgroundColor })
          }
          onCanvasGridColorChange={(gridColor) =>
            handleCanvasSettingsChange({ gridColor })
          }
          onCanvasGridEnabledChange={(gridEnabled) =>
            handleCanvasSettingsChange({ gridEnabled })
          }
          onCanvasGridSizeChange={(gridSize) =>
            handleCanvasSettingsChange({ gridSize })
          }
          onClose={() => setIsFormatPanelOpen(false)}
          onFontSizeChange={handleFontSizeChange}
          onLayoutChange={handleLayoutChange}
          onNodeFillChange={handleNodeFillChange}
          onNodeShapeChange={handleNodeShapeChange}
          onTextColorChange={handleTextColorChange}
          onThemeChange={handleThemePresetChange}
          onToggleTextMark={handleToggleTextMark}
          selectedCount={markerSelectionState.count}
          textColor={selectionStyleState.textColor}
          themes={FLOW_BOARD_THEME_OPTIONS}
        />
      ) : null}

      {!isZenMode && isFilePanelOpen ? (
        <aside
          className="xmind-aux-panel absolute right-0 top-[94px] bottom-9 z-30 flex w-full max-w-full flex-col overflow-hidden border-[#dfe2e7] border-l bg-white sm:w-[304px]"
          data-flow-board-shell-control="true"
        >
          <div className="flex items-center justify-between border-[#eceef1] border-b px-4 py-3">
            <div>
              <div className="font-bold text-[#111827] text-sm">
                云文件列表
              </div>
              <div className="mt-1 text-[#7a8297] text-xs">
                流程白板会自动保存到当前登录账号
              </div>
            </div>
            <button
              className="flex h-8 w-8 items-center justify-center text-[#7a8297] transition-colors hover:bg-black/5 hover:text-[#111827]"
              onClick={() => {
                setIsFilePanelOpen(false);
                setIsFormatPanelOpen(true);
              }}
              type="button"
            >
              <X className="h-4 w-4" />
            </button>
          </div>

          <div className="border-black/5 border-b p-4">
            <button
              className="flex h-10 w-full items-center justify-center gap-2 rounded-md bg-[#111827] font-semibold text-sm text-white transition hover:bg-[#1f2937]"
              onClick={handleCreateCloudFile}
              type="button"
            >
              <Plus className="h-4 w-4" />
              新建流程白板
            </button>
          </div>

          <div className="min-h-0 flex-1 overflow-y-auto p-3">
            {isFileListLoading ? (
              <div className="flex h-full min-h-[180px] items-center justify-center text-[#7a8297]">
                <Loader2 className="h-5 w-5 animate-spin" />
              </div>
            ) : cloudFiles.length === 0 ? (
              <div className="flex min-h-[220px] flex-col items-center justify-center rounded-md border border-black/10 border-dashed bg-[#f7f8fb] px-6 text-center">
                <FileText className="mb-3 h-8 w-8 text-[#9aa3b8]" />
                <div className="font-semibold text-[#111827] text-sm">
                  暂无云文件
                </div>
                <div className="mt-1 text-[#7a8297] text-xs">
                  新建或编辑后会自动保存到云端
                </div>
              </div>
            ) : (
              <div className="space-y-2">
                {cloudFiles.map((file) => (
                  <div
                    className={`group flex w-full items-center gap-3 rounded-md border p-3 text-left transition ${
                      file.id === currentFileId
                        ? "border-[#2563eb]/30 bg-[#eff6ff] shadow-sm"
                        : "border-black/5 bg-white hover:border-black/10 hover:bg-[#f7f8fb]"
                    }`}
                    key={file.id}
                    onClick={() => handleOpenCloudFile(file.id)}
                    onKeyDown={(event) => {
                      if (event.key === "Enter" || event.key === " ") {
                        event.preventDefault();
                        void handleOpenCloudFile(file.id);
                      }
                    }}
                    role="button"
                    tabIndex={0}
                  >
                    <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-md border border-black/5 bg-white text-[#4f63ff] shadow-sm">
                      <FileText className="h-4 w-4" />
                    </div>
                    <div className="min-w-0 flex-1">
                      <div className="truncate font-semibold text-[#111827] text-sm">
                        {file.title || "未命名流程白板"}
                      </div>
                      <div className="mt-1 text-[#7a8297] text-xs">
                        {formatFileUpdatedAt(file.updatedAt)}
                      </div>
                    </div>
                    <button
                      className="flex h-8 w-8 items-center justify-center text-[#9aa3b8] opacity-100 transition hover:bg-red-50 hover:text-red-600 sm:opacity-0 sm:group-hover:opacity-100"
                      onClick={(event) => {
                        event.stopPropagation();
                        void handleDeleteCloudFile(file.id);
                      }}
                      type="button"
                    >
                      <Trash2 className="h-4 w-4" />
                    </button>
                  </div>
                ))}
              </div>
            )}
          </div>
        </aside>
      ) : null}

      {!isZenMode && isMarkerPanelOpen ? <XmindMarkerPanel
        selectedCount={markerSelectionState.count}
        activeIds={markerSelectionState.names}
        mixedIds={markerSelectionState.mixedNames}
        onApply={handleApplyFlowBoardMarker}
        onClear={handleClearFlowBoardMarkers}
        onClose={() => { setIsMarkerPanelOpen(false); setIsFormatPanelOpen(true); }}
      /> : null}

      <div
        inert={isOutlineOpen}
        aria-hidden={isOutlineOpen}
        className="flow-board-canvas-shell absolute left-0"
        style={{
          backgroundColor: snapshot.canvas.backgroundColor,
          backgroundImage: snapshot.canvas.gridEnabled
            ? `radial-gradient(${snapshot.canvas.gridColor} 1px, transparent 1px)`
            : "none",
          backgroundPosition: "-1px -1px",
          backgroundSize: `${snapshot.canvas.gridSize}px ${snapshot.canvas.gridSize}px`,
        }}
      >
        {relationshipSourceId ? (
          <div className="absolute top-4 left-1/2 z-40 flex -translate-x-1/2 items-center gap-3 whitespace-nowrap rounded-lg border border-blue-100 bg-white px-4 py-2 text-xs text-[#3569e8] shadow-sm" data-flow-board-shell-control="true" role="status">
            点击另一个主题建立联系
            <button className="text-[#717887] hover:text-[#17191d]" onClick={() => setRelationshipSourceId(null)} type="button">取消 · Esc</button>
          </div>
        ) : null}
        {!snapshot.children.length && !isOutlineOpen ? <button type="button" aria-label="创建中心主题" className="xmind-empty-canvas" data-flow-board-shell-control="true" onClick={() => { const id = handleOutlineCommand(null,"child"); if (id) requestAnimationFrame(handleFitViewport); }}>中心主题</button> : null}
        <Drawnix
          plugins={FLOW_BOARD_PLUGINS}
          afterInit={handleDrawnixInit}
          className="xmind-canvas h-full w-full"
          key={snapshot.activeSheetId || "sheet-1"}
          onChange={handleDrawnixChange as NonNullable<DrawnixProps["onChange"]>}
          onSelectionChange={handleDrawnixSelectionChange}
          onThemeChange={handleThemeChange}
          onValueChange={handleValueChange}
          onViewportChange={handleViewportChange}
          theme={snapshot.theme}
          tutorial={false}
          value={snapshot.children}
          viewport={snapshot.viewport}
        />
      </div>

      {!isOutlineOpen ? <XmindTopicBadges board={boardRef.current} elements={snapshot.children} viewport={snapshot.viewport} onTask={setTaskTopicId} onNotes={id => {
        const board=boardRef.current;
        const topic=board && getTopicEntries(board.children).find(e=>e.element.id===id)?.element;
        const node=topic && MindElement.getNode(topic as MindElement);
        if(board && node) { const rect=getRectangleByNode(node);const center:Point=[rect.x+rect.width/2,rect.y+rect.height/2];Transforms.setSelection(board,{anchor:center,focus:center}); }
        setSelectedTopicId(id);setTopicDetailSection("notes");setIsNotesPopoverOpen(true);setIsTopicPanelOpen(false);setIsFormatPanelOpen(true);setIsFilePanelOpen(false);setIsMarkerPanelOpen(false);
      }} /> : null}
      {isOutlineOpen ? <div className="xmind-outline-shell">
        <XmindOutline key={snapshot.activeSheetId} elements={snapshot.children} selectedId={selectedTopicId} zoomPercent={outlineZoomPercent}
          onSelect={handleJumpToTopic} onRename={handleOutlineRename} onToggle={handleOutlineToggle}
          onCommand={handleOutlineCommand} onUndo={handleUndo} onRedo={handleRedo} />
      </div> : null}
      {!isZenMode ? <XmindSheetBar
        topicCount={topicEntries.length}
        selectedCount={markerSelectionState.count}
        onZoomTo={(percent) => { if (isOutlineOpen) setOutlineZoomPercent(percent); else { const board = boardRef.current; if (board) { BoardTransforms.updateZoom(board,percent / 100); setZoomPercent(percent); } } }}
        outlineOpen={isOutlineOpen}
        onToggleOutline={() => setIsOutlineOpen(value => !value)}
        activeSheetId={snapshot.activeSheetId || "sheet-1"}
        formatPanelOpen={isFormatPanelVisible}
        onAddSheet={handleAddSheet}
        onDeleteSheet={handleDeleteSheet}
        onDuplicateSheet={handleDuplicateSheet}
        onFit={isOutlineOpen ? () => setOutlineZoomPercent(100) : handleFitViewport}
        onRenameSheet={handleRenameSheet}
        onSwitchSheet={handleSwitchSheet}
        onZoomIn={() => isOutlineOpen ? setOutlineZoomPercent(value => Math.min(200, value + 10)) : handleZoom(0.1)}
        onZoomOut={() => isOutlineOpen ? setOutlineZoomPercent(value => Math.max(50, value - 10)) : handleZoom(-0.1)}
        sheets={sheetTabs}
        zoomPercent={isOutlineOpen ? outlineZoomPercent : zoomPercent}
      /> : null}
      {isSearchOpen && !isZenMode ? <XmindSearchPanel sheets={snapshot.sheets || []} activeSheetId={snapshot.activeSheetId || "sheet-1"} onClose={() => setIsSearchOpen(false)} onJump={handleSearchJump} onReplace={handleSearchReplace} /> : null}
      {isNotesPopoverOpen ? <XmindNotesPopover board={boardRef.current} topic={selectedTopic} viewport={snapshot.viewport} onChange={notesDocument => handlePatchTopicDetails({notesDocument})} onDetails={() => {setIsNotesPopoverOpen(false);setIsTopicPanelOpen(true);setIsFormatPanelOpen(true);setIsFilePanelOpen(false);setIsMarkerPanelOpen(false);}} onClose={() => setIsNotesPopoverOpen(false)} /> : null}
      {isImageExportOpen ? <XmindImageExport busy={isExportingImage} onExport={options => void handleExportImage(options)} onClose={() => setIsImageExportOpen(false)} /> : null}
      {isCalendarOpen ? <XmindProjectCalendar key={snapshot.activeSheetId} config={getProjectCalendar(snapshot.children)} onSave={handleSaveProjectCalendar} onClose={() => setIsCalendarOpen(false)} /> : null}
      {isGanttOpen ? <XmindGantt key={snapshot.activeSheetId} elements={snapshot.children} title={currentTitle} onClose={() => setIsGanttOpen(false)} onEdit={setTaskTopicId} onCalendar={() => setIsCalendarOpen(true)} onChange={handleSaveTopicTask} onUndo={handleUndo} onRedo={handleRedo} /> : null}
      {taskTopicId && topicEntries.some(e => e.element.id === taskTopicId) ? <XmindTaskEditor key={taskTopicId} topic={topicEntries.find(e => e.element.id === taskTopicId)!.element} elements={snapshot.children} onSave={handleSaveTopicTask} onClose={() => setTaskTopicId(null)} onGantt={() => setIsGanttOpen(true)} onCalendar={() => setIsCalendarOpen(true)} /> : null}
      {isPresenting ? <XmindPresentation elements={snapshot.children} title={currentTitle} onClose={() => setIsPresenting(false)} /> : null}
    </main>
  );
}