"use client";
import { useCanvasGroupRuns } from "@/hooks/use-canvas-group-runs";
import { hasRecoverableCanvasTask } from "@/lib/video-canvas/task-recovery";
import { GroupStoryboardPreview } from "./GroupStoryboardPreview";
import { CanvasGroupToolbar } from "./CanvasGroupToolbar";
import { isCanvasGroup, groupMembers, makeCanvasGroup, ungroupCanvasNodes, moveCanvasSelection, layoutCanvasGroup, migrateLegacyGroups, exportCanvasGroup, instantiateCanvasGroup, groupBounds, assignGroupMembers } from "@/lib/video-canvas/groups";
import { compileGroupRun } from "@/lib/video-canvas/group-execution";

import { requireResolvedReferenceImages, connectionError, connectionTypeError, videoInputLimitError, connectedText, connectedInputNodes, assertConnectedInputsReady, withConnectedText, connectedImageUrls } from "@/lib/video-canvas/connections";
import { resolveSmartEditIntent, assertBeatMusic } from "@/lib/video-canvas/smart-edit/intent";
import { SmartEditDialog } from "./smart-edit/SmartEditDialog";
import { SmartEditNodeCard, SmartEditNodeComposer, type SmartEditMode } from "./smart-edit/SmartEditNode";
import { smartEditRequestSchema, type EditPlan } from "@/lib/video-canvas/smart-edit/contract";
import { AudioGenerationComposer } from "./AudioGenerationComposer";
import { TVstarPanel, type TVstarGenerationModel, type TVstarGenerationSelection, type TVstarModel, type TVstarNodeContext, type TVstarReference, type TVstarShot } from "./tvstar/TVstarPanel";
import { resolveTVstarGenerationReferences } from "./tvstar/generation-references";
import { tvstarTiming } from "@/lib/video-canvas/tvstar-timing";
import { tvstarOutputRequirements } from "@/lib/video-canvas/tvstar-output";
import { CharacterStudioPanel, type StudioCharacter, type StudioView } from "./tvstar/CharacterStudioPanel";
import { tvstarShotComposition } from "@/lib/video-canvas/tvstar-shot-input";
import { VideoCanvasConflictNotice } from "./VideoCanvasConflictNotice";
import { normalizeVideoAnalysisRows } from "@/lib/video-canvas/video-story";
import dynamic from "next/dynamic";
import { signOut } from "next-auth/react";
import { PromptTranslateButton } from "@/components/canvas/PromptTranslateButton";
import { useVideoCanvasTasks } from "@/hooks/use-video-canvas-tasks";
import { requireAnalysisResult } from "@/lib/video-canvas/task-contract";
const DirectorStudioDialog = dynamic(
  () => import("@/components/canvas/director/DirectorStudioDialog").then(module => module.DirectorStudioDialog),
  { ssr: false },
);
import { directorMotionPrompt, resizeDirectorMotion } from "@/lib/video-canvas/director-motion";
import type { DirectorSnapshot } from "@/lib/video-canvas/director-scene";
import { chooseStoryVideoSettings, filterCanvasModels, getCanvasVideoModes, getCanvasVideoParameters, isCanvasLanguageModel, isCanvasVisionModel, type CanvasModelKind } from "@/lib/video-canvas/model-matching";

import {
  ScanText,
  AudioLines,
  ArrowUp,
  Bell,
  BookOpen,
  BoxSelect,
  Camera,
  Clapperboard,
  Check,
  ChevronDown,
  ChevronRight,
  Clock3,
  Copy,
  Download,
  Ellipsis,
  FileText,
  FolderOpen,
  GitBranch,
  Headphones,
  Mic,
  HelpCircle,
  Image as ImageIcon,
  Keyboard,
  Languages,
  Layers,
  Loader2,
  Maximize2,
  Minimize2,
  Music2,
  Move,
  Pause,
  Plus,
  Play,
  Redo2,
  RotateCcw,
  Search,
  Scissors,
  Settings2,
  SlidersHorizontal,
  Smile,
  Sparkles,
  Star,
  Trash2,
  Upload,
  UserRound,
  Video,
  Wand2,
  Undo2,
  Zap,
  X,
  type LucideIcon,
} from "lucide-react";
import { useRouter } from "next/navigation";
import { createPortal } from "react-dom";
import {
  type ChangeEvent as ReactChangeEvent,
  type DragEvent as ReactDragEvent,
  Fragment,
  type MouseEvent as ReactMouseEvent,
  type PointerEvent as ReactPointerEvent,
  type ReactNode,
  type CSSProperties,
  type WheelEvent as ReactWheelEvent,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { toast } from "sonner";
import { ZCODE_VIDEO_CANVAS_AUTHORIZED } from "@/lib/ai/canvas-agent-runtime/authorization";
import { CanvasAgentUiListener } from "./chat-panel/canvas-agent-ui-listener";
import type { CanvasAgentUiCommand } from "@/lib/ai/canvas-agent-runtime/ui-command";
import { VideoCanvasAgentPanel } from "./chat-panel/video-canvas-agent-panel";
import { mergeVideoAgentResults } from "@/lib/ai/canvas-agent-runtime/video-protocol";
import useSWR from "swr";
import {
  getGenerationCreditCostFromImageGenConfig,
  getImageCreditCostFromConfig,
} from "@/lib/ai/image-model-pricing";
import {
  isImageGenerationModelDescriptor,
  isVideoModelDescriptor,
} from "@/lib/ai/model-classification";
import {
  defaultPointsSystemConfig,
  getImageToolCreditCost,
  normalizePointsSystemConfig,
  type ImageToolCreditFeature,
  type PointsSystemConfig,
} from "@/lib/points/config";
import { cn, fetcher } from "@/lib/utils";
import {
  canvasService,
  imageGenerationService,
  videoGenerationService,
} from "@/services/canvas";
import { canvasGenerationCount, canvasImageRequest, canvasImageResultUrls } from "@/lib/video-canvas/generation-contract";
import { anglePresets, angleRequestParameters } from "@/lib/video-canvas/angle-settings";
import { downloadCanvasMedia } from "@/lib/video-canvas/download";
import { preserveGeneratedVideo } from "@/lib/video-canvas/archive-result";
import { VideoArchiveButton } from "@/components/canvas/VideoArchiveButton";
import { VideoPromptToolDialog } from "@/components/canvas/VideoPromptToolDialog";
import type { PromptToolMode } from "@/lib/video-canvas/prompt-tools";
import { useVideoCanvasPersistence } from "@/hooks/use-video-canvas-persistence";
import { canvasMediaType, prepareCanvasMediaFiles } from "@/lib/video-canvas/media-import";
import { getUploadedMediaNodeSize } from "@/lib/video-canvas/media-node-size";
import type { CanvasInitialProject } from "@/types/canvas";
import {
  getVideoCanvasFunctionBillingCopy,
  type VideoCanvasFunctionConfig,
  type VideoCanvasFunctionDefinition,
  type VideoCanvasEffectPreset,
  type VideoCanvasMotionPreset,
  type VideoCanvasRolePreset,
  defaultVideoCanvasFunctionConfig,
  defaultVideoCanvasMotionPresets,
  normalizeVideoCanvasFunctionConfig,
} from "@/lib/video-canvas/config";
import type { VideoGenerationMode, VideoRatio, VideoResolution } from "@/types/ai";

type ActivePanel =
  | "add"
  | "workflow"
  | "assets"
  | "assetManager"
  | "effectLibrary"
  | "history"
  | "historyPicker"
  | "help"
  | "roleLibrary"
  | "characterStudio"
  | "tvstar"
  | "videoRoleLibrary"
  | "shortcuts"
  | "styleLibrary"
  | "support"
  | "tutorial"
  | "skills"
  | "share"
  | "publish"
  | "member"
  | "notifications"
  | "account"
  | null;

type ActiveStarterScene = "story-script" | "character-three-view" | "first-frame" | "audio-to-video" | null;
type ActivePresetControlMode =
  | "character-face-three-view"
  | "character-design-sheet"
  | "scene-design-sheet"
  | "product-design-sheet"
  | "story-script"
  | "character-three-view"
  | "first-frame"
  | "audio-to-video"
  | "story-beat-grid-4"
  | "multi-view-nine-grid"
  | "continuous-storyboard-grid-25"
  | "cinematic-lighting-correction"
  | "frame-prediction-plus-3s"
  | "frame-prediction-minus-5s"
  | null;
type SceneToolbarMenu = "panorama" | "orbit" | "lighting" | "grid" | "hd" | "crop" | null;
type ComposerMenu =
  | "style"
  | "mark"
  | "focus"
  | "model"
  | "mode"
  | "ratio"
  | "resolution"
  | "duration"
  | "camera"
  | "panorama"
  | "translate"
  | "settings"
  | "count"
  | "reference"
  | "slash"
  | null;
type MemberStoreTab = "vip" | "history" | "credits";
type VideoToolbarMode = "clip" | "crop" | "subtitleErase" | "analysis" | null;
type VideoToolbarMenu = "hd" | "subtitle" | "audio" | null;
type VideoFrameExtractionKind = "first" | "last" | "current";
type SubtitleEraseMode = "smart" | "region";
type VideoAudioSplitMode = "voice" | "background" | "audio-video";

type SubtitleEraseRegion = {
  height: number;
  id: string;
  width: number;
  x: number;
  y: number;
};

type SubtitleEraseRegionHistory = {
  future: SubtitleEraseRegion[][];
  past: SubtitleEraseRegion[][];
};

type CapturedTool = {
  type?: string;
  toolKey?: string;
  modelKey?: string;
  modelName?: string;
  vendor?: string;
  scene?: string;
  modes?: string[];
  settings?: string[];
  advancedSettings?: string[];
  propertyKeys?: string[];
  generateTypes?: unknown;
  rules?: unknown;
  metadata?: {
    properties?: Record<string, unknown>;
    config?: Record<string, unknown>;
    generateTypes?: unknown;
    rules?: unknown;
    [key: string]: unknown;
  };
};

type CanvasLibraryAsset = {
  label: string;
  mediaType: NonNullable<CloneNode["inputType"]>;
  type: string;
  url: string;
};

type WorkflowPreset = {
  id?: string | number;
  uuid?: string;
  name?: string;
  title?: string;
  description?: string;
  cover?: string;
};

type ToolboxTemplatePreset = WorkflowPreset & {
  accent: string;
  author: string;
  badge?: string;
  category: string;
  duration: string;
  steps: string[];
  templateKey: string;
  usageCount: string;
};

type RoleLibraryItem = VideoCanvasRolePreset;

type RoleLibraryFilterKey = keyof RoleLibraryItem["filters"];

type CloneNodeKind =
  | "input"
  | "model"
  | "text"
  | "audio"
  | "workflow"
  | "preview"
  | "save"
  | "media"
  | "material-effect"
  | "material-role"
  | "material-style"
  | "script"
  | "video-story";

type CloneNode = {
  id: string;
  kind: CloneNodeKind;
  title: string;
  subtitle?: string;
  x: number;
  y: number;
  width: number;
  height: number;
  accent: string;
  tool?: CapturedTool;
  workflow?: WorkflowPreset;
  inputType?: "image" | "video" | "audio" | "text";
  draftValues?: Record<string, unknown>;
};

type CloneEdge = {
  id: string;
  source: string;
  target: string;
};

type VideoCanvasMagicMark = {
  clickX: number;
  clickY: number;
  id: string;
  imageUrl: string;
  labelOptions: string[];
  selectedIndex: number;
  sourceNodeId: string;
};

type VideoCanvasMarkAnalysisState = {
  clickX: number;
  clickY: number;
  sourceNodeId: string;
  targetNodeId: string;
};

type PickObjectApiResponse = {
  error?: string;
  object?: {
    confidence?: number;
    labels?: string[];
    name?: string;
  };
  success?: boolean;
};

type AssetMarketCard = readonly [title: string, author: string, count: number, model?: string];

type LineConnectState = {
  cursorCanvasX: number | null;
  cursorCanvasY: number | null;
  hoverNodeId?: string | null;
  targetId?: string | null;
  sourceId: string | null;
};

type EndpointConnectionDragState = {
  anchorId: string;
  hasDragged: boolean;
  pointerId: number | null;
  side: ConnectionSide;
  startClientX: number;
  startClientY: number;
};

type DragState =
  | {
      kind: "node";
      id: string;
      startX: number;
      startY: number;
      nodeX: number;
      nodeY: number;
      ids?: string[];
    }
  | {
      kind: "canvas";
      startX: number;
      startY: number;
      viewportX: number;
      viewportY: number;
    };

type CanvasCommandState = {
  canvasX: number;
  canvasY: number;
  screenX: number;
  screenY: number;
} | null;

type StoryWorkflowStep = "shots" | "assets" | "prompts";

type NodeContextState = {
  nodeId: string;
  screenX: number;
  screenY: number;
} | null;

type ConnectionSide = "source" | "target";

type ConnectionMenuState = {
  nodeId: string;
  screenX: number;
  screenY: number;
  side: ConnectionSide;
} | null;

type PresetControlAnchor = {
  bottomY: number;
  centerX: number;
  topY: number;
  zoom: number;
};

type ComposerSettings = {
  autoValidateMaterial?: boolean;
  audio?: string;
  camera: string;
  count: string;
  duration?: string;
  model: string;
  modelLabel?: string;
  panorama: string;
  ratio: string;
  resolution: string;
  searchEnabled?: boolean;
};

type VideoComposerTabKey =
  | "text-to-video"
  | "reference-images"
  | "first-frame"
  | "first-last-frame"
  | "image-reference";

type VideoTargetComposerSubmitPayload = {
  magicMarks: VideoCanvasMagicMark[];
  mode: VideoGenerationMode;
  prompt: string;
  settings: ComposerSettings & {
    duration: string;
  };
  tab: VideoComposerTabKey;
};

type CanvasModelOption = {
  id: string;
  modelId?: string;
  displayName: string;
  providerName?: string;
  providerType?: string;
  supportsVision?: boolean;
  supportsImageGen?: boolean;
  isMultimodal?: boolean;
  isDefault?: boolean;
  isSubModel?: boolean;
  capabilities?: unknown;
  imageGenConfig?: {
    creditCostPerImage?: number | null;
    creditDiscountRate?: number | null;
    creditCostPerVideo?: number | null;
    videoDurationOptions?: number[] | null;
    creditCostPerVideoByDuration?: Record<string, number> | null;
    creditCostPerVideoByResolution?: Record<string, number> | null;
  } | null;
};



type AddModuleKind = "smart-edit" | "text" | "image" | "video" | "frame-analysis" | "video-clip" | "director" | "audio" | "script" | "legacy-script";
type CanvasCreateKind = AddModuleKind;
type CanvasViewMode = "workflow" | "storyboard";
type TargetModuleActionLabel =
  | "自己编写内容"
  | "文生视频"
  | "图片反推提示词"
  | "文字生音乐"
  | "图生图"
  | "图片高清"
  | "参考"
  | "标记"
  | "风格"
  | "音频生视频"
  | "首尾帧生成视频"
  | "首帧生成视频"
  | "自己编写分镜脚本"
  | "生成高清视频"
  | "打开智能剪辑"
  | "讲解视频"
  | "批量广告"
  | "口播视频"
  | "素材混剪"
  | "打开导演台"
  | "剧本生成分镜脚本"
  | "视频参考生成分镜脚本"
  | "角色生成分镜脚本"
  | "上传视频拉片"
  | "从画布选择视频拉片"
  | "拉片分镜"
  | "拉片动态"
  | "拉片音乐";

type ImageToolbarAction =
  | "panorama"
  | "orbit"
  | "lighting"
  | "grid"
  | "hd"
  | "crop"
  | "localEdit"
  | "annotate"
  | "rotate"
  | "download"
  | "preview";

type StoryToolbarAction = "regenerate" | "create-storyboard" | "batch-video";
type ComposerSubmitPayload = {
  prompt: string;
  references: string[];
  settings: ComposerSettings;
  slashScene: string | null;
};

type LiblibVideoCanvasReplicaProps = {
  canvasId: string;
  initialProject?: CanvasInitialProject | null;
  isLoading?: boolean;
};

type SiteBrandSettings = {
  siteName?: string | null;
  siteLogo?: string | null;
  siteLogoDark?: string | null;
};

const DEFAULT_SITE_NAME = "AI Chatbot";

function resolveSiteName(siteName?: string | null) {
  return String(siteName || DEFAULT_SITE_NAME).trim() || DEFAULT_SITE_NAME;
}

function getSiteShowcaseName(siteName?: string | null) {
  return `${resolveSiteName(siteName)} 创作广场`;
}

type MembershipSummaryResponse = {
  isHighVip?: boolean;
  currentPlanId?: string;
  currentPlan?: {
    id?: string;
    name?: string;
    monthlyPrice?: number;
    annualPrice?: number;
    monthlyCredits?: number;
    dailyFreeCredits?: number;
    features?: string[];
    badge?: string;
    highlighted?: boolean;
  };
  summary?: {
    currentCredits?: number | null;
    dailyFreeCredits?: number | null;
    usedThisMonth?: number | null;
    monthlyLimit?: number | null;
    remainingThisMonth?: number | null;
    totalImages?: number | null;
  };
  pointsSystemConfig?: PointsSystemConfig | null;
};

type MembershipPlan = {
  id: string;
  name: string;
  monthlyPrice: number;
  annualPrice: number;
  monthlyCredits: number;
  dailyFreeCredits: number;
  features: string[];
  badge?: string;
  highlighted?: boolean;
};

type PointsPackage = {
  id: string;
  name: string;
  points: number;
  price: number;
  currency: string;
  isEnabled: boolean;
};

type AccountCenterResponse = {
  profile?: {
    name?: string;
    email?: string;
    currentPlanName?: string;
    currentPlanId?: string;
    availablePoints?: number;
    monthlyCredits?: number;
    dailyFreeCredits?: number;
  };
  usageRecords?: Array<{
    id: string;
    detail: string;
    status: "consumed" | "earned";
    amount: number;
    createdAt: string;
  }>;
  billingRecords?: Array<{
    id: string;
    date: string;
    category: string;
    amount: number;
    status: "completed" | "pending" | "failed";
    invoice: string;
  }>;
};

type VideoCanvasBillingSettings = {
  membershipConfig?: {
    enabled?: boolean;
    currency?: string;
    annualDiscountLabel?: string;
    plans?: MembershipPlan[];
  };
  pointsPackages?: PointsPackage[];
  dulupayConfig?: {
    enabled?: boolean;
    defaultType?: string;
  };
};

type GridCellVisual = {
  fit?: "cover" | "contain";
  objectPosition?: string;
  scale?: number;
  translateX?: number;
  translateY?: number;
};

type GridCropRect = {
  height: number;
  width: number;
  x: number;
  y: number;
};

type LocalEditRegion = {
  color: string;
  createdAt: number;
  id: string;
  index: number;
  prompt: string;
  rect: GridCropRect;
};

type GridSplitSpec = {
  columns: number;
  detected: boolean;
  rects: GridCropRect[];
  rows: number;
};

type GridSplitState = {
  columns: number;
  detectedDivider: boolean;
  rects: GridCropRect[];
  rows: number;
  selectedIndices: number[];
  sourceMode: string;
};

type AngleEditorSettings = {
  preset?: string;
  horizontalAngle: number;
  promptEnabled: boolean;
  verticalAngle: number;
  zoom: number;
};

type VideoClipRange = {
  start: number;
  end: number;
};

type VideoAnalysisRow = {
  id: string;
  shot: string;
  startTime: string;
  endTime: string;
  duration: string;
  sceneDescription: string;
  narrative: string;
  shotSize: string;
  cameraAngle: string;
  cameraMovement: string;
  focusDepth: string;
  lighting: string;
  backgroundMusic: string;
  voiceAndSfx: string;
  imagePrompt: string;
  motionPrompt: string;
  keyframeUrl: string;
};

type StoryScriptRow = {
  id: string;
  shot: string;
  duration: string;
  scene: string;
  sceneDescription: string;
  shotSize: string;
  lighting: string;
  dialogue: string;
  backgroundMusic: string;
  voiceAndSfx: string;
  cameraMovement: string;
  imagePrompt: string;
  motionPrompt: string;
  keyframeUrl: string;
};

type VideoAnalysisState = {
  status: "idle" | "loading" | "ready" | "error";
  summary: string;
  rows: VideoAnalysisRow[];
  error?: string;
};

type VideoCropGenerateState = {
  status: "loading";
  progress: number;
};

type VideoAudioSplitState = {
  status: "loading";
  mode: VideoAudioSplitMode;
};

const capturedTools: CapturedTool[] = [];
const capturedCounts: { byType?: Record<string, number> } = {};
const capturedWorkflows: WorkflowPreset[] = [];

const TOOL_TYPE_META: Record<
  string,
  { label: string; icon: LucideIcon; accent: string; inputType?: CloneNode["inputType"] }
> = {
  image: { label: "图片", icon: ImageIcon, accent: "#8b96ff", inputType: "image" },
  video: { label: "视频", icon: Video, accent: "#8b96ff", inputType: "video" },
  text: { label: "文本", icon: FileText, accent: "#f0d06b", inputType: "text" },
  audio: { label: "音频", icon: Music2, accent: "#9ee6bb", inputType: "audio" },
  compose: { label: "组合", icon: GitBranch, accent: "#ffb8c8" },
};

const ADD_NODE_MODULES: Array<{
  badge?: string;
  description: string;
  icon: LucideIcon;
  kind: AddModuleKind;
  label: string;
}> = [
  { kind: "text", label: "文本", description: "剧本、广告词、品牌文案", icon: FileText },
  { kind: "image", label: "图片", description: "海报、分镜、角色设计", icon: ImageIcon },
  { kind: "video", label: "视频", description: "创意广告、动画、电影", icon: Video },
  { kind: "smart-edit", label: "智能剪辑", description: "自动选片、卡点、字幕与成片", icon: Scissors, badge: "Beta" },
  { kind: "director", label: "导演台", description: "3D空间多视角截图", icon: Settings2, badge: "NEW" },
  { kind: "frame-analysis", label: "逐帧拉片", description: "上传视频，拆解分镜、动态与音乐", icon: ScanText, badge: "视频解析" },
  { kind: "audio", label: "音频", description: "音效、配音、音乐", icon: Music2 },
  { kind: "script", label: "脚本", description: "创意脚本、生成故事板", icon: Layers, badge: "NEW" },
  { kind: "video-clip", label: "视频合成", description: "多个视频片段合为一个", icon: Scissors, badge: "Beta" },
];

const ADD_NODE_PRIMARY_MODULES = ADD_NODE_MODULES.filter((item) => item.kind !== "script");

const SCRIPT_SUBMENU_OPTIONS = [
  { badge: "NEW", description: "新增脚本节点", label: "脚本", action: "script" as const },
  { badge: "Beta", description: "旧版脚本节点", label: "脚本（旧版）", action: "legacy" as const },
];

const ASSET_LIBRARY_SUBMENU_OPTIONS = [
  { description: "新增风格节点", label: "风格库", action: "style" as const },
  { description: "新增特效节点", label: "特效库", action: "effect" as const },
];

const CONNECTION_ADD_MODULES: Array<{
  icon: LucideIcon;
  kind: Exclude<AddModuleKind, "audio" | "director">;
  label: string;
}> = [
  { kind: "text", label: "文本生成", icon: FileText },
  { kind: "image", label: "图片生成", icon: ImageIcon },
  { kind: "video", label: "视频生成", icon: Video },
  { kind: "smart-edit", label: "智能剪辑", icon: Scissors },
  { kind: "video-clip", label: "视频合成", icon: Scissors },
  { kind: "script", label: "脚本生成", icon: Layers },
];

const TARGET_MODULE_CENTER_OFFSETS: Record<AddModuleKind, { x: number; y: number }> = {
  "smart-edit": { x: 728, y: 670 },
  audio: { x: 705, y: -257 },
  image: { x: 53, y: -257 },
  "legacy-script": { x: 556, y: 253 },
  script: { x: 556, y: 253 },
  text: { x: -742, y: -257 },
  video: { x: -574, y: 253 },
  "frame-analysis": { x: 420, y: 253 },
  "video-clip": { x: 80, y: 253 },
  director: { x: 728, y: 253 },
};

const STARTER_CARDS = [
  {
    title: "故事脚本生成",
    subtitle: "脚本到分镜",
    coverUrl:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-story-script-cover.png",
    steps: ["故事脚本", "多模态文本模型Pro", "可灵 3.0", "预览"],
  },
  {
    title: "角色三视图",
    subtitle: "角色资产沉淀",
    coverUrl:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png",
    steps: ["角色描述", "角色三视图", "全能图片模型V2", "保存"],
  },
  {
    title: "全能参考生视频",
    subtitle: "参考图到成片",
    coverUrl:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png",
    steps: ["上传图片", "首帧图", "可灵 3.0", "预览"],
  },
  {
    title: "音频生视频",
    subtitle: "音频驱动画面",
    coverUrl:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-audio-to-video-cover.png",
    icon: "music",
    steps: ["上传音频", "音频主视频", "Wan 2.6", "预览"],
  },
];

const EMPTY_CANVAS_ACTIONS: Array<{ label: string; kind: AddModuleKind; icon: LucideIcon }> = [
  { label: "图片生成", kind: "image", icon: ImageIcon },
  { label: "视频生成", kind: "video", icon: Video },
  { label: "音频生成", kind: "audio", icon: Music2 },
  { label: "剧本生成", kind: "script", icon: FileText },
  { label: "智能剪辑", kind: "smart-edit", icon: Scissors },
];

const TOOLBOX_TEMPLATE_CATEGORIES = ["周星驰经典名场面", "电商展示", "镜头运动", "人物动画", "全部"] as const;

const TOOLBOX_TEMPLATE_PRESETS: ToolboxTemplatePreset[] = [
  {
    accent: "linear-gradient(135deg,#f5d789,#f08b62)",
    author: "LibTV 官方",
    badge: "预设",
    category: "周星驰经典名场面",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png",
    description: "左弧滑行，镜头从人物左侧弧线推进，带轻微喜剧节奏和夸张表情停顿。",
    duration: "5s",
    id: "left-arc-slide",
    name: "【预设】左弧滑行",
    steps: ["参考图", "镜头轨迹", "Seedance 2.0", "视频"],
    templateKey: "left-arc-slide",
    usageCount: "4.2k",
  },
  {
    accent: "linear-gradient(135deg,#98d5ff,#6c84ff)",
    author: "电商模板库",
    badge: "商用",
    category: "电商展示",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png",
    description: "电商手机弹出效果，产品从画面中心弹出并旋转定格，适合主图视频开场。",
    duration: "5s",
    id: "phone-pop-product",
    name: "电商手机弹出效果",
    steps: ["产品图", "弹出动画", "高光", "视频"],
    templateKey: "phone-pop-product",
    usageCount: "3.6k",
  },
  {
    accent: "linear-gradient(135deg,#dfc192,#8e623c)",
    author: "商品展示",
    badge: "商用",
    category: "电商展示",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-story-script-cover.png",
    description: "咖啡杯出场，杯身从桌面滑入，蒸汽和柔光形成温暖的品牌氛围。",
    duration: "5s",
    id: "coffee-cup-entry",
    name: "咖啡杯出场",
    steps: ["商品图", "场景光", "蒸汽", "视频"],
    templateKey: "coffee-cup-entry",
    usageCount: "2.8k",
  },
  {
    accent: "linear-gradient(135deg,#d3e5ff,#9fb3cc)",
    author: "运镜模板",
    badge: "热门",
    category: "镜头运动",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-audio-to-video-cover.png",
    description: "360旋转展示，围绕主体做一圈稳定环绕，适合产品、人物和空间展示。",
    duration: "6s",
    id: "orbit-360-showcase",
    name: "360旋转展示",
    steps: ["主体图", "环绕镜头", "景深", "视频"],
    templateKey: "orbit-360-showcase",
    usageCount: "5.1k",
  },
  {
    accent: "linear-gradient(135deg,#d7d8dc,#737d89)",
    author: "工业镜头",
    category: "镜头运动",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-image.png",
    description: "机械臂视角，以第一视角穿过机械臂与产品线，增强科技感和空间纵深。",
    duration: "5s",
    id: "robot-arm-pov",
    name: "机械臂视角",
    steps: ["参考图", "机械臂", "穿行", "视频"],
    templateKey: "robot-arm-pov",
    usageCount: "1.9k",
  },
  {
    accent: "linear-gradient(135deg,#f9c8d8,#c693ff)",
    author: "人物动画",
    badge: "NEW",
    category: "人物动画",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-three-view.png",
    description: "Live 2D，让单张角色图产生眨眼、微笑和轻微身体摆动，适合口播开场。",
    duration: "4s",
    id: "live-2d-character",
    name: "Live 2D",
    steps: ["角色图", "表情", "轻动作", "视频"],
    templateKey: "live-2d-character",
    usageCount: "6.4k",
  },
  {
    accent: "linear-gradient(135deg,#bad5ff,#2e375d)",
    author: "电影运镜",
    category: "镜头运动",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png",
    description: "瞳孔拉近，镜头快速推向眼部并在反光里展示下一场景，适合悬疑转场。",
    duration: "5s",
    id: "pupil-zoom",
    name: "瞳孔拉近",
    steps: ["人物图", "特写", "反光", "转场"],
    templateKey: "pupil-zoom",
    usageCount: "2.2k",
  },
  {
    accent: "linear-gradient(135deg,#f7e6b0,#ef6b62)",
    author: "创意玩法",
    badge: "热门",
    category: "人物动画",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-story-script-cover.png",
    description: "飞鸟解体，主体由细碎羽片散开再重组，适合视觉冲击强的短视频片头。",
    duration: "6s",
    id: "bird-dissolve",
    name: "飞鸟解体",
    steps: ["主体图", "粒子", "重组", "视频"],
    templateKey: "bird-dissolve",
    usageCount: "3.4k",
  },
  {
    accent: "linear-gradient(135deg,#f3db93,#ef5e50)",
    author: "电商模板库",
    badge: "商用",
    category: "电商展示",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png",
    description: "商品震撼登场，产品带冲击波与局部高光进入画面，适合活动主推款。",
    duration: "5s",
    id: "product-hero-entry",
    name: "商品震撼登场",
    steps: ["产品图", "冲击波", "高光", "视频"],
    templateKey: "product-hero-entry",
    usageCount: "4.8k",
  },
  {
    accent: "linear-gradient(135deg,#a6e7d8,#6da3ff)",
    author: "旅拍模板",
    category: "镜头运动",
    cover:
      "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-audio-to-video-cover.png",
    description: "旅拍转场，前景遮挡切换到新地点，带自然手持感和轻微速度变化。",
    duration: "5s",
    id: "travel-whip-transition",
    name: "旅拍转场",
    steps: ["首帧", "遮挡", "转场", "视频"],
    templateKey: "travel-whip-transition",
    usageCount: "2.6k",
  },
];

const ROLE_LIBRARY_FILTER_GROUPS: Array<{
  key: RoleLibraryFilterKey;
  label: string;
  options: string[];
}> = [
  { key: "gender", label: "性别", options: ["男", "女", "中性"] },
  { key: "age", label: "年龄段", options: ["儿童", "少年", "青年", "中年", "老年"] },
  { key: "species", label: "种族", options: ["人类", "精灵", "兽人", "机械", "其他"] },
  { key: "era", label: "时代", options: ["先秦", "古代", "近代", "现代", "未来"] },
  { key: "culture", label: "文化区域", options: ["东亚", "欧美", "中东", "非洲", "奇幻"] },
  { key: "build", label: "体型", options: ["瘦削", "匀称", "健壮", "丰满"] },
  { key: "hairColor", label: "发色", options: ["黑发", "白发", "金发", "棕发", "彩色"] },
];

const ROLE_LIBRARY_APPLY_VIEWPORT = { x: -3842.91, y: 487.096, zoom: 0.743079 };
const ROLE_LIBRARY_NODE_LAYOUT = [
  { height: 350, imageKey: "full" as const, title: "角色立绘", width: 282, x: 5748, y: -564 },
  { height: 350, imageKey: "face" as const, title: "脸部近景", width: 282, x: 6048, y: -564 },
  { height: 350, imageKey: "expression" as const, title: "表情参考", width: 282, x: 6348, y: -564 },
  { height: 495, imageKey: "threeView" as const, title: "三视图", width: 878, x: 5748, y: -156 },
];

const MATERIAL_STYLE_NODE_SIZE = 242;
const MATERIAL_STYLE_SCREEN_ANCHOR = { x: 666, y: 776 };
const VIDEO_ROLE_AGREEMENT_STORAGE_KEY = "video-canvas:seedance-role-agreement:v1";
const VIDEO_MOTION_CUSTOM_STORAGE_KEY = "video-canvas:custom-motions:v1";
const VIDEO_MOTION_FAVORITES_STORAGE_KEY = "video-canvas:favorite-motions:v1";

type VideoCanvasCustomMotionPreset = VideoCanvasMotionPreset & {
  custom: true;
};

const VIDEO_COUNT_OPTIONS = ["1个", "2个", "4个"] as const;
const VIDEO_AUDIO_OPTIONS = ["开启", "关闭"] as const;

const VIDEO_EFFECT_PRESETS = [
  { title: "燃烧开场", author: "算法织梦者", count: 57 },
  { title: "巨人俯瞰", author: "数据星云", count: 114 },
  { title: "星尘降临", author: "代码极光", count: 235 },
  { title: "星云漩涡", author: "算力潮汐", count: 57 },
  { title: "水下慢镜头", author: "算法织梦者", count: 82 },
  { title: "控雨术", author: "数据星云", count: 168 },
  { title: "穿云而入", author: "代码极光", count: 93 },
  { title: "双人对打", author: "算力潮汐", count: 211 },
  { title: "饰品特写", author: "算法织梦者", count: 74 },
] as const;

const TOOLBAR_ITEMS: Array<{ id: Exclude<ActivePanel, null>; label: string; icon: LucideIcon }> = [
  { id: "add", label: "添加节点", icon: Plus },
  { id: "workflow", label: "工具箱", icon: GitBranch },
  { id: "assets", label: "素材库", icon: Layers },
  { id: "characterStudio", label: "角色造型室", icon: Smile },
  { id: "history", label: "历史记录", icon: Clock3 },
  { id: "shortcuts", label: "快捷键", icon: Keyboard },
  { id: "tutorial", label: "教程", icon: BookOpen },
];

const DEFAULT_VIEWPORT = { x: 0, y: 0, zoom: 1 };
const PRESET_VIEWPORT = { x: 144, y: 100, zoom: 0.77 };
const PRESET_WORKFLOW_CENTER = { x: 1024, y: 512 };
const CANVAS_EXTENT = 20000;
const CANVAS_MIN_ZOOM = 0.1;
const CANVAS_MAX_ZOOM = 8;
const CANVAS_ZOOM_STEP = 0.2;
const ASSET_MANAGER_DEFAULT_WIDTH = 240;
const ASSET_MANAGER_MIN_WIDTH = 240;
const ASSET_MANAGER_MAX_WIDTH = 520;
const OFFICIAL_NODE_GAP = 100;
const TOOLBOX_TEMPLATE_VIEWPORT = { x: 137.4, y: 529, zoom: 0.1 };
const TOOLBOX_TEMPLATE_GROUP_FRAME = {
  height: 658,
  width: 1493,
  x: 6010,
  y: -1440,
};
const OFFICIAL_TEXT_RESOURCE_HEIGHT = 330;
const OFFICIAL_TEXT_RESOURCE_WIDTH = 560;
const OFFICIAL_IMAGE_TOOLBAR_SCALE = 0.7;
const OFFICIAL_COMPOSER_SCALE = 0.73;
const OFFICIAL_DROPDOWN_SCALE = 0.7;
const OFFICIAL_NINE_GRID_WIDTH = 930;
const OFFICIAL_NINE_GRID_HEIGHT = 520;
const LOCAL_EDIT_MAX_REGIONS = 8;
const LOCAL_EDIT_MAX_POLL_ATTEMPTS = 192;
const LOCAL_EDIT_COLORS = [
  "#ff3b30",
  "#1677ff",
  "#00c853",
  "#ff9500",
  "#af52de",
  "#00bcd4",
  "#ff2d55",
  "#8d6e63",
];
const VIDEO_CLIP_FRAME_COUNT = 9;

const VIDEO_CROP_OUTPUT_LABEL = "1024 × 576";
const VIDEO_CROP_RECT = { x: 0.1, y: 0.1, width: 0.8, height: 0.8 };
const STORY_BEAT_GRID_FUNCTION_KEY = "story-beat-grid-4";
const MULTI_VIEW_NINE_GRID_FUNCTION_KEY = "multi-view-nine-grid";
const CONTINUOUS_STORYBOARD_GRID_FUNCTION_KEY = "continuous-storyboard-grid-25";

function clampCanvasZoom(value: number) {
  return Math.min(CANVAS_MAX_ZOOM, Math.max(CANVAS_MIN_ZOOM, Number(value.toFixed(2))));
}

function clampAssetManagerWidth(value: number) {
  return Math.min(ASSET_MANAGER_MAX_WIDTH, Math.max(ASSET_MANAGER_MIN_WIDTH, Math.round(value)));
}

function arrangeNodesForPreview(nodes: CloneNode[]) {
  if (nodes.length <= 1) return nodes;
  const orderedNodes = [...nodes].sort((first, second) => first.y - second.y || first.x - second.x);
  const columns = Math.max(1, Math.ceil(Math.sqrt(nodes.length * 1.2)));
  const cellWidth = Math.max(360, ...nodes.map((node) => node.width)) + OFFICIAL_NODE_GAP;
  const cellHeight = Math.max(260, ...nodes.map((node) => node.height)) + OFFICIAL_NODE_GAP;
  const arrangedById = new Map<string, Pick<CloneNode, "x" | "y">>();

  orderedNodes.forEach((node, index) => {
    const column = index % columns;
    const row = Math.floor(index / columns);
    arrangedById.set(node.id, {
      x: column * cellWidth,
      y: row * cellHeight,
    });
  });

  return nodes.map((node) => {
    const arranged = arrangedById.get(node.id);
    return arranged ? { ...node, ...arranged } : node;
  });
}
const CINEMATIC_LIGHTING_CORRECTION_FUNCTION_KEY = "cinematic-lighting-correction";
const CHARACTER_THREE_VIEW_FUNCTION_KEY = "character-three-view";
const FRAME_PREDICTION_PLUS_3S_FUNCTION_KEY = "frame-prediction-plus-3s";
const FRAME_PREDICTION_MINUS_5S_FUNCTION_KEY = "frame-prediction-minus-5s";
const PROMPT_COMPOSER_BASE_WIDTH = 895;
const PROMPT_COMPOSER_BASE_HEIGHT = 286;
const PRESET_COMPOSER_BASE_HEIGHT = 238;
const NINE_GRID_CELL_VISUALS: GridCellVisual[] = [
  { fit: "contain", objectPosition: "50% 50%", scale: 0.62 },
  { fit: "contain", objectPosition: "58% 50%", scale: 0.74, translateX: -10 },
  { fit: "contain", objectPosition: "68% 50%", scale: 0.86, translateX: -18 },
  { objectPosition: "34% 24%", scale: 1.4, translateX: 8, translateY: 8 },
  { objectPosition: "52% 28%", scale: 1.55, translateY: 5 },
  { objectPosition: "66% 26%", scale: 1.72, translateX: -8, translateY: 2 },
  { objectPosition: "20% 72%", scale: 2.08, translateX: 22, translateY: -12 },
  { objectPosition: "52% 68%", scale: 1.24, translateY: -4 },
  { objectPosition: "70% 64%", scale: 1.46, translateX: -14, translateY: -6 },
];

const TARGET_AVATAR =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/target-avatar.jpg";
const PUBLISH_MODAL_BG_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/publish-modal-bg.png";
const STORY_SCRIPT_PROMPT = "根据我上传的剧本生成一个完整的故事脚本";
const AUDIO_TO_VIDEO_PROMPT =
  "根据上传的音频生成对应场景画面，镜头语言、节奏、音乐匹配情绪变化，电影级质感。";
const TEXT_TO_VIDEO_PROMPT =
  "爆款情绪短片\n傍晚的城市天台，一个年轻人迎着晚风张开双手，镜头从远景缓慢推进到中景，头发被风吹起，夕阳逆光，光晕明显，空气中有漂浮微尘，电影级色彩分级，浅景深，情绪张力强，慢动作";
const TEXT_TO_VIDEO_GENERATE_PROMPT = "根据文字描述生成视频。";
const TEXT_TO_MUSIC_PROMPT =
  "生成一首现代品牌电子音乐，干净有力的低频贝斯，清晰电子鼓点，整体风格高级、未来感强。";
const IMAGE_TO_PROMPT_PROMPT = "根据图片生成结构化中文提示词，包括主体描述、环境、光影、镜头语言、风格关键词。";
const VIDEO_FIRST_FRAME_PROMPT = "以当前图为首帧生成视频。";
const VIDEO_FIRST_LAST_PROMPT =
  "手从白帆布包中取出青柠气泡水罐的特写，过渡到短发女生在户外草地闭眼仰头喝同款气泡水的中景，日系清新治愈风格，明亮自然光，柔和暖调，胶片质感，动作流畅自然";
const SCRIPT_CHARACTER_PROMPT =
  "根据角色参考图生成分镜脚本，围绕旧城区、机械修复、暴雨停电和被重新点亮的街道展开，突出人物关系、镜头画面和声音设计。";
const SLASH_IMAGE_ITEMS = [
  "剧情推演四宫格",
  "25宫格连贯分镜",
  "电影级光影校正",
  "角色三视图生成",
  "画面推演-3秒后",
  "画面推演-5秒前",
];
const STORY_SCRIPT_TEXT = `《我在盛唐写天下》

类型：古风 / 穿越 / 爽文漫剧
时长建议：60-90秒
基调：热血 x 盛唐史诗感 x 爽点节奏

【序幕】
【现代 · 深夜办公室】
键盘声急促。电脑屏幕蓝光刺眼。沈昭昭（女，28岁），面色苍白，伏案加班。手机提示音不断。她抬头，视线模糊，黑屏。

【第一幕】
【盛唐 · 金銮殿 · 日】
鼓声震天。沈昭昭猛然睁眼，已跪在大殿中央，身着男装官服，双手被押。百官列立，殿宇巍峨。
大臣厉声：“大逆不道！假称诗才惊世，欺君罔上，当斩！”
沈昭昭震惊低语：“这是……唐朝？”
龙椅之上，皇帝目光沉沉。
皇帝：“既言才华盖世，当殿作诗。若不能，斩。”
刀光映入她瞳孔。大殿死寂。

【第二幕】
沈昭昭缓缓起身。呼吸渐稳。她望向殿外，长安城阳光万里。
她低声：“既来盛唐……便与盛唐争一争。”
抬头，高声吟诵：“君不见黄河之水天上来。”
声音回荡大殿。群臣震动。皇帝缓缓站起。诗声激昂，如惊雷落殿。

【第三幕】
殿外风起。长安街市灯火连绵。
皇帝低声：“此诗，当传万世。”
沈昭昭目光坚定。她轻声自语：“既然来了……那便写尽三万里长安。”
镜头推远。盛唐山河展开。`;

const DEFAULT_STORY_SCRIPT_ROWS: StoryScriptRow[] = [
  {
    id: "story-fallback-01",
    shot: "01",
    duration: "5s",
    scene: "现代办公室",
    sceneDescription: "深夜加班，键盘声急促，人物体力透支，电脑蓝光映在苍白脸上。",
    shotSize: "中景",
    lighting: "冷蓝灰低饱和，屏幕蓝光照亮脸部，压抑疲惫",
    dialogue: "+",
    backgroundMusic: "低频悬疑氛围",
    voiceAndSfx: "环境键盘声、手机提示音",
    cameraMovement: "缓慢推镜头",
    imagePrompt: "现代办公室深夜加班，年轻女性伏案，电脑蓝光，疲惫神情，电影级光影，近景",
    motionPrompt: "中近景缓慢推进，蓝光闪烁，人物抬头后画面黑屏转场。",
    keyframeUrl: "",
  },
  {
    id: "story-fallback-02",
    shot: "02",
    duration: "6s",
    scene: "盛唐大殿",
    sceneDescription: "女主惊醒跪于金銮殿，百官压迫，刀光映入瞳孔，皇帝俯视审判。",
    shotSize: "全景",
    lighting: "强烈暖金主光，庄严压迫",
    dialogue: "既言才华盖世，当殿作诗。若不能--斩。",
    backgroundMusic: "鼓声与低频",
    voiceAndSfx: "朝堂回声、刀刃声",
    cameraMovement: "快速摇镜头，从下往上展现大殿",
    imagePrompt: "盛唐金銮殿，女主男装官服跪在殿中，百官列立压迫感，皇帝龙椅俯视，史诗电影感",
    motionPrompt: "低角度仰拍女主，再切皇帝俯视，镜头压迫式前推。",
    keyframeUrl: "",
  },
  {
    id: "story-fallback-03",
    shot: "03",
    duration: "6s",
    scene: "长安街市",
    sceneDescription: "诗声落下，群臣震动，长安街市灯火连绵，盛唐山河展开。",
    shotSize: "大远景",
    lighting: "暖色夕光，极度开阔明亮",
    dialogue: "既然来了……那便写尽三万里长安。",
    backgroundMusic: "史诗音乐起",
    voiceAndSfx: "风声、街市人声、诗句回响",
    cameraMovement: "极速拉高、后退，展露全貌",
    imagePrompt: "盛唐长安街市灯火连绵，宫殿与山河远景展开，女主背影坚定，宏大史诗感，暖色夕光",
    motionPrompt: "镜头从人物背影快速拉远，展示长安城与山河全景。",
    keyframeUrl: "",
  },
];

function normalizeCanvasTitle(title?: string | null) {
  const value = String(title || "").trim();
  if (!value || value === "未命名视频画布") return "未命名";
  return value;
}

function getToolType(tool?: CapturedTool) {
  return String(tool?.type || "video").trim() || "video";
}

function getToolLabel(tool?: CapturedTool) {
  return String(tool?.modelName || tool?.scene || tool?.modelKey || tool?.toolKey || "未命名模块").trim();
}

function getToolModes(tool?: CapturedTool) {
  return (tool?.modes || []).map(String).filter(Boolean).slice(0, 4);
}

function getToolProperties(tool?: CapturedTool) {
  const properties = tool?.metadata?.properties;
  if (!properties || typeof properties !== "object") return [];
  return Object.entries(properties).filter(([key]) => key !== "modeType");
}

function getToolRules(tool?: CapturedTool) {
  const rules = tool?.rules || tool?.metadata?.rules;
  return Array.isArray(rules) ? rules : [];
}

function requiresMedia(tool?: CapturedTool) {
  return getToolRules(tool).some((rule) => {
    if (!rule || typeof rule !== "object") return false;
    const required = (rule as { require?: unknown }).require;
    return Array.isArray(required) && required.map(String).includes("media");
  });
}

function getToolFunctionKey(tool?: CapturedTool) {
  const config = tool?.metadata?.config;
  const configuredKey =
    config && typeof config === "object" && !Array.isArray(config)
      ? (config as Record<string, unknown>).functionKey
      : undefined;
  return String(configuredKey || tool?.toolKey || "").trim();
}

function getToolRoute(tool?: CapturedTool) {
  const config = tool?.metadata?.config;
  const configuredRoute =
    config && typeof config === "object" && !Array.isArray(config)
      ? (config as Record<string, unknown>).route
      : undefined;
  return String(configuredRoute || tool?.metadata?.route || "").trim();
}

function getPropertyLabel(key: string, config: unknown) {
  if (config && typeof config === "object" && "displayName" in config) {
    const value = (config as { displayName?: unknown }).displayName;
    if (typeof value === "string" && value.trim()) return value;
  }
  const labels: Record<string, string> = {
    count: "生成数量",
    duration: "时长",
    enableSound: "生成音效",
    frameRate: "帧率",
    instrumental: "纯音乐",
    lora: "风格",
    prompt: "提示词",
    quality: "清晰度",
    ratio: "比例",
    resolution: "分辨率",
    searchable: "联网搜索",
    search_enabled: "联网搜索",
    slowMotion: "慢动作",
    slowmo: "减速强度",
    specifiedModel: "模型",
    stability: "稳定性",
    style: "模型",
    template: "风格",
    voice: "声音",
  };
  return labels[key] || key;
}

function getOptions(config: unknown) {
  if (Array.isArray(config)) return config;
  if (config && typeof config === "object" && Array.isArray((config as { enum?: unknown[] }).enum)) {
    return (config as { enum: unknown[] }).enum;
  }
  return [];
}

function getOptionValue(option: unknown) {
  if (option && typeof option === "object" && "value" in option) {
    return String((option as { value?: unknown }).value ?? "");
  }
  return String(option ?? "");
}

function getOptionLabel(option: unknown) {
  if (option && typeof option === "object" && "displayName" in option) {
    const label = (option as { displayName?: unknown }).displayName;
    if (label) return String(label);
  }
  return getOptionValue(option);
}

function getDefaultValue(key: string, config: unknown) {
  if (config && typeof config === "object" && "default" in config) {
    return String((config as { default?: unknown }).default ?? "");
  }
  const options = getOptions(config);
  if (options.length > 0) return getOptionValue(options[0]);
  if (typeof config === "boolean") return config ? "1" : "0";
  if (key === "prompt") return "";
  return "";
}

function getInspectorTitle(node: CloneNode) {
  if (node.kind !== "input") return node.title;
  if (node.inputType === "video") return "视频输入";
  if (node.inputType === "audio") return "音频输入";
  if (node.inputType === "text") return "文本输入";
  return "图片输入";
}

function makeId(prefix: string) {
  return `${prefix}-${crypto.randomUUID()}`;
}

function serializeNodes(nodes: CloneNode[]) {
  return nodes.map((node) => ({
    id: node.id,
    type: "workflow",
    position: { x: node.x, y: node.y },
    size: { width: node.width, height: node.height },
    data: {
      title: node.title,
      description: node.subtitle || "",
      status: "pending",
      templateType: `libtv-${node.kind}`,
      metadata: {
        liblibCloneNode: node,
      },
    },
    connections: [],
  }));
}

function serializeEdges(edges: CloneEdge[]) {
  return edges.map((edge) => ({
    id: edge.id,
    source: edge.source,
    target: edge.target,
    type: "default",
  }));
}

function restoreNodes(canvasData: unknown): CloneNode[] {
  const nodes = (canvasData as { nodes?: unknown[] } | null)?.nodes;
  if (!Array.isArray(nodes)) return [];
  return nodes
    .map((item, index) => {
      const metadata = ((item as any)?.data?.metadata || {}) as Record<string, unknown>;
      const clone = metadata.liblibCloneNode as CloneNode | undefined;
      return clone && typeof clone.id === "string" ? normalizeRestoredNode(clone, index + 1) : null;
    })
    .filter(Boolean) as CloneNode[];
}

function restoreEdges(canvasData: unknown): CloneEdge[] {
  const edges = (canvasData as { edges?: unknown[] } | null)?.edges;
  if (!Array.isArray(edges)) return [];
  return edges
    .map((edge) => ({
      id: String((edge as any).id || makeId("edge")),
      source: String((edge as any).source || ""),
      target: String((edge as any).target || ""),
    }))
    .filter((edge) => edge.source && edge.target);
}

function createInputNode(inputType: CloneNode["inputType"], x: number, y: number): CloneNode {
  const title =
    inputType === "video"
      ? "上传视频"
      : inputType === "audio"
        ? "上传音频"
        : inputType === "text"
          ? "输入文本"
          : "上传图片";
  return {
    id: makeId("input"),
    kind: "input",
    title,
    subtitle:
      inputType === "video"
        ? "添加视频素材、参考视频或首尾帧"
        : inputType === "audio"
          ? "添加音乐、语音或音效参考"
          : inputType === "text"
            ? "输入脚本、分镜或提示词"
            : "添加参考图、角色图或关键帧素材",
    inputType,
    x,
    y,
    width: 158,
    height: 158,
    accent: "#8790ff",
  };
}

function createToolNode(tool: CapturedTool, x: number, y: number): CloneNode {
  const type = getToolType(tool);
  const meta = TOOL_TYPE_META[type] || TOOL_TYPE_META.video;
  const isAudio = type === "audio";
  const isText = type === "text";
  const toolConfig = tool.metadata?.config;
  const draftValues =
    toolConfig && typeof toolConfig === "object" && !Array.isArray(toolConfig)
      ? { ...toolConfig }
      : {};
  return {
    id: makeId("tool"),
    kind: isAudio ? "audio" : isText ? "text" : "model",
    title: getToolLabel(tool),
    subtitle: tool.vendor || meta.label,
    x,
    y,
    width: isText ? 210 : 194,
    height: isText ? 122 : 116,
    accent: meta.accent,
    tool,
    draftValues,
  };
}

function createWorkflowNode(workflow: WorkflowPreset, x: number, y: number): CloneNode {
  return {
    id: makeId("workflow"),
    kind: "workflow",
    title: String(workflow.name || workflow.title || "工作流预设"),
    subtitle: workflow.description || "工作流预设",
    x,
    y,
    width: 230,
    height: 116,
    accent: "#8b96ff",
    workflow,
    draftValues: {},
  };
}

function createToolboxTemplateGroupNode(title: string): CloneNode {
  return {
    id: makeId("group"),
    kind: "workflow",
    title: "分组 3 个节点",
    subtitle: title,
    x: TOOLBOX_TEMPLATE_GROUP_FRAME.x,
    y: TOOLBOX_TEMPLATE_GROUP_FRAME.y,
    width: TOOLBOX_TEMPLATE_GROUP_FRAME.width,
    height: TOOLBOX_TEMPLATE_GROUP_FRAME.height,
    accent: "#ffffff",
    draftValues: {
      action: "TOOLBOX_TEMPLATE_GROUP",
      nodeType: "group",
      templateName: title,
    },
  };
}

function createSimpleNode(title: string, kind: CloneNodeKind, x: number, y: number): CloneNode {
  return {
    id: makeId(kind),
    kind,
    title,
    subtitle: kind === "preview" ? "预览结果" : kind === "save" ? "保存到本地" : "输入内容",
    x,
    y,
    width: kind === "text" ? 210 : 194,
    height: kind === "text" ? 122 : 116,
    accent: kind === "save" || kind === "preview" ? "#8b96ff" : "#f0d06b",
    inputType: kind === "text" ? "text" : undefined,
    draftValues: {},
  };
}

function createTargetModuleNode(kind: AddModuleKind, x: number, y: number, index: number): CloneNode {
  if (kind === "script") {
    return {
      id: makeId("script"),
      kind: "script",
      title: "脚本生成器",
      subtitle: "脚本生成",
      inputType: "text",
      x,
      y,
      width: 350,
      height: 350,
      accent: "#f0d06b",
      draftValues: {
        action: "SCRIPT_GENERATE",
        generatorType: "DEFAULT",
        nodeType: "script-v2",
        rows: [],
        scriptRole: "generator",
        viewMode: "card",
      },
    };
  }

  if (kind === "legacy-script") {
    return {
      id: makeId("script"),
      kind: "script",
      title: "脚本生成器",
      subtitle: "脚本生成",
      inputType: "text",
      x,
      y,
      width: 350,
      height: 350,
      accent: "#f0d06b",
      draftValues: {
        action: "SCRIPT_GENERATE",
        generatorType: "DEFAULT",
        nodeType: "legacy-script",
        rows: [],
        scriptRole: "generator",
        viewMode: "card",
      },
    };
  }

  if (kind === "smart-edit") {
    return {id:makeId("smart-edit"),kind:"model",title:`智能剪辑 ${index}`,subtitle:"智能剪辑",inputType:"video",x,y,width:350,height:350,accent:"#ffb8c8",draftValues:{action:"SMART_EDIT_WORKFLOW",nodeType:"smart-edit",smartEditDraft:{mode:"auto",ratio:"16:9",resolution:"720p",targetDuration:30}}};
  }
  if (kind === "frame-analysis") {
    return { id: makeId("frame-analysis"), kind: "model", title: "逐帧拉片", subtitle: "视频解析", x, y, width: 350, height: 350, accent: "#67a9bc", draftValues: { action: "FRAME_ANALYSIS", nodeType: "frame-analysis", dimensions: { shots: true, motion: true, music: true } } };
  }
  if (kind === "video-clip") {
    return {
      id: makeId("video-clip"),
      kind: "model",
      title: `视频合成 ${index}`,
      subtitle: "视频合成",
      inputType: "video",
      x,
      y,
      width: 350,
      height: 350,
      accent: "#ffb8c8",
      draftValues: {
        action: "VIDEO_CLIP_RESOURCE",
        nodeType: "video-clip",
        params: {},
        url: [],
      },
    };
  }

  if (kind === "director") {
    return {
      id: makeId("director"),
      kind: "model",
      title: `导演台 ${index}`,
      subtitle: "3D导演台",
      x,
      y,
      width: 350,
      height: 350,
      accent: "#9bd6ff",
      draftValues: {
        action: "DIRECTOR_CONSOLE_3D",
        consoleType: "director-console-3d",
        nodeType: "director",
        params: {
          activeCamera: "机位1",
          fov: 50,
        },
      },
    };
  }

  const meta: Record<Exclude<AddModuleKind, "smart-edit" | "script" | "legacy-script" | "video-clip" | "director" | "frame-analysis">, {
    action: string;
    accent: string;
    kind: CloneNodeKind;
    nodeType: NonNullable<CloneNode["inputType"]>;
    subtitle: string;
    title: string;
  }> = {
    audio: {
      action: "AUDIO_GENERATE",
      accent: "#9ee6bb",
      kind: "audio",
      nodeType: "audio",
      subtitle: "音频生成",
      title: `音频节点 ${index}`,
    },
    image: {
      action: "IMAGE_GENERATE",
      accent: "#8b96ff",
      kind: "model",
      nodeType: "image",
      subtitle: "图片生成",
      title: `图片节点 ${index}`,
    },
    text: {
      action: "TEXT_GENERATE",
      accent: "#f0d06b",
      kind: "text",
      nodeType: "text",
      subtitle: "文本生成",
      title: `文本节点 ${index}`,
    },
    video: {
      action: "VIDEO_GENERATE",
      accent: "#8b96ff",
      kind: "model",
      nodeType: "video",
      subtitle: "视频生成",
      title: `视频节点 ${index}`,
    },
  };
  const item = meta[kind];
  const isSquareModule = item.nodeType === "text" || item.nodeType === "image" || item.nodeType === "audio";
  const isVideoModule = item.nodeType === "video";
  return {
    id: makeId(kind),
    kind: item.kind,
    title: item.title,
    subtitle: item.subtitle,
    inputType: item.nodeType,
    x,
    y,
    width: isSquareModule ? 350 : isVideoModule ? 622 : 436,
    height: isSquareModule || isVideoModule ? 350 : 470,
    accent: item.accent,
    draftValues: {
      action: item.action,
      alt: item.nodeType === "image" ? `图片 ${index}` : undefined,
      content: item.nodeType === "text" ? [] : undefined,
      generatorType: "DEFAULT",
      nodeType: item.nodeType,
      poster: item.nodeType === "video" ? "" : undefined,
      url: item.nodeType === "text" ? undefined : [],
    },
  };
}

function createUploadedMediaNode(file: File, mediaUrl: string, x: number, y: number, index: number): CloneNode {
  const mediaType: NonNullable<CloneNode["inputType"]> = file.type.startsWith("video/")
    ? "video"
    : file.type.startsWith("audio/")
      ? "audio"
      : "image";
  const label = mediaType === "video" ? "视频" : mediaType === "audio" ? "音频" : "图片";
  const fallbackName = `${label}节点 ${index}`;
  const title = file.name.replace(/\.[^.]+$/, "").trim() || fallbackName;

  return {
    id: makeId(mediaType),
    kind: "media",
    title,
    subtitle: `${label}资源`,
    inputType: mediaType,
    x,
    y,
    width: mediaType === "audio" ? 430 : 420,
    height: mediaType === "audio" ? 170 : 280,
    accent: mediaType === "audio" ? "#9ee6bb" : mediaType === "video" ? "#8b96ff" : "#8790ff",
    draftValues: {
      action: `${mediaType.toUpperCase()}_RESOURCE`,
      alt: file.name,
      generated: false,
      mediaType,
      mediaUrl,
      nodeType: mediaType,
      resourceMeta: {
        items: [{ name: file.name, size: file.size, type: file.type }],
      },
      url: [mediaUrl],
    },
  };
}

function createMediaResourceNode({
  action,
  height,
  mediaType,
  mediaUrl,
  title,
  width,
  x,
  y,
  prompt,
}: {
  action?: string;
  height?: number;
  mediaType: NonNullable<CloneNode["inputType"]>;
  mediaUrl: string;
  prompt?: string;
  title: string;
  width?: number;
  x: number;
  y: number;
}): CloneNode {
  const label = mediaType === "video" ? "视频" : mediaType === "audio" ? "音频" : mediaType === "text" ? "文本" : "图片";
  return {
    id: makeId(mediaType),
    kind: "media",
    title,
    subtitle: `${label}资源`,
    inputType: mediaType,
    x,
    y,
    width: width ?? (mediaType === "audio" ? 430 : mediaType === "video" ? 560 : 420),
    height: height ?? (mediaType === "audio" ? 170 : mediaType === "video" ? 315 : 280),
    accent: mediaType === "audio" ? "#9ee6bb" : mediaType === "video" ? "#8b96ff" : "#8790ff",
    draftValues: {
      action: action ?? `${mediaType.toUpperCase()}_RESOURCE`,
      alt: title,
      generated: false,
      mediaType,
      mediaUrl,
      nodeType: mediaType,
      params: prompt ? { prompt } : undefined,
      prompt: prompt || "",
      url: [mediaUrl],
    },
  };
}

function createMaterialStyleNode({
  author,
  count,
  model,
  thumbnailUrl,
  title,
  x,
  y,
}: {
  author: string;
  count: number;
  model?: string;
  thumbnailUrl: string;
  title: string;
  x: number;
  y: number;
}): CloneNode {
  return {
    id: makeId("style"),
    kind: "material-style",
    title: `素材-风格-${title}`,
    subtitle: "风格素材",
    inputType: undefined,
    x,
    y,
    width: MATERIAL_STYLE_NODE_SIZE,
    height: MATERIAL_STYLE_NODE_SIZE,
    accent: "#09caf5",
    draftValues: {
      action: "MATERIAL_STYLE",
      author,
      generated: true,
      mediaType: "image",
      mediaUrl: thumbnailUrl,
      model: model || "",
      nodeType: "material-style",
      styleTitle: title,
      thumbnailUrl,
      usageCount: count,
      url: [thumbnailUrl],
    },
  };
}

function createMaterialEffectNode({
  preset,
  x,
  y,
}: {
  preset: VideoCanvasEffectPreset;
  x: number;
  y: number;
}): CloneNode {
  return {
    id: makeId("effect"),
    kind: "material-effect",
    title: `素材-特效-${preset.title}`,
    subtitle: "视频特效素材",
    x,
    y,
    width: MATERIAL_STYLE_NODE_SIZE,
    height: MATERIAL_STYLE_NODE_SIZE,
    accent: "#09caf5",
    draftValues: {
      action: "MATERIAL_EFFECT",
      author: preset.author,
      commercial: preset.commercial,
      effectId: preset.id,
      effectPrompt: preset.prompt,
      effectTitle: preset.title,
      generated: true,
      mediaUrl: preset.thumbnailUrl,
      model: preset.model,
      nodeType: "material-effect",
      thumbnailUrl: preset.thumbnailUrl,
      usageCount: preset.usageCount,
      url: [preset.thumbnailUrl],
    },
  };
}

function createMaterialRoleNode({
  preset,
  x,
  y,
}: {
  preset: VideoCanvasRolePreset;
  x: number;
  y: number;
}): CloneNode {
  return {
    id: makeId("role"),
    kind: "material-role",
    title: `素材-角色-${preset.name}`,
    subtitle: "视频角色素材",
    x,
    y,
    width: MATERIAL_STYLE_NODE_SIZE,
    height: MATERIAL_STYLE_NODE_SIZE,
    accent: "#09caf5",
    draftValues: {
      action: "MATERIAL_ROLE",
      assetId: preset.assetId,
      compliant: preset.compliant,
      generated: true,
      mediaUrl: preset.images.full,
      nodeType: "material-role",
      roleDescription: preset.description,
      roleId: preset.id,
      roleName: preset.name,
      rolePrompt: preset.prompt,
      roleTags: preset.tags,
      thumbnailUrl: preset.images.full,
      url: [preset.images.full],
    },
  };
}


const HISTORY_ASSET_ZOOM_LEVELS = [
  { cardSize: 130, label: "75%" },
  { cardSize: 144, label: "100%" },
  { cardSize: 182, label: "125%" },
  { cardSize: 248, label: "150%" },
] as const;

function createNineGridCompositeNode({
  anchor,
  columns,
  functionKey = MULTI_VIEW_NINE_GRID_FUNCTION_KEY,
  gridPrompt,
  option,
  rows,
  sourceUrl,
  x,
  y,
}: {
  anchor: CloneNode;
  columns: number;
  functionKey?: string;
  gridPrompt?: string;
  option?: string;
  rows: number;
  sourceUrl: string;
  x: number;
  y: number;
}): CloneNode {
  const cellCount = rows * columns;
  const title =
    cellCount === 9
      ? "多机位九宫格"
      : option?.trim() || `${cellCount}宫格`;
  const resolvedGridPrompt =
    gridPrompt?.trim() ||
    (cellCount === 9 && (!option || /多|9|九/.test(option))
      ? getDefaultFunctionPrompt(MULTI_VIEW_NINE_GRID_FUNCTION_KEY)
      : `基于选中图片生成 ${columns}x${rows} 宫格分镜图，使用黑色分割线分隔每一格。`);

  return {
    id: makeId("image"),
    kind: "media",
    title,
    subtitle: "生成结果",
    inputType: "image",
    x,
    y,
    width: OFFICIAL_NINE_GRID_WIDTH,
    height: OFFICIAL_NINE_GRID_HEIGHT,
    accent: "#8790ff",
    draftValues: {
      action: "IMAGE_GENERATE_NINE_GRID",
      functionKey,
      generated: true,
      gridColumns: columns,
      gridPrompt: resolvedGridPrompt,
      gridRows: rows,
      mediaType: "image",
      nineGridCells: Array.from({ length: cellCount }).map((_, index) => getGridCellVisual(index)),
      nineGridComposite: true,
      nodeType: "image",
      outputSizeLabel: "2752 × 1536",
      params: {
        columns,
        functionKey,
        mode: "grid",
        option: option || "",
        prompt: resolvedGridPrompt,
        rows,
        sourceNodeId: anchor.id,
        sourceUrl,
      },
      prompt: gridPrompt,
      sourceNodeId: anchor.id,
      sourceUrl,
      toolbarOption: option || "",
      url: [],
    },
  };
}

function createTextResourceNode({
  content,
  height = OFFICIAL_TEXT_RESOURCE_HEIGHT,
  title,
  width = OFFICIAL_TEXT_RESOURCE_WIDTH,
  x,
  y,
}: {
  content: string;
  height?: number;
  title: string;
  width?: number;
  x: number;
  y: number;
}): CloneNode {
  return {
    id: makeId("text"),
    kind: "script",
    title,
    subtitle: "文本资源",
    inputType: "text",
    x,
    y,
    width,
    height,
    accent: "#f0d06b",
    draftValues: {
      action: "TEXT_RESOURCE",
      content: [content],
      nodeType: "text",
      scriptRole: "resource",
      viewMode: undefined,
    },
  };
}

function getDraftString(node: CloneNode | null | undefined, key: string) {
  const value = node?.draftValues?.[key];
  return typeof value === "string" ? value : "";
}

function isVideoEffectMaterialNode(node: CloneNode | null | undefined) {
  return Boolean(
    node &&
      (node.kind === "material-effect" ||
        getDraftString(node, "action") === "MATERIAL_EFFECT"),
  );
}

function isVideoRoleMaterialNode(node: CloneNode | null | undefined) {
  return Boolean(
    node &&
      (node.kind === "material-role" ||
        getDraftString(node, "action") === "MATERIAL_ROLE"),
  );
}

function getDraftNumber(node: CloneNode | null | undefined, key: string, fallback = 0) {
  const value = node?.draftValues?.[key];
  const numericValue = typeof value === "number" ? value : Number(value);
  return Number.isFinite(numericValue) ? numericValue : fallback;
}

function getNodeMediaUrl(node: CloneNode | null | undefined) {
  const direct = getDraftString(node, "mediaUrl") || getDraftString(node, "thumbnailUrl") || getDraftString(node, "resultImage");
  if (direct) return direct;
  const urls = node?.draftValues?.url;
  return Array.isArray(urls) && typeof urls[0] === "string" ? urls[0] : "";
}

function preventNativeImageDrag(event: ReactDragEvent<HTMLImageElement>) {
  event.preventDefault();
}

function normalizeGridOption(option?: string) {
  const text = String(option || "").trim();
  const explicitGrid = text.match(/(\d+)\s*[x×]\s*(\d+)/i);
  if (explicitGrid) {
    const columns = Math.max(1, Math.min(5, Number.parseInt(explicitGrid[1] || "3", 10) || 3));
    const rows = Math.max(1, Math.min(5, Number.parseInt(explicitGrid[2] || "3", 10) || 3));
    return { columns, rows, tileCount: columns * rows };
  }
  const tileCount =
    /25\s*宫格|5\s*[x×]\s*5|25/.test(text)
      ? 25
      : /16\s*宫格|4\s*[x×]\s*4|16/.test(text)
        ? 16
        : /4\s*宫格|2\s*[x×]\s*2|四/.test(text)
          ? 4
          : 9;
  const columns = tileCount === 4 ? 2 : tileCount === 16 ? 4 : tileCount === 25 ? 5 : 3;
  const rows = Math.ceil(tileCount / columns);
  return { columns, rows, tileCount };
}

function getGridCellVisual(index: number): GridCellVisual {
  return NINE_GRID_CELL_VISUALS[index % NINE_GRID_CELL_VISUALS.length];
}

function getNodeSourceMediaUrl(node: CloneNode | null | undefined) {
  return getDraftString(node, "sourceUrl") || getNodeMediaUrl(node);
}

function readyCanvasInputs(nodes: CloneNode[], edges: CloneEdge[], target: string) {
  try {
    const incoming = connectedInputNodes(nodes, edges, target);
    const targetNode = nodes.find(node => node.id === target);
    if (targetNode) for (const source of incoming) {
      const error = connectionTypeError(source, targetNode);
      if (error) throw new Error(error);
    }
    assertConnectedInputsReady(incoming);
    return incoming;
  } catch (error) {
    toast.error(error instanceof Error ? error.message : "上游输入不可用");
    return null;
  }
}

function getNodeReferenceMediaUrl(node: CloneNode | null | undefined) {
  return getNodeMediaUrl(node) || getDraftString(node, "sourceUrl");
}

function getNodePlayableVideoUrl(node: CloneNode | null | undefined) {
  const direct = getDraftString(node, "mediaUrl");
  if (direct) return direct;
  const urls = node?.draftValues?.url;
  return Array.isArray(urls) && typeof urls[0] === "string" ? urls[0] : "";
}

function normalizeVideoCanvasMagicMarks(value: unknown): VideoCanvasMagicMark[] {
  if (!Array.isArray(value)) return [];
  return value
    .map((item) => {
      if (!item || typeof item !== "object" || Array.isArray(item)) return null;
      const record = item as Record<string, unknown>;
      const sourceNodeId = String(record.sourceNodeId || "").trim();
      const imageUrl = String(record.imageUrl || "").trim();
      const labelOptions = Array.from(
        new Set(
          (Array.isArray(record.labelOptions) ? record.labelOptions : [record.label])
            .map((label) => String(label || "").trim().slice(0, 8))
            .filter(Boolean)
        )
      ).slice(0, 4);
      if (!sourceNodeId || !imageUrl || labelOptions.length === 0) return null;
      const clickX = Math.max(0, Math.min(1, Number(record.clickX) || 0));
      const clickY = Math.max(0, Math.min(1, Number(record.clickY) || 0));
      const selectedIndex = Math.max(
        0,
        Math.min(labelOptions.length - 1, Number(record.selectedIndex) || 0)
      );
      return {
        clickX,
        clickY,
        id: String(record.id || `${sourceNodeId}_${labelOptions[0]}`).trim(),
        imageUrl,
        labelOptions,
        selectedIndex,
        sourceNodeId,
      } satisfies VideoCanvasMagicMark;
    })
    .filter((item): item is VideoCanvasMagicMark => Boolean(item));
}

function getVideoCanvasMagicMarks(node: CloneNode | null | undefined) {
  if (!node) return [];
  const params = getNodeParams(node);
  return normalizeVideoCanvasMagicMarks(
    node.draftValues?.magicMarks || params.magicMarks
  );
}

function getNodeGridSplitSourceUrl(node: CloneNode | null | undefined) {
  return getNodeMediaUrl(node) || getNodeSourceMediaUrl(node);
}

function isVideoMediaNode(node: CloneNode | null | undefined): node is CloneNode {
  if (!node || node.kind !== "media") return false;
  const mediaType = getDraftString(node, "mediaType") || node.inputType || "";
  return mediaType === "video";
}

function getVideoNodePreviewUrl(node: CloneNode | null | undefined) {
  return getDraftString(node, "poster") || getNodeSourceMediaUrl(node) || getNodeMediaUrl(node);
}

function getVideoNodeDurationSeconds(node: CloneNode | null | undefined) {
  const meta = node?.draftValues?.videoMeta as Record<string, unknown> | undefined;
  const recordedDuration = Number(meta?.durationSeconds || node?.draftValues?.durationSeconds || meta?.duration);
  if (Number.isFinite(recordedDuration) && recordedDuration > 0) return recordedDuration;
  const params = getNodeParams(node);
  const paramsSettings =
    params.settings && typeof params.settings === "object"
      ? (params.settings as Record<string, unknown>)
      : {};
  const numericValue = Number(
    params.duration ||
      paramsSettings.duration ||
      getDraftString(node, "duration") ||
      (node?.draftValues?.videoMeta && typeof node.draftValues.videoMeta === "object"
        ? (node.draftValues.videoMeta as Record<string, unknown>).duration
        : 0)
  );
  if (Number.isFinite(numericValue) && numericValue > 0) return numericValue;
  const outputLabel = getDraftString(node, "outputSizeLabel");
  const durationMatch = outputLabel.match(/(\d+(?:\.\d+)?)\s*s/i);
  if (durationMatch) {
    const parsed = Number(durationMatch[1] || "0");
    if (Number.isFinite(parsed) && parsed > 0) return parsed;
  }
  return 5;
}

function getVideoCropSelectionLabel(node: CloneNode) {
  const rect = (node.draftValues?.cropRect || VIDEO_CROP_RECT) as GridCropRect;
  const dimensions = getDraftString(node, "outputSizeLabel").match(/(\d+)\s*[×x]\s*(\d+)/);
  if (!dimensions) return `裁剪区域 ${Math.round(rect.width * 100)}% × ${Math.round(rect.height * 100)}%`;
  return `${Math.floor(Number(dimensions[1]) * rect.width / 2) * 2} × ${Math.floor(Number(dimensions[2]) * rect.height / 2) * 2}`;
}

function formatClipDurationLabel(seconds: number) {
  const normalized = Math.max(0.1, seconds);
  return `${normalized.toFixed(2)} s`;
}

function formatVideoTimestamp(seconds: number) {
  const normalized = Math.max(0, Math.round(seconds));
  const minutes = Math.floor(normalized / 60);
  const remainder = normalized % 60;
  return `${minutes}:${String(remainder).padStart(2, "0")}`;
}

function formatAudioTimestamp(seconds: number) {
  const normalized = Math.max(0, Math.round(seconds));
  const minutes = Math.floor(normalized / 60);
  const remainder = normalized % 60;
  return `${String(minutes).padStart(2, "0")}:${String(remainder).padStart(2, "0")}`;
}

function normalizeVideoClipRange(value: unknown): VideoClipRange {
  if (!value || typeof value !== "object") return { start: 0.18, end: 0.52 };
  const candidate = value as Partial<VideoClipRange>;
  const start = Number(candidate.start);
  const end = Number(candidate.end);
  if (!Number.isFinite(start) || !Number.isFinite(end)) {
    return { start: 0.18, end: 0.52 };
  }
  return {
    start: Math.max(0, Math.min(start, 0.94)),
    end: Math.max(Math.min(start + 0.04, 1), Math.min(end, 1)),
  };
}

function createVideoStoryAnalysisNode({
  existingNode,
  framePreviews = [],
  sourceNode,
  rows,
  summary,
  error,
}: {
  error?: string;
  existingNode?: CloneNode;
  framePreviews?: string[];
  sourceNode: CloneNode;
  rows: VideoAnalysisRow[];
  summary: string;
}): CloneNode {
  const previewUrl = getVideoNodePreviewUrl(sourceNode) || "";
  return {
    id: existingNode?.id || makeId("video-story"),
    kind: "video-story",
    title: "视频故事",
    subtitle: "视频解析结果",
    inputType: "text",
    x: existingNode?.x ?? Math.round(sourceNode.x - 720),
    y: existingNode?.y ?? Math.round(sourceNode.y + sourceNode.height + 620),
    width: existingNode?.width ?? 800,
    height: existingNode?.height ?? 400,
    accent: "#8b96ff",
    draftValues: {
      ...(existingNode?.draftValues || {}),
      action: "VIDEO_STORY_ANALYSIS",
      error: error || undefined,
      framePreviews,
      generated: true,
      keyframeUrl: previewUrl,
      mediaType: "text",
      nodeType: "video-story",
      rows,
      sourceVideoNodeId: sourceNode.id,
      sourceVideoTitle: sourceNode.title,
      status: error ? "error" : "ready",
      summary,
    },
  };
}

function normalizeVideoHdResolutionOption(option: string) {
  const text = option.trim();
  if (/^(1080P|2K|4K)$/i.test(text)) return text.toUpperCase();
  return "1080P";
}

function createVideoHdUpscaleNode({
  existingNode,
  option,
  sourceNode,
}: {
  existingNode?: CloneNode;
  option: string;
  sourceNode: CloneNode;
}): CloneNode {
  const resolution = normalizeVideoHdResolutionOption(option);
  const sourceUrl = getNodeReferenceMediaUrl(sourceNode);
  return {
    id: existingNode?.id || makeId("video-hd"),
    kind: "model",
    title: `高清（${resolution}）`,
    subtitle: "配置参数",
    inputType: "video",
    x: existingNode?.x ?? Math.round(sourceNode.x),
    y: existingNode?.y ?? Math.round(sourceNode.y + sourceNode.height + OFFICIAL_NODE_GAP),
    width: existingNode?.width ?? 350,
    height: existingNode?.height ?? 350,
    accent: "#8b96ff",
    draftValues: {
      ...(existingNode?.draftValues || {}),
      action: "VIDEO_HD_UPSCALE",
      frameInterpolation: option === "不补帧" ? "不补帧" : existingNode?.draftValues?.frameInterpolation || "不补帧",
      generated: existingNode?.draftValues?.generated || false,
      hdEngine: option === "Real-ESRGAN" ? "Real-ESRGAN" : existingNode?.draftValues?.hdEngine || "Real-ESRGAN",
      hdResolution: resolution,
      mediaType: "video",
      nodeType: "video-hd",
      outputSizeLabel: resolution === "4K" ? "3840 × 2160" : resolution === "2K" ? "2560 × 1440" : "1920 × 1080",
      scale: option === "1x" ? "1x" : existingNode?.draftValues?.scale || "1x",
      sourceVideoNodeId: sourceNode.id,
      sourceVideoTitle: sourceNode.title,
      sourceUrl,
      url: existingNode?.draftValues?.url || [],
    },
  };
}

function createVideoCropResultNode({
  existingIndex,
  sourceNode,
}: {
  existingIndex: number;
  sourceNode: CloneNode;
}): CloneNode {
  const sourceUrl = getNodeReferenceMediaUrl(sourceNode);
  const previewUrl = getVideoNodePreviewUrl(sourceNode) || sourceUrl;
  const width = sourceNode.width || 560;
  const height = sourceNode.height || 315;
  return {
    id: makeId("video"),
    kind: "media",
    title: `${sourceNode.title || "视频"}_裁剪`,
    subtitle: "裁剪中",
    inputType: "video",
    x: Math.round(sourceNode.x + sourceNode.width + OFFICIAL_NODE_GAP),
    y: Math.round(sourceNode.y + existingIndex * (height + OFFICIAL_NODE_GAP)),
    width,
    height,
    accent: "#8b96ff",
    draftValues: {
      action: "VIDEO_CROP",
      cropRect: VIDEO_CROP_RECT,
      durationSeconds: getVideoNodeDurationSeconds(sourceNode),
      generated: false,
      generationProgress: 37,
      generationStatus: "pending",
      mediaType: "video",
      mediaUrl: "",
      nodeType: "video",
      outputSizeLabel: VIDEO_CROP_OUTPUT_LABEL,
      poster: previewUrl,
      sourceUrl,
      sourceVideoNodeId: sourceNode.id,
      sourceVideoTitle: sourceNode.title,
      uploadStatus: "uploading",
      url: [],
    },
  };
}

function createVideoSubtitleEraseNode({
  existingIndex,
  mode = "smart",
  regions = [],
  sourceNode,
}: {
  existingIndex: number;
  mode?: SubtitleEraseMode;
  regions?: SubtitleEraseRegion[];
  sourceNode: CloneNode;
}): CloneNode {
  const sourceUrl = getNodeReferenceMediaUrl(sourceNode);
  const previewUrl = getVideoNodePreviewUrl(sourceNode) || sourceUrl;
  const outputSizeLabel = getDraftString(sourceNode, "outputSizeLabel") || "1280 × 720";
  const normalizedRegions = regions.map(({ height, width, x, y }) => ({
    height: Number(height.toFixed(4)),
    width: Number(width.toFixed(4)),
    x: Number(x.toFixed(4)),
    y: Number(y.toFixed(4)),
  }));
  const isRegionErase = mode === "region";
  return {
    id: makeId("video"),
    kind: "media",
    title: `视频一键去字幕-${sourceNode.title || "视频"}`,
    subtitle: isRegionErase ? "框选擦除" : "去字幕",
    inputType: "video",
    x: Math.round(sourceNode.x + sourceNode.width + OFFICIAL_NODE_GAP),
    y: Math.round(sourceNode.y - 450 + existingIndex * 390),
    width: 350,
    height: 350,
    accent: "#8b96ff",
    draftValues: {
      action: "VIDEO_SUBTITLE_ERASE",
      cost: 0,
      durationSeconds: getVideoNodeDurationSeconds(sourceNode),
      generated: false,
      generationProgress: 2,
      generationStatus: "pending",
      mediaType: "video",
      mediaUrl: "",
      mode: isRegionErase ? "Text" : "Subtitle",
      eraseMode: mode,
      eraseRatioLocation: normalizedRegions,
      erase_ratio_location: normalizedRegions,
      model: "volcano-subtitle-eraser",
      nodeType: "video",
      outputSizeLabel,
      poster: previewUrl,
      sourceUrl,
      sourceVideoNodeId: sourceNode.id,
      sourceVideoTitle: sourceNode.title,
      url: [],
    },
  };
}

function formatStoryShot(value: unknown, index: number) {
  const text = String(value || "").trim();
  if (/^\d+$/.test(text)) return text.padStart(2, "0");
  return text || String(index + 1).padStart(2, "0");
}

function normalizeStoryScriptRow(row: unknown, index: number, nodeId: string): StoryScriptRow | null {
  if (Array.isArray(row)) {
    const cells = row.map((cell) => String(cell || "").trim());
    const shot = formatStoryShot(cells[0], index);
    const secondCellLooksLikeDuration = /^\d+(\.\d+)?\s*(s|秒)?$/i.test(cells[1] || "");
    const duration = secondCellLooksLikeDuration ? cells[1] || "5s" : "5s";
    const scene = secondCellLooksLikeDuration ? cells[2] || `镜头 ${shot}` : cells[1] || `镜头 ${shot}`;
    const sceneDescription = secondCellLooksLikeDuration ? cells[2] || scene : cells[2] || cells[3] || scene;
    const voiceAndSfx = (secondCellLooksLikeDuration ? cells[6] : cells[3]) || "无";
    const cameraMovement = (secondCellLooksLikeDuration ? cells[7] : "") || "缓慢推镜头";
    return {
      id: `${nodeId}-story-row-${index}`,
      shot,
      duration,
      scene,
      sceneDescription,
      shotSize: (secondCellLooksLikeDuration ? cells[3] : "") || "中景",
      lighting: (secondCellLooksLikeDuration ? cells[4] : cells[4]) || "电影感光影",
      dialogue: (secondCellLooksLikeDuration ? cells[5] : "") || "+",
      backgroundMusic: "无",
      voiceAndSfx,
      cameraMovement,
      imagePrompt: (secondCellLooksLikeDuration ? cells[8] : cells[5]) || sceneDescription,
      motionPrompt:
        (secondCellLooksLikeDuration ? cells[9] || cameraMovement : cells[6]) ||
        "保持镜头运动自然、连贯，围绕主体动作推进。",
      keyframeUrl: "",
    };
  }

  if (!row || typeof row !== "object") return null;
  const record = row as Record<string, unknown>;
  if (["shot","duration","scene","sceneDescription","shotSize","lighting","dialogue","backgroundMusic","voiceAndSfx","cameraMovement","imagePrompt","motionPrompt","keyframeUrl"].every(key => typeof record[key] === "string")) {
    return { ...record, id: typeof record.id === "string" ? record.id : `${nodeId}-story-row-${index}` } as StoryScriptRow;
  }
  const shot = formatStoryShot(record.shot || record.id, index);
  const duration = String(record.duration || record.length || record.time || "5s").trim();
  const scene = String(record.scene || record.title || record.sceneDescription || `镜头 ${shot}`).trim();
  const sceneDescription = String(
    record.sceneDescription ||
      record.description ||
      record.summary ||
      record.imagePrompt ||
      scene
  ).trim();
  const shotSize = String(record.shotSize || record.frameSize || record.sceneScale || "中景").trim();
  const lighting = String(record.lighting || record.light || record.atmosphere || record.mood || "电影感光影").trim();
  const dialogue = String(record.dialogue || record.dialog || record.narration || record.voiceover || record.line || "+").trim();
  const backgroundMusic = String(record.backgroundMusic || record.music || "无").trim();
  const voiceAndSfx = String(record.voiceAndSfx || record.audio || record.sfx || "无").trim();
  const cameraMovement = String(
    record.cameraMovement ||
      record.cameraMove ||
      record.movement ||
      record.lensMovement ||
      "缓慢推镜头"
  ).trim();
  const imagePrompt = String(record.imagePrompt || sceneDescription || scene).trim();
  const motionPrompt = String(
    record.motionPrompt ||
      record.videoPrompt ||
      cameraMovement ||
      "保持镜头运动自然、连贯，围绕主体动作推进。"
  ).trim();
  const keyframeUrl = String(record.keyframeUrl || record.previewUrl || record.imageUrl || "").trim();

  if (![scene, sceneDescription, imagePrompt, motionPrompt, backgroundMusic, voiceAndSfx].some(Boolean)) {
    return null;
  }

  return {
    id: `${nodeId}-story-row-${index}`,
    shot,
    duration,
    scene,
    sceneDescription,
    shotSize,
    lighting,
    dialogue,
    backgroundMusic,
    voiceAndSfx,
    cameraMovement,
    imagePrompt,
    motionPrompt,
    keyframeUrl,
  };
}

function getStoryScriptRows(node: CloneNode | null | undefined): StoryScriptRow[] {
  const nodeId = node?.id || "story";
  const rawRows = Array.isArray(node?.draftValues?.rows) ? node.draftValues.rows : [];
  const rows = rawRows
    .map((row, index) => normalizeStoryScriptRow(row, index, nodeId))
    .filter((row): row is StoryScriptRow => Boolean(row));
  return rows;
}

type StoryWorkflowAsset = {
  id?: string;
  description: string;
  imageUrl: string;
  name: string;
  type: "role" | "scene" | "prop";
};

function getStoryWorkflowAssetGroups(rows: StoryScriptRow[]) {
  const names = [...new Set(rows.flatMap(row =>
    [row.scene, row.sceneDescription, row.imagePrompt, row.motionPrompt].join(" ").match(/@[\p{L}\p{N}_-]+/gu) || []))];
  const assets: StoryWorkflowAsset[] = names.map(name => ({
    name: name.slice(1), description: "脚本引用，请确认类型并准备图片", imageUrl: "",
    type: /场景|街|城|室|厅|山|海/.test(name) ? "scene" : /刀|剑|杯|道具/.test(name) ? "prop" : "role",
  }));
  return { role: assets.filter(a => a.type === "role"), scene: assets.filter(a => a.type === "scene"), prop: assets.filter(a => a.type === "prop") };
}

function buildStorySceneText(row: StoryScriptRow) {
  return [
    `镜号 ${row.shot}｜${row.duration}｜${row.scene}`,
    "",
    `画面：${row.sceneDescription}`,
    `景别：${row.shotSize}`,
    `光影氛围：${row.lighting}`,
    `对白/旁白：${row.dialogue}`,
    `音效：${row.voiceAndSfx}`,
    `运镜：${row.cameraMovement}`,
    `图像提示词：${row.imagePrompt}`,
    `运动提示词：${row.motionPrompt}`,
    `声音：${[row.backgroundMusic, row.voiceAndSfx].filter((item) => item && item !== "无").join(" / ") || "无"}`,
  ].join("\n");
}

function buildStoryVideoPrompt(row: StoryScriptRow) {
  const motionPrompt = row.motionPrompt.includes("起始状态")
    ? row.motionPrompt
    : `起始状态：${row.sceneDescription} 动作过程：${row.cameraMovement}，角色动作自然连贯。 结束状态：镜头停留在关键情绪或剧情转折点。 音效：${row.voiceAndSfx}`;
  return [
    row.imagePrompt,
    motionPrompt,

  ].filter(Boolean).join("\n\n");
}

function sanitizeDownloadFilename(value: string) {
  return (value.trim() || "story-script").replace(/[\\/:*?"<>|]+/g, "-").slice(0, 80);
}

function downloadStoryScriptRows(node: CloneNode, rows: StoryScriptRow[]) {
  const payload = {
    exportedAt: new Date().toISOString(),
    sourceNodeId: node.id,
    title: node.title,
    rows,
  };
  const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json;charset=utf-8" });
  const url = URL.createObjectURL(blob);
  const link = document.createElement("a");
  link.href = url;
  link.download = `${sanitizeDownloadFilename(node.title)}-story-script.json`;
  document.body.appendChild(link);
  link.click();
  link.remove();
  window.setTimeout(() => URL.revokeObjectURL(url), 1000);
}

function StoryScriptWorkflowDialog({
  node,
  onClose,
  onRun,
  onPatch,
  onStepChange,
  step,
  imageNodes,
  imageModel,
  analysisModel,
  taskBusy = false,
  taskError,
  onSubmitTask,
}: {
  node: CloneNode;
  onClose: () => void;
  onRun: () => void;
  onPatch: (patch: Record<string, unknown>) => void;
  onStepChange: (step: StoryWorkflowStep) => void;
  step: StoryWorkflowStep;
  imageNodes: CloneNode[];
  imageModel?: string;
  analysisModel?: string;
  taskBusy?: boolean;
  taskError?: string;
  onSubmitTask?: (
    kind: "asset" | "prompts",
    data: {
      assets: StoryWorkflowAsset[];
      rows: StoryScriptRow[];
      assetIndex?: number;
      style: string;
    },
  ) => Promise<void>;
}) {
  const rows = getStoryScriptRows(node);
  const detected = getStoryWorkflowAssetGroups(rows);
  const assets = (
    Array.isArray(node.draftValues?.storyAssets)
      ? node.draftValues.storyAssets
      : [...detected.role, ...detected.scene, ...detected.prop]
  ) as StoryWorkflowAsset[];
  const style = String(node.draftValues?.storyStyle || "");
  const [busy, setBusy] = useState<string | null>(null);
  const [error, setError] = useState("");
  const uploadInput = useRef<HTMLInputElement>(null);
  const uploadIndex = useRef(0);
  const latest = useRef({ rows, assets });
  latest.current = { rows, assets };
  const updateAsset = (index: number, patch: Partial<StoryWorkflowAsset>) =>
    onPatch({
      storyAssets: latest.current.assets.map((asset, i) =>
        i === index ? { ...asset, ...patch } : asset,
      ),
    });
  const updateRow = (index: number, patch: Partial<StoryScriptRow>) =>
    onPatch({
      rows: latest.current.rows.map((row, i) => (i === index ? { ...row, ...patch } : row)),
    });
  const compose = async (index?: number) => {
    if (busy || taskBusy) return;
    const source = index === undefined ? rows : [rows[index]];
    if (!source.length) return;
    setBusy("prompts");
    setError("");
    try {
      if (!onSubmitTask) throw new Error("任务服务尚未就绪");
      await onSubmitTask("prompts", { assets, rows: source, style });
    } catch (error) {
      setError(error instanceof Error ? error.message : "提示词提交失败");
    } finally {
      setBusy(null);
    }
  };
  const generateAsset = async (index: number) => {
    if (busy || taskBusy) return;
    setBusy("asset");
    setError("");
    try {
      if (!onSubmitTask) throw new Error("任务服务尚未就绪");
      await onSubmitTask("asset", { assets, rows, style, assetIndex: index });
    } catch (error) {
      setError(error instanceof Error ? error.message : "资产提交失败");
    } finally {
      setBusy(null);
    }
  };
  const field =
    "w-full rounded border border-white/10 bg-white/5 p-2 text-xs outline-none focus:border-white/40";
  const button =
    "rounded-lg border border-white/10 px-3 py-2 text-xs hover:bg-white/10 disabled:opacity-40";
  const fields: Array<[keyof StoryScriptRow, string]> = [
    ["shot", "镜号"],
    ["duration", "时长"],
    ["sceneDescription", "画面描述"],
    ["shotSize", "景别"],
    ["lighting", "光影"],
    ["dialogue", "对白"],
    ["voiceAndSfx", "音效"],
    ["cameraMovement", "运镜"],
    ["imagePrompt", "图像提示词"],
    ["motionPrompt", "运动提示词"],
  ];
  const readyAssets = assets.filter((asset) => asset.imageUrl).length;
  const readyPrompts = rows.filter(
    (row) => row.imagePrompt.trim() && row.motionPrompt.trim(),
  ).length;
  return (
    <div
      role="dialog"
      aria-label="脚本工作流"
      className="fixed inset-0 z-[600] flex flex-col bg-[#171717] text-white"
      data-canvas-overlay="true"
      onPointerDown={(event) => event.stopPropagation()}
    >
      <header className="flex flex-wrap items-center justify-between gap-3 border-b border-white/10 p-4">
        <strong>{node.title || "脚本工作流"}</strong>
        <nav className="flex gap-2">
          {(
            [
              ["shots", `确认镜头 (${rows.length})`],
              ["assets", `准备资产 (${readyAssets}/${assets.length})`],
              ["prompts", `编辑提示词 (${readyPrompts}/${rows.length})`],
            ] as const
          ).map(([key, label]) => (
            <button
              className={`${button} ${step === key ? "bg-white/15" : ""}`}
              key={key}
              onClick={() => onStepChange(key)}
            >
              {label}
            </button>
          ))}
        </nav>
        <button className={button} aria-label="关闭脚本工作流" onClick={onClose}>
          <X size={18} />
        </button>
      </header>
      {error && (
        <p role="alert" className="px-5 py-3 text-sm text-red-300">
          {error}
        </p>
      )}
      {taskError ? (
        <p role="alert" className="px-5 py-2 text-sm text-red-300">
          {taskError}
        </p>
      ) : null}
      {taskBusy ? (
        <p role="status" className="px-5 py-2 text-sm text-white/65">
          生成任务处理中，可关闭窗口，结果会自动保存并同步。
        </p>
      ) : null}
      {Object.values(
        (node.draftValues?.storyTaskResults || {}) as Record<
          string,
          { status: string; message: string }
        >,
      )
        .slice(-1)
        .map((result, index) => (
          <p key={index} role="status" className="px-5 py-2 text-sm text-white/65">
            {result.message}
          </p>
        ))}
      <fieldset disabled={Boolean(busy) || taskBusy} className="min-h-0 flex-1 overflow-auto p-5">
        {step === "assets" ? (
          <>
            <label className="mb-5 block max-w-xl text-sm">
              全局风格
              <input
                aria-label="全局风格"
                className={`${field} mt-2`}
                value={style}
                placeholder="遵循原脚本，可填写写实、动漫等风格"
                onChange={(e) => onPatch({ storyStyle: e.target.value })}
              />
            </label>
            {(
              [
                ["role", "角色"],
                ["scene", "场景"],
                ["prop", "道具"],
              ] as const
            ).map(([type, label]) => (
              <section className="mb-6" key={type}>
                <h3 className="mb-3">{label}</h3>
                <div className="grid grid-cols-[repeat(auto-fill,minmax(230px,1fr))] gap-4">
                  {assets.map((asset, index) =>
                    asset.type !== type ? null : (
                      <article key={index} className="rounded-xl border border-white/10 p-3">
                        {asset.imageUrl ? (
                          <img
                            alt={asset.name}
                            src={asset.imageUrl}
                            className="h-36 w-full rounded-lg object-contain"
                          />
                        ) : (
                          <div className="flex h-36 items-center justify-center bg-white/5 text-sm text-white/40">
                            尚未准备图片
                          </div>
                        )}
                        <input
                          aria-label={`${label}名称 ${index + 1}`}
                          className={`${field} mt-2`}
                          value={asset.name}
                          onChange={(e) => updateAsset(index, { name: e.target.value })}
                        />
                        <textarea
                          aria-label={`${asset.name}描述`}
                          className={`${field} mt-2`}
                          value={asset.description}
                          onChange={(e) => updateAsset(index, { description: e.target.value })}
                        />
                        <select
                          aria-label={`${asset.name}类型`}
                          className={field}
                          value={asset.type}
                          onChange={(e) =>
                            updateAsset(index, {
                              type: e.target.value as StoryWorkflowAsset["type"],
                            })
                          }
                        >
                          <option value="role">角色</option>
                          <option value="scene">场景</option>
                          <option value="prop">道具</option>
                        </select>
                        <select
                          aria-label={`${asset.name}引用画布图片`}
                          className={`${field} mt-2`}
                          value=""
                          onChange={(e) => {
                            if (e.target.value) updateAsset(index, { imageUrl: e.target.value });
                          }}
                        >
                          <option value="">从画布选择图片</option>
                          {imageNodes.map((n) => (
                            <option key={n.id} value={getNodeMediaUrl(n)}>
                              {n.title}
                            </option>
                          ))}
                        </select>
                        <div className="mt-2 flex flex-wrap gap-1">
                          <button
                            className={button}
                            onClick={() => {
                              uploadIndex.current = index;
                              uploadInput.current?.click();
                            }}
                          >
                            上传
                          </button>
                          <button className={button} onClick={() => void generateAsset(index)}>
                            AI 生成
                          </button>
                          <button
                            className={button}
                            disabled={!asset.imageUrl}
                            onClick={() => updateAsset(index, { imageUrl: "" })}
                          >
                            清除图片
                          </button>
                          <button
                            className={button}
                            onClick={() =>
                              onPatch({ storyAssets: assets.filter((_, i) => i !== index) })
                            }
                          >
                            删除
                          </button>
                        </div>
                      </article>
                    ),
                  )}
                  <button
                    className={`${button} min-h-32 border-dashed`}
                    onClick={() =>
                      onPatch({
                        storyAssets: [
                          ...assets,
                          { name: `新${label}`, description: "", imageUrl: "", type },
                        ],
                      })
                    }
                  >
                    ＋ 新增{label}
                  </button>
                </div>
              </section>
            ))}
          </>
        ) : (
          <table className="w-full min-w-[1600px] border-collapse text-left text-xs">
            <thead>
              <tr>
                {fields.map(([key, label]) => (
                  <th className="border border-white/10 p-3" key={key}>
                    {label}
                  </th>
                ))}
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row, index) => (
                <tr key={row.id}>
                  {fields.map(([key, label]) => (
                    <td key={key} className="border border-white/10 p-2 align-top">
                      <textarea
                        aria-label={`镜头 ${row.shot} ${label}`}
                        className={`${field} min-h-24 ${key.includes("Prompt") || key === "sceneDescription" ? "min-w-56" : "min-w-20"}`}
                        value={row[key]}
                        onChange={(e) => updateRow(index, { [key]: e.target.value })}
                      />
                    </td>
                  ))}
                  <td className="min-w-32 space-y-2 p-2">
                    <button className={button} onClick={() => void compose(index)}>
                      合成提示词
                    </button>
                    <button
                      className={button}
                      disabled={index === 0}
                      onClick={() => {
                        const next = [...rows];
                        [next[index - 1], next[index]] = [next[index], next[index - 1]];
                        onPatch({ rows: next });
                      }}
                    >
                      上移
                    </button>
                    <button
                      className={button}
                      onClick={() => onPatch({ rows: rows.filter((_, i) => i !== index) })}
                    >
                      删除镜头
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
        {!rows.length && step !== "assets" && (
          <p className="mt-8 text-sm text-white/50">
            暂无镜头。可添加镜头，或关闭此窗口输入脚本后生成。
          </p>
        )}
      </fieldset>
      <footer className="flex flex-wrap items-center justify-between gap-3 border-t border-white/10 p-4">
        <span className="text-xs text-white/50">
          {busy ? "处理中，请等待结果返回…" : "编辑内容随画布保存；图片与提示词分别准备"}
        </span>
        <div className="flex gap-2">
          <button
            className={button}
            disabled={Boolean(busy) || taskBusy}
            onClick={() =>
              onPatch({
                rows: [
                  ...rows,
                  {
                    id: makeId("shot"),
                    shot: String(rows.length + 1).padStart(2, "0"),
                    duration: "5s",
                    scene: "新镜头",
                    sceneDescription: "",
                    shotSize: "中景",
                    lighting: "",
                    dialogue: "",
                    backgroundMusic: "",
                    voiceAndSfx: "",
                    cameraMovement: "",
                    imagePrompt: "",
                    motionPrompt: "",
                    keyframeUrl: "",
                  },
                ],
              })
            }
          >
            添加镜头
          </button>
          <button
            className={button}
            disabled={Boolean(busy) || taskBusy || !rows.length}
            onClick={() => downloadStoryScriptRows(node, rows)}
          >
            导出脚本
          </button>
          <button
            className={button}
            disabled={Boolean(busy) || taskBusy || !rows.length}
            onClick={() => void compose()}
          >
            合成全部提示词
          </button>
          <button className={button} disabled={Boolean(busy) || taskBusy} onClick={onRun}>
            重新生成脚本
          </button>
        </div>
      </footer>
      <input
        ref={uploadInput}
        type="file"
        accept="image/*"
        className="hidden"
        onChange={async (e) => {
          const file = e.target.files?.[0];
          e.target.value = "";
          if (!file) return;
          setBusy("upload");
          setError("");
          try {
            const result = await imageGenerationService.uploadImage(file);
            if (!result.success || !result.data?.url) throw new Error(result.error || "上传失败");
            updateAsset(uploadIndex.current, { imageUrl: result.data.url });
          } catch (e) {
            setError(e instanceof Error ? e.message : "上传失败");
          } finally {
            setBusy(null);
          }
        }}
      />
    </div>
  );
}

function getVideoStoryRows(node: CloneNode | null | undefined): VideoAnalysisRow[] {
  const rawRows = Array.isArray(node?.draftValues?.rows) ? node.draftValues.rows : [];
  return normalizeVideoAnalysisRows(rawRows, [], node?.id || "video-story");
}

function getGridSplitCellLabel(index: number, split: Pick<GridSplitState, "columns">) {
  const row = Math.floor(index / split.columns) + 1;
  const column = (index % split.columns) + 1;
  return `${row}-${column}`;
}

function getOfficialImagePresetFunctionKey(value?: unknown) {
  const text = String(value || "").trim();
  if (!text) return null;
  const designPresets: Record<string, string> = {
    "角色脸部三视图": "character-face-three-view",
    "角色设定图": "character-design-sheet",
    "场景设定图": "scene-design-sheet",
    "产品设定图": "product-design-sheet",
  };
  if (designPresets[text]) return designPresets[text];
  if (/角色三视图|三视图生成|正侧背|character[-_\s]?(three|turnaround)/i.test(text)) {
    return CHARACTER_THREE_VIEW_FUNCTION_KEY;
  }
  if (/剧情推演|四宫格|4\s*宫格|2\s*[x×]\s*2/.test(text)) {
    return STORY_BEAT_GRID_FUNCTION_KEY;
  }
  if (/25\s*宫格|连贯分镜|5\s*[x×]\s*5/.test(text)) {
    return CONTINUOUS_STORYBOARD_GRID_FUNCTION_KEY;
  }
  if (/电影级光影|光影校正|cinematic lighting/i.test(text)) {
    return CINEMATIC_LIGHTING_CORRECTION_FUNCTION_KEY;
  }
  if (/3\s*秒后|三秒后|\+\s*3|plus[-_\s]?3/i.test(text)) {
    return FRAME_PREDICTION_PLUS_3S_FUNCTION_KEY;
  }
  if (/5\s*秒前|五秒前|-\s*5|minus[-_\s]?5/i.test(text)) {
    return FRAME_PREDICTION_MINUS_5S_FUNCTION_KEY;
  }
  if (/多机位|九宫格|9\s*宫格|3\s*[x×]\s*3/.test(text)) {
    return MULTI_VIEW_NINE_GRID_FUNCTION_KEY;
  }
  return null;
}

function resolveOfficialImagePresetFunctionKey({
  fallbackKey,
  option,
  title,
}: {
  fallbackKey?: string;
  option?: unknown;
  title?: unknown;
}) {
  const optionKey = getOfficialImagePresetFunctionKey(option);
  if (optionKey) return optionKey;
  const titleKey = getOfficialImagePresetFunctionKey(title);
  if (titleKey) return titleKey;
  const normalizedFallbackKey = String(fallbackKey || "").trim();
  return normalizedFallbackKey || null;
}

function isCharacterThreeViewOption(value?: unknown) {
  return getOfficialImagePresetFunctionKey(value) === CHARACTER_THREE_VIEW_FUNCTION_KEY;
}

function getImageGenerationBillingFeature(functionKey: string) {
  if (
    functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY ||
    functionKey === CHARACTER_THREE_VIEW_FUNCTION_KEY
  ) {
    return "multi-view" as const;
  }
  if (functionKey === "image-repaint") {
    return "repaint" as const;
  }
  return undefined;
}

function isWideImageGenerationFunction(functionKey: string) {
  return (
    functionKey === STORY_BEAT_GRID_FUNCTION_KEY ||
    functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY ||
    functionKey === CONTINUOUS_STORYBOARD_GRID_FUNCTION_KEY ||
    functionKey === CINEMATIC_LIGHTING_CORRECTION_FUNCTION_KEY ||
    functionKey === CHARACTER_THREE_VIEW_FUNCTION_KEY ||
    functionKey === FRAME_PREDICTION_PLUS_3S_FUNCTION_KEY ||
    functionKey === FRAME_PREDICTION_MINUS_5S_FUNCTION_KEY
  );
}

function isOfficialImagePresetFunctionKey(functionKey: string) {
  return (
    functionKey === "character-face-three-view" ||
    functionKey === "character-design-sheet" ||
    functionKey === "scene-design-sheet" ||
    functionKey === "product-design-sheet" ||
    functionKey === STORY_BEAT_GRID_FUNCTION_KEY ||
    functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY ||
    functionKey === CONTINUOUS_STORYBOARD_GRID_FUNCTION_KEY ||
    functionKey === CINEMATIC_LIGHTING_CORRECTION_FUNCTION_KEY ||
    functionKey === CHARACTER_THREE_VIEW_FUNCTION_KEY ||
    functionKey === FRAME_PREDICTION_PLUS_3S_FUNCTION_KEY ||
    functionKey === FRAME_PREDICTION_MINUS_5S_FUNCTION_KEY
  );
}

function getPresetGridLayout(functionKey: string) {
  if (functionKey === STORY_BEAT_GRID_FUNCTION_KEY) return { columns: 2, rows: 2 };
  if (functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY) return { columns: 3, rows: 3 };
  if (functionKey === CONTINUOUS_STORYBOARD_GRID_FUNCTION_KEY) return { columns: 5, rows: 5 };
  return null;
}

function isPresetGridFunction(functionKey: string) {
  return Boolean(getPresetGridLayout(functionKey));
}

function getNodeParams(node: CloneNode | null | undefined) {
  const params = node?.draftValues?.params;
  return params && typeof params === "object" && !Array.isArray(params)
    ? (params as Record<string, unknown>)
    : {};
}

function getNodeFunctionKey(node: CloneNode | null | undefined) {
  const params = getNodeParams(node);
  return String(params.functionKey || node?.draftValues?.functionKey || "").trim();
}

function isCharacterThreeViewNode(node: CloneNode | null | undefined) {
  if (!node || node.inputType !== "image") return false;
  return (
    getNodeFunctionKey(node) === CHARACTER_THREE_VIEW_FUNCTION_KEY ||
    isCharacterThreeViewOption(node?.title)
  );
}

function getConfiguredFunction(
  config: VideoCanvasFunctionConfig,
  key: string,
): VideoCanvasFunctionDefinition {
  return config.functions[key] || defaultVideoCanvasFunctionConfig.functions[key];
}

function getDefaultFunctionPrompt(key: string) {
  return defaultVideoCanvasFunctionConfig.functions[key]?.prompt || "";
}

function getConfiguredToolType(definition: VideoCanvasFunctionDefinition) {
  if (definition.kind === "audio") return "audio";
  if (definition.kind === "video" || definition.route === "canvas-generate-video") return "video";
  if (definition.kind === "workflow") return "compose";
  if (definition.kind === "multimodal" || definition.route === "canvas-workflow-analyze" || definition.route === "canvas-prompt-tools") return "text";
  return "image";
}

function functionRequiresMedia(definition: VideoCanvasFunctionDefinition) {
  if (definition.route === "local") return false;
  if (definition.kind === "image") return false;
  if (definition.key === "text-to-video" || definition.key === "story-script") return false;
  return (
    definition.kind === "image-edit" ||
    definition.kind === "utility" ||
    definition.key.includes("frame") ||
    definition.key.includes("audio") ||
    definition.route === "canvas-generate-image" ||
    definition.route === "canvas-generate-video" ||
    definition.route === "angle-edit"
  );
}

function createConfiguredToolCatalog(config: VideoCanvasFunctionConfig): CapturedTool[] {
  return Object.values(config.functions)
    .filter((definition) => definition.enabled)
    .map((definition) => ({
      metadata: {
        config: {
          functionKey: definition.key,
          model: definition.model || "",
          prompt: definition.prompt,
          route: definition.route,
        },
        properties: {
          prompt: { default: definition.prompt, displayName: "提示词" },
          specifiedModel: {
            default: definition.model || "",
            displayName: "模型引用",
          },
        },
        route: definition.route,
      },
      modelKey: definition.model || definition.key,
      modelName: definition.label,
      modes: [definition.kind, definition.route],
      rules: functionRequiresMedia(definition) ? [{ require: ["media"] }] : [],
      scene: definition.description,
      toolKey: definition.key,
      type: getConfiguredToolType(definition),
      vendor: "视频画布配置",
    }));
}

function getToolReferenceModuleTemplates(
  tool: CapturedTool | undefined,
  definition: VideoCanvasFunctionDefinition,
): Array<{ kind: AddModuleKind; title?: string }> {
  if (!requiresMedia(tool) && !functionRequiresMedia(definition)) return [];
  if (definition.key === "video-analysis") return [{ kind: "video", title: "视频参考" }];
  if (definition.key === "audio-to-video") {
    return [
      { kind: "audio", title: "音频参考" },
      { kind: "image", title: "画面参考" },
    ];
  }
  if (definition.key === "first-last-frame-video") {
    return [
      { kind: "image", title: "首帧参考" },
      { kind: "image", title: "尾帧参考" },
    ];
  }
  if (definition.route === "canvas-generate-video" && definition.key !== "text-to-video") {
    return [{ kind: "image", title: "视频参考图" }];
  }
  return [{ kind: "image", title: "图片参考" }];
}

function getToolReferenceMediaSpec(
  template: { kind: AddModuleKind; title?: string },
  definition: VideoCanvasFunctionDefinition,
  _index: number,
): {
  action: string;
  height: number;
  mediaType: NonNullable<CloneNode["inputType"]>;
  mediaUrl: string;
  title: string;
  width: number;
} {
  const title = template.title || "素材参考";
  if (template.kind === "audio") {
    return {
      action: "AUDIO_RESOURCE",
      height: 190,
      mediaType: "audio",
      mediaUrl: "",
      title,
      width: 720,
    };
  }
  if (template.kind === "video") {
    return {
      action: "VIDEO_RESOURCE",
      height: 315,
      mediaType: "video",
      mediaUrl: "",
      title,
      width: 560,
    };
  }

  return {
    action: "IMAGE_RESOURCE",
    height: definition.key === "audio-to-video" ? 400 : 280,
    mediaType: "image",
    mediaUrl: "",
    title,
    width: definition.key === "audio-to-video" ? 720 : 420,
  };
}

function normalizeModelRef(value: unknown) {
  const model = String(value || "").trim();
  return model && model !== "auto" ? model : "";
}

function getFunctionModel(
  config: VideoCanvasFunctionConfig,
  definition: VideoCanvasFunctionDefinition,
  overrideModel?: string,
) {
  const override = normalizeModelRef(overrideModel);
  if (override) return override;
  const fallback =
    definition.kind === "video"
      ? config.defaultVideoModel
      : definition.kind === "multimodal" || definition.route === "canvas-prompt-tools"
        ? config.defaultMultimodalModel
        : config.defaultImageModel;
  return normalizeModelRef(definition.model || fallback) || undefined;
}

function getFunctionModelValue(
  config: VideoCanvasFunctionConfig,
  definition: VideoCanvasFunctionDefinition,
) {
  const fallback =
    definition.kind === "video"
      ? config.defaultVideoModel
      : definition.kind === "multimodal" || definition.route === "canvas-prompt-tools"
        ? config.defaultMultimodalModel
        : config.defaultImageModel;
  return String(definition.model || fallback || "auto").trim() || "auto";
}

function normalizeVideoGenerationMode(value: unknown): VideoGenerationMode | null {
  const mode = String(value || "").trim();
  if (
    mode === "text-to-video" ||
    mode === "first-frame" ||
    mode === "first-last-frame" ||
    mode === "reference-images"
  ) {
    return mode;
  }
  return null;
}

function normalizeVideoRatioValue(value: unknown): VideoRatio {
  const ratio = String(value || "").trim();
  if (
    ratio === "16:9" ||
    ratio === "4:3" ||
    ratio === "1:1" ||
    ratio === "3:4" ||
    ratio === "9:16" ||
    ratio === "21:9" ||
    ratio === "adaptive" ||
    ratio === "Auto"
  ) {
    return ratio === "Auto" ? "adaptive" : ratio;
  }
  return "16:9";
}

function formatVideoRatioLabel(value: unknown) {
  const ratio = normalizeVideoRatioValue(value);
  return ratio === "adaptive" ? "Auto" : ratio;
}

function normalizeVideoResolutionValue(value: unknown): VideoResolution {
  const normalized = String(value || "")
    .trim()
    .toLowerCase()
    .replace(/\s+/g, "");
  if (normalized === "480p") return "480p";
  if (normalized === "1080p" || normalized === "1k" || normalized === "4k") return "1080p";
  return "720p";
}

function assertExecutableVideoResolution(value: unknown) {
  const requested = String(value || "").trim().toLowerCase();
  if (["4k", "2160p", "2k", "1440p"].includes(requested)) {
    throw new Error("当前视频生成最高支持 1080P；更高画质请在生成后使用视频高清");
  }
}

function formatVideoResolutionLabel(value: unknown) {
  const resolution = normalizeVideoResolutionValue(value);
  return resolution === "480p" ? "480P" : resolution === "1080p" ? "1080P" : "720P";
}

function normalizeVideoDurationValue(value: unknown) {
  const matched = String(value || "").match(/(\d+)/);
  const duration = matched ? Number.parseInt(matched[1], 10) : Number(value);
  if (Number.isFinite(duration) && duration > 0) return duration;
  return 5;
}

function formatVideoDurationLabel(value: unknown) {
  return `${normalizeVideoDurationValue(value)}s`;
}

function inferVideoComposerDefaultTab(imageCount: number): VideoComposerTabKey {
  if (imageCount >= 2) return "reference-images";
  if (imageCount >= 1) return "reference-images";
  return "text-to-video";
}

function resolveVideoComposerMode(tab: VideoComposerTabKey): VideoGenerationMode {
  if (tab === "first-last-frame") return "first-last-frame";
  if (tab === "first-frame") return "first-frame";
  if (tab === "reference-images" || tab === "image-reference") return "reference-images";
  return "text-to-video";
}

function getVideoModeIcon(tab: VideoComposerTabKey): LucideIcon {
  if (tab === "text-to-video") return FileText;
  if (tab === "reference-images") return Sparkles;
  if (tab === "first-frame") return ImageIcon;
  if (tab === "first-last-frame") return Layers;
  return Wand2;
}

function getVideoFunctionKeyForMode(mode: VideoGenerationMode) {
  if (mode === "text-to-video") return "text-to-video" as const;
  if (mode === "first-last-frame") return "first-last-frame-video" as const;
  return "first-frame-video" as const;
}

function selectVideoReferenceImages(images: string[], mode: VideoGenerationMode) {
  const error = videoInputLimitError(mode, images.length);
  if (error) throw new Error(error);
  if (mode === "text-to-video") return [];
  if (mode === "first-frame") return images.slice(0, 1);
  if (mode === "first-last-frame") return images.slice(0, 2);
  return images;
}

function getCanvasModelRef(model: CanvasModelOption) {
  return String(model.modelId || model.id || "").trim();
}

function isCanvasImageModel(model: CanvasModelOption) {
  return isImageGenerationModelDescriptor({
    providerType: model.providerType,
    modelId: model.modelId,
    capabilities: model.capabilities,
    supportsImageGen: model.supportsImageGen,
  });
}

function isCanvasVideoModel(model: CanvasModelOption) {
  return isVideoModelDescriptor({
    providerType: model.providerType,
    modelId: model.modelId,
    capabilities: model.capabilities,
    supportsImageGen: model.supportsImageGen,
  });
}

function filterCanvasModelsByKind(models: CanvasModelOption[], kind: CanvasModelKind) {
  return filterCanvasModels(models, kind);
}

function getCanvasModelDisplayName(
  modelRef: string | undefined,
  models: CanvasModelOption[],
  fallback = "自动模型",
) {
  const normalized = normalizeModelRef(modelRef);
  if (!normalized) return fallback;
  const match = models.find(
    (model) => model.id === normalized || model.modelId === normalized || getCanvasModelRef(model) === normalized,
  );
  return match?.displayName || normalized;
}

type VideoCanvasBillingDisplay = {
  label: string;
  message: string;
};

function getCanvasModelOptionByRef(
  modelRef: string | undefined,
  models: CanvasModelOption[],
) {
  const normalized = normalizeModelRef(modelRef);
  if (!normalized) return null;
  return (
    models.find(
      (model) =>
        model.id === normalized ||
        model.modelId === normalized ||
        getCanvasModelRef(model) === normalized,
    ) || null
  );
}

function getVideoCanvasFallbackBillingDisplay(
  definition?: Pick<VideoCanvasFunctionDefinition, "key" | "route"> | null,
): VideoCanvasBillingDisplay {
  const copy = definition
    ? getVideoCanvasFunctionBillingCopy(definition)
    : {
        shortLabel: "按站点",
        description: "沿用站点统一模型与功能积分规则，不在视频画布单独改价。",
      };
  return {
    label: copy.shortLabel,
    message: copy.description,
  };
}

function resolveVideoCanvasBillingDisplay(params: {
  membershipSummary?: MembershipSummaryResponse;
  modelOptions?: CanvasModelOption[];
  modelRef?: string;
  modelKind?: CanvasModelKind;
  imageCount?: number;
  duration?: number | null;
  resolution?: string | null;
  billingFeature?: ImageToolCreditFeature | null;
  functionDefinition?: Pick<VideoCanvasFunctionDefinition, "key" | "route"> | null;
}): VideoCanvasBillingDisplay {
  const fallback = getVideoCanvasFallbackBillingDisplay(params.functionDefinition);
  const pointsConfig = normalizePointsSystemConfig(
    params.membershipSummary?.pointsSystemConfig || defaultPointsSystemConfig,
  );

  if (params.membershipSummary?.isHighVip) {
    return {
      label: "VIP",
      message: "当前高阶会员按站点规则免扣积分。",
    };
  }

  if (!params.membershipSummary) return fallback;

  if (pointsConfig.enabled !== true) {
    return {
      label: "免费",
      message: "当前站点未启用积分扣费。",
    };
  }

  if (params.billingFeature) {
    const featureCost = getImageToolCreditCost(pointsConfig, params.billingFeature);
    if (featureCost > 0) {
      return {
        label: String(featureCost),
        message: `当前功能按全站积分设置消耗 ${featureCost} 积分。`,
      };
    }
    return fallback;
  }

  const matchedModel = getCanvasModelOptionByRef(
    params.modelRef,
    params.modelOptions || [],
  );
  if (!matchedModel?.imageGenConfig) {
    return fallback;
  }

  if (params.modelKind === "video") {
    const videoCost = getGenerationCreditCostFromImageGenConfig(
      matchedModel.imageGenConfig,
      "video",
      {
        duration: params.duration,
        resolution: params.resolution,
      },
    );
    if (videoCost > 0) {
      return {
        label: String(videoCost),
        message: `当前视频模型按站点配置预计消耗 ${videoCost} 积分。`,
      };
    }
    return fallback;
  }

  if (params.modelKind === "image" || params.modelKind === "image-edit") {
    const unitCost = getImageCreditCostFromConfig(matchedModel.imageGenConfig);
    if (unitCost > 0) {
      const safeImageCount = Math.max(
        1,
        Math.round(Number(params.imageCount || 1)),
      );
      const totalCost = unitCost * safeImageCount;
      return {
        label: String(unitCost),
        message:
          safeImageCount > 1
            ? `当前图片模型按站点配置 ${unitCost} 积分/张，本次共 ${totalCost} 积分。`
            : `当前图片模型按站点配置消耗 ${unitCost} 积分/张。`,
      };
    }
  }

  return fallback;
}

function composeFunctionPrompt(
  definition: VideoCanvasFunctionDefinition,
  userPrompt?: string,
) {
  const base = definition.prompt.trim();
  const extra = String(userPrompt || "").trim();
  if (!base) return extra;
  if (!extra || extra === base) return base;
  return `${base}\n\n用户补充：${extra}`;
}

function composeConfiguredImagePresetPrompt(
  definition: VideoCanvasFunctionDefinition,
  userPrompt?: string,
) {
  const base = definition.prompt.trim() || getDefaultFunctionPrompt(definition.key);
  const extra = String(userPrompt || "").trim();
  const extraFunctionKey = getOfficialImagePresetFunctionKey(extra);
  if (!extra || extra === base || extra === definition.label || extraFunctionKey === definition.key) return base;
  if (!base) return extra;
  return `${base}\n\n用户补充：${extra}`;
}

function composeMultiViewNineGridPrompt(
  definition: VideoCanvasFunctionDefinition,
  option?: string,
) {
  return composeConfiguredImagePresetPrompt(definition, option);
}

function getFirstGeneratedImageUrl(
  response: Awaited<ReturnType<typeof imageGenerationService.generateImage>>,
) {
  const first = response.data?.images?.[0];
  return first?.originalUrl || first?.thumbnailUrl || "";
}

function wait(ms: number) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

function createEqualGridRects(rows: number, columns: number): GridCropRect[] {
  return Array.from({ length: rows * columns }).map((_, index) => {
    const column = index % columns;
    const row = Math.floor(index / columns);
    return {
      height: 1 / rows,
      width: 1 / columns,
      x: column / columns,
      y: row / rows,
    };
  });
}

function normalizeGridRect(value: unknown, fallback: GridCropRect): GridCropRect {
  if (!value || typeof value !== "object") return fallback;
  const record = value as Record<string, unknown>;
  return {
    height: Math.min(1, Math.max(0.02, Number(record.height ?? fallback.height))),
    width: Math.min(1, Math.max(0.02, Number(record.width ?? fallback.width))),
    x: Math.min(0.98, Math.max(0, Number(record.x ?? fallback.x))),
    y: Math.min(0.98, Math.max(0, Number(record.y ?? fallback.y))),
  };
}

function normalizeGridSplitState(value: unknown): GridSplitState | null {
  if (!value || typeof value !== "object") return null;
  const record = value as Record<string, unknown>;
  const rows = Math.max(1, Math.min(5, Math.round(Number(record.rows || 1))));
  const columns = Math.max(1, Math.min(5, Math.round(Number(record.columns || 1))));
  const cellCount = rows * columns;
  const fallbackRects = createEqualGridRects(rows, columns);
  const rawRects = Array.isArray(record.rects) ? record.rects.slice(0, cellCount) : [];
  const rects = Array.from({ length: cellCount }).map((_, index) =>
    normalizeGridRect(rawRects[index], fallbackRects[index] || fallbackRects[0])
  );
  const selectedIndices = Array.from(
    new Set(
      (Array.isArray(record.selectedIndices) ? record.selectedIndices : [])
        .map((item) => Math.round(Number(item)))
        .filter((index) => Number.isFinite(index) && index >= 0 && index < cellCount)
    )
  ).sort((left, right) => left - right);

  return {
    columns,
    detectedDivider: Boolean(record.detectedDivider),
    rects,
    rows,
    selectedIndices,
    sourceMode: String(record.sourceMode || "uniform-grid"),
  };
}

function getNodeGridSplitState(node: CloneNode | null | undefined) {
  return normalizeGridSplitState(node?.draftValues?.gridSplit);
}

function normalizeLocalEditRegion(value: unknown, index: number): LocalEditRegion | null {
  if (!value || typeof value !== "object") return null;
  const record = value as Record<string, unknown>;
  const rawRect = record.rect && typeof record.rect === "object" ? (record.rect as Record<string, unknown>) : null;
  if (!rawRect) return null;
  const width = Math.min(1, Math.max(0.001, Number(rawRect.width || 0)));
  const height = Math.min(1, Math.max(0.001, Number(rawRect.height || 0)));
  const x = Math.min(1 - width, Math.max(0, Number(rawRect.x || 0)));
  const y = Math.min(1 - height, Math.max(0, Number(rawRect.y || 0)));
  return {
    color:
      typeof record.color === "string" && /^#[0-9a-f]{6}$/i.test(record.color)
        ? record.color
        : LOCAL_EDIT_COLORS[index % LOCAL_EDIT_COLORS.length],
    createdAt: Number(record.createdAt || Date.now()),
    id: String(record.id || makeId("local-edit-region")),
    index: index + 1,
    prompt: typeof record.prompt === "string" ? record.prompt : "",
    rect: { height, width, x, y },
  };
}

function getNodeLocalEditRegions(node: CloneNode | null | undefined) {
  const regions = Array.isArray(node?.draftValues?.localEditRegions)
    ? node?.draftValues?.localEditRegions
    : [];
  return regions
    .slice(0, LOCAL_EDIT_MAX_REGIONS)
    .map((region, index) => normalizeLocalEditRegion(region, index))
    .filter((region): region is LocalEditRegion => Boolean(region))
    .map((region, index) => ({ ...region, index: index + 1 }));
}

function withReindexedLocalEditRegions(regions: LocalEditRegion[]) {
  return regions
    .slice(0, LOCAL_EDIT_MAX_REGIONS)
    .map((region, index) => ({
      ...region,
      index: index + 1,
      color: region.color || LOCAL_EDIT_COLORS[index % LOCAL_EDIT_COLORS.length],
    }));
}

function clearGridSplitDraftValues(draftValues: Record<string, unknown> | undefined) {
  const nextDraftValues = { ...(draftValues || {}) };
  delete nextDraftValues.gridSplit;
  return nextDraftValues;
}

function buildGridRectsFromLines({
  columns,
  height,
  horizontalLines,
  rows,
  verticalLines,
  width,
}: {
  columns: number;
  height: number;
  horizontalLines: number[];
  rows: number;
  verticalLines: number[];
  width: number;
}): GridCropRect[] {
  const lineMargin = Math.max(1, Math.round(Math.min(width, height) * 0.0015));
  const xBounds = [0, ...verticalLines, width];
  const yBounds = [0, ...horizontalLines, height];
  const rects: GridCropRect[] = [];

  for (let row = 0; row < rows; row += 1) {
    for (let column = 0; column < columns; column += 1) {
      const left = column === 0 ? xBounds[column] : xBounds[column] + lineMargin;
      const right = column === columns - 1 ? xBounds[column + 1] : xBounds[column + 1] - lineMargin;
      const top = row === 0 ? yBounds[row] : yBounds[row] + lineMargin;
      const bottom = row === rows - 1 ? yBounds[row + 1] : yBounds[row + 1] - lineMargin;
      rects.push({
        height: Math.max((bottom - top) / height, 0.02),
        width: Math.max((right - left) / width, 0.02),
        x: Math.max(left / width, 0),
        y: Math.max(top / height, 0),
      });
    }
  }

  return rects;
}

function getLineScore(data: Uint8ClampedArray, width: number, height: number, axis: "x" | "y", index: number) {
  const limit = axis === "x" ? height : width;
  const step = Math.max(1, Math.floor(limit / 260));
  let score = 0;
  let samples = 0;

  for (let point = 0; point < limit; point += step) {
    const x = axis === "x" ? index : point;
    const y = axis === "x" ? point : index;
    const offset = (y * width + x) * 4;
    const alpha = data[offset + 3] / 255;
    if (alpha < 0.1) continue;
    const luminance = data[offset] * 0.299 + data[offset + 1] * 0.587 + data[offset + 2] * 0.114;
    const darkScore = luminance < 96 ? ((96 - luminance) / 96) * alpha : 0;
    const lightScore = luminance > 220 ? ((luminance - 220) / 35) * alpha : 0;
    score += Math.max(darkScore, lightScore);
    samples += 1;
  }

  return samples > 0 ? score / samples : 0;
}

function findGridDividerLines(
  data: Uint8ClampedArray,
  width: number,
  height: number,
  count: number,
  axis: "x" | "y"
) {
  const size = axis === "x" ? width : height;
  const otherSize = axis === "x" ? height : width;
  const lines: number[] = [];
  let detectedCount = 0;

  for (let divider = 1; divider < count; divider += 1) {
    const expected = (divider / count) * size;
    const searchRadius = Math.max(8, Math.round(size * 0.08));
    const from = Math.max(1, Math.round(expected - searchRadius));
    const to = Math.min(size - 2, Math.round(expected + searchRadius));
    let bestIndex = Math.round(expected);
    let bestScore = 0;

    for (let index = from; index <= to; index += 1) {
      const score =
        getLineScore(data, width, height, axis, index - 1) * 0.25 +
        getLineScore(data, width, height, axis, index) * 0.5 +
        getLineScore(data, width, height, axis, index + 1) * 0.25;
      if (score > bestScore) {
        bestScore = score;
        bestIndex = index;
      }
    }

    const minimumScore = otherSize > 0 ? 0.18 : 0.22;
    if (bestScore >= minimumScore) {
      detectedCount += 1;
      lines.push(bestIndex);
    } else {
      lines.push(Math.round(expected));
    }
  }

  return {
    detected: detectedCount === Math.max(0, count - 1),
    lines,
  };
}

async function detectGridSplitFromImage(url: string, rows: number, columns: number): Promise<GridSplitSpec | null> {
  if (!url || typeof window === "undefined") return null;

  try {
    const image = await new Promise<HTMLImageElement>((resolve, reject) => {
      const nextImage = new Image();
      if (!url.startsWith("blob:") && !url.startsWith("data:")) {
        nextImage.crossOrigin = "anonymous";
        nextImage.referrerPolicy = "no-referrer";
      }
      nextImage.onload = () => resolve(nextImage);
      nextImage.onerror = () => reject(new Error("image-load-failed"));
      nextImage.src = url;
    });
    const naturalWidth = image.naturalWidth || image.width;
    const naturalHeight = image.naturalHeight || image.height;
    if (!naturalWidth || !naturalHeight) return null;

    const maxSide = 980;
    const scale = Math.min(1, maxSide / Math.max(naturalWidth, naturalHeight));
    const width = Math.max(1, Math.round(naturalWidth * scale));
    const height = Math.max(1, Math.round(naturalHeight * scale));
    const canvas = document.createElement("canvas");
    canvas.width = width;
    canvas.height = height;
    const context = canvas.getContext("2d", { willReadFrequently: true });
    if (!context) return null;

    context.drawImage(image, 0, 0, width, height);
    const imageData = context.getImageData(0, 0, width, height);
    const verticalResult = findGridDividerLines(imageData.data, width, height, columns, "x");
    const horizontalResult = findGridDividerLines(imageData.data, width, height, rows, "y");
    const rects = buildGridRectsFromLines({
      columns,
      height,
      horizontalLines: horizontalResult.lines,
      rows,
      verticalLines: verticalResult.lines,
      width,
    });

    return {
      columns,
      detected: verticalResult.detected && horizontalResult.detected,
      rects,
      rows,
    };
  } catch (_error) {
    return null;
  }
}

async function loadCanvasImage(url: string): Promise<HTMLImageElement> {
  return new Promise((resolve, reject) => {
    const image = new Image();
    if (!url.startsWith("blob:") && !url.startsWith("data:")) {
      image.crossOrigin = "anonymous";
      image.referrerPolicy = "no-referrer";
    }
    image.onload = () => resolve(image);
    image.onerror = () => reject(new Error("image-load-failed"));
    image.src = url;
  });
}

async function cropRectToBlobUrlSource(url: string, rect: GridCropRect): Promise<Blob | null> {
  if (typeof window === "undefined" || !url) return null;
  const image = await loadCanvasImage(url);
  const naturalWidth = image.naturalWidth || image.width;
  const naturalHeight = image.naturalHeight || image.height;
  if (!naturalWidth || !naturalHeight) return null;

  const cropX = Math.max(0, Math.floor(rect.x * naturalWidth));
  const cropY = Math.max(0, Math.floor(rect.y * naturalHeight));
  const cropWidth = Math.max(1, Math.round(rect.width * naturalWidth));
  const cropHeight = Math.max(1, Math.round(rect.height * naturalHeight));
  const canvas = document.createElement("canvas");
  canvas.width = cropWidth;
  canvas.height = cropHeight;
  const context = canvas.getContext("2d");
  if (!context) return null;

  context.drawImage(image, cropX, cropY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);

  return await new Promise<Blob | null>((resolve) => {
    canvas.toBlob((blob) => resolve(blob), "image/png", 1);
  });
}

async function createGridSplitReferenceAsset({
  index,
  nodeId,
  rect,
  sourceUrl,
}: {
  index: number;
  nodeId: string;
  rect: GridCropRect;
  sourceUrl: string;
}) {
  if (/^https?:\/\//i.test(sourceUrl)) {
    const response = await imageGenerationService.boxCutout({
      cropRect: rect,
      imageUrl: sourceUrl,
      paddingRatio: 0,
      sourceNodeId: nodeId,
    });
    if (response.success && response.data?.url) return response.data.url;
  }

  const blob = await cropRectToBlobUrlSource(sourceUrl, rect);
  if (!blob) return "";
  const file = new File([blob], `video-canvas-grid-${nodeId}-${index + 1}.png`, {
    type: blob.type || "image/png",
  });
  const upload = await imageGenerationService.uploadImage(file);
  return upload.success ? upload.data?.url || "" : "";
}

async function ensureRemoteCanvasImageUrl(sourceUrl: string, filenamePrefix: string) {
  if (/^https?:\/\//i.test(sourceUrl)) return sourceUrl;
  if (!sourceUrl || typeof window === "undefined") return "";

  const response = await fetch(sourceUrl);
  if (!response.ok) return "";
  const blob = await response.blob();
  const extension = blob.type.includes("jpeg") || blob.type.includes("jpg")
    ? "jpg"
    : blob.type.includes("webp")
      ? "webp"
      : "png";
  const file = new File([blob], `${filenamePrefix}-${Date.now()}.${extension}`, {
    type: blob.type || `image/${extension}`,
  });
  const upload = await imageGenerationService.uploadImage(file);
  return upload.success ? upload.data?.url || "" : "";
}

async function resolveNodeReferenceImages(node: CloneNode | null | undefined, limit = 12): Promise<string[]> {
  const fallbackUrl = getNodeReferenceMediaUrl(node);
  const split = getNodeGridSplitState(node);
  const sourceUrl = getNodeGridSplitSourceUrl(node);
  if (!split || split.selectedIndices.length === 0 || !sourceUrl) {
    return fallbackUrl ? [fallbackUrl] : [];
  }

  const selectedIndices = split.selectedIndices.slice(0, limit);
  const resolved = await Promise.all(
    selectedIndices.map(async (index) => {
      const rect = split.rects[index];
      if (!rect) return "";
      try {
        return await createGridSplitReferenceAsset({
          index,
          nodeId: node?.id || "grid",
          rect,
          sourceUrl,
        });
      } catch {
        return "";
      }
    })
  );

  return requireResolvedReferenceImages(resolved, selectedIndices.length);
}

function getPresetMode(node: CloneNode | null | undefined): ActiveStarterScene {
  const value = getDraftString(node, "targetPreset");
  if (
    value === "story-script" ||
    value === "character-three-view" ||
    value === "first-frame" ||
    value === "audio-to-video"
  ) {
    return value;
  }
  return null;
}

function getPresetControlMode(node: CloneNode | null | undefined): ActivePresetControlMode {
  const starterMode = getPresetMode(node);
  if (starterMode) return starterMode;
  const functionKey = resolveOfficialImagePresetFunctionKey({
    fallbackKey: getNodeFunctionKey(node),
    option: getNodeParams(node).option || node?.draftValues?.toolbarOption,
    title: node?.title,
  });
  return functionKey && isOfficialImagePresetFunctionKey(functionKey) ? functionKey : null;
}

function isOfficialImageControlNode(node: CloneNode | null | undefined): node is CloneNode {
  return !!node && !(getPresetMode(node) === "first-frame" && node.inputType === "video") && (node.kind === "media" || node.kind === "script") && !!getPresetControlMode(node);
}

function getTargetModuleKind(node: CloneNode): AddModuleKind | null {
  if (getPresetMode(node) === "first-frame" && node.inputType === "video") return "video";
  if (node.kind === "media" || getPresetMode(node)) return null;
  if (getDraftString(node, "action") === "TEXT_RESOURCE" || getDraftString(node, "scriptRole") === "resource") {
    return null;
  }
  const nodeType = getDraftString(node, "nodeType");
  if (
    nodeType === "text" ||
    nodeType === "image" ||
    nodeType === "video" ||
    nodeType === "smart-edit" ||
    nodeType === "video-clip" ||
    nodeType === "frame-analysis" ||
    nodeType === "director" ||
    nodeType === "audio" ||
    nodeType === "script-v2" ||
    nodeType === "legacy-script" ||
    nodeType === "script"
  ) {
    return nodeType === "script-v2" ? "script" : (nodeType as AddModuleKind);
  }
  return null;
}

function extractTrailingNumber(value: string | undefined) {
  const match = String(value || "").match(/(\d+)\s*$/);
  return match ? Number.parseInt(match[1], 10) : null;
}

function inferLegacyTargetModuleKind(node: CloneNode): AddModuleKind | null {
  // Explicit upload/input placeholders are resources, not legacy generator nodes.
  // Reclassifying them removes the file picker after the first save + reload.
  if (node.kind === "media" || node.kind === "input" || getPresetMode(node)) return null;
  const action = getDraftString(node, "action");
  if (action.endsWith("_RESOURCE") || action === "TEXT_RESOURCE") return null;

  const nodeType = getDraftString(node, "nodeType");
  if (nodeType === "text" || nodeType === "image" || nodeType === "video" || nodeType === "director" || nodeType === "audio" || nodeType === "script") {
    return nodeType;
  }
  if (nodeType === "script-v2") return "script";
  if (nodeType === "legacy-script") return "legacy-script";
  if (nodeType === "video-clip" || nodeType === "video_clip" || nodeType === "videoGroup") return "video-clip";
  if (nodeType === "director-console-3d" || nodeType === "director_console_3d") return "director";

  const haystack = `${node.title} ${node.subtitle || ""} ${node.kind} ${node.inputType || ""} ${action}`.toLowerCase();
  if (/脚本|script/.test(haystack)) return "script";
  if (/视频合成|视频组|video-clip|video_clip|video_group|clip/.test(haystack)) return "video-clip";
  if (/导演台|director|console_3d|console-3d/.test(haystack)) return "director";
  if (/音频|audio/.test(haystack)) return "audio";
  if (/图片|image/.test(haystack)) return "image";
  if (/视频|video/.test(haystack)) return "video";
  if (/文本|文字|text/.test(haystack)) return "text";
  return null;
}

function normalizeTextResourceNode(node: CloneNode, fallbackIndex: number): CloneNode {
  const shouldUseOfficialSize =
    Boolean(node.draftValues?.manualEditing) || /^(文本|文本生成|文本节点)/.test(String(node.title || ""));
  const title = node.title && !/^(文本|文本生成|文本节点)(\s*\d+)?$/.test(node.title)
    ? node.title
    : `文本节点 ${extractTrailingNumber(node.title) || fallbackIndex}`;
  return {
    ...node,
    kind: "script",
    title,
    subtitle: "文本资源",
    inputType: "text",
    width: shouldUseOfficialSize ? OFFICIAL_TEXT_RESOURCE_WIDTH : node.width > 260 ? node.width : OFFICIAL_TEXT_RESOURCE_WIDTH,
    height: shouldUseOfficialSize ? OFFICIAL_TEXT_RESOURCE_HEIGHT : node.height > 120 ? node.height : OFFICIAL_TEXT_RESOURCE_HEIGHT,
    accent: "#f0d06b",
    draftValues: {
      ...(node.draftValues || {}),
      action: "TEXT_RESOURCE",
      content: Array.isArray(node.draftValues?.content) ? node.draftValues?.content : [],
      nodeType: "text",
      scriptRole: "resource",
      viewMode: undefined,
    },
  };
}

function shouldResetTargetModuleTitle(title: string | undefined, kind: AddModuleKind) {
  const value = String(title || "").trim();
  if (!value) return true;
  const legacyTitlePattern =
    /^(文本|文本生成|文本节点|图片|图片生成|图片节点|视频|视频生成|视频节点|音频|音频生成|音频节点|脚本|脚本生成|脚本生成器|视频合成|视频合成节点|逐帧拉片|导演台)(\s*\d+)?$/;
  if (!legacyTitlePattern.test(value)) return false;
  if (kind === "frame-analysis") return value !== "逐帧拉片";
  if (kind === "video-clip") return !/^视频合成\s*\d+$/.test(value);
  if (kind === "director") return !/^导演台\s*\d+$/.test(value);
  if (kind === "script") return value !== "脚本生成器";
  if (kind === "legacy-script") return value !== "脚本生成器";
  const officialPrefix =
    kind === "text"
      ? "文本节点"
      : kind === "image"
        ? "图片节点"
        : kind === "video"
        ? "视频节点"
        : kind === "audio"
          ? "音频节点"
          : "脚本";
  return !new RegExp(`^${officialPrefix}\\s*\\d+$`).test(value);
}

function normalizeTargetModuleNode(node: CloneNode, kind: AddModuleKind, fallbackIndex: number): CloneNode {
  const index = extractTrailingNumber(node.title) || fallbackIndex;
  const official = createTargetModuleNode(kind, node.x, node.y, index);
  const isOfficialShape = Math.abs(node.width - official.width) <= 2 && Math.abs(node.height - official.height) <= 2;
  const resetTitle = shouldResetTargetModuleTitle(node.title, kind);

  if (isOfficialShape && !resetTitle) return node;

  return {
    ...official,
    id: node.id,
    x: node.x,
    y: node.y,
    title: resetTitle ? official.title : node.title,
    draftValues: {
      ...(official.draftValues || {}),
      ...(node.draftValues || {}),
      nodeType: kind,
    },
  };
}

function normalizeRestoredNode(node: CloneNode, fallbackIndex: number): CloneNode {
  if (getDraftString(node, "uploadStatus") === "uploading" ||
      (node.kind === "media" && getNodeMediaUrl(node).startsWith("blob:"))) {
    return { ...node, draftValues: { ...node.draftValues, mediaUrl: "", url: [],
      uploadStatus: "failed", uploadError: "上次素材未完成上传，请重新上传文件" } };
  }
  const action = getDraftString(node, "action");
  if (action === "VIDEO_RESOURCE" && node.width === 420 && node.height === 280) {
    const sizeLabel = getDraftString(node, "outputSizeLabel").match(/(\d+)\s*[×x]\s*(\d+)/);
    const width = getDraftNumber(node, "intrinsicWidth", Number(sizeLabel?.[1] || 0));
    const height = getDraftNumber(node, "intrinsicHeight", Number(sizeLabel?.[2] || 0));
    const layout = getUploadedMediaNodeSize(width, height, "video");
    if (layout) return { ...node, ...layout };
  }
  const isCharacterThreeViewResultNode = isCharacterThreeViewNode(node);
  const isNineGridResultNode =
    !isCharacterThreeViewResultNode &&
    (action === "IMAGE_GENERATE_NINE_GRID" ||
      Boolean(node.draftValues?.nineGridComposite) ||
      (node.inputType === "image" && /多机位九宫格/.test(node.title || "")));
  if (action === "TEXT_RESOURCE" && !getPresetMode(node)) {
    return normalizeTextResourceNode(node, fallbackIndex);
  }

  if (isCharacterThreeViewResultNode) {
    return {
      ...node,
      width: OFFICIAL_NINE_GRID_WIDTH,
      height: OFFICIAL_NINE_GRID_HEIGHT,
      draftValues: {
        ...(node.draftValues || {}),
        action: "IMAGE_GENERATE",
        functionKey: CHARACTER_THREE_VIEW_FUNCTION_KEY,
        gridColumns: undefined,
        gridRows: undefined,
        nineGridCells: undefined,
        nineGridComposite: false,
        outputSizeLabel: getDraftString(node, "outputSizeLabel") || "2752 × 1536",
        params: {
          ...getNodeParams(node),
          functionKey: CHARACTER_THREE_VIEW_FUNCTION_KEY,
          mode: "character-three-view",
          prompt: getDraftString(node, "prompt") || getDefaultFunctionPrompt(CHARACTER_THREE_VIEW_FUNCTION_KEY),
        },
      },
    };
  }

  if (isNineGridResultNode) {
    const params = getNodeParams(node);
    const gridFunctionKey =
      resolveOfficialImagePresetFunctionKey({
        fallbackKey: getNodeFunctionKey(node),
        option: params.option || node.draftValues?.toolbarOption,
        title: node.title,
      }) ||
      MULTI_VIEW_NINE_GRID_FUNCTION_KEY;
    const gridLayout = getPresetGridLayout(gridFunctionKey);
    return {
      ...node,
      width: OFFICIAL_NINE_GRID_WIDTH,
      height: OFFICIAL_NINE_GRID_HEIGHT,
      draftValues: {
        ...(node.draftValues || {}),
        action: "IMAGE_GENERATE_NINE_GRID",
        functionKey: gridFunctionKey,
        gridColumns: getDraftNumber(node, "gridColumns", gridLayout?.columns || 3),
        gridPrompt: getDraftString(node, "gridPrompt") || getDefaultFunctionPrompt(gridFunctionKey),
        gridRows: getDraftNumber(node, "gridRows", gridLayout?.rows || 3),
        nineGridComposite: true,
        outputSizeLabel: getDraftString(node, "outputSizeLabel") || "2752 × 1536",
        params: {
          ...params,
          functionKey: gridFunctionKey,
          mode: "grid",
          prompt: getDraftString(node, "gridPrompt") || getDefaultFunctionPrompt(gridFunctionKey),
        },
      },
    };
  }

  const kind = getTargetModuleKind(node) || inferLegacyTargetModuleKind(node);
  if (!kind) return node;

  return normalizeTargetModuleNode(node, kind, fallbackIndex);
}

function createPresetMediaNode({
  action,
  generated = false,
  height,
  mediaType,
  mediaUrl,
  preset,
  prompt,
  title,
  width,
  x,
  y,
}: {
  action: string;
  generated?: boolean;
  height: number;
  mediaType: NonNullable<CloneNode["inputType"]>;
  mediaUrl?: string;
  preset: Exclude<ActiveStarterScene, null>;
  prompt?: string;
  title: string;
  width: number;
  x: number;
  y: number;
}): CloneNode {
  const isGenerator = /GENERATE/.test(action);
  if (isGenerator) { generated = false; mediaUrl = ""; }
  const isExample = !isGenerator && Boolean(mediaUrl);
  return {
    id: makeId(mediaType),
    kind: "media",
    title: isExample ? `${title}（示例）` : title,
    subtitle: isGenerator ? "待生成" : isExample ? "模板示例素材，可替换" : mediaType === "audio" ? "音频资源" : "素材资源",
    inputType: mediaType,
    x,
    y,
    width,
    height,
    accent: mediaType === "audio" ? "#9ee6bb" : mediaType === "video" ? "#8b96ff" : "#8790ff",
    draftValues: {
      action,
      generated,
      isExample,
      generationStatus: isGenerator ? "idle" : undefined,
      mediaType,
      mediaUrl: mediaUrl || "",
      params: prompt ? { prompt } : undefined,
      prompt: prompt || "",
      targetPreset: preset,
      url: mediaUrl ? [mediaUrl] : [],
    },
  };
}

function createPresetScriptNode({
  preset,
  role,
  title,
  x,
  y,
}: {
  preset: Exclude<ActiveStarterScene, null>;
  role: "resource" | "generator";
  title: string;
  x: number;
  y: number;
}): CloneNode {
  const isGenerator = role === "generator";
  return {
    id: makeId(isGenerator ? "script" : "text"),
    kind: "script",
    title,
    subtitle: isGenerator ? "脚本生成器" : "文本资源",
    inputType: "text",
    x,
    y,
    width: 560,
    height: 430,
    accent: "#f0d06b",
    draftValues: {
      action: isGenerator ? "SCRIPT_GENERATE" : "TEXT_RESOURCE",
      content: [],
      params: isGenerator ? { count: 1, prompt: STORY_SCRIPT_PROMPT } : undefined,
      prompt: isGenerator ? STORY_SCRIPT_PROMPT : "",
      rows: isGenerator ? [] : undefined,
      scriptRole: role,
      targetPreset: preset,
      viewMode: isGenerator ? "table" : undefined,
    },
  };
}

function makePresetEdges(leftNodes: CloneNode[], rightNode: CloneNode): CloneEdge[] {
  return leftNodes.map((node) => ({
    id: makeId("edge"),
    source: node.id,
    target: rightNode.id,
  }));
}

function createStarterWorkflow(
  starterTitle: string,
  center: { x: number; y: number }
): { nodes: CloneNode[]; edges: CloneEdge[]; selectedId: string } | null {
  if (starterTitle === "故事脚本生成") {
    const preset = "story-script";
    const left = createPresetScriptNode({
      preset,
      role: "resource",
      title: "剧本",
      x: Math.round(center.x - 610),
      y: Math.round(center.y - 320),
    });
    const right = createPresetScriptNode({
      preset,
      role: "generator",
      title: "脚本生成器",
      x: Math.round(center.x + 50),
      y: Math.round(center.y - 320),
    });
    return { nodes: [left, right], edges: makePresetEdges([left], right), selectedId: right.id };
  }

  if (starterTitle === "角色三视图") {
    const preset = CHARACTER_THREE_VIEW_FUNCTION_KEY;
    const distance = 100;
    const prompt = getDefaultFunctionPrompt(CHARACTER_THREE_VIEW_FUNCTION_KEY);
    const left = createPresetMediaNode({
      action: "IMAGE_RESOURCE",
      height: 520,
      mediaType: "image",
      preset,
      title: "上传角色图",
      width: 874,
      x: Math.round(center.x - 874 - distance / 2),
      y: Math.round(center.y - 320),
    });
    const rightBase = createPresetMediaNode({
      action: "IMAGE_GENERATE",
      height: 520,
      mediaType: "image",
      preset,
      prompt,
      title: "角色三视图生成",
      width: OFFICIAL_NINE_GRID_WIDTH,
      x: Math.round(center.x + distance / 2),
      y: Math.round(center.y - 320),
    });
    const right: CloneNode = {
      ...rightBase,
      draftValues: {
        ...(rightBase.draftValues || {}),
        functionKey: CHARACTER_THREE_VIEW_FUNCTION_KEY,
        params: {
          ...getNodeParams(rightBase),
          functionKey: CHARACTER_THREE_VIEW_FUNCTION_KEY,
          mode: "character-three-view",
          prompt,
        },
      },
    };
    return { nodes: [left, right], edges: makePresetEdges([left], right), selectedId: right.id };
  }

  if (starterTitle === "首帧图生视频" || starterTitle === "全能参考生视频") {
    const preset = "first-frame";
    const left = createPresetMediaNode({
      action: "IMAGE_RESOURCE",
      height: 430,
      mediaType: "image",
      preset,
      title: "上传首帧",
      width: 620,
      x: Math.round(center.x - 675),
      y: Math.round(center.y - 310),
    });
    const right = createPresetMediaNode({
      action: "VIDEO_GENERATE",
      generated: true,
      height: 430,
      mediaType: "video",
      preset,
      title: "视频",
      width: 560,
      x: Math.round(center.x + 55),
      y: Math.round(center.y - 310),
    });
    return { nodes: [left, right], edges: makePresetEdges([left], right), selectedId: right.id };
  }

  if (starterTitle === "音频生视频") {
    const preset = "audio-to-video";
    const leftX = Math.round(center.x - 900);
    const leftY = Math.round(center.y - 370);
    const audio = createPresetMediaNode({
      action: "AUDIO_RESOURCE",
      height: 190,
      mediaType: "audio",
      preset,
      title: "上传音频",
      width: 720,
      x: leftX,
      y: leftY,
    });
    const image = createPresetMediaNode({
      action: "IMAGE_RESOURCE",
      height: 400,
      mediaType: "image",
      preset,
      title: "上传画面参考",
      width: 720,
      x: leftX,
      y: leftY + 300,
    });
    const right = createPresetMediaNode({
      action: "VIDEO_GENERATE",
      generated: true,
      height: 430,
      mediaType: "video",
      preset,
      prompt: AUDIO_TO_VIDEO_PROMPT,
      title: "视频",
      width: 760,
      x: Math.round(center.x + 90),
      y: Math.round(center.y - 300),
    });
    return { nodes: [audio, image, right], edges: makePresetEdges([audio, image], right), selectedId: right.id };
  }

  return null;
}

export function LiblibVideoCanvasReplica({
  canvasId,
  initialProject = null,
  isLoading = false,
}: LiblibVideoCanvasReplicaProps) {
  const router = useRouter();
  const canvasRef = useRef<HTMLDivElement | null>(null);
  const uploadQueueRef = useRef<Promise<void>>(Promise.resolve());
  const fileDragDepth = useRef(0);
  const [fileDragActive, setFileDragActive] = useState(false);
  const replaceFileInputRef=useRef<HTMLInputElement|null>(null);
  const replaceFileNodeId=useRef<string|null>(null);
  const pendingFrameAnalysisUploadRef=useRef<string|null>(null);
  const homeStarterAppliedRef = useRef<string | null>(null);
  const homeStarterSavingRef = useRef(false);
  const connectionDragCleanupRef = useRef<(() => void) | null>(null);
  const connectionDragRef = useRef<EndpointConnectionDragState | null>(null);
  const assetManagerResizeCleanupRef = useRef<(() => void) | null>(null);
  const dragRef = useRef<DragState | null>(null);
  const [panMode, setPanMode] = useState(false);
  const spacePanRef = useRef(false);
  const suppressConnectionClickRef = useRef(false);
  const { data: siteBrandSettings } = useSWR<SiteBrandSettings>(
    "/api/site-settings?scope=branding",
    fetcher
  );
  const { data: videoCanvasFunctionSettings } = useSWR<{ config?: VideoCanvasFunctionConfig }>(
    "/api/video-canvas/config",
    fetcher
  );
  const { data: canvasModelsData } = useSWR<{ models?: CanvasModelOption[] }>(
    "/api/models",
    fetcher
  );
  const { data: membershipSummary } = useSWR<MembershipSummaryResponse>(
    "/api/user/membership-summary",
    fetcher
  );
  const videoCanvasFunctionConfig = useMemo(
    () => normalizeVideoCanvasFunctionConfig(videoCanvasFunctionSettings?.config),
    [videoCanvasFunctionSettings?.config]
  );
  const configuredTools = useMemo(
    () => createConfiguredToolCatalog(videoCanvasFunctionConfig),
    [videoCanvasFunctionConfig]
  );
  const canvasModelOptions = useMemo(
    () => (canvasModelsData?.models || []).filter((model) => getCanvasModelRef(model)),
    [canvasModelsData?.models]
  );
  const resolvedSiteName = useMemo(
    () => resolveSiteName(siteBrandSettings?.siteName),
    [siteBrandSettings?.siteName]
  );
  const [nodes, setNodes] = useState<CloneNode[]>([]);
  const activeGenerationSubmissions = useRef(new Set<string>());
  const [isVideoAgentOpen, setIsVideoAgentOpen] = useState(false);
  const receivedAgentNodeIds = useRef(new Set<string>());
  const [edges, setEdges] = useState<CloneEdge[]>([]);
  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
  useEffect(() => {
    setNodes((current) => {
      let changed = false;
      const next = current.map((node) => {
        if (getTargetModuleKind(node) !== "image") return node;
        const selected = node.id === selectedNodeId;
        const width = selected ? 622 : 350;
        const height = selected ? 390 : 350;
        if (node.width === width && node.height === height) return node;
        changed = true;
        return { ...node, width, height };
      });
      return changed ? next : current;
    });
  }, [nodes, selectedNodeId]);
  const [multiSelection, setMultiSelection] = useState<string[]>([]);
  const [groupTemplates,setGroupTemplates]=useState<any[]>([]);
  const {data:savedGroupTemplates}=useSWR<{templates:any[]}>("/api/canvas/group-templates",fetcher);
  const [groupSubmitting,setGroupSubmitting]=useState(false);
  const [storyboardGroupId,setStoryboardGroupId]=useState<string|null>(null);
  const [selectionRect,setSelectionRect]=useState<{x:number;y:number;width:number;height:number}|null>(null);
  const marqueeStart=useRef<{x:number;y:number}|null>(null);
  const groupResize=useRef<{id:string;x:number;y:number;width:number;height:number;startX:number;startY:number;corner:string}|null>(null);

  const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
  const [lineConnectState, setLineConnectState] = useState<LineConnectState | null>(null);
  const [referenceSelectionTargetId, setReferenceSelectionTargetId] = useState<string | null>(null);
  const [frameAnalysisSelectionTargetId, setFrameAnalysisSelectionTargetId] = useState<string | null>(null);
  const [markSelectionTargetId, setMarkSelectionTargetId] = useState<string | null>(null);
  const [markAnalysisState, setMarkAnalysisState] =
    useState<VideoCanvasMarkAnalysisState | null>(null);
  const [effectLibraryTargetNodeId, setEffectLibraryTargetNodeId] =
    useState<string | null>(null);
  const [styleLibraryTargetNodeId, setStyleLibraryTargetNodeId] =
    useState<string | null>(null);
  const [roleLibraryTargetNodeId, setRoleLibraryTargetNodeId] =
    useState<string | null>(null);
  const [videoRoleAgreementOpen, setVideoRoleAgreementOpen] = useState(false);
  const [videoRoleAgreementAccepted, setVideoRoleAgreementAccepted] = useState(false);
  const [viewport, setViewport] = useState(DEFAULT_VIEWPORT);
  const [projectTitle, setProjectTitle] = useState("未命名");
  const [draftTitle, setDraftTitle] = useState("未命名");
  const [isTitleEditing, setIsTitleEditing] = useState(false);
  const [activePanel, setActivePanel] = useState<ActivePanel>(null);
  const [tvstarDocked, setTvstarDocked] = useState(false);
  const [tvstarDockWidth, setTvstarDockWidth] = useState(360);
  useEffect(() => {
    try {
      setTvstarDocked(localStorage.getItem(`tvstar:docked:${canvasId}`) === "1");
      const savedWidth = Number(localStorage.getItem(`tvstar:dock-width:${canvasId}`));
      setTvstarDockWidth(Number.isFinite(savedWidth) && savedWidth >= 320 && savedWidth <= 560 ? savedWidth : 360);
    } catch { /* storage is optional */ }
  }, [canvasId]);
  const tvstarPanelRestoreRef = useRef<string | null>(null);
  useEffect(() => {
    tvstarPanelRestoreRef.current = canvasId;
    try {
      setActivePanel(localStorage.getItem(`tvstar:panel:${canvasId}`) === "open" ? "tvstar" : null);
    } catch { /* storage is optional */ }
  }, [canvasId]);
  useEffect(() => {
    if (tvstarPanelRestoreRef.current === canvasId) {
      tvstarPanelRestoreRef.current = null;
      return;
    }
    try { localStorage.setItem(`tvstar:panel:${canvasId}`, activePanel === "tvstar" ? "open" : "closed"); }
    catch { /* storage is optional */ }
  }, [activePanel, canvasId]);
  const [canvasViewMode, setCanvasViewMode] = useState<CanvasViewMode>("workflow");
  const [assetManagerWidth, setAssetManagerWidth] = useState(ASSET_MANAGER_DEFAULT_WIDTH);
  const [historyListDownloadPendingId, setHistoryListDownloadPendingId] = useState<string | null>(null);
  const [historyWatermarkRulesOpen, setHistoryWatermarkRulesOpen] = useState(false);
  const [isProjectLoading, setIsProjectLoading] = useState(true);
  const [projectLoadError, setProjectLoadError] = useState("");
  const [projectLoadAttempt, setProjectLoadAttempt] = useState(0);
  const initialProjectRef = useRef(initialProject);
  initialProjectRef.current = initialProject;
  const [loadedProject, setLoadedProject] = useState<{ id: string; revision: string } | null>(null);
  const generationTasks = useVideoCanvasTasks(canvasId, loadedProject, setNodes, setEdges, edges);
  const groupRuns=useCanvasGroupRuns(canvasId,generationTasks.refresh);
  const [, setShareEnabled] = useState(false);
  const [publishPublic, setPublishPublic] = useState(false);
  const [canvasCommand, setCanvasCommand] = useState<CanvasCommandState>(null);
  const [nodeContextMenu, setNodeContextMenu] = useState<NodeContextState>(null);
  const [connectionMenu, setConnectionMenu] = useState<ConnectionMenuState>(null);
  const [previewNode, setPreviewNode] = useState<CloneNode | null>(null);
  const [cancelGenerationConfirmNodeId, setCancelGenerationConfirmNodeId] = useState<string | null>(null);
  const [storyWorkflowNodeId, setStoryWorkflowNodeId] = useState<string | null>(null);
  const [storyWorkflowStep, setStoryWorkflowStep] = useState<StoryWorkflowStep>("shots");
  const [smartEditNodeId,setSmartEditNodeId]=useState<string|null>(null);
  const smartEditNode=nodes.find(node=>node.id===smartEditNodeId);
  const [directorConsoleNodeId, setDirectorConsoleNodeId] = useState<string | null>(null);
  const [directorTutorialActive, setDirectorTutorialActive] = useState(false);
  const [angleEditorNodeId, setAngleEditorNodeId] = useState<string | null>(null);
  const [inspectorNodeId, setInspectorNodeId] = useState<string | null>(null);
  const [dockOverviewOpen, setDockOverviewOpen] = useState(false);
  const [edgesHidden, setEdgesHidden] = useState(false);
  const [snapEnabled, setSnapEnabled] = useState(true);
  const [arrangePreview, setArrangePreview] = useState<{
    nodes: CloneNode[];
    viewport: { x: number; y: number; zoom: number };
  } | null>(null);
  const [activeVideoToolbarMode, setActiveVideoToolbarMode] = useState<VideoToolbarMode>(null);
  const [subtitleEraseMode, setSubtitleEraseMode] = useState<SubtitleEraseMode>("smart");
  const [subtitleEraseRegions, setSubtitleEraseRegions] = useState<Record<string, SubtitleEraseRegion[]>>({});
  const [subtitleEraseRegionHistory, setSubtitleEraseRegionHistory] =
    useState<Record<string, SubtitleEraseRegionHistory>>({});
  const clipRequestRunning = useRef(false);
  const [clipProcessingNodeId, setClipProcessingNodeId] = useState<string | null>(null);
  const [videoClipRanges, setVideoClipRanges] = useState<Record<string, VideoClipRange>>({});
  const [videoCropGenerateStates, setVideoCropGenerateStates] = useState<Record<string, VideoCropGenerateState>>({});
  const [videoAudioSplitStates, setVideoAudioSplitStates] = useState<Record<string, VideoAudioSplitState>>({});

  useEffect(() => () => assetManagerResizeCleanupRef.current?.(), []);

  useEffect(() => {
    try {
      setVideoRoleAgreementAccepted(
        window.localStorage.getItem(VIDEO_ROLE_AGREEMENT_STORAGE_KEY) === "1",
      );
    } catch {
      setVideoRoleAgreementAccepted(false);
    }
  }, []);

  const selectedNode = useMemo(
    () => nodes.find((node) => node.id === selectedNodeId) || null,
    [nodes, selectedNodeId]
  );
  const selectedVideoMediaNode = useMemo(
    () => (isVideoMediaNode(selectedNode) && Boolean(getNodeMediaUrl(selectedNode)) ? selectedNode : null),
    [selectedNode]
  );

  const contextNode = useMemo(
    () => nodes.find((node) => node.id === nodeContextMenu?.nodeId) || null,
    [nodeContextMenu?.nodeId, nodes]
  );
  const inspectorNode = useMemo(
    () => nodes.find((node) => node.id === inspectorNodeId) || null,
    [inspectorNodeId, nodes]
  );
  const directorConsoleNode = useMemo(
    () => nodes.find((node) => node.id === directorConsoleNodeId) || null,
    [directorConsoleNodeId, nodes]
  );
  const storyWorkflowNode = useMemo(
    () => nodes.find((node) => node.id === storyWorkflowNodeId) || null,
    [nodes, storyWorkflowNodeId]
  );

  useEffect(() => {
    if (!directorTutorialActive) return;
    const handleEscape = (event: KeyboardEvent) => {
      if (event.key !== "Escape") return;
      event.preventDefault();
      setDirectorTutorialActive(false);
    };

    window.addEventListener("keydown", handleEscape);
    return () => window.removeEventListener("keydown", handleEscape);
  }, [directorTutorialActive]);

  const connectionNode = useMemo(
    () => nodes.find((node) => node.id === connectionMenu?.nodeId) || null,
    [connectionMenu?.nodeId, nodes]
  );

  const angleEditorNode = useMemo(
    () => nodes.find((node) => node.id === angleEditorNodeId) || null,
    [angleEditorNodeId, nodes]
  );

  useEffect(() => {
    setActiveVideoToolbarMode(null);
    setSubtitleEraseMode("smart");
  }, [selectedVideoMediaNode?.id]);

  useEffect(() => {
    let active = true;
    const hydrateProject = (project: { canvasData?: unknown; title?: string | null }) => {
      const title = normalizeCanvasTitle(project.title);
      const restored = restoreNodes(project.canvasData).map(node=>getDraftString(node,"generationStatus")==="pending" && !node.draftValues?.taskRequestId && !node.draftValues?.generationTaskId && !getNodeParams(node).taskId ?
        {...node,draftValues:{...node.draftValues,generationStatus:"failed",generationError:"旧版任务连接已中断，无法自动查询。请先核实已有结果，避免重复生成。"}}:node);
      const data = project.canvasData as { viewport?: typeof DEFAULT_VIEWPORT; selectedNodeIds?: string[] } | undefined;
      setProjectTitle(title);
      setDraftTitle(title);
      setNodes(migrateLegacyGroups(restored));
      setMultiSelection([]);
      setGroupTemplates((project.canvasData as any)?.groupTemplates||[]);
      receivedAgentNodeIds.current = new Set(restored.map((node) => node.id));
      setEdges(restoreEdges(project.canvasData));
      const storedViewport = data?.viewport;
      setViewport(storedViewport && [storedViewport.x, storedViewport.y, storedViewport.zoom].every(Number.isFinite)
        ? { x: storedViewport.x, y: storedViewport.y, zoom: clampCanvasZoom(storedViewport.zoom) }
        : DEFAULT_VIEWPORT);
      setSelectedNodeId(restored.find(node => data?.selectedNodeIds?.includes(node.id))?.id || null);
    };

    async function loadProject() {
      setIsProjectLoading(true);
      setProjectLoadError("");
      setLoadedProject(null);
      try {
        if (initialProjectRef.current?.id === canvasId) hydrateProject(initialProjectRef.current);
        const response = await fetch(`/api/canvas/${encodeURIComponent(canvasId)}`, { signal: AbortSignal.timeout(45_000) });
        let result = await response.json();
        if (!active) return;
        if (response.status === 404) {
          // Only a confirmed missing project may be seeded; a failed load must never overwrite it.
          const created = await fetch(`/api/canvas/${encodeURIComponent(canvasId)}`, {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ title: "未命名", workspaceType: "video", canvasData: {
              nodes: [], edges: [], selectedNodeIds: [], viewport: DEFAULT_VIEWPORT, tool: "select",
            } }),
          });
          result = await created.json();
          if (!created.ok) throw new Error(result.error || "创建画布失败");
        } else if (!response.ok) {
          throw new Error(result.error || "加载画布失败");
        }
        if (!active) return;
        if (!result.success || !result.data?.updatedAt) throw new Error(result.error || "加载画布失败");
        hydrateProject(result.data);
        setLoadedProject({ id: canvasId, revision: String(result.data.updatedAt) });
      } catch (error) {
        if (active) setProjectLoadError(error instanceof Error && error.name === "TimeoutError"
          ? "画布加载超时，请检查网络后重试"
          : error instanceof Error ? error.message : "加载画布失败，请重试");
      } finally {
        if (active) setIsProjectLoading(false);
      }
    }
    void loadProject();
    return () => { active = false; };
  }, [canvasId, projectLoadAttempt]);

  const videoArchiveRunning = useRef(false);
  const attemptedVideoArchives = useRef(new Set<string>());
  const [videoArchiveTick, setVideoArchiveTick] = useState(0);
  useEffect(() => {
    if (!loadedProject || isProjectLoading || videoArchiveRunning.current) return;
    const target = nodes.find(node => {
      const meta = node.draftValues?.videoMeta as Record<string, unknown> | undefined;
      return getDraftString(node, "generationStatus") === "complete" && meta?.temporaryVideoUrl && ["temporary", "archiving"].includes(String(meta.storageStatus)) && !meta.archiveError &&
        getNodeMediaUrl(node) && !attemptedVideoArchives.current.has(`${node.id}:${getNodeMediaUrl(node)}`);
    });
    if (!target) return;
    const sourceUrl = getNodeMediaUrl(target);
    const metadata = target.draftValues?.videoMeta as Record<string, unknown>;
    attemptedVideoArchives.current.add(`${target.id}:${sourceUrl}`);
    videoArchiveRunning.current = true;
    const update = (url: string, meta: Record<string, unknown>) => setNodes(current => current.map(node =>
      node.id === target.id && getNodeMediaUrl(node) === sourceUrl ? { ...node, draftValues: {
        ...node.draftValues, mediaUrl: url, url: [url], videoMeta: meta,
      } } : node));
    update(sourceUrl, { ...metadata, storageStatus: "archiving" });
    void preserveGeneratedVideo(sourceUrl, metadata, async url => {
      const response = await fetch("/api/canvas/video/archive", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ url }), signal: AbortSignal.timeout(290_000) });
      const result = await response.json();
      if (!response.ok || !result.success || !result.data?.url) throw new Error("视频转存失败");
      return result.data.url;
    }).then(stored => update(stored.url, { ...stored.metadata, archiveError: stored.metadata.storageStatus === "temporary" ? "转存失败，可重试保存" : undefined }))
      .finally(() => { videoArchiveRunning.current = false; setVideoArchiveTick(value => value + 1); });
  }, [nodes, loadedProject, isProjectLoading, videoArchiveTick]);

  const canvasSnapshot = useMemo(
    () =>
      JSON.stringify({
        title: projectTitle,
        canvasData: {
          nodes: serializeNodes(nodes),
          edges: serializeEdges(edges),
          selectedNodeIds: multiSelection.length ? multiSelection : selectedNodeId ? [selectedNodeId] : [],
          groupTemplates,
          viewport,
          tool: "select",
        },
      }),
    [nodes, edges, selectedNodeId, multiSelection, groupTemplates, viewport, projectTitle],
  );
  const applyMergedSnapshot = useCallback((value: string) => {
    const merged = JSON.parse(value);
    setNodes(restoreNodes(merged.canvasData));
    setEdges(restoreEdges(merged.canvasData));
    setProjectTitle(normalizeCanvasTitle(merged.title));
    setDraftTitle(normalizeCanvasTitle(merged.title));
  }, []);
  const persistence = useVideoCanvasPersistence(
    canvasId,
    loadedProject,
    canvasSnapshot,
    applyMergedSnapshot,
  );

  const refreshVideoAgentResults = useCallback(async (projectId: string, resultNodeIds: string[]) => {
    if (projectId !== canvasId) return;
    const result = await canvasService.getProject(canvasId);
    if (!result.success || !result.data) return;
    const incoming = restoreNodes(result.data.canvasData).filter((node) => resultNodeIds.includes(node.id));
    const unseen = incoming.filter((node) => !receivedAgentNodeIds.current.has(node.id));
    for (const node of incoming) receivedAgentNodeIds.current.add(node.id);
    setNodes((current) => mergeVideoAgentResults(current.map((node) => {
      const remote = incoming.find((item) => item.id === node.id);
      return remote && remote.draftValues?.temporaryVideoUrl === node.draftValues?.mediaUrl && remote.draftValues?.mediaUrl !== node.draftValues?.mediaUrl ? { ...node, draftValues: { ...node.draftValues, mediaUrl: remote.draftValues?.mediaUrl, url: remote.draftValues?.url } } : node;
    }), unseen));
    setEdges((current) => mergeVideoAgentResults(current, restoreEdges(result.data!.canvasData).filter((edge) => unseen.some((node) => node.id === edge.target))));
  }, [canvasId]);

  useEffect(() => {
    const handler = async (event: Event) => {
      const change = (event as CustomEvent<{ projectId: string; createdNodeIds?: string[]; updatedNodeIds?: string[]; deletedNodeIds?: string[]; action?: string; nodeIds?: string[]; viewportChanged?: boolean }>).detail;
      if (change?.projectId !== canvasId) return;
      const response = await canvasService.getProject(canvasId);
      if (!response.success || !response.data) return;
      const remote = restoreNodes(response.data.canvasData);
      const changed = new Set([...(change.createdNodeIds || []), ...(change.updatedNodeIds || [])]);
      const deleted = new Set(change.deletedNodeIds || []);
      setNodes((current) => mergeVideoAgentResults(current.filter((node) => !deleted.has(node.id)).map((node) => changed.has(node.id) ? remote.find((item) => item.id === node.id) || node : node), remote.filter((node) => changed.has(node.id))));
      setEdges((current) => {
        const kept = current.filter((edge) => !deleted.has(edge.source) && !deleted.has(edge.target) && !(change.action === "disconnect" && edge.source === change.nodeIds?.[0] && edge.target === change.nodeIds?.[1]));
        return change.action === "connect" ? mergeVideoAgentResults(kept, restoreEdges(response.data!.canvasData).filter((edge) => edge.source === change.nodeIds?.[0] && edge.target === change.nodeIds?.[1])) : kept;
      });
      if (change.viewportChanged && response.data.canvasData?.viewport) setViewport(response.data.canvasData.viewport);
    };
    window.addEventListener("video-canvas-agent-mutation", handler);
    return () => window.removeEventListener("video-canvas-agent-mutation", handler);
  }, [canvasId]);

  const saveBeforeVideoAgent = useCallback(async () => {
    const statusResponse = await fetch(`/api/canvas/agent-runs?${new URLSearchParams({ chatId: canvasId, projectId: canvasId })}`, { cache: "no-store" });
    if (statusResponse.ok && (await statusResponse.json()).run?.status === "running") throw new Error("当前视频任务还在执行，请使用补充要求。");
    const remote = await canvasService.getProject(canvasId);
    if (!remote.success || !remote.data) throw new Error("无法读取视频画布，请稍后重试");
    const remoteNodes = restoreNodes(remote.data.canvasData);
    const unseen = remoteNodes.filter((node) => node.draftValues?.canvasAgentRunId && !receivedAgentNodeIds.current.has(node.id));
    const syncedNodes = nodes.map((node) => {
      const archived = remoteNodes.find((item) => item.id === node.id && item.draftValues?.temporaryVideoUrl === node.draftValues?.mediaUrl);
      return archived ? { ...node, draftValues: { ...node.draftValues, mediaUrl: archived.draftValues?.mediaUrl, url: archived.draftValues?.url, temporaryVideoUrl: archived.draftValues?.temporaryVideoUrl } } : node;
    });
    const mergedNodes = mergeVideoAgentResults(syncedNodes, unseen);
    const mergedEdges = mergeVideoAgentResults(edges, restoreEdges(remote.data.canvasData).filter((edge) => unseen.some((node) => node.id === edge.target)));
    const response = await fetch("/api/canvas/video-agent", {
      method: "POST", headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ projectId: canvasId, baseRevision: remote.data.updatedAt, canvasData: {
        nodes: serializeNodes(mergedNodes), edges: serializeEdges(mergedEdges),
        selectedNodeIds: selectedNodeId ? [selectedNodeId] : [], viewport, tool: "select",
      } }),
    });
    const result = await response.json();
    if (!response.ok) throw new Error(result.error || "画布保存失败，请稍后重试");
    if (result.success) { setNodes(mergedNodes); setEdges(mergedEdges); for (const node of unseen) receivedAgentNodeIds.current.add(node.id); }
    if (!result.success) throw new Error(result.error || "画布保存失败，请稍后重试");
  }, [canvasId, nodes, edges, selectedNodeId, viewport]);

  const commitTitle = useCallback(() => {
    const nextTitle = draftTitle.trim() || "未命名";
    setProjectTitle(nextTitle);
    setDraftTitle(nextTitle);
    setIsTitleEditing(false);
  }, [draftTitle]);

  const addNodes = useCallback((nextNodes: CloneNode[], nextEdges: CloneEdge[]) => {
    setNodes((current) => [...current, ...nextNodes]);
    setEdges((current) => [...current, ...nextEdges]);
    setSelectedEdgeId(null);
    const last = nextNodes[nextNodes.length - 1];
    if (last) setSelectedNodeId(last.id);
  }, []);

  const sendDirectorSnapshotsToCanvas = useCallback(
    (directorNode: CloneNode, snapshots: DirectorSnapshot[]) => {
      if (snapshots.length === 0) return;

      const nextNodes = snapshots.map((snapshot, index) => {
        const created = createMediaResourceNode({
          action: "DIRECTOR_CAMERA_SNAPSHOT",
          height: Math.round(350 * snapshot.height / snapshot.width),
          mediaType: "image",
          mediaUrl: snapshot.url,
          title: `${directorNode.title} ${snapshot.title}`,
          width: 350,
          x: Math.round(directorNode.x + DIRECTOR_CAMERA_SNAPSHOT_NODE_OFFSET_X * (index + 1)),
          y: directorNode.y,
        });

        return {
          ...created,
          draftValues: {
            ...(created.draftValues || {}),
            generated: true,
            sourceCameraSnapshotId: snapshot.id,
            sourceCameraSnapshotTitle: snapshot.title,
            sourceDirectorNodeId: directorNode.id,
          },
        };
      });
      const nextEdges = nextNodes.map((snapshotNode) => ({
        id: makeId("edge"),
        source: directorNode.id,
        target: snapshotNode.id,
      }));

      addNodes(nextNodes, nextEdges);
      setSelectedNodeId(directorNode.id);
    },
    [addNodes]
  );


  const removeGenerationNode = useCallback(async (nodeId: string) => {
    const node=nodes.find(item=>item.id===nodeId);
    try {await generationTasks.dismiss(nodeId,getDraftString(node,"generationTaskId"));}catch(error){toast.error(error instanceof Error?error.message:"移除失败");return;}
    setNodes((current) => current.some(n=>n.id===nodeId&&isCanvasGroup(n))?ungroupCanvasNodes(current,nodeId):current.filter((node) => node.id !== nodeId));
    setEdges((current) => current.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));
    setSelectedNodeId((current) => (current === nodeId ? null : current));
    setSelectedEdgeId(null);
  }, [nodes,generationTasks.dismiss]);

  const cancelGenerationNode = useCallback((nodeId: string) => {
    const node = nodes.find((item) => item.id === nodeId);
    if (node && getDraftString(node, "generationStatus") === "pending") {
      setCancelGenerationConfirmNodeId(nodeId);
      return;
    }
    removeGenerationNode(nodeId);
  }, [nodes, removeGenerationNode]);

  useEffect(() => {
    if (!cancelGenerationConfirmNodeId) return;
    const node = nodes.find((item) => item.id === cancelGenerationConfirmNodeId);
    if (!node || getDraftString(node, "generationStatus") !== "pending") {
      setCancelGenerationConfirmNodeId(null);
    }
  }, [cancelGenerationConfirmNodeId, nodes]);

  const addWorkflowPreset = useCallback(
    (workflow: WorkflowPreset, index = 0) => {
      const title = String(workflow.name || workflow.title || "工具箱预设");
      const group = createToolboxTemplateGroupNode(title);
      const reference = createMediaResourceNode({
        action: "IMAGE_RESOURCE",
        height: 525,
        mediaType: "image",
        mediaUrl: workflow.cover || "",
        title: "参考图",
        width: 350,
        x: TOOLBOX_TEMPLATE_GROUP_FRAME.x + 40,
        y: TOOLBOX_TEMPLATE_GROUP_FRAME.y + 40,
      });
      const prompt = createTextResourceNode({
        content:
          workflow.description ||
          "Cinematic orbit shot. The camera starts from the front and smoothly pans in a large arc around the subject, keeping expressive eye contact and a playful rhythm.",
        height: 200,
        title: "提示词",
        width: 350,
        x: TOOLBOX_TEMPLATE_GROUP_FRAME.x + 525,
        y: TOOLBOX_TEMPLATE_GROUP_FRAME.y + 45,
      });
      const result = createMediaResourceNode({
        action: "VIDEO_GENERATE",
        height: 525,
        mediaType: "video",
        mediaUrl: "",
        prompt: workflow.description || `${title} 预设工作流`,
        title: "成品",
        width: 350,
        x: TOOLBOX_TEMPLATE_GROUP_FRAME.x + 1104,
        y: TOOLBOX_TEMPLATE_GROUP_FRAME.y + 93,
      });
      const presetNode: CloneNode = {
        ...result,
        subtitle: "工具箱工作流",
        draftValues: {
          ...(result.draftValues || {}),
          generated: false,
          params: {
            prompt: workflow.description || `${title} 预设工作流`,
            presetId: workflow.uuid || workflow.id || "",
            presetName: title,
            sourceNodeId: reference.id,
            templateAuthor: (workflow as ToolboxTemplatePreset).author || "",
            templateCategory: (workflow as ToolboxTemplatePreset).category || "",
            templateKey: (workflow as ToolboxTemplatePreset).templateKey || "",
            templateSteps: (workflow as ToolboxTemplatePreset).steps || [],
          },
          sourceNodeId: reference.id,
          templateAuthor: (workflow as ToolboxTemplatePreset).author || "",
          templateCategory: (workflow as ToolboxTemplatePreset).category || "",
          templateKey: (workflow as ToolboxTemplatePreset).templateKey || "",
          workflow,
        },
      };
      addNodes(
        [{...group,draftValues:{...group.draftValues,groupVersion:1}}, ...[reference,prompt,presetNode].map(n=>({...n,draftValues:{...n.draftValues,parentGroupId:group.id}}))],
        [
          { id: makeId("edge"), source: reference.id, target: prompt.id },
          { id: makeId("edge"), source: prompt.id, target: presetNode.id },
          { id: makeId("edge"), source: reference.id, target: presetNode.id },
        ]
      );
      setViewport(TOOLBOX_TEMPLATE_VIEWPORT);
      setSelectedNodeId(group.id);
      setSelectedEdgeId(null);
      setActivePanel(null);
      setConnectionMenu(null);
    },
    [addNodes]
  );

  const addConfiguredTool = useCallback((tool: CapturedTool, index = 0) => {
    const node = createToolNode(tool, 360 + (index % 4) * 36, 300 + (index % 4) * 24);
    addNodes([node], []);
    setInspectorNodeId(node.id);
    setActivePanel(null);
    setConnectionMenu(null);
    toast.success(`已添加「${getToolLabel(tool)}」工具`);
  }, [addNodes]);

  const runConfiguredToolNode = useCallback(
    async (nodeId: string) => {
      const node = nodes.find((item) => item.id === nodeId);
      const tool = node?.tool;
      if (!node || !tool) {
        toast.error("当前节点不是可执行工具");
        return;
      }

      const functionKey = getDraftString(node, "functionKey") || getToolFunctionKey(tool);
      const definition = getConfiguredFunction(videoCanvasFunctionConfig, functionKey);
      if (!functionKey || !definition?.key) {
        toast.error("未找到该工具的功能配置");
        return;
      }
      if (!videoCanvasFunctionConfig.enabled || !definition.enabled) {
        toast.error("视频画布功能未启用，请先在配置中开启");
        return;
      }

      const route = getDraftString(node, "route") || getToolRoute(tool) || definition.route;
      const promptInput = getDraftString(node, "prompt") || definition.prompt || node.title;
      const modelOverride = getDraftString(node, "specifiedModel") || getDraftString(node, "model");
      const incomingNodes = readyCanvasInputs(nodes, edges, nodeId);
      if (!incomingNodes) return;
      const connectedPrompt = withConnectedText(promptInput, incomingNodes);
      const uniqueUrls = (items: string[]) =>
        Array.from(new Set(items.map((item) => item.trim()).filter(Boolean))).slice(0, 12);
      const imageReferenceLists = await Promise.all(
        incomingNodes
          .filter((item) => item.inputType === "image")
          .map((item) => resolveNodeReferenceImages(item))
      );
      const imageUrls = connectedImageUrls(imageReferenceLists);
      const videoUrls = uniqueUrls(
        incomingNodes
          .filter((item) => item.inputType === "video")
          .map((item) => getNodeReferenceMediaUrl(item))
      );
      const audioUrls = uniqueUrls(
        incomingNodes
          .filter((item) => item.inputType === "audio")
          .map((item) => getNodeReferenceMediaUrl(item))
      );
      if (functionKey === "audio-to-video" && !audioUrls.length) { toast.error("音频生视频需要连接音频素材"); return; }
      const needsMedia = requiresMedia(tool) || functionRequiresMedia(definition);
      if (needsMedia && imageUrls.length === 0 && videoUrls.length === 0 && audioUrls.length === 0) {
        toast.error(`请先为「${node.title}」连接图片、视频或音频素材`);
        return;
      }

      if (route === "local") {
        toast.info(`${definition.label || node.title}属于本地画布操作，请在对应图片工具栏中使用`);
        return;
      }

      if (route === "angle-edit") {
        toast.info("多角度编辑器需要先选中图片素材，再从图片工具栏打开");
        return;
      }

      if (route === "canvas-workflow-analyze" || definition.kind === "multimodal") {
        if (functionKey === "video-analysis" && videoUrls.length === 0) {
          toast.error("视频解析需要先连接视频素材");
          return;
        }
        if (functionKey === "image-to-prompt" && imageUrls.length === 0) {
          toast.error("图片反推提示词需要先连接图片素材");
          return;
        }
        const finalPrompt = composeFunctionPrompt(definition, connectedPrompt);
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "text",
                  subtitle: "生成中",
                  width: Math.max(item.width, 260),
                  height: Math.max(item.height, 180),
                  draftValues: {
                    ...(item.draftValues || {}),
                    generated: false,
                    generationError: undefined,
                    generationProgress: 2,
                    generationStatus: "pending",
                    params: {
                      ...getNodeParams(item),
                      functionKey,
                      imageUrls,
                      prompt: finalPrompt,
                      route,
                      videoUrls,
                    },
                    prompt: finalPrompt,
                  },
                }
              : item
          )
        );
        try {await generationTasks.submit({...node,kind:"text",draftValues:{...node.draftValues,prompt:finalPrompt,params:{...getNodeParams(node),functionKey,route,prompt:finalPrompt}}},"analysis",{
            imageUrls,
            mode: functionKey === "story-script" ? "story-script" : functionKey === "image-to-prompt" ? "image-to-prompt" : "video-analysis",
            nodeTitle: node.title,
            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
            prompt: finalPrompt,
            videoUrls,
          });} catch (error) {
          setNodes((current) =>
            current.map((item) =>
              item.id === nodeId
                ? {
                    ...item,
                    subtitle: "生成失败",
                    draftValues: {
                      ...(item.draftValues || {}),
                      generationError: error instanceof Error ? error.message : `${definition.label}生成失败`,
                      generationStatus: "failed",
                    },
                  }
                : item
            )
          );
          toast.error(error instanceof Error ? error.message : `${definition.label}生成失败`);
        }
        return;
      }

      if (route === "canvas-generate-video" || definition.kind === "video") {
        if (functionKey === "audio-to-video" && imageUrls.length === 0) {
          toast.error("音频生视频当前需要同时连接一张参考图");
          return;
        }
        const requestedMode =
          normalizeVideoGenerationMode(getDraftString(node, "mode")) ||
          (functionKey === "text-to-video"
            ? "text-to-video"
            : functionKey === "first-last-frame-video"
              ? "first-last-frame"
              : imageUrls.length >= 2
                ? "first-last-frame"
                : imageUrls.length >= 1
                  ? "first-frame"
                  : "text-to-video");
        const referenceImages = selectVideoReferenceImages(imageUrls, requestedMode);
        if (requestedMode === "first-frame" && referenceImages.length < 1) {
          toast.error("图生视频至少需要 1 张参考图");
          return;
        }
        if (requestedMode === "first-last-frame" && referenceImages.length < 2) {
          toast.error("首尾帧视频至少需要 2 张参考图");
          return;
        }
        const finalPrompt = composeFunctionPrompt(definition, connectedPrompt);
        const previewUrl = referenceImages[0] || "";
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "media",
                  inputType: "video",
                  subtitle: "生成中",
                  width: Math.max(item.width, 560),
                  height: Math.max(item.height, 315),
                  draftValues: {
                    ...(item.draftValues || {}),
                    action: "VIDEO_GENERATE",
                    generated: false,
                    generationError: undefined,
                    generationProgress: 2,
                    generationStatus: "pending",
                    mediaType: "video",
                    mediaUrl: "",
                    nodeType: "video",
                    params: {
                      ...getNodeParams(item),
                      functionKey,
                      mode: requestedMode,
                      prompt: finalPrompt,
                      referenceImages,
                      route,
                    },
                    poster: previewUrl,
                    prompt: finalPrompt,
                    url: [],
                  },
                }
              : item
          )
        );
        try {await generationTasks.submit({...node,kind:"media",inputType:"video",draftValues:{...node.draftValues,prompt:finalPrompt,params:{...getNodeParams(node),functionKey,route,prompt:finalPrompt}}},"video",{
            images: referenceImages,
            audioUrls: functionKey === "audio-to-video" ? audioUrls : undefined,
            mode: requestedMode,
            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
            prompt: finalPrompt,
            ratio: "16:9",
            resolution: "720p",
          });} catch (error) {
          setNodes((current) =>
            current.map((item) =>
              item.id === nodeId
                ? {
                    ...item,
                    subtitle: "生成失败",
                    draftValues: {
                      ...(item.draftValues || {}),
                      generationError: error instanceof Error ? error.message : `${definition.label}生成失败`,
                      generationStatus: "failed",
                    },
                  }
                : item
            )
          );
          toast.error(error instanceof Error ? error.message : `${definition.label}生成失败`);
        }
        return;
      }

      const sourceUrl = imageUrls[0] || getNodeReferenceMediaUrl(node);
      if (!sourceUrl) {
        toast.error(`${definition.label || node.title}需要先连接图片素材`);
        return;
      }
      const extraReferenceImages = imageUrls.filter((item) => item !== sourceUrl);
      const isWideGeneration = isWideImageGenerationFunction(functionKey);
      const gridLayout = getPresetGridLayout(functionKey);
      const finalPrompt =
        functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY
          ? composeMultiViewNineGridPrompt(definition, connectedPrompt)
          : isOfficialImagePresetFunctionKey(functionKey)
            ? composeConfiguredImagePresetPrompt(definition, connectedPrompt)
            : composeFunctionPrompt(definition, connectedPrompt);
      const resultWidth = isWideGeneration ? OFFICIAL_NINE_GRID_WIDTH : Math.max(node.width, 420);
      const resultHeight = isWideGeneration ? OFFICIAL_NINE_GRID_HEIGHT : Math.max(node.height, 280);
      setNodes((current) =>
        current.map((item) =>
          item.id === nodeId
            ? {
                ...item,
                kind: "media",
                inputType: "image",
                subtitle: "生成中",
                width: resultWidth,
                height: resultHeight,
                draftValues: {
                  ...(item.draftValues || {}),
                  action: isPresetGridFunction(functionKey) ? "IMAGE_GENERATE_NINE_GRID" : "IMAGE_GENERATE",
                  functionKey,
                  generated: false,
                  generationError: undefined,
                  generationProgress: 2,
                  generationStatus: "pending",
                  gridColumns: gridLayout?.columns,
                  gridPrompt: gridLayout ? finalPrompt : undefined,
                  gridRows: gridLayout?.rows,
                  mediaType: "image",
                  mediaUrl: "",
                  nodeType: "image",
                  outputSizeLabel: isWideGeneration ? "2752 × 1536" : item.draftValues?.outputSizeLabel,
                  params: {
                    ...getNodeParams(item),
                    functionKey,
                    prompt: finalPrompt,
                    referenceImages: [sourceUrl, ...extraReferenceImages],
                    route,
                    sourceUrl,
                  },
                  pendingLabel: "生成中",
                  prompt: finalPrompt,
                  sourceUrl,
                  url: [],
                },
              }
            : item
        )
      );
      try {

        if (route === "enhance") {await generationTasks.submit({...node,kind:"media",inputType:"image",draftValues:{...clearGridSplitDraftValues(node.draftValues),functionKey,prompt:finalPrompt,params:{...getNodeParams(node),functionKey,sourceUrl}}},"image-operation",{operation:"enhance",imageUrl:sourceUrl,prompt:finalPrompt});return;} else if (route === "extend") {await generationTasks.submit({...node,kind:"media",inputType:"image",draftValues:{...clearGridSplitDraftValues(node.draftValues),functionKey,prompt:finalPrompt,params:{...getNodeParams(node),functionKey,sourceUrl}}},"image-operation",{operation:"extend",imageUrl:sourceUrl,prompt:finalPrompt});return;} else if (route === "remove-bg") {await generationTasks.submit({...node,kind:"media",inputType:"image",draftValues:{...clearGridSplitDraftValues(node.draftValues),functionKey,prompt:finalPrompt,params:{...getNodeParams(node),functionKey,sourceUrl}}},"image-operation",{operation:"remove-bg",imageUrl:sourceUrl,prompt:finalPrompt});return;} else if (route === "canvas-generate-image" || definition.kind === "image-edit" || definition.kind === "utility") {await generationTasks.submit({...node,width:resultWidth,height:resultHeight,kind:"media",inputType:"image",draftValues:{...node.draftValues,action:isPresetGridFunction(functionKey)?"IMAGE_GENERATE_NINE_GRID":"IMAGE_GENERATE",functionKey,prompt:finalPrompt,gridRows:gridLayout?.rows,gridColumns:gridLayout?.columns,gridPrompt:gridLayout?finalPrompt:undefined,nineGridComposite:Boolean(gridLayout),params:{...getNodeParams(node),functionKey,prompt:finalPrompt,sourceUrl,referenceImages:[sourceUrl,...extraReferenceImages]}}},"image",{
            allowFailover: false,
            aspectRatio: isWideGeneration ? "16:9" : undefined,
            billingFeature: getImageGenerationBillingFeature(functionKey),
            imageCount: 1,
            model: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
            prompt: finalPrompt,
            promptExtend: !isWideGeneration,
            referenceImage: sourceUrl,
            referenceImages: extraReferenceImages,
          });return;} else {
          throw new Error(`${definition.label || node.title}暂未配置可执行路由`);
        }

        } catch (error) {
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  subtitle: "生成失败",
                  draftValues: {
                    ...(item.draftValues || {}),
                    generationError: error instanceof Error ? error.message : `${definition.label}生成失败`,
                    generationStatus: "failed",
                  },
                }
              : item
          )
        );
        toast.error(error instanceof Error ? error.message : `${definition.label}生成失败`);
      }
    },
    [edges, nodes, videoCanvasFunctionConfig, generationTasks.submit]
  );

  const addReferenceModulesForTool = useCallback(
    (nodeId: string) => {
      const anchor = nodes.find((item) => item.id === nodeId);
      if (!anchor?.tool) {
        toast.error("当前节点不是可添加素材的工具");
        return;
      }
      const functionKey = getDraftString(anchor, "functionKey") || getToolFunctionKey(anchor.tool);
      const definition = getConfiguredFunction(videoCanvasFunctionConfig, functionKey);
      if (!functionKey || !definition?.key) {
        toast.error("未找到该工具的功能配置");
        return;
      }
      const templates = getToolReferenceModuleTemplates(anchor.tool, definition);
      if (templates.length === 0) {
        toast.info(`${definition.label || anchor.title}不需要额外素材`);
        return;
      }

      const specs = templates.map((template, index) =>
        getToolReferenceMediaSpec(template, definition, index)
      );
      const gap = OFFICIAL_NODE_GAP;
      const totalHeight = specs.reduce((sum, spec) => sum + spec.height, 0) + Math.max(0, specs.length - 1) * 18;
      let cursorY = Math.round(anchor.y + anchor.height / 2 - totalHeight / 2);
      const nextNodes = specs.map((spec) => {
        const node = createMediaResourceNode({
          action: spec.action,
          height: spec.height,
          mediaType: spec.mediaType,
          mediaUrl: spec.mediaUrl,
          title: spec.title,
          width: spec.width,
          x: Math.round(anchor.x - spec.width - gap),
          y: cursorY,
        });
        const positionedNode = {
          ...node,
          x: Math.round(anchor.x - spec.width - gap),
          y: cursorY,
        };
        cursorY += spec.height + 18;
        return positionedNode;
      });
      const nextEdges = nextNodes.map((node) => ({
        id: makeId("edge"),
        source: node.id,
        target: anchor.id,
      }));

      addNodes(nextNodes, nextEdges);
      setSelectedNodeId(nextNodes[0]?.id || anchor.id);
      setInspectorNodeId(null);
      setActivePanel(null);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      toast.success(
        nextNodes.length === 1
          ? `已为「${anchor.title}」添加素材节点`
          : `已为「${anchor.title}」添加 ${nextNodes.length} 个素材节点`
      );
    },
    [addNodes, nodes, videoCanvasFunctionConfig]
  );

  const toCanvasPoint = useCallback(
    (clientX: number, clientY: number) => ({
      x: Math.round((clientX - viewport.x) / viewport.zoom),
      y: Math.round((clientY - viewport.y) / viewport.zoom),
    }),
    [viewport.x, viewport.y, viewport.zoom]
  );

  const addTargetModule = useCallback(
    (kind: AddModuleKind, point?: { x: number; y: number }, starterMode?: string, starterModel?: string) => {
      const viewportCenter = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2 - 90);
      const created = createTargetModuleNode(kind, 0, 0, nodes.length + 1);
      const center = point || viewportCenter;
      const node = {
        ...created,
        x: Math.round(center.x-created.width/2),
        y: Math.round(center.y-created.height/2),
        draftValues: kind === "video" && (normalizeVideoGenerationMode(starterMode) || starterModel)
          ? { ...created.draftValues, params: { ...getNodeParams(created), ...(normalizeVideoGenerationMode(starterMode) ? {mode: starterMode} : {}), ...(starterModel ? {model: starterModel} : {}) } }
          : created.draftValues,
      };
      if (!point) {
        for (let attempt=0; attempt<=nodes.length; attempt++) {
          const overlap = nodes.find(other => node.x < other.x+other.width+40 && node.x+node.width+40 > other.x && node.y < other.y+other.height+40 && node.y+node.height+40 > other.y);
          if (!overlap) break;
          node.x = Math.round(overlap.x+overlap.width+80);
        }
        setViewport(current => ({...current, x:Math.round(window.innerWidth/2-(node.x+node.width/2)*current.zoom), y:Math.round(window.innerHeight/2-90-(node.y+node.height/2)*current.zoom)}));
      }
      addNodes([node], []);
      setSelectedNodeId(node.id);
      setSelectedEdgeId(null);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
    },
    [addNodes, nodes, toCanvasPoint]
  );

  useEffect(() => {
    if (!loadedProject || isProjectLoading) return;
    const params = new URLSearchParams(window.location.search);
    const starter = params.get("starter");
    if (!starter || !["image", "video", "audio", "script", "smart-edit"].includes(starter)) return;
    if (homeStarterAppliedRef.current === canvasId) return;
    if (nodes.length > 0) {
      const url = new URL(window.location.href);
      url.searchParams.delete("starter");
      url.searchParams.delete("starterMode");
      url.searchParams.delete("starterModel");
      router.replace(`${url.pathname}${url.search}${url.hash}`, { scroll: false });
      return;
    }
    homeStarterAppliedRef.current = canvasId;
    addTargetModule(starter as AddModuleKind, undefined, params.get("starterMode") || undefined, params.get("starterModel") || undefined);
  }, [addTargetModule, canvasId, isProjectLoading, loadedProject, nodes.length, router]);

  useEffect(() => {
    if (homeStarterAppliedRef.current !== canvasId || !nodes.length || !persistence.ready || homeStarterSavingRef.current) return;
    homeStarterSavingRef.current = true;
    void persistence.saveAndConfirm().then(saved => {
      if (!saved) return;
      const url = new URL(window.location.href);
      url.searchParams.delete("starter");
      url.searchParams.delete("starterMode");
      url.searchParams.delete("starterModel");
      router.replace(`${url.pathname}${url.search}${url.hash}`, { scroll: false });
    }).finally(() => { homeStarterSavingRef.current = false; });
  }, [canvasId, nodes.length, persistence.ready, persistence.saveAndConfirm, router]);

  const uploadCanvasMediaFile = useCallback(async (file: File) => {
    const mediaType = canvasMediaType(file);
    if (mediaType === "image") {
      const result = await imageGenerationService.uploadImage(file);
      if (!result.success || !result.data?.url) throw new Error(result.error || "图片上传失败");
      return { mediaType, url: result.data.url };
    }
    const form = new FormData();
    form.append("file", file);
    let response: Response;
    try {
      response = await fetch("/api/canvas/media/upload", {
        method: "POST",
        body: form,
        signal: AbortSignal.timeout(600_000),
      });
    } catch (error) {
      throw new Error(
        error instanceof DOMException && (error.name === "TimeoutError" || error.name === "AbortError")
          ? "上传超时，请检查网络后重试，或改用更小的素材"
          : "上传失败，请检查网络后重试",
      );
    }
    const result = await response.json();
    if (!response.ok || !result.success || !result.data?.url)
      throw new Error(result.error || "素材上传失败");
    return {
      mediaType,
      url: result.data.url as string,
      duration: Number(result.data.duration) || undefined,
      width: Number(result.data.width) || undefined,
      height: Number(result.data.height) || undefined,
    };
  }, []);

  const tvstarReferences = useMemo<TVstarReference[]>(() => nodes.flatMap((node) => {
    const url = getNodeReferenceMediaUrl(node);
    if (!url || (node.inputType !== "image" && node.inputType !== "video")) return [];
    return [{ id: node.id, title: node.title, url, type: node.inputType,
      duration: Number(node.draftValues?.duration) || undefined }];
  }), [nodes]);
  const tvstarCanvasNodes = useMemo<TVstarNodeContext[]>(() => nodes.filter(node => !isCanvasGroup(node)).map(node => {
    const draft = node.draftValues || {};
    const content = Array.isArray(draft.content) ? draft.content.filter((value): value is string => typeof value === "string").join("\n") : "";
    const description = [draft.prompt, content, draft.sceneDescription].filter((value): value is string => typeof value === "string" && Boolean(value.trim())).join("\n");
    return { id: node.id, title: node.title, type: node.inputType || node.kind, description: description.slice(0, 1500) };
  }), [nodes]);
  const tvstarModels = useMemo<TVstarModel[]>(() => canvasModelOptions
    .filter(model => !model.isSubModel && isCanvasLanguageModel(model))
    .map(model => ({ id: model.id, label: model.displayName || model.modelId || model.id, modelId: model.modelId || "", providerType: model.providerType || "", supportsVision: isCanvasVisionModel(model) })), [canvasModelOptions]);
  const tvstarGenerationModels = useMemo<TVstarGenerationModel[]>(() => canvasModelOptions
    .filter(model => !model.isSubModel)
    .flatMap(model => {
      const label = model.displayName || model.modelId || model.id;
      return [
        ...(filterCanvasModels([model], "image").length ? [{ id: model.id, label, kind: "image" as const,
          supportsReference: filterCanvasModels([model], "image-edit").length > 0 }] : []),
        ...(filterCanvasModels([model], "video", "first-frame").length ? [{ id: model.id, label, kind: "video" as const }] : []),
      ];
    }), [canvasModelOptions]);

  const compileCanvasGroupRun = useCallback((sourceNodes: CloneNode[], sourceEdges: CloneEdge[], groupId: string) =>
    compileGroupRun(sourceNodes, sourceEdges, groupId, canvasId, n => {
      const node = n as CloneNode, d = node.draftValues || {}, p = getNodeParams(node), settings = (p.settings || {}) as Record<string, any>;
      if (d.action === "VIDEO_HD_UPSCALE") return { kind: "video-upscale", params: { resolution: d.hdResolution || "1080P" } };
      if (d.audioParams) return { kind: "audio", params: d.audioParams as Record<string, unknown> };
      if (getTargetModuleKind(node) === "smart-edit" || d.nodeType === "smart-edit") {
        const draft = (d.smartEditDraft || {}) as any, plan = draft.plans?.[draft.selectedPlanIndex || 0] || d.editPlan;
        const changes = sourceEdges.some(e => e.target === node.id && groupMembers(sourceNodes, groupId).some(m => m.id === e.source && (/GENERATE|UPSCALE/.test(String(m.draftValues?.action)) || m.draftValues?.generationTaskId)));
        if (plan && !changes) return { kind: "smart-edit", params: { operation: "render", plan } };
        return { kind: "smart-edit", params: { operation: "plan", autoRender: true, mode: draft.mode || "sequence", targetDuration: draft.targetDuration || 300, shotDurations: draft.shotDurations, shotDescriptions: draft.shotDescriptions, ratio: draft.ratio || "16:9", resolution: draft.resolution || "720p", semantic: draft.semantic ?? false, muteAudio: draft.muteAudio === true, preferredModelRef: draft.preferredModelRef, prompt: draft.prompt || "", removeSilence: draft.removeSilence || false, transcribe: draft.transcribe || false, music: draft.music, beatSync: draft.beatSync || false, variants: 1 } };
      }
      const key = String(p.functionKey || d.functionKey || (node.inputType === "video" ? "text-to-video" : node.inputType === "image" ? "" : "story-script"));
      const definition = key ? getConfiguredFunction(videoCanvasFunctionConfig, key) : { key: "image-generate", kind: "image-edit" as const, route: "canvas-generate-image" as const, enabled: true, label: "图片生成", prompt: "", description: "" };
      if (!definition?.enabled || !videoCanvasFunctionConfig.enabled) throw new Error(`${node.title}：功能未启用或未配置`);
      const model = getFunctionModel(videoCanvasFunctionConfig, definition, normalizeModelRef(settings.model || p.model));
      const prompt = composeFunctionPrompt(definition, String(p.prompt || d.prompt || ""));
      if (node.inputType === "video") return { kind: "video", params: { prompt, preferredModelRef: model, mode: p.mode || settings.mode || (sourceEdges.some(e => e.target === node.id && sourceNodes.find(n => n.id === e.source)?.inputType === "image") ? "first-frame" : "text-to-video"), duration: Number(String(settings.duration || p.duration || 5).replace(/s$/, "")), ratio: settings.ratio || p.ratio || "16:9", resolution: settings.resolution || p.resolution || "720p", generateAudio: settings.audio ? settings.audio !== "关闭" : p.generateAudio === true } };
      if (node.inputType === "image") {
        if (["enhance", "extend", "remove-bg"].includes(definition.route || "")) return { kind: "image-operation", params: { operation: definition.route, prompt } };
        return { kind: "image", params: { prompt, model, allowFailover: false, imageCount: 1, imageSize: settings.resolution || p.imageSize || "1K", aspectRatio: settings.ratio || p.ratio || p.aspectRatio || "auto", referenceImages: p.referenceImages || [], billingFeature: getImageGenerationBillingFeature(key), promptExtend: true } };
      }
      if (node.inputType === "text" || node.kind === "script" || node.kind === "text") return { kind: "analysis", params: { prompt, preferredModelRef: model, mode: key === "story-script" ? "story-script" : key === "video-analysis" ? "video-analysis" : "agent-plan", nodeTitle: node.title } };
      throw new Error(`${node.title}：尚未配置可执行动作`);
    }, () => crypto.randomUUID()), [canvasId, videoCanvasFunctionConfig]);

  const applyTVstarShots = useCallback(async (shots: TVstarShot[], goal: string, references: TVstarReference[] = [], selection: TVstarGenerationSelection = {}, runMode: "submit" | "prepare" = "submit") => {
    if (!shots.length) return false;
    let output: ReturnType<typeof tvstarOutputRequirements>;
    let timing: ReturnType<typeof tvstarTiming>;
    try { output = tvstarOutputRequirements(goal); timing = tvstarTiming(goal, shots); }
    catch (error) { toast.error(error instanceof Error ? error.message : "成片要求无效"); return false; }
    const videoDefinition = getConfiguredFunction(videoCanvasFunctionConfig, "first-frame-video");
    if (runMode === "submit" && (!videoCanvasFunctionConfig.enabled || !videoDefinition.enabled)) {
      toast.error("首帧生视频功能尚未启用，无法创建可执行分镜");
      return false;
    }
    let videoSettings: ReturnType<typeof chooseStoryVideoSettings>[];
    let availableModels: CanvasModelOption[] = [];
    try {
      const preferredModel = selection.videoModelRef || getFunctionModel(videoCanvasFunctionConfig, videoDefinition);
      availableModels = canvasModelOptions.length ? canvasModelOptions :
        ((await fetch("/api/models", { cache: "no-store" }).then(response => response.json()))?.models || [])
          .filter((model: CanvasModelOption) => getCanvasModelRef(model));
      if (selection.videoModelRef && !filterCanvasModels(availableModels, "video", "first-frame")
        .some(model => model.id === selection.videoModelRef || model.modelId === selection.videoModelRef))
        throw new Error("所选视频模型不支持首帧生视频，请换一个模型");
      videoSettings = shots.map((_shot, index) => chooseStoryVideoSettings(
        availableModels, true, timing.shotDurations[index], preferredModel,
        { ...output, minimumDuration: true, minimumResolution: true, strictModel: Boolean(selection.videoModelRef) },
      ));
    } catch (error) {
      if (runMode === "submit") {
        toast.error(error instanceof Error ? error.message : "没有可执行的首帧生视频模型");
        return false;
      }
      videoSettings = shots.map(shot => ({
        mode: "first-frame" as const, model: selection.videoModelRef || "",
        duration: Math.max(1, Math.min(10, Math.ceil(Number.parseFloat(shot.duration) || 5))),
        ratio: output.ratio, resolution: output.resolution, generateAudio: output.generateAudio ?? false,
      }));
    }
    let referenceImages: string[];
    try {
      referenceImages = await resolveTVstarGenerationReferences(references);
      if (runMode === "submit" && selection.imageModelRef && !filterCanvasModels(availableModels, referenceImages.length ? "image-edit" : "image")
        .some(model => model.id === selection.imageModelRef || model.modelId === selection.imageModelRef))
        throw new Error(referenceImages.length ? "所选图片模型不支持参考图生成，请换一个模型" : "所选图片模型不可用，请换一个模型");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "参考视频处理失败");
      return false;
    }
    const referenceCapableImageModels = referenceImages.length ? filterCanvasModels(availableModels, "image-edit") : [];
    if (runMode === "submit" && referenceImages.length && !referenceCapableImageModels.length) {
      toast.error("没有支持参考图的图片模型，无法按引用素材生成关键帧");
      return false;
    }
    const imageModelRef = selection.imageModelRef || (referenceImages.length
      ? (referenceCapableImageModels.find(model => model.id === videoCanvasFunctionConfig.defaultImageModel || model.modelId === videoCanvasFunctionConfig.defaultImageModel)
        || referenceCapableImageModels[0])?.id : undefined);
    const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
    const x = Math.round(center.x - 500);
    const y = Math.round(center.y - 180);
    const script = createTextResourceNode({
      content: [goal, ...shots.map((shot, index) => `镜头 ${shot.shot}（目标 ${shot.duration}，生成 ${videoSettings[index].duration}s）${shot.sceneDescription}。运镜：${shot.cameraMovement}`)].join("\n\n"),
      title: "TVstar · 创作分镜",
      x, y,
    });
    script.draftValues = { ...script.draftValues, tvstarShots: shots, tvstarReferences: references, source: "tvstar" };
    const nextNodes: CloneNode[] = [script];
    const nextEdges: CloneEdge[] = [];
    const videoNodeIds: string[] = [];
    shots.forEach((shot, index) => {
      const settings = videoSettings[index];
      const rowY = y + index * 450;
      const imagePrompt = [`仅生成镜头 ${shot.shot} 的一张电影关键帧。`, shot.imagePrompt || shot.sceneDescription, tvstarShotComposition(goal)].join("\n");
      const image = createTargetModuleNode("image", x + 560, rowY, nodes.length + index * 2 + 1);
      image.title = `镜头 ${shot.shot} · 关键帧`;
      image.draftValues = {
        ...image.draftValues,
        prompt: imagePrompt,
        params: { prompt: imagePrompt, aspectRatio: output.ratio, referenceImages, ...(imageModelRef ? { model: imageModelRef } : {}) },
        tvstarShot: shot.shot,
        source: "tvstar",
      };
      const video = createTargetModuleNode("video", x + 1020, rowY, nodes.length + index * 2 + 2);
      video.title = `镜头 ${shot.shot} · 视频`;
      const videoPrompt = [shot.sceneDescription, shot.motionPrompt, shot.cameraMovement,
        ...(settings.generateAudio ? [shot.dialogue, shot.backgroundMusic, shot.voiceAndSfx] : []),
        `整片背景要求（当前只拍镜头 ${shot.shot}，不执行其他镜头）：${goal}`,
        tvstarShotComposition(goal), "保持当前镜头连续运动，不生成片中片，不切换到其他分镜。",
      ].filter(Boolean).join("。");
      video.draftValues = {
        ...video.draftValues,
        prompt: videoPrompt,
        params: {
          mode: "first-frame",
          prompt: videoPrompt,
          model: settings.model,
          duration: settings.duration,
          ratio: settings.ratio,
          resolution: settings.resolution,
          generateAudio: settings.generateAudio,
        },
        tvstarShot: shot.shot,
        source: "tvstar",
      };
      nextNodes.push(image, video);
      videoNodeIds.push(video.id);
      nextEdges.push(
        { id: makeId("edge"), source: script.id, target: image.id },
        { id: makeId("edge"), source: image.id, target: video.id },
      );
    });
    const finalVideo = createTargetModuleNode("smart-edit", x + 1510, y + 140, nodes.length + shots.length * 2 + 1);
    finalVideo.title = `TVstar · ${timing.targetDuration} 秒成片`;
    finalVideo.draftValues = {
      ...finalVideo.draftValues,
      source: "tvstar",
      smartEditDraft: {
        mode: "sequence",
        ratio: output.ratio,
        resolution: output.resolution,
        muteAudio: output.generateAudio === false,
        targetDuration: timing.targetDuration,
        shotDurations: timing.shotDurations,
        shotDescriptions: shots.map(shot => [shot.sceneDescription, shot.motionPrompt, shot.cameraMovement].filter(Boolean).join("。").slice(0, 600)),
        semantic: true,
        preferredModelRef: videoCanvasFunctionConfig.defaultMultimodalModel || undefined,
        prompt: goal,
      },
    };
    nextNodes.push(finalVideo);
    nextEdges.push(...videoNodeIds.map(id => ({ id: makeId("edge"), source: id, target: finalVideo.id })));
    const groupId = makeId("tvstar-group");
    const groupNodes = makeCanvasGroup(nextNodes, nextNodes.map(node => node.id), groupId, runMode === "prepare" ? "TVstar · 待运行工作流" : "TVstar · 自动制作");
    let requests: ReturnType<typeof compileCanvasGroupRun> | undefined;
    if (runMode === "submit") {
      try { requests = compileCanvasGroupRun([...nodes, ...groupNodes], [...edges, ...nextEdges], groupId); }
      catch (error) { toast.error(error instanceof Error ? error.message : "无法创建视频制作任务"); return false; }
    }
    addNodes(groupNodes, nextEdges);
    setSelectedNodeId(groupId);
    setViewport(current => ({ ...current, x: Math.round((window.innerWidth - (window.innerWidth > 800 ? 540 : 0)) / 2 - (x + 700) * current.zoom), y: Math.round(window.innerHeight / 2 - (y + 180) * current.zoom) }));
    if (runMode === "prepare") {
      toast.success(`已创建 ${shots.length} 个待运行镜头及成片节点，可在画布检查后开始制作`);
      return groupId;
    }
    try {
      await groupRuns.submit(requests!);
      generationTasks.refresh();
      toast.success(`已开始制作 ${shots.length} 个镜头，完成后自动生成 ${timing.targetDuration} 秒成片`);
      return groupId;
    } catch (error) {
      toast.error(`${error instanceof Error ? error.message : "提交失败"}；节点已保留，可选中编组重试`);
      return false;
    }
  }, [addNodes, canvasModelOptions, compileCanvasGroupRun, edges, generationTasks, groupRuns, nodes, toCanvasPoint, videoCanvasFunctionConfig]);

  const runPreparedTVstarGroup = useCallback(async (groupId: string) => {
    let requests: ReturnType<typeof compileCanvasGroupRun>;
    try { requests = compileCanvasGroupRun(nodes, edges, groupId); }
    catch (error) { toast.error(error instanceof Error ? error.message : "待运行工作流已变化，无法开始制作"); return false; }
    try {
      await groupRuns.submit(requests);
      generationTasks.refresh();
      toast.success("已开始执行画布中的 TVstar 工作流");
      return groupId;
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "工作流提交失败");
      return false;
    }
  }, [compileCanvasGroupRun, edges, generationTasks, groupRuns, nodes]);

  const applyTVstarEdit = useCallback(async (references: TVstarReference[], goal: string) => {
    const videos = references.filter(item => item.type === "video").slice(0, 12);
    if (!videos.length) { toast.error("请先引用至少一个视频片段"); return false; }
    let output: ReturnType<typeof tvstarOutputRequirements>;
    try { output = tvstarOutputRequirements(goal); }
    catch (error) { toast.error(error instanceof Error ? error.message : "成片要求无效"); return false; }
    const timing = tvstarTiming(goal, videos.map(item => ({ duration: `${Math.min(item.duration || 5, 5)}s` })));
    const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
    const x = Math.round(center.x - 380);
    const y = Math.round(center.y - 180);
    const brief = createTextResourceNode({ content: goal, title: "TVstar · 剪辑要求", x, y });
    brief.draftValues = { ...brief.draftValues, source: "tvstar", tvstarReferences: videos };
    const nextNodes: CloneNode[] = [brief];
    const nextEdges: CloneEdge[] = [];
    const sources = videos.map((item, index) => {
      const source = createMediaResourceNode({
        mediaType: "video", mediaUrl: item.url, title: `素材 ${index + 1} · ${item.title}`,
        x: x + 480, y: y + index * 375,
      });
      source.draftValues = { ...source.draftValues, source: "tvstar", originalReferenceId: item.id };
      nextNodes.push(source);
      return source;
    });
    const result = createTargetModuleNode("smart-edit", x + 1140, y + 90, nodes.length + videos.length + 1);
    result.title = `TVstar · ${timing.targetDuration} 秒智能成片`;
    result.draftValues = { ...result.draftValues, source: "tvstar", smartEditDraft: {
      mode: "sequence", ratio: output.ratio, resolution: output.resolution, muteAudio: output.generateAudio === false,
      targetDuration: timing.targetDuration, shotDurations: timing.shotDurations,
      shotDescriptions: videos.map(item => `从《${item.title}》选取符合用户要求的真实高光画面：${goal}`.slice(0, 600)),
      semantic: true, preferredModelRef: videoCanvasFunctionConfig.defaultMultimodalModel || undefined,
      prompt: goal,
    } };
    nextNodes.push(result);
    nextEdges.push(...sources.map(source => ({ id: makeId("edge"), source: source.id, target: result.id })));
    const groupId = makeId("tvstar-edit-group");
    const groupNodes = makeCanvasGroup(nextNodes, nextNodes.map(node => node.id), groupId, "TVstar · 素材智能剪辑");
    let requests: ReturnType<typeof compileCanvasGroupRun>;
    try { requests = compileCanvasGroupRun([...nodes, ...groupNodes], [...edges, ...nextEdges], groupId); }
    catch (error) { toast.error(error instanceof Error ? error.message : "无法创建剪辑任务"); return false; }
    addNodes(groupNodes, nextEdges);
    setSelectedNodeId(groupId);
    setViewport(current => ({ ...current,
      x: Math.round((window.innerWidth - (window.innerWidth > 800 ? 540 : 0)) / 2 - (x + 700) * current.zoom),
      y: Math.round(window.innerHeight / 2 - (y + 180) * current.zoom),
    }));
    try {
      await groupRuns.submit(requests);
      generationTasks.refresh();
      toast.success(`已开始分析 ${videos.length} 段真实视频并合成成片`);
      return groupId;
    } catch (error) {
      toast.error(`${error instanceof Error ? error.message : "提交失败"}；剪辑节点已保留，可选中编组重试`);
      return false;
    }
  }, [addNodes, compileCanvasGroupRun, edges, generationTasks, groupRuns, nodes, toCanvasPoint, videoCanvasFunctionConfig.defaultMultimodalModel]);

  const applyCharacterStudio = useCallback(async (character: StudioCharacter, style: string, views: StudioView[], referenceUrl?: string): Promise<boolean> => {
    if (!views.length) return false;
    const requiresIdentityReference = Boolean(referenceUrl) || views.length > 1;
    // Recover a missed initial catalog load before deciding that generation is unavailable.
    let availableModels = canvasModelOptions;
    if (!availableModels.length) {
      const response = await fetch("/api/models", { cache: "no-store" });
      if (!response.ok) throw Error("角色出图模型暂时无法读取，请稍后重试");
      const catalog = await response.json();
      availableModels = Array.isArray(catalog.models) ? catalog.models : [];
    }
    const imageCandidates = filterCanvasModels(availableModels, requiresIdentityReference ? "image-edit" : "image");
    if (!imageCandidates.length) {
      toast.error(requiresIdentityReference ? "没有支持参考图的图片模型，无法保持多视图角色一致性" : "没有可执行的图片模型");
      return false;
    }
    const imageModelRef = imageCandidates.find(model => model.id === videoCanvasFunctionConfig.defaultImageModel
      || model.modelId === videoCanvasFunctionConfig.defaultImageModel)?.id || imageCandidates[0]?.id;
    const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
    const x = Math.round(center.x - 360);
    const y = Math.round(center.y - 160);
    // Appearance is shared; generated prompt framing must not override each view's composition.
    const identity = [character.name, character.description, character.look, character.wardrobe,
      ...(character.look || character.wardrobe ? [] : [character.prompt]), `风格：${style}`].filter(Boolean).join("。 ");
    const source = createTextResourceNode({ content: identity, title: `${character.name} · 角色设定`, x, y });
    source.draftValues = { ...source.draftValues, source: "character-studio", characterIdentity: identity };
    const viewPrompts: Record<StudioView, string> = {
      "角色立绘": "全身角色立绘，站姿自然，人物完整入画，纯净背景，清晰展示稳定面部特征、服装和道具。",
      "脸部近景": "只拍同一角色脸部近景，脸部占据画幅主体，最多露出肩部，不出现全身或半身立绘；保持五官、发型与标志性特征完全一致，柔和电影布光。",
      "表情参考": "同一角色表情设定图，四宫格分别展示平静、喜悦、惊讶、愤怒，五官与服装细节一致。",
      "角色三视图": "同一角色正面、侧面、背面三视图并排，站姿和服装统一，清晰标注轮廓，纯净背景。",
    };
    const nextNodes: CloneNode[] = [source];
    const nextEdges: CloneEdge[] = [];
    // A single generated identity anchor feeds every other view. Text alone
    // does not constrain an image model to reproduce the same face.
    const orderedViews: StudioView[] = views.includes("角色立绘")
      ? ["角色立绘", ...views.filter(view => view !== "角色立绘")]
      : views;
    let identityAnchorId: string | undefined;
    orderedViews.forEach((view, index) => {
      const singleView = view === "角色立绘" || view === "脸部近景"
        ? "只生成一张单一完整构图，禁止拼贴、画中画、分屏、宫格和附加小窗；参考图只用于人物身份，不复用其构图。" : "";
      const prompt = `${identity}\n${viewPrompts[view]} 不改变角色身份，不增加多余人物。${singleView}`;
      const node = createTargetModuleNode("image", x + 500 + index * 440, y, nodes.length + index + 1);
      node.title = `${character.name} · ${view}`;
      node.draftValues = {
        ...node.draftValues,
        prompt,
        params: { prompt, aspectRatio: view === "角色三视图" || view === "表情参考" ? "16:9" : "3:4", ...(referenceUrl && index === 0 ? { referenceImages: [referenceUrl] } : {}), ...(imageModelRef ? { model: imageModelRef } : {}) },
        characterIdentity: identity,
        characterView: view,
        characterAnchorId: identityAnchorId,
        source: "character-studio",
      };
      nextNodes.push(node);
      nextEdges.push({ id: makeId("edge"), source: source.id, target: node.id });
      if (identityAnchorId) nextEdges.push({ id: makeId("edge"), source: identityAnchorId, target: node.id });
      else identityAnchorId = node.id;
    });
    const groupId = makeId("character-group");
    const groupNodes = makeCanvasGroup(nextNodes, nextNodes.map(node => node.id), groupId, `${character.name} · 角色造型`);
    let requests: ReturnType<typeof compileCanvasGroupRun>;
    try { requests = compileCanvasGroupRun([...nodes, ...groupNodes], [...edges, ...nextEdges], groupId); }
    catch (error) { toast.error(error instanceof Error ? error.message : "无法创建角色视图任务"); return false; }
    addNodes(groupNodes, nextEdges);
    setSelectedNodeId(groupId);
    setViewport(current => ({ ...current, x: Math.round(window.innerWidth / 2 - (x + 570) * current.zoom), y: Math.round(window.innerHeight / 2 - (y + 180) * current.zoom) }));
    try {
      await groupRuns.submit(requests);
      generationTasks.refresh();
      setActivePanel(null);
      toast.success(`已开始生成 ${character.name} 的 ${views.length} 个角色视图`);
      return true;
    } catch (error) {
      toast.error(`${error instanceof Error ? error.message : "角色视图提交失败"}；节点已保留，可选中编组重试`);
      return false;
    }
  }, [addNodes, canvasModelOptions, compileCanvasGroupRun, edges, generationTasks, groupRuns, nodes, toCanvasPoint, videoCanvasFunctionConfig.defaultImageModel]);

  const readMediaIntrinsicSize = useCallback(async (file: File) => {
    if (file.type.startsWith("video/")) {
      return await new Promise<{ width: number; height: number } | null>((resolve) => {
        const url = URL.createObjectURL(file);
        const video = document.createElement("video");
        let settled = false;
        const finish = (size: { width: number; height: number } | null) => {
          if (settled) return;
          settled = true;
          window.clearTimeout(timeout);
          video.removeAttribute("src");
          video.load();
          URL.revokeObjectURL(url);
          resolve(size);
        };
        const timeout = window.setTimeout(() => finish(null), 5000);
        video.preload = "metadata";
        video.onloadedmetadata = () => finish(video.videoWidth && video.videoHeight
          ? { width: video.videoWidth, height: video.videoHeight } : null);
        video.onerror = () => finish(null);
        video.src = url;
      });
    }
    if (!file.type.startsWith("image/")) return null;
    try {
      const bitmap = await createImageBitmap(file);
      const size = { width: bitmap.width, height: bitmap.height };
      bitmap.close();
      return size;
    } catch {
      try {
        return await new Promise<{ width: number; height: number }>((resolve, reject) => {
          const url = URL.createObjectURL(file);
          const image = new Image();
          image.onload = () => {
            URL.revokeObjectURL(url);
            resolve({ width: image.naturalWidth, height: image.naturalHeight });
          };
          image.onerror = () => {
            URL.revokeObjectURL(url);
            reject(new Error("image decode failed"));
          };
          image.src = url;
        });
      } catch {
        return null;
      }
    }
  }, []);

  const legacyImageSizingAttempts = useRef(new Set<string>());
  useEffect(() => {
    for (const node of nodes) {
      if (getDraftString(node, "action") !== "IMAGE_RESOURCE" ||
          !node.draftValues?.resourceMeta ||
          getDraftNumber(node, "intrinsicWidth") > 0) continue;
      const url = getNodeMediaUrl(node);
      if (!url || legacyImageSizingAttempts.current.has(`${node.id}:${url}`)) continue;
      legacyImageSizingAttempts.current.add(`${node.id}:${url}`);
      const image = new Image();
      image.onload = () => {
        const width = image.naturalWidth;
        const height = image.naturalHeight;
        if (!width || !height) return;
        const aspect = width / height;
        const oldWidth = aspect >= 1 ? 420 : Math.min(420, Math.max(220, Math.round(560 * aspect)));
        const oldHeight = aspect >= 1 ? Math.min(560, Math.max(180, Math.round(420 / aspect))) : 560;
        const layout = getUploadedMediaNodeSize(width, height, "image");
        setNodes(current => current.map(item => item.id === node.id ? {
          ...item,
          ...(layout && Math.abs(item.width - oldWidth) <= 2 && Math.abs(item.height - oldHeight) <= 2 ? layout : {}),
          draftValues: { ...item.draftValues, intrinsicWidth: width, intrinsicHeight: height,
            outputSizeLabel: getDraftString(item, "outputSizeLabel") || `${width} × ${height}` },
        } : item));
      };
      image.src = url;
    }
  }, [nodes, setNodes]);

  const addUploadedFilesAtPoint = useCallback(
    async (files: File[], center: { x: number; y: number }, connectTargetId?: string) => {
      if (files.length === 0) return;
      const { files: batch, errors } = prepareCanvasMediaFiles(files);
      if (errors.length) toast.error(errors.slice(0, 3).join("\n"));
      if (!batch.length) return;
      const sizes = await Promise.all(batch.map(file => readMediaIntrinsicSize(file)));
      const newNodes = batch.map((file, index) => {
        const created = createUploadedMediaNode(file, "", 0, 0, nodes.length + index + 1);
        const size = sizes[index];
        const layout = size && file.type.startsWith("video/")
          ? getUploadedMediaNodeSize(size.width, size.height, "video")
          : size ? getUploadedMediaNodeSize(size.width, size.height, "image") : null;
        if (layout) { created.width = layout.width; created.height = layout.height; }
        return { ...created, x: Math.round(center.x - created.width / 2 + index * 450),
          y: Math.round(center.y - created.height / 2),
          draftValues: { ...created.draftValues, uploadStatus: "uploading",
            intrinsicWidth: size?.width, intrinsicHeight: size?.height,
            outputSizeLabel: size ? `${size.width} × ${size.height}` : undefined } };
      });
      addNodes(newNodes, connectTargetId ? newNodes.map(node => ({ id: makeId("edge"), source: node.id, target: connectTargetId })) : []);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
      uploadQueueRef.current = uploadQueueRef.current.catch(() => {}).then(async () => {
        for (const [index, file] of batch.entries()) {
          const id = newNodes[index].id;
          try {
            const data = await uploadCanvasMediaFile(file);
            setNodes(current => current.map(node => node.id === id ? { ...node,
              ...(!sizes[index] && data.width && data.height && data.mediaType !== "audio"
                ? getUploadedMediaNodeSize(data.width, data.height, data.mediaType) || {} : {}),
              draftValues: {
              ...node.draftValues, mediaUrl: data.url, url: [data.url], uploadStatus: "complete",
              uploadError: undefined,
              durationSeconds: data.duration,
              intrinsicWidth: sizes[index]?.width || data.width,
              intrinsicHeight: sizes[index]?.height || data.height,
              outputSizeLabel: sizes[index] ? `${sizes[index].width} × ${sizes[index].height}` : data.width && data.height ? `${data.width} × ${data.height}` : undefined,
            } } : node));
            toast.success(`${newNodes[index].title} 上传完成`);
          } catch (error) {
            const message = error instanceof Error ? error.message : "上传失败，请重新上传";
            setNodes(current => current.map(node => node.id === id ? { ...node, draftValues: {
              ...node.draftValues, uploadStatus: "failed", uploadError: message,
            } } : node));
            toast.error(`${newNodes[index].title}：${message}`);
          }
        }
      });
    },
    [addNodes, nodes.length, readMediaIntrinsicSize, uploadCanvasMediaFile]
  );

  const addUploadedFiles = useCallback(
    (files: File[]) => {
      void addUploadedFilesAtPoint(files, toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2));
    },
    [addUploadedFilesAtPoint, toCanvasPoint]
  );

  const resetFileDrag = useCallback(() => {
    fileDragDepth.current = 0;
    setFileDragActive(false);
  }, []);
  useEffect(() => {
    window.addEventListener("blur", resetFileDrag);
    window.addEventListener("dragend", resetFileDrag);
    window.addEventListener("drop", resetFileDrag);
    return () => {
      window.removeEventListener("blur", resetFileDrag);
      window.removeEventListener("dragend", resetFileDrag);
      window.removeEventListener("drop", resetFileDrag);
    };
  }, [resetFileDrag]);

  const isCanvasFileDrag = (event: ReactDragEvent<HTMLDivElement>) =>
    Array.from(event.dataTransfer.types).includes("Files");
  const isFileDropBlocked = (event: ReactDragEvent<HTMLDivElement>) =>
    Boolean((event.target as HTMLElement).closest('[role="dialog"], input, textarea, [contenteditable="true"]'));

  const addAssetFromLibrary = useCallback(
    (asset: CanvasLibraryAsset) => {
      const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
      const width = asset.mediaType === "video" ? 560 : asset.mediaType === "audio" ? 430 : 420;
      const height = asset.mediaType === "video" ? 315 : asset.mediaType === "audio" ? 170 : 280;
      const node = createMediaResourceNode({
        action: `${asset.mediaType.toUpperCase()}_RESOURCE`,
        height,
        mediaType: asset.mediaType,
        mediaUrl: asset.url,
        title: asset.label,
        width,
        x: Math.round(center.x - width / 2),
        y: Math.round(center.y - height / 2),
      });
      addNodes([node], []);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
      toast.success(`已添加「${asset.label}」素材`);
    },
    [addNodes, toCanvasPoint]
  );

  const addStyleAssetFromMarket = useCallback(
    (card: AssetMarketCard) => {
      const [title, author, count, model] = card;
      const sameKindCount = nodes.filter((node) => node.kind === "material-style").length;
      const anchor = toCanvasPoint(MATERIAL_STYLE_SCREEN_ANCHOR.x, MATERIAL_STYLE_SCREEN_ANCHOR.y);
      const node = createMaterialStyleNode({
        author,
        count,
        model,
        thumbnailUrl: STYLE_MARKET_THUMBNAIL_URL,
        title,
        x: anchor.x + sameKindCount * 28,
        y: anchor.y + sameKindCount * 28,
      });
      addNodes(
        [node],
        styleLibraryTargetNodeId
          ? [{ id: makeId("edge"), source: node.id, target: styleLibraryTargetNodeId }]
          : [],
      );
      setSelectedNodeId(styleLibraryTargetNodeId);
      setSelectedEdgeId(null);
      setActivePanel(null);
      setStyleLibraryTargetNodeId(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
    },
    [addNodes, nodes, styleLibraryTargetNodeId, toCanvasPoint]
  );

  const applyVideoEffectFromMarket = useCallback(
    (preset: VideoCanvasEffectPreset) => {
      if (!effectLibraryTargetNodeId) {
        setActivePanel(null);
        return;
      }

      const connectedEffectEdge = edges.find((edge) => {
        if (edge.target !== effectLibraryTargetNodeId) return false;
        return isVideoEffectMaterialNode(
          nodes.find((node) => node.id === edge.source),
        );
      });
      const connectedEffectNode = connectedEffectEdge
        ? nodes.find((node) => node.id === connectedEffectEdge.source)
        : null;

      if (connectedEffectNode) {
        setNodes((current) =>
          current.map((node) => {
            if (node.id !== connectedEffectNode.id) return node;
            const replacement = createMaterialEffectNode({
              preset,
              x: node.x,
              y: node.y,
            });
            return {
              ...replacement,
              id: node.id,
            };
          }),
        );
      } else {
        const sameKindCount = nodes.filter(isVideoEffectMaterialNode).length;
        const anchor = toCanvasPoint(
          MATERIAL_STYLE_SCREEN_ANCHOR.x,
          MATERIAL_STYLE_SCREEN_ANCHOR.y,
        );
        const effectNode = createMaterialEffectNode({
          preset,
          x: Math.round(anchor.x + sameKindCount * 28),
          y: Math.round(anchor.y + sameKindCount * 28),
        });
        setNodes((current) => [...current, effectNode]);
        setEdges((current) => [
          ...current,
          {
            id: makeId("edge"),
            source: effectNode.id,
            target: effectLibraryTargetNodeId,
          },
        ]);
      }

      setSelectedNodeId(effectLibraryTargetNodeId);
      setSelectedEdgeId(null);
      setActivePanel(null);
      setEffectLibraryTargetNodeId(null);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
    },
    [edges, effectLibraryTargetNodeId, nodes, toCanvasPoint],
  );

  const applyVideoRolesFromLibrary = useCallback(
    (selectedRoleIds: string[]) => {
      if (!roleLibraryTargetNodeId) {
        setActivePanel(null);
        return;
      }

      const selectedPresets = videoCanvasFunctionConfig.rolePresets
        .filter((preset) => selectedRoleIds.includes(preset.id))
        .slice(0, 4);
      const connectedRoleEdges = edges.filter((edge) => {
        if (edge.target !== roleLibraryTargetNodeId) return false;
        return isVideoRoleMaterialNode(
          nodes.find((node) => node.id === edge.source),
        );
      });
      const connectedRoleNodes = connectedRoleEdges
        .map((edge) => nodes.find((node) => node.id === edge.source))
        .filter((node): node is CloneNode => Boolean(node));
      const availableByRoleId = new Map(
        nodes
          .filter(isVideoRoleMaterialNode)
          .map((node) => [getDraftString(node, "roleId"), node]),
      );
      const connectedByRoleId = new Map(
        connectedRoleNodes.map((node) => [getDraftString(node, "roleId"), node]),
      );
      for (const [roleId, node] of connectedByRoleId) {
        availableByRoleId.set(roleId, node);
      }
      const sameKindCount = nodes.filter(isVideoRoleMaterialNode).length;
      const anchor = toCanvasPoint(
        MATERIAL_STYLE_SCREEN_ANCHOR.x + MATERIAL_STYLE_NODE_SIZE + 28,
        MATERIAL_STYLE_SCREEN_ANCHOR.y,
      );
      const newRoleNodes = selectedPresets
        .filter((preset) => !availableByRoleId.has(preset.id))
        .map((preset, index) =>
          createMaterialRoleNode({
            preset,
            x: Math.round(anchor.x + (sameKindCount + index) * 28),
            y: Math.round(anchor.y + (sameKindCount + index) * 28),
          }),
        );
      const newRoleByRoleId = new Map(
        newRoleNodes.map((node) => [getDraftString(node, "roleId"), node]),
      );
      const selectedRoleNodes = selectedPresets
        .map(
          (preset) =>
            availableByRoleId.get(preset.id) || newRoleByRoleId.get(preset.id),
        )
        .filter((node): node is CloneNode => Boolean(node));
      const selectedRoleNodeIds = new Set(selectedRoleNodes.map((node) => node.id));
      const connectedRoleNodeIds = new Set(
        connectedRoleEdges.map((edge) => edge.source),
      );

      setNodes((current) => [
        ...current.map((node) => {
          if (!selectedRoleNodeIds.has(node.id)) return node;
          const roleId = getDraftString(node, "roleId");
          const preset = selectedPresets.find((item) => item.id === roleId);
          if (!preset) return node;
          const replacement = createMaterialRoleNode({
            preset,
            x: node.x,
            y: node.y,
          });
          return { ...replacement, id: node.id };
        }),
        ...newRoleNodes,
      ]);
      setEdges((current) => [
        ...current.filter((edge) => {
          if (edge.target !== roleLibraryTargetNodeId) return true;
          const sourceNode = nodes.find((node) => node.id === edge.source);
          if (!isVideoRoleMaterialNode(sourceNode)) return true;
          return selectedRoleNodeIds.has(edge.source);
        }),
        ...selectedRoleNodes
          .filter((node) => !connectedRoleNodeIds.has(node.id))
          .map((node) => ({
            id: makeId("edge"),
            source: node.id,
            target: roleLibraryTargetNodeId,
          })),
      ]);
      setSelectedNodeId(roleLibraryTargetNodeId);
      setSelectedEdgeId(null);
      setActivePanel(null);
      setRoleLibraryTargetNodeId(null);
      setVideoRoleAgreementOpen(false);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
    },
    [
      edges,
      nodes,
      roleLibraryTargetNodeId,
      toCanvasPoint,
      videoCanvasFunctionConfig.rolePresets,
    ],
  );

  const addRoleAssetFromLibrary = useCallback(
    (role: RoleLibraryItem) => {
      const roleNodes = ROLE_LIBRARY_NODE_LAYOUT.map((layout) => {
        const created = createMediaResourceNode({
          action: "ROLE_LIBRARY_RESOURCE",
          height: layout.height,
          mediaType: "image",
          mediaUrl: role.images[layout.imageKey],
          prompt: role.prompt,
          title: `${role.name} ${layout.title}`,
          width: layout.width,
          x: layout.x,
          y: layout.y,
        });
        return {
          ...created,
          subtitle: "角色库资产",
          draftValues: {
            ...(created.draftValues || {}),
            roleDescription: role.description,
            roleImageKind: layout.title,
            roleTags: role.tags,
            source: "role-library",
          },
        };
      });
      addNodes(roleNodes, []);
      setViewport(ROLE_LIBRARY_APPLY_VIEWPORT);
      setSelectedNodeId(null);
      setSelectedEdgeId(null);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
      toast.success("已应用到画布");
    },
    [addNodes]
  );

  const reuseHistoryAssetNode = useCallback(
    (sourceNode: CloneNode) => {
      const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
      const node: CloneNode = {
        ...sourceNode,
        id: makeId("history"),
        x: Math.round(center.x - sourceNode.width / 2),
        y: Math.round(center.y - sourceNode.height / 2),
        draftValues: {
          ...(sourceNode.draftValues || {}),
          historySourceNodeId: sourceNode.id,
          source: "history-assets",
        },
      };
      addNodes([node], []);
      setSelectedNodeId(node.id);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
      toast.success("已应用到画布");
    },
    [addNodes, toCanvasPoint]
  );

  const addHistoryPickerNodes = useCallback(
    (sourceNodes: CloneNode[]) => {
      const center = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
      const createdNodes = sourceNodes.flatMap((sourceNode, index) => {
        const mediaType = sourceNode.inputType === "video" || sourceNode.inputType === "audio" ? sourceNode.inputType : "image";
        const mediaUrl = getNodeMediaUrl(sourceNode) || getNodeReferenceMediaUrl(sourceNode);
        if (!mediaUrl) return [];
        const label = mediaType === "video" ? "视频" : mediaType === "audio" ? "音频" : "图片";
        const sameTypeCount = nodes.filter((node) => node.inputType === mediaType).length;
        const width = mediaType === "video" ? 622 : 350;
        const height = mediaType === "audio" ? 148 : 350;
        return createMediaResourceNode({
          height,
          mediaType,
          mediaUrl,
          title: `${label}节点 ${sameTypeCount + index + 1}`,
          width,
          x: Math.round(center.x + index * 28),
          y: Math.round(center.y + index * 28),
        });
      });
      if (createdNodes.length === 0) return;
      addNodes(createdNodes, []);
      setSelectedNodeId(null);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
    },
    [addNodes, nodes, toCanvasPoint]
  );

  const addCanvasCommandUploadedFiles = useCallback(
    (files: File[]) => {
      if (!canvasCommand) return;
      void addUploadedFilesAtPoint(files, { x: canvasCommand.canvasX, y: canvasCommand.canvasY });
    },
    [addUploadedFilesAtPoint, canvasCommand]
  );

  const openCanvasCommand = useCallback(
    (event: ReactMouseEvent<HTMLDivElement>) => {
      if ((event.target as HTMLElement).closest("[data-canvas-overlay]")) return;
      event.preventDefault();
      const point = toCanvasPoint(event.clientX, event.clientY);
      setSelectedNodeId(null);
      setSelectedEdgeId(null);
      setInspectorNodeId(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setActivePanel(null);
      setCanvasCommand({
        canvasX: point.x,
        canvasY: point.y,
        screenX: event.clientX,
        screenY: event.clientY,
      });
    },
    [toCanvasPoint]
  );

  const openNodeContext = useCallback((event: ReactMouseEvent<HTMLDivElement>, node: CloneNode) => {
    event.preventDefault();
    event.stopPropagation();
    setSelectedNodeId(node.id);
    setSelectedEdgeId(null);
    setCanvasCommand(null);
    setInspectorNodeId(null);
    setConnectionMenu(null);
    setNodeContextMenu({
      nodeId: node.id,
      screenX: event.clientX,
      screenY: event.clientY,
    });
  }, []);

  const openConnectionMenu = useCallback((event: ReactMouseEvent<HTMLButtonElement>, node: CloneNode, side: ConnectionSide) => {
    event.preventDefault();
    event.stopPropagation();
    if (suppressConnectionClickRef.current) {
      suppressConnectionClickRef.current = false;
      return;
    }
    const canvasPoint = {
      x: (event.clientX - viewport.x) / viewport.zoom,
      y: (event.clientY - viewport.y) / viewport.zoom,
    };
    setSelectedNodeId(node.id);
    setSelectedEdgeId(null);
    setCanvasCommand(null);
    setNodeContextMenu(null);
    setInspectorNodeId(null);
    setConnectionMenu(null);
    setActivePanel(null);
    setLineConnectState({
      cursorCanvasX: canvasPoint.x,
      cursorCanvasY: canvasPoint.y,
      sourceId: side === "source" ? node.id : null,
      targetId: side === "target" ? node.id : null,
    });
  }, [viewport.x, viewport.y, viewport.zoom]);

  const addConnectedModule = useCallback(
    (kind: Exclude<AddModuleKind, "audio" | "director">) => {
      if (!connectionMenu) return;
      const anchor = nodes.find((node) => node.id === connectionMenu.nodeId);
      if (!anchor) return;
      const created = createTargetModuleNode(kind, 0, 0, nodes.length + 1);
      const gap = OFFICIAL_NODE_GAP;
      const node =
        connectionMenu.side === "source"
          ? {
              ...created,
              x: Math.round(anchor.x + anchor.width + gap),
              y: Math.round(anchor.y + anchor.height / 2 - created.height / 2),
            }
          : {
              ...created,
              x: Math.round(anchor.x - created.width - gap),
              y: Math.round(anchor.y + anchor.height / 2 - created.height / 2),
            };
      const edge =
        connectionMenu.side === "source"
          ? { id: makeId("edge"), source: anchor.id, target: node.id }
          : { id: makeId("edge"), source: node.id, target: anchor.id };

      const connectionIssue = connectionError([...nodes, node], edges, edge.source, edge.target)
        || connectionTypeError(connectionMenu.side === "source" ? anchor : node, connectionMenu.side === "source" ? node : anchor);
      if (connectionIssue) { toast.info(connectionIssue); return; }
      addNodes([node], [edge]);
      setSelectedNodeId(node.id);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setActivePanel(null);
      setConnectionMenu(null);
      toast.success(`已添加并连接 ${node.title}`);
    },
    [addNodes, connectionMenu, nodes, edges]
  );

  const connectExistingNodes = useCallback(
    (sourceId: string, targetId: string, options: { notify?: boolean } = {}) => {
      const shouldNotify = options.notify !== false;
      if (sourceId === targetId) {
        toast.info("不能连接到同一个节点");
        return false;
      }
      const source = nodes.find((node) => node.id === sourceId);
      const target = nodes.find((node) => node.id === targetId);
      if (!source || !target) {
        toast.error("未找到可连接的节点");
        return false;
      }
      const graphError = connectionError(nodes, edges, sourceId, targetId);
      if (graphError) { toast.info(graphError); return false; }
      const typeError = connectionTypeError(source, target);
      if (typeError) { toast.info(typeError); return false; }
      if (getTargetModuleKind(target) === "smart-edit") {
        if (source.inputType !== "video" || !getNodeReferenceMediaUrl(source)) {
          toast.info("智能剪辑需要已上传或已生成的视频素材");
          return false;
        }
        if (edges.filter(edge => edge.target === targetId).length >= 12) {
          toast.info("智能剪辑最多连接 12 份视频素材");
          return false;
        }
      }
      const exists = edges.some((edge) => edge.source === sourceId && edge.target === targetId);
      if (exists) {
        toast.info("这两个节点已经连接");
        return false;
      }
      setEdges((current) => [...current, { id: makeId("edge"), source: sourceId, target: targetId }]);
      setSelectedNodeId(targetId);
      setSelectedEdgeId(null);
      if (shouldNotify) {
        toast.success(`已连接「${source.title}」到「${target.title}」`);
      }
      return true;
    },
    [edges, nodes]
  );

  const runTargetModuleAction = useCallback(
    (nodeId: string, actionLabel: TargetModuleActionLabel) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      if (!anchor) return;

      if (actionLabel === "拉片分镜" || actionLabel === "拉片动态" || actionLabel === "拉片音乐") {
        const key = actionLabel === "拉片分镜" ? "shots" : actionLabel === "拉片动态" ? "motion" : "music";
        setNodes((current) => current.map((node) => node.id !== nodeId ? node : {
          ...node,
          draftValues: { ...node.draftValues, dimensions: {
            shots: true, motion: true, music: true,
            ...((node.draftValues?.dimensions || {}) as Record<string, boolean>),
            [key]: ((node.draftValues?.dimensions || {}) as Record<string, boolean>)[key] === false,
          } },
        }));
        return;
      }
      if (actionLabel === "上传视频拉片") {
        const existing = edges.filter((edge) => edge.target === nodeId)
          .map((edge) => nodes.find((node) => node.id === edge.source))
          .find((node) => node?.inputType === "video" && (node.kind === "input" || node.kind === "media"));
        pendingFrameAnalysisUploadRef.current = existing ? null : nodeId;
        replaceFileNodeId.current = existing?.id || null;
        if (replaceFileInputRef.current) {
          replaceFileInputRef.current.accept = "video/*";
          replaceFileInputRef.current.click();
        }
        return;
      }
      if (actionLabel === "从画布选择视频拉片") {
        setFrameAnalysisSelectionTargetId(nodeId);
        setReferenceSelectionTargetId(null);
        setSelectedNodeId(nodeId);
        setSelectedEdgeId(null);
        toast.info("请选择画布中已上传或已生成的视频素材");
        return;
      }

      const leftOfAnchor = (width: number) => Math.round(anchor.x - width - OFFICIAL_NODE_GAP);
      const rightX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP);
      const centerY = (height: number) => Math.round(anchor.y + anchor.height / 2 - height / 2);
      const nextNodes: CloneNode[] = [];
      const nextEdges: CloneEdge[] = [];
      let selectedId = anchor.id;
      let anchorUpdates: Partial<CloneNode> = {};
      let draftUpdates: Record<string, unknown> = {};

      const connectToAnchor = (node: CloneNode) => {
        nextNodes.push(node);
        nextEdges.push({ id: makeId("edge"), source: node.id, target: anchor.id });
        selectedId = node.id;
      };

      const connectFromAnchor = (node: CloneNode) => {
        nextNodes.push(node);
        nextEdges.push({ id: makeId("edge"), source: anchor.id, target: node.id });
        selectedId = node.id;
      };

      const makeGenerated = (kind: Exclude<AddModuleKind, "audio"> | "audio", title: string, x: number, updates?: Record<string, unknown>) => {
        const created = createTargetModuleNode(kind, x, 0, nodes.length + nextNodes.length + 1);
        return {
          ...created,
          title,
          y: centerY(created.height),
          draftValues: {
            ...(created.draftValues || {}),
            ...(updates || {}),
          },
        };
      };

      switch (actionLabel) {
        case "打开智能剪辑": {
          setNodes(current => current.map(node => node.id === nodeId ? {...node,width:350,height:350} : node));
          setSmartEditNodeId(nodeId);setSelectedNodeId(nodeId);setCanvasCommand(null);setNodeContextMenu(null);setConnectionMenu(null);return;
        }
        case "讲解视频":
        case "批量广告":
        case "口播视频":
        case "素材混剪": {
          const mode: SmartEditMode = actionLabel === "讲解视频" ? "explain" : actionLabel === "批量广告" ? "ads" : actionLabel === "口播视频" ? "talk" : "montage";
          setNodes(current => current.map(node => node.id === nodeId ? {
            ...node,
            draftValues: {
              ...node.draftValues,
              smartEditDraft: {
                ...(node.draftValues?.smartEditDraft as Record<string, unknown> || {}),
                mode,
                ...(mode === "montage" ? {resolution:"1080p",targetDuration:20} : {}),
              },
            },
          } : node));
          setSelectedNodeId(nodeId);
          setSelectedEdgeId(null);
          setCanvasCommand(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          return;
        }
        case "打开导演台": {
          setDirectorConsoleNodeId(nodeId);
          setSelectedNodeId(nodeId);
          setCanvasCommand(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          return;
        }
        case "自己编写内容": {
          const textNode = createTextResourceNode({
            content: "",
            title: `文本节点 ${nodes.length + nextNodes.length + 1}`,
            x: rightX,
            y: centerY(OFFICIAL_TEXT_RESOURCE_HEIGHT),
          });
          connectFromAnchor(textNode);
          toast.success("已创建纯文本节点");
          break;
        }
        case "文生视频": {
          draftUpdates = { action: "TEXT_GENERATE", content: [TEXT_TO_VIDEO_PROMPT] };
          connectFromAnchor(makeGenerated("video", "视频", rightX, { params: { prompt: TEXT_TO_VIDEO_GENERATE_PROMPT } }));
          break;
        }
        case "图片反推提示词": {
          const image = createInputNode("image", leftOfAnchor(158), centerY(158));
          image.title = "上传反推图片";
          draftUpdates = {
            action: "TEXT_GENERATE",
            content: [],
            params: {
              ...(anchor.draftValues?.params as Record<string, unknown> | undefined),
              functionKey: "image-to-prompt",
              prompt: IMAGE_TO_PROMPT_PROMPT,
            },
          };
          connectToAnchor(image);
          break;
        }
        case "文字生音乐": {
          draftUpdates = { action: "TEXT_GENERATE", content: [TEXT_TO_MUSIC_PROMPT] };
          connectFromAnchor(makeGenerated("audio", "音频", rightX, { params: { scene: "Music" } }));
          break;
        }
        case "图生图": {
          const imageInput = createInputNode(
            "image",
            leftOfAnchor(158),
            centerY(158),
          );
          imageInput.title = "图片参考";
          draftUpdates = {
            action: "IMAGE_GENERATE",
            generated: false,
            generatorType: "DEFAULT",
            nodeType: "image",
            params: {
              ...getNodeParams(anchor),
              functionKey: "image-repaint",
            },
          };
          connectToAnchor(imageInput);
          selectedId = imageInput.id;
          break;
        }
        case "图片高清": {
          anchorUpdates = {
            title: "图片高清",
          };
          const imageInput = createInputNode(
            "image",
            leftOfAnchor(158),
            centerY(158),
          );
          imageInput.title = "高清输入";
          draftUpdates = {
            action: "IMAGE_GENERATE",
            generated: false,
            generatorType: "ENHANCE",
            nodeType: "image",
            params: {
              ...getNodeParams(anchor),
              functionKey: "hd-upscale",
            },
          };
          connectToAnchor(imageInput);
          selectedId = imageInput.id;
          break;
        }
        case "参考": {
          setMarkSelectionTargetId(null);
          setReferenceSelectionTargetId((current) =>
            current === nodeId ? null : nodeId,
          );
          setSelectedNodeId(nodeId);
          setSelectedEdgeId(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          setCanvasCommand(null);
          setActivePanel(null);
          setLineConnectState(null);
          return;
        }
        case "标记": {
          if (!nodes.some((item) => item.inputType === "image" && getNodeReferenceMediaUrl(item))) {
            toast.info("请先上传或生成图片，再选择局部元素进行标记");
            return;
          }
          setReferenceSelectionTargetId(null);
          setMarkSelectionTargetId((current) =>
            current === nodeId ? null : nodeId,
          );
          setSelectedNodeId(nodeId);
          setSelectedEdgeId(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          setCanvasCommand(null);
          setActivePanel(null);
          setLineConnectState(null);
          return;
        }
        case "风格": {
          setReferenceSelectionTargetId(null);
          setMarkSelectionTargetId(null);
          setStyleLibraryTargetNodeId(nodeId);
          setSelectedNodeId(nodeId);
          setSelectedEdgeId(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          setCanvasCommand(null);
          setActivePanel("styleLibrary");
          setLineConnectState(null);
          return;
        }
        case "自己编写分镜脚本": {
          const rows = getStoryScriptRows(anchor);
          setNodes(current => current.map(node => node.id === nodeId ? {
            ...node,
            title: node.title === "脚本生成器" ? "分镜脚本" : node.title,
            draftValues: {
              ...node.draftValues, targetPreset: "story-script", viewMode: "table",
              rows: rows.length ? rows : [{
                id: makeId("shot"), shot: "01", duration: "5s", scene: "新镜头",
                sceneDescription: "", shotSize: "中景", lighting: "", dialogue: "",
                backgroundMusic: "", voiceAndSfx: "", cameraMovement: "",
                imagePrompt: "", motionPrompt: "", keyframeUrl: "",
              }],
            },
          } : node));
          setStoryWorkflowNodeId(nodeId);
          setStoryWorkflowStep("shots");
          setSelectedNodeId(nodeId);
          setSelectedEdgeId(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          setCanvasCommand(null);
          setActivePanel(null);
          return;
        }
        case "音频生视频": {
          draftUpdates = {
            action: "AUDIO_GENERATE",
            nodeType: "audio",
          };
          const videoBase = createPresetMediaNode({
            action: "VIDEO_GENERATE",
            height: 430,
            mediaType: "video",
            preset: "audio-to-video",
            prompt: AUDIO_TO_VIDEO_PROMPT,
            title: "音频生视频",
            width: 760,
            x: rightX,
            y: Math.round(anchor.y + 70),
          });
          const video = {
            ...videoBase,
            width: 760,
            height: 430,
            y: Math.round(anchor.y + 70),
          };
          const image = createInputNode(
            "image",
            leftOfAnchor(158),
            Math.round(anchor.y + anchor.height + 40),
          );
          image.title = "上传画面参考";
          nextNodes.push(video, image);
          nextEdges.push(
            { id: makeId("edge"), source: anchor.id, target: video.id },
            { id: makeId("edge"), source: image.id, target: video.id }
          );
          selectedId = video.id;
          break;
        }
        case "首帧生成视频":
        case "首尾帧生成视频": {
          const firstOnly = actionLabel === "首帧生成视频";
          draftUpdates = {
            action: "VIDEO_GENERATE",
            params: {
              ...(anchor.draftValues?.params as Record<string, unknown> | undefined),
              mode: firstOnly ? "first-frame" : "first-last-frame",
              prompt: firstOnly ? VIDEO_FIRST_FRAME_PROMPT : VIDEO_FIRST_LAST_PROMPT,
            },
          };
          setReferenceSelectionTargetId(anchor.id);
          toast.info(firstOnly ? "请选择画布中的首帧图片" : "请依次选择首帧和尾帧图片");
          selectedId = anchor.id;
          break;
        }
        case "剧本生成分镜脚本": {
          connectToAnchor(
            createTextResourceNode({
              content: STORY_SCRIPT_TEXT,
              title: "文本",
              x: leftOfAnchor(OFFICIAL_TEXT_RESOURCE_WIDTH),
              y: centerY(OFFICIAL_TEXT_RESOURCE_HEIGHT),
            })
          );
          selectedId = anchor.id;
          break;
        }
        case "视频参考生成分镜脚本": {
          draftUpdates = { action: "SCRIPT_GENERATE", params: { prompt: "解析视频内容生成分镜脚本。" } };
          const videoInput = createInputNode("video", leftOfAnchor(158), centerY(158));
          videoInput.title = "上传参考视频";
          connectToAnchor(videoInput);
          selectedId = anchor.id;
          break;
        }
        case "角色生成分镜脚本": {
          draftUpdates = { action: "SCRIPT_GENERATE", params: { prompt: SCRIPT_CHARACTER_PROMPT } };
          const first = createInputNode("image", leftOfAnchor(158), Math.round(anchor.y + 10));
          first.title = "上传角色 1";
          const second = createInputNode("image", leftOfAnchor(158), Math.round(anchor.y + 190));
          second.title = "上传角色 2";
          connectToAnchor(first);
          connectToAnchor(second);
          selectedId = anchor.id;
          break;
        }
        default:
          break;
      }

      setNodes((current) => [
        ...current.map((item) =>
          item.id === anchor.id
            ? {
                ...item,
                ...anchorUpdates,
                draftValues: {
                  ...(item.draftValues || {}),
                  ...draftUpdates,
                },
              }
            : item
        ),
        ...nextNodes,
      ]);
      if (nextEdges.length > 0) {
        setEdges((current) => [...current, ...nextEdges]);
      }
      setSelectedNodeId(selectedId);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setCanvasCommand(null);
      setActivePanel(null);
      if (
        actionLabel !== "自己编写内容" &&
        actionLabel !== "图生图" &&
        actionLabel !== "图片高清" &&
        actionLabel !== "首帧生成视频" &&
        actionLabel !== "首尾帧生成视频"
      ) {
        toast.success(`已按「${actionLabel}」创建关联节点`);
      }
    },
    [addNodes, edges, nodes]
  );

  const runSelectedImageToolAction = useCallback(
    async (nodeId: string, action: ImageToolbarAction, option?: string) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      if (!anchor) return;
      const anchorSourceUrl = getNodeReferenceMediaUrl(anchor);

      if (action === "download") {
        if (!anchorSourceUrl) {
          toast.error("当前素材没有可下载地址");
          return;
        }
        const link = document.createElement("a");
        link.href = anchorSourceUrl;
        link.download = `${anchor.title || "未命名图片"}.png`;
        link.rel = "noreferrer";
        document.body.appendChild(link);
        link.click();
        link.remove();
        toast.success("已开始下载当前素材");
        return;
      }

      if (action === "preview") {
        setPreviewNode(anchor);
        return;
      }

      if (action === "annotate") {
        setReferenceSelectionTargetId(null);
        setMarkSelectionTargetId((current) =>
          current === anchor.id ? null : anchor.id,
        );
        setSelectedNodeId(anchor.id);
        setSelectedEdgeId(null);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        setLineConnectState(null);
        return;
      }

      if (action === "rotate") {
        const currentRotation = Number(anchor.draftValues?.rotation || 0);
        setNodes((current) =>
          current.map((node) =>
            node.id === anchor.id
              ? {
                  ...node,
                  draftValues: {
                    ...(node.draftValues || {}),
                    rotation: (currentRotation + 90) % 360,
                  },
                }
              : node,
          ),
        );
        setSelectedNodeId(anchor.id);
        toast.success("已旋转当前素材");
        return;
      }

      if (action === "localEdit") {
        const mediaUrl = getNodeReferenceMediaUrl(anchor);
        if (!mediaUrl) {
          toast.error("当前图片没有可编辑的图片地址");
          return;
        }
        if (getNodeGridSplitState(anchor)) {
          toast.error("请先退出宫格切分，再使用局部编辑");
          return;
        }
        const willEnableLocalEdit = !Boolean(anchor.draftValues?.localEditMode);
        setNodes((current) =>
          current.map((node) =>
            node.id === anchor.id
              ? {
                  ...node,
                  draftValues: {
                    ...(node.draftValues || {}),
                    localEditMode: willEnableLocalEdit,
                    localEditRegions: getNodeLocalEditRegions(node),
                  },
                }
              : node,
          ),
        );
        setSelectedNodeId(anchor.id);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        toast.success(willEnableLocalEdit ? "已进入局部编辑模式" : "已退出局部编辑模式");
        return;
      }

      if (action === "orbit") {
        setSelectedNodeId(anchor.id);
        setAngleEditorNodeId(anchor.id);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        return;
      }

      const rightX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP);
      const centerY = (height: number) => Math.round(anchor.y + anchor.height / 2 - height / 2);

      if (action === "crop") {
        const { columns, rows, tileCount } = normalizeGridOption(option);
        const currentSplit = getNodeGridSplitState(anchor);
        if (currentSplit && currentSplit.columns === columns && currentSplit.rows === rows) {
          setNodes((current) =>
            current.map((node) =>
              node.id === anchor.id
                ? {
                    ...node,
                    draftValues: clearGridSplitDraftValues(node.draftValues),
                  }
                : node,
            ),
          );
          setSelectedNodeId(anchor.id);
          setCanvasCommand(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          setActivePanel(null);
          toast.success("已取消宫格切分");
          return;
        }
        const rects = createEqualGridRects(rows, columns);
        setNodes((current) =>
          current.map((node) =>
            node.id === anchor.id
              ? {
                  ...node,
                  draftValues: {
                    ...(node.draftValues || {}),
                    gridSplit: {
                      columns,
                      detectedDivider: false,
                      rects,
                      rows,
                      selectedIndices: [],
                      sourceMode: "uniform-grid",
                    },
                  },
                }
              : node,
          ),
        );
        setSelectedNodeId(anchor.id);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        toast.success(`已在当前图上按 ${columns}x${rows} 进入 ${tileCount} 宫格选择模式`);
        return;
      }

      const resolvedReferenceImages = await resolveNodeReferenceImages(anchor);
      const sourceUrl = resolvedReferenceImages[0] || anchorSourceUrl;
      if (!sourceUrl) {
        toast.error("请先上传图片或连接上游图片节点，再使用该功能");
        return;
      }
      const extraReferenceImages = resolvedReferenceImages.slice(1);

      const labels: Record<
        Exclude<
          ImageToolbarAction,
          "annotate" | "rotate" | "download" | "preview" | "crop" | "orbit" | "localEdit"
        >,
        string
      > = {
        grid: "九宫格",
        hd: "高清",
        lighting: "打光",
        panorama: "720 全景",
      };
      const title = labels[action];
      if (action === "grid") {
        const functionKey =
          getOfficialImagePresetFunctionKey(option) || MULTI_VIEW_NINE_GRID_FUNCTION_KEY;
        const definition = getConfiguredFunction(videoCanvasFunctionConfig, functionKey);
        const prompt =
          functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY
            ? composeMultiViewNineGridPrompt(definition, option)
            : composeConfiguredImagePresetPrompt(definition, option);
        const shouldGenerate = videoCanvasFunctionConfig.enabled && definition.enabled;
        if (!shouldGenerate) {
          toast.error("该功能尚未启用，请先配置可用模型");
          return;
        }
        const resultTitle = option?.trim() || definition.label || title;
        const gridLayout = getPresetGridLayout(functionKey);

        if (gridLayout) {
          const gridNode = createNineGridCompositeNode({
            anchor,
            columns: gridLayout.columns,
            functionKey,
            gridPrompt: prompt,
            option: resultTitle,
            rows: gridLayout.rows,
            sourceUrl,
            x: rightX,
            y: centerY(OFFICIAL_NINE_GRID_HEIGHT),
          });
          const pendingGridNode: CloneNode = {
            ...gridNode,
            draftValues: {
              ...(gridNode.draftValues || {}),
              functionKey,
              generated: !shouldGenerate,
              generationProgress: shouldGenerate ? 2 : 100,
              generationStatus: shouldGenerate ? "pending" : "complete",
              gridPrompt: prompt,
              mediaUrl: shouldGenerate ? "" : getDraftString(gridNode, "mediaUrl"),
              params: {
                ...getNodeParams(gridNode),
                functionKey,
                mode: "grid",
                option: resultTitle,
                prompt,
                referenceImages: [sourceUrl, ...extraReferenceImages],
                sourceNodeId: anchor.id,
                sourceUrl,
              },
              pendingLabel: "生成中",
              prompt,
              sourceNodeId: anchor.id,
              sourceUrl,
              toolbarOption: resultTitle,
              url: shouldGenerate ? [] : gridNode.draftValues?.url,
            },
          };

          setNodes((current) => [...current, pendingGridNode]);
          setEdges((current) => [
            ...current,
            { id: makeId("edge"), source: anchor.id, target: pendingGridNode.id },
          ]);
          setSelectedNodeId(pendingGridNode.id);
          setCanvasCommand(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          setActivePanel(null);

          if (shouldGenerate) {
            await generationTasks.submit(
              pendingGridNode,
              "image",
              {
                allowFailover: false,
                aspectRatio: "16:9",
                billingFeature: getImageGenerationBillingFeature(functionKey),
                imageCount: 1,
                model: getFunctionModel(videoCanvasFunctionConfig, definition),
                prompt,
                promptExtend: false,
                referenceImage: sourceUrl,
                referenceImages: extraReferenceImages,
              },
              [{ id: makeId("edge"), source: anchor.id, target: pendingGridNode.id }],
            );
          }
          toast.success(
            shouldGenerate
              ? `已创建${definition.label}生成中占位节点`
              : `已创建${definition.label}节点`,
          );
          return;
        }

        const resultNode = createMediaResourceNode({
          action: "IMAGE_GENERATE",
          height: OFFICIAL_NINE_GRID_HEIGHT,
          mediaType: "image",
          mediaUrl: "",
          prompt,
          title: resultTitle,
          width: OFFICIAL_NINE_GRID_WIDTH,
          x: rightX,
          y: centerY(OFFICIAL_NINE_GRID_HEIGHT),
        });
        const pendingNode: CloneNode = {
          ...resultNode,
          subtitle: shouldGenerate ? "生成中" : "生成结果",
          draftValues: {
            ...(resultNode.draftValues || {}),
            action: "IMAGE_GENERATE",
            functionKey,
            generated: false,
            generationProgress: shouldGenerate ? 2 : 0,
            generationStatus: shouldGenerate ? "pending" : "idle",
            mediaType: "image",
            mediaUrl: "",
            nodeType: "image",
            outputSizeLabel: "2752 × 1536",
            params: {
              functionKey,
              mode:
                functionKey === CHARACTER_THREE_VIEW_FUNCTION_KEY ? "character-three-view" : "image",
              option: resultTitle,
              prompt,
              referenceImages: [sourceUrl, ...extraReferenceImages],
              sourceNodeId: anchor.id,
              sourceUrl,
            },
            pendingLabel: "生成中",
            prompt,
            sourceNodeId: anchor.id,
            sourceUrl,
            toolbarOption: resultTitle,
            url: [],
          },
        };

        setNodes((current) => [...current, pendingNode]);
        setEdges((current) => [
          ...current,
          { id: makeId("edge"), source: anchor.id, target: pendingNode.id },
        ]);
        setSelectedNodeId(pendingNode.id);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);

        if (shouldGenerate) {
          await generationTasks.submit(
            pendingNode,
            "image",
            {
              allowFailover: false,
              aspectRatio: "16:9",
              billingFeature: getImageGenerationBillingFeature(functionKey),
              imageCount: 1,
              model: getFunctionModel(videoCanvasFunctionConfig, definition),
              prompt,
              promptExtend: false,
              referenceImage: sourceUrl,
              referenceImages: extraReferenceImages,
            },
            [{ id: makeId("edge"), source: anchor.id, target: pendingNode.id }],
          );
        }
        toast.success(
          shouldGenerate
            ? `已创建${definition.label}生成中占位节点`
            : `已创建${definition.label}节点`,
        );
        return;
      }

      const functionKey =
        action === "lighting"
          ? "lighting"
          : action === "panorama"
          ? "panorama-720"
          : /扩/.test(option || "")
              ? "image-outpaint"
              : /背景/.test(option || "")
                ? "image-repaint"
              : /重绘/.test(option || "")
                ? "image-repaint"
                : /擦/.test(option || "")
                  ? "image-erase"
                  : /抠/.test(option || "")
                    ? "remove-bg"
                    : "hd-upscale";
      const definition = getConfiguredFunction(videoCanvasFunctionConfig, functionKey);
      const prompt = composeFunctionPrompt(definition, option?.trim() || title);

      if (videoCanvasFunctionConfig.enabled && definition?.enabled) {
        const pendingResultNode = createMediaResourceNode({
          action: "IMAGE_RESOURCE",
          height: 280,
          mediaType: "image",
          mediaUrl: "",
          prompt,
          title: definition.label || title,
          width: 420,
          x: rightX,
          y: centerY(280),
        });
        const pendingNode: CloneNode = {
          ...pendingResultNode,
          draftValues: {
            ...(pendingResultNode.draftValues || {}),
            generated: false,
            generationProgress: 2,
            generationStatus: "pending",
            params: {
              mode: action,
              prompt,
              referenceImages: [sourceUrl, ...extraReferenceImages],
              sourceNodeId: anchor.id,
              sourceUrl,
            },
            pendingLabel: "生成中",
            sourceNodeId: anchor.id,
            sourceUrl,
            toolbarOption: option || "",
            url: [],
          },
        };
        setNodes((current) => [...current, pendingNode]);
        setEdges((current) => [
          ...current,
          { id: makeId("edge"), source: anchor.id, target: pendingNode.id },
        ]);
        setSelectedNodeId(pendingNode.id);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);


        if (definition.route === "enhance") {
          await generationTasks.submit(
            pendingNode,
            "image-operation",
            { operation: "enhance", imageUrl: sourceUrl, prompt: prompt },
            [{ id: makeId("edge"), source: anchor.id, target: pendingNode.id }],
          );
          return;
        } else if (definition.route === "extend") {
          await generationTasks.submit(
            pendingNode,
            "image-operation",
            { operation: "extend", imageUrl: sourceUrl, prompt: prompt },
            [{ id: makeId("edge"), source: anchor.id, target: pendingNode.id }],
          );
          return;
        } else if (definition.route === "remove-bg") {
          await generationTasks.submit(
            pendingNode,
            "image-operation",
            { operation: "remove-bg", imageUrl: sourceUrl, prompt: prompt },
            [{ id: makeId("edge"), source: anchor.id, target: pendingNode.id }],
          );
          return;
        } else if (definition.route === "canvas-generate-image") {
          await generationTasks.submit(
            pendingNode,
            "image",
            {
              allowFailover: false,
              aspectRatio: "16:9",
              billingFeature: getImageGenerationBillingFeature(functionKey),
              imageCount: 1,
              model: getFunctionModel(videoCanvasFunctionConfig, definition),
              prompt,
              promptExtend: false,
              referenceImage: sourceUrl,
              referenceImages: extraReferenceImages,
            },
            [{ id: makeId("edge"), source: anchor.id, target: pendingNode.id }],
          );
          return;
        }
          setNodes((current) =>
            current.map((node) =>
              node.id === pendingNode.id && getDraftString(node, "generationStatus") === "pending"
                ? {
                    ...node,
                    draftValues: {
                      ...(node.draftValues || {}),
                      generationStatus: "failed",
                      generationError: `${definition.label || title}处理失败`,
                    },
                  }
                : node,
            ),
          );
        return;
      }

      const created = createTargetModuleNode("image", rightX, 0, nodes.length + 1);
      const resultNode: CloneNode = {
        ...created,
        title,
        y: centerY(created.height),
        draftValues: {
          ...(created.draftValues || {}),
          generatorType: action === "hd" ? "ENHANCE" : "DEFAULT",
          params: {
            mode: action,
            prompt,
            referenceImages: [sourceUrl, ...extraReferenceImages],
            sourceNodeId: anchor.id,
            sourceUrl,
          },
          sourceNodeId: anchor.id,
          sourceUrl,
          toolbarOption: option || "",
        },
      };

      setNodes((current) => [...current, resultNode]);
      setEdges((current) => [
        ...current,
        { id: makeId("edge"), source: anchor.id, target: resultNode.id },
      ]);
      setSelectedNodeId(anchor.id);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setActivePanel(null);
      toast.success(`已创建「${title}」工作流节点`);
    },
    [nodes, videoCanvasFunctionConfig, generationTasks.submit],
  );

  const updateTextResourceContent = useCallback((nodeId: string, content: string) => {
    setNodes((current) =>
      current.map((node) =>
        node.id === nodeId
          ? {
              ...node,
              draftValues: {
                ...(node.draftValues || {}),
                content: content ? [content] : [],
              },
            }
          : node
      )
    );
  }, []);

  const dismissNodeGridSplit = useCallback((nodeId: string) => {
    setNodes((current) =>
      current.map((node) =>
        node.id === nodeId
          ? {
              ...node,
              draftValues: clearGridSplitDraftValues(node.draftValues),
            }
          : node
      )
    );
  }, []);

  const clearNodeGridSplitSelection = useCallback((nodeId: string) => {
    setNodes((current) =>
      current.map((node) => {
        if (node.id !== nodeId) return node;
        const split = getNodeGridSplitState(node);
        if (!split) return node;
        return {
          ...node,
          draftValues: {
            ...(node.draftValues || {}),
            gridSplit: {
              ...split,
              selectedIndices: [],
            },
          },
        };
      })
    );
  }, []);

  const toggleNodeGridSplitSelection = useCallback(
    (nodeId: string, index: number, behavior: "replace" | "toggle" = "replace") => {
      setNodes((current) =>
        current.map((node) => {
          if (node.id !== nodeId) return node;
          const split = getNodeGridSplitState(node);
          if (!split || !split.rects[index]) return node;
          const alreadySelected = split.selectedIndices.includes(index);
          const nextSelected =
            behavior === "toggle"
              ? alreadySelected
                ? split.selectedIndices.filter((item) => item !== index)
                : [...split.selectedIndices, index].sort((left, right) => left - right)
              : alreadySelected && split.selectedIndices.length === 1
                ? []
                : [index];

          return {
            ...node,
            draftValues: {
              ...(node.draftValues || {}),
              gridSplit: {
                ...split,
                selectedIndices: nextSelected,
              },
            },
          };
        })
      );
    },
    []
  );

  const setNodeLocalEditMode = useCallback((nodeId: string, enabled: boolean) => {
    setNodes((current) =>
      current.map((node) =>
        node.id === nodeId
          ? {
              ...node,
              draftValues: {
                ...(node.draftValues || {}),
                localEditMode: enabled,
              },
            }
          : node
      )
    );
  }, []);

  const updateNodeLocalEditRegions = useCallback((nodeId: string, regions: LocalEditRegion[]) => {
    setNodes((current) =>
      current.map((node) =>
        node.id === nodeId
          ? {
              ...node,
              draftValues: {
                ...(node.draftValues || {}),
                localEditRegions: withReindexedLocalEditRegions(regions),
              },
            }
          : node
      )
    );
  }, []);

  const clearNodeLocalEditRegions = useCallback((nodeId: string) => {
    setNodes((current) =>
      current.map((node) =>
        node.id === nodeId
          ? {
              ...node,
              draftValues: {
                ...(node.draftValues || {}),
                localEditRegions: [],
              },
            }
          : node
      )
    );
  }, []);

  const [localEditPollTick,setLocalEditPollTick]=useState(0);
  const pollLocalEditTaskForNode=useCallback(async (_nodeId:string,_taskId:string)=>{setLocalEditPollTick(value=>value+1);},[]);
  const localTaskNodes=useRef(nodes);localTaskNodes.current=nodes;
  useEffect(()=>{
    if(!loadedProject) return;
    let stopped=false,running=false;
    const refresh=async()=>{
      if(running||stopped)return;running=true;
      try {for(const node of localTaskNodes.current) {
        const taskId=String(getNodeParams(node).taskId||"");
        if(!taskId || getDraftString(node,"generationStatus")!=="pending" || node.draftValues?.generationTaskId)continue;
        const response=await imageGenerationService.getImageTask(taskId);
        if(stopped)break;
        const task=response.data?.task;if(!response.success||!task)continue;
        const url=task.result?.images?.[0]?.originalUrl||task.result?.images?.[0]?.thumbnailUrl;
        setNodes(current=>current.map(item=>item.id===node.id&&String(getNodeParams(item).taskId)===taskId?{
          ...item,draftValues:{...item.draftValues,pendingLabel:task.status==="pending"?"排队中":"生成中",
            ...(task.status==="succeeded"&&url?{generationStatus:"complete",generated:true,generationProgress:100,mediaUrl:url,url:[url],localEditMode:false,localEditRegions:[]}:{}),
            ...(task.status==="failed"||task.status==="succeeded"&&!url?{generationStatus:"failed",generationError:task.error||"任务未返回图片"}:{})}
        }:item));
      }} finally {running=false;}
    };
    const wake=()=>{if(document.visibilityState==="visible")void refresh();};
    const timer=setInterval(()=>void refresh(),4000);window.addEventListener("online",wake);window.addEventListener("focus",wake);document.addEventListener("visibilitychange",wake);void refresh();
    return()=>{stopped=true;clearInterval(timer);window.removeEventListener("online",wake);window.removeEventListener("focus",wake);document.removeEventListener("visibilitychange",wake);};
  },[loadedProject,localEditPollTick]);

  const submitNodeLocalEdit = useCallback(
    async (nodeId: string, regions: LocalEditRegion[]) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      if (!anchor) return;
      const validRegions = withReindexedLocalEditRegions(regions).filter((region) => region.prompt.trim());
      if (validRegions.length === 0) {
        toast.error("请至少框选一个区域并填写提示词");
        return;
      }
      const rawSourceUrl = getNodeReferenceMediaUrl(anchor);
      if (!rawSourceUrl) {
        toast.error("当前图片没有可编辑的图片地址");
        return;
      }

      toast.info("正在提交局部编辑任务...");
      const sourceUrl = await ensureRemoteCanvasImageUrl(rawSourceUrl, `canvas-local-edit-${anchor.id}`).catch(() => "");
      if (!sourceUrl) {
        toast.error("当前图片无法上传为可编辑素材");
        return;
      }

      const response = await imageGenerationService.localEdit({
        aspectRatio: "auto",
        imageSize: "2K",
        regions: validRegions.map((region) => ({
          color: region.color,
          id: region.id,
          index: region.index,
          prompt: region.prompt.trim(),
          rect: region.rect,
        })),
        sourceImageUrl: sourceUrl,
        sourceNodeId: anchor.id,
      });
      if (!response.success || !response.data?.taskId) {
        toast.error(response.error || "局部编辑提交失败");
        return;
      }

      const localEditDisplayPrompt =
        response.data.displayPrompt || response.data.prompt || "局部编辑处理";
      const sourceWidth = Number(response.data.sourceWidth || 0);
      const sourceHeight = Number(response.data.sourceHeight || 0);
      const sourceRatio =
        sourceWidth > 0 && sourceHeight > 0 ? sourceWidth / sourceHeight : 0;
      const resultWidth = anchor.width;
      const resultHeight =
        sourceRatio > 0
          ? Math.max(120, Math.round(resultWidth / sourceRatio))
          : anchor.height;
      const resultNode = createMediaResourceNode({
        action: "IMAGE_RESOURCE",
        height: resultHeight,
        mediaType: "image",
        mediaUrl: "",
        prompt: localEditDisplayPrompt,
        title: "局部编辑",
        width: resultWidth,
        x: Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP),
        y: anchor.y,
      });
      const pendingNode: CloneNode = {
        ...resultNode,
        subtitle: "生成中",
        draftValues: {
          ...(resultNode.draftValues || {}),
          action: "IMAGE_RESOURCE",
          annotatedReferenceUrl: response.data.annotatedReferenceUrl,
          aspectRatio: response.data.aspectRatio,
          functionKey: "local-edit",
          generated: false,
          generationProgress: 6,
          generationStatus: "pending",
          localEditMode: false,
          localEditRegions: [],
          mediaType: "image",
          mediaUrl: "",
          nodeType: "image",
          params: {
            annotatedReferenceUrl: response.data.annotatedReferenceUrl,
            aspectRatio: response.data.aspectRatio,
            mode: "local-edit",
            prompt: localEditDisplayPrompt,
            regions: validRegions,
            sourceNodeId: anchor.id,
            sourceHeight: response.data.sourceHeight,
            sourceUrl,
            sourceWidth: response.data.sourceWidth,
            taskId: response.data.taskId,
          },
          pendingLabel: "局部编辑中",
          prompt: localEditDisplayPrompt,
          sourceNodeId: anchor.id,
          sourceLocalEditRegions: validRegions,
          sourceNaturalHeight: response.data.sourceHeight,
          sourceNaturalWidth: response.data.sourceWidth,
          sourceUrl,
          toolbarOption: "局部编辑",
          url: [],
        },
      };

      setNodes((current) =>
        current.map((node) =>
          node.id === anchor.id
            ? {
                ...node,
                draftValues: {
                  ...(node.draftValues || {}),
                  localEditMode: false,
                  localEditRegions: validRegions,
                },
              }
            : node
        ).concat(pendingNode)
      );
      setEdges((current) => [...current, { id: makeId("edge"), source: anchor.id, target: pendingNode.id }]);
      setSelectedNodeId(pendingNode.id);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setActivePanel(null);
      toast.success("已创建局部编辑生成任务");
      void pollLocalEditTaskForNode(pendingNode.id, response.data.taskId);
    },
    [nodes, pollLocalEditTaskForNode]
  );

  const createGridSplitImageNodes = useCallback(
    async (nodeId: string) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      const split = getNodeGridSplitState(anchor);
      const sourceUrl = getNodeGridSplitSourceUrl(anchor);
      if (!anchor || !split || split.selectedIndices.length === 0 || !sourceUrl) {
        toast.error("请先选择需要处理的宫格");
        return;
      }

      const selectedIndices = split.selectedIndices.slice();
      const selectedAssets = await Promise.all(
        selectedIndices.map(async (index) => {
          const rect = split.rects[index];
          if (!rect) return null;
          const url = await createGridSplitReferenceAsset({
            index,
            nodeId: anchor.id,
            rect,
            sourceUrl,
          }).catch(() => "");
          if (!url) return null;
          return { index, rect, url };
        })
      );
      const validAssets = selectedAssets.filter((item): item is NonNullable<typeof item> => Boolean(item));
      if (validAssets.length === 0) {
        toast.error("所选宫格暂时无法切出独立图片");
        return;
      }

      const startX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP);
      const columns = validAssets.length >= 4 ? 2 : 1;
      const columnGap = 52;
      const rowGap = 34;
      const tileWidth = 428;
      const tileHeight = 240;
      const totalHeight =
        Math.ceil(validAssets.length / columns) * tileHeight +
        Math.max(0, Math.ceil(validAssets.length / columns) - 1) * rowGap;
      const startY = Math.round(anchor.y + anchor.height / 2 - totalHeight / 2);

      const createdNodes = validAssets.map((asset, order) => {
        const column = order % columns;
        const row = Math.floor(order / columns);
        const title = `镜头 ${getGridSplitCellLabel(asset.index, split)}`;
        return createMediaResourceNode({
          action: "IMAGE_RESOURCE",
          height: tileHeight,
          mediaType: "image",
          mediaUrl: asset.url,
          title,
          width: tileWidth,
          x: startX + column * (tileWidth + columnGap),
          y: startY + row * (tileHeight + rowGap),
        });
      }).map((node, order) => {
        const asset = validAssets[order];
        return {
          ...node,
          subtitle: "宫格镜头",
          draftValues: {
            ...(node.draftValues || {}),
            cropTile: {
              columns: split.columns,
              detectedDivider: split.detectedDivider,
              index: asset.index,
              rect: asset.rect,
              rows: split.rows,
              sourceCompositeNodeId: anchor.id,
              sourceMode: split.sourceMode,
            },
            mediaUrl: asset.url,
            outputSizeLabel: undefined,
            params: {
              ...(node.draftValues?.params as Record<string, unknown> | undefined),
              cropRect: asset.rect,
              sourceNodeId: anchor.id,
              sourceUrl: asset.url,
            },
            sourceCompositeNodeId: anchor.id,
            sourceNodeId: anchor.id,
            sourceUrl: asset.url,
            url: [asset.url],
          },
        } satisfies CloneNode;
      });

      setNodes((current) => [...current, ...createdNodes]);
      setEdges((current) => [
        ...current,
        ...createdNodes.map((node) => ({
          id: makeId("edge"),
          source: anchor.id,
          target: node.id,
        })),
      ]);
      setSelectedNodeId(createdNodes[0]?.id || anchor.id);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setActivePanel(null);
      toast.success(`已创建 ${createdNodes.length} 个宫格图片节点`);
    },
    [nodes]
  );

  const upscaleSelectedGridSplit = useCallback(
    async (nodeId: string, scaleFactor: number) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      const split = getNodeGridSplitState(anchor);
      const sourceUrl = getNodeGridSplitSourceUrl(anchor);
      if (!anchor || !split || split.selectedIndices.length === 0 || !sourceUrl) {
        toast.error("请先选择需要高清放大的宫格");
        return;
      }

      const definition = getConfiguredFunction(videoCanvasFunctionConfig, "hd-upscale");
      const selectedIndices = split.selectedIndices.slice();
      const selectedAssets = await Promise.all(
        selectedIndices.map(async (index) => {
          const rect = split.rects[index];
          if (!rect) return null;
          const url = await createGridSplitReferenceAsset({
            index,
            nodeId: anchor.id,
            rect,
            sourceUrl,
          }).catch(() => "");
          if (!url) return null;
          return { index, rect, url };
        }),
      );
      const validAssets = selectedAssets.filter((item): item is NonNullable<typeof item> =>
        Boolean(item),
      );
      if (validAssets.length === 0) {
        toast.error("所选宫格暂时无法执行高清放大");
        return;
      }

      const startX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP);
      const columns = validAssets.length >= 4 ? 2 : 1;
      const columnGap = 52;
      const rowGap = 34;
      const tileWidth = 560;
      const tileHeight = 315;
      const totalHeight =
        Math.ceil(validAssets.length / columns) * tileHeight +
        Math.max(0, Math.ceil(validAssets.length / columns) - 1) * rowGap;
      const startY = Math.round(anchor.y + anchor.height / 2 - totalHeight / 2);

      const pendingNodes = validAssets.map((asset, order) => {
        const column = order % columns;
        const row = Math.floor(order / columns);
        const cellLabel = getGridSplitCellLabel(asset.index, split);
        const pending = createMediaResourceNode({
          action: "IMAGE_RESOURCE",
          height: tileHeight,
          mediaType: "image",
          mediaUrl: asset.url,
          prompt: definition.prompt,
          title: `宫格高清 ${cellLabel}`,
          width: tileWidth,
          x: startX + column * (tileWidth + columnGap),
          y: startY + row * (tileHeight + rowGap),
        });
        return {
          ...pending,
          subtitle: "生成中",
          draftValues: {
            ...(pending.draftValues || {}),
            action: "IMAGE_RESOURCE",
            functionKey: definition.key,
            generated: false,
            generationProgress: 2,
            generationStatus: "pending",
            mediaType: "image",
            mediaUrl: asset.url,
            nodeType: "image",
            outputSizeLabel: `${scaleFactor}x 高清`,
            params: {
              functionKey: definition.key,
              mode: "grid-split-upscale",
              prompt: definition.prompt,
              scaleFactor,
              sourceNodeId: anchor.id,
              sourceTileIndex: asset.index,
              sourceUrl: asset.url,
            },
            pendingLabel: "生成中",
            prompt: definition.prompt,
            sourceCompositeNodeId: anchor.id,
            sourceNodeId: anchor.id,
            sourceUrl: asset.url,
            toolbarOption: `x${scaleFactor}`,
            url: [asset.url],
          },
        } satisfies CloneNode;
      });

      setNodes((current) => [...current, ...pendingNodes]);
      setEdges((current) => [
        ...current,
        ...pendingNodes.map((node) => ({
          id: makeId("edge"),
          source: anchor.id,
          target: node.id,
        })),
      ]);
      setSelectedNodeId(anchor.id);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setActivePanel(null);

      for (const [order, asset] of validAssets.entries()) {
        const pendingNode = pendingNodes[order];
        await generationTasks.submit(
          { ...pendingNode, draftValues: { ...clearGridSplitDraftValues(pendingNode.draftValues) } },
          "image-operation",
          { operation: "enhance", imageUrl: asset.url, scaleFactor },
          [{ id: makeId("edge"), source: anchor.id, target: pendingNode.id }],
        );
      }

      toast.success(`已提交 ${validAssets.length} 张宫格图的 ${scaleFactor}x 高清放大`);
    },
    [nodes, videoCanvasFunctionConfig, generationTasks.submit],
  );

  const submitSelectedImagePrompt = useCallback(
    async (nodeId: string, payload: ComposerSubmitPayload) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      if (!anchor) return;
      if (activeGenerationSubmissions.current.has(nodeId)) {
        toast.info("该节点正在生成，请等待当前任务完成");
        return;
      }
      activeGenerationSubmissions.current.add(nodeId);
      try {
        const hasAnchorOutput = Boolean(getNodeMediaUrl(anchor));
        const inputEdges = hasAnchorOutput
          ? edges.filter(edge => edge.target !== nodeId || nodes.some(node => node.id === edge.source && node.inputType === "text"))
          : edges;
        const incoming = readyCanvasInputs(nodes, inputEdges, nodeId);
        if (!incoming) return;
        if (hasAnchorOutput) assertConnectedInputsReady([anchor]);
        const anchorSplit = getNodeGridSplitState(anchor);
        const anchorReferenceImages = await resolveNodeReferenceImages(anchor);
        const referenceIds = Array.from(new Set([...incoming.map(node => node.id), ...payload.references]));
        const referencedNodes = referenceIds
          .filter((referenceId) => referenceId !== anchor.id)
          .map((referenceId) => nodes.find((node) => node.id === referenceId))
          .filter((node): node is CloneNode => Boolean(node));
        const referencedImageLists = await Promise.all(
          referencedNodes.filter(node => node.inputType === "image").map((node) => resolveNodeReferenceImages(node)),
        );
        const mergedReferenceImages = Array.from(
          new Set(
            [...anchorReferenceImages, ...referencedImageLists.flat()]
              .map((item) => String(item || "").trim())
              .filter(Boolean),
          ),
        ).slice(0, 12);
        const sourceUrl = mergedReferenceImages[0] || getNodeReferenceMediaUrl(anchor) || "";
        const extraReferenceImages = mergedReferenceImages.slice(1);
        const rightX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP);
        const starterMode = getPresetMode(anchor);
        const slashScene = payload.slashScene || "";
        const promptInput = withConnectedText(payload.prompt, incoming);
        if (!promptInput.trim() && !slashScene.trim()) {
          throw new Error("请先输入图片生成或编辑指令");
        }
        const slashFunctionKey = getOfficialImagePresetFunctionKey(slashScene);
        const functionKey =
          slashFunctionKey ||
          (starterMode === CHARACTER_THREE_VIEW_FUNCTION_KEY
            ? CHARACTER_THREE_VIEW_FUNCTION_KEY
            : mergedReferenceImages.length > 0 ? "image-repaint" : "image-generate");
        const definition = getConfiguredFunction(videoCanvasFunctionConfig, functionKey);
        const isWideGeneration = isWideImageGenerationFunction(functionKey);
        const resultWidth = isWideGeneration ? OFFICIAL_NINE_GRID_WIDTH : 420;
        const resultHeight = isWideGeneration ? OFFICIAL_NINE_GRID_HEIGHT : 280;
        const resultTitle = slashScene || definition.label || "图片生成";
        const gridLayout = getPresetGridLayout(functionKey);
        const count = canvasGenerationCount(payload.settings.count);
        const finalPrompt =
          functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY
            ? composeMultiViewNineGridPrompt(definition, promptInput || slashScene || "多机位九宫格")
            : isWideGeneration
              ? composeConfiguredImagePresetPrompt(
                  definition,
                  promptInput || slashScene || definition.label,
                )
              : composeFunctionPrompt(definition, promptInput || slashScene);

        const placeholderNode = isWideGeneration
          ? createMediaResourceNode({
              action: isPresetGridFunction(functionKey)
                ? "IMAGE_GENERATE_NINE_GRID"
                : "IMAGE_GENERATE",
              height: resultHeight,
              mediaType: "image",
              mediaUrl: "",
              prompt: finalPrompt,
              title: resultTitle,
              width: resultWidth,
              x: rightX,
              y: Math.round(anchor.y + anchor.height / 2 - resultHeight / 2),
            })
          : createTargetModuleNode("image", rightX, 0, nodes.length + 1);
        const created = placeholderNode;
        const resultNode: CloneNode = {
          ...created,
          title: resultTitle,
          y: isWideGeneration
            ? placeholderNode.y
            : Math.round(anchor.y + anchor.height / 2 - created.height / 2),
          draftValues: {
            ...(created.draftValues || {}),
            action: isPresetGridFunction(functionKey) ? "IMAGE_GENERATE_NINE_GRID" : "IMAGE_GENERATE",
            functionKey,
            generated: false,
            generationError: undefined,
            generationProgress: 2,
            generationStatus: "pending",
            gridColumns: gridLayout?.columns || created.draftValues?.gridColumns,
            gridPrompt: gridLayout ? finalPrompt : created.draftValues?.gridPrompt,
            gridRows: gridLayout?.rows || created.draftValues?.gridRows,
            nineGridCells: gridLayout
              ? Array.from({ length: gridLayout.rows * gridLayout.columns }).map((_, index) =>
                  getGridCellVisual(index),
                )
              : created.draftValues?.nineGridCells,
            nineGridComposite: gridLayout ? true : created.draftValues?.nineGridComposite,
            outputSizeLabel: undefined,
            params: {
              functionKey,
              mode:
                functionKey === CHARACTER_THREE_VIEW_FUNCTION_KEY
                  ? "character-three-view"
                  : isPresetGridFunction(functionKey)
                    ? "grid"
                    : "image",
              prompt: finalPrompt,
              references: payload.references,
              referenceImages: mergedReferenceImages,
              selectedGridCellCount: anchorSplit?.selectedIndices.length || 0,
              settings: payload.settings,
              slashScene,
              sourceNodeId: anchor.id,
              sourceUrl,
            },
            pendingLabel: "生成中",
            prompt: finalPrompt,
            sourceNodeId: anchor.id,
            sourceUrl,
            targetPreset: starterMode || undefined,
            toolbarOption: slashScene,
          },
        };
        const referenceEdges = referenceIds
          .filter(
            (referenceId) =>
              referenceId !== anchor.id && nodes.some((node) => node.id === referenceId),
          )
          .map((referenceId) => ({ id: makeId("edge"), source: referenceId, target: resultNode.id }));

        setNodes((current) => [...current, resultNode]);
        setEdges((current) => [
          ...current,
          { id: makeId("edge"), source: anchor.id, target: resultNode.id },
          ...referenceEdges,
        ]);
        setSelectedNodeId(anchor.id);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        toast.success("已提交图片生成");

        if (!videoCanvasFunctionConfig.enabled || !definition.enabled) throw new Error("该图片功能尚未启用");
        await generationTasks.submit(resultNode,"image",{
          ...canvasImageRequest({...payload.settings,model:getFunctionModel(videoCanvasFunctionConfig,definition,payload.settings.model)},[sourceUrl,...extraReferenceImages],isWideGeneration),
          allowFailover:false,billingFeature:getImageGenerationBillingFeature(functionKey),prompt:finalPrompt,promptExtend:!isWideGeneration,
        },[{id:makeId("edge"),source:anchor.id,target:resultNode.id},...referenceEdges]);

      } catch (error) {
        toast.error(error instanceof Error ? error.message : "提交失败，请检查上游输入");
      } finally {
        activeGenerationSubmissions.current.delete(nodeId);
      }
    },
    [edges, nodes, videoCanvasFunctionConfig, generationTasks.submit],
  );

  const persistVideoComposerSettings = useCallback((nodeId: string, settings: ComposerSettings, mode: VideoGenerationMode) => {
    setNodes(current => current.map(node => {
      if (node.id !== nodeId) return node;
      const params = getNodeParams(node);
      if (params.mode === mode && params.model === settings.model && JSON.stringify(params.settings) === JSON.stringify(settings)) return node;
      return {...node, draftValues: {...node.draftValues, params: {...params, mode, model: settings.model, ratio: settings.ratio, resolution: settings.resolution, duration: normalizeVideoDurationValue(settings.duration), settings}}};
    }));
  }, []);

  const submitVideoTargetComposer = useCallback(
    async (nodeId: string, payload?: VideoTargetComposerSubmitPayload) => {
      const node = nodes.find((item) => item.id === nodeId);
      if (!node) return;
      if (activeGenerationSubmissions.current.has(nodeId)) {
        toast.info("该节点正在生成，请等待当前任务完成");
        return;
      }
      activeGenerationSubmissions.current.add(nodeId);
      try {
        const incomingNodes = readyCanvasInputs(nodes, edges, nodeId);
      if (!incomingNodes) return;
        const imageReferenceLists = await Promise.all(
          incomingNodes
            .filter((item) => item.inputType === "image")
            .map((item) => resolveNodeReferenceImages(item)),
        );
        const effectMaterials = incomingNodes.filter(isVideoEffectMaterialNode);
        const effectDescriptors = effectMaterials.map((item) => ({
          id: getDraftString(item, "effectId"),
          title: getDraftString(item, "effectTitle") || item.title.replace(/^素材-特效-/, ""),
          prompt: getDraftString(item, "effectPrompt"),
          model: getDraftString(item, "model"),
          thumbnailUrl: getDraftString(item, "thumbnailUrl") || getNodeMediaUrl(item),
        }));
        const roleMaterials = incomingNodes.filter(isVideoRoleMaterialNode);
        const roleDescriptors = roleMaterials.map((item) => ({
          id: getDraftString(item, "roleId"),
          assetId: getDraftString(item, "assetId"),
          name: getDraftString(item, "roleName") || item.title.replace(/^素材-角色-/, ""),
          prompt: getDraftString(item, "rolePrompt"),
          tags: getDraftString(item, "roleTags"),
          thumbnailUrl: getDraftString(item, "thumbnailUrl") || getNodeMediaUrl(item),
        }));
        const imageUrls = connectedImageUrls(imageReferenceLists, roleMaterials.map(getNodeReferenceMediaUrl).filter(Boolean));
        const params = (node.draftValues?.params || {}) as Record<string, unknown>;
        const paramsSettings =
          params.settings && typeof params.settings === "object"
            ? (params.settings as Record<string, unknown>)
            : {};
        const requestedMode =
          payload?.mode ||
          normalizeVideoGenerationMode(params.mode || paramsSettings.mode) ||
          (imageUrls.length >= 2
            ? "first-last-frame"
            : imageUrls.length >= 1
              ? "first-frame"
              : "text-to-video");
        const definition = getConfiguredFunction(
          videoCanvasFunctionConfig,
          getVideoFunctionKeyForMode(requestedMode),
        );
        if (!videoCanvasFunctionConfig.enabled || !definition.enabled) { toast.error("该视频功能尚未启用"); return; }
        const requestedSettings = payload?.settings;
        const magicMarks = payload?.magicMarks || getVideoCanvasMagicMarks(node);
        const preferredModelOverride =
          requestedSettings?.model || String(params.model || paramsSettings.model || "");
        const preferredModelRef = getFunctionModel(
          videoCanvasFunctionConfig,
          definition,
          preferredModelOverride,
        );
        const ratio = normalizeVideoRatioValue(
          requestedSettings?.ratio || params.ratio || paramsSettings.ratio,
        );
        const requestedResolution = requestedSettings?.resolution || params.resolution || paramsSettings.resolution;
        assertExecutableVideoResolution(requestedResolution);
        const resolution = normalizeVideoResolutionValue(requestedResolution);
        const duration = normalizeVideoDurationValue(
          requestedSettings?.duration || params.duration || paramsSettings.duration,
        );
        const markedImageUrls = Array.from(
          new Set(magicMarks.map((mark) => mark.imageUrl).filter(Boolean)),
        ).slice(0, 4);
        const limitError = videoInputLimitError(requestedMode, imageUrls.length);
        if (limitError) throw new Error(limitError);
        const referenceImages =
          requestedMode === "text-to-video" && markedImageUrls.length > 0
            ? markedImageUrls
            : selectVideoReferenceImages(imageUrls, requestedMode);
        if (requestedMode === "first-frame" && referenceImages.length < 1) {
          toast.error("图生视频至少需要 1 张参考图片");
          return;
        }
        if (requestedMode === "first-last-frame" && referenceImages.length < 2) {
          toast.error("首尾帧模式至少需要 2 张参考图片");
          return;
        }
        if (requestedMode === "reference-images" && referenceImages.length < 1) {
          toast.error("全能参考至少需要 1 张参考图片");
          return;
        }

        const rawPrompt = withConnectedText(String(
          payload?.prompt ?? params.prompt ?? node.draftValues?.prompt ?? "",
        ), incomingNodes);
        const markLabels = magicMarks.map(
          (mark) => mark.labelOptions[mark.selectedIndex] || mark.labelOptions[0],
        );
        const promptWithMarks = [
          rawPrompt,
          markLabels.length > 0
            ? `重点遵循已标记元素：${markLabels.map((label) => `@${label}`).join("、")}`
            : "",
        ]
          .filter(Boolean)
          .join(" ");
        const promptWithEffects = [
          promptWithMarks,
          ...effectDescriptors.map((effect) =>
            [`应用视频特效「${effect.title}」。`, effect.prompt].filter(Boolean).join(" "),
          ),
        ]
          .filter(Boolean)
          .join(" ");
        const promptWithRoles = [
          promptWithEffects,
          ...roleDescriptors.map((role) =>
            [
              `角色引用「${role.name}」${role.assetId ? `（合规资产 ${role.assetId}）` : ""}。`,
              role.prompt,
            ]
              .filter(Boolean)
              .join(" "),
          ),
        ]
          .filter(Boolean)
          .join(" ");
        const finalPrompt = composeFunctionPrompt(definition, promptWithRoles || node.title);
        const previewUrl =
          referenceImages[0] ||
          getNodeReferenceMediaUrl(incomingNodes.find((item) => item.inputType === "image")) ||
          getNodeReferenceMediaUrl(node) ||
          "";
        const savedSettings: ComposerSettings & { duration: string } = {
          autoValidateMaterial: false,
          audio: requestedSettings?.audio || String(paramsSettings.audio || "开启"),
          camera: requestedSettings?.camera || String(paramsSettings.camera || "摄像机"),
          count: requestedSettings?.count || String(paramsSettings.count || "1个"),
          model: normalizeModelRef(preferredModelOverride) || "auto",
          modelLabel: requestedSettings?.modelLabel || String(paramsSettings.modelLabel || ""),
          panorama: requestedSettings?.panorama || String(paramsSettings.panorama || "全能参考"),
          ratio: formatVideoRatioLabel(ratio),
          resolution: formatVideoResolutionLabel(resolution),
          searchEnabled: false,
          duration: formatVideoDurationLabel(duration),
        };

        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "media",
                  subtitle: "生成中",
                  draftValues: {
                    ...clearGridSplitDraftValues(item.draftValues),
                    action: "VIDEO_GENERATE",
                    generated: false,
                    generationError: undefined,
                    generationProgress: 2,
                    generationStatus: "pending",
                    mediaType: "video",
                    mediaUrl: "",
                    nodeType: "video",
                    poster: previewUrl,
                    params: {
                      ...getNodeParams(item),
                      duration,
                      effects: effectDescriptors,
                      roles: roleDescriptors,
                      mode: requestedMode,
                      magicMarks,
                      model: normalizeModelRef(preferredModelOverride) || undefined,
                      prompt: rawPrompt || finalPrompt,
                      ratio,
                      referenceImages,
                      resolution,
                      settings: savedSettings,
                    },
                    prompt: rawPrompt || finalPrompt,
                    sourceUrl: previewUrl,
                    url: [],
                  },
                }
              : item,
          ),
        );

        const batchCount = canvasGenerationCount(savedSettings.count);
        const siblings = Array.from({ length: batchCount - 1 }, (_, index) => ({
          ...node,
          kind: "media" as const,
          inputType: "video" as const,
          id: makeId("video-result"),
          title: `${node.title} ${index + 2}`,
          y: node.y + (index + 1) * (node.height + 40),
          draftValues: {
            ...node.draftValues,
            generated: false,
            generationStatus: "pending",
            generationProgress: 0,
            pendingLabel: "排队中",
            generationError: undefined,
            mediaUrl: "",
            url: [],
            poster: previewUrl,
            params: {
              ...getNodeParams(node),
              settings: savedSettings,
              mode: requestedMode,
              prompt: finalPrompt,
            },
          },
        }));
        if (siblings.length) {
          setNodes((current) => [...current, ...siblings]);
          setEdges((current) => [
            ...current,
            ...siblings.flatMap((sibling) =>
              incomingNodes.map((source) => ({
                id: makeId("edge"),
                source: source.id,
                target: sibling.id,
              })),
            ),
          ]);
        }
        const primary = {...node,kind:"media" as const,draftValues:{...node.draftValues,action:"VIDEO_GENERATE",mediaUrl:"",url:[],mediaType:"video",poster:previewUrl,
          params:{...getNodeParams(node),settings:savedSettings,mode:requestedMode,referenceImages,prompt:finalPrompt}}};
        for (const job of [primary,...siblings]) {
          await generationTasks.submit(job,"video",{duration,images:referenceImages,mode:requestedMode,preferredModelRef,prompt:finalPrompt,
            generateAudio:savedSettings.audio!=="关闭",ratio,resolution},incomingNodes.map(source=>({id:makeId("edge"),source:source.id,target:job.id})));
        }
        toast.success(`已提交 ${batchCount} 个视频任务，可离开页面后返回查看`);

      } catch (error) {
        toast.error(error instanceof Error ? error.message : "提交失败，请检查上游输入");
      } finally {
        activeGenerationSubmissions.current.delete(nodeId);
      }
    },
    [edges, nodes, videoCanvasFunctionConfig, generationTasks.submit],
  );

  const runStoryScriptToolbarAction = useCallback(
    async (nodeId: string, action: StoryToolbarAction) => {
      const anchor = nodes.find((item) => item.id === nodeId);
      if (!anchor) return;
      const rowKey = (row: StoryScriptRow) => row.shot || row.id;
      const closeTransientUi = () => {
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
      };

      if (action === "regenerate") {
        const incomingNodes = readyCanvasInputs(nodes, edges, nodeId);
      if (!incomingNodes) return;
        const imageUrls = incomingNodes
          .filter((item) => item.inputType === "image")
          .map((item) => getNodeReferenceMediaUrl(item))
          .filter(Boolean);
        const videoUrls = incomingNodes
          .filter((item) => item.inputType === "video")
          .map((item) => getNodeReferenceMediaUrl(item))
          .filter(Boolean);
        const definition = getConfiguredFunction(videoCanvasFunctionConfig, "story-script");
        const currentParams = getNodeParams(anchor);
        const selectedModelRef = normalizeModelRef(currentParams.model);
        const draftPrompt = getDraftString(anchor, "prompt") || STORY_SCRIPT_PROMPT;
        const prompt = composeFunctionPrompt(definition, withConnectedText(draftPrompt, incomingNodes));
        if (!videoCanvasFunctionConfig.enabled || !definition.enabled) {toast.error("脚本生成功能尚未启用");return;}
        void generationTasks.submit({...anchor,draftValues:{...anchor.draftValues,params:{...currentParams,functionKey:"story-script",prompt},prompt}},"analysis",{
          imageUrls,videoUrls,mode:"story-script",nodeTitle:anchor.title,prompt,
          preferredModelRef:getFunctionModel(videoCanvasFunctionConfig,definition,selectedModelRef),
        }).catch(error=>toast.error(error.message));
        closeTransientUi();
        return;
      }

      const rows = getStoryScriptRows(anchor);
      if (rows.length === 0) {
        toast.error("当前脚本没有可操作的镜头行");
        return;
      }

      const existingStoryboards = nodes.filter(
        (item) =>
          String(item.draftValues?.sourceScriptNodeId || "") === nodeId &&
          String(item.draftValues?.storyToolNodeType || "") === "storyboard"
      );
      const existingStoryboardKeys = new Set(
        existingStoryboards
          .map((item) => {
            const storyRow = item.draftValues?.storyRow as StoryScriptRow | undefined;
            return storyRow ? rowKey(storyRow) : "";
          })
          .filter(Boolean)
      );
      const rowsToCreate = rows.filter((row) => !existingStoryboardKeys.has(rowKey(row)));

      const sceneNodes = nodes.filter(
        (item) =>
          String(item.draftValues?.sourceScriptNodeId || "") === nodeId &&
          String(item.draftValues?.storyToolNodeType || "") === "scene"
      );
      const sceneByKey = new Map(
        sceneNodes
          .map((item) => {
            const storyRow = item.draftValues?.storyRow as StoryScriptRow | undefined;
            return storyRow ? [rowKey(storyRow), item] as const : null;
          })
          .filter((item): item is readonly [string, CloneNode] => Boolean(item))
      );
      const storyboardByKey = new Map(
        existingStoryboards
          .map((item) => {
            const storyRow = item.draftValues?.storyRow as StoryScriptRow | undefined;
            return storyRow ? [rowKey(storyRow), item] as const : null;
          })
          .filter((item): item is readonly [string, CloneNode] => Boolean(item))
      );

      if (action === "create-storyboard") {
        const retryable = existingStoryboards.filter(item=>!getNodeMediaUrl(item) && ["failed","idle", ""].includes(getDraftString(item,"generationStatus")));
        if (rowsToCreate.length === 0 && retryable.length === 0) {
          setSelectedNodeId(existingStoryboards[0]?.id || nodeId);
          closeTransientUi();
          toast.info("当前脚本已经创建过分镜节点");
          return;
        }

        const width = 420;
        const height = 280;
        const fallbackX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP + (sceneNodes.length > 0 ? 472 : 0));
        const nextNodes = rowsToCreate.map((row) => {
          const rowIndex = Math.max(0, rows.findIndex((item) => rowKey(item) === rowKey(row)));
          const sceneNode = sceneByKey.get(rowKey(row));
          const x = sceneNode ? Math.round(sceneNode.x + sceneNode.width + 52) : fallbackX;
          const y = sceneNode ? sceneNode.y : Math.round(anchor.y + rowIndex * (height + 30));
          const prompt = [
            row.imagePrompt,
            `景别：${row.shotSize}`,
            `光影氛围：${row.lighting}`,
            row.dialogue && row.dialogue !== "+" ? `对白/旁白：${row.dialogue}` : "",
            row.voiceAndSfx && row.voiceAndSfx !== "无" ? `音效：${row.voiceAndSfx}` : "",
            `运镜：${row.cameraMovement}`,
            row.motionPrompt,
          ].filter(Boolean).join("\n");
          return {
            id: makeId("storyboard"),
            kind: "media",
            title: `分镜 ${row.shot}`,
            subtitle: row.scene,
            inputType: "image",
            x,
            y,
            width,
            height,
            accent: "#8790ff",
            draftValues: {
              action: "IMAGE_GENERATE",
              functionKey: "image-repaint",
              generated: false,
              mediaType: "image",
              mediaUrl: row.keyframeUrl,
              nodeType: "image",
              params: {
                functionKey: "image-repaint",
                referenceImages: (Array.isArray(anchor.draftValues?.storyAssets) ? anchor.draftValues.storyAssets as StoryWorkflowAsset[] : []).filter(asset=>asset.imageUrl && [row.sceneDescription,row.imagePrompt].join(" ").includes(`@${asset.name}`)).map(asset=>asset.imageUrl),
                motionPrompt: row.motionPrompt,
                prompt,
                sceneDescription: row.sceneDescription,
                sourceSceneNodeId: sceneNode?.id,
                sourceScriptNodeId: nodeId,
                storyRow: row,
              },
              prompt,
              sourceScriptNodeId: nodeId,
              sourceUrl: row.keyframeUrl,
              storyRow: row,
              storyToolNodeType: "storyboard",
              url: row.keyframeUrl ? [row.keyframeUrl] : [],
            },
          } satisfies CloneNode;
        });
        const nextEdges = nextNodes.map((node) => ({
          id: makeId("edge"),
          source: String(node.draftValues?.params && (node.draftValues.params as Record<string, unknown>).sourceSceneNodeId || anchor.id),
          target: node.id,
        }));

        addNodes(nextNodes, nextEdges);
        setSelectedNodeId(nextNodes[0]?.id || anchor.id);
        closeTransientUi();
        const definition=getConfiguredFunction(videoCanvasFunctionConfig,"image-repaint");
        if(!videoCanvasFunctionConfig.enabled||!definition.enabled) {toast.error("图片生成功能未启用，已保留分镜节点供稍后生成");return;}
        for(const job of [...nextNodes,...retryable]) {
          if(getNodeMediaUrl(job)) continue;
          const params=getNodeParams(job);
          const refs=Array.isArray(params.referenceImages)?params.referenceImages as string[]:[];
          try {await generationTasks.submit(job,"image",{prompt:String(params.prompt||""),model:getFunctionModel(videoCanvasFunctionConfig,definition),
            referenceImage:refs[0],referenceImages:refs.slice(1),imageCount:1,aspectRatio:"16:9",imageSize:"1K",allowFailover:false,billingFeature:"repaint"},nextEdges.filter(edge=>edge.target===job.id));}
          catch(error){toast.error(`${job.title}：${error instanceof Error?error.message:"提交失败"}`);}
        }
        toast.success("分镜图片已加入生成队列");
        return;
      }

      const existingVideos = nodes.filter(
        (item) =>
          String(item.draftValues?.sourceScriptNodeId || "") === nodeId &&
          String(item.draftValues?.storyToolNodeType || "") === "story-video"
      );
      const existingVideoKeys = new Set(
        existingVideos
          .map((item) => {
            const storyRow = item.draftValues?.storyRow as StoryScriptRow | undefined;
            return storyRow ? rowKey(storyRow) : "";
          })
          .filter(Boolean)
      );
      const rowsForVideo = rows.filter((row) => !existingVideoKeys.has(rowKey(row)));
      const retryable=existingVideos.filter(item=>getDraftString(item,"generationStatus")==="failed" || getDraftString(item,"generationStatus")==="idle");

      if (rowsForVideo.length === 0 && retryable.length === 0) {
        setSelectedNodeId(existingVideos[0]?.id || nodeId);
        closeTransientUi();
        toast.info("当前脚本已经创建过视频生成器组");
        return;
      }

      const width = 622;
      const height = 350;
      const fallbackX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP + (existingStoryboards.length > 0 ? 472 : 0));
      let nextNodes:CloneNode[];
      try { nextNodes = rowsForVideo.map((row) => {
        const rowIndex = Math.max(0, rows.findIndex((item) => rowKey(item) === rowKey(row)));
        const storyboardNode = storyboardByKey.get(rowKey(row));
        const referenceImage = storyboardNode ? getNodeReferenceMediaUrl(storyboardNode) : row.keyframeUrl;
        const previewUrl = referenceImage || row.keyframeUrl || "";
        const functionKey=referenceImage?"first-frame-video":"text-to-video";
        const definition=getConfiguredFunction(videoCanvasFunctionConfig,functionKey);
        if(!videoCanvasFunctionConfig.enabled||!definition.enabled) throw new Error("该视频生成功能尚未启用");
        const selected=chooseStoryVideoSettings(canvasModelOptions,Boolean(referenceImage),Number.parseFloat(row.duration)||5,getFunctionModel(videoCanvasFunctionConfig,definition));
        const {duration,model}=selected;
        const settings: ComposerSettings = {
          audio: selected.generateAudio ? "开启" : "关闭",
          camera: "摄像机",
          count: "1个",
          duration: `${duration}s`,
          model,
          modelLabel: "",
          panorama: referenceImage ? "首帧生成视频" : "文生视频",
          ratio: selected.ratio,
          resolution: selected.resolution,
        };
        const prompt = buildStoryVideoPrompt(row);
        return {
          id: makeId("story-video"),
          kind: "media",
          title: `分镜视频-#${rowIndex + 1}`,
          subtitle: `${row.scene} · 待生成`,
          inputType: "video",
          x: storyboardNode ? Math.round(storyboardNode.x + storyboardNode.width + 52) : fallbackX,
          y: storyboardNode ? storyboardNode.y : Math.round(anchor.y + rowIndex * (height + 30)),
          width,
          height,
          accent: "#8b96ff",
          draftValues: {
            action: "VIDEO_GENERATE",
            functionKey,
            generated: false,
            generationProgress: 0,
            generationStatus: "idle",
            mediaType: "video",
            mediaUrl: "",
            nodeType: "video",
            outputSizeLabel: `${selected.resolution} · ${duration}s`,
            params: {
              duration,
              functionKey,
              imagePrompt: row.imagePrompt,
              mode: referenceImage ? "first-frame" : "text-to-video",
              model,
              modelLabel: "",
              motionPrompt: row.motionPrompt,
              prompt,
              ratio: selected.ratio,
              referenceImages: referenceImage ? [referenceImage] : [],
              resolution: selected.resolution,
              sceneDescription: row.sceneDescription,
              settings,
              sourceShotDuration: row.duration,
              sourceScriptNodeId: nodeId,
              sourceStoryboardNodeId: storyboardNode?.id,
              storyRow: row,
            },
            poster: previewUrl,
            prompt,
            sourceScriptNodeId: nodeId,
            sourceStoryboardNodeId: storyboardNode?.id,
            sourceUrl: previewUrl,
            storyRow: row,
            storyToolNodeType: "story-video",
            url: [],
          },
        } satisfies CloneNode;
      });
      } catch(error) {toast.error(error instanceof Error?error.message:"模型规格无效");return;}
      const nextEdges = nextNodes.map((node) => ({
        id: makeId("edge"),
        source: String(node.draftValues?.sourceStoryboardNodeId || anchor.id),
        target: node.id,
      }));

      addNodes(nextNodes, nextEdges);
      setSelectedNodeId(nextNodes[0]?.id || anchor.id);
      closeTransientUi();
      for(const job of [...nextNodes,...retryable]) {
        const params=getNodeParams(job);
        const refs=Array.isArray(params.referenceImages)?params.referenceImages as string[]:[];
        try {
          const selected=chooseStoryVideoSettings(canvasModelOptions,Boolean(refs.length),Number(params.duration)||5,String(params.model||""));
          await generationTasks.submit(job,"video",{prompt:String(params.prompt||""),images:refs,...selected,preferredModelRef:selected.model},nextEdges.filter(edge=>edge.target===job.id));
        } catch(error) {toast.error(`${job.title}：${error instanceof Error?error.message:"提交失败"}`);}
      }
      toast.success("分镜视频已加入队列；已完成镜头不会重复生成");
    },
    [addNodes, edges, nodes, videoCanvasFunctionConfig, canvasModelOptions, generationTasks.submit]
  );

  const updateVideoClipRange = useCallback((nodeId: string, nextRange: VideoClipRange) => {
    const start = Math.max(0, Math.min(nextRange.start, 0.94));
    const range = { start, end: Math.max(start + 0.04, Math.min(nextRange.end, 1)) };
    setVideoClipRanges(current => ({ ...current, [nodeId]: range }));
    setNodes(current => current.map(node => node.id === nodeId
      ? { ...node, draftValues: { ...node.draftValues, clipRange: range } } : node));
  }, []);

  const applyVideoClipSelection = useCallback(async (nodeId: string) => {
    const source = nodes.find(item => item.id === nodeId);
    if (!source || clipRequestRunning.current) return;
    const url = getNodeReferenceMediaUrl(source) || getNodeMediaUrl(source);
    if (!url) { toast.error("请先上传视频"); return; }
    const range = normalizeVideoClipRange(videoClipRanges[nodeId] || source.draftValues?.clipRange);
    clipRequestRunning.current = true;
    setClipProcessingNodeId(nodeId);
    try {
      const response = await fetch("/api/canvas/video/process", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ operation: "trim", url, range }),
        signal: AbortSignal.timeout(295_000),
      });
      const result = await response.json();
      if (!response.ok || !result.success || !result.data?.url) throw new Error(result.error || "视频剪辑失败");
      const created = createMediaResourceNode({ action: "VIDEO_TRIM", mediaType: "video", mediaUrl: result.data.url,
        title: `${source.title} · 剪辑`, x: source.x + source.width + 80, y: source.y });
      const clipNode = { ...created, subtitle: "剪辑结果", draftValues: { ...created.draftValues,
        generated: true, generationStatus: "complete", generationProgress: 100, uploadStatus: "complete",
        durationSeconds: result.data.duration, outputSizeLabel: `${result.data.width} × ${result.data.height}`,
        sourceVideoNodeId: source.id, sourceClipRange: range } };
      addNodes([clipNode], [{ id: makeId("edge"), source: nodeId, target: clipNode.id }]);
      setSelectedNodeId(clipNode.id);
      setActiveVideoToolbarMode(null);
      toast.success("视频剪辑完成，已生成新视频");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "视频剪辑失败，原视频已保留");
    } finally {
      clipRequestRunning.current = false;
      setClipProcessingNodeId(null);
    }
  }, [addNodes, nodes, videoClipRanges]);

  const downloadMediaNode = useCallback(async (node: CloneNode) => {
    try { await downloadCanvasMedia([{url: getNodeMediaUrl(node), name: node.title}]); }
    catch(error) { toast.error(error instanceof Error ? error.message : "下载失败"); }
  }, []);

  const downloadVideoNode = useCallback((node: CloneNode) => {
    downloadMediaNode(node);
  }, [downloadMediaNode]);

  const openHistoryWatermarkRules = useCallback((node: CloneNode) => {
    setHistoryListDownloadPendingId(node.id);
    setHistoryWatermarkRulesOpen(true);
  }, []);

  const saveHistoryWatermarkRules = useCallback(() => {
    setHistoryWatermarkRulesOpen(false);
    setHistoryListDownloadPendingId(null);
  }, []);

  const extractVideoFrameNode = useCallback(
    async (nodeId: string, kind: VideoFrameExtractionKind, time = 0) => {
      const source = nodes.find((node) => node.id === nodeId);
      if (!source || activeGenerationSubmissions.current.has(nodeId)) return;
      activeGenerationSubmissions.current.add(nodeId);
      const label = { first: "首帧", last: "尾帧", current: "当前帧" }[kind];
      const notice = toast.loading(`正在截取${label}`);
      try {
        const response = await fetch("/api/canvas/video/process", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ operation: "frame", url: getNodeMediaUrl(source), kind, time }),
          signal: AbortSignal.timeout(295000),
        });
        const result = await response.json();
        if (!response.ok || !result.success || !result.data?.url)
          throw new Error(result.error || "截帧失败");
        const frame = createMediaResourceNode({
          action: "VIDEO_FRAME_EXTRACT",
          mediaType: "image",
          mediaUrl: result.data.url,
          title: `${source.title}-${label}`,
          x: source.x + source.width + 80,
          y: source.y,
        });
        frame.draftValues = {
          ...frame.draftValues,
          generated: true,
          frameExtractionKind: kind,
          sourceVideoNodeId: source.id,
          outputSizeLabel: `${result.data.width} × ${result.data.height}`,
        };
        addNodes([frame], [{ id: makeId("edge"), source: source.id, target: frame.id }]);
        toast.success(`已截取${label}`, { id: notice });
      } catch (e) {
        toast.error(e instanceof Error ? e.message : "截帧失败", { id: notice });
      } finally {
        activeGenerationSubmissions.current.delete(nodeId);
      }
    },
    [nodes, addNodes],
  );

  const slowVideoNode = useCallback(
    async (nodeId: string, factor: number) => {
      const source = nodes.find((node) => node.id === nodeId);
      if (!source || activeGenerationSubmissions.current.has(nodeId)) return;
      activeGenerationSubmissions.current.add(nodeId);
      const notice = toast.loading(`正在处理 ${factor} 倍慢放`);
      try {
        const response = await fetch("/api/canvas/video/process", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ operation: "slow", url: getNodeMediaUrl(source), factor }),
          signal: AbortSignal.timeout(295000),
        });
        const result = await response.json();
        if (!response.ok || !result.success || !result.data?.url)
          throw new Error(result.error || "慢放处理失败");
        const video = createMediaResourceNode({
          action: "VIDEO_RESOURCE",
          mediaType: "video",
          mediaUrl: result.data.url,
          title: `${source.title} · ${factor}倍慢放`,
          x: source.x + source.width + 80,
          y: source.y,
        });
        video.draftValues = {
          ...video.draftValues,
          generated: true,
          durationSeconds: result.data.duration,
          outputSizeLabel: `${result.data.width} × ${result.data.height}`,
          sourceVideoNodeId: source.id,
        };
        addNodes([video], [{ id: makeId("edge"), source: source.id, target: video.id }]);
        toast.success("慢放视频已生成", { id: notice });
      } catch (e) {
        toast.error(e instanceof Error ? e.message : "慢放失败", { id: notice });
      } finally {
        activeGenerationSubmissions.current.delete(nodeId);
      }
    },
    [nodes, addNodes],
  );

  const createVideoHdUpscaleFromVideo = useCallback(
    (nodeId: string, option: string) => {
      const videoNode = nodes.find((item) => item.id === nodeId);
      if (!videoNode) return;
      const resolution = normalizeVideoHdResolutionOption(option);
      const existingHdNode = nodes.find(
        (item) =>
          getDraftString(item, "action") === "VIDEO_HD_UPSCALE" &&
          getDraftString(item, "sourceVideoNodeId") === videoNode.id &&
          getDraftString(item, "hdResolution") === resolution
      );
      const hdNode = createVideoHdUpscaleNode({
        existingNode: existingHdNode,
        option,
        sourceNode: videoNode,
      });

      if (existingHdNode) {
        setNodes((current) => current.map((item) => (item.id === hdNode.id ? hdNode : item)));
      } else {
        addNodes([hdNode], [{ id: makeId("edge"), source: videoNode.id, target: hdNode.id }]);
      }
      setSelectedNodeId(hdNode.id);
      setSelectedEdgeId(null);
      setActiveVideoToolbarMode(null);
    },
    [addNodes, nodes]
  );

  const generateVideoHdUpscaleNode = useCallback(async (nodeId: string) => {
    const node=nodes.find(n=>n.id===nodeId); if(!node)return;
    try {
      const incoming=connectedInputNodes(nodes,edges,nodeId); assertConnectedInputsReady(incoming);
      const videos=incoming.filter(n=>n.inputType==="video");
      if(videos.length!==1)throw new Error("请连接一个已就绪的视频作为高清处理输入");
      const url=getNodeMediaUrl(videos[0]);if(!url)throw new Error("上游视频尚未生成");
      await generationTasks.submit(node,"video-upscale",{url,resolution:getDraftString(node,"hdResolution")||"1080P"},edges.filter(e=>e.target===nodeId));
    }catch(error){toast.error(error instanceof Error?error.message:"视频高清提交失败");}
  }, [nodes,edges,generationTasks.submit]);

  const applyVideoCropSelection = useCallback(async (nodeId: string) => {
    const source = nodes.find(node => node.id === nodeId);
    if (!source || videoCropGenerateStates[nodeId]?.status === "loading") return;
    const url = getNodeReferenceMediaUrl(source) || getNodeMediaUrl(source);
    if (!url) { toast.error("请先上传视频"); return; }
    setVideoCropGenerateStates(current => ({...current,[nodeId]:{progress:0,status:"loading"}}));
    try {
      const response = await fetch("/api/canvas/video/process",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({operation:"crop",url,rect:source.draftValues?.cropRect || VIDEO_CROP_RECT})});
      const result = await response.json();
      if (!response.ok || !result.success || !result.data?.url) throw new Error(result.error || "视频裁剪失败");
      const created = createVideoCropResultNode({existingIndex:nodes.filter(item=>getDraftString(item,"action")==="VIDEO_CROP").length,sourceNode:source});
      const cropNode = {...created,subtitle:"裁剪结果",draftValues:{...created.draftValues,generated:true,generationStatus:"complete",generationProgress:100,mediaUrl:result.data.url,url:[result.data.url],uploadStatus:"complete",outputSizeLabel:`${result.data.width} × ${result.data.height}`,durationSeconds:result.data.duration}};
      addNodes([cropNode],[{id:makeId("edge"),source:nodeId,target:cropNode.id}]);
      setSelectedNodeId(cropNode.id); setActiveVideoToolbarMode(null);
      toast.success("视频裁剪完成");
    } catch(error) { toast.error(error instanceof Error ? error.message : "视频裁剪失败"); }
    finally { setVideoCropGenerateStates(current=>{const next={...current};delete next[nodeId];return next;}); }
  },[addNodes,nodes,videoCropGenerateStates]);

  const commitSubtitleEraseRegions = useCallback(
    (nodeId: string, nextRegions: SubtitleEraseRegion[]) => {
      const previousRegions = subtitleEraseRegions[nodeId] || [];
      if (JSON.stringify(previousRegions) === JSON.stringify(nextRegions)) return;
      setSubtitleEraseRegions((current) => ({ ...current, [nodeId]: nextRegions }));
      setSubtitleEraseRegionHistory((current) => {
        const history = current[nodeId] || { future: [], past: [] };
        return {
          ...current,
          [nodeId]: {
            future: [],
            past: [...history.past, previousRegions],
          },
        };
      });
    },
    [subtitleEraseRegions]
  );

  const undoSubtitleEraseRegionChange = useCallback(
    (nodeId: string) => {
      const history = subtitleEraseRegionHistory[nodeId];
      if (!history?.past.length) return;
      const currentRegions = subtitleEraseRegions[nodeId] || [];
      const nextRegions = history.past[history.past.length - 1] || [];
      setSubtitleEraseRegions((current) => ({ ...current, [nodeId]: nextRegions }));
      setSubtitleEraseRegionHistory((current) => {
        const currentHistory = current[nodeId] || { future: [], past: [] };
        return {
          ...current,
          [nodeId]: {
            future: [currentRegions, ...currentHistory.future],
            past: currentHistory.past.slice(0, -1),
          },
        };
      });
    },
    [subtitleEraseRegionHistory, subtitleEraseRegions]
  );

  const redoSubtitleEraseRegionChange = useCallback(
    (nodeId: string) => {
      const history = subtitleEraseRegionHistory[nodeId];
      if (!history?.future.length) return;
      const currentRegions = subtitleEraseRegions[nodeId] || [];
      const nextRegions = history.future[0] || [];
      setSubtitleEraseRegions((current) => ({ ...current, [nodeId]: nextRegions }));
      setSubtitleEraseRegionHistory((current) => {
        const currentHistory = current[nodeId] || { future: [], past: [] };
        return {
          ...current,
          [nodeId]: {
            future: currentHistory.future.slice(1),
            past: [...currentHistory.past, currentRegions],
          },
        };
      });
    },
    [subtitleEraseRegionHistory, subtitleEraseRegions]
  );

  const applySubtitleEraseSelection = useCallback((_nodeId: string, _mode: SubtitleEraseMode = subtitleEraseMode) => {
    toast.error("当前没有已接通的视频字幕擦除模型，暂不能处理。所选区域会保留。");
  },[subtitleEraseMode]);

  const splitVideoAudioTrack = useCallback(
    async (nodeId: string, mode: VideoAudioSplitMode) => {
      const videoNode = nodes.find((item) => item.id === nodeId);
      if (!videoNode || videoAudioSplitStates[nodeId]?.status === "loading") return;
      const splitCopy: Record<
        VideoAudioSplitMode,
        {
          audioAction: string;
          audioSuffix: string;
          audioSubtitle: string;
          processingLabel: string;
          silentAction: string;
        }
      > = {
        "audio-video": {
          audioAction: "VIDEO_AUDIO_SPLIT",
          audioSuffix: "音轨",
          audioSubtitle: "音视频分离",
          processingLabel: "音视频分离",
          silentAction: "VIDEO_AUDIO_SPLIT_SILENT",
        },
        background: {
          audioAction: "VIDEO_BACKGROUND_AUDIO_SPLIT",
          audioSuffix: "背景音",
          audioSubtitle: "背景音分离",
          processingLabel: "人声分离",
          silentAction: "VIDEO_BACKGROUND_AUDIO_SPLIT_SILENT",
        },
        voice: {
          audioAction: "VIDEO_VOICE_SPLIT",
          audioSuffix: "人声",
          audioSubtitle: "人声分离",
          processingLabel: "人声分离",
          silentAction: "VIDEO_VOICE_SPLIT_SILENT",
        },
      };
      const copy = splitCopy[mode];
      const baseTitle = videoNode.title || "视频";
      const durationSeconds = getVideoNodeDurationSeconds(videoNode);
      const sourceUrl = getNodeReferenceMediaUrl(videoNode) || getNodeMediaUrl(videoNode);
      if (!sourceUrl) {
        toast.error("请先上传视频或连接上游视频节点");
        setActiveVideoToolbarMode(null);
        return;
      }
      const outputSizeLabel = getDraftString(videoNode, "outputSizeLabel") || "1280 × 720";
      const existingTrackCount = nodes.filter(
        (item) => item.inputType === "audio" && item.draftValues?.sourceVideoNodeId === videoNode.id
      ).length;
      const existingSilentVideoCount = nodes.filter(
        (item) =>
          item.inputType === "video" &&
          item.draftValues?.sourceVideoNodeId === videoNode.id &&
          Boolean(item.draftValues?.silentVideo)
      ).length;
      const rightX = Math.round(videoNode.x + videoNode.width + OFFICIAL_NODE_GAP);
      const splitResultY = Math.round(
        videoNode.y + Math.max(existingTrackCount, existingSilentVideoCount) * (350 + OFFICIAL_NODE_GAP)
      );

      setVideoAudioSplitStates((current) => ({
        ...current,
        [nodeId]: { mode, status: "loading" },
      }));
      setSelectedNodeId(videoNode.id);
      setSelectedEdgeId(null);
      setActiveVideoToolbarMode(null);
      toast.info(`${copy.processingLabel}处理中，请稍候…`);

      try {
        let audioUrl: string;
        let silentUrl: string | null = null;
        if (mode === "audio-video") {
          const response = await fetch("/api/canvas/video/process", {method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({operation:"audio-video",url:sourceUrl})});
          const result = await response.json();
          if (!response.ok || !result.success || !result.data?.audioUrl || !result.data?.url) throw new Error(result.error || "音视频分离失败");
          audioUrl = result.data.audioUrl;
          silentUrl = result.data.url;
        } else {
          const response = await fetch("/api/canvas/audio-separate", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ url: sourceUrl, stem: mode === "voice" ? "vocals" : "background" }),
            signal: AbortSignal.timeout(600_000),
          });
          const result = await response.json();
          if (!response.ok || !result.success || !result.data?.url)
            throw new Error(result.error || "人声分离失败，原音轨已保留");
          audioUrl = result.data.url;
        }
        const audioCreated = createMediaResourceNode({
          action: copy.audioAction,
          height: 148,
          mediaType: "audio",
          mediaUrl: audioUrl,
          title: `${baseTitle}_${copy.audioSuffix}`,
          width: 350,
          x: rightX,
          y: splitResultY,
        });
        const audioNode: CloneNode = {
          ...audioCreated,
          subtitle: copy.audioSubtitle,
          draftValues: {
            ...(audioCreated.draftValues || {}),
            durationSeconds,
            generated: true,
            sourceVideoNodeId: videoNode.id,
            sourceVideoTitle: videoNode.title,
            splitMode: mode,
          },
        };
        const silentCreated = silentUrl
          ? createMediaResourceNode({
              action: copy.silentAction,
              height: 350,
              mediaType: "video",
              mediaUrl: silentUrl,
              title: `${baseTitle}_无声`,
              width: 350,
              x: rightX,
              y: splitResultY,
            })
          : null;
        const silentVideoNode: CloneNode | null = silentCreated
          ? {
              ...silentCreated,
              subtitle: "无声视频",
              draftValues: {
                ...(silentCreated.draftValues || {}),
                durationSeconds,
                generated: true,
                mediaType: "video",
                nodeType: "video",
                outputSizeLabel,
                silentVideo: true,
                sourceUrl,
                sourceVideoNodeId: videoNode.id,
                sourceVideoTitle: videoNode.title,
                splitMode: mode,
              },
            }
          : null;

        if (silentVideoNode) {
          addNodes(
            [silentVideoNode, audioNode],
            [
              { id: makeId("edge"), source: videoNode.id, target: silentVideoNode.id },
              { id: makeId("edge"), source: videoNode.id, target: audioNode.id },
            ]
          );
        } else {
          addNodes([audioNode], [
            { id: makeId("edge"), source: videoNode.id, target: audioNode.id },
          ]);
        }
        toast.success(mode === "audio-video" ? "音视频分离完成" : `${copy.processingLabel}完成，已生成音轨`);
        setSelectedNodeId(null);
        setSelectedEdgeId(null);
        setVideoAudioSplitStates((current) => {
          const next = { ...current };
          delete next[nodeId];
          return next;
        });
      } catch(error) { toast.error(error instanceof Error ? error.message : "音视频分离失败"); }
      finally { setVideoAudioSplitStates(current=>{const next={...current};delete next[nodeId];return next;}); }
    },
    [addNodes, nodes, videoAudioSplitStates]
  );

  const requestVideoAnalysis = useCallback(
    async (nodeId: string, force = false, options?: { anchorId?: string; dimensions?: Record<string, boolean> }) => {
      const node = nodes.find((item) => item.id === nodeId);
      if (!node) {
        toast.error("源视频节点已移除，请重新添加视频");
        return;
      }
      const videoUrl = getNodePlayableVideoUrl(node);
      const previewImageUrl = getVideoNodePreviewUrl(node);
      if (!videoUrl) {
        toast.error("当前视频暂时没有可解析的素材地址");
        return;
      }
      const existing = nodes.find(
        (item) =>
          getDraftString(item, "action") === "VIDEO_STORY_ANALYSIS" &&
          getDraftString(item, "sourceVideoNodeId") === nodeId &&
          (options?.anchorId ? getDraftString(item, "frameAnalysisNodeId") === options.anchorId : !getDraftString(item, "frameAnalysisNodeId")),
      );
      if (
        existing &&
        (getDraftString(existing, "generationStatus") === "pending" ||
          (!force && getDraftString(existing, "status") === "ready"))
      ) {
        setSelectedNodeId(existing.id);
        setSelectedEdgeId(null);
        return;
      }
      const lockKey = `video-analysis:${nodeId}`;
      if (activeGenerationSubmissions.current.has(lockKey)) return;
      const definition = getConfiguredFunction(videoCanvasFunctionConfig, "video-analysis");
      if (!videoCanvasFunctionConfig.enabled || !definition.enabled) {
        toast.error("视频解析功能尚未启用");
        return;
      }
      const selectedDimensions = options?.dimensions;
      const dimensionPrompt = selectedDimensions ? [
        selectedDimensions.shots !== false ? "分镜：识别镜头边界、时间码、景别、关键帧与画面叙事。" : "",
        selectedDimensions.motion !== false ? "动态：解析主体动作、摄影机运动与节奏变化。" : "",
        selectedDimensions.music !== false ? "音乐：解析背景音乐、人声和音效的时间分布。" : "",
        selectedDimensions.shots === false ? "未选择分镜：仅按必要时间片段切分，景别和关键帧字段留空。" : "",
        selectedDimensions.motion === false ? "未选择动态：动作和摄影机运动字段留空。" : "",
        selectedDimensions.music === false ? "未选择音乐：背景音乐、人声和音效字段留空。" : "",
      ].filter(Boolean).join("\n") : "";
      const prompt = composeFunctionPrompt(
        definition,
        [
          "请解析当前视频，输出结构化视频故事表。",
          dimensionPrompt,
          "每个镜头包含镜号、开始时间、结束时间、时长、画面描述、叙事内容、景别、摄影机角度与运动、焦距与景深、光线、背景音乐、人声/音效、图像提示词、视频运动提示词、关键帧建议。无法确定的信息留空，禁止编造。",
          "图像与视频运动提示词优先使用英文，其他说明使用中文。",
          `视频标题：${node.title}`,
        ].join("\n"),
      );
      const storyNode = createVideoStoryAnalysisNode({
        existingNode: existing,
        sourceNode: node,
        rows: existing ? getVideoStoryRows(existing) : [],
        summary: getDraftString(existing, "summary"),
      });
      storyNode.draftValues = {
        ...storyNode.draftValues,
        frameAnalysisNodeId: options?.anchorId,
        generated: false,
        status: "loading",
        error: undefined,
        generationStatus: "pending",
        generationError: undefined,
      };
      const outputSourceId = options?.anchorId || nodeId;
      const edge = { id: makeId("edge"), source: outputSourceId, target: storyNode.id };
      activeGenerationSubmissions.current.add(lockKey);
      setNodes((current) =>
        current.some((item) => item.id === storyNode.id)
          ? current.map((item) => (item.id === storyNode.id ? storyNode : item))
          : [...current, storyNode],
      );
      setEdges((current) =>
        current.some((item) => item.source === outputSourceId && item.target === storyNode.id)
          ? current
          : [...current, edge],
      );
      setSelectedNodeId(storyNode.id);
      setSelectedEdgeId(null);
      setActiveVideoToolbarMode(null);
      try {
        await generationTasks.submit(
          storyNode,
          "analysis",
          {
            imageUrls:
              previewImageUrl && previewImageUrl !== videoUrl ? [previewImageUrl] : undefined,
            mode: "video-analysis",
            analysisDimensions: selectedDimensions,
            nodeTitle: node.title,
            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition),
            prompt,
            videoUrls: [videoUrl],
          },
          [edge],
        );
      } catch (error) {
        const message = error instanceof Error ? error.message : "视频解析提交失败";
        setNodes((current) =>
          current.map((item) =>
            item.id === storyNode.id
              ? {
                  ...item,
                  draftValues: {
                    ...item.draftValues,
                    status: "error",
                    error: message,
                    generationStatus: "failed",
                    generationError: message,
                  },
                }
              : item,
          ),
        );
        toast.error(message);
      } finally {
        activeGenerationSubmissions.current.delete(lockKey);
      }
    },
    [nodes, videoCanvasFunctionConfig, generationTasks.submit],
  );

  const runPresetComposerSubmit = useCallback(
    async (
      nodeId: string,
      mode: Exclude<ActivePresetControlMode, null>,
      draftPrompt: string,
      settings?: ComposerSettings,
    ) => {
      const node = nodes.find((item) => item.id === nodeId);
      if (!node) return;
      if (isOfficialImagePresetFunctionKey(mode)) return;
      const incomingNodes = readyCanvasInputs(nodes, edges, nodeId);
      if (!incomingNodes) return;
      const imageUrls = incomingNodes
        .filter((item) => item.inputType === "image")
        .map((item) => getNodeReferenceMediaUrl(item))
        .filter(Boolean);
      const videoUrls = incomingNodes
        .filter((item) => item.inputType === "video")
        .map((item) => getNodeReferenceMediaUrl(item))
        .filter(Boolean);
      const audioUrls = incomingNodes
        .filter((item) => item.inputType === "audio")
        .map((item) => getNodeReferenceMediaUrl(item))
        .filter(Boolean);

      try {
        if (mode === "story-script") {
          const definition = getConfiguredFunction(videoCanvasFunctionConfig, "story-script");
          const prompt = composeFunctionPrompt(definition, withConnectedText(draftPrompt, incomingNodes));
          const selectedModelRef = normalizeModelRef(settings?.model) || undefined;
          setNodes((current) =>
            current.map((item) =>
              item.id === nodeId
                ? {
                    ...item,
                    subtitle: "生成中",
                    draftValues: {
                      ...(item.draftValues || {}),
                      generated: false,
                      generationError: undefined,
                      generationProgress: 2,
                      generationStatus: "pending",
                      params: {
                        ...getNodeParams(item),
                        functionKey: "story-script",
                        imageUrls,
                        model: selectedModelRef,
                        prompt,
                        route: "canvas-workflow-analyze",
                        videoUrls,
                      },
                      prompt,
                    },
                  }
                : item
            )
          );
          await generationTasks.submit(node,"analysis",{
            imageUrls,
            mode: "story-script",
            nodeTitle: node.title,
            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, selectedModelRef),
            prompt,
            videoUrls,
          });
          return;
        }

        const definition = getConfiguredFunction(
          videoCanvasFunctionConfig,
          mode === "audio-to-video" ? "audio-to-video" : "first-frame-video",
        );
        if (mode === "audio-to-video" && !audioUrls.length) throw new Error("音频生视频需要连接音频素材");
        const requestedMode: VideoGenerationMode = "first-frame";
        const referenceImages = selectVideoReferenceImages(imageUrls, requestedMode);
        if (referenceImages.length < 1) {
          toast.error(mode === "audio-to-video" ? "音频生视频需要同时接入一张参考图" : "首帧图生视频需要先接入首帧图片");
          return;
        }
        const ratio = normalizeVideoRatioValue(settings?.ratio);
        assertExecutableVideoResolution(settings?.resolution);
        const resolution = normalizeVideoResolutionValue(settings?.resolution);
        const duration = normalizeVideoDurationValue(settings?.duration);
        const preferredModelOverride = settings?.model || "";
        const preferredModelRef = getFunctionModel(videoCanvasFunctionConfig, definition, preferredModelOverride);
        const prompt = composeFunctionPrompt(definition, draftPrompt);
        const previewUrl = referenceImages[0] || getNodeReferenceMediaUrl(node) || "";
        const savedSettings: ComposerSettings = {
          audio: settings?.audio || "开启",
          camera: settings?.camera || "摄像机",
          count: settings?.count || "1个",
          duration: formatVideoDurationLabel(duration),
          model: normalizeModelRef(preferredModelOverride) || "auto",
          modelLabel: settings?.modelLabel || "",
          panorama: settings?.panorama || (mode === "audio-to-video" ? "全能参考" : "图生视频"),
          ratio: formatVideoRatioLabel(ratio),
          resolution: formatVideoResolutionLabel(resolution),
        };
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "media",
                  inputType: "video",
                  subtitle: "生成中",
                  draftValues: {
                    ...clearGridSplitDraftValues(item.draftValues),
                    action: "VIDEO_GENERATE",
                    generated: false,
                    generationError: undefined,
                    generationProgress: 2,
                    generationStatus: "pending",
                    mediaType: "video",
                    mediaUrl: "",
                    nodeType: "video",
                    params: {
                      ...getNodeParams(item),
                      audioUrls,
                      duration,
                      functionKey: definition.key,
                      mode: requestedMode,
                      model: normalizeModelRef(preferredModelOverride) || undefined,
                      prompt,
                      ratio,
                      referenceImages,
                      resolution,
                      settings: savedSettings,
                    },
                    poster: previewUrl,
                    prompt,
                    sourceUrl: previewUrl,
                    url: [],
                  },
                }
              : item
          )
        );
        await generationTasks.submit({...node,inputType:"video",draftValues:{...node.draftValues,mediaType:"video",params:{...getNodeParams(node),settings:savedSettings,prompt,mode:requestedMode,referenceImages}}},"video",{
          duration,
          images: referenceImages,
          audioUrls: mode === "audio-to-video" ? audioUrls : undefined,
          generateAudio: settings?.audio !== "关闭",
          mode: requestedMode,
          preferredModelRef,
          prompt,
          ratio,
          resolution,
        });

      } catch (error) {
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  subtitle: "生成失败",
                  draftValues: {
                    ...(item.draftValues || {}),
                    generationError: error instanceof Error ? error.message : "生成失败",
                    generationStatus: "failed",
                  },
                }
              : item
          )
        );
        toast.error(error instanceof Error ? error.message : "生成失败");
      }
    },
    [edges, nodes, videoCanvasFunctionConfig, generationTasks.submit]
  );

  const createFreeNode = useCallback(
    (kind: CanvasCreateKind) => {
      if (!canvasCommand) return;
      const created = createTargetModuleNode(kind, 0, 0, nodes.length + 1);
      const node = {
        ...created,
        x: Math.round(canvasCommand.canvasX - created.width / 2),
        y: Math.round(canvasCommand.canvasY - created.height / 2),
      };
      addNodes([node], []);
      setCanvasCommand(null);
      setConnectionMenu(null);
      toast.success(`已添加 ${node.title}`);
    },
    [addNodes, canvasCommand, nodes.length]
  );

  const configureNode = useCallback((nodeId: string) => {
    setSelectedNodeId(nodeId);
    setInspectorNodeId(nodeId);
    setNodeContextMenu(null);
    setConnectionMenu(null);
  }, []);

  const copyNode = useCallback(async (nodeId: string) => {
    const node = nodes.find((item) => item.id === nodeId);
    if (!node) return;
    await navigator.clipboard?.writeText(node.title).catch(() => undefined);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    toast.success("节点名称已复制");
  }, [nodes]);

  const duplicateNode = useCallback((nodeId: string) => {
    const node = nodes.find((item) => item.id === nodeId);
    if (!node) return;
    const duplicate = {
      ...node,
      id: makeId("copy"),
      title: `${node.title} - 副本`,
      draftValues: {...node.draftValues,taskRequestId:undefined,generationTaskId:undefined,appliedTaskStatus:undefined,generationStatus:getDraftString(node,"generationStatus")==="pending"?"idle":node.draftValues?.generationStatus},
      x: node.x,
      y: node.y + node.height + 60,
    };
    setNodes((current) => [...current, duplicate]);
    setSelectedNodeId(duplicate.id);
    setNodeContextMenu(null);
    setConnectionMenu(null);
  }, [nodes]);

  const renameNode = useCallback((nodeId: string, title: string) => {
    const nextTitle = title.trim();
    if (!nextTitle) {
      toast.error("节点名称不能为空");
      return false;
    }
    setNodes((current) =>
      current.map((node) =>
        node.id === nodeId
          ? {
              ...node,
              title: nextTitle,
            }
          : node
      )
    );
    setSelectedNodeId(nodeId);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    toast.success("已重命名节点");
    return true;
  }, []);

  const runNode = useCallback(
    async (nodeId: string) => {
      const node = nodes.find((item) => item.id === nodeId);
      if (!node) return;
      setSelectedNodeId(nodeId);
      setNodeContextMenu(null);
      setConnectionMenu(null);

      if (getDraftString(node,"action")==="VIDEO_HD_UPSCALE") {await generateVideoHdUpscaleNode(node.id);return;}
      if (getTargetModuleKind(node) === "frame-analysis") {
        const incoming = readyCanvasInputs(nodes, edges, nodeId);
        if (!incoming) return;
        const input = incoming.find((item) => item.inputType === "video" && !!getNodePlayableVideoUrl(item));
        if (!input) { toast.error("请先上传或连接一个已就绪的视频素材"); return; }
        await requestVideoAnalysis(input.id, true, {
          anchorId: nodeId,
          dimensions: (node.draftValues?.dimensions || {}) as Record<string, boolean>,
        });
        return;
      }
      if (getTargetModuleKind(node) === "smart-edit") { setSmartEditNodeId(node.id); return; }
      if (node.inputType === "audio" && node.draftValues?.audioParams) {
        const incoming = readyCanvasInputs(nodes, edges, nodeId);
        if (!incoming) return;
        const audioParams = node.draftValues.audioParams as Record<string, unknown>;
        await generationTasks.submit(
          node, "audio", { ...audioParams, text: [audioParams.text, ...incoming.map(connectedText)].filter(Boolean).join("\n\n") },
          edges.filter(edge => edge.target === nodeId),
        );
        return;
      }
      if (getDraftString(node, "action") === "VIDEO_STORY_ANALYSIS") {
        await requestVideoAnalysis(getDraftString(node, "sourceVideoNodeId"), true);
        return;
      }

      const incomingNodes = readyCanvasInputs(nodes, edges, nodeId);
      if (!incomingNodes) return;
      let imageReferenceLists: string[][];
      try {
        imageReferenceLists = await Promise.all(incomingNodes
          .filter(item => item.inputType === "image")
          .map(item => resolveNodeReferenceImages(item)));
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "参考图准备失败，尚未提交任务");
        return;
      }
      const imageUrls = Array.from(new Set(connectedImageUrls(imageReferenceLists)));
      const videoUrls = incomingNodes
        .filter((item) => item.inputType === "video")
        .map((item) => getNodeReferenceMediaUrl(item))
        .filter(Boolean);
      const action = String(node.draftValues?.action || "");
      const params = (node.draftValues?.params || {}) as Record<string, unknown>;
      const paramsSettings =
        params.settings && typeof params.settings === "object"
          ? (params.settings as Record<string, unknown>)
          : {};
      const nodeModelRef = normalizeModelRef(params.model || paramsSettings.model);
      const rawPrompt = withConnectedText(String(params.prompt || node.draftValues?.prompt || ""), incomingNodes);

      const delegatesVideo = node.inputType === "video" || /VIDEO_GENERATE/.test(action);
      if (!delegatesVideo && activeGenerationSubmissions.current.has(nodeId)) return;
      if (!delegatesVideo) {
        activeGenerationSubmissions.current.add(nodeId);
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  draftValues: {
                    ...item.draftValues,
                    generationStatus: "pending",
                    generationError: undefined,
                    generated: false,
                  },
                }
              : item,
          ),
        );
      }
      try {
        if (node.inputType === "image" || /IMAGE_GENERATE/.test(action)) {
          const magicMarks = getVideoCanvasMagicMarks(node);
          const markedImageUrls = magicMarks
            .map((mark) => mark.imageUrl)
            .filter(Boolean);
          const resolvedImageUrls = Array.from(
            new Set([...imageUrls, ...markedImageUrls]),
          );
          const markLabels = magicMarks.map(
            (mark) => mark.labelOptions[mark.selectedIndex] || mark.labelOptions[0],
          );
          const styleTitles = incomingNodes
            .filter(
              (item) =>
                item.kind === "material-style" ||
                getDraftString(item, "action") === "MATERIAL_STYLE",
            )
            .map(
              (item) =>
                getDraftString(item, "styleTitle") ||
                item.title.replace(/^素材-风格-/, ""),
            )
            .filter(Boolean);
          const imagePromptInput = [
            rawPrompt,
            markLabels.length > 0
              ? `重点遵循已标记元素：${markLabels.map((label) => `@${label}`).join("、")}`
              : "",
            ...styleTitles.map((title) => `应用图片风格「${title}」。`),
          ]
            .filter(Boolean)
            .join(" ");
          const savedFunctionKey = String(
            params.functionKey || node.draftValues?.functionKey || "",
          ).trim();
          const explicitFunctionKey =
            resolveOfficialImagePresetFunctionKey({
              fallbackKey: savedFunctionKey,
              option: params.option || node.draftValues?.toolbarOption,
              title: node.title,
            }) || savedFunctionKey;
          const functionKey =
            explicitFunctionKey &&
            (videoCanvasFunctionConfig.functions[explicitFunctionKey] ||
              defaultVideoCanvasFunctionConfig.functions[explicitFunctionKey])
              ? explicitFunctionKey
              : action === "IMAGE_GENERATE_NINE_GRID"
                ? MULTI_VIEW_NINE_GRID_FUNCTION_KEY
                : node.draftValues?.generatorType === "ENHANCE"
                  ? "hd-upscale"
                  : "image-repaint";
          const definition = getConfiguredFunction(videoCanvasFunctionConfig, functionKey);
          if (!videoCanvasFunctionConfig.enabled || !definition.enabled)
            throw new Error("该图片功能尚未启用");
          const sourceUrl = resolvedImageUrls[0] || "";
          if (!sourceUrl && functionRequiresMedia(definition)) throw new Error("该图片功能需要有效的上游图片，请重新连接素材");
          const extraReferenceImages = resolvedImageUrls.slice(1);
          const prompt =
            functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY
              ? composeMultiViewNineGridPrompt(definition, String(params.option || node.title))
              : isWideImageGenerationFunction(functionKey)
                ? composeConfiguredImagePresetPrompt(
                    definition,
                    imagePromptInput || String(params.option || node.title),
                  )
                : composeFunctionPrompt(
                    definition,
                    imagePromptInput || String(params.option || node.title),
                  );
          if (
            definition.route === "angle-edit" &&
            !anglePresets[String((node.draftValues?.angleSettings as any)?.preset || "")]?.prompt
          ) {
            await generationTasks.submit(node, "image-operation", {
              operation: "angle-edit",
              imageUrl: sourceUrl,
              ...((params.angleParameters as Record<string, unknown>) || {}),
            });
            return;
          }
          const gridLayout = getPresetGridLayout(functionKey);

          if (["enhance", "extend", "remove-bg"].includes(definition.route || "") && sourceUrl) {
            await generationTasks.submit(
              {
                ...node,
                kind: "media",
                inputType: "image",
                draftValues: {
                  ...clearGridSplitDraftValues(node.draftValues),
                  functionKey,
                  prompt: prompt,
                  params: { ...getNodeParams(node), functionKey, sourceUrl },
                },
              },
              "image-operation",
              {
                operation: definition.route,
                imageUrl: sourceUrl,
                prompt: prompt,
                scaleFactor: typeof params.scaleFactor === "number" ? params.scaleFactor : undefined,
              },
            );
            return;
          } else {
            await generationTasks.submit(
              {
                ...node,
                draftValues: {
                  ...node.draftValues,
                  functionKey,
                  params: { ...params, functionKey, prompt },
                  prompt,
                },
              },
              "image",
              {
                allowFailover: false,
                aspectRatio: isWideImageGenerationFunction(functionKey)
                  ? "16:9"
                  : String(paramsSettings.ratio || params.ratio || "auto"),
                imageSize: String(paramsSettings.resolution || params.imageSize || "1K"),
                billingFeature: getImageGenerationBillingFeature(functionKey),
                imageCount: 1,
                model: getFunctionModel(videoCanvasFunctionConfig, definition, nodeModelRef),
                prompt,
                promptExtend: !isWideImageGenerationFunction(functionKey),
                referenceImage: sourceUrl || undefined,
                referenceImages: extraReferenceImages,
              },
            );
            return;
          }
        }

        if (node.inputType === "video" || /VIDEO_GENERATE/.test(action)) {
          await submitVideoTargetComposer(nodeId);
          return;
        }

        if (node.inputType === "text" || /SCRIPT_GENERATE|TEXT_GENERATE/.test(action)) {
          const savedKey = String(params.functionKey || node.draftValues?.functionKey || "");
          const isScript =
            /SCRIPT_GENERATE/.test(action) ||
            node.kind === "script" ||
            getPresetMode(node) === "story-script" ||
            savedKey === "story-script";
          const key = isScript
            ? "story-script"
            : savedKey || (imageUrls.length || videoUrls.length ? "image-to-prompt" : "story-script");
          const definition = getConfiguredFunction(videoCanvasFunctionConfig, key);
          if (!videoCanvasFunctionConfig.enabled || !definition.enabled)
            throw new Error("该分析功能尚未启用");
          const prompt = composeFunctionPrompt(
            definition,
            rawPrompt || STORY_SCRIPT_PROMPT,
          );
          await generationTasks.submit(
            {
              ...node,
              draftValues: {
                ...node.draftValues,
                prompt,
                params: { ...params, functionKey: key, prompt },
              },
            },
            "analysis",
            {
              imageUrls,
              videoUrls,
              prompt,
              nodeTitle: node.title,
              mode: key === "story-script" ? "story-script" : "agent-plan",
              preferredModelRef: getFunctionModel(
                videoCanvasFunctionConfig,
                definition,
                nodeModelRef,
              ),
            },
          );
          return;
        }

        throw new Error(`${node.title} 暂无可执行的后端动作`);
      } catch (error) {
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  draftValues: {
                    ...item.draftValues,
                    generationStatus: "failed",
                    generationError: error instanceof Error ? error.message : "生成失败",
                  },
                }
              : item,
          ),
        );
        toast.error(error instanceof Error ? error.message : `${node.title} 生成失败`);
      } finally {
        if (!delegatesVideo) activeGenerationSubmissions.current.delete(nodeId);
      }
    },
    [
      edges,
      nodes,
      submitVideoTargetComposer,
      generateVideoHdUpscaleNode,
      videoCanvasFunctionConfig,
      generationTasks.submit,
      requestVideoAnalysis,
    ],
  );

  const deleteNode = useCallback(async (nodeId: string, options?: { silent?: boolean }) => {
    const node=nodes.find(item=>item.id===nodeId);
    if(getDraftString(node,"generationStatus")==="pending") {cancelGenerationNode(nodeId);return;}
    try {await generationTasks.dismiss(nodeId,getDraftString(node,"generationTaskId"));}catch(error){toast.error(error instanceof Error?error.message:"移除失败");return;}
    setNodes((current) => current.some(n=>n.id===nodeId&&isCanvasGroup(n))?ungroupCanvasNodes(current,nodeId):current.filter((node) => node.id !== nodeId));
    setEdges((current) => current.filter((edge) => edge.source !== nodeId && edge.target !== nodeId));
    setSelectedNodeId((current) => (current === nodeId ? null : current));
    setSelectedEdgeId(null);
    setInspectorNodeId((current) => (current === nodeId ? null : current));
    setNodeContextMenu(null);
    setConnectionMenu(null);
    if (!options?.silent) {
      toast.success("节点已删除");
    }
  }, [nodes,generationTasks.dismiss,cancelGenerationNode]);

  const deleteEdge = useCallback((edgeId: string) => {
    setEdges((current) => current.filter((edge) => edge.id !== edgeId));
    setSelectedEdgeId(null);
    setLineConnectState(null);
    setConnectionMenu(null);
    setNodeContextMenu(null);
  }, []);

  const deleteSelectedEdge = useCallback(() => {
    if (!selectedEdgeId) return false;
    deleteEdge(selectedEdgeId);
    return true;
  }, [deleteEdge, selectedEdgeId]);

  const createStarter = useCallback(
    (starter: (typeof STARTER_CARDS)[number]) => {
      const workflow = createStarterWorkflow(starter.title, PRESET_WORKFLOW_CENTER);
      if (workflow) {
        addNodes(workflow.nodes, workflow.edges);
        setSelectedNodeId(workflow.selectedId);
        const minX=Math.min(...workflow.nodes.map(n=>n.x)), minY=Math.min(...workflow.nodes.map(n=>n.y));
        const maxX=Math.max(...workflow.nodes.map(n=>n.x+n.width)), maxY=Math.max(...workflow.nodes.map(n=>n.y+n.height));
        const zoom=Math.max(0.1, Math.min(0.85, (window.innerWidth-96)/(maxX-minX), (window.innerHeight-340)/(maxY-minY)));
        setViewport({zoom,x:Math.round(window.innerWidth/2-(minX+maxX)/2*zoom),y:Math.round(90-minY*zoom)});
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        toast.success(`已载入 ${starter.title} 工作流`);
        return;
      }

      const baseX = 380;
      const baseY = 325;
      const newNodes = starter.steps.map((title, index) => {
        if (/上传图片|首帧图/.test(title)) return createInputNode("image", baseX + index * 270, baseY);
        if (/上传音频|音频/.test(title) && index === 0) return createInputNode("audio", baseX + index * 270, baseY);
        if (/脚本|描述/.test(title)) return createSimpleNode(title, "text", baseX + index * 270, baseY + 18);
        if (/预览/.test(title)) return createSimpleNode(title, "preview", baseX + index * 270, baseY + 18);
        if (/保存/.test(title)) return createSimpleNode(title, "save", baseX + index * 270, baseY + 18);
        const matchedTool = capturedTools.find((tool) => getToolLabel(tool).includes(title) || title.includes(getToolLabel(tool)));
        return matchedTool
          ? createToolNode(matchedTool, baseX + index * 270, baseY + 18)
          : createSimpleNode(title, "workflow", baseX + index * 270, baseY + 18);
      });
      const newEdges = newNodes.slice(1).map((node, index) => ({
        id: makeId("edge"),
        source: newNodes[index].id,
        target: node.id,
      }));
      addNodes(newNodes, newEdges);
    },
    [addNodes]
  );

  const updateNodeDraft = useCallback((key: string, value: unknown) => {
    setNodes((current) =>
      current.map((node) =>
        node.id === inspectorNodeId
          ? { ...node, draftValues: { ...(node.draftValues || {}), [key]: value } }
          : node
      )
    );
  }, [inspectorNodeId]);

  const getCanvasPoint = useCallback(
    (clientX: number, clientY: number) => ({
      x: (clientX - viewport.x) / viewport.zoom,
      y: (clientY - viewport.y) / viewport.zoom,
    }),
    [viewport.x, viewport.y, viewport.zoom]
  );

  const getConnectionHoverNodeId = useCallback((clientX: number, clientY: number, anchorId?: string | null) => {
    const targetElement = document
      .elementsFromPoint(clientX, clientY)
      .map((element) => element.closest("[data-canvas-node-id]"))
      .find((element): element is HTMLElement => Boolean(element));
    const targetNodeId = targetElement?.dataset.canvasNodeId || null;
    return targetNodeId && targetNodeId !== anchorId ? targetNodeId : null;
  }, []);

  const createLineConnectState = useCallback((node: CloneNode | null): LineConnectState => {
    if (!node) return { cursorCanvasX: null, cursorCanvasY: null, sourceId: null };
    return {
      cursorCanvasX: Math.round(node.x + node.width + OFFICIAL_NODE_GAP),
      cursorCanvasY: Math.round(node.y + node.height / 2),
      sourceId: node.id,
    };
  }, []);

  const updateEndpointConnectionDrag = useCallback(
    (clientX: number, clientY: number) => {
      const endpointDrag = connectionDragRef.current;
      if (!endpointDrag) return false;
      const canvasPoint = getCanvasPoint(clientX, clientY);
      const distance = Math.hypot(clientX - endpointDrag.startClientX, clientY - endpointDrag.startClientY);
      if (distance > 4 || endpointDrag.hasDragged) {
        endpointDrag.hasDragged = true;
        suppressConnectionClickRef.current = true;
        setLineConnectState({
          cursorCanvasX: canvasPoint.x,
          cursorCanvasY: canvasPoint.y,
          hoverNodeId: getConnectionHoverNodeId(clientX, clientY, endpointDrag.anchorId),
          sourceId: endpointDrag.side === "source" ? endpointDrag.anchorId : null,
          targetId: endpointDrag.side === "target" ? endpointDrag.anchorId : null,
        });
      }
      return endpointDrag.hasDragged;
    },
    [getCanvasPoint, getConnectionHoverNodeId]
  );

  const finishEndpointConnectionDrag = useCallback(
    (clientX: number, clientY: number) => {
      const endpointDrag = connectionDragRef.current;
      if (!endpointDrag) return false;
      connectionDragRef.current = null;
      connectionDragCleanupRef.current?.();
      connectionDragCleanupRef.current = null;
      if (!endpointDrag.hasDragged) return false;

      const targetNodeId = getConnectionHoverNodeId(clientX, clientY, endpointDrag.anchorId) || "";
      const connected =
        targetNodeId && endpointDrag.side === "source"
          ? connectExistingNodes(endpointDrag.anchorId, targetNodeId, { notify: false })
          : targetNodeId
            ? connectExistingNodes(targetNodeId, endpointDrag.anchorId, { notify: false })
            : false;
      if (!targetNodeId) {
        toast.info("拖到节点上即可建立连接");
      }
      if (!connected) {
        setSelectedNodeId(endpointDrag.anchorId);
      }
      setLineConnectState(null);
      return true;
    },
    [connectExistingNodes, getConnectionHoverNodeId]
  );

  const startConnectionEndpointDrag = useCallback(
    (event: ReactPointerEvent<HTMLButtonElement>, node: CloneNode, side: ConnectionSide) => {
      if (event.button !== 0) return;
      if (connectionDragRef.current) return;
      event.stopPropagation();
      event.currentTarget.setPointerCapture(event.pointerId);
      connectionDragRef.current = {
        anchorId: node.id,
        hasDragged: false,
        pointerId: event.pointerId,
        side,
        startClientX: event.clientX,
        startClientY: event.clientY,
      };
      setSelectedNodeId(node.id);
      setSelectedEdgeId(null);
      setInspectorNodeId(null);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setActivePanel(null);
      connectionDragCleanupRef.current?.();
      const handleWindowPointerMove = (pointerEvent: PointerEvent) => {
        if (pointerEvent.pointerId !== event.pointerId) return;
        updateEndpointConnectionDrag(pointerEvent.clientX, pointerEvent.clientY);
      };
      const handleWindowPointerUp = (pointerEvent: PointerEvent) => {
        if (pointerEvent.pointerId !== event.pointerId) return;
        finishEndpointConnectionDrag(pointerEvent.clientX, pointerEvent.clientY);
      };
      const handleWindowMouseMove = (mouseEvent: MouseEvent) => {
        updateEndpointConnectionDrag(mouseEvent.clientX, mouseEvent.clientY);
      };
      const handleWindowMouseUp = (mouseEvent: MouseEvent) => {
        finishEndpointConnectionDrag(mouseEvent.clientX, mouseEvent.clientY);
      };
      window.addEventListener("pointermove", handleWindowPointerMove);
      window.addEventListener("pointerup", handleWindowPointerUp, { once: true });
      window.addEventListener("mousemove", handleWindowMouseMove);
      window.addEventListener("mouseup", handleWindowMouseUp, { once: true });
      connectionDragCleanupRef.current = () => {
        window.removeEventListener("pointermove", handleWindowPointerMove);
        window.removeEventListener("pointerup", handleWindowPointerUp);
        window.removeEventListener("mousemove", handleWindowMouseMove);
        window.removeEventListener("mouseup", handleWindowMouseUp);
      };
    },
    [finishEndpointConnectionDrag, updateEndpointConnectionDrag]
  );

  const startConnectionEndpointMouseDrag = useCallback(
    (event: ReactMouseEvent<HTMLButtonElement>, node: CloneNode, side: ConnectionSide) => {
      if (event.button !== 0) return;
      if (connectionDragRef.current) return;
      event.stopPropagation();
      connectionDragRef.current = {
        anchorId: node.id,
        hasDragged: false,
        pointerId: null,
        side,
        startClientX: event.clientX,
        startClientY: event.clientY,
      };
      setSelectedNodeId(node.id);
      setSelectedEdgeId(null);
      setInspectorNodeId(null);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setActivePanel(null);
      connectionDragCleanupRef.current?.();
      const handleWindowMouseMove = (mouseEvent: MouseEvent) => {
        updateEndpointConnectionDrag(mouseEvent.clientX, mouseEvent.clientY);
      };
      const handleWindowMouseUp = (mouseEvent: MouseEvent) => {
        finishEndpointConnectionDrag(mouseEvent.clientX, mouseEvent.clientY);
      };
      window.addEventListener("mousemove", handleWindowMouseMove);
      window.addEventListener("mouseup", handleWindowMouseUp, { once: true });
      connectionDragCleanupRef.current = () => {
        window.removeEventListener("mousemove", handleWindowMouseMove);
        window.removeEventListener("mouseup", handleWindowMouseUp);
      };
    },
    [finishEndpointConnectionDrag, updateEndpointConnectionDrag]
  );

  const updateVideoCanvasMagicMarks = useCallback(
    (
      targetNodeId: string,
      updater: (marks: VideoCanvasMagicMark[]) => VideoCanvasMagicMark[]
    ) => {
      setNodes((current) =>
        current.map((item) => {
          if (item.id !== targetNodeId) return item;
          const nextMarks = updater(getVideoCanvasMagicMarks(item));
          return {
            ...item,
            draftValues: {
              ...(item.draftValues || {}),
              magicMarks: nextMarks,
              params: {
                ...getNodeParams(item),
                magicMarks: nextMarks,
              },
            },
          };
        })
      );
    },
    []
  );

  const analyzeVideoCanvasMark = useCallback(
    async ({
      clickX,
      clickY,
      imageUrl,
      sourceNodeId,
      targetNodeId,
    }: VideoCanvasMarkAnalysisState & { imageUrl: string }) => {
      setMarkAnalysisState({ clickX, clickY, sourceNodeId, targetNodeId });
      try {
        const response = await fetch("/api/pick-object", {
          body: JSON.stringify({
            clickX,
            clickY,
            imageData: imageUrl,
            mode: "video-canvas-mark",
          }),
          headers: { "Content-Type": "application/json" },
          method: "POST",
        });
        const payload = (await response.json().catch(() => ({}))) as PickObjectApiResponse;
        if (!response.ok || !payload.success || !payload.object) {
          throw new Error(payload.error || "元素分析失败");
        }
        const labelOptions = Array.from(
          new Set(
            [
              ...(Array.isArray(payload.object.labels) ? payload.object.labels : []),
              payload.object.name || "",
            ]
              .map((label) => String(label || "").trim().slice(0, 8))
              .filter(Boolean)
          )
        ).slice(0, 4);
        if (labelOptions.length === 0) throw new Error("元素分析未返回标签");

        setNodes((current) =>
          current.map((item) => {
            if (item.id !== targetNodeId) return item;
            const currentMarks = getVideoCanvasMagicMarks(item);
            const nextSequence =
              currentMarks.reduce((max, mark) => {
                if (mark.sourceNodeId !== sourceNodeId) return max;
                const suffix = Number(mark.id.slice(sourceNodeId.length + 1));
                return Number.isFinite(suffix) ? Math.max(max, suffix) : max;
              }, 0) + 1;
            const nextMarks = [
              ...currentMarks,
              {
                clickX,
                clickY,
                id: `${sourceNodeId}_${nextSequence}`,
                imageUrl,
                labelOptions,
                selectedIndex: 0,
                sourceNodeId,
              },
            ];
            return {
              ...item,
              draftValues: {
                ...(item.draftValues || {}),
                magicMarks: nextMarks,
                params: {
                  ...getNodeParams(item),
                  magicMarks: nextMarks,
                },
              },
            };
          })
        );
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "元素分析失败");
      } finally {
        setMarkAnalysisState((current) =>
          current?.sourceNodeId === sourceNodeId && current.targetNodeId === targetNodeId
            ? null
            : current
        );
      }
    },
    []
  );

  const selectedGroup=multiSelection.length<=1 && selectedNode && isCanvasGroup(selectedNode)?selectedNode:null;
  const storyboardMembers=selectedGroup?groupMembers(nodes,selectedGroup.id,false):[];
  const canGroupStoryboard=storyboardMembers.length>1&&storyboardMembers.every(n=>["image","video"].includes(n.inputType||"")&&!getTargetModuleKind(n)&&!!getNodeMediaUrl(n)&&!["pending","failed","interrupted"].includes(getDraftString(n,"generationStatus")));
  const storyboardGroup=nodes.find(n=>n.id===storyboardGroupId),shotOrder=storyboardGroup?.draftValues?.shotNodeIds as string[]|undefined;
  const previewShots=storyboardGroup?groupMembers(nodes,storyboardGroup.id,false).filter(n=>["image","video"].includes(n.inputType||"")&&getNodeMediaUrl(n)).sort((a,b)=>(shotOrder?.indexOf(a.id)??0)-(shotOrder?.indexOf(b.id)??0)).map(n=>({id:n.id,title:n.title,url:getNodeMediaUrl(n),type:n.inputType as "image"|"video"})):[];
  const selectedGroupTasks=generationTasks.tasks.filter(t=>t.request.workflow?.groupId===selectedGroup?.id);
  const latestGroupRun=selectedGroupTasks.at(-1)?.request.workflow?.runId;
  const latestGroupTasks=selectedGroupTasks.filter(t=>t.request.workflow?.runId===latestGroupRun);
  const groupBusy=groupSubmitting||groupRuns.submitting||latestGroupTasks.some(t=>["pending","running"].includes(t.status)||t.status==="interrupted"&&hasRecoverableCanvasTask(t));
  const createSelectedGroup=useCallback(()=>{
    try{const id=makeId("group");setNodes(makeCanvasGroup(nodes,multiSelection.length?multiSelection:selectedNodeId?[selectedNodeId]:[],id));setMultiSelection([]);setSelectedNodeId(id);}catch(e){toast.error((e as Error).message);}
  },[nodes,multiSelection,selectedNodeId]);
  const releaseGroup=useCallback(()=>{if(!selectedNodeId)return;setNodes(current=>ungroupCanvasNodes(current,selectedNodeId));setSelectedNodeId(null);setMultiSelection([]);},[selectedNodeId]);
  const executeGroup=async()=>{
    if(!selectedGroup||groupSubmitting)return;
    setGroupSubmitting(true);
    try {
      const requests=compileCanvasGroupRun(nodes,edges,selectedGroup.id);
      await groupRuns.submit(requests);
      generationTasks.refresh();toast.success(`已提交 ${requests.length} 个节点，按连线依赖执行`);
    }catch(e){toast.error((e as Error).message);}finally{setGroupSubmitting(false);}
  };
  const patchGroup=(patch:Record<string,unknown>)=>setNodes(current=>current.map(n=>n.id===selectedGroup?.id?{...n,draftValues:{...n.draftValues,...patch}}:n));
  const saveGroupTemplate=()=>{if(!selectedGroup)return;const template=exportCanvasGroup(nodes,edges,selectedGroup.id);setGroupTemplates(current=>[...current.filter(t=>t.sourceId!==selectedGroup.id),{...template,sourceId:selectedGroup.id}].slice(-30));toast.success("已保存到我的工具箱，画布保存后可跨画布复用");};
  const downloadGroup=()=>{if(!selectedGroup)return;const url=URL.createObjectURL(new Blob([JSON.stringify(exportCanvasGroup(nodes,edges,selectedGroup.id),null,2)],{type:"application/json"}));const a=document.createElement("a");a.href=url;a.download=`${selectedGroup.title.replace(/[\\/:*?"<>|]/g,"-")}.canvas-group.json`;a.click();setTimeout(()=>URL.revokeObjectURL(url),1000);};
  const importGroup=(template:any)=>{try{const value=instantiateCanvasGroup(template,()=>makeId("group-node"),Math.max(0,(200-viewport.x)/viewport.zoom),Math.max(0,(200-viewport.y)/viewport.zoom));setNodes(current=>[...current,...value.nodes as unknown as CloneNode[]]);setEdges(current=>[...current,...value.edges]);setSelectedNodeId(value.groupId);setMultiSelection([]);}catch(e){toast.error((e as Error).message);}};

  const startNodeDrag = useCallback(
    (event: ReactPointerEvent, node: CloneNode) => {
      event.stopPropagation();
      if (panMode || spacePanRef.current) {
        if (event.button !== 0) return;
        event.currentTarget.setPointerCapture(event.pointerId);
        dragRef.current = {kind:"canvas",startX:event.clientX,startY:event.clientY,viewportX:viewport.x,viewportY:viewport.y};
        return;
      }
      if (markSelectionTargetId) {
        event.preventDefault();
        const mediaType = getDraftString(node, "mediaType") || node.inputType;
        const imageUrl = getNodeReferenceMediaUrl(node);
        const eligible =
          node.kind === "media" &&
          mediaType === "image" &&
          Boolean(imageUrl) &&
          !markAnalysisState;
        if (!eligible) return;
        const imageElement = event.currentTarget.querySelector("img");
        const imageRect = imageElement?.getBoundingClientRect();
        if (
          !imageRect ||
          event.clientX < imageRect.left ||
          event.clientX > imageRect.right ||
          event.clientY < imageRect.top ||
          event.clientY > imageRect.bottom
        ) {
          return;
        }
        const clickX = Math.max(
          0,
          Math.min(1, (event.clientX - imageRect.left) / imageRect.width)
        );
        const clickY = Math.max(
          0,
          Math.min(1, (event.clientY - imageRect.top) / imageRect.height)
        );
        setSelectedNodeId(markSelectionTargetId);
        setSelectedEdgeId(null);
        setInspectorNodeId(null);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        void analyzeVideoCanvasMark({
          clickX,
          clickY,
          imageUrl,
          sourceNodeId: node.id,
          targetNodeId: markSelectionTargetId,
        });
        return;
      }
      if (frameAnalysisSelectionTargetId) {
        event.preventDefault();
        const targetId = frameAnalysisSelectionTargetId;
        if (node.id === targetId || node.inputType !== "video" || !getNodePlayableVideoUrl(node)) return;
        const connected = edges.some(edge => edge.source === node.id && edge.target === targetId);
        if (!connected && !connectExistingNodes(node.id, targetId, { notify: false })) return;
        setFrameAnalysisSelectionTargetId(null);
        setSelectedNodeId(targetId);
        setSelectedEdgeId(null);
        setInspectorNodeId(null);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        toast.success("已选择视频素材");
        return;
      }
      if (referenceSelectionTargetId) {
        event.preventDefault();
        const mediaType = getDraftString(node, "mediaType") || node.inputType;
        const eligible =
          node.id !== referenceSelectionTargetId &&
          node.kind === "media" &&
          mediaType === "image" &&
          Boolean(getNodeReferenceMediaUrl(node));
        if (!eligible) return;

        const connected = edges.some(edge => edge.source === node.id && edge.target === referenceSelectionTargetId);
        if (connected) {
          setEdges(current => current.filter(edge => !(edge.source === node.id && edge.target === referenceSelectionTargetId)));
        } else if (!connectExistingNodes(node.id, referenceSelectionTargetId, { notify: false })) return;
        setSelectedNodeId(referenceSelectionTargetId);
        setSelectedEdgeId(null);
        setInspectorNodeId(null);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        return;
      }
      if (lineConnectState) {
        event.preventDefault();
        const canvasPoint = getCanvasPoint(event.clientX, event.clientY);
        setSelectedNodeId(node.id);
        setSelectedEdgeId(null);
        setInspectorNodeId(null);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        if (lineConnectState.targetId) {
          if (connectExistingNodes(node.id, lineConnectState.targetId, { notify: false })) {
            setLineConnectState(null);
          }
          return;
        }
        if (!lineConnectState.sourceId) {
          setLineConnectState({
            cursorCanvasX: canvasPoint.x,
            cursorCanvasY: canvasPoint.y,
            sourceId: node.id,
          });
          return;
        }
        if (connectExistingNodes(lineConnectState.sourceId, node.id, { notify: false })) {
          setLineConnectState(null);
        }
        return;
      }

      if(event.shiftKey){setMultiSelection(current=>{const ids=current.length?current:selectedNodeId?[selectedNodeId]:[];return ids.includes(node.id)?ids.filter(id=>id!==node.id):[...ids,node.id];});setSelectedNodeId(node.id);return;}
      if(!multiSelection.includes(node.id))setMultiSelection([]);
      event.currentTarget.setPointerCapture(event.pointerId);
      setSelectedNodeId(node.id);
      setSelectedEdgeId(null);
      setInspectorNodeId(null);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      dragRef.current = {
        kind: "node",
        id: node.id,
        ids:multiSelection.includes(node.id)?multiSelection:[node.id],
        startX: event.clientX,
        startY: event.clientY,
        nodeX: node.x,
        nodeY: node.y,
      };
    },
    [
      analyzeVideoCanvasMark,
      multiSelection,selectedNodeId,
      panMode, viewport.x, viewport.y,
      connectExistingNodes,
      getCanvasPoint,
      lineConnectState,
      frameAnalysisSelectionTargetId,
      markAnalysisState,
      markSelectionTargetId,
      referenceSelectionTargetId,
    ]
  );

  const startCanvasDrag = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
    if (event.button !== 0) return;
    if ((event.target as HTMLElement).closest("[data-canvas-overlay]")) return;
    if(event.shiftKey){const point=getCanvasPoint(event.clientX,event.clientY);marqueeStart.current=point;setSelectionRect({...point,width:0,height:0});event.currentTarget.setPointerCapture(event.pointerId);return;}
    setMultiSelection([]);
    setSelectedNodeId(null);
    setSelectedEdgeId(null);
    setInspectorNodeId(null);
    setCanvasCommand(null);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    setLineConnectState(null);
    dragRef.current = {
      kind: "canvas",
      startX: event.clientX,
      startY: event.clientY,
      viewportX: viewport.x,
      viewportY: viewport.y,
    };
  }, [viewport.x, viewport.y,getCanvasPoint]);

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (smartEditNodeId) return;
      const target = event.target as HTMLElement | null;
      if (target?.closest("input, textarea, select, [contenteditable='true']")) return;
      if (event.key.toLowerCase() === "g" && !event.altKey && !(event.metaKey && !event.shiftKey)) {event.preventDefault();if((event.metaKey||event.ctrlKey)&&event.shiftKey&&selectedNodeId&&nodes.some(n=>n.id===selectedNodeId&&isCanvasGroup(n)))releaseGroup();else if(!event.metaKey&&!event.ctrlKey)createSelectedGroup();return;}
      if (event.code === "Space") { event.preventDefault(); spacePanRef.current = true; return; }
      if (!event.metaKey && !event.ctrlKey && !event.altKey && event.key.toLowerCase() === "l") {
        event.preventDefault();
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        setInspectorNodeId(null);
        setSelectedEdgeId(null);
        setLineConnectState((current) => {
          if (current) {
            return null;
          }
          const source = selectedNodeId ? nodes.find((node) => node.id === selectedNodeId) : null;
          if (source) {
            return createLineConnectState(source);
          }
          return createLineConnectState(null);
        });
        return;
      }
      if ((event.key === "Delete" || event.key === "Backspace") && selectedEdgeId) {
        event.preventDefault();
        deleteSelectedEdge();
        return;
      }
      if ((event.key === "Delete" || event.key === "Backspace") && selectedNodeId) {
        event.preventDefault();
        deleteNode(selectedNodeId, { silent: true });
        return;
      }
      if (event.key === "Escape") {
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setSelectedNodeId(null);
        setSelectedEdgeId(null);
        setActivePanel(null);
        setLineConnectState(null);
        setReferenceSelectionTargetId(null);
        setFrameAnalysisSelectionTargetId(null);
        setMarkSelectionTargetId(null);
        setMarkAnalysisState(null);
      }
    };
    const releasePan = () => { spacePanRef.current = false; };
    const onKeyUp = (event: KeyboardEvent) => { if (event.code === "Space") releasePan(); };
    window.addEventListener("keydown", onKeyDown);
    window.addEventListener("keyup", onKeyUp);
    window.addEventListener("blur", releasePan);
    return () => { window.removeEventListener("keydown", onKeyDown); window.removeEventListener("keyup", onKeyUp); window.removeEventListener("blur", releasePan); };
  }, [createLineConnectState, createSelectedGroup, releaseGroup, deleteNode, deleteSelectedEdge, nodes, selectedEdgeId, selectedNodeId, smartEditNodeId]);

  const onPointerMove = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      if(marqueeStart.current){const start=marqueeStart.current,point=getCanvasPoint(event.clientX,event.clientY),rect={x:Math.min(start.x,point.x),y:Math.min(start.y,point.y),width:Math.abs(point.x-start.x),height:Math.abs(point.y-start.y)};setSelectionRect(rect);setMultiSelection(nodes.filter(n=>!isCanvasGroup(n)&&n.x>=rect.x&&n.y>=rect.y&&n.x+n.width<=rect.x+rect.width&&n.y+n.height<=rect.y+rect.height).map(n=>n.id));return;}
      if(groupResize.current){const r=groupResize.current,dx=(event.clientX-r.startX)/viewport.zoom,dy=(event.clientY-r.startY)/viewport.zoom;setNodes(current=>current.map(n=>{if(n.id!==r.id)return n;const children=groupMembers(current,r.id,false),bound=groupBounds(children);const left=r.corner.includes("w")?Math.min(r.x+dx,children.length?bound.x:r.x+r.width-160):r.x,top=r.corner.includes("n")?Math.min(r.y+dy,children.length?bound.y:r.y+r.height-100):r.y;const right=r.corner.includes("e")?Math.max(r.x+r.width+dx,children.length?bound.x+bound.width:r.x+160):r.x+r.width,bottom=r.corner.includes("s")?Math.max(r.y+r.height+dy,children.length?bound.y+bound.height:r.y+100):r.y+r.height;return {...n,x:left,y:top,width:right-left,height:bottom-top};}));return;}
      const endpointDrag = connectionDragRef.current;
      if (endpointDrag) {
        updateEndpointConnectionDrag(event.clientX, event.clientY);
        return;
      }
      if (lineConnectState?.sourceId || lineConnectState?.targetId) {
        const canvasPoint = getCanvasPoint(event.clientX, event.clientY);
        setLineConnectState((current) =>
          current?.sourceId || current?.targetId
            ? {
                ...current,
                cursorCanvasX: canvasPoint.x,
                cursorCanvasY: canvasPoint.y,
                hoverNodeId: getConnectionHoverNodeId(event.clientX, event.clientY, current.sourceId || current.targetId),
              }
            : current
        );
      }
      const drag = dragRef.current;
      if (!drag) return;
      if (drag.kind === "node") {
        const dx = (event.clientX - drag.startX) / viewport.zoom;
        const dy = (event.clientY - drag.startY) / viewport.zoom;
        const gridSize = snapEnabled ? 8 : 1;
        const nextX = Math.round((drag.nodeX + dx) / gridSize) * gridSize;
        const nextY = Math.round((drag.nodeY + dy) / gridSize) * gridSize;
        setNodes(current=>{const anchor=current.find(n=>n.id===drag.id);return anchor?moveCanvasSelection(current,drag.ids||[drag.id],nextX-anchor.x,nextY-anchor.y):current;});
        return;
      }
      setViewport((current) => ({
        ...current,
        x: Math.round(drag.viewportX + event.clientX - drag.startX),
        y: Math.round(drag.viewportY + event.clientY - drag.startY),
      }));
    },
    [nodes,getCanvasPoint, getConnectionHoverNodeId, lineConnectState?.sourceId, lineConnectState?.targetId, snapEnabled, updateEndpointConnectionDrag, viewport.zoom]
  );

  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
    if(marqueeStart.current||groupResize.current){marqueeStart.current=null;groupResize.current=null;setSelectionRect(null);return;}
    const endpointDrag = connectionDragRef.current;
    if (endpointDrag) {
      if (finishEndpointConnectionDrag(event.clientX, event.clientY)) {
        event.stopPropagation();
        return;
      }
    }
    dragRef.current = null;
  }, [finishEndpointConnectionDrag]);

  useEffect(() => {
    return () => {
      connectionDragCleanupRef.current?.();
      connectionDragCleanupRef.current = null;
    };
  }, []);

  const setZoomAroundViewportCenter = useCallback((nextZoom: number) => {
    setViewport((current) => {
      const zoom = clampCanvasZoom(nextZoom);
      if (zoom === current.zoom) return current;
      const clientX = (canvasRef.current?.clientWidth || window.innerWidth) / 2;
      const clientY = (canvasRef.current?.clientHeight || window.innerHeight) / 2;
      const worldX = (clientX - current.x) / current.zoom;
      const worldY = (clientY - current.y) / current.zoom;
      return {
        x: Math.round(clientX - worldX * zoom),
        y: Math.round(clientY - worldY * zoom),
        zoom,
      };
    });
  }, []);

  const zoomBy = useCallback((delta: number) => {
    setViewport((current) => {
      const nextZoom = clampCanvasZoom(current.zoom + delta);
      if (nextZoom === current.zoom) return current;
      const clientX = (canvasRef.current?.clientWidth || window.innerWidth) / 2;
      const clientY = (canvasRef.current?.clientHeight || window.innerHeight) / 2;
      const worldX = (clientX - current.x) / current.zoom;
      const worldY = (clientY - current.y) / current.zoom;
      return {
        x: Math.round(clientX - worldX * nextZoom),
        y: Math.round(clientY - worldY * nextZoom),
        zoom: nextZoom,
      };
    });
  }, []);

  const zoomAtPoint = useCallback((delta: number, clientX: number, clientY: number) => {
    setViewport((current) => {
      const nextZoom = clampCanvasZoom(current.zoom + delta);
      if (nextZoom === current.zoom) return current;
      const worldX = (clientX - current.x) / current.zoom;
      const worldY = (clientY - current.y) / current.zoom;
      return {
        x: Math.round(clientX - worldX * nextZoom),
        y: Math.round(clientY - worldY * nextZoom),
        zoom: nextZoom,
      };
    });
  }, []);

  const fitNodesToView = useCallback(
    (targetNodes: CloneNode[]) => {
      if (targetNodes.length === 0) {
        setViewport(DEFAULT_VIEWPORT);
        return;
      }
      const canvasWidth = canvasRef.current?.clientWidth || window.innerWidth;
      const canvasHeight = canvasRef.current?.clientHeight || window.innerHeight;
      const minX = Math.min(...targetNodes.map((node) => node.x));
      const minY = Math.min(...targetNodes.map((node) => node.y));
      const maxX = Math.max(...targetNodes.map((node) => node.x + node.width));
      const maxY = Math.max(...targetNodes.map((node) => node.y + node.height));
      const boundsWidth = Math.max(1, maxX - minX);
      const boundsHeight = Math.max(1, maxY - minY);
      const padding = targetNodes.length === 1 ? 280 : 220;
      const nextZoom = Math.min(
        1.35,
        Math.max(CANVAS_MIN_ZOOM, Math.min((canvasWidth - padding) / boundsWidth, (canvasHeight - padding) / boundsHeight))
      );
      setViewport({
        x: Math.round((canvasWidth - boundsWidth * nextZoom) / 2 - minX * nextZoom),
        y: Math.round((canvasHeight - boundsHeight * nextZoom) / 2 - minY * nextZoom),
        zoom: Number(nextZoom.toFixed(2)),
      });
    },
    []
  );

  const fitDockTarget = useCallback(() => {
    fitNodesToView(nodes);
    setDockOverviewOpen(false);
  }, [fitNodesToView, nodes]);

  const handleArrangeCanvas = useCallback(() => {
    setDockOverviewOpen(false);
    if (nodes.length === 0) {
      fitNodesToView(nodes);
      setArrangePreview(null);
      return;
    }
    const arrangedNodes = arrangeNodesForPreview(nodes);
    setArrangePreview({
      nodes: nodes.map((node) => ({ ...node })),
      viewport,
    });
    setNodes(arrangedNodes);
    fitNodesToView(arrangedNodes);
  }, [fitNodesToView, nodes, viewport]);

  const restoreArrangePreview = useCallback(() => {
    if (!arrangePreview) return;
    setNodes(arrangePreview.nodes);
    setViewport(arrangePreview.viewport);
    setArrangePreview(null);
  }, [arrangePreview]);

  const keepArrangePreview = useCallback(() => {
    setArrangePreview(null);
  }, []);

  const onCanvasWheel = useCallback(
    (event: ReactWheelEvent<HTMLDivElement>) => {
      const target = event.target as HTMLElement;
      const overlay = target.closest("[data-canvas-overlay]");
      const canvasNode = target.closest("[data-canvas-node]");
      if (overlay && !canvasNode) return;
      event.preventDefault();
      if (event.ctrlKey || event.metaKey) {
        zoomAtPoint(event.deltaY > 0 ? -0.08 : 0.08, event.clientX, event.clientY);
        return;
      }
      setViewport((current) => ({
        ...current,
        x: Math.round(current.x - event.deltaX),
        y: Math.round(current.y - event.deltaY),
      }));
    },
    [zoomAtPoint]
  );

  const copyShareLink = useCallback(async () => {
    const url =
      typeof window === "undefined"
        ? `/canvas/${canvasId}?mode=video&workspaceType=video`
        : window.location.href;
    await navigator.clipboard?.writeText(url).catch(() => undefined);
    setShareEnabled(true);
    toast.success("分享链接已复制");
  }, [canvasId]);

  const startAssetManagerResize = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      event.preventDefault();
      event.stopPropagation();
      assetManagerResizeCleanupRef.current?.();

      const previousCursor = document.body.style.cursor;
      const previousUserSelect = document.body.style.userSelect;

      const handlePointerMove = (moveEvent: PointerEvent) => {
        setAssetManagerWidth(clampAssetManagerWidth(moveEvent.clientX));
      };

      const cleanup = () => {
        document.removeEventListener("pointermove", handlePointerMove);
        document.removeEventListener("pointerup", cleanup);
        document.removeEventListener("pointercancel", cleanup);
        document.body.style.cursor = previousCursor;
        document.body.style.userSelect = previousUserSelect;
        assetManagerResizeCleanupRef.current = null;
      };

      document.addEventListener("pointermove", handlePointerMove);
      document.addEventListener("pointerup", cleanup, { once: true });
      document.addEventListener("pointercancel", cleanup, { once: true });
      document.body.style.cursor = "col-resize";
      document.body.style.userSelect = "none";
      assetManagerResizeCleanupRef.current = cleanup;
    },
    []
  );

  const locateCanvasNode = useCallback(
    (nodeId: string) => {
      const node = nodes.find((item) => item.id === nodeId);
      if (!node) return;
      const canvasWidth = canvasRef.current?.clientWidth || window.innerWidth;
      const canvasHeight = canvasRef.current?.clientHeight || window.innerHeight;
      const drawerOffset = activePanel === "assetManager" ? assetManagerWidth : 0;
      const zoom = 1;

      setSelectedNodeId(node.id);
      setSelectedEdgeId(null);
      setNodeContextMenu(null);
      setConnectionMenu(null);
      setLineConnectState(null);
      setViewport({
        x: Math.round(drawerOffset + (canvasWidth - drawerOffset) / 2 - (node.x + node.width / 2) * zoom),
        y: Math.round(canvasHeight / 2 - (node.y + node.height / 2) * zoom),
        zoom,
      });
    },
    [activePanel, assetManagerWidth, nodes]
  );

  const toggleTopPanel = useCallback((panel: Exclude<ActivePanel, null>) => {
    setCanvasCommand(null);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    setInspectorNodeId(null);
    setLineConnectState(null);
    setActivePanel((current) => (current === panel ? null : panel));
  }, []);

  const isBusy = isLoading || isProjectLoading;

  // ── 画布撤销/重做（快照式，忽略生成进度等易变字段）──
  const canvasHistoryRef = useRef<{
    undo: Array<{ nodes: CloneNode[]; edges: CloneEdge[] }>;
    redo: Array<{ nodes: CloneNode[]; edges: CloneEdge[] }>;
  }>({ undo: [], redo: [] });
  const historyLastSnapshotRef = useRef<{ nodes: CloneNode[]; edges: CloneEdge[] } | null>(null);
  const historySignatureRef = useRef("");
  const [, setHistoryVersion] = useState(0);

  const canvasHistorySignature = useCallback((snapshot: { nodes: CloneNode[]; edges: CloneEdge[] }) => JSON.stringify([
    snapshot.nodes.map(node => [
      node.id, node.x, node.y, node.width, node.height, node.title, node.subtitle, node.kind, node.inputType,
      node.draftValues
        ? JSON.stringify({ ...node.draftValues, generationProgress: 0, generationError: undefined, uploadStatus: undefined, uploadError: undefined })
        : null,
    ]),
    snapshot.edges.map(edge => [edge.id, edge.source, edge.target]),
  ]), []);

  useEffect(() => {
    if (isProjectLoading) return;
    const timer = window.setTimeout(() => {
      const snapshot = {
        nodes: JSON.parse(JSON.stringify(nodes)) as CloneNode[],
        edges: JSON.parse(JSON.stringify(edges)) as CloneEdge[],
      };
      const signature = canvasHistorySignature(snapshot);
      if (signature === historySignatureRef.current) return;
      const last = historyLastSnapshotRef.current;
      if (last && canvasHistorySignature(last) !== signature) {
        const undoStack = canvasHistoryRef.current.undo;
        undoStack.push(last);
        if (undoStack.length > 50) undoStack.shift();
        canvasHistoryRef.current.redo.length = 0;
        setHistoryVersion(current => current + 1);
      }
      historyLastSnapshotRef.current = snapshot;
      historySignatureRef.current = signature;
    }, 800);
    return () => window.clearTimeout(timer);
  }, [nodes, edges, isProjectLoading, canvasHistorySignature]);

  const undoCanvas = useCallback(() => {
    const previous = canvasHistoryRef.current.undo.pop();
    if (!previous) { toast.info("没有可撤销的操作"); return; }
    canvasHistoryRef.current.redo.push({
      nodes: JSON.parse(JSON.stringify(nodes)) as CloneNode[],
      edges: JSON.parse(JSON.stringify(edges)) as CloneEdge[],
    });
    historyLastSnapshotRef.current = previous;
    historySignatureRef.current = canvasHistorySignature(previous);
    setNodes(previous.nodes);
    setEdges(previous.edges);
    setHistoryVersion(current => current + 1);
    toast.success("已撤销");
  }, [nodes, edges]);

  const redoCanvas = useCallback(() => {
    const next = canvasHistoryRef.current.redo.pop();
    if (!next) { toast.info("没有可重做的操作"); return; }
    canvasHistoryRef.current.undo.push({
      nodes: JSON.parse(JSON.stringify(nodes)) as CloneNode[],
      edges: JSON.parse(JSON.stringify(edges)) as CloneEdge[],
    });
    historyLastSnapshotRef.current = next;
    historySignatureRef.current = canvasHistorySignature(next);
    setNodes(next.nodes);
    setEdges(next.edges);
    setHistoryVersion(current => current + 1);
    toast.success("已重做");
  }, [nodes, edges]);

  // ── 画布节点搜索（⌘F）──
  const [nodeSearchOpen, setNodeSearchOpen] = useState(false);

  // ── 扩展快捷键：撤销/重做/复制/生成/新建/搜索/适应画布/拖动工具 ──
  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (smartEditNodeId) return;
      const target = event.target as HTMLElement | null;
      if (target?.closest("input, textarea, select, [contenteditable='true']")) return;
      const command = event.metaKey || event.ctrlKey;
      if (command && event.key.toLowerCase() === "z") {
        event.preventDefault();
        if (event.shiftKey) redoCanvas();
        else undoCanvas();
        return;
      }
      if (command && event.key.toLowerCase() === "d" && selectedNodeId) {
        event.preventDefault();
        duplicateNode(selectedNodeId);
        return;
      }
      if (command && event.key === "Enter" && selectedNodeId) {
        event.preventDefault();
        void runNode(selectedNodeId);
        return;
      }
      if (command && event.key === "0") {
        event.preventDefault();
        fitDockTarget();
        return;
      }
      if (command && (event.key === "=" || event.key === "+")) {
        event.preventDefault();
        zoomAtPoint(0.08, Math.round(window.innerWidth / 2), Math.round(window.innerHeight / 2));
        return;
      }
      if (command && event.key === "-") {
        event.preventDefault();
        zoomAtPoint(-0.08, Math.round(window.innerWidth / 2), Math.round(window.innerHeight / 2));
        return;
      }
      if (command && event.key.toLowerCase() === "f") {
        event.preventDefault();
        setNodeSearchOpen(current => !current);
        return;
      }
      if (command) return;
      if (event.key === "Tab") {
        event.preventDefault();
        const screenX = Math.round(window.innerWidth / 2);
        const screenY = Math.round(window.innerHeight / 2);
        const point = toCanvasPoint(screenX, screenY);
        setCanvasCommand({ canvasX: point.x, canvasY: point.y, screenX, screenY });
        return;
      }
      if (event.key.toLowerCase() === "h") {
        spacePanRef.current = true;
        return;
      }
      if (event.key.toLowerCase() === "v") {
        setPanMode(current => {
          toast.info(current ? "已切换回选择工具" : "已切换为拖动画布工具");
          return !current;
        });
      }
    };
    const onKeyUp = (event: KeyboardEvent) => {
      if (event.key.toLowerCase() === "h") spacePanRef.current = false;
    };
    window.addEventListener("keydown", onKeyDown);
    window.addEventListener("keyup", onKeyUp);
    return () => {
      window.removeEventListener("keydown", onKeyDown);
      window.removeEventListener("keyup", onKeyUp);
    };
  }, [smartEditNodeId, redoCanvas, undoCanvas, selectedNodeId, duplicateNode, runNode, fitDockTarget, toCanvasPoint, zoomAtPoint]);

  const selectedPresetControlNode = isOfficialImageControlNode(selectedNode) ? selectedNode : null;
  const selectedGenericImageNode =
    selectedNode &&
    !selectedPresetControlNode &&
    selectedNode.kind === "media" &&
    (getDraftString(selectedNode, "mediaType") || selectedNode.inputType) === "image"
      ? selectedNode
      : null;
  const selectedPresetMode = getPresetControlMode(selectedPresetControlNode);
  const selectedTargetModuleKind = selectedNode ? getTargetModuleKind(selectedNode) : null;
  const selectedTextResourceNode =
    selectedNode && getDraftString(selectedNode, "action") === "TEXT_RESOURCE" ? selectedNode : null;
  const selectedTargetSourceNodes = useMemo(
    () =>
      selectedNode && selectedTargetModuleKind
        ? edges
            .filter((edge) => edge.target === selectedNode.id)
            .map((edge) => nodes.find((item) => item.id === edge.source))
            .filter((item): item is CloneNode => Boolean(item))
        : [],
    [edges, nodes, selectedNode, selectedTargetModuleKind]
  );
  const effectLibraryConnectedNode = useMemo(() => {
    if (!effectLibraryTargetNodeId) return null;
    const sourceId = edges.find((edge) => {
      if (edge.target !== effectLibraryTargetNodeId) return false;
      return isVideoEffectMaterialNode(
        nodes.find((node) => node.id === edge.source),
      );
    })?.source;
    return nodes.find((node) => node.id === sourceId) || null;
  }, [edges, effectLibraryTargetNodeId, nodes]);
  const roleLibraryConnectedNodes = useMemo(() => {
    if (!roleLibraryTargetNodeId) return [];
    return edges
      .filter((edge) => edge.target === roleLibraryTargetNodeId)
      .map((edge) => nodes.find((node) => node.id === edge.source))
      .filter((node): node is CloneNode => isVideoRoleMaterialNode(node));
  }, [edges, nodes, roleLibraryTargetNodeId]);
  const selectedPresetAnchor = useMemo<PresetControlAnchor | null>(() => {
    if (!selectedPresetControlNode) return null;
    return {
      bottomY: Math.round(viewport.y + (selectedPresetControlNode.y + selectedPresetControlNode.height) * viewport.zoom),
      centerX: Math.round(viewport.x + (selectedPresetControlNode.x + selectedPresetControlNode.width / 2) * viewport.zoom),
      topY: Math.round(viewport.y + selectedPresetControlNode.y * viewport.zoom),
      zoom: viewport.zoom,
    };
  }, [selectedPresetControlNode, viewport.x, viewport.y, viewport.zoom]);
  const selectedTargetAnchor = useMemo<PresetControlAnchor | null>(() => {
    if (!selectedNode || !selectedTargetModuleKind) return null;
    return {
      bottomY: Math.round(viewport.y + (selectedNode.y + selectedNode.height) * viewport.zoom),
      centerX: Math.round(viewport.x + (selectedNode.x + selectedNode.width / 2) * viewport.zoom),
      topY: Math.round(viewport.y + selectedNode.y * viewport.zoom),
      zoom: viewport.zoom,
    };
  }, [selectedNode, selectedTargetModuleKind, viewport.x, viewport.y, viewport.zoom]);
  const selectedVideoAnchor = useMemo<PresetControlAnchor | null>(() => {
    if (!selectedVideoMediaNode) return null;
    return {
      bottomY: Math.round(viewport.y + (selectedVideoMediaNode.y + selectedVideoMediaNode.height) * viewport.zoom),
      centerX: Math.round(viewport.x + (selectedVideoMediaNode.x + selectedVideoMediaNode.width / 2) * viewport.zoom),
      topY: Math.round(viewport.y + selectedVideoMediaNode.y * viewport.zoom),
      zoom: viewport.zoom,
    };
  }, [selectedVideoMediaNode, viewport.x, viewport.y, viewport.zoom]);
  const selectedGenericImageAnchor = useMemo<PresetControlAnchor | null>(() => {
    if (!selectedGenericImageNode) return null;
    return {
      bottomY: Math.round(viewport.y + (selectedGenericImageNode.y + selectedGenericImageNode.height) * viewport.zoom),
      centerX: Math.round(viewport.x + (selectedGenericImageNode.x + selectedGenericImageNode.width / 2) * viewport.zoom),
      topY: Math.round(viewport.y + selectedGenericImageNode.y * viewport.zoom),
      zoom: viewport.zoom,
    };
  }, [selectedGenericImageNode, viewport.x, viewport.y, viewport.zoom]);
  const selectedVideoCropGenerateState = selectedVideoMediaNode
    ? videoCropGenerateStates[selectedVideoMediaNode.id]
    : undefined;
  const selectedSubtitleEraseRegions = selectedVideoMediaNode
    ? subtitleEraseRegions[selectedVideoMediaNode.id] || []
    : [];
  const selectedSubtitleEraseHistory = selectedVideoMediaNode
    ? subtitleEraseRegionHistory[selectedVideoMediaNode.id] || { future: [], past: [] }
    : { future: [], past: [] };
  const selectEdge = useCallback((event: ReactPointerEvent<SVGPathElement>, edgeId: string) => {
    event.preventDefault();
    event.stopPropagation();
    setSelectedEdgeId(edgeId);
    setSelectedNodeId(null);
    setInspectorNodeId(null);
    setCanvasCommand(null);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    setActivePanel(null);
    setLineConnectState(null);
  }, []);

  const openStoryScriptWorkflow = useCallback((nodeId: string) => {
    setStoryWorkflowNodeId(nodeId);
    setStoryWorkflowStep("shots");
    setSelectedNodeId(nodeId);
    setSelectedEdgeId(null);
    setCanvasCommand(null);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    setActivePanel(null);
    setLineConnectState(null);
  }, []);

  const lineConnectPreview = useMemo(() => {
    if (!lineConnectState?.sourceId || lineConnectState.cursorCanvasX === null || lineConnectState.cursorCanvasY === null) {
      if (!lineConnectState?.targetId || lineConnectState?.cursorCanvasX === null || lineConnectState?.cursorCanvasY === null) {
        return null;
      }
      const target = nodes.find((node) => node.id === lineConnectState.targetId);
      if (!target) return null;
      return {
        endX: target.x,
        endY: target.y + target.height / 2,
        startX: lineConnectState.cursorCanvasX,
        startY: lineConnectState.cursorCanvasY,
      };
    }
    const source = nodes.find((node) => node.id === lineConnectState.sourceId);
    if (!source) return null;
    return {
      endX: lineConnectState.cursorCanvasX,
      endY: lineConnectState.cursorCanvasY,
      startX: source.x + source.width,
      startY: source.y + source.height / 2,
    };
  }, [lineConnectState, nodes]);

  const handleAgentVideoUiCommand = async (command: CanvasAgentUiCommand) => {
    const target = nodes.find((node) => node.id === (command.nodeIds[0] || selectedNodeId));
    if (command.nodeIds.some((id) => !nodes.some((node) => node.id === id))) throw new Error("目标节点不属于当前视频画布");
    if (target) { setSelectedNodeId(target.id); setSelectedEdgeId(null); }
    if (command.featureId.startsWith("video.function.")) {
      const key = command.featureId.slice("video.function.".length);
      const tool = configuredTools.find((item) => item.toolKey === key);
      if (!tool) throw new Error("此视频功能已关闭或尚未配置");
      if ((key === "grid-split" || key === "image-crop") && target) { await runSelectedImageToolAction(target.id, "crop"); return; }
      if (key === "angle-edit" && target) { setAngleEditorNodeId(target.id); return; }
      const created = createToolNode(tool, target ? target.x + target.width + 72 : 360, target?.y || 300);
      addNodes([created], command.nodeIds.map((id) => ({ id: makeId("edge"), source: id, target: created.id })));
      setInspectorNodeId(created.id);
      return;
    }
    const action = command.featureId.replace("video.ui.", "");
    const panels: Record<string, Exclude<ActivePanel, null>> = { assets: "assets", roles: "roleLibrary", styles: "styleLibrary", effects: "effectLibrary", history: "history", workflows: "workflow", share: "share", publish: "publish", skills: "skills", help: "help" };
    if (panels[action]) { setActivePanel(panels[action]); return; }
    if (action.startsWith("upload-")) { addTargetModule(action === "upload-video" ? "video" : action === "upload-audio" ? "audio" : "image"); toast.message("已添加上传模块，请选择本机文件"); return; }
    if (action === "save") { if (!(await persistence.saveAndConfirm())) throw new Error("画布保存尚未确认，请稍后重试"); return; }
    if (action === "export") {
      const url = URL.createObjectURL(new Blob([JSON.stringify({ title: projectTitle, workspaceType: "video", canvasData: { nodes: serializeNodes(nodes), edges: serializeEdges(edges), viewport } }, null, 2)], { type: "application/json" }));
      const link = document.createElement("a"); link.href = url; link.download = `${projectTitle}.json`; link.click(); setTimeout(() => URL.revokeObjectURL(url), 1000); return;
    }
    if (action === "import") {
      const picker = document.createElement("input"); picker.type = "file"; picker.accept = ".json,application/json";
      picker.onchange = async () => { try { const file = picker.files?.[0]; if (!file) return; const data = JSON.parse(await file.text()); const imported = restoreNodes(data.canvasData || data); if (!imported.length) throw new Error("文件中没有可用的视频画布节点"); if (!window.confirm("确认将文件里的节点添加到当前画布？")) return; const ids = new Map(imported.map((node) => [node.id, makeId("import")])); addNodes(imported.map((node) => ({ ...node, id: ids.get(node.id)! })), restoreEdges(data.canvasData || data).filter((edge) => ids.has(edge.source) && ids.has(edge.target)).map((edge) => ({ id: makeId("edge"), source: ids.get(edge.source)!, target: ids.get(edge.target)! }))); } catch (error) { toast.error(error instanceof Error ? error.message : "导入失败"); } }; picker.click(); return;
    }
    if (!target) throw new Error("请先选中具体素材节点");
    if (action === "download") { downloadMediaNode(target); return; }
    if (action === "preview") { setPreviewNode(target); return; }
    if (action === "local-edit") { await runSelectedImageToolAction(target.id, "localEdit"); return; }
    if (action === "annotate") { await runSelectedImageToolAction(target.id, "annotate"); return; }
    if (action === "director") { setDirectorConsoleNodeId(target.id); return; }
    if (action === "storyboard") { openStoryScriptWorkflow(target.id); return; }
    if (action === "batch-storyboard" || action === "batch-video") { openStoryScriptWorkflow(target.id); toast.message("请检查分镜及费用后在工作台提交批量任务"); return; }
    if (action === "video-hd") { setInspectorNodeId(target.id); toast.message("当前视频 AI 高清尚缺真实后端，不能将原视频冒充高清结果"); return; }
    if (action === "video-clip") { setActiveVideoToolbarMode("clip"); return; }
    if (action === "video-crop") { setActiveVideoToolbarMode("crop"); toast.message("当前裁剪导出后端尚未接入，不能当作已完成的视频裁剪"); return; }
    if (action === "subtitle-erase") { setActiveVideoToolbarMode("subtitleErase"); toast.message("当前去字幕尚未接入真实处理后端"); return; }
    if (["audio-split", "voice-split", "background-split", "frame-first", "frame-last", "frame-current"].includes(action)) { setPreviewNode(target); toast.message("已授权入口；当前页面此功能仍为模拟流程，Agent 不会生成占位素材或伪报完成"); return; }
    throw new Error("此入口需要在相应的视频工作区打开");
  };

  return (
    <div
      className="video-canvas-workspace fixed inset-0 h-dvh w-full overflow-clip bg-[#151515] text-white"
      style={{fontFamily:'-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif', "--spacing":"4px", width: activePanel === "tvstar" && tvstarDocked ? `calc(100vw - ${tvstarDockWidth}px)` : undefined} as CSSProperties}
      onContextMenu={openCanvasCommand}
      onDoubleClick={openCanvasCommand}
      onPointerDown={startCanvasDrag}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onWheel={onCanvasWheel}
      ref={canvasRef}
      data-testid="video-canvas-dropzone"
      onDragEnter={(event) => {
        if (!isCanvasFileDrag(event)) return;
        event.preventDefault();
        fileDragDepth.current++;
        if (!isFileDropBlocked(event) && !isBusy) setFileDragActive(true);
      }}
      onDragOver={(event) => {
        if (!isCanvasFileDrag(event)) return;
        event.preventDefault();
        const allowed = !isFileDropBlocked(event) && !isBusy;
        event.dataTransfer.dropEffect = allowed ? "copy" : "none";
        setFileDragActive(allowed);
      }}
      onDragLeave={(event) => {
        if (!isCanvasFileDrag(event)) return;
        fileDragDepth.current = Math.max(0, fileDragDepth.current - 1);
        if (!fileDragDepth.current) setFileDragActive(false);
      }}
      onDrop={(event) => {
        if (!isCanvasFileDrag(event)) return;
        event.preventDefault();
        event.stopPropagation();
        resetFileDrag();
        if (isFileDropBlocked(event)) return;
        if (isBusy) { toast.error("画布正在加载，请稍候再拖入素材"); return; }
        const files = Array.from(event.dataTransfer.files);
        if (!files.length) { toast.error("未能读取拖入的文件，请从桌面直接拖拽素材后松开"); return; }
        void addUploadedFilesAtPoint(files, toCanvasPoint(event.clientX, event.clientY));
      }}
    >
      <CanvasAgentUiListener projectId={canvasId} workspace="video" onVideoAction={handleAgentVideoUiCommand} />
      <div className="pointer-events-none absolute inset-0" style={{backgroundImage:"radial-gradient(circle,rgba(255,255,255,0.14) 0.7px,transparent 0.7px)",backgroundPosition:"0.5px 0.5px",backgroundSize:"16px 16px"}} />
      {fileDragActive && (
        <div className="pointer-events-none absolute inset-3 z-[1800] flex items-center justify-center rounded-2xl border-2 border-dashed border-cyan-300 bg-cyan-300/5" role="status" aria-live="polite">
          <div className="rounded-xl bg-[#252525] px-6 py-4 text-sm text-white shadow-xl">
            松开即可导入图片、视频或音频 · 每次最多 10 个
          </div>
        </div>
      )}

      {lineConnectState ? (
        <div
          className="-translate-x-1/2 fixed left-1/2 top-2 z-[75] flex flex-col items-center gap-1 text-[12px] text-white/70"
          data-canvas-overlay="true"
        >
          <div className="flex h-[34px] items-center gap-3 rounded-[8px] border border-white/10 bg-[#242424]/95 px-3 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[18px]">
            <span className="text-white/82">正在跟随</span>
            <button
              aria-label="退出跟随"
              className="flex h-6 items-center rounded-[6px] px-2 text-white/56 hover:bg-white/8 hover:text-white"
              onClick={() => setLineConnectState(null)}
              type="button"
            >
              取消ESC
            </button>
          </div>
          <span className="rounded-[6px] bg-black/28 px-2 py-1 text-white/42">按 ESC 退出</span>
        </div>
      ) : null}

      {referenceSelectionTargetId ? (
        <ReferenceSelectionToolbar
          onExit={() => setReferenceSelectionTargetId(null)}
          onReturn={() => locateCanvasNode(referenceSelectionTargetId)}
        />
      ) : null}
      {frameAnalysisSelectionTargetId ? (
        <ReferenceSelectionToolbar
          label="从画布选择视频"
          onExit={() => setFrameAnalysisSelectionTargetId(null)}
          onReturn={() => locateCanvasNode(frameAnalysisSelectionTargetId)}
        />
      ) : null}

      {markSelectionTargetId ? (
        <VideoCanvasMarkSelectionToolbar
          onExit={() => setMarkSelectionTargetId(null)}
          onReturn={() => locateCanvasNode(markSelectionTargetId)}
        />
      ) : null}

      {storyboardGroupId&&<GroupStoryboardPreview shots={previewShots} onClose={()=>setStoryboardGroupId(null)} onOrder={ids=>setNodes(current=>{const changed=current.map(n=>n.id===storyboardGroupId?{...n,draftValues:{...n.draftValues,shotNodeIds:ids}}:n);const ordered=[...changed.filter(n=>!ids.includes(n.id)),...ids.map(id=>changed.find(n=>n.id===id)!).filter(Boolean)];return layoutCanvasGroup(ordered,storyboardGroupId,"horizontal");})}/>}
      {selectedGroup&&<CanvasGroupToolbar title={selectedGroup.title} color={String(selectedGroup.draftValues?.groupColor||"#aaaaaa")} busy={groupBusy} storyboard={selectedGroup.draftValues?.groupMode==="storyboard"} canStoryboard={canGroupStoryboard} status={latestGroupTasks.length?`已完成 ${latestGroupTasks.filter(t=>t.status==="succeeded").length}/${latestGroupTasks.length} · 失败 ${latestGroupTasks.filter(t=>t.status==="failed").length}`:""}
        onRename={title=>setNodes(current=>current.map(n=>n.id===selectedGroup.id?{...n,title}:n))} onColor={color=>patchGroup({groupColor:color})}
        onLayout={layout=>setNodes(current=>layoutCanvasGroup(current,selectedGroup.id,layout))} onRun={()=>void executeGroup()} onUngroup={releaseGroup} onSave={saveGroupTemplate} onDownload={downloadGroup}
        onStoryboard={()=>{if(!canGroupStoryboard)return;if(selectedGroup.draftValues?.groupMode!=="storyboard"){patchGroup({groupMode:"storyboard",shotNodeIds:storyboardMembers.sort((a,b)=>a.y-b.y||a.x-b.x).map(n=>n.id)});setNodes(current=>layoutCanvasGroup(current,selectedGroup.id,"horizontal"));}setStoryboardGroupId(selectedGroup.id);}}
        onCancel={async()=>{for(const task of latestGroupTasks.filter(t=>t.status==="pending"))await generationTasks.cancel(task.id);}}/>}
      {multiSelection.length>1&&!selectedGroup&&<button data-canvas-overlay="true" onClick={createSelectedGroup} className="absolute left-1/2 top-24 z-[70] rounded-xl border border-white/10 bg-[#252525] px-6 py-3 text-white">编组（{multiSelection.length} 个节点）</button>}
      <input ref={replaceFileInputRef} data-testid="canvas-replace-file-input" type="file" className="hidden" onChange={event => {
        const selected = Array.from(event.target.files || []);
        const pendingAnchorId = pendingFrameAnalysisUploadRef.current;
        const nodeId = replaceFileNodeId.current;
        event.target.value = "";
        pendingFrameAnalysisUploadRef.current = null;
        if (!selected.length) return;
        const prepared = prepareCanvasMediaFiles(selected);
        if (prepared.errors.length || !prepared.files[0]) {
          toast.error(prepared.errors[0] || "请选择图片、视频或音频文件");
          return;
        }
        const file = prepared.files[0];
        if (pendingAnchorId && canvasMediaType(file) !== "video") {
          toast.error("请选择视频素材");
          return;
        }
        if (!pendingAnchorId && !nodeId) return;
        const currentNode = nodes.find(node => node.id === nodeId);
        const expectedType = currentNode?.inputType;
        if (expectedType && ["image", "video", "audio"].includes(expectedType) && canvasMediaType(file) !== expectedType) {
          toast.error(`请选择${expectedType === "image" ? "图片" : expectedType === "video" ? "视频" : "音频"}文件替换当前素材`);
          return;
        }
        uploadQueueRef.current = uploadQueueRef.current.catch(() => {}).then(async () => {
          try {
            const data = await uploadCanvasMediaFile(file);
            const mediaTitle = file.name.replace(/\.[^.]+$/, "");
            const outputSizeLabel = data.width && data.height ? `${data.width} × ${data.height}` : undefined;
            if (pendingAnchorId) {
              const anchor = nodes.find(node => node.id === pendingAnchorId);
              if (!anchor) return;
              const videoInput = createInputNode("video", Math.round(anchor.x - 158 - OFFICIAL_NODE_GAP), Math.round(anchor.y + anchor.height / 2 - 79));
              addNodes([{
                ...videoInput,
                kind: "media",
                title: mediaTitle || "拉片视频素材",
                draftValues: {
                  ...videoInput.draftValues,
                  mediaType: "video",
                  mediaUrl: data.url,
                  url: [data.url],
                  isExample: false,
                  generated: false,
                  generationStatus: "idle",
                  durationSeconds: data.duration,
                  outputSizeLabel,
                  uploadStatus: "complete",
                },
              }], [{ id: makeId("edge"), source: videoInput.id, target: pendingAnchorId }]);
            } else {
              setNodes(current => current.map(node => node.id === nodeId ? {
                ...node,
                kind: "media",
                inputType: data.mediaType,
                title: mediaTitle || node.title,
                draftValues: {
                  ...node.draftValues,
                  mediaType: data.mediaType,
                  mediaUrl: data.url,
                  url: [data.url],
                  isExample: false,
                  generated: false,
                  generationStatus: "idle",
                  durationSeconds: data.duration,
                  outputSizeLabel,
                  uploadStatus: "complete",
                  uploadError: undefined,
                },
              } : node));
            }
            toast.success(`${file.name} ${pendingAnchorId ? "上传" : "替换"}完成`);
          } catch (error) {
            toast.error(error instanceof Error ? error.message : "上传失败，原素材已保留");
          }
        });
      }} />
      {cancelGenerationConfirmNodeId ? (
        <CancelGenerationConfirmDialog
          onCancel={() => setCancelGenerationConfirmNodeId(null)}
          onConfirm={async () => {
            const taskId = getDraftString(nodes.find(node=>node.id===cancelGenerationConfirmNodeId),"generationTaskId");
            if (!taskId) {toast.info("该任务已在执行或正在确认提交，当前无法中止；完成后会保存结果。");setCancelGenerationConfirmNodeId(null);return;}
            try {await generationTasks.cancel(taskId);toast.success("已取消排队任务");}catch(error){toast.error(error instanceof Error?error.message:"取消失败");}
            setCancelGenerationConfirmNodeId(null);
          }}
        />
      ) : null}

      <div
        className="absolute left-0 top-0 z-0 origin-top-left"
        data-canvas-world="true"
        style={{ height: CANVAS_EXTENT, transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`, width: CANVAS_EXTENT }}
      >
        <CloneEdges
          edges={edges}
          nodes={nodes}
          onDeleteEdge={deleteEdge}
          onEdgePointerDown={selectEdge}
          preview={lineConnectPreview}
          selectedEdgeId={selectedEdgeId}
        />
        {selectionRect&&<div className="pointer-events-none absolute z-50 border border-blue-400 bg-blue-400/10" style={{left:selectionRect.x,top:selectionRect.y,width:selectionRect.width,height:selectionRect.height}}/>}
        {[...nodes.filter(isCanvasGroup).sort((a,b)=>b.width*b.height-a.width*a.height),...nodes.filter(n=>!isCanvasGroup(n))].map((node) => (
          <CloneCanvasNode
            connectionsHidden={edgesHidden}
            connectionHoverActive={node.id === lineConnectState?.hoverNodeId}
            frameAnalysisReady={getTargetModuleKind(node) === "frame-analysis" && nodes.some((source) => source.inputType === "video" && !!getNodePlayableVideoUrl(source) && !["uploading", "failed"].includes(getDraftString(source, "uploadStatus")) && !["pending", "running", "queued", "failed", "cancelled", "canceled", "interrupted"].includes(getDraftString(source, "generationStatus")) && edges.some((edge) => edge.source === source.id && edge.target === node.id))}
            frameAnalysisModelReady={videoCanvasFunctionConfig.enabled && getConfiguredFunction(videoCanvasFunctionConfig, "video-analysis").enabled && filterCanvasModels(canvasModelOptions, "multimodal").length > 0}
            frameAnalysisAudioModelReady={canvasModelOptions.some((model) => model.providerType === "alibaba" && model.modelId === "qwen3.8-omni-flash")}
            key={node.id}
            node={node}
            smartEditPreviewUrl={getTargetModuleKind(node) === "smart-edit" ? getNodeReferenceMediaUrl(nodes.find(source => edges.some(edge => edge.target === node.id && edge.source === source.id) && source.inputType === "video") || node) : undefined}
            selected={multiSelection.length?multiSelection.includes(node.id):node.id === selectedNodeId}
            onContextMenu={(event) => openNodeContext(event, node)}
            onCancelGeneration={() => cancelGenerationNode(node.id)}
            onChooseFile={()=>{pendingFrameAnalysisUploadRef.current=null;replaceFileNodeId.current=node.id;if(replaceFileInputRef.current){replaceFileInputRef.current.accept=node.inputType==="audio"?"audio/*":node.inputType==="video"?"video/*":"image/*";replaceFileInputRef.current.click();}}}
            onClearGridSplit={() => dismissNodeGridSplit(node.id)}
            onClearGridSplitSelection={() => clearNodeGridSplitSelection(node.id)}
            onClearLocalEditRegions={() => clearNodeLocalEditRegions(node.id)}
            onExtractVideoFrame={(kind,time) => void extractVideoFrameNode(node.id, kind,time)}
            onGenerateVideoHd={() => generateVideoHdUpscaleNode(node.id)}
            onModuleAction={(actionLabel) => runTargetModuleAction(node.id, actionLabel)}
            onOpenConnectionMenu={(event, side) => openConnectionMenu(event, node, side)}
            onOpenScriptWorkflow={() => openStoryScriptWorkflow(node.id)}
            onPointerDown={(event) => {
              const corner=(event.target as HTMLElement).dataset.groupResize;
              if(corner){event.stopPropagation();event.currentTarget.setPointerCapture(event.pointerId);groupResize.current={id:node.id,x:node.x,y:node.y,width:node.width,height:node.height,startX:event.clientX,startY:event.clientY,corner};return;}
              startNodeDrag(event,node);
            }}
            onStartConnectionDrag={(event, side) => startConnectionEndpointDrag(event, node, side)}
            onStartConnectionMouseDrag={(event, side) => startConnectionEndpointMouseDrag(event, node, side)}
            onRunNode={() => {
              const mode = getPresetControlMode(node);
              if (mode && !isOfficialImagePresetFunctionKey(mode)) {
                void runPresetComposerSubmit(
                  node.id,
                  mode,
                  getDraftString(node, "prompt") || STORY_SCRIPT_PROMPT,
                );
                return;
              }
              void runNode(node.id);
            }}
            onSetLocalEditMode={(enabled) => setNodeLocalEditMode(node.id, enabled)}
            onSubmitLocalEdit={(regions) => submitNodeLocalEdit(node.id, regions)}
            onToggleGridSplitSelection={(index, behavior) => toggleNodeGridSplitSelection(node.id, index, behavior)}
            onUpdateLocalEditRegions={(regions) => updateNodeLocalEditRegions(node.id, regions)}
            onTextResourceChange={(content) => updateTextResourceContent(node.id, content)}
          />
        ))}
        {referenceSelectionTargetId
          ? edges
              .filter((edge) => edge.target === referenceSelectionTargetId)
              .map((edge) => nodes.find((node) => node.id === edge.source))
              .filter((node): node is CloneNode => Boolean(node))
              .filter((node) => {
                const mediaType = getDraftString(node, "mediaType") || node.inputType;
                return node.kind === "media" && mediaType === "image";
              })
              .map((node) => (
                <div
                  className="group absolute z-40 cursor-pointer"
                  key={`reference-selection-${node.id}`}
                  onPointerDown={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    setEdges((current) =>
                      current.filter(
                        (edge) =>
                          !(edge.source === node.id && edge.target === referenceSelectionTargetId)
                      )
                    );
                    setSelectedNodeId(referenceSelectionTargetId);
                    setSelectedEdgeId(null);
                  }}
                  style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
                >
                  <span className="pointer-events-none absolute left-1/2 top-1/2 flex h-7 w-[72px] -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-black/70 px-3 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition group-hover:opacity-100 group-hover:bg-red-500">
                    取消选择
                  </span>
                </div>
              ))
          : null}
        {markSelectionTargetId
          ? nodes
              .filter((node) => {
                const mediaType = getDraftString(node, "mediaType") || node.inputType;
                return (
                  node.kind === "media" &&
                  mediaType === "image" &&
                  Boolean(getNodeReferenceMediaUrl(node))
                );
              })
              .map((sourceNode) => {
                const targetNode = nodes.find((node) => node.id === markSelectionTargetId);
                const marks = getVideoCanvasMagicMarks(targetNode).filter(
                  (mark) => mark.sourceNodeId === sourceNode.id
                );
                const analysis =
                  markAnalysisState?.sourceNodeId === sourceNode.id &&
                  markAnalysisState.targetNodeId === markSelectionTargetId
                    ? markAnalysisState
                    : null;
                if (marks.length === 0 && !analysis) return null;
                return (
                  <VideoCanvasMarkSourceOverlay
                    analysis={analysis}
                    key={`video-mark-source-${sourceNode.id}`}
                    marks={marks}
                    node={sourceNode}
                    onRemove={(markId) =>
                      updateVideoCanvasMagicMarks(markSelectionTargetId, (current) =>
                        current.filter((mark) => mark.id !== markId)
                      )
                    }
                  />
                );
              })
          : null}
      </div>

      {nodes.length === 0 && !activePanel && canvasViewMode === "workflow" ? (
        <div className="absolute left-1/2 top-1/2 z-20 w-[984px] max-w-[calc(100vw-32px)] -translate-x-1/2 -translate-y-1/2" data-canvas-overlay="true">
          <div className="mb-8 flex h-6 items-center justify-center gap-1 text-[14px] leading-[22px] text-[#919191]">
            <PointerBadge /><span>双击画布 自由生成节点</span>
          </div>
          <div className="flex flex-wrap items-center justify-center gap-2">
            {EMPTY_CANVAS_ACTIONS.map((action) => {
              const Icon = action.icon;
              return <button className="flex h-[50px] w-[176px] cursor-pointer items-center gap-3 rounded-[15px] border border-white/[0.08] bg-[#242424] p-[6px] text-[13px] font-medium text-white/85 transition-colors hover:bg-[#303030]" key={action.kind} onClick={() => addTargetModule(action.kind)} type="button">
                <span className="flex size-[36px] shrink-0 items-center justify-center rounded-[9px] bg-[#303030]"><Icon className="size-4 text-white/70" /></span>
                <span>{action.label}</span>
              </button>;
            })}
          </div>
        </div>
      ) : null}

      {canvasCommand ? (
        <CanvasCommandPalette
          state={canvasCommand}
          onClose={() => setCanvasCommand(null)}
          onCreate={createFreeNode}
          onGallerySelect={() => {
            setActivePanel("assets");
            setCanvasCommand(null);
          }}
          onHistorySelect={() => {
            setActivePanel("historyPicker");
            setCanvasCommand(null);
          }}
          onUploadFiles={addCanvasCommandUploadedFiles}
        />
      ) : null}

      {nodeContextMenu && contextNode ? (
        <NodeContextMenu
          node={contextNode}
          state={nodeContextMenu}
          onClose={() => setNodeContextMenu(null)}
          onConfigure={() => configureNode(contextNode.id)}
          onCopy={() => void copyNode(contextNode.id)}
          onDelete={() => deleteNode(contextNode.id)}
          onDuplicate={() => duplicateNode(contextNode.id)}
          onRun={() => runNode(contextNode.id)}
        />
      ) : null}

      {connectionMenu && connectionNode ? (
        <ConnectionAddMenu
          node={connectionNode}
          onClose={() => setConnectionMenu(null)}
          onCreate={addConnectedModule}
          state={connectionMenu}
        />
      ) : null}

      {selectedPresetAnchor && selectedPresetControlNode ? (
        <PresetWorkflowControls
          anchor={selectedPresetAnchor}
          membershipSummary={membershipSummary}
          mode={selectedPresetMode ?? "character-three-view"}
          functionConfig={videoCanvasFunctionConfig}
          modelOptions={canvasModelOptions}
          nodes={nodes}
          onClearGridSplitSelection={() => clearNodeGridSplitSelection(selectedPresetControlNode.id)}
          onGridSplitCreateNodes={() => createGridSplitImageNodes(selectedPresetControlNode.id)}
          onGridSplitUpscale={(scaleFactor) => upscaleSelectedGridSplit(selectedPresetControlNode.id, scaleFactor)}
          onComposerSubmit={(payload) => submitSelectedImagePrompt(selectedPresetControlNode.id, payload)}
          onModuleAction={(action) => runTargetModuleAction(selectedPresetControlNode.id, action)}
          onImageToolAction={(action, option) => runSelectedImageToolAction(selectedPresetControlNode.id, action, option)}
          onPresetSubmit={(prompt, settings) =>
            runPresetComposerSubmit(
              selectedPresetControlNode.id,
              selectedPresetMode ?? "character-three-view",
              prompt,
              settings
            )
          }
          onStoryToolAction={(action) => runStoryScriptToolbarAction(selectedPresetControlNode.id, action)}
          selectedNode={selectedPresetControlNode}
        />
      ) : null}

      {selectedGenericImageNode && selectedGenericImageAnchor ? (
        <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
          <CharacterPresetToolbar
            anchor={selectedGenericImageAnchor}
            onToolAction={(action, option) => runSelectedImageToolAction(selectedGenericImageNode.id, action, option)}
          />
        </div>
      ) : null}

      {selectedVideoMediaNode && selectedVideoAnchor ? (
        <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
          <OfficialVideoMediaToolbar
            archiveControl={(() => {
              const meta = selectedVideoMediaNode.draftValues?.videoMeta as Record<string, unknown> | undefined;
              const sourceUrl = getNodeMediaUrl(selectedVideoMediaNode);
              if (!meta?.temporaryVideoUrl || meta.storageStatus === "archived" || !sourceUrl) return null;
              const nodeId = selectedVideoMediaNode.id;
              return <VideoArchiveButton key={nodeId} automaticBusy={meta.storageStatus === "archiving"} url={sourceUrl} onSaved={url => setNodes(current => current.map(node =>
                node.id === nodeId && getNodeMediaUrl(node) === sourceUrl ? { ...node, draftValues: {
                  ...node.draftValues, mediaUrl: url, url: [url], videoMeta: { ...meta, storageStatus: "archived", permanentVideoUrl: url },
                } } : node))} />;
            })()}
            activeMode={activeVideoToolbarMode}
            analysisLoading={nodes.some(item => getDraftString(item, "sourceVideoNodeId") === selectedVideoMediaNode.id && getDraftString(item, "generationStatus") === "pending")}
            anchor={selectedVideoAnchor}
            audioSplitLoading={videoAudioSplitStates[selectedVideoMediaNode.id]?.status === "loading"}
            onAnalyze={() => {
              setActiveVideoToolbarMode(null);
              void requestVideoAnalysis(selectedVideoMediaNode.id);
            }}
            onAudioVideoSplit={() => splitVideoAudioTrack(selectedVideoMediaNode.id, "audio-video")}
            onSlow={factor=>void slowVideoNode(selectedVideoMediaNode.id,factor)}
            onHdOption={(option) => createVideoHdUpscaleFromVideo(selectedVideoMediaNode.id, option)}
            onSubtitleErase={(mode) => {
              setSubtitleEraseMode(mode);
              setActiveVideoToolbarMode("subtitleErase");
            }}
            onToggleCrop={() => setActiveVideoToolbarMode((current) => current === "crop" ? null : "crop")}
            onToggleClip={() => setActiveVideoToolbarMode((current) => current === "clip" ? null : "clip")}
            onVoiceSplit={(mode) => splitVideoAudioTrack(selectedVideoMediaNode.id, mode)}
          />
          {activeVideoToolbarMode === "crop" ? (
            <>
              <VideoCropSelectionOverlay anchor={selectedVideoAnchor} node={selectedVideoMediaNode} onChange={rect => setNodes(current => current.map(node => node.id === selectedVideoMediaNode.id ? {...node,draftValues:{...node.draftValues,cropRect:rect}} : node))} />
              <VideoInlineActionBar
                actionLabel={getVideoCropSelectionLabel(selectedVideoMediaNode)}
                anchor={selectedVideoAnchor}
                applyBusyLabel={
                  selectedVideoCropGenerateState
                    ? "正在裁剪并上传…"
                    : undefined
                }
                applyIcon="upload"
                applyLabel="生成裁剪"
                applyLoading={Boolean(selectedVideoCropGenerateState)}
                onApply={() => applyVideoCropSelection(selectedVideoMediaNode.id)}
                onClose={() => setActiveVideoToolbarMode(null)}
                title="退出裁剪"
              />
            </>
          ) : null}
          {activeVideoToolbarMode === "subtitleErase" && subtitleEraseMode === "smart" ? (
            <VideoInlineActionBar
              actionLabel="智能擦除"
              anchor={selectedVideoAnchor}
              applyLabel="生成擦除"
              costLabel="0"
              onApply={() => applySubtitleEraseSelection(selectedVideoMediaNode.id, "smart")}
              onClose={() => setActiveVideoToolbarMode(null)}
              title="关闭去字幕生成器"
            />
          ) : null}
          {activeVideoToolbarMode === "subtitleErase" && subtitleEraseMode === "region" ? (
            <>
              <VideoSubtitleEraseRegionOverlay
                anchor={selectedVideoAnchor}
                node={selectedVideoMediaNode}
                onAddRegion={(region) =>
                  commitSubtitleEraseRegions(selectedVideoMediaNode.id, [...selectedSubtitleEraseRegions, region])
                }
                regions={selectedSubtitleEraseRegions}
              />
              <VideoSubtitleEraseRegionActionBar
                anchor={selectedVideoAnchor}
                canRedo={selectedSubtitleEraseHistory.future.length > 0}
                canReset={selectedSubtitleEraseRegions.length > 0}
                canUndo={selectedSubtitleEraseHistory.past.length > 0}
                costLabel={selectedSubtitleEraseRegions.length > 0 ? "0" : "-"}
                onApply={() => applySubtitleEraseSelection(selectedVideoMediaNode.id, "region")}
                onClose={() => setActiveVideoToolbarMode(null)}
                onRedo={() => redoSubtitleEraseRegionChange(selectedVideoMediaNode.id)}
                onReset={() => commitSubtitleEraseRegions(selectedVideoMediaNode.id, [])}
                onUndo={() => undoSubtitleEraseRegionChange(selectedVideoMediaNode.id)}
                regionCount={selectedSubtitleEraseRegions.length}
              />
            </>
          ) : null}
          {activeVideoToolbarMode === "clip" ? (
            <VideoClipEditorBar
              busy={clipProcessingNodeId === selectedVideoMediaNode.id}
              anchor={selectedVideoAnchor}
              clipRange={
                normalizeVideoClipRange(
                  videoClipRanges[selectedVideoMediaNode.id] || selectedVideoMediaNode.draftValues?.clipRange
                )
              }
              durationSeconds={getVideoNodeDurationSeconds(selectedVideoMediaNode)}
              previewUrl={getVideoNodePreviewUrl(selectedVideoMediaNode) || getNodeMediaUrl(selectedVideoMediaNode)}
              title={selectedVideoMediaNode.title}
              onApply={() => applyVideoClipSelection(selectedVideoMediaNode.id)}
              onChange={(range) => updateVideoClipRange(selectedVideoMediaNode.id, range)}
              onExtractAudio={() => splitVideoAudioTrack(selectedVideoMediaNode.id, "audio-video")}
              onReset={() => updateVideoClipRange(selectedVideoMediaNode.id, { start: 0.18, end: 0.52 })}
            />
          ) : null}
        </div>
      ) : null}

      {selectedNode && selectedTargetModuleKind === "smart-edit" && selectedTargetAnchor && !smartEditNodeId ? (
        <SmartEditNodeComposer
          key={selectedNode.id}
          anchor={selectedTargetAnchor}
          draft={(selectedNode.draftValues?.smartEditDraft || {}) as Record<string, any>}
          sources={selectedTargetSourceNodes.filter(node => node.inputType === "video" && getNodeReferenceMediaUrl(node)).map(node => ({id:node.id,name:node.title,url:getNodeReferenceMediaUrl(node),duration:getVideoNodeDurationSeconds(node)}))}
          availableAudios={nodes.filter(node => node.inputType === "audio" && getNodeReferenceMediaUrl(node)).map(node => ({name:node.title,url:getNodeReferenceMediaUrl(node)}))}
          availableSources={nodes.filter(node => node.id !== selectedNode.id && node.inputType === "video" && getNodeReferenceMediaUrl(node)).map(node => ({id:node.id,name:node.title,url:getNodeReferenceMediaUrl(node),duration:getVideoNodeDurationSeconds(node)}))}
          busy={generationTasks.tasks.some(task => task.request.node.id === selectedNode.id && (task.status === "pending" || task.status === "running"))}
          onDraft={patch => setNodes(current => current.map(node => node.id === selectedNode.id ? {...node,draftValues:{...node.draftValues,smartEditDraft:{...(node.draftValues?.smartEditDraft as Record<string,unknown> || {}),...patch}}} : node))}
          onAddSource={source => { connectExistingNodes(source, selectedNode.id); }}
          onRemoveSource={source => {
            setEdges(current => current.filter(edge => !(edge.source === source && edge.target === selectedNode.id)));
            setNodes(current => current.map(node => node.id === selectedNode.id ? {...node,draftValues:{...node.draftValues,smartEditDraft:{...(node.draftValues?.smartEditDraft as Record<string,any> || {}),assets:((node.draftValues?.smartEditDraft as Record<string,any>)?.assets || []).filter((asset:{id:string}) => asset.id !== source)}}} : node));
          }}
          onReference={() => setLineConnectState({sourceId:null,targetId:selectedNode.id,cursorCanvasX:selectedNode.x-80,cursorCanvasY:selectedNode.y+selectedNode.height/2})}
          onUpload={files => void addUploadedFilesAtPoint(files,{x:selectedNode.x-600,y:selectedNode.y},selectedNode.id)}
          onSubmit={async () => {
            assertConnectedInputsReady(selectedTargetSourceNodes);
            const draft = resolveSmartEditIntent((selectedNode.draftValues?.smartEditDraft || {}) as Record<string,any>);
            assertBeatMusic(draft);
            const assets = selectedTargetSourceNodes.filter(node => node.inputType === "video" && getNodeReferenceMediaUrl(node)).map(node => ({id:node.id,name:node.title,url:getNodeReferenceMediaUrl(node),subtitles:[]}));
            const params = smartEditRequestSchema.parse({ratio:"16:9",resolution:"720p",targetDuration:30,...draft,mode:["auto","montage","talk","explain","ads"].includes(draft.mode)?draft.mode:"auto",semantic:true,operation:"plan",assets,preferredModelRef:videoCanvasFunctionConfig.defaultMultimodalModel});
            const requestId = await generationTasks.submit({...selectedNode,draftValues:{...selectedNode.draftValues,action:"SMART_EDIT_WORKFLOW",nodeType:"smart-edit"}},"smart-edit",params,edges.filter(edge => edge.target === selectedNode.id));
            setNodes(current => current.map(node => node.id === selectedNode.id ? {...node,draftValues:{...node.draftValues,smartEditDraft:{...draft,assets,preparationRequestId:requestId}}} : node));
            setSmartEditNodeId(selectedNode.id);
            return requestId;
          }}
        />
      ) : null}

      {selectedNode && selectedTargetModuleKind === "text" && selectedTargetAnchor ? (
        <TextTargetModuleComposer
          anchor={selectedTargetAnchor}
          billingDefinition={getConfiguredFunction(
            videoCanvasFunctionConfig,
            "story-script",
          )}
          defaultModel={getFunctionModelValue(
            videoCanvasFunctionConfig,
            getConfiguredFunction(videoCanvasFunctionConfig, "story-script"),
          )}
          membershipSummary={membershipSummary}
          modelOptions={canvasModelOptions}
          node={selectedNode}
          onDraftChange={(prompt, model) => {
            const targetId = selectedNode.id;
            setNodes(current => current.map(node => node.id === targetId ? {
              ...node,
              draftValues: { ...node.draftValues, content: prompt ? [prompt] : [],
                params: { ...getNodeParams(node), prompt, model } },
            } : node));
          }}
          onSubmit={(prompt, model) => {
            setNodes((current) =>
              current.map((node) =>
                node.id === selectedNode.id
                  ? {
                      ...node,
                      draftValues: {
                        ...(node.draftValues || {}),
                        content: prompt ? [prompt] : [],
                        manualEditing: true,
                        manualTextComposer: true,
                        params: {
                          ...((node.draftValues?.params as Record<string, unknown> | undefined) || {}),
                          model,
                          prompt,
                        },
                      },
                    }
                  : node
              )
            );
            toast.success("文本内容已写入当前模块");
          }}
        />
      ) : null}

      {selectedNode && selectedTargetModuleKind === "image" && selectedTargetAnchor ? (
        <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
          <PromptComposer
            key={selectedNode.id}
            anchor={selectedTargetAnchor}
            defaultModel={getFunctionModelValue(videoCanvasFunctionConfig, getConfiguredFunction(videoCanvasFunctionConfig, "image-generate"))}
            functionDefinition={getConfiguredFunction(videoCanvasFunctionConfig, "image-generate")}
            membershipSummary={membershipSummary}
            modelKind="image"
            modelOptions={canvasModelOptions}
            nodes={nodes}
            onStartReferenceSelection={() => runTargetModuleAction(selectedNode.id, "参考")}
            onStartMarkSelection={() => runTargetModuleAction(selectedNode.id, "标记")}
            onOpenStyleLibrary={() => runTargetModuleAction(selectedNode.id, "风格")}
            onSubmit={(payload) => void submitSelectedImagePrompt(selectedNode.id, payload)}
            referenceThumbnailUrl={getNodeReferenceMediaUrl(selectedNode) || undefined}
          />
        </div>
      ) : null}

      {selectedNode && selectedTargetModuleKind === "director" && selectedTargetAnchor ? (
        <DirectorNodeComposer
          key={selectedNode.id}
          anchor={selectedTargetAnchor}
          prompt={getDraftString(selectedNode, "directorPrompt")}
          referenceUrl={getDraftString(selectedNode, "directorReferenceUrl")}
          onDraft={(patch) => setNodes(current => current.map(node => node.id === selectedNode.id ? {
            ...node,
            draftValues: {...node.draftValues, ...patch},
          } : node))}
          onSubmit={async (imageUrl, prompt) => {
            const node = createTargetModuleNode("director", selectedNode.x + selectedNode.width + OFFICIAL_NODE_GAP,
              selectedNode.y, nodes.length + 1);
            node.title = "AI 识图重建布景";
            await generationTasks.submit(node, "analysis", {
              mode: "director-reconstruct", prompt, imageUrls: [imageUrl],
              preferredModelRef: videoCanvasFunctionConfig.defaultMultimodalModel,
              sourceDirectorNodeId: selectedNode.id,
            }, [{id:makeId("edge"),source:selectedNode.id,target:node.id}]);
            setDirectorConsoleNodeId(selectedNode.id);
          }}
        />
      ) : null}

      {selectedNode && selectedTargetModuleKind === "video" && selectedTargetAnchor ? (
        <VideoTargetModuleComposer
          onSettingsChange={persistVideoComposerSettings}
          anchor={selectedTargetAnchor}
          functionConfig={videoCanvasFunctionConfig}
          membershipSummary={membershipSummary}
          magicMarks={getVideoCanvasMagicMarks(selectedNode)}
          modelOptions={canvasModelOptions}
          node={selectedNode}
          markSelectionActive={markSelectionTargetId === selectedNode.id}
          onRemoveMagicMark={(markId) =>
            updateVideoCanvasMagicMarks(selectedNode.id, (current) =>
              current.filter((mark) => mark.id !== markId)
            )
          }
          onOpenEffectLibrary={() => {
            setReferenceSelectionTargetId(null);
            setMarkSelectionTargetId(null);
            setEffectLibraryTargetNodeId(selectedNode.id);
            setSelectedNodeId(selectedNode.id);
            setSelectedEdgeId(null);
            setCanvasCommand(null);
            setNodeContextMenu(null);
            setConnectionMenu(null);
            setActivePanel("effectLibrary");
            setLineConnectState(null);
          }}
          onOpenRoleLibrary={() => {
            setReferenceSelectionTargetId(null);
            setMarkSelectionTargetId(null);
            setEffectLibraryTargetNodeId(null);
            setRoleLibraryTargetNodeId(selectedNode.id);
            setSelectedNodeId(selectedNode.id);
            setSelectedEdgeId(null);
            setCanvasCommand(null);
            setNodeContextMenu(null);
            setConnectionMenu(null);
            setActivePanel("videoRoleLibrary");
            setVideoRoleAgreementOpen(!videoRoleAgreementAccepted);
            setLineConnectState(null);
          }}
          onRemoveEffect={(sourceId) => {
            setEdges((current) =>
              current.filter(
                (edge) =>
                  !(edge.source === sourceId && edge.target === selectedNode.id),
              ),
            );
            setSelectedNodeId(selectedNode.id);
            setSelectedEdgeId(null);
          }}
          onRemoveReference={(sourceId) => {
            setEdges((current) =>
              current.filter(
                (edge) => !(edge.source === sourceId && edge.target === selectedNode.id)
              )
            );
            setSelectedNodeId(selectedNode.id);
            setSelectedEdgeId(null);
          }}
          onRemoveRole={(sourceId) => {
            setEdges((current) =>
              current.filter(
                (edge) =>
                  !(edge.source === sourceId && edge.target === selectedNode.id),
              ),
            );
            setSelectedNodeId(selectedNode.id);
            setSelectedEdgeId(null);
          }}
          onPromptChange={(prompt) => {
            setNodes((current) =>
              current.map((node) =>
                node.id === selectedNode.id
                  ? {
                      ...node,
                      draftValues: {
                        ...(node.draftValues || {}),
                        prompt,
                        params: {
                          ...((node.draftValues?.params as
                            | Record<string, unknown>
                            | undefined) || {}),
                          prompt,
                        },
                      },
                    }
                  : node,
              ),
            );
          }}
          onStartReferenceSelection={() => {
            setMarkSelectionTargetId(null);
            setReferenceSelectionTargetId((current) =>
              current === selectedNode.id ? null : selectedNode.id
            );
            setSelectedNodeId(selectedNode.id);
            setSelectedEdgeId(null);
            setCanvasCommand(null);
            setNodeContextMenu(null);
            setConnectionMenu(null);
            setActivePanel(null);
            setLineConnectState(null);
          }}
          onStartMarkSelection={() => {
            setReferenceSelectionTargetId(null);
            setMarkSelectionTargetId((current) =>
              current === selectedNode.id ? null : selectedNode.id
            );
            setSelectedNodeId(selectedNode.id);
            setSelectedEdgeId(null);
            setCanvasCommand(null);
            setNodeContextMenu(null);
            setConnectionMenu(null);
            setActivePanel(null);
            setLineConnectState(null);
          }}
          onUpdateMagicMark={(markId, selectedIndex) =>
            updateVideoCanvasMagicMarks(selectedNode.id, (current) =>
              current.map((mark) =>
                mark.id === markId
                  ? {
                      ...mark,
                      selectedIndex: Math.max(
                        0,
                        Math.min(mark.labelOptions.length - 1, selectedIndex)
                      ),
                    }
                  : mark
              )
            )
          }
          sourceNodes={selectedTargetSourceNodes}
          referenceSelectionActive={referenceSelectionTargetId === selectedNode.id}
          onSubmit={(payload) => {
            void submitVideoTargetComposer(selectedNode.id, payload);
          }}
        />
      ) : null}

      {selectedNode && selectedTargetModuleKind === "audio" && selectedTargetAnchor ? (
        <AudioGenerationComposer
          connectedText={selectedTargetSourceNodes.map(connectedText).filter(Boolean).join("\n\n")}
          key={selectedNode.id}
          initial={selectedNode.draftValues?.audioParams as Record<string, unknown> | undefined}
          busy={selectedNode.draftValues?.generationStatus === "pending"}
          onDraft={params => setNodes(current => current.map(node => node.id === selectedNode.id
            ? { ...node, draftValues: { ...node.draftValues, audioParams: params } } : node))}
          onSubmit={(params, draft) => {
            assertConnectedInputsReady(selectedTargetSourceNodes);
            return generationTasks.submit({ ...selectedNode, kind: "media", inputType: "audio", draftValues: { ...selectedNode.draftValues, audioParams: draft } }, "audio", params, edges.filter(edge => edge.target === selectedNode.id));
          }}
          onUpload={async file => {
          const form = new FormData(); form.append("file", file);
          const response = await fetch("/api/canvas/media/upload", {method:"POST",body:form,signal:AbortSignal.timeout(120000)});
          const result = await response.json(); const url = result.url || result.data?.url;
          if(!response.ok || !url) throw new Error(result.error || "上传失败");
          setNodes(current=>current.map(n=>n.id===selectedNode.id?{...n,title:file.name,draftValues:{...n.draftValues,action:"AUDIO_RESOURCE",mediaUrl:url,url:[url],mediaType:"audio",durationSeconds:result.data?.duration,generated:false}}:n));
        }} />
      ) : null}

      {storyWorkflowNode ? (
        <StoryScriptWorkflowDialog
          node={storyWorkflowNode}
          taskError={generationTasks.tasks.filter(task=>task.request.attachment?.nodeId===storyWorkflowNode.id).slice(-1)[0]?.error||undefined}
          taskBusy={generationTasks.tasks.some(task=>task.request.attachment?.nodeId===storyWorkflowNode.id&&["pending","running"].includes(task.status))}
          onSubmitTask={async (kind, data) => {
            const source = storyWorkflowNode;
            const assets = data.assets.map((asset) => ({ ...asset, id: asset.id || crypto.randomUUID() }));
            const rows = getStoryScriptRows(source);
            const snapshot = { ...source, draftValues: { ...source.draftValues, storyAssets: assets, rows } };
            const definition = getConfiguredFunction(
              videoCanvasFunctionConfig,
              kind === "asset" ? "image-repaint" : "story-script",
            );
            if (!videoCanvasFunctionConfig.enabled || !definition.enabled) throw new Error("该生成功能尚未启用");
            const asset = assets[data.assetIndex ?? 0];
            const result =
              kind === "asset"
                ? createMediaResourceNode({
                    action: "IMAGE_GENERATE",
                    height: 280,
                    width: 420,
                    mediaType: "image",
                    mediaUrl: "",
                    title: asset.name + " · 资产生成",
                    x: source.x + source.width + OFFICIAL_NODE_GAP,
                    y: source.y,
                  })
                : {
                    ...createTargetModuleNode(
                      "text",
                      source.x + source.width + OFFICIAL_NODE_GAP,
                      source.y,
                      nodes.length + 1,
                    ),
                    title: "镜头提示词生成结果",
                  };
            const pending = {
              ...result,
              draftValues: { ...result.draftValues, generated: false, generationStatus: "pending" },
            };
            const edge = { id: makeId("edge"), source: source.id, target: pending.id };
            setNodes((current) => [
              ...current.map((node) => (node.id === source.id ? snapshot : node)),
              pending,
            ]);
            setEdges((current) => [...current, edge]);
            const attachment =
              kind === "asset"
                ? { type: "story-asset" as const, nodeId: source.id, asset }
                : { type: "story-prompts" as const, nodeId: source.id, rows: data.rows };
            const params =
              kind === "asset"
                ? {
                    allowFailover: false,
                    model: getFunctionModel(videoCanvasFunctionConfig, definition),
                    imageCount: 1,
                    prompt: [asset.name, asset.description, data.style].filter(Boolean).join("，"),
                    aspectRatio: "1:1",
                  }
                : {
                    mode: "story-script",
                    preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition),
                    imageUrls: assets
                      .map((asset) => asset.imageUrl)
                      .filter(Boolean)
                      .slice(0, 12),
                    nodeTitle: source.title,
                    prompt:
                      "为以下镜头完善 imagePrompt 和 motionPrompt。保持镜头数量、顺序、故事内容和时长不变。返回 analysisRows。风格：" +
                      (data.style || "遵循原脚本") +
                      "。资产描述：" +
                      JSON.stringify(
                        assets.map(({ name, description, type }) => ({ name, description, type })),
                      ) +
                      "。镜头：" +
                      JSON.stringify(data.rows),
                  };
            await generationTasks.submit(
              pending,
              kind === "asset" ? "image" : "analysis",
              params,
              [edge],
              attachment,
            );
          }}
          imageNodes={nodes.filter(n => n.inputType === "image" && Boolean(getNodeMediaUrl(n)))}
          imageModel={getFunctionModel(videoCanvasFunctionConfig, getConfiguredFunction(videoCanvasFunctionConfig, "image-repaint"))}
          analysisModel={getFunctionModel(videoCanvasFunctionConfig, getConfiguredFunction(videoCanvasFunctionConfig, "story-script"))}
          onPatch={patch => setNodes(current => current.map(n => n.id === storyWorkflowNode.id ? {...n, draftValues: {...n.draftValues, ...patch}} : n))}
          onClose={() => setStoryWorkflowNodeId(null)}
          onRun={() => {
            void runNode(storyWorkflowNode.id);
          }}
          onStepChange={setStoryWorkflowStep}
          step={storyWorkflowStep}
        />
      ) : null}

      <VideoCanvasConflictNotice
        fields={persistence.conflicts.map((path) => {
          const id = path.match(/nodes\[([^\]]+)\]/)?.[1],
            node = nodes.find((n) => n.id === id);
          const last = path.split(".").pop() || "内容";
          const names: Record<string, string> = {
            title: "名称",
            x: "横向位置",
            y: "纵向位置",
            position: "位置",
            prompt: "提示词",
            content: "文本",
            rows: "镜头",
            mediaUrl: "素材",
            url: "素材",
            motion: "运镜",
            directorScene: "3D 场景",
            width: "宽度",
            height: "高度",
          };
          return `${node?.title || "画布"} · ${names[last] || "内容或结构"}`;
        })}
        onResolve={persistence.resolveConflict}
        onDownload={persistence.downloadDraft}
      />
      {ZCODE_VIDEO_CANVAS_AUTHORIZED && (isVideoAgentOpen ? (
        <VideoCanvasAgentPanel
          key={canvasId}
          projectId={canvasId}
          selectedNodeIds={selectedNodeId ? [selectedNodeId] : []}
          videoModels={canvasModelOptions.filter((model) => isVideoModelDescriptor(model))}
          imageModels={canvasModelOptions.filter((model) => isImageGenerationModelDescriptor(model))}
          beforeSend={saveBeforeVideoAgent}
          onResults={(projectId, ids) => void refreshVideoAgentResults(projectId, ids)}
          onClose={() => setIsVideoAgentOpen(false)}
        />
      ) : (
        <button
          type="button"
          data-canvas-overlay="true"
          onClick={() => { setInspectorNodeId(null); setIsVideoAgentOpen(true); }}
          className="absolute right-4 top-[76px] z-40 flex items-center gap-2 rounded-xl border border-white/10 bg-[#252525] px-4 py-3 text-sm text-white shadow-lg hover:bg-[#303030]"
          aria-label="打开视频创作 Agent"
        >
          <FileText className="h-4 w-4" />视频 Agent
        </button>
      ))}

      <TopBar
        canvasId={canvasId}
        canvasViewMode={canvasViewMode}
        onCanvasViewModeChange={(mode) => { setCanvasViewMode(mode); setActivePanel(null); setSelectedEdgeId(null); }}
        saveStatus={persistence.ready ? persistence.status : "unavailable"}
        saveMessage={persistence.message}
        onSave={persistence.save}
        onBeforeSwitch={persistence.saveAndConfirm}
        onOpenCanvas={(id) => router.push(`/canvas/${encodeURIComponent(id)}?mode=video&workspaceType=video`)}
        draftTitle={draftTitle}
        isTitleEditing={isTitleEditing}
        onAccount={() => toggleTopPanel("account")}
        onShare={() => toggleTopPanel("share")}
        onCommitTitle={commitTitle}
        onDraftTitleChange={setDraftTitle}
        onStartTitleEdit={() => setIsTitleEditing(true)}
        projectTitle={projectTitle}
        routerBack={() => { void persistence.saveAndConfirm().then(saved => {
          if (saved) router.push("/video-canvas");
          else toast.error("画布尚未保存，请重试后返回项目首页");
        }); }}
        siteLogo={siteBrandSettings?.siteLogo}
        siteLogoDark={siteBrandSettings?.siteLogoDark}
        siteName={resolvedSiteName}
      />

      {canvasViewMode === "storyboard" ? (
        <CanvasStoryboardView
          nodes={nodes}
          onOpenNode={(node) => {
            setCanvasViewMode("workflow");
            setSelectedNodeId(node.id);
            setViewport((current) => ({
              ...current,
              x: Math.round(window.innerWidth / 2 - (node.x + node.width / 2) * current.zoom),
              y: Math.round(window.innerHeight / 2 - (node.y + node.height / 2) * current.zoom),
            }));
          }}
          onReorder={(orderedIds) => setNodes((current) => current.map((node) => {
            const index = orderedIds.indexOf(node.id);
            return index < 0 ? node : { ...node, draftValues: { ...node.draftValues, storyboardOrder: index } };
          }))}
        />
      ) : null}

      <LeftToolbar
        panMode={panMode}
        onTogglePan={() => setPanMode(current => !current)}
        activePanel={activePanel}
        onOpen={(panel) => {
          setCanvasCommand(null);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          setActivePanel((current) => current === panel ? null : panel);
        }}
      />

      {activePanel === "tvstar" ? (
        <TVstarPanel
          canvasId={canvasId}
          models={tvstarModels}
          generationModels={tvstarGenerationModels}
          tasks={generationTasks.tasks}
          references={tvstarReferences}
          canvasNodes={tvstarCanvasNodes}
          selectedCanvasNode={tvstarCanvasNodes.find(item => item.id === selectedNodeId) || null}
          onApply={applyTVstarShots}
          onPrepare={(shots, goal, references, selection) => applyTVstarShots(shots, goal, references, selection, "prepare")}
          onRunPrepared={runPreparedTVstarGroup}
          onEdit={applyTVstarEdit}
          onClose={() => setActivePanel(null)}
          onOpenPlugin={() => window.open("/tvstar/plugin", "_blank", "noopener,noreferrer")}
          docked={tvstarDocked}
          dockWidth={tvstarDockWidth}
          onDockChange={(value) => { setTvstarDocked(value); try { localStorage.setItem(`tvstar:docked:${canvasId}`, value ? "1" : "0"); } catch { /* optional */ } }}
          onDockWidthChange={(value) => { setTvstarDockWidth(value); try { localStorage.setItem(`tvstar:dock-width:${canvasId}`, String(value)); } catch { /* optional */ } }}
          onUpload={async file => {
            const uploaded = await uploadCanvasMediaFile(file);
            if (uploaded.mediaType !== "image" && uploaded.mediaType !== "video") throw new Error("请选择图片或视频素材");
            return { url: uploaded.url, type: uploaded.mediaType, duration: uploaded.duration };
          }}
        />
      ) : null}

      {activePanel === "characterStudio" ? (
        <CharacterStudioPanel
          canvasId={canvasId}
          models={tvstarModels}
          onApply={applyCharacterStudio}
          onClose={() => setActivePanel(null)}
          onOpenLibrary={() => setActivePanel("roleLibrary")}
          onUpload={async file => {
            const uploaded = await uploadCanvasMediaFile(file);
            if (uploaded.mediaType !== "image") throw new Error("请选择图片参考素材");
            return uploaded.url;
          }}
        />
      ) : null}

      <ZoomDock
        assetManagerOpen={activePanel === "assetManager"}
        assetManagerWidth={assetManagerWidth}
        compact={false}
        nodes={nodes}
        overviewOpen={dockOverviewOpen}
        selectedNodeId={selectedNodeId}
        edgesHidden={edgesHidden}
        snapEnabled={snapEnabled}
        viewport={viewport}
        zoom={viewport.zoom}
        onArrange={handleArrangeCanvas}
        onCenter={fitDockTarget}
        onToggleAssetManager={() => setActivePanel((current) => current === "assetManager" ? null : "assetManager")}
        onToggleEdges={() => setEdgesHidden((value) => !value)}
        onToggleOverview={() => setDockOverviewOpen((value) => !value)}
        onToggleSnap={() => setSnapEnabled((value) => !value)}
        onSetZoom={setZoomAroundViewportCenter}
        onViewportChange={setViewport}
        onZoomIn={() => zoomBy(CANVAS_ZOOM_STEP)}
        onZoomOut={() => zoomBy(-CANVAS_ZOOM_STEP)}
      />

      {arrangePreview ? (
        <ArrangeCanvasConfirm
          assetManagerOpen={activePanel === "assetManager"}
          assetManagerWidth={assetManagerWidth}
          onKeep={keepArrangePreview}
          onRestore={restoreArrangePreview}
        />
      ) : null}

      {activePanel === "add" ? (
        <AddModulePanel
          onAddModule={addTargetModule}
          onClose={() => setActivePanel(null)}
          onSearch={() => { setActivePanel(null); setNodeSearchOpen(true); }}
          onGallerySelect={() => setActivePanel("assets")}
          onHistorySelect={() => setActivePanel("historyPicker")}
          onUploadFiles={addUploadedFiles}
        />
      ) : null}

      {activePanel === "workflow" ? (
        <WorkflowPanel
          groupTools={<>
            {!selectedGroup&&(multiSelection.length>0||selectedNodeId)&&<select aria-label="移动到编组" defaultValue="" className="mb-2 w-full rounded bg-white/10 p-2 text-[12px]" onChange={e=>{const id=e.target.value;try{setNodes(assignGroupMembers(nodes,multiSelection.length?multiSelection:selectedNodeId?[selectedNodeId]:[],id==="__none"?"":id));}catch(error){toast.error((error as Error).message);}e.target.value="";}}><option value="" disabled>移动到编组…</option><option value="__none">移出编组</option>{nodes.filter(isCanvasGroup).map(n=><option key={n.id} value={n.id}>{n.title}</option>)}</select>}
            {groupTemplates.map((template,index)=><div className="flex items-center gap-2 rounded px-2 py-1 hover:bg-white/5" key={index}><button className="min-w-0 flex-1 truncate text-left" onClick={()=>importGroup(template)} type="button">{template.name}</button><button aria-label={`删除编组模板 ${template.name}`} onClick={()=>setGroupTemplates(current=>current.filter((_,i)=>i!==index))} type="button">×</button></div>)}
            {(savedGroupTemplates?.templates||[]).filter(t=>t.projectId!==canvasId).map((template,index)=><button className="block w-full truncate rounded px-2 py-1 text-left hover:bg-white/5" key={`remote-${index}`} onClick={()=>importGroup(template)} title={template.projectTitle} type="button">{template.name}</button>)}
            <label className="mt-2 block cursor-pointer rounded px-2 py-1 text-white/60 hover:bg-white/5">导入编组模板<input accept=".json" className="hidden" onChange={async e=>{const file=e.target.files?.[0];e.target.value="";if(!file)return;if(file.size>1048576){toast.error("模板不能超过 1 MiB");return;}try{importGroup(JSON.parse(await file.text()));}catch{toast.error("模板格式无效");}}} type="file"/></label>
          </>}
          workflows={capturedWorkflows}
          onAdd={addWorkflowPreset}
          onClose={() => setActivePanel(null)}
        />
      ) : null}

      {inspectorNode ? (
        <InspectorPanel
          modelOptions={canvasModelOptions}
          node={inspectorNode}
          referenceCount={edges.filter((edge) => edge.target === inspectorNode.id).length}
          onAddReference={(node) => addReferenceModulesForTool(node.id)}
          onChangeProperty={updateNodeDraft}
          onClose={() => setInspectorNodeId(null)}
          onGenerate={(node) => void runConfiguredToolNode(node.id).catch(error => toast.error(error instanceof Error ? error.message : "上游输入不可用"))}
        />
      ) : null}

      {activePanel === "assets" ? (
        <AssetLibraryLauncherPanel
          onClose={() => setActivePanel(null)}
          onOpenEffectLibrary={() => setActivePanel("effectLibrary")}
          onOpenStyleLibrary={() => {
            setStyleLibraryTargetNodeId(null);
            setActivePanel("styleLibrary");
          }}
        />
      ) : null}

      {activePanel === "effectLibrary" || activePanel === "styleLibrary" ? (
        <AssetMarketPanel
          effectPresets={videoCanvasFunctionConfig.effectPresets}
          kind={activePanel === "effectLibrary" ? "effect" : "style"}
          modelLabel={
            getDraftString(effectLibraryConnectedNode, "model") ||
            videoCanvasFunctionConfig.effectPresets[0]?.model ||
            "Seedance 2.0"
          }
          onApplyEffect={
            effectLibraryTargetNodeId ? applyVideoEffectFromMarket : undefined
          }
          onClose={() => {
            setActivePanel(null);
            setEffectLibraryTargetNodeId(null);
            setStyleLibraryTargetNodeId(null);
          }}
          onApplyStyle={addStyleAssetFromMarket}
          selectedEffectTitle={getDraftString(
            effectLibraryConnectedNode,
            "effectTitle",
          )}
        />
      ) : null}

      {activePanel === "history" ? (
        <HistoryAssetsPanel
          listDownloadPendingId={historyListDownloadPendingId}
          nodes={nodes}
          onClose={() => setActivePanel(null)}
          onOpenWatermarkRules={openHistoryWatermarkRules}
          onSelectNode={setSelectedNodeId}
          onUseNode={reuseHistoryAssetNode}
          onHideNodes={ids => setNodes(current => current.map(n => ids.includes(n.id) ? {...n, draftValues:{...n.draftValues, historyHidden:true}} : n))}
        />
      ) : null}

      {activePanel === "historyPicker" ? (
        <HistoryAssetPickerModal
          nodes={nodes}
          onClose={() => setActivePanel(null)}
          onConfirm={addHistoryPickerNodes}
        />
      ) : null}

      {historyWatermarkRulesOpen ? (
        <WatermarkRulesModal onSave={saveHistoryWatermarkRules} />
      ) : null}

      {activePanel === "assetManager" ? (
        <CanvasAssetManagerPanel
          projectTitle={projectTitle}
          nodes={nodes}
          onClose={() => setActivePanel(null)}
          onDuplicateNode={duplicateNode}
          onRenameNode={renameNode}
          onResizeStart={startAssetManagerResize}
          onSelectNode={locateCanvasNode}
          panelWidth={assetManagerWidth}
        />
      ) : null}

      {activePanel === "shortcuts" ? (
        <ShortcutPanel onClose={() => setActivePanel(null)} />
      ) : null}

      {nodeSearchOpen ? (
        <CanvasNodeSearchPanel
          nodes={nodes}
          onClose={() => setNodeSearchOpen(false)}
          onSelect={(nodeId) => {
            setNodeSearchOpen(false);
            locateCanvasNode(nodeId);
          }}
        />
      ) : null}

      {activePanel === "tutorial" ? (
        <TutorialHelpPanel onClose={() => setActivePanel(null)} />
      ) : null}

      {activePanel === "roleLibrary" ? (
        <RoleLibraryPanel
          onApplyRole={addRoleAssetFromLibrary}
          onClose={() => setActivePanel(null)}
          roles={videoCanvasFunctionConfig.rolePresets}
        />
      ) : null}

      {activePanel === "videoRoleLibrary" ? (
        <>
          <VideoRoleLibraryPanel
            onApply={applyVideoRolesFromLibrary}
            onClose={() => {
              setActivePanel(null);
              setRoleLibraryTargetNodeId(null);
              setVideoRoleAgreementOpen(false);
            }}
            presets={videoCanvasFunctionConfig.rolePresets}
            selectedRoleIds={roleLibraryConnectedNodes.map((node) =>
              getDraftString(node, "roleId"),
            )}
          />
          {videoRoleAgreementOpen ? (
            <VideoRoleAgreementModal
              onAgree={() => {
                setVideoRoleAgreementAccepted(true);
                setVideoRoleAgreementOpen(false);
                try {
                  window.localStorage.setItem(
                    VIDEO_ROLE_AGREEMENT_STORAGE_KEY,
                    "1",
                  );
                } catch {}
              }}
              onClose={() => {
                setVideoRoleAgreementOpen(false);
                setActivePanel(null);
                setRoleLibraryTargetNodeId(null);
              }}
            />
          ) : null}
        </>
      ) : null}

      {activePanel === "help" ? (
        <LibModal onClose={() => setActivePanel(null)} title="快捷键">
          <div className="grid gap-2 text-[13px] text-white/70">
            {[
              ["V", "选择"],
              ["Space", "拖动画布"],
              ["双击画布", "自由生成节点"],
              ["连接点拖拽", "连接模块"],
              ["⌘ / Ctrl + S", "保存画布"],
            ].map(([key, value]) => (
              <div className="flex items-center justify-between rounded-[8px] bg-white/5 px-3 py-2" key={key}>
                <span>{value}</span>
                <span className="rounded-[6px] bg-white/10 px-2 py-1 text-white/58">{key}</span>
              </div>
            ))}
          </div>
        </LibModal>
      ) : null}

      {activePanel === "support" ? (
        <LibModal onClose={() => setActivePanel(null)} title="支持中心">
          <SupportPanel />
        </LibModal>
      ) : null}

      {activePanel === "skills" ? (
        <SkillsAccessModal onClose={() => setActivePanel(null)} siteName={resolvedSiteName} />
      ) : null}

      {activePanel === "share" ? (
        <SharePopover
          onClose={() => setActivePanel(null)}
          onCopyLink={() => {
            void copyShareLink();
            setActivePanel(null);
          }}
          onPublish={() => setActivePanel("publish")}
          siteName={resolvedSiteName}
        />
      ) : null}

      {activePanel === "publish" ? (
        <PublishModal
          projectTitle={projectTitle}
          publishPublic={publishPublic}
          onClose={() => setActivePanel(null)}
          onTogglePublic={() => setPublishPublic((value) => !value)}
          siteName={resolvedSiteName}
        />
      ) : null}

      {activePanel === "member" ? (
        <MemberStoreModal onClose={() => setActivePanel(null)} />
      ) : null}

      {activePanel === "notifications" ? (
        <NotificationsPopover onClose={() => setActivePanel(null)} tasks={generationTasks.tasks.filter(task=>!task.request.hiddenNodeIds?.includes(task.request.node.id))} onLocate={locateCanvasNode} onRefresh={generationTasks.refresh}/>
      ) : null}

      {activePanel === "account" ? (
        <AccountPopover
          onClose={() => setActivePanel(null)}
          onOpenMember={() => setActivePanel("member")}
        />
      ) : null}

      {previewNode ? (
        <LibModal onClose={() => setPreviewNode(null)} title={previewNode.title || "预览"} width={920}>
          <ImageNodePreview node={previewNode} />
        </LibModal>
      ) : null}

      {smartEditNode ? <SmartEditDialog
        key={smartEditNode.id}
        initial={smartEditNode.draftValues?.smartEditDraft as Record<string,any>|undefined}
        plans={smartEditNode.draftValues?.smartEditPlans as EditPlan[]|undefined}
        planTaskId={getDraftString(smartEditNode,"smartEditPlanTaskId")}
        preferredModelRef={videoCanvasFunctionConfig.defaultMultimodalModel}
        connectedSourceIds={edges.filter(edge=>edge.target===smartEditNode.id).map(edge=>edge.source)}
        sources={nodes.filter(node=>node.inputType==="video"&&getNodeReferenceMediaUrl(node)).map(node=>({id:node.id,name:node.title,url:getNodeReferenceMediaUrl(node),subtitles:[]}))}
        audios={nodes.filter(node=>node.inputType==="audio"&&getNodeReferenceMediaUrl(node)).map(node=>({name:node.title,url:getNodeReferenceMediaUrl(node)}))}
        tasks={generationTasks.tasks.filter(task=>task.request.kind==="smart-edit"&&(task.request.node.id===smartEditNode.id||task.request.params.sourceNodeId===smartEditNode.id))}
        onClose={()=>setSmartEditNodeId(null)}
        onDraft={smartEditDraft=>setNodes(current=>current.map(node=>node.id===smartEditNode.id?{...node,draftValues:{...node.draftValues,smartEditDraft}}:node))}
        onPlan={params=>generationTasks.submit({...smartEditNode,draftValues:{...smartEditNode.draftValues,action:"SMART_EDIT_WORKFLOW",nodeType:"smart-edit"}},"smart-edit",params,edges.filter(edge=>edge.target===smartEditNode.id))}
        onCancel={generationTasks.cancel}
        onRender={async plan=>{
          const result=createTargetModuleNode("video",smartEditNode.x+550,smartEditNode.y+generationTasks.tasks.filter(task=>task.request.params.sourceNodeId===smartEditNode.id).length*80,nodes.length+1);
          result.title=`${plan.title} · 成片`;
          return generationTasks.submit(result,"smart-edit",{operation:"render",plan,sourceNodeId:smartEditNode.id},[{id:makeId("edge"),source:smartEditNode.id,target:result.id}]);
        }}
      />:null}
      {directorConsoleNode ? (
        <DirectorStudioDialog
          initialScene={directorConsoleNode.draftValues?.directorScene}
          reconstructionTask={generationTasks.tasks.filter(task =>
            task.request.params.sourceDirectorNodeId === directorConsoleNode.id &&
            task.request.params.mode === "director-reconstruct").slice(-1)[0]}
          onReconstruct={async ({ imageUrl, prompt }) => {
            const node = createTargetModuleNode("director", directorConsoleNode.x + 600,
              directorConsoleNode.y, nodes.length + 1);
            node.title = "AI 识图重建布景";
            await generationTasks.submit(node, "analysis", {
              mode: "director-reconstruct", prompt, imageUrls: [imageUrl],
              preferredModelRef: videoCanvasFunctionConfig.defaultMultimodalModel,
              sourceDirectorNodeId: directorConsoleNode.id,
            }, [{ id: makeId("edge"), source: directorConsoleNode.id, target: node.id }]);
          }}
          onChange={scene => setNodes(current => current.map(node => node.id === directorConsoleNode.id ? {...node, draftValues: {...node.draftValues, directorScene: scene}} : node))}
          onSend={snapshots => sendDirectorSnapshotsToCanvas(directorConsoleNode, snapshots)}
          onSendMotion={(snapshot, motion) => {
            const source = createMediaResourceNode({
              mediaType: "image", mediaUrl: snapshot.url, title: "运镜首帧",
              width: 350, height: Math.round(350 * snapshot.height / snapshot.width),
              x: directorConsoleNode.x + 500, y: directorConsoleNode.y,
            });
            const video = createTargetModuleNode("video", source.x + 500, source.y, nodes.length + 2);
            const duration = Math.round(motion.duration);
            const prompt = directorMotionPrompt(resizeDirectorMotion(motion, duration));
            video.title = "导演台运镜视频";
            video.draftValues = {
              ...video.draftValues, directorMotion: motion,
              sourceDirectorNodeId: directorConsoleNode.id, prompt,
              params: {
                mode: "first-frame", prompt, duration, ratio: "adaptive",
                settings: { model: "auto", duration: `${duration}s`, resolution: "720P", ratio: "自适应", audio: "关闭" },
              },
            };
            addNodes([source, video], [
              { id: makeId("edge"), source: directorConsoleNode.id, target: source.id },
              { id: makeId("edge"), source: source.id, target: video.id },
            ]);
          }}
          onSendVideo={video => {
            const result = createMediaResourceNode({
              mediaType: "video", mediaUrl: video.url, title: "导演台真实运镜",
              width: 420, height: Math.round(420 * video.height / video.width),
              x: directorConsoleNode.x + 500, y: directorConsoleNode.y,
            });
            result.draftValues = {
              ...result.draftValues, generated: true, durationSeconds: video.duration,
              outputSizeLabel: `${video.width} × ${video.height}`,
              sourceDirectorNodeId: directorConsoleNode.id,
            };
            addNodes([result], [{ id: makeId("edge"), source: directorConsoleNode.id, target: result.id }]);
          }}
          onClose={() => setDirectorConsoleNodeId(null)}
        />
      ) : null}

      {directorTutorialActive && !directorConsoleNode ? (
        <DirectorTutorialFollowBar onCancel={() => setDirectorTutorialActive(false)} />
      ) : null}

      {angleEditorNode ? (
        <MultiAngleEditorDialog
          node={angleEditorNode}
          onApply={async (settings) => {
            const definition = getConfiguredFunction(videoCanvasFunctionConfig, "angle-edit");
            const sourceUrl = getNodeMediaUrl(angleEditorNode) || getNodeSourceMediaUrl(angleEditorNode);
            if (!sourceUrl) throw new Error("请先上传参考图片");
            if (!videoCanvasFunctionConfig.enabled || !definition?.enabled) throw new Error("多角度功能尚未启用");
            const presetPrompt = anglePresets[settings.preset || ""]?.prompt;
            const resultNode = createMediaResourceNode({
              action: "IMAGE_GENERATE",
              height: 280,
              width: 420,
              mediaType: "image",
              mediaUrl: "",
              prompt: presetPrompt || definition.prompt,
              title: "多角度结果",
              x: Math.round(angleEditorNode.x + angleEditorNode.width + OFFICIAL_NODE_GAP),
              y: angleEditorNode.y,
            });
            const pending = {
              ...resultNode,
              draftValues: {
                ...resultNode.draftValues,
                angleSettings: settings,
                generated: false,
                generationStatus: "pending",
                sourceNodeId: angleEditorNode.id,
                sourceUrl,
                functionKey: "angle-edit",
                params: {
                  functionKey: "angle-edit",
                  sourceUrl,
                  prompt: presetPrompt || definition.prompt,
                  angleParameters: angleRequestParameters(settings),
                },
              },
            };
            const edge = { id: makeId("edge"), source: angleEditorNode.id, target: pending.id };
            setNodes((current) => [
              ...current.map((node) =>
                node.id === angleEditorNode.id
                  ? { ...node, draftValues: { ...node.draftValues, angleSettings: settings } }
                  : node,
              ),
              pending,
            ]);
            setEdges((current) => [...current, edge]);
            setSelectedNodeId(pending.id);
            await generationTasks.submit(
              pending,
              presetPrompt ? "image" : "image-operation",
              presetPrompt
                ? {
                    allowFailover: false,
                    model: getFunctionModel(videoCanvasFunctionConfig, definition),
                    referenceImage: sourceUrl,
                    prompt: presetPrompt,
                    imageCount: 1,
                  }
                : { operation: "angle-edit", imageUrl: sourceUrl, ...angleRequestParameters(settings) },
              [edge],
            );
            setAngleEditorNodeId(null);
          }}
          onClose={() => setAngleEditorNodeId(null)}
        />
      ) : null}

      {projectLoadError ? (
        <div className="fixed inset-0 z-[1900] flex items-center justify-center bg-black/65" data-canvas-overlay="true" onPointerDown={event => event.stopPropagation()}>
          <div role="alert" className="max-w-sm rounded-2xl border border-white/15 bg-[#262626] p-6 text-center text-white">
            <p className="font-medium">画布加载失败</p><p className="mt-2 text-sm text-white/60">{projectLoadError}</p>
            <p className="mt-2 text-xs text-white/45">重新加载成功后即可继续编辑。</p>
            <button className="mt-4 rounded-lg bg-white px-4 py-2 text-sm text-black" onClick={() => setProjectLoadAttempt(value => value + 1)} type="button">重新加载画布</button>
          </div>
        </div>
      ) : isBusy ? (
        <div
          className="fixed inset-0 z-[1900] flex items-center justify-center gap-2 bg-black/45 text-sm text-white/70"
          data-canvas-overlay="true"
        >
          <Loader2 className="h-4 w-4 animate-spin" />
          <span>项目加载中...</span>
        </div>
      ) : null}
    </div>
  );
}

function TopBar({
  canvasId,
  canvasViewMode,
  onCanvasViewModeChange,
  saveStatus,
  saveMessage,
  onSave,
  onBeforeSwitch,
  onOpenCanvas,
  draftTitle,
  isTitleEditing,
  onAccount,
  onShare,
  onCommitTitle,
  onDraftTitleChange,
  onStartTitleEdit,
  projectTitle,
  routerBack,
  siteLogo,
  siteLogoDark,
  siteName,
}: {
  canvasId: string;
  canvasViewMode: CanvasViewMode;
  onCanvasViewModeChange: (mode: CanvasViewMode) => void;
  saveStatus: "saved" | "pending" | "saving" | "error" | "unavailable";
  saveMessage?: string;
  onSave: () => void;
  onBeforeSwitch: () => Promise<boolean>;
  onOpenCanvas: (id: string) => void;
  draftTitle: string;
  isTitleEditing: boolean;
  onAccount: () => void;
  onShare: () => void;
  onCommitTitle: () => void;
  onDraftTitleChange: (value: string) => void;
  onStartTitleEdit: () => void;
  projectTitle: string;
  routerBack: () => void;
  siteLogo?: string | null;
  siteLogoDark?: string | null;
  siteName?: string | null;
}) {
  const { data: membershipSummary } = useSWR<MembershipSummaryResponse>("/api/user/membership-summary", fetcher);
  const credits = Math.max(0, Number(membershipSummary?.summary?.currentCredits ?? 0));

  return (
    <header className="pointer-events-none absolute left-0 right-0 top-3 z-40 flex h-10 items-center justify-between pl-2 pr-4 text-[12px]">
      <div className="pointer-events-auto flex items-center gap-1">
        <button
          aria-label="返回视频项目首页"
          className="flex h-8 cursor-pointer items-center justify-center rounded-lg px-2 text-white transition-colors hover:bg-white/10"
          onClick={routerBack}
          type="button"
        >
          <StylizedBrandLogo siteLogo={siteLogo} siteLogoDark={siteLogoDark} siteName={siteName} />
        </button>
        <div className="h-4 w-px bg-white/14" />
        <span className="max-w-[160px] truncate px-1 text-[12px] font-medium text-white/78">未命名工作区</span>
        <CanvasSwitcher canvasId={canvasId} currentTitle={projectTitle} draftTitle={draftTitle} isTitleEditing={isTitleEditing} onBeforeSwitch={onBeforeSwitch} onCommitTitle={onCommitTitle} onDraftTitleChange={onDraftTitleChange} onOpenCanvas={onOpenCanvas} onStartTitleEdit={onStartTitleEdit} />
        <div className="ml-1 flex h-8 items-center gap-0.5 rounded-lg bg-[#292929] p-0.5" aria-label="画布视图">
          <button aria-label="工作流" aria-pressed={canvasViewMode === "workflow"} className={cn("flex size-7 items-center justify-center rounded-md text-white/55 hover:text-white", canvasViewMode === "workflow" && "bg-white/10 text-white")} onClick={() => onCanvasViewModeChange("workflow")} title="工作流" type="button"><GitBranch className="size-3.5" /></button>
          <button aria-label="故事板" aria-pressed={canvasViewMode === "storyboard"} className={cn("flex size-7 items-center justify-center rounded-md text-white/55 hover:text-white", canvasViewMode === "storyboard" && "bg-white/10 text-white")} onClick={() => onCanvasViewModeChange("storyboard")} title="故事板" type="button"><Layers className="size-3.5" /></button>
        </div>
      </div>

      <div className="pointer-events-auto flex items-center gap-2">
        <button
          className={cn("rounded-lg px-2 py-1 text-xs", saveStatus === "error" ? "text-red-300" : "text-white/55")}
          disabled={saveStatus === "unavailable"}
          onClick={onSave}
          title={saveMessage || "保存画布（⌘/Ctrl+S）"}
          type="button"
        >
          {saveStatus === "saving" ? "保存中…" : saveStatus === "pending" ? "待保存" : saveStatus === "error" ? "保存失败，点击重试" : saveStatus === "unavailable" ? "画布未就绪" : "已保存"}
        </button>
        <button
          className="flex h-10 cursor-pointer items-center gap-2 rounded-xl border border-white/8 bg-[#202020]/95 px-3 text-[13px] text-white/78 shadow-[0_12px_30px_rgba(0,0,0,0.28)] transition hover:bg-[#2a2a2a] hover:text-white"
          onClick={onShare}
          title="发布与分享"
          type="button"
        >
          分享
        </button>
        <button
          className="flex h-10 cursor-pointer items-center gap-2 rounded-xl border border-white/8 bg-[#202020]/95 px-3 text-[13px] text-white/78 shadow-[0_12px_30px_rgba(0,0,0,0.28)] transition hover:bg-[#2a2a2a] hover:text-white"
          onClick={onAccount}
          title="账户"
          type="button"
        >
          <span className="flex items-center gap-1.5 text-white/74">
            <span className="text-[#e3c55d]">⚡</span>
            <span className="font-medium tabular-nums">{formatCreditValue(credits)}</span>
          </span>
          <span className="flex h-7 w-7 items-center justify-center overflow-hidden rounded-[9px] bg-gradient-to-br from-[#4e65f0] to-[#1d244b] text-white shadow-[inset_0_0_12px_rgba(255,255,255,0.2)]">
            <UserRound className="h-4 w-4" />
          </span>
        </button>
      </div>
    </header>
  );
}

function CanvasStoryboardView({
  nodes,
  onOpenNode,
  onReorder,
}: {
  nodes: CloneNode[];
  onOpenNode: (node: CloneNode) => void;
  onReorder: (orderedIds: string[]) => void;
}) {
  const columns = [
    { key: "text", label: "文本", icon: FileText },
    { key: "image", label: "图片", icon: ImageIcon },
    { key: "video", label: "视频", icon: Video },
  ] as const;
  const visibleNodes = nodes.filter((node) => !isCanvasGroup(node));
  const category = (node: CloneNode) => {
    if (node.inputType === "image") return "image";
    if (node.inputType === "video") return "video";
    if (node.inputType === "text" || node.kind === "script" || getTargetModuleKind(node) === "script") return "text";
    return null;
  };
  return (
    <section aria-label="故事板视图" className="absolute inset-0 z-[25] overflow-auto bg-[#171717] px-5 pb-24 pt-[76px]" data-canvas-overlay="true" onPointerDown={(event) => event.stopPropagation()}>
      <div className="mx-auto grid max-w-[1560px] grid-cols-1 gap-3 md:grid-cols-3">
        {columns.map(({ key, label, icon: Icon }) => {
          const entries = visibleNodes.filter((node) => category(node) === key).sort((a, b) => {
            const aOrder = Number(a.draftValues?.storyboardOrder);
            const bOrder = Number(b.draftValues?.storyboardOrder);
            if (Number.isFinite(aOrder) && Number.isFinite(bOrder) && aOrder !== bOrder) return aOrder - bOrder;
            return a.x - b.x || a.y - b.y;
          });
          return <div className="min-h-[320px] rounded-xl border border-white/[0.07] bg-[#1e1e1e] p-3" key={key}>
            <h2 className="mb-3 flex items-center gap-2 px-1 text-[13px] font-medium text-white/75"><Icon className="size-4" />{label}<span className="ml-auto text-white/35">{entries.length}</span></h2>
            <div className="space-y-2">
              {entries.length ? entries.map((node) => {
                const preview = key === "text" ? "" : key === "video" ? getDraftString(node, "poster") || getDraftString(node, "previewImageUrl") : getNodeMediaUrl(node);
                const videoUrl = key === "video" ? getNodePlayableVideoUrl(node) : "";
                return <button
                  className="flex w-full cursor-grab items-center gap-3 rounded-lg border border-white/[0.08] bg-[#292929] p-2 text-left hover:border-white/25 hover:bg-[#303030]"
                  draggable
                  key={node.id}
                  onClick={() => onOpenNode(node)}
                  onDragStart={(event) => event.dataTransfer.setData("text/plain", node.id)}
                  onDragOver={(event) => event.preventDefault()}
                  onDrop={(event) => {
                    event.preventDefault();
                    const sourceId = event.dataTransfer.getData("text/plain");
                    if (!entries.some((item) => item.id === sourceId) || sourceId === node.id) return;
                    const ordered = entries.filter((item) => item.id !== sourceId).map((item) => item.id);
                    ordered.splice(ordered.indexOf(node.id), 0, sourceId);
                    onReorder(ordered);
                  }}
                  type="button"
                >
                  <span className="flex size-16 shrink-0 items-center justify-center overflow-hidden rounded-md bg-[#222] text-white/25">{preview ? <img alt="" className="size-full object-cover" src={preview} /> : videoUrl ? <video aria-hidden className="size-full object-cover" muted playsInline preload="metadata" src={videoUrl} /> : <Icon className="size-6" />}</span>
                  <span className="min-w-0 flex-1"><span className="block truncate text-[13px] text-white/90">{node.title}</span><span className="mt-1 block text-[11px] text-white/45">{getDraftString(node, "generationStatus") === "pending" ? "生成中" : node.subtitle || label}</span></span>
                  <ChevronRight className="size-3.5 shrink-0 text-white/35" />
                </button>;
              }) : <p className="py-20 text-center text-[12px] text-white/30">暂无 {label}</p>}
            </div>
          </div>;
        })}
      </div>
    </section>
  );
}

type CanvasListItem = { id: string; title: string; createdAt: string };

function CanvasSwitcher({
  canvasId,
  currentTitle,
  draftTitle,
  isTitleEditing,
  onBeforeSwitch,
  onCommitTitle,
  onDraftTitleChange,
  onOpenCanvas,
  onStartTitleEdit,
}: {
  canvasId: string;
  currentTitle: string;
  draftTitle: string;
  isTitleEditing: boolean;
  onBeforeSwitch: () => Promise<boolean>;
  onCommitTitle: () => void;
  onDraftTitleChange: (value: string) => void;
  onOpenCanvas: (id: string) => void;
  onStartTitleEdit: () => void;
}) {
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [busy, setBusy] = useState(false);
  const [projects, setProjects] = useState<CanvasListItem[]>([]);
  const menuRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setOpen(false);
  }, [canvasId]);
  useEffect(() => {
    if (!open) return;
    const closeOutside = (event: PointerEvent) => {
      if (!menuRef.current?.contains(event.target as Node)) setOpen(false);
    };
    document.addEventListener("pointerdown", closeOutside);
    return () => document.removeEventListener("pointerdown", closeOutside);
  }, [open]);
  useEffect(() => {
    if (!open) return;
    const controller = new AbortController();
    setLoading(true);
    (async () => {
      try {
        const collected: CanvasListItem[] = [];
        for (let page = 1; page <= 200; page++) {
          const response = await fetch(`/api/canvas?workspaceType=video&limit=50&page=${page}`, {
            cache: "no-store",
            signal: controller.signal,
          });
          const result = await response.json();
          if (!response.ok || !result.success || !Array.isArray(result.data)) {
            throw new Error(result.error || "读取画布列表失败");
          }
          collected.push(...result.data);
          if (!result.pagination?.hasMore) break;
        }
        if (!controller.signal.aborted) setProjects(collected);
      } catch (error) {
        if (!controller.signal.aborted) toast.error(error instanceof Error ? error.message : "读取画布列表失败");
      } finally {
        if (!controller.signal.aborted) setLoading(false);
      }
    })();
    return () => controller.abort();
  }, [open]);

  const ordered = [...projects].sort((left, right) =>
    new Date(left.createdAt).getTime() - new Date(right.createdAt).getTime()
  );
  const label = (project: CanvasListItem, index: number) => {
    const title = project.id === canvasId ? currentTitle : project.title;
    return !title || /^未命名(?:(?:视频)?画布)?$/.test(title) ? `画布 ${index + 1}` : title;
  };
  const currentIndex = ordered.findIndex((project) => project.id === canvasId);
  const currentLabel = currentIndex >= 0 ? label(ordered[currentIndex], currentIndex) :
    currentTitle && !/^未命名(?:(?:视频)?画布)?$/.test(currentTitle) ? currentTitle : "画布 1";
  const switchTo = async (id: string) => {
    if (id === canvasId || busy) { setOpen(false); return; }
    setBusy(true);
    try {
      if (!await onBeforeSwitch()) { toast.error("当前画布尚未保存，请先解决保存错误"); return; }
      setOpen(false);
      onOpenCanvas(id);
    } finally { setBusy(false); }
  };
  const createCanvas = async () => {
    if (busy || loading) return;
    setBusy(true);
    try {
      if (!await onBeforeSwitch()) { toast.error("当前画布尚未保存，请先解决保存错误"); return; }
      const highest = ordered.reduce((value, project) => {
        const match = /^画布\s*(\d+)$/.exec(project.title || "");
        return match ? Math.max(value, Number(match[1])) : value;
      }, ordered.length);
      const response = await fetch("/api/canvas", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ title: `画布 ${highest + 1}`, workspaceType: "video" }),
      });
      const result = await response.json();
      if (!response.ok || !result.success || !result.data?.id) {
        throw new Error(result.error || "新建画布失败");
      }
      setOpen(false);
      onOpenCanvas(result.data.id);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "新建画布失败");
    } finally { setBusy(false); }
  };
  return (
    <div className="relative" ref={menuRef}>
      {isTitleEditing ? <input aria-label="画布名称" autoFocus className="h-8 w-32 rounded-lg border border-white/20 bg-[#292929] px-2 text-[12px] text-white outline-none" onBlur={onCommitTitle} onChange={(event) => onDraftTitleChange(event.target.value)} onKeyDown={(event) => { if (event.key === "Enter") onCommitTitle(); }} value={draftTitle} /> : <button aria-expanded={open} aria-haspopup="menu" aria-label="切换画布" className="flex h-8 items-center gap-1 rounded-lg bg-[#292929] px-2 text-[12px] text-white/90 hover:bg-[#343434]" onClick={() => setOpen((value) => !value)} type="button">
        {currentLabel}<ChevronDown className="size-3 text-white/55" />
      </button>}
      {open ? <div aria-label="画布列表" className="absolute left-0 top-9 z-[100] w-44 rounded-xl border border-white/10 bg-[#292929] p-2 text-[12px] text-white shadow-[0_16px_36px_rgba(0,0,0,.45)]" role="menu">
        <div className="flex items-center justify-between px-1.5 pb-2 text-white/50"><span>画布</span><button aria-label="新建画布" className="rounded p-0.5 text-white hover:bg-white/10 disabled:opacity-40" disabled={busy || loading} onClick={() => void createCanvas()} type="button"><Plus className="size-4" /></button></div>
        <div className="max-h-64 overflow-y-auto">
          {loading ? <div className="px-1.5 py-2 text-white/50">加载中…</div> : ordered.map((project, index) => <div className="flex items-center rounded-md hover:bg-white/10" key={project.id}><button aria-current={project.id === canvasId ? "page" : undefined} className="min-w-0 flex-1 truncate px-1.5 py-2 text-left disabled:opacity-40" disabled={busy} onClick={() => void switchTo(project.id)} role="menuitem" type="button">{label(project, index)}</button>{project.id === canvasId ? <button aria-label="重命名当前画布" className="rounded p-1 text-white/60 hover:bg-white/10 hover:text-white" onClick={() => { setOpen(false); onStartTitleEdit(); }} title="重命名画布" type="button"><Ellipsis className="size-3.5" /></button> : null}</div>)}
        </div>
      </div> : null}
    </div>
  );
}

function formatCreditValue(value: number) {
  if (!Number.isFinite(value)) return "0";
  return Math.round(value).toLocaleString("zh-CN");
}

function getToolbarButtonLabel(item: (typeof TOOLBAR_ITEMS)[number]) {
  return item.id === "workflow" ? "打开工具箱" : item.label;
}

function LeftToolbar({
  activePanel,
  panMode,
  onTogglePan,
  onOpen,
}: {
  activePanel: ActivePanel;
  panMode: boolean;
  onTogglePan: () => void;
  onOpen: (panel: Exclude<ActivePanel, null>) => void;
}) {
  return (
    <aside
      className="fixed bottom-3 left-1/2 z-40 flex h-12 -translate-x-1/2 items-center gap-2 rounded-xl border border-white/9 bg-[#202020]/95 px-2 shadow-[0_22px_60px_rgba(0,0,0,0.45)] backdrop-blur-[8px]"
      data-canvas-overlay="true"
    >
      {TOOLBAR_ITEMS.map((item, index) => {
        const Icon = item.icon;
        const isActive = activePanel === item.id;
        const buttonLabel = getToolbarButtonLabel(item);
        return (
          <div className={cn("flex", index === 5 && "ml-[9px]")} key={item.id}>
            <button
              aria-label={buttonLabel}
              className={cn(
                "group flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-white/72 transition-colors hover:bg-white/10 hover:text-white",
                (isActive || item.id === "add") && "bg-white text-black hover:bg-white hover:text-black"
              )}
              onClick={() => onOpen(item.id)}
              title={buttonLabel}
              type="button"
            >
              {item.id === "assets" ? (
                <AssetGlyph />
              ) : item.id === "workflow" ? (
                <WorkflowGlyph />
              ) : (
                <Icon className={cn("h-4 w-4", item.id === "add" && "transition-transform duration-200 group-hover:rotate-45")} />
              )}
            </button>
            {item.id === "add" ? <button aria-label="拖动画布" aria-pressed={panMode} title="拖动画布（按住空格）" className={cn("ml-2 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-white/72 hover:bg-white/10", panMode && "bg-white/15 text-white")} onClick={onTogglePan} type="button"><Move className="h-4 w-4" /></button> : null}
          </div>
        );
      })}
      <div className="group absolute left-[calc(100%+10px)] top-1/2 -translate-y-1/2">
        <button
          aria-label="TVstar"
          aria-pressed={activePanel === "tvstar"}
          className={cn("flex size-12 items-center justify-center rounded-full border border-white/10 bg-[#292929] shadow-[0_8px_24px_rgba(0,0,0,.4)] transition-transform hover:scale-105", activePanel === "tvstar" && "ring-2 ring-cyan-300/40")}
          onClick={() => onOpen("tvstar")}
          title="TVstar"
          type="button"
        >
          <span className="relative block size-7 overflow-hidden rounded-full border border-cyan-100/60 bg-[radial-gradient(circle_at_35%_32%,#8df9f2_0%,#39dce9_24%,#579cff_53%,#7259d6_78%,#2a647c_100%)] shadow-[0_0_13px_rgba(90,206,245,.72),inset_-3px_-3px_8px_rgba(15,34,99,.45)]">
            <span className="absolute inset-0 rounded-full bg-[radial-gradient(ellipse_at_70%_72%,rgba(85,255,207,.8),transparent_38%)]" />
            <span className="absolute left-[18%] top-[13%] h-[22%] w-[30%] -rotate-25 rounded-full bg-white/55 blur-[3px]" />
          </span>
        </button>
        <span className="pointer-events-none absolute bottom-[calc(100%+9px)] left-1/2 -translate-x-1/2 whitespace-nowrap rounded-lg border border-white/10 bg-[#151515] px-2 py-1 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover:opacity-100">TVstar</span>
      </div>
    </aside>
  );
}

function ZoomDock({
  assetManagerOpen = false,
  assetManagerWidth = ASSET_MANAGER_DEFAULT_WIDTH,
  compact = false,
  edgesHidden = false,
  nodes = [],
  onArrange,
  onCenter,
  onSetZoom,
  onToggleEdges,
  onToggleAssetManager,
  onToggleOverview,
  onToggleSnap,
  onViewportChange,
  overviewOpen = false,
  selectedNodeId,
  snapEnabled = true,
  viewport,
  onZoomIn,
  onZoomOut,
  zoom,
}: {
  assetManagerOpen?: boolean;
  assetManagerWidth?: number;
  compact?: boolean;
  edgesHidden?: boolean;
  nodes?: CloneNode[];
  onArrange: () => void;
  onCenter: () => void;
  onToggleEdges?: () => void;
  onToggleAssetManager?: () => void;
  onToggleOverview?: () => void;
  onToggleSnap?: () => void;
  onSetZoom: (zoom: number) => void;
  onViewportChange: (viewport: { x: number; y: number; zoom: number }) => void;
  overviewOpen?: boolean;
  selectedNodeId?: string | null;
  snapEnabled?: boolean;
  viewport: { x: number; y: number; zoom: number };
  onZoomIn: () => void;
  onZoomOut: () => void;
  zoom: number;
}) {
  const zoomMenuRef = useRef<HTMLDivElement | null>(null);
  const zoomPercent = Math.round(zoom * 100);
  const [zoomMenuOpen, setZoomMenuOpen] = useState(false);
  const [zoomInputValue, setZoomInputValue] = useState(() => String(zoomPercent));

  useEffect(() => {
    setZoomInputValue(String(zoomPercent));
  }, [zoomPercent]);

  useEffect(() => {
    if (!zoomMenuOpen) return;
    const onPointerDown = (event: PointerEvent) => {
      const target = event.target;
      if (target instanceof Node && zoomMenuRef.current?.contains(target)) return;
      setZoomMenuOpen(false);
    };
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") setZoomMenuOpen(false);
    };
    document.addEventListener("pointerdown", onPointerDown);
    document.addEventListener("keydown", onKeyDown);
    return () => {
      document.removeEventListener("pointerdown", onPointerDown);
      document.removeEventListener("keydown", onKeyDown);
    };
  }, [zoomMenuOpen]);

  const applyZoom = useCallback(
    (nextZoom: number) => {
      const clampedZoom = clampCanvasZoom(nextZoom);
      setZoomInputValue(String(Math.round(clampedZoom * 100)));
      onSetZoom(clampedZoom);
    },
    [onSetZoom]
  );

  const commitZoomInput = useCallback(() => {
    const parsedPercent = Number.parseFloat(zoomInputValue.trim().replace("%", ""));
    if (!Number.isFinite(parsedPercent)) {
      setZoomInputValue(String(zoomPercent));
      return;
    }
    applyZoom(parsedPercent / 100);
  }, [applyZoom, zoomInputValue, zoomPercent]);

  const renderZoomMenuItem = (label: string, shortcut: string | null, onClick: () => void) => (
    <button
      className="flex h-9 w-full cursor-pointer items-center justify-between rounded-lg px-[9px] text-left text-[13px] leading-none text-white/88 transition-colors hover:bg-white/10 hover:text-white"
      key={label}
      onClick={onClick}
      role="menuitem"
      type="button"
    >
      <span>{label}</span>
      {shortcut ? <span className="text-white/38">{shortcut}</span> : null}
    </button>
  );

  const zoomButtonWidth = zoomPercent < 100 ? 36 : zoomPercent >= 800 ? 44 : 42;

  if (compact) {
    return (
      <div
        className="fixed bottom-4 left-0 z-40 flex items-center gap-1 rounded-r-xl border border-l-0 border-white/9 bg-[#202020]/95 p-1.5 text-white/70 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[8px]"
        data-canvas-overlay="true"
      >
        <button className="flex h-7 w-10 items-center justify-center rounded-lg bg-white/10 transition-colors hover:bg-white/14" type="button">
          <MagnetGlyph />
        </button>
        <button className="flex h-7 w-10 items-center justify-center rounded-lg text-[18px] leading-none transition-colors hover:bg-white/10" onClick={onZoomOut} type="button">
          -
        </button>
        <button className="h-7 min-w-[72px] rounded-lg px-1 text-[13px] leading-normal transition-colors hover:bg-white/10" onClick={onCenter} type="button">
          77%
        </button>
        <button className="flex h-7 w-10 items-center justify-center rounded-lg text-[18px] leading-none transition-colors hover:bg-white/10" onClick={onZoomIn} type="button">
          +
        </button>
      </div>
    );
  }

  return (
    <div className="fixed bottom-3 left-4 z-40 flex items-end gap-2" data-canvas-overlay="true">
      <div
        className="flex items-center gap-1 rounded-xl bg-[#141414]/70 p-[6px] text-white/74 shadow-[0_18px_48px_rgba(0,0,0,0.38)] backdrop-blur-[10px]"
        style={{ transform: assetManagerOpen ? `translateX(${assetManagerWidth}px)` : undefined }}
      >
        {assetManagerOpen ? null : (
          <ZoomDockButton label="资产管理" onClick={onToggleAssetManager} wide>
            <AssetGlyph />
          </ZoomDockButton>
        )}
        <ZoomDockButton label="整理画布，Option+Shift+F" onClick={onArrange}>
          <ArrangeCanvasGlyph />
        </ZoomDockButton>
        <div className="relative h-7 w-7">
          {overviewOpen ? (
            <CanvasOverviewPopover
              nodes={nodes}
              selectedNodeId={selectedNodeId || null}
              viewport={viewport}
              onViewportChange={onViewportChange}
            />
          ) : null}
          <ZoomDockButton active={overviewOpen} label="切换小地图" onClick={onToggleOverview}>
            <GridTilesGlyph />
          </ZoomDockButton>
        </div>
        <ZoomDockButton active={edgesHidden} label={edgesHidden ? "显示节点连线" : "隐藏节点连线"} onClick={onToggleEdges}>
          <EdgeVisibilityGlyph hidden={edgesHidden} />
        </ZoomDockButton>
        <ZoomDockButton label="网格吸附" onClick={onToggleSnap}>
          <MagnetGlyph />
        </ZoomDockButton>
        <div className="relative h-7" ref={zoomMenuRef} style={{ width: zoomButtonWidth }}>
          {zoomMenuOpen ? (
            <div
              aria-label="缩放选项"
              className="absolute bottom-9 left-[-72px] z-[300] w-[187px] rounded-xl border-[0.5px] border-[#363636] bg-[#262626] p-[6px] text-[13px] text-white shadow-[0_8px_32px_rgba(0,0,0,0.15),0_2px_8px_rgba(0,0,0,0.1)]"
              role="menu"
            >
              <label className="mb-[6px] flex h-8 w-full items-center rounded-lg bg-white/10 px-[9px] text-white/88">
                <input
                  aria-label="缩放比例"
                  className="h-5 min-w-0 flex-1 bg-transparent text-[13px] leading-5 text-white outline-none placeholder:text-white/30"
                  inputMode="decimal"
                  onChange={(event) => setZoomInputValue(event.target.value.replace(/[^\d.]/g, ""))}
                  onKeyDown={(event) => {
                    if (event.key === "Enter") {
                      event.preventDefault();
                      commitZoomInput();
                    }
                  }}
                  value={zoomInputValue}
                />
                <span className="pl-1 text-white/60">%</span>
              </label>
              {renderZoomMenuItem("放大", "⌘+", () => applyZoom(zoom + CANVAS_ZOOM_STEP))}
              {renderZoomMenuItem("缩小", "⌘-", () => applyZoom(zoom - CANVAS_ZOOM_STEP))}
              {renderZoomMenuItem("适合屏幕", "⌘0", onCenter)}
              <div className="mx-1 my-[5px] h-px bg-white/10" />
              {renderZoomMenuItem("缩放至50%", null, () => applyZoom(0.5))}
              {renderZoomMenuItem("缩放至100%", null, () => applyZoom(1))}
              {renderZoomMenuItem("缩放至800%", null, () => applyZoom(8))}
            </div>
          ) : null}
          <button
            aria-expanded={zoomMenuOpen}
            aria-haspopup="menu"
            aria-label="缩放选项"
            className="flex h-7 cursor-pointer items-center justify-center rounded-lg px-1 text-[13px] leading-normal text-white/84 transition-colors hover:bg-white/10 hover:text-white"
            onClick={() => setZoomMenuOpen((value) => !value)}
            style={{ width: zoomButtonWidth }}
            title="缩放选项"
            type="button"
          >
            {zoomPercent}%
          </button>
        </div>
      </div>
    </div>
  );
}

function ArrangeCanvasConfirm({
  assetManagerOpen,
  assetManagerWidth = ASSET_MANAGER_DEFAULT_WIDTH,
  onKeep,
  onRestore,
}: {
  assetManagerOpen?: boolean;
  assetManagerWidth?: number;
  onKeep: () => void;
  onRestore: () => void;
}) {
  return (
    <div
      className="fixed bottom-[55px] z-[300] w-[168px] rounded-xl bg-[#262626] p-3 text-[13px] text-white shadow-[0_8px_32px_rgba(0,0,0,0.15),0_2px_8px_rgba(0,0,0,0.1)]"
      data-canvas-overlay="true"
      style={{ left: assetManagerOpen ? assetManagerWidth - 48 : 50 }}
    >
      <p className="leading-5 text-white/88">是否保留此次整理结果？</p>
      <div className="mt-3 flex justify-end gap-2">
        <button
          className="h-8 rounded-lg px-3 py-1.5 text-[13px] leading-normal text-white transition-colors hover:bg-white/10"
          onClick={onRestore}
          type="button"
        >
          还原
        </button>
        <button
          className="h-8 rounded-lg bg-white/15 px-3 py-1.5 text-[13px] leading-normal text-white transition-colors hover:bg-white/10"
          onClick={onKeep}
          type="button"
        >
          保留
        </button>
      </div>
    </div>
  );
}

function ZoomDockButton({
  active,
  children,
  label,
  onClick,
  wide,
}: {
  active?: boolean;
  children: ReactNode;
  label: string;
  onClick?: () => void;
  wide?: boolean;
}) {
  return (
    <button
      aria-label={label}
      className={cn(
        "flex h-7 cursor-pointer items-center justify-center rounded-lg text-white/74 transition-colors hover:bg-white/10 hover:text-white",
        wide ? "w-[94px] gap-1.5 px-2 text-[13px]" : "w-7",
        active && "bg-white/15 text-white"
      )}
      onClick={onClick}
      title={label}
      type="button"
    >
      {children}
      {wide ? <span className="whitespace-nowrap leading-none">{label}</span> : null}
    </button>
  );
}

function CanvasOverviewPopover({
  nodes,
  onViewportChange,
  selectedNodeId,
  viewport,
}: {
  nodes: CloneNode[];
  onViewportChange: (viewport: { x: number; y: number; zoom: number }) => void;
  selectedNodeId: string | null;
  viewport: { x: number; y: number; zoom: number };
}) {
  const [draggingPointerId, setDraggingPointerId] = useState<number | null>(null);
  const map = useMemo(() => {
    if (nodes.length === 0) return null;
    const minX = Math.min(...nodes.map((node) => node.x));
    const minY = Math.min(...nodes.map((node) => node.y));
    const maxX = Math.max(...nodes.map((node) => node.x + node.width));
    const maxY = Math.max(...nodes.map((node) => node.y + node.height));
    const width = Math.max(1, maxX - minX);
    const height = Math.max(1, maxY - minY);
    const scale = Math.min(130 / width, 90 / height);
    const renderedWidth = width * scale;
    const renderedHeight = height * scale;
    return {
      height,
      minX,
      minY,
      offsetX: (150 - renderedWidth) / 2,
      offsetY: (110 - renderedHeight) / 2,
      scale,
      width,
    };
  }, [nodes]);

  const panToMiniPoint = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      if (!map) return;
      const rect = event.currentTarget.getBoundingClientRect();
      const worldX = map.minX + (event.clientX - rect.left - map.offsetX) / map.scale;
      const worldY = map.minY + (event.clientY - rect.top - map.offsetY) / map.scale;
      onViewportChange({
        x: Math.round(window.innerWidth / 2 - worldX * viewport.zoom),
        y: Math.round(window.innerHeight / 2 - worldY * viewport.zoom),
        zoom: viewport.zoom,
      });
    },
    [map, onViewportChange, viewport.zoom]
  );

  const viewportWidth = typeof window === "undefined" ? 0 : window.innerWidth;
  const viewportHeight = typeof window === "undefined" ? 0 : window.innerHeight;
  const miniViewBox = map
    ? {
        height: 110 / map.scale,
        width: 150 / map.scale,
        x: map.minX - map.offsetX / map.scale,
        y: map.minY - map.offsetY / map.scale,
      }
    : null;
  const viewportWorldRect = map && viewportWidth > 0 && viewportHeight > 0
    ? {
        height: viewportHeight / viewport.zoom,
        left: -viewport.x / viewport.zoom,
        top: -viewport.y / viewport.zoom,
        width: viewportWidth / viewport.zoom,
      }
    : null;
  const minimapMaskPath =
    miniViewBox && viewportWorldRect
      ? [
          `M${miniViewBox.x},${miniViewBox.y}h${miniViewBox.width}v${miniViewBox.height}h-${miniViewBox.width}z`,
          `M${viewportWorldRect.left},${viewportWorldRect.top}h${viewportWorldRect.width}v${viewportWorldRect.height}h-${viewportWorldRect.width}z`,
        ].join("\n        ")
      : "";

  return (
    <div className="absolute bottom-9 left-0 z-50 rounded-xl">
      <div
        aria-label="Mini Map"
        className="react-flow__panel react-flow__minimap bottom right relative h-[110px] w-[150px] rounded-xl text-transparent"
        onPointerDown={(event) => {
          event.preventDefault();
          event.stopPropagation();
          event.currentTarget.setPointerCapture(event.pointerId);
          setDraggingPointerId(event.pointerId);
          panToMiniPoint(event);
        }}
        onPointerMove={(event) => {
          if (draggingPointerId !== event.pointerId) return;
          event.preventDefault();
          event.stopPropagation();
          panToMiniPoint(event);
        }}
        onPointerUp={(event) => {
          if (draggingPointerId === event.pointerId) {
            event.currentTarget.releasePointerCapture(event.pointerId);
            setDraggingPointerId(null);
          }
        }}
      >
        <span className="sr-only">Mini Map</span>
        {map && miniViewBox ? (
          <svg
            className="react-flow__minimap-svg"
            height={110}
            role="img"
            viewBox={`${miniViewBox.x} ${miniViewBox.y} ${miniViewBox.width} ${miniViewBox.height}`}
            width={150}
          >
            <title>Mini Map</title>
            {nodes.map((node) => (
              <rect
                className={cn("react-flow__minimap-node", node.id === selectedNodeId && "selected")}
                height={node.height}
                key={node.id}
                rx={2}
                ry={2}
                style={{
                  fill:
                    node.id === selectedNodeId
                      ? "rgba(255,255,255,0.46)"
                      : "var(--canvas-minimap-node, rgba(255,255,255,0.22))",
                }}
                width={node.width}
                x={node.x}
                y={node.y}
              />
            ))}
            {minimapMaskPath ? (
              <path
                className="react-flow__minimap-mask"
                d={minimapMaskPath}
                fillRule="evenodd"
                pointerEvents="none"
                style={{ fill: "rgba(255,255,255,0.04)" }}
              />
            ) : null}
          </svg>
        ) : null}
      </div>
    </div>
  );
}

function StylizedBrandLogo({
  siteLogo,
  siteLogoDark,
  siteName,
}: {
  siteLogo?: string | null;
  siteLogoDark?: string | null;
  siteName?: string | null;
}) {
  const resolvedSiteName = resolveSiteName(siteName);
  const displayLogo = siteLogoDark?.trim() || siteLogo?.trim() || "";

  return (
    <span className="flex min-w-0 items-center gap-2.5">
      {displayLogo ? (
        <img
          alt={resolvedSiteName}
          className="h-8 w-8 shrink-0 object-contain"
          src={displayLogo}
        />
      ) : (
        <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-white/10">
          <Wand2 className="h-4 w-4 text-white" />
        </span>
      )}
      <span className="max-w-[140px] truncate text-base font-semibold text-white">
        {resolvedSiteName}
      </span>
    </span>
  );
}

function PointerBadge() {
  return (
    <svg aria-hidden="true" className="h-[22px] w-[22px] shrink-0" fill="none" viewBox="0 0 22 22">
      <circle cx="8" cy="7.904" fill="#171717" r="7.3" />
      <circle cx="8" cy="7.904" fill="#525252" r="4.103" />
      <path
        d="M6.86 8.082c-.299-.824.499-1.621 1.322-1.323l11.394 4.12a.478.478 0 0 1 .026.89 14.72 14.72 0 0 0-7.733 7.732.478.478 0 0 1-.889-.025z"
        fill="#f7f7f7"
        stroke="#f7f7f7"
        strokeLinejoin="round"
        strokeWidth="0.945"
      />
    </svg>
  );
}

function ArrowGlyph() {
  return (
    <svg aria-hidden="true" className="h-3 w-3 text-white" fill="currentColor" viewBox="0 0 20.1132 17.9127">
      <path d="M10.957 0.117086C11.1132 -0.0390761 11.3662 -0.0389815 11.5225 0.117086L19.9375 8.53213C20.1718 8.76644 20.1718 9.14644 19.9375 9.38076L11.5225 17.7958C11.3663 17.9516 11.1131 17.9518 10.957 17.7958L10.249 17.0878C10.0931 16.9317 10.0932 16.6786 10.249 16.5224L16.915 9.85634H0.399414C0.178762 9.85616 0.000169635 9.67759 0 9.45693V8.45595C0 8.23515 0.178657 8.05575 0.399414 8.05556H16.915L10.249 1.39052C10.0931 1.23442 10.0932 0.981285 10.249 0.825094L10.957 0.117086Z" />
    </svg>
  );
}

function MusicStarterIcon() {
  return (
    <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] bg-white text-black">
      <Music2 className="h-5 w-5" />
    </span>
  );
}

function StoreGlyph() {
  return (
    <svg aria-hidden="true" className="h-4 w-4 shrink-0" fill="currentColor" viewBox="0 0 16 16">
      <path
        clipRule="evenodd"
        d="M11.5703 7.32031C11.7041 7.40647 11.8427 7.49125 11.9863 7.56543C12.4351 7.79714 13.0016 7.99984 13.5938 8C13.9834 7.99995 14.5104 7.94128 15.0498 7.83203V10.25C15.0498 11.2914 15.0517 12.1405 14.9619 12.8086C14.8695 13.4961 14.6692 14.0925 14.1934 14.5684C13.7175 15.0442 13.1211 15.2445 12.4336 15.3369C11.7655 15.4267 10.9164 15.4248 9.875 15.4248H6.125C5.08356 15.4248 4.23451 15.4267 3.56641 15.3369C2.87886 15.2445 2.28246 15.0442 1.80664 14.5684C1.33083 14.0925 1.13053 13.4961 1.03809 12.8086C0.948294 12.1405 0.950198 11.2914 0.950198 10.25V7.83594C1.49346 7.94052 2.02537 7.99896 2.40625 7.99902C2.99823 7.99894 3.56495 7.79594 4.01367 7.56445C4.15699 7.49047 4.29517 7.40621 4.42871 7.32031C4.85021 7.66646 5.42619 7.99885 6.16504 7.99902C6.77646 7.99893 7.3045 7.77311 7.70996 7.52246C7.81016 7.46049 7.90621 7.39372 7.99805 7.32617C8.09066 7.39438 8.18892 7.45994 8.29004 7.52246C8.69562 7.77313 9.22373 7.99883 9.83496 7.99902C10.5728 7.99886 11.1488 7.66619 11.5703 7.32031ZM8 9.5C6.89544 9.5 6 10.3954 6 11.5V13.5C6 14.0523 6.44772 14.5 7 14.5H9C9.55229 14.5 10 14.0523 10 13.5V11.5C10 10.3954 9.10457 9.5 8 9.5ZM9.83496 6.99902L9.69922 6.99316C9.68917 6.99225 9.67896 6.98944 9.66895 6.98828C9.72373 6.9944 9.77923 6.99901 9.83496 6.99902Z"
        fillRule="evenodd"
      />
      <path d="M8.00053 1.00014C11.0011 1.00014 12.6726 0.985326 13.3162 1.28875C13.9598 1.59225 14.3832 2.15654 14.9903 2.92752L15.2752 3.28903L15.2838 3.30002L15.4892 3.59462C15.6898 3.90524 15.8674 4.26195 15.9504 4.63421C16.065 5.14874 16.0048 5.74519 15.515 6.23304C15.0392 6.7069 14.3509 7 13.5936 7C12.8445 6.9999 11.9776 6.47094 11.5 6C11.0434 6.46652 10.567 6.999 9.83479 6.999C9.10776 6.99887 8.45603 6.46088 8 6C7.5439 6.4606 6.89205 6.999 6.16519 6.999C5.4321 6.99897 4.95655 6.46754 4.5 6C4.02234 6.47025 3.15497 6.999 2.40635 6.999C1.6491 6.99895 0.960752 6.70587 0.484999 6.23204C-0.00468519 5.74422 -0.0650214 5.1477 0.04955 4.63321C0.160132 4.1368 0.438679 3.66782 0.716163 3.29902L0.724765 3.28804L1.00969 2.92653C1.61692 2.1553 2.041 1.59122 2.68482 1.28775C3.32863 0.984389 5 1.00014 8.00053 1.00014Z" />
    </svg>
  );
}

function DiamondGlyph() {
  return (
    <svg aria-hidden="true" className="h-4 w-4 shrink-0" fill="none" viewBox="0 0 16 16">
      <path
        clipRule="evenodd"
        d="M12.19 1.333c.696 0 1.33.406 1.618 1.04L15.506 6.1a1.78 1.78 0 0 1-.319 1.952l-5.889 6.294c-.702.75-1.894.75-2.596 0L.813 8.052A1.78 1.78 0 0 1 .493 6.1l1.7-3.727c.289-.633.92-1.04 1.617-1.04zM6.467 5.971l-1.8-.005 3.12 3.12c.099.1.26.1.358 0l3.114-3.112c.007-.007.01-.01 0-.01h-1.8L8.075 7.349a.16.16 0 0 1-.226-.001L6.46 5.96c.002.002.01.01.007.01"
        fill="#FFC65D"
        fillRule="evenodd"
      />
    </svg>
  );
}

function LightningGlyph() {
  return (
    <svg aria-hidden="true" className="h-[10px] w-2 shrink-0 text-[#FFDBA4]" fill="none" viewBox="0 0 8 10">
      <path
        d="M7.306 4.36H5.79V.76c0-.84-.447-1.01-.992-.38l-.393.455-3.323 3.85c-.456.525-.265.955.422.955h1.517v3.6c0 .84.447 1.01.992.38l.392-.455 3.324-3.85c.456-.525.265-.955-.423-.955"
        fill="currentColor"
      />
    </svg>
  );
}

function AssetGlyph() {
  return (
    <svg aria-hidden="true" className="h-[18px] w-[18px]" fill="none" viewBox="0 0 18 18">
      <path d="M9 1.65 15.15 5.1 9 8.55 2.85 5.1 9 1.65Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
      <path d="M2.85 8.05 9 11.5l6.15-3.45M2.85 11 9 14.45 15.15 11" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.7" />
    </svg>
  );
}

function WorkflowGlyph() {
  return (
    <svg aria-hidden="true" className="h-[18px] w-[18px]" fill="none" viewBox="0 0 18 18">
      <path d="M5.25 4.5a1.9 1.9 0 1 1-3.8 0 1.9 1.9 0 0 1 3.8 0ZM16.55 4.5a1.9 1.9 0 1 1-3.8 0 1.9 1.9 0 0 1 3.8 0ZM5.25 13.5a1.9 1.9 0 1 1-3.8 0 1.9 1.9 0 0 1 3.8 0Z" stroke="currentColor" strokeWidth="1.7" />
      <path d="M5.25 4.5h4.4c1.3 0 2.35 1.05 2.35 2.35v0c0 1.3-1.05 2.35-2.35 2.35H8.3c-1.3 0-2.35 1.05-2.35 2.35v1.95" stroke="currentColor" strokeLinecap="round" strokeWidth="1.7" />
    </svg>
  );
}

function ArrangeCanvasGlyph() {
  return (
    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="none" viewBox="0 0 18 18">
      <path d="M3.1 5.1h4.1M10.8 5.1h4.1M5.1 3.1v4.1M12.9 3.1v4.1M3.1 12.9h4.1M10.8 12.9h4.1M5.1 10.8v4.1M12.9 10.8v4.1" stroke="currentColor" strokeLinecap="round" strokeWidth="1.6" />
      <path d="M6.4 6.4 11.6 11.6M11.6 6.4 6.4 11.6" stroke="currentColor" strokeLinecap="round" strokeOpacity="0.58" strokeWidth="1.25" />
    </svg>
  );
}

function EdgeVisibilityGlyph({ hidden }: { hidden: boolean }) {
  return (
    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="none" viewBox="0 0 18 18">
      <path d="M3.2 9.1c2.5-3.1 5.7-3.1 8.2 0" stroke="currentColor" strokeLinecap="round" strokeWidth="1.65" />
      <path d="M6.6 9.05a2.15 2.15 0 0 0 4.3 0" stroke="currentColor" strokeLinecap="round" strokeWidth="1.65" />
      <path d="M11.4 9.1c1.2-.05 2.35.44 3.4 1.48" stroke="currentColor" strokeLinecap="round" strokeWidth="1.65" />
      {hidden ? <path d="M3.2 14.8 14.8 3.2" stroke="currentColor" strokeLinecap="round" strokeWidth="1.65" /> : null}
    </svg>
  );
}

function GridTilesGlyph() {
  return (
    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="currentColor" viewBox="0 0 16 16">
      <path d="M5.13379 8.33887C6.00346 8.33899 6.70886 9.04342 6.70898 9.91309V11.4883C6.70887 12.358 6.00347 13.0634 5.13379 13.0635H2.50879C1.6391 13.0634 0.933703 12.358 0.933594 11.4883V9.91309C0.933717 9.04341 1.63911 8.33898 2.50879 8.33887H5.13379ZM11.4922 6.23828C12.3619 6.23839 13.0674 6.94369 13.0674 7.81348V11.4883C13.0673 12.358 12.3619 13.0634 11.4922 13.0635H8.86719C7.99746 13.0634 7.2921 12.358 7.29199 11.4883V7.81348C7.29199 6.94367 7.99739 6.23834 8.86719 6.23828H11.4922ZM2.45508 9.3916C2.19053 9.41859 1.98351 9.64144 1.9834 9.91309V11.4883C1.9835 11.7599 2.19051 11.9838 2.45508 12.0107L2.50879 12.0137H5.13379L5.1875 12.0107C5.45212 11.9838 5.6581 11.76 5.6582 11.4883V9.91309C5.65809 9.64141 5.4521 9.41854 5.1875 9.3916L5.13379 9.38867H2.50879L2.45508 9.3916ZM8.86719 7.28809C8.57729 7.28815 8.34277 7.52356 8.34277 7.81348V11.4883L8.34473 11.542C8.36987 11.789 8.56642 11.9857 8.81348 12.0107L8.86719 12.0137H11.4922L11.5459 12.0107C11.7929 11.9856 11.9895 11.789 12.0146 11.542L12.0176 11.4883V7.81348C12.0176 7.52359 11.782 7.2882 11.4922 7.28809H8.86719ZM5.13379 0.929688C6.00347 0.929811 6.70887 1.6352 6.70898 2.50488V6.17969C6.70892 7.04941 6.00349 7.75476 5.13379 7.75488H2.50879C1.63907 7.75477 0.933655 7.04942 0.933594 6.17969V2.50488C0.933704 1.6352 1.6391 0.929797 2.50879 0.929688H5.13379ZM2.45508 1.98242C2.19052 2.0094 1.9835 2.23322 1.9834 2.50488V6.17969L1.98633 6.2334C2.01141 6.48042 2.20808 6.67697 2.45508 6.70215L2.50879 6.70508H5.13379L5.1875 6.70215C5.43455 6.67702 5.63116 6.48045 5.65625 6.2334L5.6582 6.17969V2.50488C5.6581 2.23318 5.45212 2.00935 5.1875 1.98242L5.13379 1.97949H2.50879L2.45508 1.98242ZM11.4922 0.929688C12.3619 0.929797 13.0673 1.63519 13.0674 2.50488V4.08008C13.0671 4.94966 12.3618 5.65419 11.4922 5.6543H8.86719C7.99754 5.65424 7.29223 4.94968 7.29199 4.08008V2.50488C7.2921 1.63517 7.99746 0.929749 8.86719 0.929688H11.4922ZM8.86719 1.97949C8.57736 1.97955 8.34288 2.21506 8.34277 2.50488V4.08008L8.34473 4.13379C8.37172 4.39837 8.59549 4.60443 8.86719 4.60449H11.4922C11.7638 4.60439 11.9877 4.39835 12.0146 4.13379L12.0176 4.08008V2.50488C12.0175 2.21509 11.782 1.9796 11.4922 1.97949H8.86719Z" />
    </svg>
  );
}

function MagnetGlyph() {
  return (
    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="none" viewBox="0 0 24 24">
      <path
        d="m12 15 4 4M2.352 10.648a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.029-6.029a1 1 0 1 1 3 3l-6.029 6.029a1.205 1.205 0 0 0 0 1.704l2.296 2.296a1.205 1.205 0 0 0 1.704 0l6.365-6.367A1 1 0 0 0 8.716 4.282zM5 8l4 4"
        stroke="currentColor"
        strokeLinecap="round"
        strokeLinejoin="round"
        strokeWidth="2"
      />
    </svg>
  );
}

function GridSplitActionToolbar({
  anchor,
  billingLabel,
  onClearSelection,
  onCreateNodes,
  onUpscale,
  selectedCount,
}: {
  anchor?: PresetControlAnchor;
  billingLabel: string;
  onClearSelection: () => void;
  onCreateNodes: () => void;
  onUpscale: (scaleFactor: number) => void;
  selectedCount: number;
}) {
  const [scaleFactor, setScaleFactor] = useState(2);
  const [scaleMenuOpen, setScaleMenuOpen] = useState(false);

  return (
    <>
      <div
        className="pointer-events-auto absolute flex h-[58px] items-center gap-4 rounded-[14px] border border-white/8 bg-[#262626]/96 px-5 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
        style={
          anchor
            ? {
                left: anchor.centerX,
                top: anchor.topY - (24 * anchor.zoom + 10),
                transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
                transformOrigin: "bottom center",
              }
            : {
                left: "50%",
                top: 168,
                transform: `translateX(-50%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
                transformOrigin: "top center",
              }
        }
      >
        <button
          className="flex h-10 w-10 items-center justify-center rounded-[10px] text-[22px] text-white/74 transition hover:bg-white/8 hover:text-white"
          onClick={onClearSelection}
          type="button"
        >
          ↩
        </button>
        <div className="h-9 w-px bg-white/8" />
        <span className="flex items-center gap-2 text-white/74">
          <GridTilesGlyph />
          <span className="text-[15px]">已选 {selectedCount} 个宫格</span>
        </span>
        <div className="h-9 w-px bg-white/8" />
        <button
          className="flex h-10 items-center gap-2 rounded-[10px] px-2 text-white/84 transition hover:bg-white/8"
          onClick={onCreateNodes}
          type="button"
        >
          <WorkflowGlyph />
          <span className="whitespace-nowrap">创建生图节点</span>
        </button>
        <div className="h-9 w-px bg-white/8" />
        <button
          className="flex h-10 items-center gap-2 rounded-[10px] px-2 text-white/84 transition hover:bg-white/8"
          onClick={() => onUpscale(scaleFactor)}
          type="button"
        >
          <SceneToolIcon kind="hd" />
          <span className="whitespace-nowrap">生成高清图片</span>
          <span className="rounded-[7px] bg-white/10 px-2 py-0.5 text-[13px] text-white/72">
            {billingLabel}
          </span>
        </button>
        <div className="relative">
          <button
            className={cn(
              "flex h-10 min-w-[72px] items-center justify-between gap-2 rounded-[10px] px-3 text-white/84 transition hover:bg-white/8",
              scaleMenuOpen && "bg-white/8"
            )}
            onClick={() => setScaleMenuOpen((current) => !current)}
            type="button"
          >
            <span>{scaleFactor}倍</span>
            <span className="text-[14px] text-white/58">⌄</span>
          </button>
          {scaleMenuOpen ? (
            <div className="absolute right-0 top-[calc(100%+8px)] w-[108px] rounded-[12px] border border-white/8 bg-[#262626]/96 p-2 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[12px]">
              {[2, 4].map((option) => (
                <button
                  className={cn(
                    "flex h-10 w-full items-center justify-center rounded-[8px] text-[14px] text-white/78 transition hover:bg-white/8 hover:text-white",
                    scaleFactor === option && "bg-white/10 text-white"
                  )}
                  key={option}
                  onClick={() => {
                    setScaleFactor(option);
                    setScaleMenuOpen(false);
                  }}
                  type="button"
                >
                  {option}倍
                </button>
              ))}
            </div>
          ) : null}
        </div>
      </div>
    </>
  );
}

function VideoMediaToolbar({
  activeMode,
  anchor,
  onAnalyze,
  onDownload,
  onHd,
  onPreview,
  onToggleClip,
}: {
  activeMode: VideoToolbarMode;
  anchor?: PresetControlAnchor;
  onAnalyze: () => void;
  onDownload: () => void;
  onHd: () => void;
  onPreview: () => void;
  onToggleClip: () => void;
}) {
  return (
    <div
      className="pointer-events-auto absolute flex h-[58px] items-center gap-4 rounded-[14px] border border-white/8 bg-[#262626]/96 px-5 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
      style={
        anchor
          ? {
              left: anchor.centerX,
              top: anchor.topY - (24 * anchor.zoom + 10),
              transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
              transformOrigin: "bottom center",
            }
          : {
              left: "50%",
              top: 168,
              transform: `translateX(-50%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
              transformOrigin: "top center",
            }
      }
    >
      <VideoToolbarActionButton
        active={activeMode === "clip"}
        icon={<Scissors className="h-[18px] w-[18px]" strokeWidth={2.1} />}
        label="剪辑"
        onClick={onToggleClip}
      />
      <VideoToolbarActionButton
        disabled
        icon={<SceneToolIcon kind="hd" />}
        label="高清"
        onClick={onHd}
      />
      <VideoToolbarActionButton
        active={activeMode === "analysis"}
        icon={<VideoAnalysisGlyph />}
        label="解析"
        onClick={onAnalyze}
      />
      <div className="h-9 w-px bg-white/8" />
      <button
        className="flex h-10 w-10 items-center justify-center rounded-[8px] text-white/84 transition hover:bg-white/8 hover:text-white"
        onClick={onDownload}
        type="button"
      >
        <Download className="h-[18px] w-[18px]" strokeWidth={2.1} />
      </button>
      <button
        className="flex h-10 w-10 items-center justify-center rounded-[8px] text-[24px] leading-none text-white/84 transition hover:bg-white/8 hover:text-white"
        onClick={onPreview}
        type="button"
      >
        ↗
      </button>
    </div>
  );
}

function VideoToolbarActionButton({
  active = false,
  disabled = false,
  icon,
  label,
  onClick,
}: {
  active?: boolean;
  disabled?: boolean;
  icon: ReactNode;
  label: string;
  onClick: () => void;
}) {
  return (
    <button
      aria-disabled={disabled}
      className={cn(
        "flex h-10 items-center gap-2 rounded-[10px] px-3 transition",
        disabled
          ? "cursor-not-allowed text-white/28"
          : active
            ? "bg-white/10 text-white ring-1 ring-[#76b3ff]"
            : "text-white/84 hover:bg-white/8 hover:text-white"
      )}
      onClick={() => {
        if (disabled) {
          onClick();
          return;
        }
        onClick();
      }}
      type="button"
    >
      <span className="flex h-5 w-5 items-center justify-center">{icon}</span>
      <span className="whitespace-nowrap text-[15px]">{label}</span>
    </button>
  );
}

function OfficialVideoMediaToolbar({
  archiveControl,
  activeMode,
  analysisLoading = false,
  anchor,
  audioSplitLoading = false,
  onAnalyze,
  onSlow,
  onAudioVideoSplit,
  onHdOption,
  onSubtitleErase,
  onToggleCrop,
  onToggleClip,
  onVoiceSplit,
}: {
  archiveControl?: ReactNode;
  activeMode: VideoToolbarMode;
  analysisLoading?: boolean;
  anchor?: PresetControlAnchor;
  audioSplitLoading?: boolean;
  onAnalyze: () => void;
  onSlow: (factor:number)=>void;
  onAudioVideoSplit: () => void;
  onHdOption: (option: string) => void;
  onSubtitleErase: (mode: SubtitleEraseMode) => void;
  onToggleCrop: () => void;
  onToggleClip: () => void;
  onVoiceSplit: (mode: Extract<VideoAudioSplitMode, "voice" | "background">) => void;
}) {
  const [menu, setMenu] = useState<VideoToolbarMenu>(null);

  return (
    <div
      className="pointer-events-auto absolute flex h-[58px] items-center gap-1 rounded-[14px] border border-white/8 bg-[#262626]/96 px-2 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
      data-canvas-overlay="true"
      style={
        anchor
          ? {
              left: anchor.centerX,
              top: anchor.topY - (24 * anchor.zoom + 10),
              transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
              transformOrigin: "bottom center",
            }
          : {
              left: "50%",
              top: 168,
              transform: `translateX(-50%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
              transformOrigin: "top center",
            }
      }
    >
      {archiveControl}
      <select aria-label="视频慢放" title="调整播放速度，不进行 AI 补帧" className="rounded bg-[#262626] p-2 text-sm" value="" onChange={e=>{if(e.target.value)onSlow(Number(e.target.value));}}><option value="">慢放</option>{[2,3,5].map(factor=><option key={factor} value={factor}>{factor} 倍慢放</option>)}</select>
      <OfficialVideoToolbarButton
        active={activeMode === "clip"}
        icon={<Scissors className="h-[18px] w-[18px]" strokeWidth={2.1} />}
        label="剪辑"
        onClick={() => {
          setMenu(null);
          onToggleClip();
        }}
      />
      <OfficialVideoToolbarButton
        active={activeMode === "crop"}
        icon={<SceneToolIcon kind="crop" />}
        label="裁剪"
        onClick={() => {
          setMenu(null);
          onToggleCrop();
        }}
      />
      <div className="relative">
        <OfficialVideoToolbarButton
          active={menu === "hd"}
          dropdown
          icon={<Sparkles className="h-[18px] w-[18px]" strokeWidth={2.1} />}
          label="高清"
          onClick={() => setMenu((current) => current === "hd" ? null : "hd")}
        />
        {menu === "hd" ? (
          <VideoHdSettingsPopover
            onSelect={(option) => {
              setMenu(null);
              onHdOption(option);
            }}
          />
        ) : null}
      </div>
      <OfficialVideoToolbarButton
        active={activeMode === "analysis" || analysisLoading}
        disabled={analysisLoading}
        icon={<VideoAnalysisGlyph />}
        label={analysisLoading ? "解析中" : "解析"}
        onClick={() => {
          setMenu(null);
          onAnalyze();
        }}
      />
      <div className="relative">
        <OfficialVideoToolbarButton
          active={menu === "subtitle" || activeMode === "subtitleErase"}
          dropdown
          icon={<Wand2 className="h-[18px] w-[18px]" strokeWidth={2.1} />}
          disabled
          label="去字幕（未接通）"
          onClick={() => setMenu((current) => current === "subtitle" ? null : "subtitle")}
        />
        {menu === "subtitle" ? (
          <VideoToolbarMenuPopover width={220}>
            <div className="px-2.5 pb-1.5 pt-1 text-[11px] leading-4 text-white/38">
              AI一键去除视频字幕，仅支持中英文字幕
            </div>
            <VideoToolbarMenuItem
              icon={<Wand2 className="h-4 w-4" strokeWidth={2.1} />}
              label="智能擦除"
              onClick={() => {
                setMenu(null);
                onSubtitleErase("smart");
              }}
            />
            <VideoToolbarMenuItem
              icon={<BoxSelect className="h-4 w-4" strokeWidth={2.1} />}
              label="框选擦除"
              onClick={() => {
                setMenu(null);
                onSubtitleErase("region");
              }}
            />
          </VideoToolbarMenuPopover>
        ) : null}
      </div>
      <div className="relative">
        <OfficialVideoToolbarButton
          active={menu === "audio" || audioSplitLoading}
          disabled={audioSplitLoading}
          dropdown
          icon={<Headphones className="h-[18px] w-[18px]" strokeWidth={2.1} />}
          label={audioSplitLoading ? "分离中" : "音频分离"}
          onClick={() => setMenu((current) => current === "audio" ? null : "audio")}
        />
        {menu === "audio" ? (
          <VideoToolbarMenuPopover width={168}>
            <VideoToolbarMenuItem
              description="仅保留人声，输出人声音轨"
              icon={<Mic className="h-4 w-4" strokeWidth={2.1} />}
              label="人声分离"
              onClick={() => {
                setMenu(null);
                onVoiceSplit("voice");
              }}
            />
            <VideoToolbarMenuItem
              description="仅保留背景音，输出背景音轨"
              icon={<Music2 className="h-4 w-4" strokeWidth={2.1} />}
              label="背景音分离"
              onClick={() => {
                setMenu(null);
                onVoiceSplit("background");
              }}
            />
            <VideoToolbarMenuItem
              description="分离内嵌音轨为独立音频节点"
              icon={<GitBranch className="h-4 w-4" strokeWidth={2.1} />}
              label="音视频分离"
              onClick={() => {
                setMenu(null);
                onAudioVideoSplit();
              }}
            />
          </VideoToolbarMenuPopover>
        ) : null}
      </div>
    </div>
  );
}

function OfficialVideoToolbarButton({
  active = false,
  disabled = false,
  dropdown = false,
  icon,
  label,
  onClick,
}: {
  active?: boolean;
  disabled?: boolean;
  dropdown?: boolean;
  icon: ReactNode;
  label: string;
  onClick: () => void;
}) {
  return (
    <button
      className={cn(
        "flex h-10 items-center gap-1.5 rounded-[10px] px-2.5 text-white/84 transition hover:bg-white/8 hover:text-white",
        active && "bg-white/10 text-white ring-1 ring-[#76b3ff]",
        disabled && "cursor-wait opacity-72 hover:bg-white/10 hover:text-white"
      )}
      disabled={disabled}
      onClick={onClick}
      type="button"
    >
      <span className="flex h-5 w-5 items-center justify-center">{icon}</span>
      <span className="whitespace-nowrap text-[15px]">{label}</span>
      {dropdown ? <ChevronDown className="h-3.5 w-3.5 text-white/46" /> : null}
    </button>
  );
}

function VideoHdSettingsPopover({ onSelect }: { onSelect: (option: string) => void }) {
  return (
    <div className="absolute left-0 top-[calc(100%+10px)] z-50 w-[267px] rounded-[12px] border border-white/10 bg-[#202020]/98 p-2 text-white shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px]">
      <button
        className="mb-2 flex h-8 w-full items-center justify-between rounded-[8px] border border-white/10 bg-white/[0.03] px-3 text-[13px] text-white/82 hover:bg-white/8"
        onClick={() => onSelect("Real-ESRGAN")}
        type="button"
      >
        <span>Real-ESRGAN</span>
        <ChevronDown className="h-3.5 w-3.5 text-white/46" />
      </button>
      <div className="mb-2 flex gap-1">
        {["1080P", "2K", "4K"].map((option, index) => (
          <button
            className={cn(
              "flex h-8 flex-1 items-center justify-center rounded-[8px] border text-[13px]",
              index === 0 ? "border-white/26 bg-white/12 text-white" : "border-white/10 bg-white/[0.03] text-white/66 hover:bg-white/8"
            )}
            key={option}
            onClick={() => onSelect(option)}
            type="button"
          >
            {option}
          </button>
        ))}
      </div>
      <button
        className="mb-2 flex h-8 w-full items-center justify-between rounded-[8px] border border-white/10 bg-white/[0.03] px-3 text-[13px] text-white/82 hover:bg-white/8"
        onClick={() => onSelect("不补帧")}
        type="button"
      >
        <span>不补帧</span>
        <ChevronDown className="h-3.5 w-3.5 text-white/46" />
      </button>
      <button
        className="flex h-8 w-full items-center justify-between rounded-[8px] border border-white/10 bg-white/[0.03] px-3 text-[13px] text-white/82 hover:bg-white/8"
        onClick={() => onSelect("1x")}
        type="button"
      >
        <span>1x</span>
        <ChevronDown className="h-3.5 w-3.5 text-white/46" />
      </button>
    </div>
  );
}

function VideoToolbarMenuPopover({
  children,
  width,
}: {
  children: ReactNode;
  width: number;
}) {
  return (
    <div
      className="absolute left-0 top-[calc(100%+10px)] z-50 overflow-visible rounded-[10px] border border-white/10 bg-[#202020]/98 p-1.5 text-white shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px]"
      style={{ width }}
    >
      {children}
    </div>
  );
}

function VideoToolbarSubmenu({
  children,
  width,
}: {
  children: ReactNode;
  width: number;
}) {
  return (
    <div
      className="invisible absolute left-[calc(100%+8px)] top-0 z-50 rounded-[10px] border border-white/10 bg-[#202020]/98 p-1.5 text-white opacity-0 shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px] transition group-hover:visible group-hover:opacity-100"
      style={{ width }}
    >
      {children}
    </div>
  );
}

function VideoToolbarMenuItem({
  description,
  icon,
  label,
  onClick,
}: {
  description?: string;
  icon: ReactNode;
  label: string;
  onClick: () => void;
}) {
  return (
    <button
      className="flex min-h-9 w-full items-center gap-2 rounded-[8px] px-2.5 py-2 text-left text-[13px] text-white/82 transition hover:bg-white/8 hover:text-white"
      onClick={(event) => {
        event.stopPropagation();
        onClick();
      }}
      onPointerDown={(event) => event.stopPropagation()}
      title={description}
      type="button"
    >
      <span className="flex h-5 w-5 shrink-0 items-center justify-center text-white/46">{icon}</span>
      <span className="min-w-0">
        <span className="block truncate">{label}</span>
        {description ? <span className="mt-0.5 block truncate text-[11px] text-white/34">{description}</span> : null}
      </span>
    </button>
  );
}

function VideoInlineActionBar({
  actionLabel,
  anchor,
  applyBusyLabel,
  applyIcon = "check",
  applyLabel,
  applyLoading = false,
  costLabel,
  onApply,
  onClose,
  title,
}: {
  actionLabel: string;
  anchor?: PresetControlAnchor;
  applyBusyLabel?: string;
  applyIcon?: "check" | "upload";
  applyLabel: string;
  applyLoading?: boolean;
  costLabel?: string;
  onApply: () => void;
  onClose: () => void;
  title: string;
}) {
  const ApplyIcon = applyIcon === "upload" ? Upload : Check;
  const buttonLabel = applyLoading && applyBusyLabel ? applyBusyLabel : applyLabel;

  return (
    <div
      className="pointer-events-auto absolute overflow-visible"
      style={
        anchor
          ? {
              left: anchor.centerX,
              top: anchor.bottomY + 12,
              transform: "translateX(-50%)",
            }
          : {
              left: "50%",
              top: 240,
              transform: "translateX(-50%)",
            }
      }
    >
      <div className="flex h-[49px] w-max items-center gap-3 rounded-[12px] border border-white/10 bg-[#202020]/98 px-2 py-2 text-white shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px]">
        <button
          aria-label={title}
          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-white/46 transition hover:bg-white/8 hover:text-white"
          onClick={onClose}
          type="button"
        >
          <X className="h-4 w-4" />
        </button>
        <div className="flex h-8 shrink-0 items-center gap-1 px-2 text-[13px] text-white/86">
          <span className="whitespace-nowrap">{actionLabel}</span>
        </div>
        {costLabel ? (
          <span className="flex min-w-8 shrink-0 items-center justify-center gap-0.5 text-[12px] text-white/46">
            <LightningGlyph />
            {costLabel}
          </span>
        ) : null}
        <button
          aria-label={buttonLabel}
          className={cn(
            "flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] bg-white text-black transition hover:bg-white/90",
            applyLoading && "cursor-default bg-white/88 hover:bg-white/88"
          )}
          disabled={applyLoading}
          onClick={onApply}
          title={buttonLabel}
          type="button"
        >
          {applyLoading ? (
            <Loader2 className="h-4 w-4 animate-spin" strokeWidth={2.4} />
          ) : (
            <ApplyIcon className="h-4 w-4" strokeWidth={2.4} />
          )}
        </button>
      </div>
    </div>
  );
}

function VideoCropSelectionOverlay({anchor,node,onChange}:{anchor:PresetControlAnchor;node:CloneNode;onChange:(rect:GridCropRect)=>void}) {
  const box=getVideoCardOverlayRect(anchor,node);
  const saved=(node.draftValues?.cropRect || VIDEO_CROP_RECT) as GridCropRect;
  const [drawing,setDrawing]=useState<{x:number;y:number;endX:number;endY:number}|null>(null);
  const rect=drawing ? {x:Math.min(drawing.x,drawing.endX),y:Math.min(drawing.y,drawing.endY),width:Math.abs(drawing.endX-drawing.x),height:Math.abs(drawing.endY-drawing.y)} : saved;
  const point=(event:ReactPointerEvent<HTMLDivElement>)=>({x:clampUnit((event.clientX-box.left)/box.width),y:clampUnit((event.clientY-box.top)/box.height)});
  return <div className="pointer-events-auto absolute z-[31] cursor-crosshair" data-canvas-overlay="true" aria-label="拖动框选视频裁剪区域" style={{left:box.left,top:box.top,width:box.width,height:box.height}}
    onPointerDown={event=>{event.stopPropagation();event.currentTarget.setPointerCapture(event.pointerId);const p=point(event);setDrawing({...p,endX:p.x,endY:p.y});}}
    onPointerMove={event=>{if(!drawing)return;event.stopPropagation();const p=point(event);setDrawing({...drawing,endX:p.x,endY:p.y});}}
    onPointerUp={event=>{event.stopPropagation();if(drawing&&rect.width>.02&&rect.height>.02)onChange(rect);setDrawing(null);event.currentTarget.releasePointerCapture(event.pointerId);}}
    onPointerCancel={()=>setDrawing(null)}>
    <div className="pointer-events-none absolute rounded border border-white/80 shadow-[0_0_0_9999px_rgba(0,0,0,0.34)]" style={{left:`${rect.x*100}%`,top:`${rect.y*100}%`,width:`${rect.width*100}%`,height:`${rect.height*100}%`}}>
      <span className="absolute left-2 top-2 whitespace-nowrap rounded bg-black/60 px-1.5 py-0.5 text-[10px] text-white/80">拖动框选裁剪区域</span>
      <span className="absolute inset-x-0 top-1/3 border-t border-white/30"/><span className="absolute inset-x-0 top-2/3 border-t border-white/30"/>
      <span className="absolute inset-y-0 left-1/3 border-l border-white/30"/><span className="absolute inset-y-0 left-2/3 border-l border-white/30"/>
    </div>
  </div>;
}

function clampUnit(value: number) {
  return Math.min(1, Math.max(0, value));
}

function getVideoCardOverlayRect(anchor: PresetControlAnchor, node: CloneNode) {
  const nodeWidth = Math.max(1, node.width * anchor.zoom);
  const nodeHeight = Math.max(1, node.height * anchor.zoom);
  const cardTop = anchor.topY + 32 * anchor.zoom;
  const cardHeight = Math.max(1, nodeHeight - 32 * anchor.zoom);
  return {
    height: cardHeight,
    left: anchor.centerX - nodeWidth / 2,
    top: cardTop,
    width: nodeWidth,
  };
}

function normalizeSubtitleEraseRegion(
  startX: number,
  startY: number,
  currentX: number,
  currentY: number,
  id: string
): SubtitleEraseRegion {
  const x = clampUnit(Math.min(startX, currentX));
  const y = clampUnit(Math.min(startY, currentY));
  const maxX = clampUnit(Math.max(startX, currentX));
  const maxY = clampUnit(Math.max(startY, currentY));
  return {
    height: Math.max(0, maxY - y),
    id,
    width: Math.max(0, maxX - x),
    x,
    y,
  };
}

function VideoSubtitleEraseRegionOverlay({
  anchor,
  node,
  onAddRegion,
  regions,
}: {
  anchor: PresetControlAnchor;
  node: CloneNode;
  onAddRegion: (region: SubtitleEraseRegion) => void;
  regions: SubtitleEraseRegion[];
}) {
  const [draftRegion, setDraftRegion] = useState<{
    currentX: number;
    currentY: number;
    pointerId: number;
    startX: number;
    startY: number;
  } | null>(null);
  const cardRect = getVideoCardOverlayRect(anchor, node);
  const toNormalizedPoint = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => ({
      x: clampUnit((event.clientX - cardRect.left) / cardRect.width),
      y: clampUnit((event.clientY - cardRect.top) / cardRect.height),
    }),
    [cardRect.height, cardRect.left, cardRect.top, cardRect.width]
  );
  const renderedRegions = draftRegion
    ? [
        ...regions,
        normalizeSubtitleEraseRegion(
          draftRegion.startX,
          draftRegion.startY,
          draftRegion.currentX,
          draftRegion.currentY,
          "draft"
        ),
      ]
    : regions;
  const handlePoints = [
    "left-0 top-0 -translate-x-1/2 -translate-y-1/2 cursor-nw-resize",
    "right-0 top-0 translate-x-1/2 -translate-y-1/2 cursor-ne-resize",
    "right-0 bottom-0 translate-x-1/2 translate-y-1/2 cursor-se-resize",
    "left-0 bottom-0 -translate-x-1/2 translate-y-1/2 cursor-sw-resize",
  ];

  return (
    <div className="pointer-events-none absolute inset-0 z-[31]" data-video-subtitle-region-overlay="true">
      <div
        className="pointer-events-auto absolute cursor-crosshair overflow-hidden rounded-[12px]"
        onPointerDown={(event) => {
          if (event.button !== 0) return;
          event.preventDefault();
          event.stopPropagation();
          const point = toNormalizedPoint(event);
          event.currentTarget.setPointerCapture(event.pointerId);
          setDraftRegion({
            currentX: point.x,
            currentY: point.y,
            pointerId: event.pointerId,
            startX: point.x,
            startY: point.y,
          });
        }}
        onPointerMove={(event) => {
          if (!draftRegion || draftRegion.pointerId !== event.pointerId) return;
          event.preventDefault();
          event.stopPropagation();
          const point = toNormalizedPoint(event);
          setDraftRegion((current) =>
            current && current.pointerId === event.pointerId
              ? { ...current, currentX: point.x, currentY: point.y }
              : current
          );
        }}
        onPointerUp={(event) => {
          if (!draftRegion || draftRegion.pointerId !== event.pointerId) return;
          event.preventDefault();
          event.stopPropagation();
          const point = toNormalizedPoint(event);
          const region = normalizeSubtitleEraseRegion(
            draftRegion.startX,
            draftRegion.startY,
            point.x,
            point.y,
            makeId("subtitle-region")
          );
          setDraftRegion(null);
          if (region.width >= 0.015 && region.height >= 0.015) {
            onAddRegion(region);
          }
        }}
        style={{
          height: cardRect.height,
          left: cardRect.left,
          top: cardRect.top,
          width: cardRect.width,
        }}
      >
        {renderedRegions.map((region) => (
          <div
            className="absolute border border-[#0690ae] bg-[#07b8dd]/15"
            key={region.id}
            style={{
              height: `${region.height * 100}%`,
              left: `${region.x * 100}%`,
              top: `${region.y * 100}%`,
              width: `${region.width * 100}%`,
            }}
          >
            {handlePoints.map((className) => (
              <span
                className={cn("absolute h-1.5 w-1.5 rounded-full bg-[#09caf5]", className)}
                key={className}
              />
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

function VideoSubtitleEraseRegionActionBar({
  anchor,
  canRedo,
  canReset,
  canUndo,
  costLabel,
  onApply,
  onClose,
  onRedo,
  onReset,
  onUndo,
  regionCount,
}: {
  anchor?: PresetControlAnchor;
  canRedo: boolean;
  canReset: boolean;
  canUndo: boolean;
  costLabel: string;
  onApply: () => void;
  onClose: () => void;
  onRedo: () => void;
  onReset: () => void;
  onUndo: () => void;
  regionCount: number;
}) {
  return (
    <div
      className="pointer-events-auto absolute overflow-visible"
      onPointerDown={(event) => event.stopPropagation()}
      style={
        anchor
          ? {
              left: anchor.centerX,
              top: anchor.bottomY + 12,
              transform: "translateX(-50%)",
            }
          : {
              left: "50%",
              top: 240,
              transform: "translateX(-50%)",
            }
      }
    >
      <div className="flex h-[49px] w-max items-center gap-3 rounded-[12px] border border-white/10 bg-[#202020]/98 px-2 py-2 text-white shadow-[0_18px_54px_rgba(0,0,0,0.48)] backdrop-blur-[16px]">
        <button
          aria-label="关闭去字幕生成器"
          className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-white/46 transition hover:bg-white/8 hover:text-white"
          onClick={onClose}
          type="button"
        >
          <X className="h-4 w-4" />
        </button>
        <div className="h-6 w-px shrink-0 bg-white/10" />
        <div className="flex h-8 shrink-0 items-center gap-1 px-2 text-[13px] text-white/86">
          <span className="whitespace-nowrap">框选擦除</span>
          <span className="group/help relative flex h-4 w-4 cursor-help items-center justify-center text-white/42 transition hover:text-white/80">
            <HelpCircle className="h-3.5 w-3.5" />
            <span className="pointer-events-none absolute bottom-[calc(100%+10px)] left-1/2 hidden w-[253px] -translate-x-1/2 rounded-[8px] border border-white/10 bg-[#202020]/98 px-3 py-2 text-left text-[12px] leading-5 text-white/72 shadow-[0_14px_40px_rgba(0,0,0,0.42)] group-hover/help:block">
              <span className="mb-1 block text-white/88">使用方法</span>
              <span className="block">在画面上拖拽鼠标,框选要擦除的区域</span>
              <span className="block">支持框选多个区域,所有框内文字将被擦除</span>
              <span className="block">擦除作用于整段视频,不仅是当前帧</span>
            </span>
          </span>
        </div>
        <div className="h-6 w-px shrink-0 bg-white/10" />
        <div className="flex items-center gap-1">
          <button
            aria-label="框选区域"
            className="flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] bg-white/10 text-white transition"
            type="button"
          >
            <BoxSelect className="h-4 w-4" />
          </button>
          <VideoRegionBarIconButton ariaLabel="撤销" disabled={!canUndo} icon={<Undo2 className="h-4 w-4" />} onClick={onUndo} />
          <VideoRegionBarIconButton ariaLabel="重做" disabled={!canRedo} icon={<Redo2 className="h-4 w-4" />} onClick={onRedo} />
          <VideoRegionBarIconButton ariaLabel="重置" disabled={!canReset} icon={<RotateCcw className="h-4 w-4" />} onClick={onReset} />
        </div>
        <span className="flex min-w-8 shrink-0 items-center justify-center gap-0.5 text-[12px] text-white/46">
          <LightningGlyph />
          {costLabel}
        </span>
        <button
          aria-label="生成擦除"
          className={cn(
            "flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] bg-white text-black transition hover:bg-white/90",
            regionCount === 0 && "cursor-not-allowed bg-white/34 text-black/40 hover:bg-white/34"
          )}
          disabled={regionCount === 0}
          onClick={onApply}
          title="生成擦除"
          type="button"
        >
          <Upload className="h-3.5 w-3.5" strokeWidth={2.4} />
        </button>
      </div>
    </div>
  );
}

function VideoRegionBarIconButton({
  ariaLabel,
  disabled,
  icon,
  onClick,
}: {
  ariaLabel: string;
  disabled: boolean;
  icon: ReactNode;
  onClick: () => void;
}) {
  return (
    <button
      aria-label={ariaLabel}
      className={cn(
        "flex h-8 w-8 shrink-0 items-center justify-center rounded-[8px] text-white/46 transition hover:bg-white/8 hover:text-white",
        disabled && "cursor-not-allowed text-white/18 hover:bg-transparent hover:text-white/18"
      )}
      disabled={disabled}
      onClick={onClick}
      type="button"
    >
      {icon}
    </button>
  );
}

function VideoAnalysisGlyph() {
  return (
    <svg aria-hidden="true" className="h-[18px] w-[18px]" fill="none" viewBox="0 0 20 20">
      <rect height="16" rx="3" stroke="currentColor" strokeWidth="1.8" width="12" x="4" y="2" />
      <path d="M8 5.5h4M8 9h4M8 12.5h4" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
    </svg>
  );
}

function VideoSubtitleErasePendingCanvasNode({
  node,
  onCancel,
  selected,
}: {
  node: CloneNode;
  onCancel: () => void;
  selected: boolean;
}) {
  const progress = getDraftNumber(node, "generationProgress", 0);
  const progressLabel = progress > 2 ? `生成中 ${Math.round(progress)}%...` : "生成中...";

  return (
    <div className="h-full w-full" data-video-subtitle-erase-node="true">
      <div className="mb-[10px] flex h-7 items-center gap-2 text-[14px] font-semibold leading-none text-white/44">
        <Wand2 className="size-4" />
        <span className="truncate">{node.title}</span>
      </div>
      <div
        className={cn(
          "relative h-[calc(100%-38px)] overflow-hidden rounded-[8px] border border-white/8 bg-[#252525] shadow-[0_16px_38px_rgba(0,0,0,0.24)]",
          selected && "outline outline-1 outline-white/22"
        )}
      >
        <div className="absolute inset-x-0 top-[72px] flex justify-center text-white/18">
          <span className="flex h-20 w-20 items-center justify-center rounded-[8px] bg-white/18 text-white/54">
            <Loader2 className="h-10 w-10 animate-spin" />
          </span>
        </div>
        <div className="absolute inset-x-0 top-[176px] text-center text-[13px] text-white/56">
          {progressLabel}
        </div>
        <button
          className="absolute bottom-5 left-1/2 h-9 -translate-x-1/2 rounded-[8px] border border-white/10 bg-white/8 px-5 text-[13px] text-white/68 transition hover:bg-white/12 hover:text-white"
          onClick={(event) => {
            event.stopPropagation();
            onCancel();
          }}
          onPointerDown={(event) => event.stopPropagation()}
          type="button"
        >
          取消
        </button>
      </div>
    </div>
  );
}

function VideoHdUpscaleCanvasNode({
  node,
  onGenerate,
  selected,
}: {
  node: CloneNode;
  onGenerate: () => void;
  selected: boolean;
}) {
  const [previewError,setPreviewError]=useState(false);
  const {data:upscaleCapability}=useSWR<{available:boolean;message?:string}>("/api/canvas/video-upscale/capabilities",fetcher,{refreshInterval:30000});
  const generationStatus = getDraftString(node, "generationStatus");
  const isGenerating = generationStatus === "pending";
  const generated = Boolean(node.draftValues?.generated) && !isGenerating;
  const mediaUrl = getNodeMediaUrl(node);
  useEffect(()=>setPreviewError(false),[mediaUrl]);
  const progress = getDraftNumber(node, "generationProgress", 0);
  const resolution = getDraftString(node, "hdResolution") || "1080P";
  const meta=node.draftValues?.videoMeta as any;
  const outputSizeLabel = meta?.width&&meta?.height?`${meta.width} × ${meta.height}`:getDraftString(node, "outputSizeLabel") || resolution;

  return (
    <div className="h-full w-full" data-video-hd-node="true">
      <div className="mb-[10px] flex h-7 items-center gap-2 text-[14px] font-semibold leading-none text-white/44">
        <Sparkles className="size-4" />
        <span>{node.title}</span>
      </div>
      <div
        className={cn(
          "relative h-[calc(100%-38px)] overflow-hidden rounded-[8px] border border-white/8 bg-[#252525] shadow-[0_16px_38px_rgba(0,0,0,0.24)]",
          selected && "outline outline-1 outline-white/22"
        )}
      >
        {generated && mediaUrl ? (
          <div className="flex h-full flex-col">
            <div className="flex h-9 items-center justify-between border-white/8 border-b px-3 text-[12px] text-white/46">
              <span>生成结果</span>
              <span>{outputSizeLabel}</span>
            </div>
            <div className="relative min-h-0 flex-1 bg-black">
              <video
                controls
                className="h-full w-full object-contain"
                loop
                muted
                playsInline
                src={mediaUrl}
                onError={()=>setPreviewError(true)}
              />
              {previewError&&<div className="absolute inset-0 flex flex-col items-center justify-center gap-3 bg-[#202020] px-5 text-center text-sm text-white/70"><span>预览加载失败，高清结果已保存</span><a href={mediaUrl} target="_blank" rel="noreferrer" className="rounded-lg bg-white/10 px-4 py-2 text-white">打开或下载视频</a></div>}
              <span className="absolute left-3 top-3 rounded-[6px] bg-black/62 px-2 py-1 text-[11px] text-white/76">
                {resolution}
              </span>
            </div>
          </div>
        ) : (
          <>
            <div className="absolute inset-x-0 top-[74px] flex justify-center text-white/18">
              <span className="flex h-20 w-20 items-center justify-center rounded-[8px] bg-white/18 text-[#242424]">
                {isGenerating ? (
                  <Loader2 className="h-10 w-10 animate-spin text-white/54" />
                ) : (
                  <Play className="ml-1 h-11 w-11 fill-current" strokeWidth={0} />
                )}
              </span>
            </div>
            <div className="absolute inset-x-0 top-[180px] text-center text-[16px] text-white/42">
              {getDraftString(node,"generationError")||getDraftString(node,"pendingLabel")||upscaleCapability?.message||`${resolution} · AI 超分 · 保留音频与帧率`}
            </div>
            <div className="absolute inset-x-0 bottom-9 flex justify-center">
              <button
                className={cn(
                  "flex h-10 items-center gap-2 rounded-[10px] bg-white px-4 text-[14px] font-semibold text-black transition hover:bg-white/90",
                  isGenerating && "cursor-wait opacity-70"
                )}
                disabled={isGenerating||upscaleCapability?.available===false}
                onClick={onGenerate}
                onPointerDown={(event) => event.stopPropagation()}
                type="button"
              >
                {isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
                {isGenerating ? "生成中" : upscaleCapability?.available===false ? "服务未就绪" : "生成高清视频"}
              </button>
            </div>
            {isGenerating ? (
              <div className="absolute bottom-4 left-8 right-8 h-1 overflow-hidden rounded-full bg-white/10">
                <span className="block h-full rounded-full bg-white/80" style={{ width: `${Math.max(8, Math.min(98, progress))}%` }} />
              </div>
            ) : null}
          </>
        )}
      </div>
    </div>
  );
}

function VideoStoryCanvasNode({ node, selected }: { node: CloneNode; selected: boolean }) {
  const rows = getVideoStoryRows(node);
  const previewUrl = getDraftString(node, "keyframeUrl");
  const summary = getDraftString(node, "summary");
  const error = getDraftString(node, "generationError") || getDraftString(node, "error");
  const pending = getDraftString(node, "generationStatus") === "pending";
  const headers = [
    "镜号",
    "开始时间",
    "结束时间",
    "时长",
    "画面描述",
    "叙事内容",
    "景别",
    "摄影机角度",
    "摄影机运动",
    "焦距与景深",
    "光线",
    "背景音乐",
    "人声/音效",
    "图像生成提示词",
    "视频运动提示词",
    "关键帧",
  ];

  return (
    <div
      className={cn(
        "flex h-full w-full flex-col overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] text-white shadow-[0_22px_64px_rgba(0,0,0,0.46)]",
        selected && "border-[#8b96ff] ring-2 ring-[#8b96ff]/36",
      )}
      data-video-story-node="true"
    >
      <div className="flex h-11 items-center justify-between gap-3 border-b border-white/8 bg-[#242424] px-4">
        <div className="flex min-w-0 items-center gap-2 text-[16px] font-semibold text-white/86">
          <VideoAnalysisGlyph />
          <span className="truncate">视频故事</span>
        </div>
        <span className="shrink-0 rounded-[6px] border border-white/10 px-2 py-0.5 text-[11px] text-white/40">
          {rows.length} 镜
        </span>
      </div>
      {summary || error || pending ? (
        <div className="border-b border-white/8 px-4 py-2 text-[12px] leading-5 text-white/48">
          {error || (pending ? "正在解析视频故事，可离开页面，返回后会恢复任务状态。" : summary)}
        </div>
      ) : null}
      <div className="min-h-0 flex-1 overflow-auto">
        <div className="min-w-[2470px]">
          <div className="grid grid-cols-[54px_72px_72px_60px_260px_260px_96px_96px_160px_120px_180px_180px_180px_280px_280px_120px] border-b border-white/8 bg-white/[0.04] text-[12px] text-white/42">
            {headers.map((header) => (
              <div className="border-r border-white/8 px-3 py-2 last:border-r-0" key={header}>
                {header}
              </div>
            ))}
          </div>
          {rows.length > 0 ? (
            rows.map((row) => {
              const cells = [
                row.shot,
                row.startTime,
                row.endTime,
                row.duration,
                row.sceneDescription,
                row.narrative,
                row.shotSize,
                row.cameraAngle,
                row.cameraMovement,
                row.focusDepth,
                row.lighting,
                row.backgroundMusic,
                row.voiceAndSfx,
                row.imagePrompt,
                row.motionPrompt,
              ];
              return (
                <div
                  className="grid grid-cols-[54px_72px_72px_60px_260px_260px_96px_96px_160px_120px_180px_180px_180px_280px_280px_120px] border-b border-white/6 text-[13px] leading-6 text-white/74 last:border-b-0"
                  key={row.id}
                >
                  {cells.map((cell, index) => (
                    <div
                      className="border-r border-white/6 px-3 py-3 last:border-r-0"
                      key={`${row.id}-${index}`}
                    >
                      <span className="line-clamp-5 whitespace-pre-wrap">{cell || "-"}</span>
                    </div>
                  ))}
                  <div className="flex items-center justify-center px-3 py-3">
                    {row.keyframeUrl || previewUrl ? (
                      <img
                        alt=""
                        className="h-[58px] w-[88px] rounded-[6px] object-cover"
                        draggable={false}
                        src={row.keyframeUrl || previewUrl}
                      />
                    ) : (
                      <span className="text-[12px] text-white/28">-</span>
                    )}
                  </div>
                </div>
              );
            })
          ) : (
            <div className="flex h-[260px] items-center justify-center text-[13px] text-white/32">
              {pending ? "正在解析…" : "暂无视频故事"}
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function VideoClipEditorBar({
  anchor,
  busy = false,
  clipRange,
  durationSeconds,
  onApply,
  onChange,
  onExtractAudio,
  onReset,
  previewUrl,
  title,
}: {
  anchor?: PresetControlAnchor;
  busy?: boolean;
  clipRange: VideoClipRange;
  durationSeconds: number;
  onApply: () => void;
  onChange: (range: VideoClipRange) => void;
  onExtractAudio: () => void;
  onReset: () => void;
  previewUrl: string;
  title: string;
}) {
  const trackRef = useRef<HTMLDivElement | null>(null);
  const [dragHandle, setDragHandle] = useState<"start" | "end" | null>(null);
  const frames = useMemo(
    () => Array.from({ length: VIDEO_CLIP_FRAME_COUNT }).map((_, index) => ({ id: `${title}-${index}`, url: previewUrl })),
    [previewUrl, title]
  );

  useEffect(() => {
    if (!dragHandle || busy) return;
    const handlePointerMove = (event: PointerEvent) => {
      const rect = trackRef.current?.getBoundingClientRect();
      if (!rect || rect.width <= 0) return;
      const ratio = Math.max(0, Math.min((event.clientX - rect.left) / rect.width, 1));
      if (dragHandle === "start") {
        onChange({
          end: clipRange.end,
          start: Math.min(ratio, clipRange.end - 0.04),
        });
        return;
      }
      onChange({
        end: Math.max(ratio, clipRange.start + 0.04),
        start: clipRange.start,
      });
    };
    const handlePointerUp = () => setDragHandle(null);
    window.addEventListener("pointermove", handlePointerMove);
    window.addEventListener("pointerup", handlePointerUp);
    return () => {
      window.removeEventListener("pointermove", handlePointerMove);
      window.removeEventListener("pointerup", handlePointerUp);
    };
  }, [busy, clipRange.end, clipRange.start, dragHandle, onChange]);

  const selectionWidth = Math.max(clipRange.end - clipRange.start, 0.04);
  const durationLabel = formatClipDurationLabel(durationSeconds * selectionWidth);

  return (
    <div
      className="pointer-events-auto absolute overflow-visible"
      style={
        anchor
          ? {
              left: anchor.centerX,
              top: anchor.bottomY + 12,
              transform: "translateX(-50%)",
              width: 920,
            }
          : {
              bottom: 54,
              left: "50%",
              transform: "translateX(-50%)",
              width: 920,
            }
      }
    >
      <div className="relative flex h-[68px] items-center gap-4 rounded-[16px] border border-white/8 bg-[#262626]/98 px-5 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]">
        <div className="min-w-0 flex-1">
          <div
            className="relative h-[42px] overflow-hidden rounded-[12px] border border-white/8 bg-black/24"
            onPointerDown={(event) => event.stopPropagation()}
            ref={trackRef}
          >
            <div className="absolute inset-0 flex">
              {frames.map((frame, index) => (
                <div className="relative h-full flex-1 border-r border-white/6 last:border-r-0" key={frame.id}>
                  {frame.url ? <img alt="" className="h-full w-full object-cover opacity-82" draggable={false} src={frame.url} /> : null}
                  <span className="absolute inset-0 bg-black/18" />
                  {index !== frames.length - 1 ? <span className="absolute right-0 top-0 h-full w-px bg-white/8" /> : null}
                </div>
              ))}
            </div>
            <div
              className="absolute bottom-[3px] top-[3px] rounded-[10px] border border-white/88 bg-white/12 shadow-[0_0_0_1px_rgba(87,168,255,0.75)]"
              style={{ left: `${clipRange.start * 100}%`, width: `${selectionWidth * 100}%` }}
            >
              <button
                className="absolute left-[-8px] top-1/2 h-7 w-4 -translate-y-1/2 rounded-full bg-white shadow-[0_6px_18px_rgba(0,0,0,0.34)]"
                disabled={busy}
                onPointerDown={(event) => {
                  event.stopPropagation();
                  setDragHandle("start");
                }}
                type="button"
              />
              <button
                className="absolute right-[-8px] top-1/2 h-7 w-4 -translate-y-1/2 rounded-full bg-white shadow-[0_6px_18px_rgba(0,0,0,0.34)]"
                disabled={busy}
                onPointerDown={(event) => {
                  event.stopPropagation();
                  setDragHandle("end");
                }}
                type="button"
              />
              <span className="absolute left-1/2 top-1/2 flex h-7 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-[10px] bg-black/72 px-3 text-[14px] font-semibold text-white">
                {durationLabel}
              </span>
            </div>
          </div>
        </div>
        <button
          className="flex h-10 w-10 items-center justify-center rounded-[10px] text-white/44 transition hover:bg-white/8 hover:text-white/76"
          aria-label="提取音轨"
          disabled={busy}
          onClick={onExtractAudio}
          title="提取音轨"
          type="button"
        >
          <Music2 className="h-[18px] w-[18px]" strokeWidth={2} />
        </button>
        <button
          className="flex h-10 w-10 items-center justify-center rounded-[10px] text-white/74 transition hover:bg-white/8 hover:text-white"
          disabled={busy}
          aria-label="重置剪辑范围"
          onClick={onReset}
          type="button"
        >
          <RotateCcw className="h-[18px] w-[18px]" strokeWidth={2} />
        </button>
        <button
          className="flex h-11 w-11 items-center justify-center rounded-full bg-white text-black shadow-[0_10px_24px_rgba(255,255,255,0.18)] transition hover:bg-white/90"
          disabled={busy}
          aria-label={busy ? "正在导出剪辑" : "导出所选片段"}
          title={busy ? "正在导出剪辑" : "导出所选片段"}
          onClick={onApply}
          type="button"
        >
          {busy ? <Loader2 className="h-5 w-5 animate-spin" /> : <Check className="h-[20px] w-[20px]" strokeWidth={2.5} />}
        </button>
      </div>
    </div>
  );
}

function VideoAnalysisFloatingPanel({
  anchor,
  analysisState,
  node,
  onClose,
}: {
  anchor?: PresetControlAnchor;
  analysisState: VideoAnalysisState;
  node: CloneNode;
  onClose: () => void;
}) {
  const previewUrl = getVideoNodePreviewUrl(node) || getNodeMediaUrl(node) || "";
  const rows = analysisState.rows;
  const floatingLeft =
    anchor
      ? Math.max(
          24,
          Math.min(
            typeof window !== "undefined" ? window.innerWidth - 884 : anchor.centerX + 380,
            anchor.centerX + 380
          )
        )
      : undefined;

  return (
    <div
      className="pointer-events-auto absolute overflow-hidden rounded-[14px] border border-white/8 bg-[#202020]/98 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)] backdrop-blur-[12px]"
      style={
        anchor
          ? {
              height: 378,
              left: floatingLeft,
              top: anchor.topY + 18,
              width: 860,
            }
          : {
              height: 378,
              left: "50%",
              top: 240,
              transform: "translateX(-50%)",
              width: 860,
            }
      }
    >
      <div className="flex h-11 items-center justify-between border-b border-white/8 px-4">
        <div className="flex items-center gap-2 text-[16px] font-semibold text-white/86">
          <VideoAnalysisGlyph />
          视频故事
        </div>
        <button className="rounded-[8px] p-1 text-white/38 transition hover:bg-white/8 hover:text-white/78" onClick={onClose} type="button">
          <X className="h-4 w-4" />
        </button>
      </div>
      <div className="px-4 py-3 text-[13px] text-white/56">{analysisState.summary}</div>
      {analysisState.error ? (
        <div className="mx-4 mb-3 rounded-[10px] border border-[#ff8b8b]/14 bg-[#ff8b8b]/8 px-3 py-2 text-[12px] text-[#ffb3b3]">
          {analysisState.error}
        </div>
      ) : null}
      <div className="h-[calc(100%-84px)] overflow-auto px-3 pb-3">
        <div className="min-w-[860px] overflow-hidden rounded-[10px] border border-white/8 bg-[#171717]">
          <div className="grid grid-cols-[1.2fr_1fr_0.9fr_1.3fr_1.3fr_108px] border-b border-white/8 bg-white/5 text-[12px] text-white/38">
            {["镜头描述", "背景音乐", "人声/音效", "图像生成提示词", "视频运动提示词", "关键帧"].map((item) => (
              <div className="border-r border-white/8 px-3 py-2 last:border-r-0" key={item}>{item}</div>
            ))}
          </div>
          {analysisState.status === "loading" && rows.length === 0 ? (
            Array.from({ length: 2 }).map((_, index) => (
              <div className="grid grid-cols-[1.2fr_1fr_0.9fr_1.3fr_1.3fr_108px] border-b border-white/6 last:border-b-0" key={`video-analysis-loading-${index}`}>
                {Array.from({ length: 6 }).map((_, cell) => (
                  <div className="border-r border-white/6 px-3 py-3 last:border-r-0" key={`video-analysis-loading-${index}-${cell}`}>
                    <div className="h-3 rounded-full bg-white/8" />
                    <div className="mt-2 h-3 w-4/5 rounded-full bg-white/6" />
                  </div>
                ))}
              </div>
            ))
          ) : rows.length > 0 ? (
            rows.map((row) => (
              <div className="grid grid-cols-[1.2fr_1fr_0.9fr_1.3fr_1.3fr_108px] border-b border-white/6 last:border-b-0" key={row.id}>
                <div className="border-r border-white/6 px-3 py-3 text-[13px] leading-6 text-white/78">{row.sceneDescription}</div>
                <div className="border-r border-white/6 px-3 py-3 text-[13px] leading-6 text-white/70">{row.backgroundMusic}</div>
                <div className="border-r border-white/6 px-3 py-3 text-[13px] leading-6 text-white/70">{row.voiceAndSfx}</div>
                <div className="border-r border-white/6 px-3 py-3 text-[13px] leading-6 text-white/70">{row.imagePrompt}</div>
                <div className="border-r border-white/6 px-3 py-3 text-[13px] leading-6 text-white/70">{row.motionPrompt}</div>
                <div className="flex items-center justify-center px-3 py-3">
                  {row.keyframeUrl || previewUrl ? (
                    <img alt="" className="h-[54px] w-[84px] rounded-[8px] object-cover" src={row.keyframeUrl || previewUrl} />
                  ) : (
                    <div className="flex h-[54px] w-[84px] items-center justify-center rounded-[8px] bg-white/6 text-[11px] text-white/34">
                      无预览
                    </div>
                  )}
                </div>
              </div>
            ))
          ) : (
            <div className="flex h-[220px] items-center justify-center text-[13px] text-white/34">暂无解析结果</div>
          )}
        </div>
      </div>
    </div>
  );
}

function PresetWorkflowControls({
  anchor,
  functionConfig,
  membershipSummary,
  mode,
  modelOptions,
  nodes,
  onClearGridSplitSelection,
  onGridSplitCreateNodes,
  onGridSplitUpscale,
  onComposerSubmit,
  onImageToolAction,
  onModuleAction,
  onPresetSubmit,
  onStoryToolAction,
  selectedNode,
}: {
  anchor: PresetControlAnchor;
  functionConfig: VideoCanvasFunctionConfig;
  membershipSummary?: MembershipSummaryResponse;
  mode: Exclude<ActivePresetControlMode, null>;
  modelOptions: CanvasModelOption[];
  nodes: CloneNode[];
  onClearGridSplitSelection: () => void;
  onGridSplitCreateNodes: () => void;
  onGridSplitUpscale: (scaleFactor: number) => void;
  onComposerSubmit: (payload: ComposerSubmitPayload) => void;
  onImageToolAction: (action: ImageToolbarAction, option?: string) => void;
  onModuleAction: (action: "参考" | "标记" | "风格") => void;
  onPresetSubmit: (prompt: string, settings?: ComposerSettings) => void;
  onStoryToolAction: (action: StoryToolbarAction) => void;
  selectedNode: CloneNode;
}) {
  if (isOfficialImagePresetFunctionKey(mode)) {
    const definition = getConfiguredFunction(functionConfig, mode);
    const gridSplit = getNodeGridSplitState(selectedNode);
    if (gridSplit && gridSplit.selectedIndices.length > 0) {
      return (
        <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
          <GridSplitActionToolbar
            anchor={anchor}
            billingLabel={getVideoCanvasFunctionBillingCopy(
              getConfiguredFunction(functionConfig, "hd-upscale")
            ).shortLabel}
            onClearSelection={onClearGridSplitSelection}
            onCreateNodes={onGridSplitCreateNodes}
            onUpscale={onGridSplitUpscale}
            selectedCount={gridSplit.selectedIndices.length}
          />
        </div>
      );
    }
    return (
      <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
        <CharacterPresetToolbar anchor={anchor} onToolAction={onImageToolAction} />
        <PromptComposer
          anchor={anchor}
          billingFeature={getImageGenerationBillingFeature(mode)}
          defaultModel={getFunctionModelValue(functionConfig, definition)}
          functionDefinition={definition}
          membershipSummary={membershipSummary}
          modelKind="image-edit"
          modelOptions={modelOptions}
          nodes={nodes}
          onSubmit={onComposerSubmit}
          onStartReferenceSelection={() => onModuleAction("参考")}
          onStartMarkSelection={() => onModuleAction("标记")}
          onOpenStyleLibrary={() => onModuleAction("风格")}
          referenceThumbnailUrl={getNodeReferenceMediaUrl(selectedNode) || undefined}
        />
      </div>
    );
  }

  if (mode === "story-script") {
    const definition = getConfiguredFunction(functionConfig, "story-script");
    return (
      <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
        <PresetFloatingToolbar
          anchor={anchor}
          compact
          items={[
            { label: "重新生成", onClick: () => onStoryToolAction("regenerate") },
            { label: "批量生成分镜", onClick: () => onStoryToolAction("create-storyboard") },
            { label: "批量生视频", onClick: () => onStoryToolAction("batch-video") },
          ]}
        />
        <PresetComposerPanel
          anchor={anchor}
          billingDefinition={definition}
          defaultModel={getFunctionModelValue(functionConfig, definition)}
          membershipSummary={membershipSummary}
          modelKind="multimodal"
          modelOptions={modelOptions}
          onSubmit={onPresetSubmit}
          prompt={STORY_SCRIPT_PROMPT}
          title="脚本生成器"
        />
      </div>
    );
  }

  if (mode === "first-frame") {
    const definition = getConfiguredFunction(functionConfig, "first-frame-video");
    return (
      <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
        <PresetFloatingToolbar
          anchor={anchor}
          items={[
            { label: "高清", onClick: () => onImageToolAction("hd", "2K") },
            { label: "扩图", onClick: () => onImageToolAction("hd", "扩图") },
            { label: "替换背景", onClick: () => onImageToolAction("hd", "替换背景") },
            { label: "下载", onClick: () => onImageToolAction("download") },
          ]}
        />
        <PresetComposerPanel
          anchor={anchor}
          billingDefinition={definition}
          defaultModel={getFunctionModelValue(functionConfig, definition)}
          membershipSummary={membershipSummary}
          modelKind="video"
          modelOptions={modelOptions}
          onSubmit={onPresetSubmit}
          prompt="以当前图为首帧生成视频。"
          thumbnailUrl={getNodeReferenceMediaUrl(selectedNode) || undefined}
          title="首帧图生视频"
        />
      </div>
    );
  }

  const definition = getConfiguredFunction(functionConfig, "audio-to-video");
  return (
    <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
      <AudioToVideoComposerPanel
        anchor={anchor}
        billingDefinition={definition}
        defaultModel={getFunctionModelValue(functionConfig, definition)}
        membershipSummary={membershipSummary}
        modelOptions={modelOptions}
        onSubmit={onPresetSubmit}
        referenceImageUrl={getNodeReferenceMediaUrl(selectedNode) || undefined}
      />
    </div>
  );
}

function DirectorNodeComposer({
  anchor,
  prompt,
  referenceUrl,
  onDraft,
  onSubmit,
}: {
  anchor: PresetControlAnchor;
  prompt: string;
  referenceUrl: string;
  onDraft: (patch: Record<string, unknown>) => void;
  onSubmit: (imageUrl: string, prompt: string) => Promise<unknown>;
}) {
  const fileInput = useRef<HTMLInputElement>(null);
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState("");
  return (
    <div className="pointer-events-auto absolute z-30 flex h-[158px] w-[350px] -translate-x-1/2 flex-col rounded-[12px] border border-white/10 bg-[#262626] p-3 text-white shadow-[0_16px_42px_rgba(0,0,0,0.4)]"
      data-canvas-overlay="true" style={{left:anchor.centerX,top:anchor.bottomY+10}} onPointerDown={event=>event.stopPropagation()}>
      <textarea aria-label="描述想要搭建的场景" className="min-h-0 flex-1 resize-none bg-transparent text-[13px] leading-5 text-white/80 outline-none placeholder:text-white/35"
        placeholder="描述想要搭建的场景，支持通过参考图创建" value={prompt}
        onChange={event=>onDraft({directorPrompt:event.target.value})}/>
      {referenceUrl ? <span className="mb-1 truncate text-[11px] text-white/60">已添加参考图</span> : null}
      {error ? <span role="alert" className="mb-1 text-[11px] text-red-300">{error}</span> : null}
      <div className="flex items-center justify-between">
        <button aria-label="上传图片" className="flex h-8 items-center gap-1 rounded-lg px-2 text-[12px] text-white/70 hover:bg-white/10"
          disabled={busy} onClick={()=>fileInput.current?.click()} type="button"><Upload className="h-4 w-4"/>上传图片</button>
        <button aria-label="创建 3D 场景" className="flex h-8 w-8 items-center justify-center rounded-lg bg-white text-[#222] disabled:opacity-35"
          disabled={busy||!referenceUrl} onClick={async()=>{setBusy(true);setError("");try{await onSubmit(referenceUrl,prompt)}catch(cause){setError(cause instanceof Error?cause.message:"创建场景失败")}finally{setBusy(false)}}} type="button"><ArrowUp className="h-4 w-4"/></button>
      </div>
      <input ref={fileInput} hidden type="file" accept="image/*" onChange={async event=>{
        const file=event.target.files?.[0];event.target.value="";if(!file)return;
        if(file.size>20*1024*1024){setError("参考图需小于 20 MiB");return;}
        setBusy(true);setError("");try{
          const form=new FormData();form.append("file",file);form.append("purpose","director-studio");
          const response=await fetch("/api/files/upload",{method:"POST",body:form,signal:AbortSignal.timeout(120000)});
          const result=await response.json();const url=result.url||result.data?.url;
          if(!response.ok||!url)throw new Error(result.error||"图片上传失败");
          onDraft({directorReferenceUrl:String(url)});
        }catch(cause){setError(cause instanceof Error?cause.message:"图片上传失败")}finally{setBusy(false)}
      }}/>
    </div>
  );
}

function TextTargetModuleComposer({
  anchor,
  billingDefinition,
  defaultModel = "auto",
  membershipSummary,
  modelOptions = [],
  node,
  onDraftChange,
  onSubmit,
}: {
  anchor: PresetControlAnchor;
  billingDefinition?: VideoCanvasFunctionDefinition;
  defaultModel?: string;
  membershipSummary?: MembershipSummaryResponse;
  modelOptions?: CanvasModelOption[];
  node: CloneNode;
  onDraftChange: (prompt: string, model: string) => void;
  onSubmit: (prompt: string, model: string) => void;
}) {
  const contentValues = node.draftValues?.content;
  const initialPrompt =
    Array.isArray(contentValues) && typeof contentValues[0] === "string" ? contentValues[0] : "";
  const initialModel = normalizeModelRef(
    ((node.draftValues?.params as Record<string, unknown> | undefined)?.model as string | undefined) ||
      defaultModel,
  ) || "auto";
  const [menu, setMenu] = useState<ComposerMenu>(null);
  const [selectedModel, setSelectedModel] = useState(initialModel);
  const [prompt, setPrompt] = useState(initialPrompt);

  useEffect(() => {
    setPrompt(initialPrompt);
  }, [initialPrompt, node.id]);

  useEffect(() => {
    setSelectedModel(initialModel);
  }, [initialModel, node.id]);

  const billingDisplay = useMemo(
    () =>
      resolveVideoCanvasBillingDisplay({
        functionDefinition: billingDefinition,
        membershipSummary,
        modelKind: "multimodal",
        modelOptions,
        modelRef: selectedModel,
      }),
    [billingDefinition, membershipSummary, modelOptions, selectedModel],
  );

  return (
    <div
      className="pointer-events-auto absolute z-30 overflow-visible"
      data-canvas-overlay="true"
      style={{
        height: PROMPT_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
        left: anchor.centerX,
        top: anchor.bottomY + 24,
        transform: "translateX(-50%)",
        width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
      }}
    >
      <div
        className="relative h-[286px] w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]"
        style={{ transform: `scale(${OFFICIAL_COMPOSER_SCALE})`, transformOrigin: "top left" }}
      >
        {menu === "model" ? (
          <ComposerPopover
            menu="model"
            modelKind="multimodal"
            modelOptions={modelOptions}
            onSelect={(option) => {
              setSelectedModel(option);
              onDraftChange(prompt, option);
              setMenu(null);
            }}
          />
        ) : null}
        <textarea
          className="h-[158px] w-full resize-none bg-transparent text-[13px] leading-5 text-white/64 outline-none placeholder:text-white/38"
          onChange={(event) => {
            setPrompt(event.target.value);
            onDraftChange(event.target.value, selectedModel);
          }}
          onPointerDown={(event) => event.stopPropagation()}
          placeholder="写下你想讲的故事、场景或角色设定。例如：一个来自未来的机器人，在城市屋顶看星星。"
          value={prompt}
        />
        <div className="absolute bottom-5 left-5 right-[84px] flex items-center gap-4 overflow-hidden text-[12px] text-white/78">
          <ComposerControl
            active={menu === "model"}
            label={getCanvasModelDisplayName(selectedModel, modelOptions)}
            icon="⌘"
            dropdown
            onClick={() => setMenu((current) => current === "model" ? null : "model")}
          />
          <div className="min-w-0 flex-1" />
          <PromptTranslateButton prompt={prompt} model={selectedModel} onApply={text=>{setPrompt(text);onDraftChange(text,selectedModel);}}/>
          <ComposerControl
            label={billingDisplay.label}
            icon="⚡"
            muted
            onClick={() => toast.info(billingDisplay.message)}
          />
        </div>
        <button
          className="absolute bottom-5 right-5 flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] leading-none text-black transition hover:bg-white"
          onClick={() => onSubmit(prompt, selectedModel)}
          type="button"
        >
          ↑
        </button>
      </div>
    </div>
  );
}

function ReferenceSelectionToolbar({
  label = "从画布选择参考",
  onExit,
  onReturn,
}: {
  label?: string;
  onExit: () => void;
  onReturn: () => void;
}) {
  return (
    <div
      className="pointer-events-auto absolute z-50"
      data-canvas-overlay="true"
      style={{ left: "50%", top: 80, transform: "translateX(-50%)" }}
    >
      <div className="flex h-[58px] w-[314px] items-center gap-[16px] rounded-[16px] border border-[#363636] bg-[#262626] p-[12px] shadow-[0_0_18px_rgba(255,255,255,0.08),0_14px_36px_rgba(0,0,0,0.34)] backdrop-blur-md">
        <div className="flex h-[32px] w-[138px] items-center gap-[8px]">
          <span className="flex size-[32px] shrink-0 items-center justify-center rounded-[8px] bg-white/10 text-white/85">
            <Wand2 className="h-3.5 w-3.5" />
          </span>
          <span className="whitespace-nowrap text-[14px] font-semibold leading-[14px] text-white">
            {label}
          </span>
        </div>
        <div className="flex h-[32px] items-center gap-[8px]">
          <button
            className="flex h-[32px] w-[76px] items-center justify-center rounded-[8px] bg-white/15 px-[12px] text-[13px] text-white transition-opacity hover:opacity-80"
            onClick={onReturn}
            type="button"
          >
            返回节点
          </button>
          <button
            className="flex h-[32px] w-[50px] items-center justify-center rounded-[8px] bg-white px-[12px] text-[13px] text-neutral-900 transition-opacity hover:opacity-80"
            onClick={onExit}
            type="button"
          >
            退出
          </button>
        </div>
      </div>
    </div>
  );
}

function VideoCanvasMarkSelectionToolbar({
  onExit,
  onReturn,
}: {
  onExit: () => void;
  onReturn: () => void;
}) {
  return (
    <div
      className="pointer-events-auto absolute z-50"
      data-canvas-overlay="true"
      style={{ left: "50%", top: 80, transform: "translateX(-50%)" }}
    >
      <div className="flex h-[58px] w-[336px] items-center gap-[16px] rounded-[16px] border border-[#363636] bg-[#262626] p-[12px] shadow-[0_0_18px_rgba(255,255,255,0.08),0_14px_36px_rgba(0,0,0,0.34)] backdrop-blur-md">
        <div className="flex h-[32px] w-[160px] items-center gap-[8px]">
          <span className="flex size-[32px] shrink-0 items-center justify-center rounded-[8px] bg-white/10 text-white/85">
            <Wand2 className="h-3.5 w-3.5" />
          </span>
          <span className="flex w-[120px] flex-col gap-[4px]">
            <span className="whitespace-nowrap text-[14px] font-semibold leading-[14px] text-white">
              元素选择模式
            </span>
            <span className="whitespace-nowrap text-[12px] leading-[12px] text-white/50">
              点击图片选择局部元素
            </span>
          </span>
        </div>
        <div className="flex h-[32px] items-center gap-[8px]">
          <button
            className="flex h-[32px] w-[76px] items-center justify-center rounded-[8px] bg-white/15 px-[12px] text-[13px] text-white transition-opacity hover:opacity-80"
            onClick={onReturn}
            type="button"
          >
            返回节点
          </button>
          <button
            className="flex h-[32px] w-[50px] items-center justify-center rounded-[8px] bg-white px-[12px] text-[13px] text-neutral-900 transition-opacity hover:opacity-80"
            onClick={onExit}
            type="button"
          >
            退出
          </button>
        </div>
      </div>
    </div>
  );
}

function VideoCanvasMarkSourceOverlay({
  analysis,
  marks,
  node,
  onRemove,
}: {
  analysis: VideoCanvasMarkAnalysisState | null;
  marks: VideoCanvasMagicMark[];
  node: CloneNode;
  onRemove: (markId: string) => void;
}) {
  const [openMarkId, setOpenMarkId] = useState<string | null>(null);
  const imageTop = 32;
  const imageHeight = Math.max(1, node.height - imageTop);
  const getPoint = (clickX: number, clickY: number) => ({
    x: Math.max(14, Math.min(node.width - 14, clickX * node.width)),
    y: imageTop + Math.max(0, Math.min(1, clickY)) * imageHeight,
  });

  return (
    <div
      className="pointer-events-none absolute z-40"
      style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
    >
      {marks.map((mark) => {
        const point = getPoint(mark.clickX, mark.clickY);
        const label = mark.labelOptions[mark.selectedIndex] || mark.labelOptions[0];
        const badgeTop = Math.max(imageTop, Math.min(node.height - 42, point.y - 42));
        const guideHeight = Math.max(0, point.y - badgeTop - 34);
        return (
          <div
            className="group pointer-events-auto absolute flex items-center gap-[4px]"
            key={mark.id}
            onPointerDown={(event) => event.stopPropagation()}
            style={{ left: point.x, top: badgeTop, transform: "translateX(-50%)" }}
          >
            <button
              className="flex h-[34px] items-center gap-1.5 whitespace-nowrap rounded-full border border-white/10 bg-[#2a2a2a] px-3 py-1.5 text-[14px] text-white shadow-lg transition hover:bg-[#333]"
              onClick={(event) => {
                event.preventDefault();
                event.stopPropagation();
                setOpenMarkId((current) => current === mark.id ? null : mark.id);
              }}
              type="button"
            >
              <Sparkles className="h-[14px] w-[14px] text-white/80" />
              <span>{label}</span>
              {mark.labelOptions.length > 1 ? (
                <ChevronDown className="h-[14px] w-[14px] text-white/60" />
              ) : null}
            </button>
            {openMarkId === mark.id ? (
              <div className="absolute left-1/2 top-[38px] z-[300] min-w-[120px] -translate-x-1/2 overflow-hidden rounded-[16px] border-[0.5px] border-[#525252] bg-[#1f1f1f]/95 p-1 shadow-[0_16px_42px_rgba(0,0,0,0.42)] backdrop-blur-[32px]">
                <button
                  className="flex h-8 w-full items-center justify-between gap-2 rounded-md px-2 text-left text-[14px] text-white hover:bg-white/10"
                  onClick={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    setOpenMarkId(null);
                  }}
                  type="button"
                >
                  <span>{label}</span>
                  <span className="size-2 rounded-full bg-white/55" />
                </button>
              </div>
            ) : null}
            <button
              aria-label={`移除标记 ${label}`}
              className="flex size-6 scale-75 items-center justify-center rounded-full border border-white/10 bg-[#2a2a2a] text-white/60 opacity-0 shadow-lg transition-all hover:bg-[#3a3a3a] hover:text-white group-hover:scale-100 group-hover:opacity-100"
              onPointerDown={(event) => {
                event.preventDefault();
                event.stopPropagation();
                setOpenMarkId(null);
                onRemove(mark.id);
              }}
              type="button"
            >
              <X className="h-3 w-3" />
            </button>
            {guideHeight > 0 ? (
              <span
                className="pointer-events-none absolute left-1/2 top-[34px] w-px -translate-x-1/2 bg-white/55"
                style={{ height: guideHeight }}
              />
            ) : null}
          </div>
        );
      })}
      {analysis ? (() => {
        const point = getPoint(analysis.clickX, analysis.clickY);
        return (
          <span
            className="absolute flex h-7 items-center gap-1.5 whitespace-nowrap rounded-full border border-white/10 bg-black/75 px-2.5 text-[12px] text-white/78 shadow-lg"
            style={{ left: point.x, top: point.y, transform: "translate(-50%, -50%)" }}
          >
            <Loader2 className="h-3.5 w-3.5 animate-spin" />
            分析中...
          </span>
        );
      })() : null}
    </div>
  );
}

function VideoTargetModuleComposer({
  anchor,
  functionConfig,
  magicMarks,
  markSelectionActive,
  membershipSummary,
  modelOptions = [],
  node,
  onOpenEffectLibrary,
  onOpenRoleLibrary,
  onRemoveEffect,
  onRemoveMagicMark,
  onRemoveReference,
  onRemoveRole,
  onPromptChange,
  onSettingsChange,
  onStartMarkSelection,
  onStartReferenceSelection,
  onSubmit,
  onUpdateMagicMark,
  referenceSelectionActive,
  sourceNodes,
}: {
  anchor: PresetControlAnchor;
  functionConfig: VideoCanvasFunctionConfig;
  magicMarks: VideoCanvasMagicMark[];
  markSelectionActive: boolean;
  membershipSummary?: MembershipSummaryResponse;
  modelOptions?: CanvasModelOption[];
  node: CloneNode;
  onOpenEffectLibrary: () => void;
  onOpenRoleLibrary: () => void;
  onRemoveEffect: (sourceId: string) => void;
  onRemoveMagicMark: (markId: string) => void;
  onRemoveReference: (sourceId: string) => void;
  onRemoveRole: (sourceId: string) => void;
  onPromptChange: (prompt: string) => void;
  onSettingsChange: (nodeId: string, settings: ComposerSettings, mode: VideoGenerationMode) => void;
  onStartMarkSelection: () => void;
  onStartReferenceSelection: () => void;
  onSubmit: (payload: VideoTargetComposerSubmitPayload) => void;
  onUpdateMagicMark: (markId: string, selectedIndex: number) => void;
  referenceSelectionActive: boolean;
  sourceNodes: CloneNode[];
}) {
  const params = (node.draftValues?.params || {}) as Record<string, unknown>;
  const paramsSettings =
    params.settings && typeof params.settings === "object"
      ? (params.settings as Record<string, unknown>)
      : {};
  const imageSources = sourceNodes.filter((item) => item.inputType === "image");
  const effectSources = sourceNodes.filter(isVideoEffectMaterialNode);
  const roleSources = sourceNodes.filter(isVideoRoleMaterialNode);
  const activeEffect = effectSources[0] || null;
  const referenceCount = imageSources.length;
  const savedMode = normalizeVideoGenerationMode(params.mode || paramsSettings.mode);
  const initialTab = (() => {
    if (savedMode === "first-last-frame") return "first-last-frame" as const;
    if (savedMode === "first-frame") return "first-frame" as const;
    if (savedMode === "reference-images") return "reference-images" as const;
    if (savedMode === "text-to-video") return "text-to-video" as const;
    return inferVideoComposerDefaultTab(referenceCount);
  })();
  const initialPrompt = String(params.prompt || node.draftValues?.prompt || "").trim();
  const initialSettings: ComposerSettings & { duration: string } = {
    autoValidateMaterial: normalizeComposerBoolean(
      paramsSettings.autoValidateMaterial ?? paramsSettings.auto_validate_material,
      true,
    ),
    audio: String(paramsSettings.audio || "开启"),
    camera: String(paramsSettings.camera || "摄像机"),
    count: String(paramsSettings.count || "1个"),
    model:
      normalizeModelRef(String(params.model || paramsSettings.model || "")) ||
      getFunctionModelValue(
        functionConfig,
        getConfiguredFunction(functionConfig, getVideoFunctionKeyForMode(resolveVideoComposerMode(initialTab))),
      ),
    modelLabel: "",
    panorama: String(paramsSettings.panorama || "全能参考"),
    ratio: formatVideoRatioLabel(params.ratio || paramsSettings.ratio),
    resolution: formatVideoResolutionLabel(params.resolution || paramsSettings.resolution),
    searchEnabled: normalizeComposerBoolean(
      paramsSettings.searchEnabled ?? paramsSettings.search_enabled ?? paramsSettings.searchable,
      true,
    ),
    duration: formatVideoDurationLabel(params.duration || paramsSettings.duration),
  };
  const [activeTab, setActiveTab] = useState<VideoComposerTabKey>(initialTab);
  const [menu, setMenu] = useState<ComposerMenu>(null);
  const [assistMenu, setAssistMenu] = useState<"reference" | "mark" | "effects" | "motion" | "role" | null>(null);
  const [advancedSettingsOpen, setAdvancedSettingsOpen] = useState(false);
  const [prompt, setPrompt] = useState(initialPrompt);
  const promptEditorRef = useRef<HTMLDivElement>(null);
  // Keep typing browser-owned; remount only when applying an external replacement.
  const [promptEditorSeed, setPromptEditorSeed] = useState({ revision: 0, text: initialPrompt });
  const [promptToolMode, setPromptToolMode] = useState<PromptToolMode | null>(null);
  const [promptToolModel, setPromptToolModel] = useState("auto");
  const [promptToolBusy, setPromptToolBusy] = useState(false);
  const [promptToolOutput, setPromptToolOutput] = useState("");
  const [promptToolSource, setPromptToolSource] = useState("");
  const [promptToolError, setPromptToolError] = useState("");
  const promptToolRequest = useRef<AbortController | null>(null);
  const closePromptTool = () => {
    promptToolRequest.current?.abort();
    promptToolRequest.current = null;
    setPromptToolMode(null);
    setPromptToolBusy(false);
  };
  useEffect(() => {
    setPromptToolMode(null);
    setPromptToolBusy(false);
    return () => { promptToolRequest.current?.abort(); promptToolRequest.current = null; };
  }, [node.id]);
  const runPromptTool = async (mode: PromptToolMode, modelRef = promptToolModel) => {
    if (!prompt.trim()) { toast.info("请先输入提示词"); return; }
    promptToolRequest.current?.abort();
    const controller = new AbortController();
    promptToolRequest.current = controller;
    setPromptToolMode(mode);
    setPromptToolSource(prompt);
    setPromptToolOutput("");
    setPromptToolError("");
    setPromptToolBusy(true);
    try {
      const response = await fetch("/api/canvas/prompt-tools", {
        method: "POST", headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ mode, prompt, model: modelRef }),
        signal: AbortSignal.any([controller.signal, AbortSignal.timeout(100_000)]),
      });
      const result = await response.json();
      if (!response.ok || !result.success || !result.data?.text) throw new Error(result.error || "提示词处理失败");
      if (promptToolRequest.current === controller) setPromptToolOutput(result.data.text);
    } catch (error) {
      if (promptToolRequest.current === controller && !controller.signal.aborted) {
        setPromptToolError(error instanceof Error && error.name === "TimeoutError"
          ? "提示词处理超时，请重试。原提示词已保留。"
          : error instanceof Error ? error.message : "提示词处理失败，原文已保留");
      }
    } finally {
      if (promptToolRequest.current === controller) { promptToolRequest.current = null; setPromptToolBusy(false); }
    }
  };
  const [markMenuAnchor, setMarkMenuAnchor] = useState<{
    id: string;
    left: number;
    top: number;
  } | null>(null);
  const [settings, setSettings] = useState<ComposerSettings & { duration: string }>(initialSettings);
  const activeMode = resolveVideoComposerMode(activeTab);
  useEffect(() => { onSettingsChange(node.id, settings, activeMode); }, [node.id, settings, activeMode, onSettingsChange]);
  const activeDefinition = getConfiguredFunction(functionConfig, getVideoFunctionKeyForMode(activeMode));
  const activeModelFallback = normalizeModelRef(getFunctionModelValue(functionConfig, activeDefinition)) || "auto";
  const showModelMenu = menu === "model";
  const showModeMenu = menu === "mode";
  const showSettingsMenu = menu === "settings";
  const activePromptPlaceholder =
    activeMode === "text-to-video"
      ? "描述视频画面、动作、情绪与镜头语言。"
      : activeMode === "first-last-frame"
        ? "描述首帧到尾帧之间的动作变化、转场与镜头节奏。"
        : "补充参考图中的动作、镜头、节奏与氛围，让视频更准确。";
  const tabItems: Array<{ key: VideoComposerTabKey; label: string; enabled: boolean }> = [
    { key: "text-to-video", label: "文生视频", enabled: referenceCount === 0 },
    { key: "reference-images", label: "全能参考", enabled: referenceCount >= 1 },
    { key: "first-frame", label: "图生视频", enabled: true },
    { key: "first-last-frame", label: "首尾帧", enabled: true },
    { key: "image-reference", label: "图片参考", enabled: referenceCount >= 1 },
  ];
  const referenceThumbnails = imageSources
    .map((item) => ({ id: item.id, title: item.title, url: getNodeReferenceMediaUrl(item) }))
    .filter((item) => item.url)
    .slice(0, 10);

  useEffect(() => {
    setActiveTab(initialTab);
    const editorClone = promptEditorRef.current?.cloneNode(true) as HTMLElement | undefined;
    editorClone?.querySelectorAll("[data-magic-id]").forEach(element => element.remove());
    if ((editorClone?.textContent || "").replace(/\u00a0/g, " ").trim() !== initialPrompt) {
      setPromptEditorSeed(current => ({ revision: current.revision + 1, text: initialPrompt }));
    }
    setPrompt(initialPrompt);
    setSettings(initialSettings);
  }, [initialPrompt, initialTab, node.id]);

  useEffect(() => {
    const candidates = filterCanvasModels(modelOptions, "video", activeMode);
    const normalized = normalizeModelRef(settings.model);
    const selected = candidates.find(item => item.id === normalized || item.modelId === normalized);
    const target = selected || ((!normalized || normalized === "auto") ? candidates[0] : undefined);
    if (!target) return;
    const supported = getCanvasVideoParameters(target, activeMode);
    setSettings(current => {
      const ratio = supported.ratios.length && !supported.ratios.includes(normalizeVideoRatioValue(current.ratio)) ? supported.ratios[0] : current.ratio;
      const executableResolutions = supported.resolutions.filter(value => ["480p", "720p", "1080p"].includes(value.toLowerCase()));
      const resolution = executableResolutions.length && !executableResolutions.includes(normalizeVideoResolutionValue(current.resolution)) ? executableResolutions[0].toUpperCase() : current.resolution;
      const duration = supported.durations.length && !supported.durations.includes(normalizeVideoDurationValue(current.duration)) ? `${supported.durations[0]}s` : current.duration;
      const audio = supported.supportsAudio ? current.audio : "关闭";
      return ratio === current.ratio && resolution === current.resolution && duration === current.duration && audio === current.audio ? current : {...current, ratio, resolution, duration, audio};
    });
  }, [activeMode, modelOptions, settings.model, settings.ratio, settings.resolution, settings.duration, settings.audio]);


  useEffect(() => {
    if (!tabItems.find((item) => item.key === activeTab)?.enabled) {
      setActiveTab(inferVideoComposerDefaultTab(referenceCount));
    }
  }, [activeTab, referenceCount, tabItems]);

  useEffect(() => {
    setSettings((current) => {
      const normalized = normalizeModelRef(current.model) || "auto";
      if (normalized !== "auto") return current;
      if (normalized === activeModelFallback) return current;
      return { ...current, model: activeModelFallback };
    });
  }, [activeModelFallback]);

  const billingDisplay = useMemo(
    () =>
      resolveVideoCanvasBillingDisplay({
        duration: normalizeVideoDurationValue(settings.duration),
        functionDefinition: activeDefinition,
        membershipSummary,
        modelKind: "video",
        modelOptions,
        modelRef: settings.model,
        resolution: normalizeVideoResolutionValue(settings.resolution),
      }),
    [
      activeDefinition,
      membershipSummary,
      modelOptions,
      settings.duration,
      settings.model,
      settings.resolution,
    ],
  );
  const visibleBillingDisplay = billingDisplay;
  const appendMotionPrompt = useCallback(
    (snippet: string) => {
      const trimmedSnippet = snippet.trim();
      if (!trimmedSnippet) return;
      const trimmedPrompt = prompt.trim();
      const nextPrompt = trimmedPrompt
        ? `${trimmedPrompt} ${trimmedSnippet}`
        : trimmedSnippet;
      setPrompt(nextPrompt);
      onPromptChange(nextPrompt);
      setAssistMenu(null);
    },
    [onPromptChange, prompt],
  );
  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
  const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 720;
  const compactComposer = viewportWidth < 980 || viewportHeight < 620;
  const composerWidth = compactComposer ? Math.max(320, viewportWidth - 24) : 660;
  const attachmentCount =
    referenceThumbnails.length + (activeEffect ? 1 : 0) + roleSources.length;
  const attachmentRows = attachmentCount > 0 ? Math.ceil(attachmentCount / 11) : 0;
  const attachmentComposerHeight = attachmentRows > 0 ? 63 + (attachmentRows - 1) * 56 : 0;
  const baseComposerHeight = (compactComposer ? 210 : 191) + attachmentComposerHeight;
  const advancedComposerHeight = advancedSettingsOpen ? 116 : 0;
  const composerHeight = baseComposerHeight + advancedComposerHeight;
  const composerTop = Math.max(12, Math.min(anchor.bottomY + 12, viewportHeight - composerHeight - 76));
  const allQuickActionItems: Array<{ icon: LucideIcon; key: "reference" | "mark" | "effects" | "role" | "motion"; label: string }> = [
    { icon: Layers, key: "reference", label: "参考" },
    { icon: BoxSelect, key: "mark", label: "标记" },
    { icon: Sparkles, key: "effects", label: "特效" },
    { icon: UserRound, key: "role", label: "角色库" },
    { icon: Settings2, key: "motion", label: "运镜" },
  ];
  const quickActionItems = allQuickActionItems.filter((item) => {
    if (activeEffect && item.key === "effects") return false;
    if (activeTab === "first-frame") return item.key !== "role";
    if (activeTab === "first-last-frame") {
      return item.key === "reference" || item.key === "mark" || item.key === "role";
    }
    return true;
  });
  const promptPlaceholder =
    activeMode === "text-to-video" ? "描述你想要生成的画面内容，@引用素材" : activePromptPlaceholder;
  const activeTabLabel = tabItems.find((item) => item.key === activeTab)?.label || "文生视频";
  const ActiveModeIcon = getVideoModeIcon(activeTab);
  const activeModelButtonLabel = getVideoComposerModelShortLabel(getVideoComposerModelLabel(settings, modelOptions));
  const activeModelButtonMinWidth =
    activeModelButtonLabel === "2.0 Fast" ? 115 : activeModelButtonLabel === "2.0 Mini" ? 113 : 91;
  const missingFrameMessage = activeMode === "first-frame" && referenceCount < 1
    ? "请选择首帧图片"
    : activeMode === "first-last-frame" && referenceCount < 2
      ? "请选择首帧和尾帧图片" : "";
  const canSubmit = !missingFrameMessage && Boolean(
    prompt.trim() ||
      referenceCount > 0 ||
      magicMarks.length > 0 ||
      activeEffect ||
      roleSources.length > 0,
  );

  return (
    <div
      className={cn(
        "pointer-events-auto absolute z-[70]",
        compactComposer ? "overflow-x-auto overflow-y-visible" : "overflow-visible"
      )}
      data-canvas-overlay="true"
      style={{
        height: composerHeight,
        left: compactComposer ? 12 : Math.max(composerWidth / 2 + 12, Math.min(anchor.centerX, viewportWidth - composerWidth / 2 - 12)),
        top: composerTop,
        transform: compactComposer ? "none" : "translateX(-50%)",
        transformOrigin: "top left",
        width: composerWidth,
      }}
    >
      {promptToolMode ? <VideoPromptToolDialog
        mode={promptToolMode} busy={promptToolBusy} error={promptToolError}
        output={promptToolOutput} source={promptToolSource} currentPrompt={prompt}
        model={promptToolModel}
        models={filterCanvasModels(modelOptions, "text").map(item => ({ id: getCanvasModelRef(item), label: getCanvasModelDisplayName(getCanvasModelRef(item), modelOptions) }))}
        onModelChange={value => { setPromptToolModel(value); setPromptToolOutput(""); setPromptToolError(""); }}
        onOutputChange={setPromptToolOutput} onClose={closePromptTool}
        onRun={() => { void runPromptTool(promptToolMode); }}
        onApply={() => { setPromptEditorSeed(current => ({ revision: current.revision + 1, text: promptToolOutput })); setPrompt(promptToolOutput); onPromptChange(promptToolOutput); closePromptTool(); toast.success("已填入提示词"); }}
      /> : null}

      <div
        className="relative overflow-visible rounded-[16px] border-[0.5px] border-[#363636] bg-[#262626] text-white shadow-[0_4px_10px_rgba(0,0,0,0.12)] transition-[height] duration-300"
        style={{ height: composerHeight, width: composerWidth }}
      >
        <div className="relative shrink-0 p-[8px]" style={{ height: baseComposerHeight }}>
          {showModelMenu ? (
            <VideoModelPopover
              mode={activeMode}
              currentLabel={getVideoComposerModelLabel(settings, modelOptions)}
              modelOptions={modelOptions}
              onSelect={(option) => {
                setSettings((current) => ({
                  ...current,
                  model: option.modelRef || current.model || "auto",
                  modelLabel: option.label,
                }));
                setMenu(null);
              }}
            />
          ) : null}
          {showModeMenu ? (
            <VideoModePopover
              activeTab={activeTab}
              items={tabItems}
              leftOffset={16 + activeModelButtonMinWidth}
              onSelect={(nextTab) => {
                setActiveTab(nextTab);
                setMenu(null);
              }}
            />
          ) : null}
          {showSettingsMenu ? (
            <VideoParameterEditor
              leftOffset={126 + activeModelButtonMinWidth}
              settings={settings}
              modelOptions={modelOptions}
              mode={activeMode}
              onChange={(updates) => setSettings((current) => ({ ...current, ...updates }))}
            />
          ) : null}
          {assistMenu === "motion" ? (
            <VideoMotionLibraryPanel
              onClose={() => setAssistMenu(null)}
              onSelect={appendMotionPrompt}
              presets={functionConfig.motionPresets}
            />
          ) : null}
          <div className="flex h-[26px] items-center gap-[4px]">
            {quickActionItems.map(({ icon: Icon, key, label }) => (
              <button
                className={cn(
                  "flex h-[26px] shrink-0 items-center justify-center gap-[2px] rounded-full px-[8px] py-[4px] text-white/64 transition hover:bg-white/10 hover:text-white",
                  (assistMenu === key ||
                    (key === "reference" && referenceSelectionActive) ||
                    (key === "mark" && markSelectionActive)) &&
                    "bg-white/10 text-white"
                )}
                key={key}
                onClick={() => {
                  if (key === "reference") {
                    setAssistMenu(null);
                    setMenu(null);
                    onStartReferenceSelection();
                    return;
                  }
                  if (key === "mark") {
                    setAssistMenu(null);
                    setMenu(null);
                    setMarkMenuAnchor(null);
                    onStartMarkSelection();
                    return;
                  }
                  if (key === "effects") {
                    setAssistMenu(null);
                    setMenu(null);
                    onOpenEffectLibrary();
                    return;
                  }
                  if (key === "role") {
                    setAssistMenu(null);
                    setMenu(null);
                    onOpenRoleLibrary();
                    return;
                  }
                  setAssistMenu((current) => current === key ? null : key);
                  setMenu(null);
                }}
                type="button"
              >
                <Icon className="h-[12px] w-[12px]" />
                <span className="text-[12px] leading-[18px]">{label}</span>
              </button>
            ))}
          </div>
          {attachmentCount > 0 ? (
            <div className="nopan mt-[8px] flex min-h-[55px] w-full min-w-0 flex-wrap items-start gap-[8px] pl-[4px]">
              {referenceThumbnails.map((thumbnail, index) => (
                <div className="group relative size-[48px] flex-none cursor-grab active:cursor-grabbing" key={thumbnail.id}>
                  <div className="size-full overflow-hidden rounded-[12px] border-[0.5px] border-[#525252]">
                    <img alt={thumbnail.title} className="size-full object-cover" src={thumbnail.url} />
                  </div>
                  {activeTab === "first-last-frame" ? (
                    <span className="pointer-events-none absolute left-0 top-0 rounded-br-[5px] bg-black/70 px-1 py-0.5 text-[9px] leading-3 text-white/90">
                      {index === 0 ? "首帧" : "尾帧"}
                    </span>
                  ) : (
                    <span className="pointer-events-none absolute left-0 top-0 flex size-[16px] items-center justify-center rounded-full bg-black/70 text-[9px] text-white">
                      {index + 1}
                    </span>
                  )}
                  <button
                    aria-label={`移除参考 ${index + 1}`}
                    className="absolute right-0.5 top-0.5 z-20 flex size-[15px] items-center justify-center rounded-full border border-white bg-[#333] text-white opacity-0 transition-opacity group-hover:opacity-100"
                    onClick={(event) => {
                      event.preventDefault();
                      event.stopPropagation();
                      onRemoveReference(thumbnail.id);
                    }}
                    type="button"
                  >
                    <X className="h-2.5 w-2.5" />
                  </button>
                </div>
              ))}
              {activeEffect ? (
                <div
                  className="group relative size-[48px] flex-none cursor-pointer"
                  data-video-effect-attachment={getDraftString(activeEffect, "effectId")}
                  onClick={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    onOpenEffectLibrary();
                  }}
                >
                  <div className="relative size-full overflow-hidden rounded-[8px] border-[0.5px] border-[#525252] bg-[#1f1f1f]">
                    <img
                      alt={getDraftString(activeEffect, "effectTitle") || activeEffect.title}
                      className="size-full object-cover"
                      draggable={false}
                      src={getDraftString(activeEffect, "thumbnailUrl") || getNodeMediaUrl(activeEffect)}
                    />
                    <span className="absolute inset-0 bg-black/35" />
                    <span className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 text-white/80 transition-opacity group-hover:opacity-0">
                      <Camera className="h-3 w-3" />
                      <span className="text-[11px] leading-none">特效</span>
                    </span>
                    <span className="absolute inset-0 flex flex-col items-center justify-center gap-0.5 text-white/80 opacity-0 transition-opacity group-hover:opacity-100">
                      <RotateCcw className="h-3 w-3" />
                      <span className="text-[11px] leading-none">替换</span>
                    </span>
                  </div>
                  <button
                    aria-label={`移除特效 ${getDraftString(activeEffect, "effectTitle") || activeEffect.title}`}
                    className="absolute right-[-3px] top-[-5px] z-20 flex size-[15px] items-center justify-center rounded-full border border-white bg-[#333] text-white opacity-0 transition-opacity group-hover:opacity-100"
                    onClick={(event) => {
                      event.preventDefault();
                      event.stopPropagation();
                      onRemoveEffect(activeEffect.id);
                    }}
                    type="button"
                  >
                    <X className="h-2.5 w-2.5" />
                  </button>
                </div>
              ) : null}
              {roleSources.map((roleSource) => {
                const roleName =
                  getDraftString(roleSource, "roleName") ||
                  roleSource.title.replace(/^素材-角色-/, "");
                return (
                  <div
                    className="group relative size-[48px] flex-none cursor-pointer"
                    data-video-role-attachment={getDraftString(roleSource, "roleId")}
                    key={roleSource.id}
                    onClick={(event) => {
                      event.preventDefault();
                      event.stopPropagation();
                      onOpenRoleLibrary();
                    }}
                  >
                    <div className="relative size-full overflow-hidden rounded-[8px] border-[0.5px] border-[#525252] bg-[#1f1f1f]">
                      <img
                        alt={roleName}
                        className="size-full object-cover object-top"
                        draggable={false}
                        src={
                          getDraftString(roleSource, "thumbnailUrl") ||
                          getNodeMediaUrl(roleSource)
                        }
                      />
                      <span className="absolute inset-x-0 bottom-0 bg-black/68 py-0.5 text-center text-[9px] leading-3 text-white/90">
                        角色
                      </span>
                      {getDraftString(roleSource, "assetId") ? (
                        <span className="absolute left-1 top-1 flex size-[14px] items-center justify-center rounded-full bg-[#09caf5] text-black">
                          <Check className="h-2.5 w-2.5" strokeWidth={3} />
                        </span>
                      ) : null}
                    </div>
                    <button
                      aria-label={`移除角色 ${roleName}`}
                      className="absolute right-[-3px] top-[-5px] z-20 flex size-[15px] items-center justify-center rounded-full border border-white bg-[#333] text-white opacity-0 transition-opacity group-hover:opacity-100"
                      onClick={(event) => {
                        event.preventDefault();
                        event.stopPropagation();
                        onRemoveRole(roleSource.id);
                      }}
                      type="button"
                    >
                      <X className="h-2.5 w-2.5" />
                    </button>
                  </div>
                );
              })}
            </div>
          ) : null}
          <div
            className="relative mt-3 h-[78px] rounded-[12px] bg-white/[0.03]"
            data-video-prompt-editor="true"
          >
            {!prompt && magicMarks.length === 0 ? (
              <div className="pointer-events-none absolute left-3 top-2 text-[14px] leading-6 text-white/42">
                {promptPlaceholder}
              </div>
            ) : null}
            <div
              className="tiny-scrollbar h-full w-full overflow-y-auto bg-transparent px-3 py-2 text-[14px] leading-6 text-white/78 outline-none"
              contentEditable
              key={promptEditorSeed.revision}
              ref={promptEditorRef}
              onInput={(event) => {
                const clone = event.currentTarget.cloneNode(true) as HTMLElement;
                clone.querySelectorAll("[data-magic-id]").forEach((element) => element.remove());
                setPrompt((clone.textContent || "").replace(/\u00a0/g, " ").trim());
              }}
              onBlur={() => onPromptChange(prompt)}
              onKeyDown={(event) => {
                if (event.key !== "Backspace" || magicMarks.length === 0) return;
                const selection = window.getSelection();
                if (!selection?.rangeCount || !selection.isCollapsed) return;
                const range = selection.getRangeAt(0);
                if (!event.currentTarget.contains(range.endContainer)) return;
                const after = range.cloneRange();
                after.selectNodeContents(event.currentTarget);
                after.setStart(range.endContainer, range.endOffset);
                if (after.toString().trim()) return;
                event.preventDefault();
                const lastMark = magicMarks[magicMarks.length - 1];
                onRemoveMagicMark(lastMark.id);
                setMarkMenuAnchor(null);
              }}
              onPointerDown={(event) => event.stopPropagation()}
              role="textbox"
              suppressContentEditableWarning
              tabIndex={0}
            >
              {promptEditorSeed.text}
              {magicMarks.length > 0 ? " " : null}
              {magicMarks.map((mark) => {
                const label = mark.labelOptions[mark.selectedIndex] || mark.labelOptions[0];
                return (
                  <span
                    className="magic-chip mr-1 inline-flex h-6 cursor-pointer select-none items-center gap-1 whitespace-nowrap rounded-full border border-[#525252] bg-white/10 px-1.5 align-middle text-[12px] leading-4 text-white"
                    contentEditable={false}
                    data-magic-id={mark.id}
                    data-magic-index={mark.selectedIndex}
                    key={mark.id}
                    onClick={(event) => {
                      event.preventDefault();
                      event.stopPropagation();
                      if (mark.labelOptions.length < 2) {
                        setMarkMenuAnchor(null);
                        return;
                      }
                      const editor = event.currentTarget.closest(
                        "[data-video-prompt-editor='true']"
                      );
                      const editorRect = editor?.getBoundingClientRect();
                      const chipRect = event.currentTarget.getBoundingClientRect();
                      if (!editorRect) return;
                      setMarkMenuAnchor((current) =>
                        current?.id === mark.id
                          ? null
                          : {
                              id: mark.id,
                              left: Math.max(
                                0,
                                Math.min(515, chipRect.left - editorRect.left)
                              ),
                              top: chipRect.bottom - editorRect.top + 4,
                            }
                      );
                    }}
                  >
                    <img
                      alt=""
                      className="size-[14px] rounded-full object-cover"
                      draggable={false}
                      src={mark.imageUrl}
                    />
                    <span data-magic-label="true">{label}</span>
                    {mark.labelOptions.length > 1 ? (
                      <span className="ml-0.5 text-[12px] opacity-50">›</span>
                    ) : null}
                  </span>
                );
              })}
            </div>
            {markMenuAnchor ? (() => {
              const mark = magicMarks.find((item) => item.id === markMenuAnchor.id);
              if (!mark) return null;
              return (
                <div
                  className="absolute z-[300] min-w-[120px] max-w-[220px] overflow-hidden rounded-[16px] border-[0.5px] border-[#525252] bg-[#1f1f1f]/95 p-1 shadow-[0_16px_42px_rgba(0,0,0,0.42)] backdrop-blur-[32px]"
                  style={{ left: markMenuAnchor.left, top: markMenuAnchor.top }}
                >
                  <div className="tiny-scrollbar flex max-h-[200px] flex-col gap-0.5 overflow-y-auto">
                    {mark.labelOptions.map((label, index) => (
                      <button
                        className={cn(
                          "flex h-8 w-full items-center justify-between gap-2 rounded-md px-2 text-left text-[14px] transition-colors hover:bg-white/10",
                          index === mark.selectedIndex ? "text-white" : "text-white/55"
                        )}
                        key={`${mark.id}-${label}`}
                        onClick={() => {
                          onUpdateMagicMark(mark.id, index);
                          setMarkMenuAnchor(null);
                        }}
                        type="button"
                      >
                        <span>{label}</span>
                        {index === mark.selectedIndex ? (
                          <span className="size-2 rounded-full bg-white/55" />
                        ) : null}
                      </button>
                    ))}
                  </div>
                </div>
              );
            })() : null}
          </div>
          <div className="absolute bottom-4 left-3 right-[58px] flex min-w-0 items-center gap-1 overflow-hidden text-[13px] text-white/62">
            <button
              className={cn(
                "flex h-8 min-w-[91px] max-w-[240px] shrink-[2] items-center justify-between gap-1 rounded-lg bg-transparent px-2 py-1 transition-colors hover:bg-white/8 hover:text-white",
                showModelMenu && "bg-white/10 text-white"
              )}
              onClick={() => {
                setAssistMenu(null);
                setMenu((current) => current === "model" ? null : "model");
              }}
              style={{ minWidth: activeModelButtonMinWidth }}
              type="button"
            >
              <Video className="h-3.5 w-3.5 shrink-0" />
              <span className="truncate">{activeModelButtonLabel}</span>
              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/42" />
            </button>
            <button
              className={cn(
                "flex h-8 w-[106px] min-w-[106px] shrink-0 items-center justify-center gap-1 rounded-lg bg-transparent px-2 py-1 transition-colors hover:bg-white/8 hover:text-white",
                showModeMenu && "bg-white/10 text-white"
              )}
              onClick={() => {
                setAssistMenu(null);
                setMenu((current) => current === "mode" ? null : "mode");
              }}
              type="button"
            >
              <ActiveModeIcon className="h-4 w-4 shrink-0" />
              <span className="min-w-0 truncate">{activeTabLabel}</span>
              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/42" />
            </button>
            <button
              className={cn(
                "flex h-8 min-w-[204px] shrink items-center gap-1 rounded-lg bg-transparent px-2 py-1 transition-colors hover:bg-white/8 hover:text-white",
                showSettingsMenu && "bg-white/10 text-white"
              )}
              onClick={() => {
                setAssistMenu(null);
                setMenu((current) => current === "settings" ? null : "settings");
              }}
              type="button"
            >
              <span className="flex-none rounded-[2px] border-[1.5px] border-current h-[9px] w-4" />
              <span className="truncate">{formatVideoParameterSummary(settings)} ·</span>
              <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/42" />
            </button>
            <div className="min-w-0 flex-1" />
            <div className="flex shrink-0 items-center gap-1">
              <button
                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-white/74 transition-colors hover:bg-white/8 hover:text-white"
                onClick={() => { setPromptToolModel("auto"); void runPromptTool("optimize", "auto"); }}
                title="提示词优化"
                type="button"
              >
                <Sparkles className="h-4 w-4" />
              </button>
              <button
                className="flex size-8 shrink-0 items-center justify-center rounded-lg text-white/74 transition-colors hover:bg-white/8 hover:text-white"
                onClick={() => { setPromptToolModel("auto"); void runPromptTool("translate", "auto"); }}
                title="翻译提示词"
                type="button"
              >
                <Languages className="h-4 w-4" />
              </button>
              <button
                className={cn(
                  "mx-1 flex size-8 shrink-0 items-center justify-center rounded-lg transition-colors",
                  advancedSettingsOpen ? "bg-white/10 text-white" : "text-white/86 hover:bg-white/8 hover:text-white"
                )}
                onClick={() => {
                  setAssistMenu(null);
                  setMenu(null);
                  setAdvancedSettingsOpen((current) => !current);
                }}
                title="高级设置"
                type="button"
              >
                <SlidersHorizontal className="h-4 w-4" />
              </button>
              <div className="flex h-8 min-w-[85px] shrink-0 items-center justify-end gap-1.5 text-white/42">
                <Zap className="h-3.5 w-3.5 text-[#FFC65D]" />
                <span className="min-w-5 text-center text-[12px] leading-[15px]">{visibleBillingDisplay.label}</span>
              </div>
            </div>
          </div>
          <button
            className="absolute bottom-4 right-3 flex h-9 w-9 items-center justify-center rounded-xl bg-white text-neutral-900 transition-[filter,opacity] hover:brightness-110 active:brightness-95 disabled:cursor-not-allowed disabled:opacity-50"
            disabled={!canSubmit}
            onClick={() =>
              onSubmit({
                magicMarks,
                mode: activeMode,
                prompt,
                settings: {
                  ...settings,
                  autoValidateMaterial: settings.autoValidateMaterial !== false,
                  camera: settings.camera,
                  count: settings.count,
                  panorama: activeTabLabel || settings.panorama,
                  searchEnabled: settings.searchEnabled !== false,
                },
                tab: activeTab,
              })
            }
            title={missingFrameMessage || (canSubmit ? visibleBillingDisplay.message : "请输入提示词、添加参考素材、标记元素或视频特效")}
            type="button"
          >
            <ArrowUp className="h-[18px] w-[18px]" aria-hidden="true" />
          </button>
        </div>
        <div
          className={cn(
            "grid transition-[grid-template-rows] ease-in-out duration-300",
            advancedSettingsOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
          )}
        >
          <div className="min-h-0 overflow-hidden">
            <div className="mx-2 border-white/8 border-t" />
            <div className="mx-2 pt-3 text-xs font-bold text-neutral-500">高级设置</div>
            <div className="flex flex-col gap-1 px-2 pb-2 pt-1">
              <p className="py-2 text-xs text-white/45">输入数量与图片地址会在提交时校验。当前视频线路未接入联网搜索及人物素材合规校验。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CharacterPresetToolbar({
  anchor,
  onToolAction,
}: {
  anchor?: PresetControlAnchor;
  onToolAction: (action: ImageToolbarAction, option?: string) => void;
}) {
  const [toolbarMenu, setToolbarMenu] = useState<SceneToolbarMenu>(null);
  const iconActions: Array<{ action: Extract<ImageToolbarAction, "annotate" | "rotate" | "download" | "preview">; label: string }> = [
    { action: "annotate", label: "标注" },
    { action: "rotate", label: "旋转" },
    { action: "download", label: "下载" },
    { action: "preview", label: "预览" },
  ];
  const activeToolbarMenu = toolbarMenu;

  return (
    <>
	      <div
	        className="pointer-events-auto absolute flex h-[58px] items-center gap-5 rounded-[14px] border border-white/8 bg-[#262626]/96 px-5 text-[16px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]"
	        style={
	          anchor
	            ? {
	                left: anchor.centerX,
	                top: anchor.topY - (24 * anchor.zoom + 10),
	                transform: `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
	                transformOrigin: "bottom center",
	              }
	            : {
	                left: "50%",
	                top: 168,
	                transform: `translateX(-50%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
	                transformOrigin: "top center",
	              }
	        }
	      >
        <SceneTool active={toolbarMenu === "panorama"} kind="panorama" label="全景" badge="NEW" onClick={() => setToolbarMenu((current) => current === "panorama" ? null : "panorama")} />
        <SceneTool active={false} kind="orbit" label="多角度" onClick={() => {
          setToolbarMenu(null);
          onToolAction("orbit");
        }} />
        <SceneTool active={toolbarMenu === "lighting"} kind="lighting" label="打光" onClick={() => setToolbarMenu((current) => current === "lighting" ? null : "lighting")} />
        <SceneTool active={toolbarMenu === "grid"} kind="grid" label="九宫格" dropdown onClick={() => setToolbarMenu((current) => current === "grid" ? null : "grid")} />
        <SceneTool active={toolbarMenu === "hd"} kind="hd" label="高清" dropdown onClick={() => setToolbarMenu((current) => current === "hd" ? null : "hd")} />
        <SceneTool active={toolbarMenu === "crop"} kind="crop" label="宫格切分" dropdown onClick={() => setToolbarMenu((current) => current === "crop" ? null : "crop")} />
        <SceneTool active={false} kind="localEdit" label="局部编辑" onClick={() => onToolAction("localEdit")} />
        <div className="h-9 w-px bg-white/8" />
        {iconActions.map((item) => (
          <button
            className="flex h-10 w-10 items-center justify-center rounded-[8px] text-white/84 hover:bg-white/8"
            key={item.action}
            onClick={() => onToolAction(item.action)}
            title={item.label}
            type="button"
          >
            <ImageToolbarActionGlyph action={item.action} />
          </button>
        ))}
      </div>
      {activeToolbarMenu ? (
        <SceneToolbarPopover
          anchor={anchor}
          menu={activeToolbarMenu}
          onClose={() => setToolbarMenu(null)}
          onSelect={(option) => {
            onToolAction(activeToolbarMenu, option);
            setToolbarMenu(null);
          }}
        />
      ) : null}
    </>
  );
}

function AudioToVideoComposerPanel({
  anchor,
  billingDefinition,
  defaultModel = "auto",
  membershipSummary,
  modelOptions = [],
  onSubmit,
  referenceImageUrl,
}: {
  anchor?: PresetControlAnchor;
  billingDefinition?: VideoCanvasFunctionDefinition;
  defaultModel?: string;
  membershipSummary?: MembershipSummaryResponse;
  modelOptions?: CanvasModelOption[];
  onSubmit: (prompt: string, settings?: ComposerSettings) => void;
  referenceImageUrl?: string;
}) {
  const [prompt, setPrompt] = useState(AUDIO_TO_VIDEO_PROMPT);
  const [expanded, setExpanded] = useState(false);
  const [menu, setMenu] = useState<ComposerMenu>(null);
  const [assistMenu, setAssistMenu] = useState<"reference" | "mark" | "effects" | "motion" | "role" | null>(null);
  const [settings, setSettings] = useState<ComposerSettings>({
    audio: "开启",
    camera: "摄像机",
    count: "1个",
    duration: "5s",
    model: normalizeModelRef(defaultModel) || "auto",
    modelLabel: "",
    panorama: "全景",
    ratio: "16:9",
    resolution: "720P",
  });
  const showModelMenu = menu === "model";
  const showSettingsMenu = menu === "settings";

  useEffect(() => {
    setSettings((current) => ({ ...current, model: normalizeModelRef(defaultModel) || "auto" }));
  }, [defaultModel]);

  const billingDisplay = useMemo(
    () =>
      resolveVideoCanvasBillingDisplay({
        duration: normalizeVideoDurationValue(settings.duration),
        functionDefinition: billingDefinition,
        membershipSummary,
        modelKind: "video",
        modelOptions,
        modelRef: settings.model,
        resolution: normalizeVideoResolutionValue(settings.resolution),
      }),
    [billingDefinition, membershipSummary, modelOptions, settings.duration, settings.model, settings.resolution],
  );
  const appendPromptSnippet = useCallback((snippet: string) => {
    setPrompt((current) => {
      const trimmed = current.trim();
      return trimmed ? `${trimmed}，${snippet}` : snippet;
    });
    setAssistMenu(null);
  }, []);
  const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1280;
  const viewportHeight = typeof window !== "undefined" ? window.innerHeight : 720;
  const compactComposer = viewportWidth < 980 || viewportHeight < 620;
  const composerWidth = compactComposer ? Math.max(320, viewportWidth - 24) : 1216;
  const composerTop = anchor
    ? compactComposer
      ? Math.max(12, Math.min(anchor.bottomY + 18, viewportHeight - 260 - 12))
      : anchor.bottomY + 18
    : undefined;

  return (
    <div
      className={cn(
        "pointer-events-auto absolute z-[70]",
        compactComposer ? "overflow-x-auto overflow-y-visible" : "overflow-visible"
      )}
      style={
        anchor
          ? {
              height: expanded ? 380 : 260,
              left: compactComposer ? 12 : anchor.centerX,
              top: composerTop,
              transform: compactComposer ? "none" : "translateX(-50%)",
              transformOrigin: "top left",
              width: composerWidth,
            }
          : {
              bottom: 58,
              height: expanded ? 380 : 260,
              left: "50%",
              transform: "translateX(-50%)",
              width: 1216,
            }
      }
    >
      <div className={cn("relative w-[1216px] rounded-[16px] border border-white/8 bg-[#252525]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]", expanded ? "h-[380px]" : "h-[260px]")}>
        {showModelMenu ? (
          <VideoModelPopover
            audioRequired
            currentLabel={getVideoComposerModelLabel(settings, modelOptions)}
            modelOptions={modelOptions}
            onSelect={(option) => {
              setSettings((current) => ({
                ...current,
                model: option.modelRef || current.model || "auto",
                modelLabel: option.label,
              }));
              setMenu(null);
            }}
          />
        ) : null}
        {showSettingsMenu ? (
          <VideoParameterEditor
            audioRequired
            settings={settings}
            modelOptions={modelOptions}
            onChange={(updates) => setSettings((current) => ({ ...current, ...updates }))}
          />
        ) : null}
        {assistMenu === "motion" ? (
          <VideoMotionPresetPopover onSelect={appendPromptSnippet} />
        ) : null}
        {assistMenu === "effects" ? (
          <VideoEffectPresetPopover onSelect={(title) => appendPromptSnippet(`加入${title}特效`)} />
        ) : null}
        {assistMenu === "role" ? (
          <VideoRoleConsentPopover
            onCancel={() => setAssistMenu(null)}
            onUse={() => {
              setAssistMenu(null);
              toast.success("已进入公共角色库素材选择。");
            }}
          />
        ) : null}
        <button aria-label={expanded ? "收起输入区" : "展开输入区"} className="absolute right-6 top-5 text-[32px] text-white/38 hover:text-white/70" onClick={() => setExpanded((current) => !current)} type="button">↗</button>
        <div className="flex items-center gap-3">
	          <span className="rounded-[8px] border border-white/10 bg-white/8 px-4 py-2 text-[13px] text-white">音频生视频</span>
        </div>
        <div className="mt-4 flex items-center gap-3">
          {[
            ["参考", "▦", "reference"],
            ["标记", "◎", "mark"],
            ["特效", "✦", "effects"],
            ["角色库", "♙", "role"],
            ["运镜", "▣", "motion"],
          ].map(([label, icon, key]) => (
            <button
              className={cn(
                "flex h-[72px] w-[92px] flex-col items-center justify-center gap-1 rounded-[8px] border border-white/10 text-[16px] text-white/50 transition hover:bg-white/[0.07] hover:text-white/80",
                assistMenu === key && "border-white/22 bg-white/10 text-white"
              )}
              key={label}
              onClick={() => {
                if (key === "reference") {
                  toast.info("音频和图片参考已连接，可继续补充更多素材。");
                  return;
                }
                if (key === "mark") {
                  appendPromptSnippet("添加人物与构图标记");
                  return;
                }
                setAssistMenu((current) => current === key ? null : (key as typeof assistMenu));
                setMenu(null);
              }}
              type="button"
            >
              <span className="text-[26px] leading-none">{icon}</span>
              <span>{label}</span>
            </button>
          ))}
          {referenceImageUrl ? (
            <div className="relative h-[72px] w-[86px] overflow-hidden rounded-[9px]">
              <img alt="图片参考" className="h-full w-full object-cover" src={referenceImageUrl} />
              <span className="absolute right-1 top-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-black/60 px-1 text-[12px]">1</span>
            </div>
          ) : null}
          <div className="relative flex h-[72px] w-[86px] items-center justify-center rounded-[9px] bg-white/12">
            <Music2 className="h-9 w-9 text-white" />
            <span className="absolute mt-[-44px] ml-[52px] flex h-5 min-w-5 items-center justify-center rounded-full bg-black/60 px-1 text-[12px]">2</span>
          </div>
        </div>
        <textarea
          className={cn("mt-5 w-full resize-none bg-transparent text-[13px] leading-5 text-white/78 outline-none placeholder:text-white/46", expanded ? "h-[182px]" : "h-[62px]")}
          onChange={(event) => setPrompt(event.target.value)}
          placeholder="根据上传的音频生成对应场景画面，镜头语言、节奏、音乐匹配情绪变化，电影级质感。"
          value={prompt}
        />
        <div className="absolute bottom-5 left-5 right-[86px] flex items-center gap-4 overflow-hidden text-[12px] text-white/82">
          <ComposerControl active={menu === "model"} label={getVideoComposerModelLabel(settings, modelOptions)} icon="▥" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
          <span className="rounded-[5px] bg-[#f6c85f] px-1.5 py-0.5 text-[13px] font-bold text-[#2b2314]">VIP</span>
          <ComposerControl active={menu === "settings"} label={formatVideoParameterSummary(settings)} icon="▭" dropdown onClick={() => setMenu((current) => current === "settings" ? null : "settings")} />
          <ComposerControl label="" icon="♬" muted={settings.audio !== "开启"} dropdown onClick={() => setSettings((current) => ({ ...current, audio: current.audio === "关闭" ? "开启" : "关闭" }))} />
          <PromptTranslateButton prompt={prompt} onApply={setPrompt}/>
          <ComposerControl label="" icon="⌘" disabled />
          <ComposerControl
            label={billingDisplay.label}
            icon="⚡"
            muted
            onClick={() => toast.info(billingDisplay.message)}
          />
        </div>
        <button
          className="absolute bottom-5 right-5 flex h-14 w-14 items-center justify-center rounded-[14px] bg-white text-[34px] leading-none text-black hover:bg-white/90"
          onClick={() => {
            onSubmit(prompt, settings);
          }}
          type="button"
        >
          ↑
        </button>
      </div>
    </div>
  );
}

function MultiAngleEditorDialog({
  node,
  onApply,
  onClose,
}: {
  node: CloneNode;
  onApply: (settings: AngleEditorSettings) => void | Promise<void>;
  onClose: () => void;
}) {
  const initialSettings = (node.draftValues?.angleSettings || {}) as Partial<AngleEditorSettings>;
  const [activeTab, setActiveTab] = useState(initialSettings.preset || "自定义");
  const [horizontalAngle, setHorizontalAngle] = useState(
    Number(initialSettings.horizontalAngle ?? 0),
  );
  const [verticalAngle, setVerticalAngle] = useState(Number(initialSettings.verticalAngle ?? 0));
  const [zoom, setZoom] = useState(Number(initialSettings.zoom ?? 50));
  const [submitting, setSubmitting] = useState(false);
  const [promptEnabled, setPromptEnabled] = useState(Boolean(initialSettings.promptEnabled));
  const sourceUrl = getNodeMediaUrl(node) || getNodeSourceMediaUrl(node) || "";
  const tabs = ["自定义", "鱼眼视角", "倾斜视角", "正面俯拍", "正面仰拍", "全景俯拍", "背面视角"];

  const reset = () => {
    setActiveTab("自定义");
    setHorizontalAngle(0);
    setVerticalAngle(0);
    setZoom(50);
    setPromptEnabled(false);
  };

  return (
    <div
      className="fixed inset-0 z-[130] flex items-center justify-center bg-black/30"
      data-canvas-overlay="true"
    >
      <div className="relative h-[min(768px,95vh)] w-[min(1200px,95vw)] overflow-auto rounded-[18px] border border-white/10 bg-[#202020] px-8 py-8 text-white shadow-[0_28px_90px_rgba(0,0,0,0.58)]">
        <div className="flex items-start justify-between">
          <h2 className="text-[16px] font-semibold tracking-[0] text-white">多角度编辑器</h2>
          <button
            className="-mr-2 -mt-2 flex h-12 w-12 cursor-pointer items-center justify-center rounded-[8px] text-white/50 transition hover:bg-white/8 hover:text-white"
            onClick={onClose}
            type="button"
          >
            <X className="h-9 w-9" strokeWidth={1.7} />
          </button>
        </div>

        <div className="mt-6 flex flex-wrap gap-2">
          {tabs.map((tab) => (
            <button
              className={cn(
                "h-10 min-w-[110px] cursor-pointer rounded-[10px] border border-white/8 px-3 text-sm font-medium text-white/45 transition hover:bg-white/8 hover:text-white/80",
                activeTab === tab && "border-transparent bg-white/14 text-white",
              )}
              key={tab}
              onClick={() => {
                const preset = anglePresets[tab];
                setActiveTab(tab);
                setHorizontalAngle(preset.horizontalAngle);
                setVerticalAngle(preset.verticalAngle);
                setZoom(preset.zoom);
              }}
              type="button"
            >
              {tab}
            </button>
          ))}
        </div>

        <div className="mt-6 flex gap-8">
          <div className="relative flex h-[min(42vh,480px)] w-[min(42vw,480px)] shrink-0 items-center justify-center overflow-hidden rounded-[18px] bg-[#323232]">
            <div className="absolute h-[300px] w-[300px] rounded-full border border-white/24" />
            <div className="absolute h-[300px] w-[300px] rounded-full border border-white/14 [clip-path:ellipse(34%_50%_at_50%_50%)]" />
            <div className="absolute h-[300px] w-[300px] rounded-full border border-white/14 [clip-path:ellipse(50%_22%_at_50%_50%)]" />
            <div className="absolute h-[240px] w-[300px] rounded-full border border-white/14" />
            <div className="absolute h-[165px] w-[300px] rounded-full border border-white/12" />
            <div className="absolute h-px w-[308px] bg-white/16" />
            <div className="absolute h-[308px] w-px bg-white/16" />
            <button
              className="absolute top-10 text-[32px] text-white/42"
              onClick={() => {
                setActiveTab("自定义");
                setVerticalAngle((value) => Math.min(90, value + 5));
              }}
              type="button"
            >
              ⌃
            </button>
            <button
              className="absolute bottom-9 text-[32px] text-white/42"
              onClick={() => {
                setActiveTab("自定义");
                setVerticalAngle((value) => Math.max(-30, value - 5));
              }}
              type="button"
            >
              ⌄
            </button>
            <button
              className="absolute left-10 text-[42px] text-white/42"
              onClick={() => {
                setActiveTab("自定义");
                setHorizontalAngle((value) => Math.max(-180, value - 10));
              }}
              type="button"
            >
              ‹
            </button>
            <button
              className="absolute right-10 text-[42px] text-white/42"
              onClick={() => {
                setActiveTab("自定义");
                setHorizontalAngle((value) => Math.min(180, value + 10));
              }}
              type="button"
            >
              ›
            </button>
            <div className="relative h-[124px] w-[124px] overflow-hidden rounded-[10px] border border-white/50 bg-white shadow-[0_14px_34px_rgba(0,0,0,0.32)]">
              <img
                alt="多角度参考图"
                className="h-full w-full object-contain"
                draggable={false}
                onDragStart={preventNativeImageDrag}
                src={sourceUrl}
              />
            </div>
          </div>

          <div className="min-w-0 flex-1 pt-4">
            <AngleSlider
              label="水平环绕"
              max={180}
              min={-180}
              onChange={(value) => {
                setActiveTab("自定义");
                setHorizontalAngle(value);
              }}
              suffix="°"
              value={horizontalAngle}
            />
            <AngleSlider
              label="垂直俯仰"
              max={90}
              min={-30}
              onChange={(value) => {
                setActiveTab("自定义");
                setVerticalAngle(value);
              }}
              suffix="°"
              value={verticalAngle}
            />
            <AngleSlider
              label="景别缩放"
              max={100}
              min={0}
              onChange={(value) => {
                setActiveTab("自定义");
                setZoom(value);
              }}
              value={zoom}
              valueLabel={zoom < 35 ? "远景" : zoom > 70 ? "近景" : "中景"}
            />
            <p className="mt-6 text-sm text-white/45">
              {anglePresets[activeTab]?.prompt ||
                `按环绕 ${horizontalAngle}°、俯仰 ${verticalAngle}°、缩放 ${zoom}% 请求视角编辑。中央图片为参考原图。`}
            </p>
          </div>
        </div>

        <button
          className="absolute bottom-8 left-14 flex h-12 cursor-pointer items-center gap-3 rounded-[10px] px-2 text-[13px] text-white/38 transition hover:bg-white/8 hover:text-white/70"
          onClick={reset}
          type="button"
        >
          ↺<span>重置参数</span>
        </button>
        <div className="absolute bottom-8 right-8 flex items-center gap-5">
          <button
            className="flex h-[64px] w-[64px] cursor-pointer items-center justify-center rounded-[14px] bg-white text-[42px] leading-none text-black transition hover:bg-white/90"
            disabled={submitting || !sourceUrl}
            aria-label="生成多角度图片"
            onClick={async () => {
              setSubmitting(true);
              try {
                await onApply({
                  preset: activeTab,
                  horizontalAngle,
                  promptEnabled,
                  verticalAngle,
                  zoom,
                });
              } catch (e) {
                toast.error(e instanceof Error ? e.message : "视角生成失败");
              } finally {
                setSubmitting(false);
              }
            }}
            type="button"
          >
            {submitting ? "…" : "↑"}
          </button>
        </div>
      </div>
    </div>
  );
}

function AngleSlider({
  label,
  max,
  min,
  onChange,
  suffix = "",
  value,
  valueLabel,
}: {
  label: string;
  max: number;
  min: number;
  onChange: (value: number) => void;
  suffix?: string;
  value: number;
  valueLabel?: string;
}) {
  return (
    <div className="mb-10 grid grid-cols-[128px_1fr_86px] items-center gap-6">
      <span className="text-[13px] text-white/42">{label}</span>
      <input
        className="h-[4px] w-full accent-white"
        max={max}
        min={min}
        onChange={(event) => onChange(Number(event.target.value))}
        type="range"
        value={value}
      />
      <span className="text-right text-[13px] text-white/82">{valueLabel || `${Math.round(value)}${suffix}`}</span>
    </div>
  );
}

function ImageToolbarActionGlyph({ action }: { action: Extract<ImageToolbarAction, "annotate" | "rotate" | "download" | "preview"> }) {
  if (action === "annotate") {
    return (
      <svg aria-hidden="true" className="h-[26px] w-[26px]" fill="none" viewBox="0 0 26 26">
        <path d="M5.2 19.2c4.8-1.4 4.1-6.6 8.1-8.8l4.5-2.5 2.2 3.8-4.5 2.6c-3.8 2.1-4.6 5.8-9.6 7" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
        <path d="m16.8 8.6 2.3 4" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
      </svg>
    );
  }

  if (action === "rotate") {
    return (
      <svg aria-hidden="true" className="h-[26px] w-[26px]" fill="none" viewBox="0 0 26 26">
        <path d="M13 5v16" stroke="currentColor" strokeLinecap="round" strokeWidth="2" />
        <path d="M6.4 11.2c1.2-2.1 3.7-3.4 6.6-3.4 4.2 0 7.6 2.2 7.6 5s-3.4 5-7.6 5c-2.9 0-5.4-1.1-6.6-3.1" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" />
      </svg>
    );
  }

  if (action === "download") {
    return (
      <svg aria-hidden="true" className="h-[26px] w-[26px]" fill="none" viewBox="0 0 26 26">
        <path d="M13 4.5v11" stroke="currentColor" strokeLinecap="round" strokeWidth="2.1" />
        <path d="m8.8 11.5 4.2 4.2 4.2-4.2" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.1" />
        <path d="M6.5 20.5h13" stroke="currentColor" strokeLinecap="round" strokeWidth="2.1" />
      </svg>
    );
  }

  return (
    <svg aria-hidden="true" className="h-[26px] w-[26px]" fill="none" viewBox="0 0 26 26">
      <path d="M9.4 5.6H5.8v3.6M16.6 5.6h3.6v3.6M9.4 20.4H5.8v-3.6M16.6 20.4h3.6v-3.6" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2.1" />
      <path d="M8 8 5.8 5.8M18 8l2.2-2.2M8 18l-2.2 2.2M18 18l2.2 2.2" stroke="currentColor" strokeLinecap="round" strokeWidth="2.1" />
    </svg>
  );
}

type PresetFloatingToolbarItem =
  | [string, string]
  | {
      label: string;
      message?: string;
      onClick?: () => void;
    };

function PresetFloatingToolbar({
  anchor,
  compact = false,
  items,
}: {
  anchor?: PresetControlAnchor;
  compact?: boolean;
  items: PresetFloatingToolbarItem[];
}) {
  return (
    <div
      className={cn(
        "pointer-events-auto absolute flex items-center border border-white/8 bg-[#262626]/96 text-white/78 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]",
        compact
          ? "h-[41px] w-[393px] gap-1 rounded-[8px] px-1"
          : "h-[58px] gap-2 rounded-[16px] px-4"
      )}
      style={
        anchor
          ? {
              left: anchor.centerX,
              top: anchor.topY - (compact ? 10 : 24 * anchor.zoom + 10),
              transform: compact
                ? "translateX(-50%) translateY(-100%)"
                : `translateX(-50%) translateY(-100%) scale(${OFFICIAL_IMAGE_TOOLBAR_SCALE})`,
              transformOrigin: "bottom center",
            }
          : { left: "50%", top: 94, transform: "translateX(-50%)" }
      }
    >
      {items.map((item) => {
        const label = Array.isArray(item) ? item[0] : item.label;
        const message = Array.isArray(item) ? item[1] : item.message;
        const onClick = Array.isArray(item) ? undefined : item.onClick;
        const compactWidth =
          label === "批量生成分镜" ? 122 : label === "批量生视频" ? 109 : 96;
        return (
          <button
            className={cn(
              "flex items-center justify-center rounded-[8px] hover:bg-white/8 hover:text-white",
              compact ? "h-8 text-[14px] font-medium" : "h-10 gap-2 rounded-[10px] px-3 text-[15px]"
            )}
            key={label}
            onClick={() => {
              if (onClick) {
                onClick();
                return;
              }
              if (message) toast.info(message);
            }}
            style={compact ? { width: compactWidth } : undefined}
            type="button"
          >
            {!compact ? (
              <span className="flex h-5 w-5 items-center justify-center rounded-[5px] border border-white/18 text-[11px] text-white/58">
                {label.slice(0, 1)}
              </span>
            ) : null}
            {label}
          </button>
        );
      })}
    </div>
  );
}

function PresetComposerPanel({
  anchor,
  billingDefinition,
  defaultModel = "auto",
  membershipSummary,
  modelKind = "image",
  modelOptions = [],
  onSubmit,
  prompt,
  thumbnailUrl,
  title,
}: {
  anchor?: PresetControlAnchor;
  billingDefinition?: VideoCanvasFunctionDefinition;
  defaultModel?: string;
  membershipSummary?: MembershipSummaryResponse;
  modelKind?: CanvasModelKind;
  modelOptions?: CanvasModelOption[];
  onSubmit: (prompt: string, settings?: ComposerSettings) => void;
  prompt: string;
  thumbnailUrl?: string;
  title: string;
}) {
  const [menu, setMenu] = useState<ComposerMenu>(null);
  const [expanded, setExpanded] = useState(false);
  const [draftPrompt, setDraftPrompt] = useState(prompt);
  const [settings, setSettings] = useState<ComposerSettings>({
    camera: "摄像机",
    count: modelKind === "video" ? "1个" : "1张",
    duration: "5s",
    model: normalizeModelRef(defaultModel) || "auto",
    panorama: "全景",
    ratio: "16:9",
    resolution: modelKind === "video" ? "720P" : "2K",
  });
  const activeMenu = menu === "model" || menu === "ratio" || menu === "resolution" ? menu : null;

  useEffect(() => {
    setDraftPrompt(prompt);
  }, [prompt]);

  useEffect(() => {
    setSettings((current) => ({ ...current, model: normalizeModelRef(defaultModel) || "auto" }));
  }, [defaultModel]);

  const billingDisplay = useMemo(
    () =>
      resolveVideoCanvasBillingDisplay({
        duration: modelKind === "video" ? 5 : null,
        functionDefinition: billingDefinition,
        imageCount: 1,
        membershipSummary,
        modelKind,
        modelOptions,
        modelRef: settings.model,
        resolution: modelKind === "video" ? normalizeVideoResolutionValue(settings.resolution) : null,
      }),
    [billingDefinition, membershipSummary, modelKind, modelOptions, settings.model, settings.resolution],
  );

	return (
	  <div
	    className="pointer-events-auto absolute overflow-visible"
	    style={
	      anchor
	        ? {
	            height: (expanded ? 358 : PRESET_COMPOSER_BASE_HEIGHT) * OFFICIAL_COMPOSER_SCALE,
	            left: anchor.centerX,
	            top: anchor.bottomY + 10,
	            transform: "translateX(-50%)",
	            width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
	          }
	        : {
	            bottom: 64,
	            height: (expanded ? 358 : PRESET_COMPOSER_BASE_HEIGHT) * OFFICIAL_COMPOSER_SCALE,
	            left: "50%",
	            transform: "translateX(-50%)",
	            width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
	          }
	    }
	  >
	    <div
	      className={cn("relative w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]", expanded ? "h-[358px]" : "h-[238px]")}
	      style={{ transform: `scale(${OFFICIAL_COMPOSER_SCALE})`, transformOrigin: "top left" }}
	    >
	      {activeMenu ? (
	        <ComposerPopover
	          customOptions={
	            activeMenu === "resolution" && modelKind === "video"
	              ? [
	                  { label: "480P", value: "480P" },
	                  { label: "720P", value: "720P" },
	                  { label: "1080P", value: "1080P" },
	                ]
	              : undefined
	          }
	          menu={activeMenu}
	          modelKind={modelKind}
	          modelOptions={modelOptions}
	          onSelect={(option) => {
	            setSettings((current) => ({ ...current, [activeMenu]: option }));
	            setMenu(null);
	          }}
	        />
	      ) : null}
	      <button aria-label={expanded ? "收起输入区" : "展开输入区"} className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => setExpanded((current) => !current)} type="button">↗</button>
	      <div className="mb-5 flex items-center gap-3">
	        <span className="rounded-[10px] border border-white/10 bg-[#292929] px-3 py-2 text-[14px] text-white/62">{title}</span>
	        {thumbnailUrl ? (
	          <div className="h-[54px] w-[54px] overflow-hidden rounded-[10px]">
	            <img alt="" className="h-full w-full object-cover" src={thumbnailUrl} />
	          </div>
	        ) : null}
	      </div>
	      <textarea
	        className={cn("w-full resize-none bg-transparent text-[13px] leading-5 text-white/64 outline-none placeholder:text-white/38", expanded ? "h-[198px]" : "h-[78px]")}
	        onChange={(event) => setDraftPrompt(event.target.value)}
	        placeholder="描述你想要生成的画面内容，按 / 呼出指令，@引用素材"
	        value={draftPrompt}
	      />
	      <div className="absolute bottom-5 left-5 right-[84px] flex items-center gap-4 overflow-hidden text-[12px] text-white/78">
	        <ComposerControl active={menu === "model"} label={getCanvasModelDisplayName(settings.model, modelOptions)} icon="◉" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
	        <ComposerControl active={menu === "ratio"} label={settings.ratio} icon="▭" dropdown onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")} />
	        <ComposerControl active={menu === "resolution"} label={settings.resolution} dropdown onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")} />
	        <span className="text-white/55">{settings.count}</span>
	        <ComposerControl
            label={billingDisplay.label}
            icon="⚡"
            muted
            onClick={() => toast.info(billingDisplay.message)}
          />
	      </div>
	      <button
	        className="absolute bottom-5 right-5 flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
	        onClick={() => {
            onSubmit(draftPrompt, settings);
          }}
	        type="button"
	      >
	        ↑
	      </button>
	    </div>
	  </div>
	);
}

function SceneTool({
  active,
  badge,
  dropdown,
  kind,
  label,
  onClick,
}: {
  active?: boolean;
  badge?: string;
  dropdown?: boolean;
  kind: "panorama" | "orbit" | "lighting" | "grid" | "hd" | "crop" | "localEdit";
  label: string;
  onClick: () => void;
}) {
  return (
    <button
      className={cn("flex h-10 items-center gap-2 whitespace-nowrap rounded-[8px] px-1 text-white/82 hover:bg-white/8", active && "bg-white/10 text-white")}
      onClick={onClick}
      type="button"
    >
      <SceneToolIcon kind={kind} />
      <span className="whitespace-nowrap">{label}</span>
      {badge ? (
        <span className="rounded-[7px] bg-[#0e6371] px-2 py-0.5 text-[14px] font-bold tracking-wide text-[#42eaff]">
          {badge}
        </span>
      ) : null}
      {dropdown ? <span className="text-[16px] text-white/58">⌄</span> : null}
    </button>
  );
}

function SceneToolbarPopover({
  anchor,
  menu,
  onClose,
  onSelect,
}: {
  anchor?: PresetControlAnchor;
  menu: Exclude<SceneToolbarMenu, null>;
  onClose: () => void;
  onSelect?: (option?: string) => void;
}) {
  const [lightingPrompt, setLightingPrompt] = useState("");
  const [customGridOpen, setCustomGridOpen] = useState(false);
  const popoverOffset: Record<Exclude<SceneToolbarMenu, null>, number> = {
    crop: 170,
    grid: -38,
    hd: 70,
    lighting: -145,
    orbit: -245,
    panorama: -360,
  };
  const popoverScale = (anchor ? OFFICIAL_IMAGE_TOOLBAR_SCALE : 1) * OFFICIAL_DROPDOWN_SCALE;
  const officialPopoverStyle = {
    left: anchor ? anchor.centerX + popoverOffset[menu] : `calc(50% + ${popoverOffset[menu]}px)`,
    top: anchor ? anchor.topY - (24 * anchor.zoom + 10) + 8 : 168,
    transform: `translateX(-50%) scale(${popoverScale})`,
    transformOrigin: "top center",
  };
  const popoverSurfaceStyle = {
    background: "rgba(31, 31, 31, 0.92)",
    border: "0.5px solid #363636",
    borderRadius: 12,
    boxShadow: "0 4px 10px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12)",
    WebkitBackdropFilter: "blur(16px)",
    backdropFilter: "blur(16px)",
  };
  const quickOptions: Record<"orbit" | "panorama", string[]> = {
    orbit: ["正侧背三视角", "八方向参考", "环绕镜头"],
    panorama: ["全景", "半身", "近景"],
  };
  const nineGridOptions = [
    "多机位九宫格",
    "剧情推演四宫格",
    "角色脸部三视图",
    "角色设定图",
    "场景设定图",
    "产品设定图",
    "25宫格连贯分镜",
    "电影级光影校正",
    "角色三视图生成",
    "画面推演 - 3秒后",
    "画面推演 - 5秒前",
  ];
  const hdToolOptions: Array<{ key: string; label: string; active?: boolean }> = [
    { key: "upscale", label: "高清", active: true },
    { key: "outpaint", label: "扩图" },
    { key: "repaint", label: "重绘" },
    { key: "erase", label: "擦除" },
    { key: "removeBg", label: "抠图" },
    { key: "crop", label: "裁剪" },
  ];
  const cropOptions = [
    { type: 4, label: "4宫格 (2×2)" },
    { type: 9, label: "9宫格 (3×3)" },
    { type: 16, label: "16宫格 (4×4)" },
    { type: 25, label: "25宫格 (5×5)" },
  ];

  if (menu === "lighting") {
    return (
      <div
        className="pointer-events-auto absolute z-40 w-[420px] -translate-x-1/2 p-4 text-white"
        style={{ ...officialPopoverStyle, ...popoverSurfaceStyle }}
      >
        <div className="mb-3 flex items-center justify-between">
          <div className="font-semibold text-[15px] text-white/86">打光</div>
          <button className="rounded-[8px] px-2 py-1 text-white/42 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">×</button>
        </div>
        <textarea
          className="h-24 w-full resize-none rounded-[10px] border border-white/10 bg-[#1d1d1d] px-3 py-2 text-[13px] text-white/78 outline-none placeholder:text-white/34"
          onChange={(event) => setLightingPrompt(event.target.value)}
          placeholder="简单描述你想实现的打光效果，或者情绪风格"
          value={lightingPrompt}
        />
        <button
          className="mt-3 h-10 w-full rounded-[10px] bg-white font-semibold text-black hover:bg-white/90"
          onClick={() => onSelect?.(lightingPrompt.trim() || "柔和自然光")}
          type="button"
        >
          应用打光
        </button>
      </div>
    );
  }

  if (menu === "grid") {
    return (
      <div
        className="pointer-events-auto absolute z-40 flex w-[283px] -translate-x-1/2 flex-col gap-[2px] p-2 font-sans"
        role="menu"
        style={{ ...officialPopoverStyle, ...popoverSurfaceStyle, transform:"translateX(-50%)", maxHeight:"calc(100vh - 32px)", overflowY:"auto", top: Math.max(16, Math.min(Number(officialPopoverStyle.top), (typeof window !== "undefined" ? window.innerHeight : 720) - 488)) }}
      >
        {nineGridOptions.map((option) => (
          <button
            className="flex h-[39.25px] w-full shrink-0 cursor-pointer items-center gap-2 rounded-[6px] px-2 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12"
            key={option}
            onClick={() => onSelect?.(option)}
            onPointerDown={(event) => event.stopPropagation()}
            role="menuitem"
            type="button"
          >
            <span className="flex size-5 shrink-0 items-center justify-center"><NineGridPresetGlyph /></span>
            <span className="min-w-0 flex-1 truncate text-[14px] font-normal leading-[19.25px] text-white/86">
              {option}
            </span>
          </button>
        ))}
      </div>
    );
  }

  if (menu === "hd") {
    return (
      <div
        className="pointer-events-auto absolute z-40 flex w-[240px] -translate-x-1/2 flex-col gap-1.5 p-2 font-sans"
        role="menu"
        style={{ ...officialPopoverStyle, ...popoverSurfaceStyle }}
      >
        {hdToolOptions.map((option) => (
          <button
            className={cn(
              "flex h-[40px] w-full shrink-0 items-center gap-3 rounded-[8px] px-3 text-left text-[13px] font-normal leading-snug text-white/86 transition-colors",
              option.active ? "bg-white/16" : "hover:bg-white/8 active:bg-white/12"
            )}
            key={option.key}
            onClick={() => onSelect?.(option.label)}
            onPointerDown={(event) => event.stopPropagation()}
            role="menuitem"
            type="button"
          >
            <ImageToolMenuGlyph tool={option.key} />
            <span className="min-w-0 flex-1">{option.label}</span>
          </button>
        ))}
      </div>
    );
  }

  if (menu === "crop") {
    return (
      <div
        className="pointer-events-auto absolute z-40 flex w-[300px] -translate-x-1/2 flex-col overflow-visible p-3 font-sans"
        onMouseLeave={() => setCustomGridOpen(false)}
        role="menu"
        style={{ ...officialPopoverStyle, ...popoverSurfaceStyle }}
      >
        {cropOptions.map((option) => (
          <button
            className="flex h-[40px] w-full cursor-pointer items-center rounded-[8px] px-3 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12"
            key={option.type}
            onClick={() => onSelect?.(option.label)}
            onPointerDown={(event) => event.stopPropagation()}
            role="menuitem"
            type="button"
          >
            <span className="min-w-0 truncate text-[13px] font-normal leading-snug text-white/86">
              {option.label}
            </span>
          </button>
        ))}
        <div className="mx-4 my-2 h-px bg-white/12" />
        <div onMouseEnter={() => setCustomGridOpen(true)}>
          <button
            className={cn(
              "flex h-[40px] w-full cursor-pointer items-center justify-between rounded-[8px] px-3 text-left transition-colors duration-200 hover:bg-white/8 active:bg-white/12",
              customGridOpen && "bg-white/8"
            )}
            onPointerDown={(event) => event.stopPropagation()}
            role="menuitem"
            type="button"
          >
            <span className="min-w-0 truncate text-[13px] font-normal leading-snug text-white/86">自定义</span>
            <ChevronDown className="h-5 w-5 shrink-0 -rotate-90 text-white/60" />
          </button>
        </div>
        {customGridOpen ? (
          <div
            className="absolute left-[calc(100%+8px)] top-0 w-[420px] p-4"
            onMouseEnter={() => setCustomGridOpen(true)}
            style={popoverSurfaceStyle}
          >
            <CustomGridPicker onSelect={(rows, columns) => onSelect?.(`${columns} x ${rows}`)} />
          </div>
        ) : null}
      </div>
    );
  }

  return (
    <div
      className="pointer-events-auto absolute z-40 w-[180px] -translate-x-1/2 p-1.5 text-white"
      style={{ ...officialPopoverStyle, ...popoverSurfaceStyle }}
    >
      {quickOptions[menu].map((option) => (
        <button
          className="flex h-9 w-full items-center justify-between rounded-[8px] px-3 text-left text-[13px] text-white/76 hover:bg-white/8 hover:text-white"
          key={option}
          onClick={() => onSelect?.(option)}
          type="button"
        >
          {option}
          <span className="text-white/28">›</span>
        </button>
      ))}
    </div>
  );
}

function NineGridPresetGlyph() {
  return (
    <svg aria-hidden="true" className="h-8 w-8 shrink-0 text-white/46" fill="none" viewBox="0 0 20 20">
      <path d="M3 7.2 10 3.4l7 3.8-7 3.8-7-3.8Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.5" />
      <path d="m3 10.2 7 3.8 7-3.8M3 13.2l7 3.8 7-3.8" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" />
    </svg>
  );
}

function ImageToolMenuGlyph({ tool }: { tool: string }) {
  if (tool === "upscale") {
    return (
      <span className="flex h-[24px] min-w-[36px] items-center justify-center rounded-[4px] border border-white/34 text-[14px] font-bold leading-none text-white/46">
        HD
      </span>
    );
  }

  if (tool === "outpaint") {
    return (
      <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
        <path d="M1.8 5V1.8H5M9 1.8h3.2V5M12.2 9v3.2H9M5 12.2H1.8V9" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.4" />
      </svg>
    );
  }

  if (tool === "repaint") {
    return (
      <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
        <path d="M3 10.8 10.8 3l1.2 1.2-7.8 7.8H3v-1.2Z" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.3" />
      </svg>
    );
  }

  if (tool === "erase") {
    return (
      <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
        <path d="m2.5 8.5 5.8-5.8 3 3-5.8 5.8H3.2L2.5 8.5Z" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.3" />
        <path d="M6.2 11.5h5" stroke="currentColor" strokeLinecap="round" strokeWidth="1.3" />
      </svg>
    );
  }

  if (tool === "removeBg") {
    return (
      <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
        <path d="M2 2h10v10H2V2Z" stroke="currentColor" strokeWidth="1.2" />
        <path d="M2 12 12 2M2 8l6-6M6 12l6-6" stroke="currentColor" strokeWidth="1.1" />
      </svg>
    );
  }

  return (
    <svg aria-hidden="true" className="h-[26px] w-[26px] shrink-0 text-white/46" fill="none" viewBox="0 0 14 14">
      <path d="M4 1.8v8.2h8.2M1.8 4h8.2v8.2" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.3" />
    </svg>
  );
}

function CustomGridPicker({ onSelect }: { onSelect: (rows: number, columns: number) => void }) {
  const [hovered, setHovered] = useState({ columns: 3, rows: 3 });

  return (
    <div className="flex w-full flex-col gap-5">
      <div className="flex items-center justify-between px-0.5">
        <span className="text-[13px] font-normal leading-none text-white/52">自定义宫格</span>
        <span className="text-[13px] font-semibold leading-none text-white/86">
          {hovered.columns} × {hovered.rows}
        </span>
      </div>
      <div className="grid grid-cols-5 gap-3" onMouseLeave={() => setHovered({ columns: 3, rows: 3 })}>
        {Array.from({ length: 25 }).map((_, index) => {
          const rows = Math.floor(index / 5) + 1;
          const columns = (index % 5) + 1;
          const active = rows <= hovered.rows && columns <= hovered.columns;
          return (
            <button
              className={cn(
                "h-[54px] w-[54px] rounded-[8px] border transition-colors duration-75",
                active ? "border-[#2f8dff] bg-[#315b91]" : "border-white/0 bg-white/14 hover:bg-white/18"
              )}
              key={index}
              onClick={() => onSelect(rows, columns)}
              onMouseEnter={() => setHovered({ columns, rows })}
              onPointerDown={(event) => event.stopPropagation()}
              type="button"
            />
          );
        })}
      </div>
    </div>
  );
}

function SceneToolIcon({ kind }: { kind: "panorama" | "orbit" | "lighting" | "grid" | "hd" | "crop" | "localEdit" }) {
  if (kind === "panorama") {
    return <span className="font-['Barlow_Condensed',sans-serif] text-[16px] font-bold leading-none text-white/86">720</span>;
  }
  if (kind === "localEdit") {
    return <Wand2 className="h-[18px] w-[18px]" strokeWidth={1.8} />;
  }
  if (kind === "hd") {
    return (
      <span className="flex h-[22px] min-w-[26px] items-center justify-center rounded-[4px] border border-white/72 px-1 text-[12px] font-bold leading-none text-white/86">
        HD
      </span>
    );
  }
  if (kind === "grid") {
    return (
      <svg aria-hidden="true" className="h-[22px] w-[22px]" fill="none" viewBox="0 0 22 22">
        <path d="M3.5 4.5h15M3.5 11h15M3.5 17.5h15M4.5 3.5v15M11 3.5v15M17.5 3.5v15" stroke="currentColor" strokeLinecap="round" strokeWidth="1.7" />
      </svg>
    );
  }
  if (kind === "crop") {
    return (
      <svg aria-hidden="true" className="h-[22px] w-[22px]" fill="none" viewBox="0 0 22 22">
        <path d="M6 3.5v12.5h12.5M3.5 6h12.5v12.5M8 8h6" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      </svg>
    );
  }
  if (kind === "lighting") {
    return (
      <svg aria-hidden="true" className="h-[22px] w-[22px]" fill="none" viewBox="0 0 22 22">
        <path d="M4 7.5h14M6 11h10M8.5 14.5h5" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
        <path d="M16.5 4.5v3M15 6h3" stroke="currentColor" strokeLinecap="round" strokeWidth="1.5" />
      </svg>
    );
  }
  return (
    <svg aria-hidden="true" className="h-[22px] w-[22px]" fill="none" viewBox="0 0 22 22">
      <path d="M16.8 7.1a6.2 6.2 0 0 0-11.6 1.8M5.2 8.9H2.9l1.7 1.7M5.2 14.9a6.2 6.2 0 0 0 11.6-1.8M16.8 13.1h2.3l-1.7-1.7" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
      <circle cx="11" cy="11" r="2.2" stroke="currentColor" strokeWidth="1.6" />
    </svg>
  );
}

function PromptComposer({
  anchor,
  billingFeature = null,
  defaultModel = "auto",
  functionDefinition,
  membershipSummary,
  modelKind = "image",
  modelOptions = [],
  nodes = [],
  onOpenStyleLibrary,
  onStartMarkSelection,
  onStartReferenceSelection,
  onSubmit,
  referenceThumbnailUrl,
}: {
  anchor?: PresetControlAnchor;
  billingFeature?: ImageToolCreditFeature | null;
  defaultModel?: string;
  functionDefinition?: VideoCanvasFunctionDefinition;
  membershipSummary?: MembershipSummaryResponse;
  modelKind?: CanvasModelKind;
  modelOptions?: CanvasModelOption[];
  nodes?: CloneNode[];
  onOpenStyleLibrary?: () => void;
  onStartMarkSelection?: () => void;
  onStartReferenceSelection?: () => void;
  onSubmit: (payload: ComposerSubmitPayload) => void;
  referenceThumbnailUrl?: string;
}) {
  const [menu, setMenu] = useState<ComposerMenu>(null);
  const [prompt, setPrompt] = useState("");
  const [expanded, setExpanded] = useState(false);
  const [references, setReferences] = useState<string[]>([]);
  const [slashScene, setSlashScene] = useState<string | null>(null);
  const [settings, setSettings] = useState<ComposerSettings>({
    camera: "摄像机",
    count: "1张",
    model: normalizeModelRef(defaultModel) || "auto",
    panorama: "全景",
    ratio: "16:9",
    resolution: "2K",
  });

  useEffect(() => {
    setSettings((current) => ({ ...current, model: normalizeModelRef(defaultModel) || "auto" }));
  }, [defaultModel]);
  const referenceNodes = useMemo(
    () => nodes.filter((node) => node.kind !== "script" && node.inputType !== "audio"),
    [nodes]
  );
  const billingDisplay = useMemo(
    () =>
      resolveVideoCanvasBillingDisplay({
        billingFeature,
        functionDefinition,
        imageCount: Math.max(1, Number.parseInt(settings.count, 10) || 1),
        membershipSummary,
        modelKind,
        modelOptions,
        modelRef: settings.model,
      }),
    [
      billingFeature,
      functionDefinition,
      membershipSummary,
      modelKind,
      modelOptions,
      settings.count,
      settings.model,
    ],
  );

  const insertReference = useCallback((node: CloneNode) => {
    const label = node.title || "节点";
    setPrompt((current) => `${current.replace(/@$/, "").trimEnd()} @${label} `);
    setReferences((current) => (current.includes(node.id) ? current : [...current, node.id]));
    setMenu(null);
  }, []);

  const insertSlashScene = useCallback((scene: string) => {
    setSlashScene(scene);
    setPrompt((current) => `${current.replace(/\/$/, "").trimEnd()} /${scene} `);
    setMenu(null);
  }, []);

  const applyComposerOption = useCallback((activeMenu: Exclude<ComposerMenu, null>, option: string) => {
    if (activeMenu === "model" || activeMenu === "ratio" || activeMenu === "resolution" || activeMenu === "camera" || activeMenu === "panorama" || activeMenu === "count") {
      setSettings((current) => ({ ...current, [activeMenu]: option }));
    } else if (activeMenu === "style" || activeMenu === "mark" || activeMenu === "focus" || activeMenu === "translate" || activeMenu === "settings") {
      setPrompt((current) => `${current.trimEnd()} ${option}`.trimStart());
    }
    setMenu(null);
  }, []);

  const onPromptChange = useCallback((event: ReactChangeEvent<HTMLTextAreaElement>) => {
    const value = event.target.value;
    setPrompt(value);
    const beforeCursor = value.slice(0, event.target.selectionStart ?? value.length);
    if (beforeCursor.endsWith("@")) {
      setMenu("reference");
      return;
    }
    if (beforeCursor.endsWith("/")) {
      setMenu("slash");
      return;
    }
  }, []);

  return (
    <div
      className="pointer-events-auto absolute overflow-visible"
      style={
        anchor
          ? {
              height: (expanded ? 430 : PROMPT_COMPOSER_BASE_HEIGHT) * OFFICIAL_COMPOSER_SCALE,
              left: anchor.centerX,
              top: anchor.bottomY + 10,
              transform: "translateX(-50%)",
              width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
            }
          : {
              bottom: 64,
              height: (expanded ? 430 : PROMPT_COMPOSER_BASE_HEIGHT) * OFFICIAL_COMPOSER_SCALE,
              left: "50%",
              transform: "translateX(-50%)",
              width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
            }
      }
    >
      <div
        className={cn("relative w-[895px] rounded-[18px] border border-white/8 bg-[#262626]/98 p-5 text-white shadow-[0_24px_84px_rgba(0,0,0,0.48)]", expanded ? "h-[430px]" : "h-[286px]")}
        style={{ transform: `scale(${OFFICIAL_COMPOSER_SCALE})`, transformOrigin: "top left" }}
      >
      <button aria-label={expanded ? "收起输入框" : "展开输入框"} className="absolute right-5 top-5 text-[26px] text-white/45 hover:text-white" onClick={() => setExpanded(current => !current)} type="button">↗</button>
      <div className="flex items-center gap-3">
        {onStartReferenceSelection ? (
          <button className="rounded-full bg-white/8 px-3 py-1.5 text-[12px] text-white/75" onClick={onStartReferenceSelection} type="button">＋ 参考</button>
        ) : null}
        {onStartMarkSelection ? (
          <button className="rounded-full bg-white/8 px-3 py-1.5 text-[12px] text-white/75" onClick={onStartMarkSelection} type="button">◎ 标记</button>
        ) : null}
        {onOpenStyleLibrary ? (
          <button className="rounded-full bg-white/8 px-3 py-1.5 text-[12px] text-white/75" onClick={onOpenStyleLibrary} type="button">◇ 风格</button>
        ) : null}
        {!onStartReferenceSelection && [
          ["style", "◇", "风格"],
          ["mark", "⌖", "标记"],
          ["focus", "▣", "聚焦"],
        ].map(([type, icon, label]) => (
          <PromptActionButton
            active={menu === type}
            icon={icon}
            key={label}
            label={label}
            onClick={() => setMenu((current) => current === type ? null : type as ComposerMenu)}
          />
        ))}
        {referenceThumbnailUrl ? (
          <div className="relative h-[70px] w-[70px] overflow-hidden rounded-[10px]">
            <img alt="角色图缩略图" className="h-full w-full object-cover" src={referenceThumbnailUrl} />
            <span className="absolute right-0 top-0 flex h-5 min-w-5 items-center justify-center rounded-bl-[8px] bg-black/50 px-1 text-xs">1</span>
          </div>
        ) : null}
      </div>
      {references.length > 0 || slashScene ? (
        <div className="mt-3 flex max-w-[780px] flex-wrap gap-2">
          {slashScene ? (
            <button
              className="rounded-[8px] border border-[#42eaff]/24 bg-[#0e6371]/40 px-3 py-1 text-[13px] text-[#72f1ff]"
              onClick={() => setMenu("slash")}
              type="button"
            >
              / {slashScene}
            </button>
          ) : null}
          {references.map((nodeId) => {
            const node = nodes.find((item) => item.id === nodeId);
            if (!node) return null;
            const previewUrl = getDraftString(node, "mediaUrl") || getDraftString(node, "thumbnailUrl") || getDraftString(node, "resultImage");
            return (
              <button
                className="flex h-7 items-center gap-2 rounded-[8px] border border-white/10 bg-white/8 px-2 text-[12px] text-white/76"
                key={nodeId}
                onClick={() => setMenu("reference")}
                type="button"
              >
                {previewUrl ? <img alt="" className="h-5 w-5 rounded-[5px] object-cover" src={previewUrl} /> : <ImageIcon className="h-4 w-4" />}
                @{node.title}
              </button>
            );
          })}
        </div>
      ) : null}
      {menu === "reference" ? (
        <ComposerReferencePopover nodes={referenceNodes} onSelect={insertReference} />
      ) : menu === "slash" ? (
        <ComposerSlashPopover onSelect={insertSlashScene} />
      ) : menu === "focus" ? (
        <ComposerFocusPopover onApply={(value) => applyComposerOption("focus", value)} />
      ) : menu ? (
        <ComposerPopover
          menu={menu}
          modelKind={modelKind}
          modelOptions={modelOptions}
          onSelect={(option) => applyComposerOption(menu, option)}
        />
      ) : null}

      <textarea
        className={cn("mt-5 w-full resize-none bg-transparent text-[13px] leading-5 text-white/64 outline-none placeholder:text-white/42", expanded ? "h-[230px]" : "h-[86px]")}
        onChange={onPromptChange}
        onFocus={() => {
          if (prompt.endsWith("@")) setMenu("reference");
          if (prompt.endsWith("/")) setMenu("slash");
        }}
        placeholder="描述你想要生成的画面内容，按 / 呼出指令，@引用素材"
        value={prompt}
      />

        <div className="absolute bottom-5 left-5 right-[84px] flex items-center gap-4 overflow-hidden text-[12px] text-white/78">
          <ComposerControl active={menu === "model"} label={getCanvasModelDisplayName(settings.model, modelOptions)} icon="◉" dropdown onClick={() => setMenu((current) => current === "model" ? null : "model")} />
          <ComposerControl active={menu === "ratio"} label={settings.ratio} icon="▭" dropdown onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")} />
          <ComposerControl active={menu === "resolution"} label={settings.resolution} dropdown onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")} />
          <ComposerControl active={menu === "camera"} label={settings.camera} icon="▣" onClick={() => setMenu((current) => current === "camera" ? null : "camera")} />
          <ComposerControl active={menu === "panorama"} label={settings.panorama} icon="♫" onClick={() => setMenu((current) => current === "panorama" ? null : "panorama")} />
          <ComposerControl active={menu === "translate"} label="文" onClick={() => setMenu((current) => current === "translate" ? null : "translate")} />
          <ComposerControl active={menu === "settings"} label="" icon="⌘" onClick={() => setMenu((current) => current === "settings" ? null : "settings")} />
          <ComposerControl active={menu === "count"} label={settings.count} dropdown onClick={() => setMenu((current) => current === "count" ? null : "count")} />
          <ComposerControl
            label={billingDisplay.label}
            icon="⚡"
            muted
            onClick={() => toast.info(billingDisplay.message)}
          />
        </div>
        <button
          className="absolute bottom-5 right-5 flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
          onClick={() =>
            onSubmit({
                prompt,
                references,
                settings,
                slashScene,
              })
          }
          type="button"
        >
          ↑
        </button>
      </div>
    </div>
  );
}

function PromptActionButton({
  active,
  icon,
  label,
  onClick,
}: {
  active: boolean;
  icon: string;
  label: string;
  onClick: () => void;
}) {
  return (
    <button
      className={cn(
        "flex h-[72px] w-[74px] flex-col items-center justify-center rounded-[10px] border border-white/10 bg-[#292929] text-[15px] text-white/58",
        active && "border-white/20 bg-white/10 text-white"
      )}
      onClick={onClick}
      type="button"
    >
      <span className="text-[24px] leading-none">{icon}</span>
      <span className="mt-2">{label}</span>
    </button>
  );
}

function ComposerFocusPopover({ onApply }: { onApply: (value: string) => void }) {
  return (
    <div className="absolute left-[178px] top-[124px] z-50 w-[308px] rounded-[14px] border border-white/10 bg-[#1f1f1f] p-4 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
      <div className="font-semibold text-[14px] text-white/86">聚焦模式</div>
      <div className="mt-2 rounded-[10px] border border-dashed border-white/14 bg-white/5 px-3 py-4 text-[13px] text-white/46">
        请在图片上框选聚焦区域
      </div>
      <button
        className="mt-3 h-9 w-full rounded-[10px] bg-white text-[13px] font-semibold text-black"
        onClick={() => onApply("聚焦区域")}
        type="button"
      >
        进入聚焦编辑
      </button>
    </div>
  );
}

function ComposerReferencePopover({
  nodes,
  onSelect,
}: {
  nodes: CloneNode[];
  onSelect: (node: CloneNode) => void;
}) {
  return (
    <div className="absolute left-5 top-[124px] z-50 w-[320px] rounded-[14px] border border-white/10 bg-[#1f1f1f] p-2 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
      <div className="px-3 pb-2 pt-1 text-[12px] text-white/42">节点</div>
      {nodes.length === 0 ? (
        <div className="rounded-[10px] border border-white/8 bg-white/5 px-3 py-4 text-[13px] text-white/42">暂无可引用节点</div>
      ) : (
        nodes.map((node) => {
          const previewUrl = getDraftString(node, "mediaUrl") || getDraftString(node, "thumbnailUrl") || getDraftString(node, "resultImage");
          const Icon = node.inputType === "video" ? Video : node.kind === "text" ? FileText : ImageIcon;
          return (
            <button
              className="flex h-11 w-full items-center gap-3 rounded-[9px] px-2 text-left text-[13px] text-white/76 hover:bg-white/8 hover:text-white"
              key={node.id}
              onClick={() => onSelect(node)}
              type="button"
            >
              <span className="flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-[7px] bg-white/10 text-white/60">
                {previewUrl ? <img alt="" className="h-full w-full object-cover" src={previewUrl} /> : <Icon className="h-4 w-4" />}
              </span>
              <span className="min-w-0 flex-1">
                <span className="block truncate">{node.title}</span>
                <span className="block truncate text-[11px] text-white/36">{node.subtitle || node.inputType || node.kind}</span>
              </span>
              <span className="text-white/28">↵</span>
            </button>
          );
        })
      )}
    </div>
  );
}

function ComposerSlashPopover({ onSelect }: { onSelect: (scene: string) => void }) {
  return (
    <div className="absolute left-5 top-[124px] z-50 w-[320px] rounded-[14px] border border-white/10 bg-[#1f1f1f] p-2 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
      <div className="px-3 pb-2 pt-1 text-[12px] text-white/42">指令</div>
      {SLASH_IMAGE_ITEMS.map((item) => (
        <button
          className="flex h-10 w-full items-center justify-between rounded-[9px] px-3 text-left text-[13px] text-white/76 hover:bg-white/8 hover:text-white"
          key={item}
          onClick={() => onSelect(item)}
          type="button"
        >
          <span>{item}</span>
          <span className="rounded-[6px] bg-white/8 px-2 py-0.5 text-[11px] text-white/38">/</span>
        </button>
      ))}
    </div>
  );
}

function getVideoComposerModelLabel(settings: Pick<ComposerSettings, "model" | "modelLabel">, modelOptions: CanvasModelOption[]) {
  const normalized = normalizeModelRef(settings.model);
  if (!normalized || normalized === "auto") return "自动模型";
  const model = modelOptions.find(item => item.id === normalized || item.modelId === normalized);
  return model ? model.displayName || model.modelId || model.id : "模型不可用";
}

function getVideoComposerModelShortLabel(label: string) {
  const normalized = label.trim();
  if (normalized === "Seedance 2.0 VIP") return "2.0";
  if (normalized === "Seedance 2.0 Fast VIP") return "2.0 Fast";
  if (normalized === "Seedance 2.0 Mini") return "2.0 Mini";
  if (normalized === "Seedance1.5 Pro") return "1.5 Pro";
  if (normalized === "Seedance 1.0 Pro") return "1.0 Pro";
  if (normalized === "Seedance 1.0 Lite") return "1.0 Lite";
  return normalized || "自动模型";
}

function normalizeComposerBoolean(value: unknown, fallback = true) {
  if (typeof value === "boolean") return value;
  if (typeof value === "number") return value !== 0;
  if (typeof value === "string") {
    const normalized = value.trim().toLowerCase();
    if (!normalized) return fallback;
    if (["false", "0", "off", "关闭", "禁用", "否"].includes(normalized)) return false;
    if (["true", "1", "on", "开启", "启用", "是"].includes(normalized)) return true;
  }
  return fallback;
}

function formatVideoParameterSummary(settings: Pick<ComposerSettings, "count" | "duration" | "ratio" | "resolution">) {
  return [
    formatVideoRatioLabel(settings.ratio),
    settings.resolution || "720P",
    settings.duration || "5s",
    settings.count || "1个",
  ].join(" · ");
}

function VideoModelPopover({
  currentLabel,
  modelOptions,
  mode,
  audioRequired = false,
  onSelect,
}: {
  audioRequired?: boolean;
  mode?: VideoGenerationMode;
  currentLabel: string;
  modelOptions: CanvasModelOption[];
  onSelect: (option: { label: string; modelRef?: string }) => void;
}) {
  const candidates = filterCanvasModels(modelOptions, audioRequired ? "audio-video" : "video", mode);
  const options = [
    { label: "自动模型", modelRef: "auto", description: "按当前模式和生成参数选择可用模型", duration: "", disabled: candidates.length === 0 },
    ...candidates.map(model => ({
      label: model.displayName || model.modelId || model.id,
      modelRef: model.id,
      description: model.providerName || "视频生成",
      duration: getCanvasVideoModes(model).map(mode => ({"text-to-video":"文生", "first-frame":"首帧", "first-last-frame":"首尾帧", "reference-images":"多参考"})[mode]).join(" / "),
      disabled: false,
    })),
  ];
  return (
    <div
      className="absolute bottom-[48px] left-2 z-[90] w-[369px] rounded-2xl border border-white/10 bg-[#2d2d2d]/95 p-1 shadow-[0_1px_3px_rgba(0,0,0,0.05),0_20px_25px_-5px_rgba(0,0,0,0.05),0_10px_10px_-5px_rgba(0,0,0,0.04)] backdrop-blur-[32px]"
      role="dialog"
    >
      <div className="tiny-scrollbar max-h-[400px] w-[360px] overflow-y-auto">
        {candidates.length === 0 ? <p role="status" className="px-3 py-3 text-xs text-white/55">暂无可用的视频模型，请在模型设置中启用视频模型。</p> : null}
        <div className="flex flex-col gap-1">
          {options.map((option, index) => {
            const selected = currentLabel === option.label || (!currentLabel && index === 0);
            const disabled = "disabled" in option && option.disabled === true;
            return (
              <button
                className={cn(
                  "group flex h-[52px] w-full items-center gap-1 rounded-xl p-2 text-left text-white transition-colors duration-200",
                  selected ? "bg-white/[0.15] hover:bg-white/[0.15]" : "hover:bg-white/10",
                  disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
                )}
                data-selected={selected ? "true" : "false"}
                disabled={disabled}
                key={option.modelRef}
                onClick={() => onSelect({ label: option.label, modelRef: option.modelRef })}
                type="button"
              >
                <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-lg bg-white/8 text-white/45">
                  <Video className="h-4 w-4" />
                </span>
                <span className="h-full min-w-0 flex-1 overflow-hidden pr-1">
                  <span className="flex h-full flex-col justify-start transition-transform duration-200 translate-y-2 group-hover:translate-y-0 group-data-[selected=true]:translate-y-0">
                    <span className="flex min-w-0 items-center gap-1.5 leading-4">
                      <span className="truncate text-[14px] font-medium text-white/92">{option.label}</span>
                      {"duration" in option && option.duration ? (
                        <span className="shrink-0 text-[11px] leading-4 text-white/40">{option.duration}</span>
                      ) : null}
                    </span>
                    <span className="mt-0.5 block truncate text-[12px] leading-4 text-white/45">
                      {option.description}
                    </span>
                  </span>
                </span>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function VideoModePopover({
  activeTab,
  items,
  leftOffset,
  onSelect,
}: {
  activeTab: VideoComposerTabKey;
  items: Array<{ enabled: boolean; key: VideoComposerTabKey; label: string }>;
  leftOffset: number;
  onSelect: (tab: VideoComposerTabKey) => void;
}) {
  return (
    <div
      className="absolute bottom-[48px] z-[90] h-[229px] w-[197px] rounded-2xl border-[0.5px] border-[#363636] bg-[#2d2d2d]/95 p-2 shadow-[0_1px_3px_rgba(0,0,0,0.05),0_20px_25px_-5px_rgba(0,0,0,0.05),0_10px_10px_-5px_rgba(0,0,0,0.04)] backdrop-blur-[16px]"
      role="dialog"
      style={{ left: leftOffset }}
    >
      <div className="flex h-full flex-col gap-1">
        <div className="flex h-8 shrink-0 items-center px-2 text-xs font-medium text-[#919191] opacity-80">
          视频生成模式
        </div>
        {items.map((item) => {
          const Icon = getVideoModeIcon(item.key);
          const selected = activeTab === item.key;
          return (
            <button
              className={cn(
                "flex h-8 w-full shrink-0 items-center gap-2 rounded-lg px-2 text-left text-[16px] leading-[24.8px] text-[#f7f7f7] transition-colors duration-200",
                selected ? "bg-white/[0.15]" : "hover:bg-white/10",
                item.enabled ? "cursor-pointer" : "cursor-not-allowed opacity-40"
              )}
              data-selected={selected ? "true" : "false"}
              disabled={!item.enabled}
              key={item.key}
              onClick={() => onSelect(item.key)}
              type="button"
            >
              <Icon className="h-4 w-4 shrink-0" />
              <span>{item.label}</span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function VideoParameterEditor({
  leftOffset = 217, onChange, settings, modelOptions, mode, audioRequired = false,
}: {
  audioRequired?: boolean;
  leftOffset?: number;
  onChange: (updates: Partial<ComposerSettings>) => void;
  settings: ComposerSettings;
  modelOptions: CanvasModelOption[];
  mode?: VideoGenerationMode;
}) {
  const candidates = filterCanvasModels(modelOptions, audioRequired ? "audio-video" : "video", mode);
  const model = candidates.find(item => item.id === settings.model || item.modelId === settings.model) ||
    (!normalizeModelRef(settings.model) || settings.model === "auto" ? candidates[0] : undefined);
  const options = getCanvasVideoParameters(model, mode);
  const executableResolutions = options.resolutions.filter(value => ["480p", "720p", "1080p"].includes(value.toLowerCase())).map(value => value.toUpperCase());
  const durationIndex = Math.max(0, options.durations.indexOf(normalizeVideoDurationValue(settings.duration)));
  return (
    <div
      className="absolute bottom-[48px] z-[90] flex max-h-[min(540px,calc(100vh-150px))] w-[341px] flex-col gap-3 overflow-y-auto rounded-2xl border-[0.5px] border-[#363636] bg-[#2d2d2d]/95 p-3 shadow-[0_20px_25px_-5px_rgba(0,0,0,0.05)] backdrop-blur-[32px]"
      role="dialog" aria-label="视频生成参数" style={{ left: leftOffset }}
    >
      {!model ? <p className="rounded-md bg-white/5 px-2 py-2 text-[11px] text-white/55">当前模式暂无可用模型；配置模型后即可选择其支持的参数。</p> : null}
        <VideoParameterRow label="比例">
          <VideoRatioOptions options={options.ratios} selected={formatVideoRatioLabel(settings.ratio)} onSelect={ratio => onChange({ratio})} />
        </VideoParameterRow>
        <VideoParameterRow label="清晰度">
          <VideoSegmentedOptions availableOptions={executableResolutions} columns={2} options={["480P", "720P", "1080P", "4K"]} selected={settings.resolution || "720P"} onSelect={resolution => onChange({resolution})} />
        </VideoParameterRow>
        <VideoParameterRow label="视频时长">
          <div className="flex items-center gap-3"><input aria-label="视频时长" className="h-1 w-full min-w-0 accent-[#66b8ff]" disabled={options.durations.length < 2} max={Math.max(1, options.durations.length - 1)} min={0} onChange={event => onChange({duration: `${options.durations[Number(event.target.value)]}s`})} step={1} type="range" value={durationIndex} /><span className="min-w-[42px] rounded-md bg-white/10 px-2 py-1 text-center text-[12px] tabular-nums">{options.durations[durationIndex] ? `${options.durations[durationIndex]}s` : "—"}</span></div>
        </VideoParameterRow>
        <VideoParameterRow label="生成音频" showHelp><VideoSegmentedOptions availableOptions={options.supportsAudio ? [...VIDEO_AUDIO_OPTIONS] : ["关闭"]} columns={2} options={[...VIDEO_AUDIO_OPTIONS]} selected={options.supportsAudio ? settings.audio || "开启" : "关闭"} onSelect={audio => onChange({audio})} /></VideoParameterRow>
        <VideoParameterRow label="生成数量"><VideoSegmentedOptions availableOptions={model ? [...VIDEO_COUNT_OPTIONS] : []} columns={3} options={[...VIDEO_COUNT_OPTIONS]} selected={settings.count || "1个"} onSelect={count => onChange({count})} /></VideoParameterRow>
    </div>
  );
}

function VideoAdvancedSwitchRow({
  checked,
  label,
  onChange,
}: {
  checked: boolean;
  label: string;
  onChange: (checked: boolean) => void;
}) {
  return (
    <div className="flex h-9 items-center justify-between py-2">
      <span className="text-sm text-white/90">{label}</span>
      <button
        aria-checked={checked}
        className={cn(
          "relative h-5 w-[38px] shrink-0 rounded-full transition-colors",
          checked ? "bg-white" : "bg-white/25"
        )}
        onClick={() => onChange(!checked)}
        role="switch"
        type="button"
      >
        <span
          className={cn(
            "absolute left-[3px] top-[3px] h-3.5 w-3.5 rounded-full bg-neutral-950 transition-transform duration-150",
            checked && "translate-x-[18px]"
          )}
        />
      </button>
    </div>
  );
}

function VideoParameterRow({
  children,
  label,
  showHelp = false,
}: {
  children: ReactNode;
  label: string;
  showHelp?: boolean;
}) {
  return (
    <div className="flex flex-col gap-2">
      <div className="flex h-5 items-center gap-1.5 text-[12px] font-medium leading-5 text-[#919191]">
        <span>{label}</span>
        {showHelp ? <HelpCircle className="h-3 w-3" /> : null}
      </div>
      {children}
    </div>
  );
}

function VideoRatioOptions({
  onSelect,
  selected,
  options,
}: {
  options: string[];
  onSelect: (option: string) => void;
  selected: string;
}) {
  const iconSizes: Record<string, { height: number; width: number }> = {
    Auto: { height: 9, width: 12 },
    "16:9": { height: 9, width: 16 },
    "4:3": { height: 9, width: 12 },
    "1:1": { height: 12, width: 12 },
    "3:4": { height: 12, width: 9 },
    "9:16": { height: 16, width: 9 },
    "21:9": { height: 7, width: 16 },
  };

  const available = new Set(options.map(value => value === "adaptive" ? "Auto" : value));
  const palette = ["Auto", "16:9", "4:3", "1:1", "3:4", "9:16", "21:9"];
  return (
    <div className="grid grid-cols-5 gap-2">
      {palette.map(label => ({label})).map((option) => {
        const isSelected = selected === option.label;
        const enabled = available.has(option.label);
        const iconSize = iconSizes[option.label] || {width: 12, height: 12};
        return (
          <button
            className={cn(
              "flex h-[62px] min-w-0 flex-col items-center justify-center gap-1 rounded-lg border-[0.5px] px-1 py-3 text-xs transition-colors duration-200",
              !enabled ? "cursor-not-allowed border-[#454545] text-[#686868]" : isSelected
                ? "border-white bg-white/10 text-[#f7f7f7]"
                : "border-[#525252] bg-transparent text-[#919191] hover:bg-white/5 hover:text-[#f7f7f7]"
            )}
            data-selected={isSelected ? "true" : "false"}
            disabled={!enabled}
            key={option.label}
            onClick={() => onSelect(option.label)}
            title={enabled ? undefined : "当前模型不支持此比例"}
            type="button"
          >
            <span className="flex size-[17px] items-center justify-center">
              <span
                className="flex-none rounded-[2px] border-[1.5px] border-current"
                style={{ height: iconSize.height, width: iconSize.width }}
              />
            </span>
            <span>{option.label}</span>
          </button>
        );
      })}
    </div>
  );
}

function VideoSegmentedOptions({
  availableOptions,
  columns,
  onSelect,
  options,
  selected,
}: {
  availableOptions?: string[];
  columns: 2 | 3 | 4;
  onSelect: (option: string) => void;
  options: string[];
  selected: string;
}) {
  return (
    <div
      className={cn(
        "grid gap-2",
        columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-3" : "grid-cols-4"
      )}
    >
      {options.map((option) => (
        <button
          className={cn(
            "h-8 min-w-0 rounded-lg border-[0.5px] px-2 text-xs transition-colors duration-200",
            availableOptions && !availableOptions.includes(option) ? "cursor-not-allowed border-[#454545] text-[#686868]" : selected === option
              ? "border-white bg-white/10 text-[#f7f7f7]"
              : "border-[#525252] bg-transparent text-[#919191] hover:bg-white/5 hover:text-[#f7f7f7]"
          )}
          data-selected={selected === option ? "true" : "false"}
          disabled={Boolean(availableOptions && !availableOptions.includes(option))}
          key={option}
          onClick={() => onSelect(option)}
          title={availableOptions && !availableOptions.includes(option) ? "当前模型尚不支持此选项" : undefined}
          type="button"
        >
          {option}
        </button>
      ))}
    </div>
  );
}

function VideoMotionLibraryPanel({
  onClose,
  onSelect,
  presets,
}: {
  onClose: () => void;
  onSelect: (snippet: string) => void;
  presets: VideoCanvasMotionPreset[];
}) {
  const [mounted, setMounted] = useState(false);
  const [activeTab, setActiveTab] = useState<"plaza" | "favorites" | "mine">(
    "plaza",
  );
  const [searchDraft, setSearchDraft] = useState("");
  const [searchQuery, setSearchQuery] = useState("");
  const [favoriteIds, setFavoriteIds] = useState<string[]>([]);
  const [customMotions, setCustomMotions] = useState<
    VideoCanvasCustomMotionPreset[]
  >([]);
  const [customEditorOpen, setCustomEditorOpen] = useState(false);
  const [customName, setCustomName] = useState("");
  const [customPrompt, setCustomPrompt] = useState("");
  const [customPreviewUrl, setCustomPreviewUrl] = useState("");
  const customPreviewInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    setMounted(true);
    try {
      const storedFavorites = JSON.parse(
        window.localStorage.getItem(VIDEO_MOTION_FAVORITES_STORAGE_KEY) || "[]",
      );
      if (Array.isArray(storedFavorites)) {
        setFavoriteIds(
          storedFavorites.filter(
            (item): item is string => typeof item === "string",
          ),
        );
      }
    } catch {
      setFavoriteIds([]);
    }
    try {
      const storedMotions = JSON.parse(
        window.localStorage.getItem(VIDEO_MOTION_CUSTOM_STORAGE_KEY) || "[]",
      );
      if (Array.isArray(storedMotions)) {
        setCustomMotions(
          storedMotions
            .filter(
              (item): item is Record<string, unknown> =>
                Boolean(item) && typeof item === "object",
            )
            .map((item, index) => ({
              id: String(item.id || `custom-${index + 1}`),
              name: String(item.name || ""),
              previewUrl: String(item.previewUrl || ""),
              prompt: String(item.prompt || ""),
              custom: true as const,
            }))
            .filter(
              (item) => item.name && item.previewUrl && item.prompt,
            ),
        );
      }
    } catch {
      setCustomMotions([]);
    }
  }, []);

  useEffect(() => {
    if (!mounted) return;
    window.localStorage.setItem(
      VIDEO_MOTION_FAVORITES_STORAGE_KEY,
      JSON.stringify(favoriteIds),
    );
  }, [favoriteIds, mounted]);

  useEffect(() => {
    if (!mounted) return;
    window.localStorage.setItem(
      VIDEO_MOTION_CUSTOM_STORAGE_KEY,
      JSON.stringify(customMotions),
    );
  }, [customMotions, mounted]);

  const allMotions = useMemo(
    () => [...presets, ...customMotions],
    [customMotions, presets],
  );
  const visibleMotions = useMemo(() => {
    const source =
      activeTab === "plaza"
        ? presets
        : activeTab === "favorites"
          ? allMotions.filter((motion) => favoriteIds.includes(motion.id))
          : customMotions;
    const normalizedQuery = searchQuery.trim().toLocaleLowerCase();
    if (!normalizedQuery) return source;
    return source.filter((motion) =>
      motion.name.toLocaleLowerCase().includes(normalizedQuery),
    );
  }, [activeTab, allMotions, customMotions, favoriteIds, presets, searchQuery]);

  const toggleFavorite = (id: string) => {
    setFavoriteIds((current) =>
      current.includes(id)
        ? current.filter((favoriteId) => favoriteId !== id)
        : [...current, id],
    );
  };

  const closeCustomEditor = () => {
    setCustomEditorOpen(false);
    setCustomName("");
    setCustomPrompt("");
    setCustomPreviewUrl("");
    if (customPreviewInputRef.current) {
      customPreviewInputRef.current.value = "";
    }
  };

  const saveCustomMotion = () => {
    const name = customName.trim();
    const prompt = customPrompt.trim();
    if (!(name && prompt && customPreviewUrl)) return;
    const nextMotion: VideoCanvasCustomMotionPreset = {
      id: `custom-${Date.now()}`,
      name,
      previewUrl: customPreviewUrl,
      prompt,
      custom: true,
    };
    setCustomMotions((current) => [...current, nextMotion]);
    closeCustomEditor();
  };

  if (!mounted) return null;

  return createPortal(
    <div
      className="fixed inset-0 z-[800] flex items-center justify-center bg-black/35"
      data-video-motion-library="true"
      onClick={(event) => {
        event.stopPropagation();
        if (event.target === event.currentTarget) onClose();
      }}
      onMouseDown={(event) => {
        event.stopPropagation();
        if (event.target === event.currentTarget) onClose();
      }}
      onPointerDown={(event) => event.stopPropagation()}
    >
      <section
        aria-label="运镜素材库"
        aria-modal="true"
        className="relative flex h-[min(604px,calc(100vh_-_24px))] w-[min(800px,calc(100vw_-_24px))] flex-col overflow-hidden rounded-[12px] border border-white/10 bg-[#202020] text-white shadow-[0_24px_80px_rgba(0,0,0,0.55)]"
        onMouseDown={(event) => event.stopPropagation()}
        role="dialog"
      >
        <header className="flex h-[57px] shrink-0 items-center gap-3 border-b border-white/10 px-4">
          <div aria-label="运镜分类" className="flex items-center gap-1" role="tablist">
            {([
              ["plaza", "运镜广场"],
              ["favorites", "我的收藏"],
              ["mine", "我的运镜"],
            ] as const).map(([key, label]) => (
              <button
                aria-selected={activeTab === key}
                className={cn(
                  "h-8 rounded-[6px] px-3 text-[13px] text-white/58 transition-colors hover:bg-white/8 hover:text-white/88",
                  activeTab === key && "bg-white/10 text-white",
                )}
                key={key}
                onClick={() => {
                  setActiveTab(key);
                  setSearchDraft("");
                  setSearchQuery("");
                }}
                role="tab"
                type="button"
              >
                {label}
              </button>
            ))}
          </div>
          <form
            className="ml-auto flex h-[34px] w-[min(336px,42vw)] items-center rounded-[7px] border border-white/10 bg-black/20 px-2"
            onSubmit={(event) => {
              event.preventDefault();
              setSearchQuery(searchDraft);
            }}
            role="search"
          >
            <button
              aria-label="搜索"
              className="flex size-6 shrink-0 items-center justify-center text-white/42 hover:text-white/75"
              type="submit"
            >
              <Search className="size-4" />
            </button>
            <input
              aria-label="搜索运镜名称"
              className="h-full min-w-0 flex-1 bg-transparent px-1 text-[13px] text-white/82 outline-none placeholder:text-white/32"
              onChange={(event) => setSearchDraft(event.target.value)}
              placeholder="搜索运镜名称"
              value={searchDraft}
            />
            {searchDraft ? (
              <button
                aria-label="清空搜索"
                className="flex size-6 shrink-0 items-center justify-center text-white/38 hover:text-white/75"
                onClick={() => {
                  setSearchDraft("");
                  setSearchQuery("");
                }}
                type="button"
              >
                <X className="size-3.5" />
              </button>
            ) : null}
          </form>
          <button
            aria-label="关闭运镜素材库"
            className="flex size-8 shrink-0 items-center justify-center rounded-[6px] text-white/45 hover:bg-white/8 hover:text-white"
            onClick={onClose}
            type="button"
          >
            <X className="size-4" />
          </button>
        </header>

        <div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto p-4">
          {activeTab === "mine" ? (
            <button
              className="mb-4 flex h-8 items-center gap-1.5 rounded-[6px] bg-white px-3 text-[13px] font-medium text-black hover:bg-white/90"
              onClick={() => setCustomEditorOpen(true)}
              type="button"
            >
              <Plus className="size-3.5" />
              新建运镜
            </button>
          ) : null}

          {visibleMotions.length > 0 ? (
            <div className="grid grid-cols-[repeat(4,168px)] justify-between gap-y-4 max-[760px]:grid-cols-3 max-[590px]:grid-cols-2 max-[410px]:grid-cols-1">
              {visibleMotions.map((motion) => {
                const favorite = favoriteIds.includes(motion.id);
                return (
                  <div
                    className="group relative h-[187px] w-[168px] overflow-hidden rounded-[6px] bg-[#2a2a2a] text-left transition-colors hover:bg-[#323232]"
                    key={motion.id}
                    onClick={(event) => {
                      event.stopPropagation();
                      onSelect(motion.prompt || motion.name);
                    }}
                    onKeyDown={(event) => {
                      if (event.key === "Enter" || event.key === " ") {
                        event.preventDefault();
                        onSelect(motion.prompt || motion.name);
                      }
                    }}
                    role="button"
                    tabIndex={0}
                  >
                    <img
                      alt=""
                      className="h-[168px] w-[168px] object-cover"
                      draggable={false}
                      src={motion.previewUrl}
                    />
                    <span className="absolute inset-x-0 top-[138px] h-[30px] bg-gradient-to-t from-black/55 to-transparent" />
                    <button
                      aria-label={favorite ? `取消收藏 ${motion.name}` : `收藏 ${motion.name}`}
                      className={cn(
                        "absolute right-2 top-2 flex size-7 items-center justify-center rounded-full bg-black/55 text-white opacity-0 transition-opacity hover:bg-black/75 group-hover:opacity-100",
                        favorite && "opacity-100 text-[#ffd861]",
                      )}
                      onClick={(event) => {
                        event.preventDefault();
                        event.stopPropagation();
                        toggleFavorite(motion.id);
                      }}
                      type="button"
                    >
                      <Star className="size-3.5" fill={favorite ? "currentColor" : "none"} />
                    </button>
                    <span className="block h-[19px] truncate px-1.5 text-[12px] leading-[19px] text-white/78">
                      {motion.name}
                    </span>
                  </div>
                );
              })}
            </div>
          ) : (
            <div className="flex h-full min-h-[380px] items-center justify-center text-[13px] text-white/38">
              {activeTab === "favorites"
                ? "暂无收藏"
                : searchQuery
                  ? "暂无相关运镜"
                  : "暂无自定义运镜"}
            </div>
          )}
        </div>

        {customEditorOpen ? (
          <div
            className="absolute inset-0 z-20 flex items-center justify-center bg-black/55"
            onMouseDown={(event) => {
              if (event.target === event.currentTarget) closeCustomEditor();
            }}
          >
            <section
              aria-label="自定义运镜"
              aria-modal="true"
              className="flex h-[350px] w-[min(526px,calc(100%_-_24px))] flex-col overflow-hidden rounded-[10px] border border-white/10 bg-[#272727] shadow-[0_18px_64px_rgba(0,0,0,0.55)]"
              onMouseDown={(event) => event.stopPropagation()}
              role="dialog"
            >
              <header className="flex h-12 shrink-0 items-center justify-between border-b border-white/10 px-4">
                <h3 className="text-[15px] font-medium">自定义</h3>
                <button
                  aria-label="关闭自定义运镜"
                  className="flex size-7 items-center justify-center rounded-[6px] text-white/45 hover:bg-white/8 hover:text-white"
                  onClick={closeCustomEditor}
                  type="button"
                >
                  <X className="size-4" />
                </button>
              </header>
              <div className="grid min-h-0 flex-1 grid-cols-[150px_1fr] gap-4 px-4 py-3">
                <div>
                  <div className="mb-2 text-[12px] text-white/62">预览图</div>
                  <input
                    accept="image/*"
                    className="sr-only"
                    onChange={(event: ReactChangeEvent<HTMLInputElement>) => {
                      const file = event.target.files?.[0];
                      if (!file) return;
                      const reader = new FileReader();
                      reader.onload = () => {
                        if (typeof reader.result === "string") {
                          setCustomPreviewUrl(reader.result);
                        }
                      };
                      reader.readAsDataURL(file);
                    }}
                    ref={customPreviewInputRef}
                    type="file"
                  />
                  <button
                    aria-label="上传运镜预览图"
                    className="flex size-[150px] items-center justify-center overflow-hidden rounded-[7px] border border-dashed border-white/18 bg-black/15 text-white/38 hover:border-white/30 hover:text-white/62"
                    onClick={() => customPreviewInputRef.current?.click()}
                    type="button"
                  >
                    {customPreviewUrl ? (
                      <img alt="运镜预览" className="size-full object-cover" src={customPreviewUrl} />
                    ) : (
                      <FolderOpen className="size-7" />
                    )}
                  </button>
                </div>
                <div className="flex min-w-0 flex-col gap-3">
                  <label className="block">
                    <span className="mb-2 block text-[12px] text-white/62">运镜名称</span>
                    <input
                      className="h-9 w-full rounded-[7px] border border-white/10 bg-black/18 px-3 text-[13px] text-white/82 outline-none placeholder:text-white/30 focus:border-white/25"
                      maxLength={40}
                      onChange={(event) => setCustomName(event.target.value)}
                      placeholder="名称"
                      value={customName}
                    />
                  </label>
                  <label className="min-h-0 flex-1">
                    <span className="mb-2 block text-[12px] text-white/62">运镜提示词</span>
                    <textarea
                      className="h-[92px] w-full resize-none rounded-[7px] border border-white/10 bg-black/18 px-3 py-2 text-[13px] leading-5 text-white/82 outline-none placeholder:text-white/30 focus:border-white/25"
                      maxLength={500}
                      onChange={(event) => setCustomPrompt(event.target.value)}
                      placeholder="输入运镜提示词"
                      value={customPrompt}
                    />
                  </label>
                </div>
              </div>
              <footer className="flex h-[58px] shrink-0 items-center justify-end border-t border-white/10 px-4">
                <button
                  className="h-8 rounded-[6px] bg-white px-5 text-[13px] font-medium text-black transition disabled:cursor-not-allowed disabled:bg-white/12 disabled:text-white/28"
                  disabled={!(customPreviewUrl && customName.trim() && customPrompt.trim())}
                  onClick={saveCustomMotion}
                  type="button"
                >
                  保存
                </button>
              </footer>
            </section>
          </div>
        ) : null}
      </section>
    </div>,
    document.body,
  );
}

function VideoMotionPresetPopover({
  onSelect,
  presets = defaultVideoCanvasMotionPresets,
}: {
  onSelect: (snippet: string) => void;
  presets?: VideoCanvasMotionPreset[];
}) {
  return (
    <div className="absolute left-5 top-[126px] z-50 w-[560px] rounded-[14px] border border-white/10 bg-[#1f1f1f] p-3 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
      <div className="grid grid-cols-4 gap-2">
        {presets.slice(0, 8).map((preset) => (
          <button
            className="group h-[92px] overflow-hidden rounded-[10px] border border-white/8 bg-[#292929] text-left transition hover:border-white/18 hover:bg-[#303030]"
            key={preset.id}
            onClick={() => onSelect(preset.prompt || preset.name)}
            type="button"
          >
            <img alt="" className="block h-[56px] w-full object-cover" src={preset.previewUrl} />
            <span className="block px-2 py-2 text-[12px] text-white/74">{preset.name}</span>
          </button>
        ))}
      </div>
    </div>
  );
}

function VideoEffectPresetPopover({ onSelect }: { onSelect: (title: string) => void }) {
  return (
    <div className="absolute left-5 top-[126px] z-50 w-[760px] rounded-[14px] border border-white/10 bg-[#1f1f1f] p-3 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
      <div className="grid grid-cols-3 gap-3">
        {VIDEO_EFFECT_PRESETS.map((effect, index) => (
          <button
            className="overflow-hidden rounded-[11px] border border-white/8 bg-[#292929] text-left transition hover:border-white/18 hover:bg-[#303030]"
            key={effect.title}
            onClick={() => onSelect(effect.title)}
            type="button"
          >
            <span className="relative block h-[76px] bg-[radial-gradient(circle_at_32%_28%,rgba(255,255,255,0.22),transparent_32%),linear-gradient(135deg,rgba(124,143,255,0.28),rgba(255,116,116,0.08))]">
              <span className="absolute left-2 top-2 rounded-[5px] bg-black/42 px-1.5 py-0.5 text-[10px] text-white/70">商用</span>
              <span className="absolute bottom-2 right-2 text-[11px] text-white/44">☆</span>
            </span>
            <span className="block px-3 py-2">
              <span className="block text-[13px] font-medium text-white/82">{effect.title}</span>
              <span className="mt-1 flex items-center justify-between text-[11px] text-white/38">
                <span>{effect.author}</span>
                <span>{effect.count + index}</span>
              </span>
            </span>
          </button>
        ))}
      </div>
    </div>
  );
}

function VideoRoleLibraryPanel({
  onApply,
  onClose,
  presets,
  selectedRoleIds,
}: {
  onApply: (selectedRoleIds: string[]) => void;
  onClose: () => void;
  presets: VideoCanvasRolePreset[];
  selectedRoleIds: string[];
}) {
  const [activeTab, setActiveTab] = useState<"public" | "compliant">("public");
  const [selectedIds, setSelectedIds] = useState<Set<string>>(
    () => new Set(selectedRoleIds),
  );
  const visiblePresets =
    activeTab === "compliant"
      ? presets.filter((preset) => preset.compliant && preset.assetId)
      : presets;

  useEffect(() => {
    setSelectedIds(new Set(selectedRoleIds));
  }, [selectedRoleIds]);

  const toggleRole = (roleId: string) => {
    setSelectedIds((current) => {
      const next = new Set(current);
      if (next.has(roleId)) {
        next.delete(roleId);
        return next;
      }
      if (next.size >= 4) {
        toast.info("最多选择 4 个角色素材");
        return current;
      }
      next.add(roleId);
      return next;
    });
  };

  return (
    <>
      <div
        aria-hidden="true"
        className="fixed inset-0 z-[640] bg-black/70"
        data-canvas-overlay="true"
        onClick={onClose}
      />
      <section
        className="fixed bottom-[56px] left-[7.6vw] right-[7.6vw] top-[56px] z-[650] flex min-h-0 flex-col overflow-hidden rounded-[16px] border border-[#262626] bg-[#0f0f0f] text-white shadow-[0_28px_90px_rgba(0,0,0,0.58)]"
        data-canvas-overlay="true"
        data-video-role-library="true"
      >
        <div className="flex h-[49px] shrink-0 items-center justify-between border-b border-[#242424] px-4">
          <div className="flex h-full items-center gap-9 text-[14px]">
            <button
              className={cn(
                "relative h-full text-white/45 transition-colors hover:text-white/76",
                activeTab === "public" && "text-white",
              )}
              onClick={() => setActiveTab("public")}
              type="button"
            >
              公共角色库
              {activeTab === "public" ? (
                <span className="absolute inset-x-0 bottom-0 h-px bg-white" />
              ) : null}
            </button>
            <button
              className={cn(
                "relative h-full text-white/45 transition-colors hover:text-white/76",
                activeTab === "compliant" && "text-white",
              )}
              onClick={() => setActiveTab("compliant")}
              type="button"
            >
              Seedance2.0合规素材库
              {activeTab === "compliant" ? (
                <span className="absolute inset-x-0 bottom-0 h-px bg-white" />
              ) : null}
            </button>
          </div>
          <button
            aria-label="关闭角色素材库"
            className="flex size-6 items-center justify-center rounded-lg text-white/45 transition hover:bg-white/8 hover:text-white"
            onClick={onClose}
            type="button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="flex min-h-0 flex-1 flex-col px-4 pb-4 pt-4">
          <div className="mb-3 flex shrink-0 items-center justify-between">
            <div>
              <div className="text-[14px] font-medium text-white/82">
                {activeTab === "public" ? "选择公共角色" : "已通过 Seedance2.0 合规校验的角色"}
              </div>
              <div className="mt-1 text-[12px] text-white/38">
                {activeTab === "public"
                  ? "角色身份和一致性规则会作为结构化素材传入视频模型。"
                  : "带合规资产 ID 的素材在生成时使用 asset:// 引用。"}
              </div>
            </div>
            <div className="rounded-lg border border-white/10 bg-white/5 px-3 py-1.5 text-[12px] text-white/58">
              已选 {selectedIds.size}/4
            </div>
          </div>

          <div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto rounded-[12px] border border-white/6 bg-[#151515] p-4">
            {visiblePresets.length > 0 ? (
              <div className="grid grid-cols-6 gap-4">
                {visiblePresets.map((preset) => {
                  const selected = selectedIds.has(preset.id);
                  return (
                    <button
                      aria-pressed={selected}
                      className={cn(
                        "group relative min-w-0 overflow-hidden rounded-[10px] border bg-[#202020] text-left transition",
                        selected
                          ? "border-white shadow-[0_0_0_1px_rgba(255,255,255,0.85)]"
                          : "border-white/8 hover:border-white/24",
                      )}
                      key={preset.id}
                      onClick={() => toggleRole(preset.id)}
                      type="button"
                    >
                      <span className="relative block aspect-[3/4] overflow-hidden bg-[#242424]">
                        <img
                          alt={preset.name}
                          className="size-full object-cover object-top transition duration-300 group-hover:scale-[1.02]"
                          src={preset.images.full}
                        />
                        {selected ? (
                          <span className="absolute inset-0 bg-black/24" />
                        ) : null}
                        {preset.compliant && preset.assetId ? (
                          <span
                            className="absolute left-2 top-2 flex size-5 items-center justify-center rounded-full bg-[#09caf5] text-black"
                            title="Seedance2.0 合规素材"
                          >
                            <Check className="h-3 w-3" strokeWidth={3} />
                          </span>
                        ) : null}
                        {selected ? (
                          <span className="absolute bottom-2 left-2 rounded-md bg-white px-2 py-1 text-[11px] font-medium text-black">
                            已选择
                          </span>
                        ) : null}
                      </span>
                      <span className="block px-3 py-2.5">
                        <span className="block truncate text-[13px] font-medium text-white/84">
                          {preset.name}
                        </span>
                        <span className="mt-1 block truncate text-[11px] text-white/36">
                          {preset.tags}
                        </span>
                      </span>
                    </button>
                  );
                })}
              </div>
            ) : (
              <div className="flex h-full min-h-[320px] items-center justify-center text-[13px] text-white/38">
                暂无素材
              </div>
            )}
          </div>
        </div>

        <div className="flex h-[60px] shrink-0 items-center justify-between border-t border-[#242424] px-4">
          <div className="text-[12px] text-white/38">
            {activeTab === "public" ? `共 ${visiblePresets.length} 个公共角色` : `共 ${visiblePresets.length} 个合规素材`}
          </div>
          <button
            className="h-8 rounded-lg bg-white px-4 text-[13px] font-medium text-black transition hover:bg-white/90"
            onClick={() => onApply(Array.from(selectedIds))}
            type="button"
          >
            确定
          </button>
        </div>
      </section>
    </>
  );
}

function VideoRoleAgreementModal({
  onAgree,
  onClose,
}: {
  onAgree: () => void;
  onClose: () => void;
}) {
  const [accepted, setAccepted] = useState(false);

  return (
    <>
      <div className="fixed inset-0 z-[800] bg-black/60" data-canvas-overlay="true" />
      <section
        className="fixed left-1/2 top-1/2 z-[801] flex h-[530px] w-[740px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-[12px] border border-[#525252] bg-[#1f1f1f] text-white shadow-[0_28px_90px_rgba(0,0,0,0.62)]"
        data-canvas-overlay="true"
        data-video-role-agreement="true"
      >
        <div className="flex h-[60px] shrink-0 items-center justify-between border-b border-[#525252] px-4">
          <h3 className="text-[16px] font-medium text-white/90">Seedance2.0模型使用承诺书</h3>
          <button
            aria-label="关闭承诺书"
            className="flex size-7 items-center justify-center rounded-lg text-white/48 transition hover:bg-white/8 hover:text-white"
            onClick={onClose}
            type="button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="tiny-scrollbar min-h-0 flex-1 space-y-3 overflow-y-auto px-6 pt-6 text-[14px] leading-[1.7]">
          <p className="text-white/82">
            为保障您依法合规使用Seedance2.0模型所提供的相关服务，请您在使用前务必仔细阅读、充分理解并做出以下承诺：
          </p>
          <div className="space-y-2">
            <p className="font-medium text-white/86">1. 您对即将上传或使用的素材拥有充分合法权益</p>
            <ul className="list-disc space-y-1 pl-5 text-[13px] text-white/48">
              <li>包括但不限于图片/视频/音频/文本/人物形象/虚拟人像/声音/品牌元素等。</li>
              <li>如所上传素材可能涉及任何他人肖像/声音/生物识别特征、或商标/版权内容等知识产权元素，请务必确保您已获得充分授权，未侵害任何第三方合法权益。</li>
            </ul>
          </div>
          <div className="space-y-2">
            <p className="font-medium text-white/86">2. 您将自行对所生成内容及使用后果负责</p>
            <ul className="list-disc pl-5 text-[13px] text-white/48">
              <li>您充分理解AI生成结果具有不确定性，是否对生成内容进行发布、传播、或商业使用，均由您自行判断并承担相应法律责任。</li>
            </ul>
          </div>
          <div className="space-y-2">
            <p className="font-medium text-white/86">3. 如您存在违规使用行为，平台将有权采取限制措施</p>
            <ul className="list-disc pl-5 text-[13px] text-white/48">
              <li>一切对包含第三方合法权益素材的滥用，均将视为违规行为。平台将可能采取包括但不限于拦截生成、删除内容、限制下载、暂停或终止服务等措施。如因此给平台或第三方造成损失，您需自行承担赔偿责任。</li>
            </ul>
          </div>
        </div>

        <div className="shrink-0 space-y-4 bg-[#1f1f1f] px-6 pb-4 pt-4">
          <button
            className="flex w-full cursor-pointer items-start gap-3 text-left"
            onClick={() => setAccepted((current) => !current)}
            type="button"
          >
            <span
              className={cn(
                "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded border",
                accepted ? "border-white bg-white text-black" : "border-white/42 bg-transparent",
              )}
            >
              {accepted ? <Check className="h-3 w-3" strokeWidth={3} /> : null}
            </span>
            <span className="text-[13px] leading-normal text-white/78">
              我已阅读并同意上述《Seedance2.0模型使用承诺书》
            </span>
          </button>
          <div className="flex items-center justify-end gap-3">
            <button
              className="h-8 rounded-lg px-3 text-[13px] text-white/78 transition hover:bg-white/8"
              onClick={onClose}
              type="button"
            >
              不同意
            </button>
            <button
              className="h-8 rounded-lg bg-white px-3 text-[13px] text-black transition hover:bg-white/90 disabled:cursor-not-allowed disabled:bg-white/20 disabled:text-white/32"
              disabled={!accepted}
              onClick={onAgree}
              type="button"
            >
              同意并使用
            </button>
          </div>
        </div>
      </section>
    </>
  );
}

function VideoRoleConsentPopover({
  onCancel,
  onUse,
}: {
  onCancel: () => void;
  onUse: () => void;
}) {
  const [accepted, setAccepted] = useState(false);

  return (
    <div className="absolute left-[260px] top-[96px] z-50 w-[520px] rounded-[16px] border border-white/10 bg-[#202020] p-5 shadow-[0_26px_90px_rgba(0,0,0,0.56)]">
      <div className="mb-3 text-[17px] font-semibold text-white/88">Seedance2.0模型使用承诺书</div>
      <div className="max-h-[140px] overflow-y-auto rounded-[10px] border border-white/8 bg-[#181818] p-3 text-[12px] leading-6 text-white/48">
        使用公共角色库前，请确认素材来源、肖像授权与生成内容合规。该本地弹层用于复刻角色库进入前的确认流程，不会代替用户在竞品页面作出承诺。
      </div>
      <label className="mt-4 flex cursor-pointer items-center gap-2 text-[13px] text-white/66">
        <input
          checked={accepted}
          className="h-4 w-4 accent-white"
          onChange={(event) => setAccepted(event.target.checked)}
          type="checkbox"
        />
        我已阅读并同意上述《Seedance2.0模型使用承诺书》
      </label>
      <div className="mt-5 flex justify-end gap-2">
        <button
          className="h-10 rounded-[9px] border border-white/10 px-4 text-[13px] text-white/62 transition hover:bg-white/8 hover:text-white"
          onClick={onCancel}
          type="button"
        >
          不同意
        </button>
        <button
          className="h-10 rounded-[9px] bg-white px-4 text-[13px] font-semibold text-black transition disabled:cursor-not-allowed disabled:bg-white/20 disabled:text-white/32"
          disabled={!accepted}
          onClick={onUse}
          type="button"
        >
          同意并使用
        </button>
      </div>
    </div>
  );
}

function ComposerPopover({
  customOptions,
  menu,
  modelKind = "image",
  modelOptions = [],
  onSelect,
}: {
  customOptions?: Array<{ label: string; value: string }>;
  menu: Exclude<ComposerMenu, "focus" | "reference" | "slash" | null>;
  modelKind?: CanvasModelKind;
  modelOptions?: CanvasModelOption[];
  onSelect: (option: string) => void;
}) {
  const staticOptions: Record<Exclude<ComposerMenu, "focus" | "reference" | "slash" | null>, Array<{ label: string; value: string }>> = {
    camera: ["摄像机", "手持镜头", "固定镜头"].map((value) => ({ label: value, value })),
    count: ["1张", "2张", "4张"].map((value) => ({ label: value, value })),
    duration: ["5s", "10s"].map((value) => ({ label: value, value })),
    mark: ["添加人物标记", "添加构图标记", "添加动作标记"].map((value) => ({ label: value, value })),
    mode: [],
    model: [],
    panorama: ["全景", "半身", "近景"].map((value) => ({ label: value, value })),
    ratio: ["16:9", "9:16", "1:1", "4:3"].map((value) => ({ label: value, value })),
    resolution: ["1K", "2K", "4K"].map((value) => ({ label: value, value })),
    settings: ["提示词增强", "参考图权重", "高级参数"].map((value) => ({ label: value, value })),
    style: ["写实", "电影感", "国风", "柔和自然光"].map((value) => ({ label: value, value })),
    translate: ["中文", "English", "自动翻译"].map((value) => ({ label: value, value })),
  };
  const matchingModels = filterCanvasModelsByKind(modelOptions, modelKind);
  const modelItems = [
    { label: "自动模型", value: "auto" },
    ...matchingModels.map((model) => ({
      label: model.displayName || model.modelId || model.id,
      value: getCanvasModelRef(model),
    })),
  ];
  const options = customOptions || (menu === "model" ? modelItems : staticOptions[menu]);

  return (
    <div className="absolute left-5 top-[102px] z-50 max-h-[280px] w-[300px] overflow-y-auto rounded-[14px] border border-white/10 bg-[#1f1f1f] p-2 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
      {menu === "model" && matchingModels.length === 0 ? <p role="status" className="px-3 py-2 text-xs text-white/50">暂无匹配的可用模型</p> : null}
      {options.map((option) => (
        <button
          disabled={menu === "model" && matchingModels.length === 0}
          className="flex h-9 w-full items-center justify-between rounded-[9px] px-3 text-left text-[13px] text-white/72 hover:bg-white/8 hover:text-white"
          key={option.value}
          onClick={() => onSelect(option.value)}
          type="button"
        >
          <span className="min-w-0 flex-1 truncate">{option.label}</span>
          <span className="text-white/28">›</span>
        </button>
      ))}
    </div>
  );
}

function ComposerControl({
  active,
  dropdown,
  icon,
  label,
  muted = false,
  onClick,
  disabled=false,
}: {
  active?: boolean;
  dropdown?: boolean;
  icon?: string;
  label: string;
  muted?: boolean;
  onClick?: () => void;
  disabled?: boolean;
}) {
  return (
    <button disabled={disabled} title={disabled?"此功能暂不可用":undefined}
      className={cn(
        "flex items-center gap-2 whitespace-nowrap rounded-[8px] px-1.5 py-1 text-white/78 hover:bg-white/8",
        muted && "text-white/42",
        active && "bg-white/10 text-white"
      )}
      onClick={disabled?undefined:onClick}
      type="button"
    >
      {icon ? <span>{icon}</span> : null}
      {label ? <span className="max-w-[170px] truncate">{label}</span> : null}
      {dropdown ? <span className="text-white/42">⌄</span> : null}
    </button>
  );
}

function CanvasAddMenuButton({
  badge,
  description,
  icon: Icon,
  label,
  onClick,
}: {
  badge?: string;
  description: string;
  icon: LucideIcon;
  label: string;
  onClick: () => void;
}) {
  void description;

  return (
    <button
      className="flex h-8 w-full cursor-pointer items-center gap-2 rounded-[8px] px-2 text-left text-[13px] font-medium leading-5 text-white transition-colors duration-150 hover:bg-white/10"
      onClick={onClick}
      type="button"
    >
      <span className="flex min-w-0 items-center gap-2">
        <Icon className="h-3.5 w-3.5 shrink-0 text-white/60" />
        <span className="flex min-w-0 items-center gap-1.5">
          <span className="min-w-0 truncate">{label}</span>
          <CanvasAddBadge badge={badge} />
        </span>
      </span>
    </button>
  );
}

function CanvasAddBadge({ badge }: { badge?: string }) {
  if (!badge) return null;

  return (
    <span
      className={cn(
        "flex h-4 shrink-0 items-center justify-center rounded-[4px] text-[10px] font-medium leading-4",
        badge === "NEW" ? "w-9" : "w-[34px]"
      )}
      style={
        badge === "NEW"
          ? { backgroundColor: "rgba(60, 181, 204, 0.25)", color: "rgb(93, 220, 255)" }
          : { backgroundColor: "rgba(255, 255, 255, 0.15)", color: "rgba(255, 255, 255, 0.6)" }
      }
    >
      {badge}
    </span>
  );
}

function CanvasAddSubmenu({
  badge,
  description,
  icon: Icon,
  label,
  onPrimary,
  onSelect,
  options,
}: {
  badge?: string;
  description: string;
  icon: LucideIcon;
  label: string;
  onPrimary: () => void;
  onSelect: (action: string) => void;
  options: Array<{ action: string; badge?: string; description: string; label: string }>;
}) {
  void description;
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div
      className="relative"
      onPointerEnter={() => setIsOpen(true)}
      onPointerLeave={() => setIsOpen(false)}
    >
      <button
        className="flex h-8 w-full cursor-pointer items-center gap-2 rounded-[8px] px-2 text-left text-[13px] font-medium leading-5 text-white transition-colors duration-150 hover:bg-white/10"
        onFocus={() => setIsOpen(true)}
        onClick={onPrimary}
        type="button"
      >
        <span className="flex min-w-0 items-center gap-2">
          <Icon className="h-3.5 w-3.5 shrink-0 text-white/60" />
          <span className="flex min-w-0 items-center gap-1.5">
            <span className="min-w-0 truncate">{label}</span>
            <CanvasAddBadge badge={badge} />
          </span>
        </span>
      </button>
      {isOpen ? (
        <div className="absolute left-full top-0 z-[95] w-[204px] pl-2">
        <div
          className="flex w-[196px] flex-col gap-1 rounded-[16px] border-[0.5px] border-[#363636] p-2 shadow-[0_24px_70px_rgba(0,0,0,0.48)] backdrop-blur-[32px]"
          style={{ backgroundColor: "rgb(38, 38, 38)" }}
        >
          {options.map((option) => (
            <button
              className="flex h-8 items-center gap-1.5 rounded-[8px] px-2 text-left text-[13px] font-medium leading-5 text-white hover:bg-white/10"
              key={option.action}
              onClick={() => onSelect(option.action)}
              type="button"
            >
              <span className="min-w-0 truncate">{option.label}</span>
              <CanvasAddBadge badge={option.badge} />
            </button>
          ))}
        </div>
        </div>
      ) : null}
    </div>
  );
}

function CanvasCommandPalette({
  onClose,
  onCreate,
  onGallerySelect,
  onHistorySelect,
  onUploadFiles,
  state,
}: {
  onClose: () => void;
  onCreate: (kind: CanvasCreateKind) => void;
  onGallerySelect: () => void;
  onHistorySelect: () => void;
  onUploadFiles: (files: File[]) => void;
  state: NonNullable<CanvasCommandState>;
}) {
  const uploadInputRef = useRef<HTMLInputElement | null>(null);
  void onClose;

  return (
    <div
      className="fixed z-[90] flex w-[196px] flex-col gap-1 rounded-[16px] border-[0.5px] border-[#363636] p-2 text-white shadow-[0_28px_80px_rgba(0,0,0,0.56)] backdrop-blur-[32px]"
      data-canvas-overlay="true"
      onPointerDown={(event) => event.stopPropagation()}
      style={{
        backgroundColor: "rgb(38, 38, 38)",
        left: `min(${state.screenX}px, calc(100vw - 212px))`,
        top: `min(${state.screenY}px, calc(100vh - 461px))`,
      }}
    >
      <input
        accept="image/*,video/*,audio/*"
        className="hidden"
        multiple
        onChange={(event) => {
          const files = Array.from(event.target.files || []);
          if (files.length > 0) onUploadFiles(files);
          event.currentTarget.value = "";
        }}
        ref={uploadInputRef}
        type="file"
      />
      <div className="flex h-8 items-center px-2">
        <h4 className="text-[14px] font-medium leading-5 text-white/60">添加节点</h4>
      </div>

      {ADD_NODE_PRIMARY_MODULES.map((item) => (
        <CanvasAddMenuButton
          badge={item.badge}
          description={item.description}
          icon={item.icon}
          key={item.kind}
          label={item.label}
          onClick={() => onCreate(item.kind)}
        />
      ))}
      <CanvasAddSubmenu
        description="创意脚本、生成故事板"
        icon={Layers}
        label="脚本"
        onPrimary={() => undefined}
        onSelect={(action) => {
          onCreate(action === "legacy" ? "legacy-script" : "script");
        }}
        options={SCRIPT_SUBMENU_OPTIONS}
      />
      <CanvasAddSubmenu
        badge="NEW"
        description="新增风格或特效素材节点"
        icon={Sparkles}
        label="素材库"
        onPrimary={onGallerySelect}
        onSelect={() => {
          onGallerySelect();
        }}
        options={ASSET_LIBRARY_SUBMENU_OPTIONS}
      />
      <div className="flex h-8 items-center px-2">
        <h4 className="text-[14px] font-medium leading-5 text-white/60">添加资源</h4>
      </div>
      <CanvasAddMenuButton
        description="可上传图片、视频、音频文件"
        icon={Upload}
        label="上传"
        onClick={() => uploadInputRef.current?.click()}
      />
      <CanvasAddMenuButton
        description="从历史生成中选择素材"
        icon={Layers}
        label="从生成历史选择"
        onClick={onHistorySelect}
      />
    </div>
  );
}

function ConnectionAddMenu({
  node,
  onClose,
  onCreate,
  state,
}: {
  node: CloneNode;
  onClose: () => void;
  onCreate: (kind: Exclude<AddModuleKind, "audio" | "director">) => void;
  state: NonNullable<ConnectionMenuState>;
}) {
  const title = state.side === "target" ? "添加上下文" : "引用该节点生成";

  return (
    <div
      className="fixed z-[91] flex w-[240px] flex-col gap-2 rounded-[16px] border border-white/10 bg-[#202020]/96 p-2 text-white shadow-[0_28px_80px_rgba(0,0,0,0.56)] backdrop-blur-[32px]"
      data-canvas-overlay="true"
      onPointerDown={(event) => event.stopPropagation()}
      style={{
        left:
          state.side === "target"
            ? `max(12px, min(${state.screenX - 252}px, calc(100vw - 252px)))`
            : `min(${state.screenX + 12}px, calc(100vw - 252px))`,
        top: `min(${state.screenY - 120}px, calc(100vh - 330px))`,
      }}
    >
      <div className="flex items-start justify-between gap-2 px-2 py-1">
        <div className="min-w-0">
          <h4 className="text-[14px] font-medium leading-5 text-white/60">{title}</h4>
          <div className="mt-1 truncate text-[11px] text-white/34">{node.title}</div>
        </div>
        <button className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] text-white/42 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
          <X className="h-4 w-4" />
        </button>
      </div>

      {CONNECTION_ADD_MODULES.map((item) => {
        const Icon = item.icon;
        return (
          <button
            className="group flex h-[52px] w-full cursor-pointer items-center gap-2 rounded-[12px] px-2 py-2 text-left text-white/82 transition-colors duration-200 hover:bg-white/8"
            key={item.kind}
            onClick={() => onCreate(item.kind)}
            type="button"
          >
            <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
              <Icon className="h-5 w-5" />
            </span>
            <span className="text-[14px] font-medium leading-5">{item.label}</span>
          </button>
        );
      })}
    </div>
  );
}

function NodeContextMenu({
  node,
  onClose,
  onConfigure,
  onCopy,
  onDelete,
  onDuplicate,
  onRun,
  state,
}: {
  node: CloneNode;
  onClose: () => void;
  onConfigure: () => void;
  onCopy: () => void;
  onDelete: () => void;
  onDuplicate: () => void;
  onRun: () => void;
  state: NonNullable<NodeContextState>;
}) {
  const actions: Array<{ icon: LucideIcon; label: string; note: string; onClick: () => void; danger?: boolean }> = [
    { icon: Settings2, label: "配置参数", note: "打开右侧参数面板", onClick: onConfigure },
    { icon: Play, label: "立即生成", note: "执行当前节点", onClick: onRun },
    { icon: Plus, label: "复制节点", note: "在旁边创建副本", onClick: onDuplicate },
    { icon: Copy, label: "复制到剪贴板", note: "复制节点名称", onClick: onCopy },
    { icon: Trash2, label: "删除", note: "移除节点与连接", onClick: onDelete, danger: true },
  ];

  return (
    <div
      className="fixed z-[92] w-[246px] rounded-[8px] border border-white/10 bg-[#202020]/98 p-2 text-white shadow-[0_28px_80px_rgba(0,0,0,0.56)] backdrop-blur-[10px]"
      data-canvas-overlay="true"
      onPointerDown={(event) => event.stopPropagation()}
      style={{
        left: `min(${state.screenX}px, calc(100vw - 262px))`,
        top: `min(${state.screenY}px, calc(100vh - 310px))`,
      }}
    >
      <div className="mb-2 flex items-start justify-between gap-3 px-2 py-1">
        <div className="min-w-0">
          <div className="truncate text-[13px] font-semibold text-white/88">{node.title}</div>
          <div className="mt-1 truncate text-[11px] text-white/36">{node.subtitle || node.kind}</div>
        </div>
        <button className="flex h-7 w-7 shrink-0 items-center justify-center rounded-[8px] text-white/48 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
          <X className="h-4 w-4" />
        </button>
      </div>
      <div className="grid gap-1">
        {actions.map((action) => {
          const Icon = action.icon;
          return (
            <button
              className={cn(
                "flex w-full items-center gap-3 rounded-[8px] px-2 py-2 text-left transition-colors hover:bg-white/8",
                action.danger && "text-[#ff8f9c] hover:bg-[#ff6b7a]/12"
              )}
              key={action.label}
              onClick={action.onClick}
              type="button"
            >
              <Icon className="h-4 w-4 shrink-0" />
              <span className="min-w-0">
                <span className="block text-[13px] font-medium">{action.label}</span>
                <span className="block truncate text-[11px] text-white/36">{action.note}</span>
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

function getCanvasEdgePath(startX: number, startY: number, endX: number, endY: number) {
  const deltaX = endX - startX;
  const curve = deltaX >= 0 ? Math.max(60, 6.25 * Math.sqrt(Math.max(deltaX, 1))) : Math.max(60, Math.min(180, Math.abs(deltaX) * 0.5));
  return `M ${startX} ${startY} C ${startX + curve} ${startY}, ${endX - curve} ${endY}, ${endX} ${endY}`;
}

function getCanvasEdgeMidpoint(startX: number, startY: number, endX: number, endY: number) {
  const deltaX = endX - startX;
  const curve = deltaX >= 0 ? Math.max(60, 6.25 * Math.sqrt(Math.max(deltaX, 1))) : Math.max(60, Math.min(180, Math.abs(deltaX) * 0.5));
  const c1 = { x: startX + curve, y: startY };
  const c2 = { x: endX - curve, y: endY };
  const t = 0.5;
  const mt = 1 - t;
  const x = mt ** 3 * startX + 3 * mt ** 2 * t * c1.x + 3 * mt * t ** 2 * c2.x + t ** 3 * endX;
  const y = mt ** 3 * startY + 3 * mt ** 2 * t * c1.y + 3 * mt * t ** 2 * c2.y + t ** 3 * endY;
  const dx = 3 * mt ** 2 * (c1.x - startX) + 6 * mt * t * (c2.x - c1.x) + 3 * t ** 2 * (endX - c2.x);
  const dy = 3 * mt ** 2 * (c1.y - startY) + 6 * mt * t * (c2.y - c1.y) + 3 * t ** 2 * (endY - c2.y);
  return { angle: Math.atan2(dy, dx) * (180 / Math.PI), x, y };
}

function CloneEdges({
  edges,
  nodes,
  onDeleteEdge,
  onEdgePointerDown,
  preview,
  selectedEdgeId,
}: {
  edges: CloneEdge[];
  nodes: CloneNode[];
  onDeleteEdge: (edgeId: string) => void;
  onEdgePointerDown: (event: ReactPointerEvent<SVGPathElement>, edgeId: string) => void;
  preview?: { endX: number; endY: number; startX: number; startY: number } | null;
  selectedEdgeId?: string | null;
}) {
  const nodeMap = new Map(nodes.map((node) => [node.id, node]));
  const renderedEdges = edges
    .map((edge) => {
      const source = nodeMap.get(edge.source);
      const target = nodeMap.get(edge.target);
      if (!source || !target) return null;
      const startX = source.x + source.width;
      const startY = source.y + source.height / 2;
      const endX = target.x;
      const endY = target.y + target.height / 2;
      const path = getCanvasEdgePath(startX, startY, endX, endY);
      const selected = edge.id === selectedEdgeId;
      const midpoint = selected ? getCanvasEdgeMidpoint(startX, startY, endX, endY) : null;
      return { edge, midpoint, path, selected };
    })
    .filter(
      (
        item,
      ): item is {
        edge: CloneEdge;
        midpoint: ReturnType<typeof getCanvasEdgeMidpoint> | null;
        path: string;
        selected: boolean;
      } => item !== null,
    );

  return (
    <>
      <svg className="pointer-events-none absolute left-0 top-0 overflow-visible" style={{ height: CANVAS_EXTENT, width: CANVAS_EXTENT }}>
        {renderedEdges.map(({ edge, path, selected }) => (
          <g
            className={cn("react-flow__edge react-flow__edge-default nopan selectable", selected && "selected")}
            data-id={edge.id}
            key={edge.id}
          >
            <path
              d={path}
              fill="none"
              onPointerDown={(event) => onEdgePointerDown(event, edge.id)}
              stroke="transparent"
              strokeLinecap="round"
              strokeWidth="16"
              style={{ pointerEvents: "stroke" }}
            />
            {selected ? (
              <path
                d={path}
                fill="none"
                stroke="#a7afff"
                strokeLinecap="round"
                strokeOpacity="0.28"
                strokeWidth="8"
              />
            ) : null}
            <path
              d={path}
              fill="none"
              stroke={selected ? "#a7afff" : "#86909c"}
              strokeLinecap="round"
              strokeOpacity={selected ? "1" : "0.98"}
              strokeWidth={selected ? "2.8" : "2"}
            />
            <EdgeFlowSegments pathD={path} uniqueId={edge.id} visible={["pending", "running"].includes(getDraftString(nodeMap.get(edge.target), "generationStatus"))} />
          </g>
        ))}
        {preview ? (
          <g>
            <path
              d={getCanvasEdgePath(preview.startX, preview.startY, preview.endX, preview.endY)}
              fill="none"
              stroke="#a7afff"
              strokeDasharray="10 8"
              strokeLinecap="round"
              strokeOpacity="0.92"
              strokeWidth="2.5"
            />
            <circle cx={preview.endX} cy={preview.endY} fill="#a7afff" opacity="0.95" r="5" />
            <circle cx={preview.endX} cy={preview.endY} fill="none" opacity="0.32" r="13" stroke="#a7afff" strokeWidth="2" />
          </g>
        ) : null}
      </svg>
      <div className="pointer-events-none absolute left-0 top-0 z-[35] overflow-visible" style={{ height: CANVAS_EXTENT, width: CANVAS_EXTENT }}>
        {renderedEdges.map(({ edge, midpoint }) =>
          midpoint ? (
            <button
              className="scissors-enter pointer-events-auto absolute z-[36] flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-white/10 bg-[#1e1e1e]/95 text-white/70 shadow-[0_16px_42px_rgba(0,0,0,0.42)] transition hover:bg-[#272727] hover:text-white"
              key={`delete-${edge.id}`}
              onClick={(event) => {
                event.preventDefault();
                event.stopPropagation();
                onDeleteEdge(edge.id);
              }}
              onPointerDown={(event) => {
                event.preventDefault();
                event.stopPropagation();
              }}
              style={{ left: midpoint.x, top: midpoint.y }}
              title="删除连线"
              type="button"
            >
              <Scissors className="h-7 w-7" style={{ transform: `rotate(${Math.round(midpoint.angle - 90)}deg)` }} />
            </button>
          ) : null,
        )}
      </div>
    </>
  );
}

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

function getPointAtSampledLength(points: EdgePoint[], totalLength: number, length: number): EdgePoint {
  const safeLength = Math.max(0, Math.min(totalLength, length));
  const index = (points.length - 1) * Math.max(0, Math.min(1, safeLength / totalLength));
  const leftIndex = Math.floor(index);
  const ratio = index - leftIndex;
  if (leftIndex >= points.length - 1) return points[points.length - 1];
  const left = points[leftIndex];
  const right = points[leftIndex + 1];
  return {
    x: left.x + ratio * (right.x - left.x),
    y: left.y + ratio * (right.y - left.y),
  };
}

function parseSimpleEdgePath(pathD: string): { points: EdgePoint[]; totalLength: number } | null {
  const line = pathD.match(/M\s*([\d.eE+-]+)\s*[, ]\s*([\d.eE+-]+)\s*L\s*([\d.eE+-]+)\s*[, ]\s*([\d.eE+-]+)/i);
  const cubic = pathD.match(/M\s*([\d.eE+-]+)\s*[, ]\s*([\d.eE+-]+)\s*C\s*[\d.eE+-]+\s*[, ]\s*[\d.eE+-]+\s+[\d.eE+-]+\s*[, ]\s*[\d.eE+-]+\s+([\d.eE+-]+)\s*[, ]\s*([\d.eE+-]+)/i);
  const match = line || cubic;
  if (!match) return null;
  const x1 = Number.parseFloat(match[1]);
  const y1 = Number.parseFloat(match[2]);
  const x2 = Number.parseFloat(match[3]);
  const y2 = Number.parseFloat(match[4]);
  const totalLength = Math.hypot(x2 - x1, y2 - y1);
  if (totalLength <= 0) return null;
  const points = Array.from({ length: 81 }, (_, index) => {
    const ratio = index / 80;
    return { x: x1 + ratio * (x2 - x1), y: y1 + ratio * (y2 - y1) };
  });
  return { points, totalLength };
}

function sampleEdgePath(pathD: string): { points: EdgePoint[]; totalLength: number } | null {
  if (typeof document === "undefined") return null;
  const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
  path.setAttribute("d", pathD);
  try {
    const totalLength = path.getTotalLength();
    if (totalLength <= 0.5) return parseSimpleEdgePath(pathD);
    const points = Array.from({ length: 81 }, (_, index) => {
      const point = path.getPointAtLength((index / 80) * totalLength);
      return { x: point.x, y: point.y };
    });
    return { points, totalLength };
  } catch {
    return parseSimpleEdgePath(pathD);
  }
}

function EdgeFlowSegments({
  glowScale = 1,
  pathD,
  strokeWidth = 4,
  uniqueId,
  visible,
}: {
  glowScale?: number;
  pathD: string;
  strokeWidth?: number;
  uniqueId: string;
  visible?: boolean;
}) {
  const [progress, setProgress] = useState(0);
  const sampledPath = useMemo(() => sampleEdgePath(pathD), [pathD]);
  const safeId = useMemo(() => `libtv-edge-flow-${uniqueId.replace(/[^a-zA-Z0-9_-]/g, "-")}`, [uniqueId]);
  const bounds = useMemo(() => {
    const points = sampledPath?.points || [];
    if (points.length === 0) return { height: 100, width: 100, x: 0, y: 0 };
    const padding = 20 * glowScale;
    let minX = Infinity;
    let minY = Infinity;
    let maxX = -Infinity;
    let maxY = -Infinity;
    points.forEach((point) => {
      minX = Math.min(minX, point.x);
      minY = Math.min(minY, point.y);
      maxX = Math.max(maxX, point.x);
      maxY = Math.max(maxY, point.y);
    });
    return {
      height: maxY - minY + padding * 2,
      width: maxX - minX + padding * 2,
      x: minX - padding,
      y: minY - padding,
    };
  }, [glowScale, sampledPath?.points]);

  useEffect(() => {
    if (!visible || !sampledPath) return;
    let frame = 0;
    const start = performance.now();
    const tick = () => {
      setProgress(((performance.now() - start) / 3000) % 1);
      frame = requestAnimationFrame(tick);
    };
    frame = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(frame);
  }, [sampledPath, visible]);

  if (!visible || !sampledPath) return null;

  const { points, totalLength } = sampledPath;
  const segmentLength = Math.max(0.12 * totalLength, 2);
  const filterId = `${safeId}-filter`;

  return (
    <g className="edge-flow-segments" style={{ pointerEvents: "none" }}>
      <defs>
        <filter
          colorInterpolationFilters="sRGB"
          filterUnits="userSpaceOnUse"
          height={bounds.height}
          id={filterId}
          width={bounds.width}
          x={bounds.x}
          y={bounds.y}
        >
          <feGaussianBlur in="SourceGraphic" result="blurOuter" stdDeviation={4 * glowScale} />
          <feFlood floodColor="rgba(100, 180, 255, 0.45)" result="floodOuter" />
          <feComposite in="blurOuter" in2="floodOuter" operator="in" result="glowOuter" />
          <feGaussianBlur in="SourceGraphic" result="blurInner" stdDeviation={1.5 * glowScale} />
          <feFlood floodColor="rgba(150, 210, 255, 0.7)" result="floodInner" />
          <feComposite in="blurInner" in2="floodInner" operator="in" result="glowInner" />
          <feMerge>
            <feMergeNode in="glowOuter" />
            <feMergeNode in="glowInner" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>
      {Array.from({ length: 3 }, (_, index) => {
        const startLength = ((progress + index / 3) % 1) * totalLength;
        const start = getPointAtSampledLength(points, totalLength, startLength);
        const end = getPointAtSampledLength(points, totalLength, startLength + segmentLength);
        const segmentPath = Array.from({ length: 13 }, (__, segmentIndex) => {
          const point = getPointAtSampledLength(points, totalLength, startLength + (segmentLength * segmentIndex) / 12);
          return segmentIndex === 0 ? `M ${point.x},${point.y}` : `L ${point.x},${point.y}`;
        }).join(" ");
        const gradientId = `${safeId}-grad-${index}`;
        return (
          <g key={index}>
            <defs>
              <linearGradient gradientUnits="userSpaceOnUse" id={gradientId} x1={start.x} x2={end.x} y1={start.y} y2={end.y}>
                <stop offset="0%" stopColor="rgba(100, 180, 255, 0)" />
                <stop offset="100%" stopColor="rgba(100, 180, 255, 0.9)" />
              </linearGradient>
            </defs>
            <path
              d={segmentPath}
              fill="none"
              filter={`url(#${filterId})`}
              stroke={`url(#${gradientId})`}
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={strokeWidth}
            />
          </g>
        );
      })}
    </g>
  );
}

function CloneCanvasNode({
  connectionsHidden,
  connectionHoverActive,
  frameAnalysisReady,
  frameAnalysisModelReady,
  frameAnalysisAudioModelReady,
  onClearGridSplit,
  onClearGridSplitSelection,
  onClearLocalEditRegions,
  node,
  onCancelGeneration,
  onContextMenu,
  onExtractVideoFrame,
  onGenerateVideoHd,
  onModuleAction,
  onOpenConnectionMenu,
  onOpenScriptWorkflow,
  onPointerDown,
  onStartConnectionDrag,
  onStartConnectionMouseDrag,
  onRunNode,
  onChooseFile,
  onSetLocalEditMode,
  onSubmitLocalEdit,
  onToggleGridSplitSelection,
  onUpdateLocalEditRegions,
  onTextResourceChange,
  selected,
  smartEditPreviewUrl,
}: {
  connectionsHidden: boolean;
  connectionHoverActive: boolean;
  frameAnalysisReady?: boolean;
  frameAnalysisModelReady?: boolean;
  frameAnalysisAudioModelReady?: boolean;
  onClearGridSplit: () => void;
  onClearGridSplitSelection: () => void;
  onClearLocalEditRegions: () => void;
  node: CloneNode;
  smartEditPreviewUrl?: string;
  onCancelGeneration: () => void;
  onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
  onExtractVideoFrame: (kind: VideoFrameExtractionKind,time?:number) => void;
  onGenerateVideoHd: () => void;
  onModuleAction: (actionLabel: TargetModuleActionLabel) => void;
  onOpenConnectionMenu: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  onOpenScriptWorkflow: () => void;
  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
  onStartConnectionDrag: (event: ReactPointerEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  onStartConnectionMouseDrag: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  onRunNode: () => void;
  onChooseFile: () => void;
  onSetLocalEditMode: (enabled: boolean) => void;
  onSubmitLocalEdit: (regions: LocalEditRegion[]) => void;
  onToggleGridSplitSelection: (index: number, behavior: "replace" | "toggle") => void;
  onUpdateLocalEditRegions: (regions: LocalEditRegion[]) => void;
  onTextResourceChange: (content: string) => void;
  selected: boolean;
}) {
  if (getDraftString(node, "action") === "TOOLBOX_TEMPLATE_GROUP") {
    return <ToolboxTemplateGroupCanvasNode node={node} selected={selected} onPointerDown={onPointerDown} onContextMenu={onContextMenu}/>;
  }

  if (
    node.kind === "material-style" ||
    getDraftString(node, "action") === "MATERIAL_STYLE" ||
    isVideoEffectMaterialNode(node) ||
    isVideoRoleMaterialNode(node)
  ) {
    return (
      <MaterialStyleCanvasNode
        node={node}
        onContextMenu={onContextMenu}
        onPointerDown={onPointerDown}
        selected={selected}
      />
    );
  }

  const shellProps = {
    connectionHoverActive,
    connectionsHidden,
    node,
    onContextMenu,
    onOpenConnectionMenu,
    onPointerDown,
    onStartConnectionDrag,
    onStartConnectionMouseDrag,
    selected,
  };

  const targetModuleKind = getTargetModuleKind(node);
  if (targetModuleKind) {
    return (
      <CanvasNodeShell {...shellProps}>
        <TargetModuleCanvasNode frameAnalysisAudioModelReady={frameAnalysisAudioModelReady} frameAnalysisModelReady={frameAnalysisModelReady} frameAnalysisReady={frameAnalysisReady} previewUrl={smartEditPreviewUrl} kind={targetModuleKind} node={node} onAction={onModuleAction} onRunNode={onRunNode} selected={selected} />
      </CanvasNodeShell>
    );
  }

  if (getDraftString(node, "action") === "TEXT_RESOURCE") {
    return (
      <CanvasNodeShell {...shellProps}>
        <PureTextResourceCanvasNode node={node} onTextResourceChange={onTextResourceChange} selected={selected} />
      </CanvasNodeShell>
    );
  }

  if (node.kind === "video-story" || getDraftString(node, "action") === "VIDEO_STORY_ANALYSIS") {
    return (
      <CanvasNodeShell {...shellProps}>
        <VideoStoryCanvasNode node={node} selected={selected} />
      </CanvasNodeShell>
    );
  }

  if (
    getDraftString(node, "action") === "VIDEO_SUBTITLE_ERASE" &&
    getDraftString(node, "generationStatus") === "pending"
  ) {
    return (
      <CanvasNodeShell {...shellProps}>
        <VideoSubtitleErasePendingCanvasNode node={node} onCancel={onCancelGeneration} selected={selected} />
      </CanvasNodeShell>
    );
  }

  if (getDraftString(node, "action") === "VIDEO_HD_UPSCALE") {
    return (
      <CanvasNodeShell {...shellProps}>
        <VideoHdUpscaleCanvasNode node={node} onGenerate={onGenerateVideoHd} selected={selected} />
      </CanvasNodeShell>
    );
  }

  if (node.kind === "media") {
    return (
      <CanvasNodeShell {...shellProps}>
        <PresetMediaCanvasNode
          node={node}
          onChooseFile={onChooseFile}
          onCancelGeneration={onCancelGeneration}
          onClearGridSplit={onClearGridSplit}
          onClearGridSplitSelection={onClearGridSplitSelection}
          onClearLocalEditRegions={onClearLocalEditRegions}
          onExtractVideoFrame={onExtractVideoFrame}
          onSetLocalEditMode={onSetLocalEditMode}
          onSubmitLocalEdit={onSubmitLocalEdit}
          onToggleGridSplitSelection={onToggleGridSplitSelection}
          onUpdateLocalEditRegions={onUpdateLocalEditRegions}
          selected={selected}
        />
      </CanvasNodeShell>
    );
  }

  if (node.kind === "script") {
    return (
      <CanvasNodeShell {...shellProps}>
        <PresetScriptCanvasNode node={node} onOpenWorkflow={onOpenScriptWorkflow} onRun={onRunNode} onTextResourceChange={onTextResourceChange} selected={selected} />
      </CanvasNodeShell>
    );
  }

  const nodeType = getDraftString(node, "nodeType");
  const Icon = nodeType === "video-clip" ? Scissors : node.inputType === "audio" ? Music2 : node.inputType === "video" ? Video : node.kind === "text" ? FileText : node.kind === "preview" ? Video : ImageIcon;
  const isInput = node.kind === "input";
  const isWarm = node.kind === "text" || node.kind === "audio";
  const previewUrl = getDraftString(node, "thumbnailUrl") || getDraftString(node, "resultImage");
  return (
    <CanvasNodeShell {...shellProps}>
      {isInput ? (
        <div
          className={cn(
            "relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-[10px] border border-white/12 bg-[#282828] px-3 text-center text-white",
            selected && "border-white/35 outline outline-1 outline-white/25"
          )}
        >
          {previewUrl ? (
            <>
              <img
                alt=""
                className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-35"
                draggable={false}
                onDragStart={preventNativeImageDrag}
                src={previewUrl}
              />
              <span className="absolute inset-0 bg-black/55" />
            </>
          ) : null}
          <span className="relative mb-2 flex h-8 w-8 items-center justify-center rounded-[8px] border border-white/10 bg-white/5 text-white/65">
            <Icon className="h-4 w-4" />
          </span>
          <div className="relative max-w-full truncate text-[12px] font-medium">{node.title}</div>
          <div className="relative mt-1 line-clamp-2 text-[10px] leading-4 text-white/45">{node.subtitle}</div>
          <button className="relative mt-2 h-7 rounded-[6px] border border-white/15 bg-white/8 px-3 text-[11px] text-white/85 hover:bg-white/15" onClick={onChooseFile} onPointerDown={(event)=>event.stopPropagation()} type="button">
            选择文件
          </button>
        </div>
      ) : (
        <div
          className={cn(
            "relative flex h-full w-full items-center gap-4 overflow-hidden rounded-[26px] border bg-[#f6f7fb] px-5 text-[#20222a]",
            isWarm && "bg-[#fff0f3]",
            node.kind === "workflow" && "bg-[#f6f7fb]",
            selected ? "border-[#8b96ff]" : "border-white/45"
          )}
        >
          <div
            className={cn(
              "flex h-14 w-14 shrink-0 items-center justify-center rounded-full border border-black/5 bg-white/70 text-[#8b96ff] shadow-[inset_0_0_16px_rgba(255,255,255,0.7)]",
              isWarm && "text-[#ff9eae]"
            )}
          >
            {node.kind === "workflow" ? <GitBranch className="h-5 w-5" /> : <Icon className="h-5 w-5" />}
          </div>
          <div className="min-w-0 flex-1">
            <div className="mb-1 text-[12px] text-[#697080]">{node.subtitle || "工具"}</div>
            <div className="truncate font-semibold text-[14px] tracking-[0]">{node.title}</div>
          </div>
          <div className="flex h-[58px] w-8 items-center justify-center rounded-full border border-black/8 bg-white/62 text-center text-[13px] leading-4 text-[#272a32]">
            待<br />配置
          </div>
        </div>
      )}
    </CanvasNodeShell>
  );
}

function ToolboxTemplateGroupCanvasNode({ node, selected, onPointerDown, onContextMenu }: { node: CloneNode; selected: boolean; onPointerDown:(event:ReactPointerEvent<HTMLDivElement>)=>void;onContextMenu:(event:ReactMouseEvent<HTMLDivElement>)=>void }) {
 const color=String(node.draftValues?.groupColor||"#aaaaaa");
 return <div className="pointer-events-none absolute z-[-1] border bg-[#2a2a2a]/85 select-none" data-canvas-node="true" data-canvas-node-id={node.id} data-canvas-overlay="true" style={{height:node.height,left:node.x,top:node.y,width:node.width,borderColor:selected?color:"#555"}}>
 <div className="pointer-events-auto absolute -top-8 left-0 flex h-7 w-full cursor-grab items-center text-[16px] text-white/55" onPointerDown={onPointerDown} onContextMenu={onContextMenu}>{node.draftValues?.groupMode==="storyboard"?"分镜组 · ":""}{node.title}</div>
 {selected&&["nw","ne","sw","se"].map(corner=><div key={corner} data-group-resize={corner} className="pointer-events-auto absolute h-3 w-3 rounded-[2px] bg-[#aaa]" onPointerDown={onPointerDown} style={{left:corner.includes("w")?-6:undefined,right:corner.includes("e")?-6:undefined,top:corner.includes("n")?-6:undefined,bottom:corner.includes("s")?-6:undefined,cursor:corner==="nw"||corner==="se"?"nwse-resize":"nesw-resize"}}/>)}
 </div>;
}

function MaterialStyleCanvasNode({
  node,
  onContextMenu,
  onPointerDown,
  selected,
}: {
  node: CloneNode;
  onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
  selected: boolean;
}) {
  const thumbnailUrl = getDraftString(node, "thumbnailUrl") || getNodeMediaUrl(node) || STYLE_MARKET_THUMBNAIL_URL;
  const isEffect = isVideoEffectMaterialNode(node);
  const isRole = isVideoRoleMaterialNode(node);
  return (
    <div
      className={cn(
        "react-flow__node nopan selectable draggable absolute cursor-grab rounded-[12px] bg-[#262626] text-white shadow-[0_14px_34px_rgba(0,0,0,0.35)] active:cursor-grabbing",
        isEffect || isRole
          ? cn(
              "overflow-visible",
              isEffect
                ? "react-flow__node-material-lens"
                : "react-flow__node-material-portrait",
            )
          : "react-flow__node-material-style overflow-hidden",
        selected && "selected ring-1 ring-white/40"
      )}
      data-canvas-node="true"
      data-canvas-node-id={node.id}
      data-canvas-overlay="true"
      onContextMenu={onContextMenu}
      onPointerDown={onPointerDown}
      style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
    >
      {isEffect || isRole ? (
        <>
          <div className="absolute -top-[27px] left-0 flex max-w-full items-center gap-1 text-[14px] leading-5 text-white/50">
            {isEffect ? (
              <Sparkles className="h-3.5 w-3.5 shrink-0" />
            ) : (
              <UserRound className="h-3.5 w-3.5 shrink-0" />
            )}
            <span className="truncate">{node.title}</span>
          </div>
          <div className="size-full overflow-hidden rounded-[12px] bg-[#1f1f1f]">
            <img
              alt={
                getDraftString(node, isEffect ? "effectTitle" : "roleName") ||
                node.title
              }
              className={cn("size-full object-cover", isRole && "object-top")}
              draggable={false}
              onDragStart={preventNativeImageDrag}
              src={thumbnailUrl}
            />
            {isRole && getDraftString(node, "assetId") ? (
              <span className="absolute bottom-2 right-2 flex size-5 items-center justify-center rounded-full bg-[#09caf5] text-black shadow-lg">
                <Check className="h-3 w-3" strokeWidth={3} />
              </span>
            ) : null}
          </div>
        </>
      ) : (
        <>
          <img
            alt=""
            className="h-full w-full object-cover"
            draggable={false}
            onDragStart={preventNativeImageDrag}
            src={thumbnailUrl}
          />
          <div className="absolute inset-x-0 bottom-0 bg-[linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,0.78))] px-3 pb-3 pt-12">
            <div className="truncate text-[14px] font-medium leading-5">{node.title}</div>
          </div>
        </>
      )}
    </div>
  );
}

function TargetModuleCanvasNode({
  frameAnalysisAudioModelReady,
  frameAnalysisModelReady,
  frameAnalysisReady,
  kind,
  node,
  onAction,
  onRunNode,
  selected,
  previewUrl,
}: {
  frameAnalysisAudioModelReady?: boolean;
  frameAnalysisModelReady?: boolean;
  frameAnalysisReady?: boolean;
  kind: AddModuleKind;
  previewUrl?: string;
  node: CloneNode;
  onAction: (actionLabel: TargetModuleActionLabel) => void;
  onRunNode: () => void;
  selected: boolean;
}) {
  const [frameSourceMenuOpen, setFrameSourceMenuOpen] = useState(false);
  if (kind === "frame-analysis") {
    const dimensions = (node.draftValues?.dimensions || {}) as Record<string, boolean>;
    return <div className="h-full w-full text-white">
      <div className="mb-2 flex h-7 items-center gap-2 text-[14px] text-white/55"><ScanText className="size-4" />{node.title}</div>
      <div className={cn("h-[312px] rounded-[8px] border border-white/10 bg-[#252525] p-3", selected && "outline outline-1 outline-white/25")}>
        <div className="mb-3 flex items-center gap-2 text-[12px] text-white/85"><ScanText className="size-4" />逐帧拉片 <span className="rounded bg-[#315261] px-1.5 py-0.5 text-[10px] text-[#80d3e9]">视频解析</span></div>
        <div className="mb-2 text-[11px] text-white/40">视频素材</div>
        <div className="relative">
          <button aria-expanded={frameSourceMenuOpen} className="flex h-[132px] w-full flex-col items-center justify-center gap-2 rounded-lg border border-dashed border-white/10 bg-[#292929] text-[12px] text-white/55 hover:border-white/30 hover:text-white" onClick={() => setFrameSourceMenuOpen(value => !value)} onPointerDown={(event) => event.stopPropagation()} type="button"><Clapperboard className="size-6" />{frameAnalysisReady ? "已连接视频 · 更换素材" : "上传视频后开始"}</button>
          {frameSourceMenuOpen ? <div className="absolute left-1/2 top-1/2 z-10 flex w-[154px] -translate-x-1/2 -translate-y-1/2 flex-col gap-1 rounded-lg border border-white/15 bg-[#353535] p-1 shadow-xl" data-canvas-overlay="true">
            <button className="rounded-md px-3 py-2 text-left text-[12px] hover:bg-white/10" onClick={() => { setFrameSourceMenuOpen(false); onAction("上传视频拉片"); }} onPointerDown={event => event.stopPropagation()} type="button">上传视频</button>
            <button className="rounded-md px-3 py-2 text-left text-[12px] hover:bg-white/10" onClick={() => { setFrameSourceMenuOpen(false); onAction("从画布选择视频拉片"); }} onPointerDown={event => event.stopPropagation()} type="button">从画布选择</button>
          </div> : null}
        </div>
        <div className="mt-3 text-[11px] text-white/45">拆解维度</div>
        <div className="mt-2 flex gap-2">{([ ["shots", "分镜", "拉片分镜"], ["motion", "动态", "拉片动态"], ["music", "音乐", "拉片音乐"] ] as const).map(([key, label, action]) => <button aria-pressed={dimensions[key] !== false} className={cn("flex-1 rounded-full border px-2 py-1.5 text-[11px]", dimensions[key] !== false ? "border-cyan-700/40 bg-cyan-900/30 text-cyan-200" : "border-white/10 text-white/40")} key={key} onClick={() => onAction(action)} onPointerDown={(event) => event.stopPropagation()} type="button">{label}</button>)}</div>
        <button className="mt-3 h-8 w-full rounded-lg bg-white text-[12px] font-medium text-black disabled:cursor-not-allowed disabled:bg-white/20 disabled:text-white/40" disabled={!frameAnalysisReady || !frameAnalysisModelReady || (dimensions.music !== false && !frameAnalysisAudioModelReady) || !Object.values({shots:dimensions.shots !== false,motion:dimensions.motion !== false,music:dimensions.music !== false}).some(Boolean)} onClick={onRunNode} onPointerDown={(event) => event.stopPropagation()} title={!frameAnalysisModelReady ? "请先在模型设置中启用支持视频理解的模型" : dimensions.music !== false && !frameAnalysisAudioModelReady ? "音乐与人声解析需启用阿里云 qwen3.8-omni-flash；可取消音乐只解析画面" : undefined} type="button">{!frameAnalysisModelReady ? "解析模型未配置" : dimensions.music !== false && !frameAnalysisAudioModelReady ? "声音模型未配置" : "开始拉片"}</button>
      </div>
    </div>;
  }
  if (kind === "smart-edit") {
    const draft = node.draftValues?.smartEditDraft as Record<string, any> | undefined;
    const plans = draft?.planTaskId === node.draftValues?.smartEditPlanTaskId ? draft?.plans || node.draftValues?.smartEditPlans : node.draftValues?.smartEditPlans;
    return <SmartEditNodeCard plan={(plans as EditPlan[] | undefined)?.[draft?.selectedPlanIndex || 0]} selected={selected} title={node.title} previewUrl={previewUrl} onOpen={() => onAction("打开智能剪辑")} onMode={(mode) => onAction(({explain:"讲解视频",ads:"批量广告",talk:"口播视频",montage:"素材混剪"} as const)[mode])} />;
  }
  const HeaderIcon = kind === "video-clip" ? Scissors : kind === "director" ? Settings2 : kind === "audio" ? Music2 : kind === "video" ? Video : kind === "image" ? ImageIcon : FileText;
  const actions: Record<AddModuleKind, Array<{ icon: LucideIcon | "hd"; label: TargetModuleActionLabel }>> = {
    "smart-edit": [{icon:Scissors,label:"打开智能剪辑"}],
    audio: [{ icon: Play, label: "音频生视频" }],
    director: [{ icon: Settings2, label: "打开导演台" }],
    image: [
      { icon: Upload, label: "图生图" },
      { icon: "hd", label: "图片高清" },
    ],
    script: [
      { icon: FileText, label: "剧本生成分镜脚本" },
      { icon: UserRound, label: "角色生成分镜脚本" },
      { icon: FileText, label: "自己编写分镜脚本" },
    ],
    "legacy-script": [
      { icon: FileText, label: "剧本生成分镜脚本" },
      { icon: Video, label: "视频参考生成分镜脚本" },
      { icon: UserRound, label: "角色生成分镜脚本" },
    ],
    text: [
      { icon: FileText, label: "自己编写内容" },
      { icon: Play, label: "文生视频" },
      { icon: ImageIcon, label: "图片反推提示词" },
      { icon: Music2, label: "文字生音乐" },
    ],
    video: [
      { icon: Layers, label: "首尾帧生成视频" },
      { icon: Sparkles, label: "首帧生成视频" },
    ],
    "frame-analysis": [],
    "video-clip": [],
  };
  const isCompactTargetModule =
    kind === "text" ||
    kind === "image" ||
    kind === "video" ||
    kind === "video-clip" ||
    kind === "director" ||
    kind === "audio" ||
    kind === "script" ||
    kind === "legacy-script";
  const actionTop =
    kind === "text"
      ? "top-[136px]"
      : kind === "image"
        ? "top-[118px]"
        : kind === "video"
          ? "top-[106px]"
          : kind === "audio"
            ? "top-[166px]"
          : kind === "script" || kind === "legacy-script"
            ? "top-[156px]"
            : "top-[190px]";
  const heroTop = kind === "video" ? "top-[58px]" : kind === "text" || kind === "script" || kind === "legacy-script" ? "top-[62px]" : "top-[116px]";
  return (
    <div className="h-full w-full">
      <div className="mb-[10px] flex h-7 items-center gap-2 text-[14px] font-semibold leading-none text-white/44">
        <HeaderIcon className="size-4" />
        <span>{node.title}</span>
      </div>
      <div
        className={cn(
          "relative overflow-hidden rounded-[8px] border border-white/8 bg-[#252525] shadow-[0_16px_38px_rgba(0,0,0,0.24)]",
          kind === "image" ? selected ? "h-[350px]" : "h-[312px]" : isCompactTargetModule ? "h-[312px]" : "h-[432px]",
          selected && "outline outline-1 outline-white/22"
        )}
      >
        {kind === "image" ? (
          <div className="relative h-full p-5" data-testid="image-node-empty-state">
            <div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-[78px] flex justify-center text-white/18">
              <TargetModuleHeroGraphic kind="image" />
            </div>
            <div className="absolute bottom-[76px] left-5 flex flex-col gap-2">
              <span className="text-[12px] text-white/42">尝试：</span>
              {actions.image.map((action) => (
                <button
                  className="flex min-h-6 items-center gap-3 text-left text-[13px] leading-5 text-white/82 hover:text-white"
                  data-image-node-action={action.label}
                  key={action.label}
                  onClick={() => onAction(action.label)}
                  onPointerDown={(event) => event.stopPropagation()}
                  type="button"
                >
                  <ModuleActionIcon icon={action.icon} />
                  <span>{action.label}</span>
                </button>
              ))}
            </div>
          </div>
        ) : (
          <>
            {kind === "director" ? null : (
              <div className={cn("absolute inset-x-0 flex justify-center text-white/18", heroTop)}>
                <TargetModuleHeroGraphic kind={kind} />
              </div>
            )}
            {kind === "video-clip" ? (
              <div className="absolute inset-x-0 top-[254px] text-center text-[12px] text-white/34">
                空空如也，请连接视频节点后操作
              </div>
            ) : kind === "director" ? (
              <div className="absolute inset-x-0 top-[46px] flex flex-col items-center px-10 text-center">
                <div className="max-w-[178px] text-[12px] leading-[18px] text-white/42">
                  在3D空间中搭建场景并进行多视角截图
                </div>
                <button
                  className="mt-7 flex h-6 items-center rounded-[6px] bg-white/10 px-2 text-[12px] font-medium leading-none text-white/86 transition hover:bg-white/15"
                  onClick={() => onAction("打开导演台")}
                  onPointerDown={(event) => event.stopPropagation()}
                  type="button"
                >
                  打开导演台
                </button>
              </div>
            ) : (
              <div className={cn("absolute left-8", actionTop)}>
                <div className="mb-4 text-[12px] text-white/42">尝试：</div>
                <div className="space-y-3">
                  {actions[kind].map((action) => (
                    <button
                      className="flex items-center gap-3 text-[13px] leading-5 text-white/82 hover:text-white"
                      key={action.label}
                      onClick={() => onAction(action.label)}
                      onPointerDown={(event) => event.stopPropagation()}
                      type="button"
                    >
                      <ModuleActionIcon icon={action.icon} />
                      <span>{action.label}</span>
                    </button>
                  ))}
                </div>
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}

function TargetModuleHeroGraphic({ kind }: { kind: AddModuleKind }) {
  if (kind === "text" || kind === "script" || kind === "legacy-script") {
    return (
      <div className="flex w-[92px] flex-col gap-[9px]">
        {[70, 70, 70, 70, 43].map((width, index) => (
          <span className="h-[7px] rounded-full bg-white/16" key={`${width}-${index}`} style={{ width }} />
        ))}
      </div>
    );
  }

  if (kind === "image") {
    return <ImageIcon className="h-[92px] w-[92px]" strokeWidth={1.5} />;
  }

  if (kind === "audio") {
    return <Music2 className="h-[86px] w-[86px]" strokeWidth={1.5} />;
  }

  if (kind === "video") {
    return (
      <span className="flex h-20 w-20 items-center justify-center rounded-[8px] bg-white/18 text-[#242424]">
        <Play className="ml-1 h-11 w-11 fill-current" strokeWidth={0} />
      </span>
    );
  }

  if (kind === "director") {
    return (
      <div className="relative h-[92px] w-[112px] text-white/20">
        <span className="absolute left-7 top-1 h-[72px] w-[72px] rounded-[10px] border border-current" />
        <span className="absolute left-0 top-12 h-px w-[112px] bg-current" />
        <span className="absolute left-1/2 top-0 h-[92px] w-px bg-current" />
        <Settings2 className="absolute left-[42px] top-[30px] h-8 w-8" strokeWidth={1.4} />
      </div>
    );
  }

  return <Scissors className="h-[92px] w-[92px]" strokeWidth={1.4} />;
}

const DIRECTOR_CAMERA_SNAPSHOT_NODE_OFFSET_X = 470;

function DirectorTutorialFollowBar({ onCancel }: { onCancel: () => void }) {
  return (
    <div className="pointer-events-none fixed left-1/2 top-0 z-[1900] -translate-x-1/2">
      <div className="pointer-events-auto flex h-[34px] w-[174px] items-center justify-between rounded-b-xl border border-[#e4ae25] bg-[#e4ae25] px-3 py-1.5 text-white shadow-md">
        <span className="text-sm">正在跟随</span>
        <span className="relative inline-flex">
          <button
            aria-label="退出跟随"
            className="peer h-4 w-16 rounded-full bg-white px-2 py-0.5 text-xs font-medium leading-none text-gray-900 transition-colors hover:bg-white/90"
            onClick={onCancel}
            type="button"
          >
            取消ESC
          </button>
          <span className="pointer-events-none absolute left-full ml-2 whitespace-nowrap rounded bg-black/45 px-2 py-0.5 text-xs text-white/70 opacity-0 transition-opacity peer-hover:opacity-100">
            按 ESC 退出
          </span>
        </span>
      </div>
    </div>
  );
}

function ModuleActionIcon({ icon }: { icon: LucideIcon | "hd" }) {
  if (icon === "hd") {
    return (
      <span
        aria-hidden="true"
        className="flex h-[18px] min-w-[24px] items-center justify-center rounded-[3px] border border-white/72 px-1"
      />
    );
  }
  const Icon = icon;
  return <Icon className="h-[18px] w-[18px] shrink-0 text-white/86" strokeWidth={2} />;
}

function normalizeGridCellVisual(value: unknown): GridCellVisual {
  const record = value && typeof value === "object" ? (value as Record<string, unknown>) : {};
  const fit = record.fit === "contain" ? "contain" : "cover";
  return {
    fit,
    objectPosition: typeof record.objectPosition === "string" ? record.objectPosition : "50% 50%",
    scale: Number.isFinite(Number(record.scale)) ? Number(record.scale) : 1,
    translateX: Number.isFinite(Number(record.translateX)) ? Number(record.translateX) : 0,
    translateY: Number.isFinite(Number(record.translateY)) ? Number(record.translateY) : 0,
  };
}

function normalizeGridCropTile(value: unknown) {
  if (!value || typeof value !== "object") return null;
  const record = value as Record<string, unknown>;
  const rows = Math.max(1, Math.round(Number(record.rows || 1)));
  const columns = Math.max(1, Math.round(Number(record.columns || 1)));
  const index = Math.max(0, Math.round(Number(record.index || 0)));
  const rawRect = record.rect && typeof record.rect === "object" ? (record.rect as Record<string, unknown>) : null;
  const fallbackRect = createEqualGridRects(rows, columns)[index] || createEqualGridRects(rows, columns)[0];
  const rect: GridCropRect = rawRect
    ? {
        height: Math.min(1, Math.max(0.02, Number(rawRect.height ?? fallbackRect.height))),
        width: Math.min(1, Math.max(0.02, Number(rawRect.width ?? fallbackRect.width))),
        x: Math.min(0.98, Math.max(0, Number(rawRect.x ?? fallbackRect.x))),
        y: Math.min(0.98, Math.max(0, Number(rawRect.y ?? fallbackRect.y))),
      }
    : fallbackRect;

  return {
    columns,
    detectedDivider: Boolean(record.detectedDivider),
    index,
    rect,
    rows,
    sourceMode: String(record.sourceMode || ""),
  };
}

function GridCellImage({
  alt,
  src,
  visual,
}: {
  alt: string;
  src: string;
  visual: GridCellVisual;
}) {
  const normalized = normalizeGridCellVisual(visual);
  return (
    <img
      alt={alt}
      className="pointer-events-none h-full w-full"
      draggable={false}
      onDragStart={preventNativeImageDrag}
      src={src}
      style={{
        objectFit: normalized.fit,
        objectPosition: normalized.objectPosition,
        transform: `scale(${normalized.scale}) translate(${normalized.translateX}%, ${normalized.translateY}%)`,
      }}
    />
  );
}

function NineGridCompositePreview({ node, sourceUrl }: { node: CloneNode; sourceUrl: string }) {
  const rows = Math.max(1, Math.round(Number(node.draftValues?.gridRows || 3)));
  const columns = Math.max(1, Math.round(Number(node.draftValues?.gridColumns || 3)));
  const cellCount = rows * columns;
  const visuals = Array.isArray(node.draftValues?.nineGridCells)
    ? (node.draftValues?.nineGridCells as GridCellVisual[])
    : [];

  return (
    <div
      className="absolute inset-0 grid bg-[#161616]"
      style={{
        gap: 1.5,
        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
        gridTemplateRows: `repeat(${rows}, minmax(0, 1fr))`,
      }}
    >
      {Array.from({ length: cellCount }).map((_, index) => (
        <div className="relative overflow-hidden bg-white" key={`${node.id}-grid-cell-${index}`}>
          {sourceUrl ? (
            <GridCellImage
              alt={`${node.title} ${index + 1}`}
              src={sourceUrl}
              visual={visuals[index] || getGridCellVisual(index)}
            />
          ) : null}
        </div>
      ))}
    </div>
  );
}

function CroppedGridTileImage({
  alt,
  cropTile,
  rotation,
  src,
}: {
  alt: string;
  cropTile: NonNullable<ReturnType<typeof normalizeGridCropTile>>;
  rotation: number;
  src: string;
}) {
  const { rect } = cropTile;
  return (
    <div className="absolute inset-0 overflow-hidden bg-white" style={{ transform: `rotate(${rotation}deg)` }}>
      <img
        alt={alt}
        className="pointer-events-none absolute max-w-none"
        draggable={false}
        onDragStart={preventNativeImageDrag}
        src={src}
        style={{
          height: `${100 / rect.height}%`,
          left: `${-(rect.x / rect.width) * 100}%`,
          objectFit: "fill",
          top: `${-(rect.y / rect.height) * 100}%`,
          width: `${100 / rect.width}%`,
        }}
      />
    </div>
  );
}

function GridSplitSelectionOverlay({
  onClearSelection,
  onClose,
  onToggleCell,
  split,
}: {
  onClearSelection: () => void;
  onClose: () => void;
  onToggleCell: (index: number, behavior: "replace" | "toggle") => void;
  split: GridSplitState;
}) {
  const selectedCount = split.selectedIndices.length;
  const selectedSet = new Set(split.selectedIndices);

  return (
    <div className="pointer-events-none absolute inset-0 z-20 overflow-hidden rounded-[10px]">
      <div className="pointer-events-auto absolute left-3 top-3 z-30 flex items-center gap-2">
        <span className="rounded-full border border-white/14 bg-black/56 px-3 py-1 text-[12px] font-medium text-white/82 backdrop-blur-sm">
          {selectedCount > 0 ? `已选 ${selectedCount}` : `${split.columns} × ${split.rows} 切分`}
        </span>
        {selectedCount > 0 ? (
          <button
            className="rounded-full border border-white/12 bg-black/48 px-3 py-1 text-[12px] text-white/72 transition hover:bg-black/60 hover:text-white"
            onClick={(event) => {
              event.stopPropagation();
              onClearSelection();
            }}
            onPointerDown={(event) => event.stopPropagation()}
            type="button"
          >
            清空选择
          </button>
        ) : null}
        <button
          className="rounded-full border border-white/12 bg-black/48 px-3 py-1 text-[12px] text-white/72 transition hover:bg-black/60 hover:text-white"
          onClick={(event) => {
            event.stopPropagation();
            onClose();
          }}
          onPointerDown={(event) => event.stopPropagation()}
          type="button"
        >
          取消切分
        </button>
      </div>
      {split.rects.map((rect, index) => {
        const selected = selectedSet.has(index);
        return (
          <button
            className={cn(
              "pointer-events-auto absolute cursor-pointer rounded-[3px] border transition-colors duration-150",
              selected
                ? "border-[#69abff] bg-[#2f73ff]/26 shadow-[inset_0_0_0_1px_rgba(105,171,255,0.55)]"
                : "border-white/12 bg-transparent hover:border-white/42 hover:bg-white/6"
            )}
            key={`grid-split-${index}`}
            onClick={(event) => {
              event.stopPropagation();
              onToggleCell(index, event.metaKey || event.ctrlKey || event.shiftKey ? "toggle" : "replace");
            }}
            onPointerDown={(event) => event.stopPropagation()}
            style={{
              height: `${rect.height * 100}%`,
              left: `${rect.x * 100}%`,
              top: `${rect.y * 100}%`,
              width: `${rect.width * 100}%`,
            }}
            title={`镜头 ${String(index + 1).padStart(2, "0")}`}
            type="button"
          />
        );
      })}
    </div>
  );
}

function OfficialVideoResultCard({
  durationSeconds,
  mediaUrl,
  onExtractFrame,
  previewUrl,
  selected,
  title,
}: {
  durationSeconds: number;
  mediaUrl: string;
  onExtractFrame: (kind: VideoFrameExtractionKind,time?:number) => void;
  previewUrl?: string;
  selected: boolean;
  title: string;
}) {
  const videoRef = useRef<HTMLVideoElement | null>(null);
  const [playing, setPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [frameMenuOpen, setFrameMenuOpen] = useState(false);
  const [hovered, setHovered] = useState(false);
  const [decodedDuration, setDecodedDuration] = useState(0);
  useEffect(() => { setDecodedDuration(0); setCurrentTime(0); setPlaying(false); }, [mediaUrl]);
  const safeDuration = Math.max(0.1, decodedDuration || durationSeconds || 5);
  const progress = Math.max(0, Math.min(currentTime / safeDuration, 1));
  const controlsVisible = hovered || selected || frameMenuOpen;
  const frameActions: Array<{ kind: VideoFrameExtractionKind; label: string }> = [
    { kind: "first", label: "截取首帧" },
    { kind: "last", label: "截取尾帧" },
    { kind: "current", label: "截取当前帧" },
  ];

  const togglePlayback = useCallback(() => {
    const video = videoRef.current;
    if (!video) return;
    if (video.paused) {
      void video.play().catch(() => { setPlaying(false); toast.error("视频无法播放，请检查素材地址"); });
      return;
    }
    video.pause();
    setPlaying(false);
  }, []);

  return (
    <div
      className={cn(
        "group/video-result relative h-full w-full overflow-visible rounded-[10px]",
        selected && "ring-1 ring-[#8b96ff]/45"
      )}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => {
        setHovered(false);
        setFrameMenuOpen(false);
      }}
      onPointerEnter={() => setHovered(true)}
      onPointerLeave={() => {
        setHovered(false);
        setFrameMenuOpen(false);
      }}
      onPointerMove={() => setHovered(true)}
    >
      <video
        className="pointer-events-none h-full w-full rounded-[10px] bg-[#101010] object-contain"
        muted
        onLoadedMetadata={event => { const value = event.currentTarget.duration; if (Number.isFinite(value) && value > 0) setDecodedDuration(value); }}
        onError={() => setPlaying(false)}
        onEnded={() => setPlaying(false)}
        onPause={() => setPlaying(false)}
        onPlay={() => setPlaying(true)}
        onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
        playsInline
        poster={previewUrl || undefined}
        preload="auto"
        ref={videoRef}
        src={mediaUrl}
      />
      <div
        className={cn(
          "pointer-events-none absolute inset-x-0 bottom-0 h-20 rounded-b-[10px] bg-gradient-to-t from-black/72 via-black/34 to-transparent transition-opacity duration-150",
          controlsVisible ? "opacity-100" : "opacity-0"
        )}
      />
      <div
        className={cn(
          "nodrag pointer-events-auto absolute inset-x-0 bottom-0 flex items-center gap-2 px-3 pb-2.5 pt-8 text-white transition-opacity duration-150",
          controlsVisible ? "opacity-100" : "opacity-0"
        )}
        onPointerDown={(event) => event.stopPropagation()}
      >
        <button
          aria-label={playing ? "暂停视频" : "播放视频"}
          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-black/30 text-white/86 transition hover:bg-black/50"
          onClick={(event) => {
            event.stopPropagation();
            togglePlayback();
          }}
          type="button"
        >
          {playing ? <Pause className="h-3.5 w-3.5 fill-current" strokeWidth={0} /> : <Play className="ml-0.5 h-3.5 w-3.5 fill-current" strokeWidth={0} />}
        </button>
        <span className="w-[34px] text-[12px] tabular-nums text-white/82">{formatVideoTimestamp(currentTime)}</span>
        <div className="h-1 min-w-12 flex-1 overflow-hidden rounded-full bg-white/24">
          <span className="block h-full rounded-full bg-white" style={{ width: `${Math.max(4, progress * 100)}%` }} />
        </div>
        <span className="w-[34px] text-right text-[12px] tabular-nums text-white/82">{formatVideoTimestamp(safeDuration)}</span>
        <div
          className="group/frame-menu relative"
          onMouseLeave={() => setFrameMenuOpen(false)}
        >
          <button
            aria-label="截取视频帧"
            className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-black/30 text-white/86 transition hover:bg-black/50"
            onClick={(event) => {
              event.stopPropagation();
              setFrameMenuOpen((value) => !value);
            }}
            type="button"
          >
            <ImageIcon className="h-3.5 w-3.5" strokeWidth={2.2} />
          </button>
          <div
            className={cn(
              "absolute bottom-full right-0 z-30 flex justify-end pb-2 transition-opacity",
              frameMenuOpen
                ? "pointer-events-auto opacity-100"
                : "pointer-events-none opacity-0 group-hover/frame-menu:pointer-events-auto group-hover/frame-menu:opacity-100"
            )}
          >
            <div className="flex min-w-[108px] flex-col gap-1 overflow-hidden rounded-[12px] border border-white/10 bg-[rgba(26,26,26,0.96)] p-1 shadow-[0_14px_42px_rgba(0,0,0,0.42)] backdrop-blur-[12px]">
              {frameActions.map((item) => (
                <button
                  className="flex h-8 w-full items-center whitespace-nowrap rounded-[8px] px-2 text-left text-[13px] text-white/90 transition-colors hover:bg-white/10"
                  key={item.kind}
                  onClick={(event) => {
                    event.stopPropagation();
                    setFrameMenuOpen(false);
                    onExtractFrame(item.kind,currentTime);
                  }}
                  type="button"
                >
                  {item.label}
                </button>
              ))}
            </div>
          </div>
        </div>
      </div>
      <span
        className={cn(
          "pointer-events-none absolute left-3 top-3 rounded-[6px] bg-black/34 px-2 py-1 text-[11px] text-white/76 transition-opacity",
          controlsVisible ? "opacity-100" : "opacity-0"
        )}
      >
        {title}
      </span>
    </div>
  );
}

function OfficialAudioCard({
  durationSeconds = 3,
  mediaUrl,
  selected,
}: {
  durationSeconds?: number;
  mediaUrl: string;
  selected: boolean;
}) {
  const audioRef = useRef<HTMLAudioElement>(null);
  const [playing, setPlaying] = useState(false);
  const [currentTime, setCurrentTime] = useState(0);
  const [duration, setDuration] = useState(durationSeconds);
  const durationLabel = `${formatAudioTimestamp(currentTime)} / ${formatAudioTimestamp(duration)}`;
  useEffect(() => {
    setPlaying(false);
    setCurrentTime(0);
    setDuration(durationSeconds);
  }, [mediaUrl, durationSeconds]);
  return (
    <div
      className={cn(
        "relative h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/12 bg-[#f5f6f9] text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
        selected && "outline outline-2 outline-white/70"
      )}
    >
      <audio
        ref={audioRef}
        src={mediaUrl || undefined}
        preload="metadata"
        onLoadedMetadata={(event) => {
          const value = event.currentTarget.duration;
          if (Number.isFinite(value)) setDuration(value);
        }}
        onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
        onPlay={() => setPlaying(true)}
        onPause={() => setPlaying(false)}
        onEnded={() => setPlaying(false)}
        onError={() => { setPlaying(false); toast.error("音频加载失败，请重试或下载原文件。"); }}
      />
      <div className="absolute left-3 right-3 top-3 h-[74px] overflow-hidden rounded-[8px] bg-[#343434]">
        <span className="absolute left-0 top-0 h-full w-[3px] bg-[#f23a52]" />
        <div className="absolute bottom-3 left-4 right-4 flex h-[42px] items-end gap-[5px]">
          {Array.from({ length: 34 }).map((_, index) => (
            <span
              className="w-[4px] rounded-full bg-white/24"
              key={index}
              style={{ height: `${12 + ((index * 13) % 30)}px` }}
            />
          ))}
        </div>
      </div>
      <div className="absolute bottom-4 left-3 flex items-center gap-3 text-[15px] text-black/62">
        <span>{durationLabel}</span>
      </div>
      <button
        aria-label={playing ? "暂停音频" : "播放音频"}
        className="absolute bottom-3 left-1/2 flex h-8 w-8 -translate-x-1/2 items-center justify-center rounded-full bg-[#303030] text-white/78 transition hover:bg-black"
        disabled={!mediaUrl}
        onPointerDown={(event) => event.stopPropagation()}
        onClick={async (event) => {
          event.stopPropagation();
          const audio = audioRef.current;
          if (!audio) return;
          if (!audio.paused) { audio.pause(); return; }
          try { await audio.play(); }
          catch { toast.error("音频播放失败，请重试或下载原文件。"); }
        }}
        type="button"
      >
        {playing ? <Pause className="h-4 w-4 fill-current" strokeWidth={0} /> : <Play className="ml-0.5 h-4 w-4 fill-current" strokeWidth={0} />}
      </button>
      {mediaUrl ? (
        <a
          className="absolute right-3 top-4 flex h-7 w-7 items-center justify-center rounded-[6px] bg-black/18 text-[14px] text-white/78 hover:bg-black/28"
          href={mediaUrl}
          onPointerDown={(event) => event.stopPropagation()}
          rel="noreferrer"
          target="_blank"
        >
          ↥
        </a>
      ) : null}
    </div>
  );
}

function CanvasNodeShell({
  children,
  connectionHoverActive,
  connectionsHidden,
  node,
  onContextMenu,
  onOpenConnectionMenu,
  onPointerDown,
  onStartConnectionDrag,
  onStartConnectionMouseDrag,
  selected,
}: {
  children: ReactNode;
  connectionHoverActive: boolean;
  connectionsHidden: boolean;
  node: CloneNode;
  onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
  onOpenConnectionMenu: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
  onStartConnectionDrag: (event: ReactPointerEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  onStartConnectionMouseDrag: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  selected: boolean;
}) {
  const targetModuleKind = getTargetModuleKind(node);
  const handleClassName = cn(
    "absolute top-1/2 z-20 h-[22px] w-[22px] -translate-y-1/2 cursor-crosshair rounded-full bg-transparent text-transparent outline-none transition-opacity duration-150",
    connectionsHidden && "pointer-events-none opacity-0"
  );
  const handleTabIndex = connectionsHidden ? -1 : undefined;
  return (
    <div
      className={cn(
        "absolute cursor-grab select-none active:cursor-grabbing",
        targetModuleKind ? "shadow-none" : "shadow-[0_14px_34px_rgba(0,0,0,0.35)]",
        selected && "z-20"
      )}
      data-canvas-node="true"
      data-canvas-node-id={node.id}
      data-canvas-overlay="true"
      onContextMenu={onContextMenu}
      onPointerDown={onPointerDown}
      style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
    >
      {targetModuleKind ? (
        <>
          <button
            aria-label="添加上下文"
            className={cn(handleClassName, "left-[-11px]")}
            data-handleid="target"
            data-handlepos="left"
            data-nodeid={node.id}
            onClick={(event) => onOpenConnectionMenu(event, "target")}
            onMouseDown={(event) => onStartConnectionMouseDrag(event, "target")}
            onPointerDown={(event) => onStartConnectionDrag(event, "target")}
            tabIndex={handleTabIndex}
            title="添加上下文"
            type="button"
          />
          <button
            aria-label="引用该节点生成"
            className={cn(handleClassName, "right-[-11px]")}
            data-handleid="source"
            data-handlepos="right"
            data-nodeid={node.id}
            onClick={(event) => onOpenConnectionMenu(event, "source")}
            onMouseDown={(event) => onStartConnectionMouseDrag(event, "source")}
            onPointerDown={(event) => onStartConnectionDrag(event, "source")}
            tabIndex={handleTabIndex}
            title="引用该节点生成"
            type="button"
          />
        </>
      ) : (
        <>
          <button
            aria-label="添加上下文"
            className={cn(handleClassName, "left-[-11px]")}
            data-handleid="target"
            data-handlepos="left"
            data-nodeid={node.id}
            onClick={(event) => onOpenConnectionMenu(event, "target")}
            onMouseDown={(event) => onStartConnectionMouseDrag(event, "target")}
            onPointerDown={(event) => onStartConnectionDrag(event, "target")}
            tabIndex={handleTabIndex}
            title="添加上下文"
            type="button"
          />
          <button
            aria-label="引用该节点生成"
            className={cn(handleClassName, "right-[-11px]")}
            data-handleid="source"
            data-handlepos="right"
            data-nodeid={node.id}
            onClick={(event) => onOpenConnectionMenu(event, "source")}
            onMouseDown={(event) => onStartConnectionMouseDrag(event, "source")}
            onPointerDown={(event) => onStartConnectionDrag(event, "source")}
            tabIndex={handleTabIndex}
            title="引用该节点生成"
            type="button"
          />
        </>
      )}
      {children}
      {connectionHoverActive ? (
        <span
          className="pointer-events-none absolute inset-0 z-10 rounded-[12px] bg-black/35"
          data-connection-target-overlay="true"
        />
      ) : null}
    </div>
  );
}

function PresetMediaCanvasNode({
  onChooseFile,
  onClearGridSplit,
  onClearGridSplitSelection,
  onClearLocalEditRegions,
  node,
  onCancelGeneration,
  onExtractVideoFrame,
  onSetLocalEditMode,
  onSubmitLocalEdit,
  onToggleGridSplitSelection,
  onUpdateLocalEditRegions,
  selected,
}: {
  onChooseFile: () => void;
  onClearGridSplit: () => void;
  onClearGridSplitSelection: () => void;
  onClearLocalEditRegions: () => void;
  node: CloneNode;
  onCancelGeneration: () => void;
  onExtractVideoFrame: (kind: VideoFrameExtractionKind,time?:number) => void;
  onSetLocalEditMode: (enabled: boolean) => void;
  onSubmitLocalEdit: (regions: LocalEditRegion[]) => void;
  onToggleGridSplitSelection: (index: number, behavior: "replace" | "toggle") => void;
  onUpdateLocalEditRegions: (regions: LocalEditRegion[]) => void;
  selected: boolean;
}) {
  const mediaType = getDraftString(node, "mediaType") || node.inputType || "image";
  const mediaUrl = getNodeMediaUrl(node);
  const sourceUrl = getNodeSourceMediaUrl(node);
  const generated = Boolean(node.draftValues?.generated);
  const generationStatus = getDraftString(node, "generationStatus");
  const isGenerating = generationStatus === "pending";
  const isGenerationFailed = generationStatus === "failed";
  const annotationMode = Boolean(node.draftValues?.annotationMode);
  const localEditMode = Boolean(node.draftValues?.localEditMode);
  const localEditRegions = getNodeLocalEditRegions(node);
  const rotation = Number(node.draftValues?.rotation || 0);
  const outputSizeLabel = getDraftString(node, "outputSizeLabel");
  const isNineGridComposite = Boolean(node.draftValues?.nineGridComposite);
  const cropTile = normalizeGridCropTile(node.draftValues?.cropTile);
  const gridSplit = getNodeGridSplitState(node);
  const gridCellVisual = node.draftValues?.gridCellVisual
    ? normalizeGridCellVisual(node.draftValues?.gridCellVisual)
    : null;
  const Icon = mediaType === "audio" ? Music2 : mediaType === "video" ? Video : ImageIcon;

  return (
    <div className="h-full w-full">
      <div className="mb-2 flex h-6 items-center justify-between gap-3 text-[14px] font-semibold text-white/50">
        <span className="flex min-w-0 items-center gap-1">
          <Icon className="size-4 shrink-0" />
          <span className="truncate">{node.title}</span>
        </span>
        {outputSizeLabel ? (
          <span className="shrink-0 text-[14px] font-medium text-white/34">{outputSizeLabel}</span>
        ) : null}
      </div>
      {getDraftString(node, "uploadStatus") === "uploading" || getDraftString(node, "uploadStatus") === "failed" ? (
        <div className="flex h-[calc(100%-32px)] items-center justify-center rounded-xl border border-white/10 bg-black/20 p-4 text-center text-sm text-white/65">
          {getDraftString(node, "uploadStatus") === "uploading" ? <><Loader2 className="mr-2 h-4 w-4 animate-spin" />正在上传素材…</> : <span className="text-red-200">{getDraftString(node, "uploadError") || "上传失败，请重新上传"}</span>}
        </div>
      ) : mediaType === "audio" ? (
        <div className="relative h-[calc(100%-32px)]">
          <OfficialAudioCard durationSeconds={getDraftNumber(node, "durationSeconds", 3)} mediaUrl={mediaUrl} selected={selected} />
          {!generated ? (
            <button
              aria-label={mediaUrl ? "替换音频" : "上传音频"}
              className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-[8px] bg-black/56 text-white/90"
              onClick={onChooseFile}
              onPointerDown={(event) => event.stopPropagation()}
              title={mediaUrl ? "替换音频" : "上传音频"}
              type="button"
            >
              ↑
            </button>
          ) : null}
        </div>
      ) : mediaType === "video" ? (
        <div
          className={cn(
            "relative flex h-[calc(100%-32px)] items-center justify-center overflow-hidden rounded-[10px] border border-white/12 bg-[#101010] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
            selected && "outline outline-2 outline-[#8b96ff]"
          )}
        >
          <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.12)_1px,transparent_1px)] bg-[length:18px_18px] opacity-20" />
          {isGenerating || isGenerationFailed ? (
            <GenerationPendingPreview
              errorMessage={getDraftString(node, "generationError")}
              onCancel={onCancelGeneration}
              previewUrl={getDraftString(node, "poster") || sourceUrl || mediaUrl}
              progress={getDraftNumber(node, "generationProgress", 2)}
              status={generationStatus}
            />
          ) : mediaUrl ? (
            <OfficialVideoResultCard
              durationSeconds={getVideoNodeDurationSeconds(node)}
              mediaUrl={mediaUrl}
              onExtractFrame={onExtractVideoFrame}
              previewUrl={getDraftString(node, "poster") || getDraftString(node, "previewImageUrl") || undefined}
              selected={selected}
              title={node.title}
            />
          ) : (
            <div className="relative text-center">
              <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-white/8 text-white/70">
                <Video className="h-7 w-7" />
              </div>
              <div className="mt-4 text-[18px] font-semibold text-white/78">待生成视频</div>
              <div className="mt-2 text-[13px] text-white/38">生成后将在这里预览</div>
            </div>
          )}
          <button
            className="absolute right-3 top-3 rounded-[8px] bg-white/8 px-3 py-2 text-[12px] text-white/72 hover:bg-white/12"
            aria-label={mediaUrl ? "替换视频" : "上传视频"}
            onClick={onChooseFile}
            onPointerDown={(event) => event.stopPropagation()}
            title={mediaUrl ? "替换视频" : "上传视频"}
            type="button"
          >
            ↗
          </button>
        </div>
      ) : (
        <div
          className={cn(
            "relative h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/12 bg-[#101010] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
            selected && "outline outline-2 outline-[#8b96ff]"
          )}
        >
          {isGenerating || isGenerationFailed ? (
            <GenerationPendingPreview
              errorMessage={getDraftString(node, "generationError")}
              onCancel={onCancelGeneration}
              previewUrl={mediaUrl}
              progress={getDraftNumber(node, "generationProgress", 2)}
              status={generationStatus}
            />
          ) : isNineGridComposite && mediaUrl ? (
            <img
              alt={node.title}
              className="pointer-events-none h-full w-full object-cover"
              draggable={false}
              onDragStart={preventNativeImageDrag}
              src={mediaUrl}
              style={{ transform: `rotate(${rotation}deg)` }}
            />
          ) : isNineGridComposite ? (
            <NineGridCompositePreview node={node} sourceUrl={sourceUrl} />
          ) : cropTile && mediaUrl && gridCellVisual ? (
            <GridCellImage alt={node.title} src={mediaUrl} visual={gridCellVisual} />
          ) : cropTile && mediaUrl ? (
            <CroppedGridTileImage alt={node.title} cropTile={cropTile} rotation={rotation} src={mediaUrl} />
          ) : mediaUrl ? (
            <img
              alt={node.title}
              className="pointer-events-none h-full w-full object-contain"
              draggable={false}
              onDragStart={preventNativeImageDrag}
              src={mediaUrl}
              style={{ transform: `rotate(${rotation}deg)` }}
            />
          ) : (
            <div className="flex h-full items-center justify-center text-[13px] text-white/40">等待图片</div>
          )}
          {annotationMode ? (
            <div className="pointer-events-none absolute inset-0">
              <span className="absolute left-[38%] top-[32%] h-[34%] w-[24%] rounded-[8px] border border-white/85 bg-black/10 shadow-[0_0_0_1px_rgba(0,0,0,0.3)]" />
              <span className="absolute left-[38%] top-[calc(32%-26px)] rounded-[7px] bg-black/68 px-2 py-1 text-[11px] text-white">主体</span>
            </div>
          ) : null}
          {localEditMode && mediaUrl ? (
            <LocalEditOverlay
              imageUrl={mediaUrl}
              onClear={onClearLocalEditRegions}
              onExit={() => onSetLocalEditMode(false)}
              onRegionsChange={onUpdateLocalEditRegions}
              onSubmit={onSubmitLocalEdit}
              regions={localEditRegions}
            />
          ) : null}
          {gridSplit ? (
            <GridSplitSelectionOverlay
              onClearSelection={onClearGridSplitSelection}
              onClose={onClearGridSplit}
              onToggleCell={onToggleGridSplitSelection}
              split={gridSplit}
            />
          ) : null}
          {!generated && !isGenerating && !isGenerationFailed ? (
            <button
              className="absolute right-3 top-3 flex h-10 w-10 items-center justify-center rounded-[8px] bg-black/56 text-white/90"
              aria-label={mediaUrl ? `替换${mediaType === "audio" ? "音频" : "图片"}` : `上传${mediaType === "audio" ? "音频" : "图片"}`}
              onClick={onChooseFile}
              onPointerDown={(event) => event.stopPropagation()}
              title={mediaUrl ? "替换素材" : "上传素材"}
              type="button"
            >
              ↥
            </button>
          ) : null}
        </div>
      )}
    </div>
  );
}

function getContainedImageRect(params: {
  containerHeight: number;
  containerWidth: number;
  imageHeight: number;
  imageWidth: number;
}) {
  const { containerHeight, containerWidth, imageHeight, imageWidth } = params;
  if (containerHeight <= 0 || containerWidth <= 0 || imageHeight <= 0 || imageWidth <= 0) {
    return null;
  }
  const containerRatio = containerWidth / containerHeight;
  const imageRatio = imageWidth / imageHeight;
  if (containerRatio > imageRatio) {
    const height = containerHeight;
    const width = height * imageRatio;
    return {
      height,
      left: (containerWidth - width) / 2,
      top: 0,
      width,
    };
  }
  const width = containerWidth;
  const height = width / imageRatio;
  return {
    height,
    left: 0,
    top: (containerHeight - height) / 2,
    width,
  };
}

function LocalEditOverlay({
  imageUrl,
  onClear,
  onExit,
  onRegionsChange,
  onSubmit,
  regions,
}: {
  imageUrl: string;
  onClear: () => void;
  onExit: () => void;
  onRegionsChange: (regions: LocalEditRegion[]) => void;
  onSubmit: (regions: LocalEditRegion[]) => void;
  regions: LocalEditRegion[];
}) {
  const overlayRef = useRef<HTMLDivElement | null>(null);
  const [containerSize, setContainerSize] = useState({ height: 0, width: 0 });
  const [naturalSize, setNaturalSize] = useState({ height: 0, width: 0 });
  const [dragState, setDragState] = useState<{
    currentX: number;
    currentY: number;
    pointerId: number;
    startX: number;
    startY: number;
  } | null>(null);
  const [editingRegionId, setEditingRegionId] = useState<string | null>(null);

  useEffect(() => {
    const element = overlayRef.current;
    if (!element) return;
    const updateSize = () => {
      const rect = element.getBoundingClientRect();
      setContainerSize({
        height: Math.max(0, rect.height),
        width: Math.max(0, rect.width),
      });
    };
    updateSize();
    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(updateSize) : null;
    observer?.observe(element);
    return () => observer?.disconnect();
  }, []);

  useEffect(() => {
    if (!imageUrl) return;
    const image = new Image();
    if (!imageUrl.startsWith("blob:") && !imageUrl.startsWith("data:")) {
      image.crossOrigin = "anonymous";
      image.referrerPolicy = "no-referrer";
    }
    image.onload = () => {
      setNaturalSize({
        height: image.naturalHeight || image.height || 0,
        width: image.naturalWidth || image.width || 0,
      });
    };
    image.src = imageUrl;
  }, [imageUrl]);

  const imageRect = useMemo(
    () =>
      getContainedImageRect({
        containerHeight: containerSize.height,
        containerWidth: containerSize.width,
        imageHeight: naturalSize.height,
        imageWidth: naturalSize.width,
      }),
    [containerSize.height, containerSize.width, naturalSize.height, naturalSize.width]
  );

  const pointToImage = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      const bounds = overlayRef.current?.getBoundingClientRect();
      if (!bounds || !imageRect) return null;
      const localX = event.clientX - bounds.left - imageRect.left;
      const localY = event.clientY - bounds.top - imageRect.top;
      if (localX < 0 || localY < 0 || localX > imageRect.width || localY > imageRect.height) {
        return null;
      }
      return {
        x: Math.min(1, Math.max(0, localX / imageRect.width)),
        y: Math.min(1, Math.max(0, localY / imageRect.height)),
      };
    },
    [imageRect]
  );

  const draftRect = useMemo(() => {
    if (!dragState) return null;
    const x = Math.min(dragState.startX, dragState.currentX);
    const y = Math.min(dragState.startY, dragState.currentY);
    const width = Math.abs(dragState.currentX - dragState.startX);
    const height = Math.abs(dragState.currentY - dragState.startY);
    return { height, width, x, y };
  }, [dragState]);

  const updateRegionPrompt = useCallback(
    (regionId: string, prompt: string) => {
      onRegionsChange(
        regions.map((region) =>
          region.id === regionId
            ? {
                ...region,
                prompt,
              }
            : region
        )
      );
    },
    [onRegionsChange, regions]
  );

  const removeRegion = useCallback(
    (regionId: string) => {
      onRegionsChange(withReindexedLocalEditRegions(regions.filter((region) => region.id !== regionId)));
      setEditingRegionId((current) => (current === regionId ? null : current));
    },
    [onRegionsChange, regions]
  );

  const validPromptCount = regions.filter((region) => region.prompt.trim()).length;

  return (
    <div
      className="absolute inset-0 z-30 bg-black/10"
      data-canvas-overlay="true"
      onPointerDown={(event) => {
        event.stopPropagation();
        if ((event.target as HTMLElement).closest("[data-local-edit-ui]")) return;
        if (regions.length >= LOCAL_EDIT_MAX_REGIONS) {
          toast.error(`局部编辑最多支持 ${LOCAL_EDIT_MAX_REGIONS} 个区域`);
          return;
        }
        const point = pointToImage(event);
        if (!point) return;
        (event.currentTarget as HTMLDivElement).setPointerCapture(event.pointerId);
        setDragState({
          currentX: point.x,
          currentY: point.y,
          pointerId: event.pointerId,
          startX: point.x,
          startY: point.y,
        });
      }}
      onPointerMove={(event) => {
        if (!dragState || dragState.pointerId !== event.pointerId) return;
        event.stopPropagation();
        const point = pointToImage(event);
        if (!point) return;
        setDragState((current) =>
          current && current.pointerId === event.pointerId
            ? {
                ...current,
                currentX: point.x,
                currentY: point.y,
              }
            : current
        );
      }}
      onPointerUp={(event) => {
        if (!dragState || dragState.pointerId !== event.pointerId) return;
        event.stopPropagation();
        const nextRect = draftRect;
        setDragState(null);
        if (!nextRect || !imageRect) return;
        if (nextRect.width * imageRect.width < 18 || nextRect.height * imageRect.height < 18) {
          return;
        }
        const index = regions.length;
        const regionId = makeId("local-edit-region");
        const nextRegions = withReindexedLocalEditRegions([
          ...regions,
          {
            color: LOCAL_EDIT_COLORS[index % LOCAL_EDIT_COLORS.length],
            createdAt: Date.now(),
            id: regionId,
            index: index + 1,
            prompt: "",
            rect: nextRect,
          },
        ]);
        onRegionsChange(nextRegions);
        setEditingRegionId(regionId);
      }}
      ref={overlayRef}
    >
      {imageRect ? (
        <div
          className="pointer-events-none absolute"
          style={{
            height: imageRect.height,
            left: imageRect.left,
            top: imageRect.top,
            width: imageRect.width,
          }}
        >
          <div className="absolute inset-0 rounded-[10px] ring-2 ring-emerald-400/45 ring-offset-2 ring-offset-black/20" />
          {regions.map((region) => {
            const labelBelow = region.rect.y + region.rect.height < 0.82;
            const isEditing = editingRegionId === region.id || !region.prompt.trim();
            const regionLeft = `${region.rect.x * 100}%`;
            const regionTop = `${region.rect.y * 100}%`;
            const regionWidth = `${region.rect.width * 100}%`;
            const regionHeight = `${region.rect.height * 100}%`;
            return (
              <div
                className="pointer-events-none absolute"
                key={region.id}
                style={{
                  height: regionHeight,
                  left: regionLeft,
                  top: regionTop,
                  width: regionWidth,
                }}
              >
                <div
                  className="absolute inset-0 rounded-[8px] border-2 shadow-[0_0_0_9999px_rgba(0,0,0,0.02)]"
                  style={{ backgroundColor: `${region.color}1f`, borderColor: region.color }}
                />
                <span
                  className="absolute -left-2 -top-2 flex h-7 w-7 items-center justify-center rounded-full border-2 border-white text-[13px] font-black text-white shadow-[0_8px_18px_rgba(0,0,0,0.38)]"
                  style={{ backgroundColor: region.color }}
                >
                  {region.index}
                </span>
                <div
                  className={cn(
                    "pointer-events-auto absolute left-0 z-40 w-[230px] rounded-[12px] border border-white/12 bg-black/78 p-2 shadow-[0_18px_44px_rgba(0,0,0,0.45)] backdrop-blur-md",
                    labelBelow ? "top-[calc(100%+8px)]" : "bottom-[calc(100%+8px)]"
                  )}
                  data-local-edit-ui="true"
                  onPointerDown={(event) => event.stopPropagation()}
                >
                  <div className="mb-1 flex items-center justify-between gap-2">
                    <span className="text-[11px] font-semibold text-white/70">区域 {region.index}</span>
                    <button
                      className="rounded-full px-2 py-0.5 text-[11px] text-white/45 hover:bg-white/10 hover:text-white"
                      onClick={() => removeRegion(region.id)}
                      type="button"
                    >
                      删除
                    </button>
                  </div>
                  {isEditing ? (
                    <textarea
                      autoFocus={editingRegionId === region.id}
                      className="h-14 w-full resize-none rounded-[8px] border border-white/10 bg-white/10 px-2 py-1.5 text-[12px] leading-5 text-white outline-none placeholder:text-white/38 focus:border-emerald-300/50"
                      onBlur={() => {
                        if (region.prompt.trim()) {
                          setEditingRegionId(null);
                        }
                      }}
                      onChange={(event) => updateRegionPrompt(region.id, event.target.value)}
                      onKeyDown={(event) => {
                        if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
                          onSubmit(regions);
                          return;
                        }
                        if (event.key === "Enter" && !event.shiftKey) {
                          event.preventDefault();
                          if (region.prompt.trim()) {
                            setEditingRegionId(null);
                          }
                        }
                      }}
                      placeholder="描述这里要怎么改"
                      value={region.prompt}
                    />
                  ) : (
                    <button
                      className="flex min-h-11 w-full items-center justify-between gap-2 rounded-[8px] border border-white/10 bg-white/10 px-2 py-1.5 text-left text-[12px] leading-5 text-white hover:border-emerald-300/42"
                      onClick={() => setEditingRegionId(region.id)}
                      type="button"
                    >
                      <span className="line-clamp-2 min-w-0 flex-1">{region.prompt.trim()}</span>
                      <span className="shrink-0 text-[10px] text-emerald-200/70">点击编辑</span>
                    </button>
                  )}
                </div>
              </div>
            );
          })}
          {draftRect ? (
            <div
              className="absolute rounded-[8px] border-2 border-dashed bg-emerald-300/12"
              style={{
                borderColor: LOCAL_EDIT_COLORS[regions.length % LOCAL_EDIT_COLORS.length],
                height: `${draftRect.height * 100}%`,
                left: `${draftRect.x * 100}%`,
                top: `${draftRect.y * 100}%`,
                width: `${draftRect.width * 100}%`,
              }}
            />
          ) : null}
        </div>
      ) : null}

      <div
        className="absolute right-3 top-3 z-50 w-[270px] rounded-[16px] border border-white/12 bg-[#111]/88 p-3 text-white shadow-[0_24px_70px_rgba(0,0,0,0.5)] backdrop-blur-xl"
        data-local-edit-ui="true"
        onPointerDown={(event) => event.stopPropagation()}
      >
        <div className="flex items-start justify-between gap-3">
          <div>
            <div className="text-[14px] font-semibold">局部编辑</div>
            <div className="mt-1 text-[11px] leading-4 text-white/46">拖拽框选区域，并在框下方输入提示词。</div>
          </div>
          <button
            className="flex h-7 w-7 items-center justify-center rounded-full bg-white/8 text-white/52 hover:bg-white/14 hover:text-white"
            onClick={onExit}
            type="button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
        <div className="mt-3 max-h-[132px] space-y-2 overflow-y-auto pr-1">
          {regions.length === 0 ? (
            <div className="rounded-[10px] border border-dashed border-white/12 bg-white/5 px-3 py-4 text-center text-[12px] text-white/42">
              在图片上拖出第一个编辑框
            </div>
          ) : (
            regions.map((region) => (
              <div className="flex items-center gap-2 rounded-[10px] bg-white/10 px-2 py-2" key={`summary-${region.id}`}>
                <span
                  className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full text-[10px] font-bold text-white"
                  style={{ backgroundColor: region.color }}
                >
                  {region.index}
                </span>
                <span className="min-w-0 flex-1 truncate text-[12px] text-white/72">
                  {region.prompt.trim() || "未填写提示词"}
                </span>
              </div>
            ))
          )}
        </div>
        <div className="mt-3 grid grid-cols-2 gap-2">
          <button
            className="h-9 rounded-[10px] border border-white/12 bg-white/10 text-[12px] text-white/68 hover:bg-white/12 hover:text-white"
            onClick={onClear}
            type="button"
          >
            清空区域
          </button>
          <button
            className={cn(
              "h-9 rounded-[10px] text-[12px] font-semibold text-black transition",
              validPromptCount > 0 ? "bg-emerald-300 hover:bg-emerald-200" : "bg-white/24 text-white/42"
            )}
            onClick={() => {
              if (validPromptCount === 0) {
                toast.error("请至少填写一个区域提示词");
                return;
              }
              onSubmit(regions);
            }}
            type="button"
          >
            生成结果
          </button>
        </div>
      </div>
    </div>
  );
}

function GenerationPendingPreview({
  errorMessage,
  onCancel,
  previewUrl,
  progress,
  status,
}: {
  errorMessage?: string;
  onCancel: () => void;
  previewUrl?: string;
  progress: number;
  status: string;
}) {
  const displayProgress = Math.max(2, Math.min(99, Math.round(progress)));
  const failed = status === "failed";

  return (
    <div className="absolute inset-0 flex items-center justify-center overflow-hidden bg-[#303030]">
      {previewUrl ? (
        <img
          alt=""
          className="absolute inset-0 h-full w-full object-cover opacity-40 blur-[16px] saturate-[0.9]"
          draggable={false}
          onDragStart={preventNativeImageDrag}
          src={previewUrl}
        />
      ) : null}
      <style>{`
        @keyframes libtv-loading-sweep {
          0% { transform: translateX(0); opacity: 0; }
          18% { opacity: 1; }
          100% { transform: translateX(300%); opacity: 0; }
        }
      `}</style>
      {!failed ? (
        <div className="absolute inset-0 opacity-45">
          <span className="absolute left-[-30%] top-0 h-full w-[44%] animate-[libtv-loading-sweep_1.8s_ease-in-out_infinite] bg-gradient-to-r from-transparent via-white/8 to-transparent" />
        </div>
      ) : null}
      <div className="relative flex h-[34px] min-w-[164px] items-center justify-center gap-3 rounded-[7px] border border-white/14 bg-[#1f1f1f]/86 px-5 text-[14px] font-semibold text-white shadow-[0_10px_28px_rgba(0,0,0,0.34)]">
        {failed ? (
          <>
            <span className="text-white/78">{errorMessage || "生成失败"}</span>
            <button
              className="text-white/44 transition hover:text-white/80"
              onClick={(event) => {
                event.stopPropagation();
                onCancel();
              }}
              onPointerDown={(event) => event.stopPropagation()}
              type="button"
            >
              移除
            </button>
          </>
        ) : (
          <>
            <span>生成中 {displayProgress}%...</span>
            <button
              className="font-medium text-white/42 transition hover:text-white/80"
              onClick={(event) => {
                event.stopPropagation();
                onCancel();
              }}
              onPointerDown={(event) => event.stopPropagation()}
              type="button"
            >
              取消
            </button>
          </>
        )}
      </div>
    </div>
  );
}

function PureTextResourceCanvasNode({
  node,
  onTextResourceChange,
  selected,
}: {
  node: CloneNode;
  onTextResourceChange: (content: string) => void;
  selected: boolean;
}) {
  const contentValues = node.draftValues?.content;
  const textContent =
    Array.isArray(contentValues) && typeof contentValues[0] === "string"
      ? contentValues[0]
      : "";

  return (
    <div className="h-full w-full">
      <div className="mb-2 flex h-6 items-center gap-1 text-[14px] font-semibold text-white/50">
        <FileText className="size-4" />
        <span>{node.title}</span>
      </div>
      <div
        className={cn(
          "relative h-[calc(100%-32px)] overflow-hidden rounded-[28px] border-[3px] border-white/54 bg-[#111] text-white shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
          selected && "border-white/70"
        )}
      >
        <textarea
          className={cn(
            "absolute left-[54px] right-[54px] top-[70px] z-10 h-[96px] resize-none bg-transparent text-center text-[14px] leading-6 text-white/72 outline-none placeholder:text-white/48",
            textContent && "top-[44px] h-[calc(100%-88px)] text-left text-[14px] leading-6"
          )}
          onChange={(event) => onTextResourceChange(event.target.value)}
          onPointerDown={(event) => event.stopPropagation()}
          onWheel={(event) => event.stopPropagation()}
          placeholder="请编写内容，开始你的创作。"
          value={textContent}
        />
        {!textContent ? (
          <div className="pointer-events-none absolute left-1/2 top-1/2 flex w-[166px] -translate-x-1/2 -translate-y-[12%] flex-col gap-[16px]">
            {[166, 166, 166, 98].map((width, index) => (
              <span className="h-[12px] rounded-full bg-white/22" key={`${node.id}-text-line-${index}`} style={{ width }} />
            ))}
          </div>
        ) : null}
        <span className="pointer-events-none absolute bottom-7 right-7 h-5 w-5">
          <span className="absolute bottom-0 right-0 h-[3px] w-7 origin-bottom-right -rotate-45 rounded-full bg-white/28" />
          <span className="absolute bottom-1 right-0 h-[3px] w-[18px] origin-bottom-right -rotate-45 rounded-full bg-white/24" />
        </span>
      </div>
    </div>
  );
}

function PresetScriptCanvasNode({
  node,
  onOpenWorkflow,
  onRun,
  onTextResourceChange,
  selected,
}: {
  node: CloneNode;
  onOpenWorkflow: () => void;
  onRun: () => void;
  onTextResourceChange: (content: string) => void;
  selected: boolean;
}) {
  const textInputRef=useRef<HTMLTextAreaElement|null>(null);
  const scriptRole = getDraftString(node, "scriptRole");
  const generationStatus = getDraftString(node, "generationStatus");
  const isGenerating = generationStatus === "pending";
  const isGenerationFailed = generationStatus === "failed";
  const isGenerated = Boolean(node.draftValues?.generated);
  const contentValues = node.draftValues?.content;
  const textContent =
    Array.isArray(contentValues) && typeof contentValues[0] === "string"
      ? contentValues[0]
      : node.draftValues?.manualEditing
        ? ""
        : "";
  const rows = getStoryScriptRows(node);
  const statusLabel = isGenerating ? "生成中" : isGenerationFailed ? "生成失败" : isGenerated ? "已生成" : "待生成";

  return (
    <div className="h-full w-full">
      <div className="mb-2 flex h-6 items-center gap-1 text-[14px] font-semibold text-white/50">
        {scriptRole === "generator" ? <GridTilesGlyph /> : <FileText className="size-4" />}
        {node.title}
      </div>
      {scriptRole === "generator" ? (
        <div
          className={cn(
            "h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/10 bg-[#262626] text-white shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
            selected && "outline outline-2 outline-[#8b96ff]"
          )}
        >
          <div className="flex h-12 items-center justify-between border-b border-white/8 px-4">
            <span className="font-semibold text-[15px] text-white/92">故事脚本</span>
            <span
              className={cn(
                "rounded-full px-3 py-1 text-[12px]",
                isGenerating
                  ? "bg-[#2b3358] text-[#93a4ff]"
                  : isGenerationFailed
                    ? "bg-[#4a2426] text-[#ff8f8f]"
                    : isGenerated
                      ? "bg-[#1f3a2a] text-[#7fd8a0]"
                      : "bg-[#2b3358] text-[#93a4ff]"
              )}
            >
              {statusLabel}
            </span>
          </div>
          <div className="h-[calc(100%-104px)] overflow-auto">
            <div className="min-w-[1160px]">
              <div className="grid grid-cols-[56px_56px_minmax(260px,1.8fr)_72px_minmax(160px,1fr)_minmax(150px,1fr)_minmax(140px,0.9fr)_minmax(140px,0.9fr)_minmax(220px,1.4fr)] border-b border-white/8 bg-[#2d2d2d] text-[12px] text-white/45">
                {["镜号", "时长", "画面描述", "景别", "光影氛围", "对白·旁白", "音效", "运镜", "最终提示词"].map((item) => (
                  <div className="border-r border-white/6 px-3 py-2 last:border-r-0" key={item}>{item}</div>
                ))}
              </div>
              {rows.map((row) => (
                <div className="grid grid-cols-[56px_56px_minmax(260px,1.8fr)_72px_minmax(160px,1fr)_minmax(150px,1fr)_minmax(140px,0.9fr)_minmax(140px,0.9fr)_minmax(220px,1.4fr)] border-b border-white/6 text-[12px] text-white/80" key={row.id}>
                  {[
                    row.shot,
                    row.duration,
                    row.sceneDescription,
                    row.shotSize,
                    row.lighting,
                    row.dialogue,
                    row.voiceAndSfx,
                    row.cameraMovement,
                    row.imagePrompt,
                  ].map((cell, cellIndex) => (
                    <div className="border-r border-white/6 px-3 py-3 leading-5 last:border-r-0" key={`${row.id}-${cellIndex}`}>{cell}</div>
                  ))}
                </div>
              ))}
            </div>
          </div>
          <div className="m-4 flex h-10 gap-2">
            {isGenerated ? (
              <button
                className="h-10 flex-1 rounded-[10px] border border-white/14 bg-white/8 text-[13px] font-semibold text-white/85 transition hover:bg-white/12"
                onClick={(event) => {
                  event.stopPropagation();
                  onOpenWorkflow();
                }}
                onPointerDown={(event) => event.stopPropagation()}
                type="button"
              >
                打开脚本节点 →
              </button>
            ) : null}
            <button
              className={cn(
                "h-10 rounded-[10px] bg-white text-[13px] font-semibold text-[#171717] transition hover:bg-white/90 disabled:cursor-wait disabled:bg-white/40 disabled:text-black/50",
                isGenerated ? "w-[150px]" : "w-full"
              )}
              disabled={isGenerating}
              onClick={(event) => {
                event.stopPropagation();
                onRun();
              }}
              onPointerDown={(event) => event.stopPropagation()}
              type="button"
            >
              {isGenerating ? "正在生成..." : isGenerated ? "重新生成" : "生成完整脚本"}
            </button>
          </div>
        </div>
      ) : (
        <div
          className={cn(
            "h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/10 bg-[#262626] text-white shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
            selected && "outline outline-2 outline-[#8b96ff]"
          )}
        >
          <div className="flex h-11 items-center justify-between border-b border-white/8 px-4 text-[13px] text-white/45">
            <span>输入内容</span>
            <button className="rounded-[8px] px-2 py-1 text-[#93a4ff] hover:bg-white/8" onClick={()=>textInputRef.current?.focus()} type="button">
              编辑
            </button>
          </div>
          <textarea ref={textInputRef}
            className="h-[calc(100%-44px)] w-full resize-none bg-transparent px-5 py-4 text-[14px] leading-7 text-white/88 outline-none placeholder:text-white/30"
            onChange={(event) => onTextResourceChange(event.target.value)}
            onPointerDown={(event) => event.stopPropagation()}
            onWheel={(event) => event.stopPropagation()}
            placeholder="输入内容"
            value={textContent}
          />
        </div>
      )}
    </div>
  );
}

function AddModulePanel({
  onAddModule,
  onClose,
  onSearch,
  onGallerySelect,
  onHistorySelect,
  onUploadFiles,
}: {
  onAddModule: (kind: AddModuleKind) => void;
  onClose: () => void;
  onSearch: () => void;
  onGallerySelect: () => void;
  onHistorySelect: () => void;
  onUploadFiles: (files: File[]) => void;
}) {
  const uploadInputRef = useRef<HTMLInputElement | null>(null);
  void onClose;

  const triggerUpload = () => {
    uploadInputRef.current?.click();
  };

  return (
    <section
      className="fixed bottom-[69px] left-[calc(50%_-_223px)] z-50 flex w-[196px] flex-col gap-1 overflow-visible rounded-[16px] border-[0.5px] border-[#363636] p-2 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-[32px]"
      data-canvas-overlay="true"
      style={{ backgroundColor: "rgb(38, 38, 38)" }}
    >
      <input
        accept="image/*,video/*,audio/*"
        className="hidden"
        multiple
        onChange={(event) => {
          const files = Array.from(event.target.files || []);
          if (files.length > 0) onUploadFiles(files);
          event.currentTarget.value = "";
        }}
        ref={uploadInputRef}
        type="file"
      />
      <div className="flex h-8 items-center px-2">
        <h4 className="text-[14px] font-medium leading-5 text-white/60">添加节点</h4>
        <button aria-label="搜索画布节点" className="ml-auto rounded p-1 text-white/50 hover:bg-white/10 hover:text-white" onClick={onSearch} title="搜索画布节点" type="button"><Search className="size-4" /></button>
      </div>
      {ADD_NODE_PRIMARY_MODULES.map((item) => (
        <CanvasAddMenuButton
          badge={item.badge}
          description={item.description}
          icon={item.icon}
          key={item.kind}
          label={item.label}
          onClick={() => onAddModule(item.kind)}
        />
      ))}
      <CanvasAddSubmenu
        description="创意脚本、生成故事板"
        icon={Layers}
        label="脚本"
        onPrimary={() => undefined}
        onSelect={(action) => {
          onAddModule(action === "legacy" ? "legacy-script" : "script");
        }}
        options={SCRIPT_SUBMENU_OPTIONS}
      />
      <CanvasAddSubmenu
        badge="NEW"
        description="新增风格或特效素材节点"
        icon={Sparkles}
        label="素材库"
        onPrimary={onGallerySelect}
        onSelect={() => {
          onGallerySelect();
        }}
        options={ASSET_LIBRARY_SUBMENU_OPTIONS}
      />
      <div className="flex h-8 items-center px-2">
        <h4 className="text-[14px] font-medium leading-5 text-white/60">添加资源</h4>
      </div>
      <CanvasAddMenuButton
        description="可上传图片、视频、音频文件"
        icon={Upload}
        label="上传"
        onClick={triggerUpload}
      />
      <CanvasAddMenuButton
        description="从历史生成中选择素材"
        icon={Layers}
        label="从生成历史选择"
        onClick={onHistorySelect}
      />
    </section>
  );
}

function AssetLibraryLauncherPanel({
  onClose,
  onOpenEffectLibrary,
  onOpenStyleLibrary,
}: {
  onClose: () => void;
  onOpenEffectLibrary: () => void;
  onOpenStyleLibrary: () => void;
}) {
  return (
    <section
      className="fixed bottom-[73px] left-1/2 z-20 flex h-[163px] w-[240px] -translate-x-1/2 flex-col rounded-[12px] border-[0.5px] border-[#363636] bg-[#262626] p-2 text-white shadow-[0_24px_70px_rgba(0,0,0,0.48)]"
      data-canvas-overlay="true"
    >
      <div className="flex h-[38px] items-center justify-between px-2">
        <h4 className="text-[14px] font-medium leading-5 text-white/60">素材库</h4>
        <button aria-label="关闭素材库" className="flex h-7 w-7 items-center justify-center rounded-[8px] text-white/42 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
          <X className="h-4 w-4" />
        </button>
      </div>
      <div className="grid gap-1">
        <AssetLibraryLauncherRow
          badge="NEW"
          description="新增风格节点"
          icon={Sparkles}
          label="风格库"
          onClick={onOpenStyleLibrary}
        />
        <AssetLibraryLauncherRow
          badge="NEW"
          description="新增特效节点"
          icon={Wand2}
          label="特效库"
          onClick={onOpenEffectLibrary}
        />
      </div>
    </section>
  );
}

function AssetLibraryLauncherRow({
  badge,
  description,
  icon: Icon,
  label,
  onClick,
}: {
  badge: string;
  description: string;
  icon: LucideIcon;
  label: string;
  onClick: () => void;
}) {
  return (
    <button
      className="flex h-[52px] w-[223px] items-center gap-3 rounded-[12px] px-2 text-left transition-colors hover:bg-white/10"
      onClick={onClick}
      type="button"
    >
      <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[10px] bg-white/8 text-white/70">
        <Icon className="h-4 w-4" />
      </span>
      <span className="min-w-0 flex-1">
        <span className="flex min-w-0 items-center gap-1.5 text-[13px] font-medium leading-5 text-white">
          <span className="truncate">{label}</span>
          <CanvasAddBadge badge={badge} />
        </span>
        <span className="mt-0.5 block truncate text-[11px] leading-4 text-white/42">{description}</span>
      </span>
    </button>
  );
}

const STYLE_MARKET_CATEGORIES = [
  "推荐",
  "Midjourney",
  "摄影写真",
  "电商营销",
  "动漫游戏",
  "风格插画",
  "平面设计",
  "建筑及室内设计",
  "创意玩法",
  "文创周边",
  "小说推文",
  "全部",
];

const STYLE_MARKET_THUMBNAIL_URL = "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-character-three-view-cover.png";
const EFFECT_MARKET_THUMBNAIL_URL = "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/starter-first-frame-video-cover.png";

const STYLE_MARKET_CARDS: AssetMarketCard[] = [
  ["复古马卡龙", "算力潮汐", 177],
  ["新中式", "算力潮汐", 257],
  ["岁月港风", "参数迷宫", 269],
  ["新国韵", "代码极光", 306],
  ["清风竹林", "参数迷宫", 48],
  ["小岛微风", "像素漫游者", 522],
  ["慢门胶片", "赛博蒲公英", 168],
  ["曜黑幻境", "模型幻景", 450],
  ["霸王戏梦", "算法织梦者", 105],
  ["双重梦境", "数字游隼", 91],
  ["古风侠影", "数据星云", 182],
  ["莫奈花园", "智能碎屑", 219],
  ["富士之夏", "智能碎屑", 330, "Midjourney Niji 7"],
  ["云海", "代码极光", 216, "Midjourney Niji 7"],
  ["曼岛日落", "算法织梦者", 153],
  ["虹光柔映", "逻辑褶皱", 70],
  ["复古港风", "逻辑褶皱", 80],
  ["江湖旧梦", "算法织梦者", 346],
];

const STYLE_MARKET_SEARCH_CARDS: AssetMarketCard[] = [
  ["新中式宋式美学支持输入中文室内家居空间", "三千问Atelier", 5, "Qwen Image"],
  ["新中式禅意软装设计", "天懿", 102, "Qwen Image"],
  ["Qwen-新中式国风国风美学插画", "重楼IP视觉", 1100, "Qwen Image"],
  ["新中式传统美学插画", "思悦", 5300, "Lib Navo Pro"],
  ["Qwen_新中式国风海报", "AI炼丹员", 94, "Qwen Image"],
  ["新中式旗袍美女", "Mo", 883, "Qwen Image"],
  ["【bai】新国风 | 水墨幻境", "bai", 36000, "Qwen Image"],
  ["新中式插画_国潮风插画_平面设计", "YOUS", 959],
];

const EFFECT_MARKET_CARDS: AssetMarketCard[] = [
  ["小蜜蜂运镜", "赛博蒲公英", 1000],
  ["穿云而入", "数据星云", 527],
  ["飞跃地平线", "赛博蒲公英", 1000],
  ["逆转引力", "量子呢喃", 239],
  ["地球缩放", "数字游隼", 179],
  ["环球缩放", "比特浮尘", 182],
  ["瞳孔推镜", "参数迷宫", 384],
  ["俯冲地球", "神经元旋涡", 274],
  ["产品扫光", "模型幻景", 934],
  ["普拉达换装", "量子呢喃", 70],
  ["多角度定点", "代码极光", 542],
  ["水下慢镜头", "代码极光", 242],
  ["试妆特写", "像素漫游者", 98],
  ["悬浮缓入", "像素漫游者", 171],
  ["微距推镜", "智能碎屑", 268],
  ["直升机揭幕", "认知碎片", 100],
  ["山路追击", "代码极光", 185],
  ["雪地赛车", "智能碎屑", 94],
  ["City Drive", "像素漫游者", 70],
  ["3D解构", "算法织梦者", 296],
  ["面部环拍", "比特浮尘", 183],
  ["Showroom", "智能碎屑", 65],
  ["饰品特写", "逻辑褶皱", 62],
  ["巨人俯瞰", "算法织梦者", 116],
  ["Runway", "算力潮汐", 81],
  ["AI 编舞", "比特浮尘", 501],
  ["机械姬", "认知碎片", 137],
  ["巨星名场面", "数据星云", 80],
  ["镜面分身", "赛博蒲公英", 56],
  ["瞳孔异变", "数字游隼", 50],
];

const EFFECT_MARKET_SEARCH_CARDS: AssetMarketCard[] = [
  ["产品扫光", "模型幻景", 934],
  ["微距推镜", "智能碎屑", 268],
  ["赛博化妆师", "算力潮汐", 27],
  ["水下慢镜头", "代码极光", 242],
  ["试妆特写", "像素漫游者", 98],
  ["悬浮缓入", "像素漫游者", 171],
  ["多角度定点", "代码极光", 542],
  ["普拉达换装", "量子呢喃", 70],
  ["City Drive", "像素漫游者", 70],
  ["星云漩涡", "神经元旋涡", 168],
];

function AssetMarketPanel({
  effectPresets = [],
  kind,
  modelLabel = "Seedance 2.0",
  onApplyEffect,
  onApplyStyle,
  onClose,
  selectedEffectTitle = "",
}: {
  effectPresets?: VideoCanvasEffectPreset[];
  kind: "effect" | "style";
  modelLabel?: string;
  onApplyEffect?: (preset: VideoCanvasEffectPreset) => void;
  onApplyStyle: (card: AssetMarketCard) => void;
  onClose: () => void;
  selectedEffectTitle?: string;
}) {
  const [activeTab, setActiveTab] = useState(kind === "effect" ? "特效广场" : "风格广场");
  const [activeCategory, setActiveCategory] = useState("推荐");
  const [commercialOnly, setCommercialOnly] = useState(false);
  const [committedSearch, setCommittedSearch] = useState("");
  const [minimized, setMinimized] = useState(false);
  const [searchDraft, setSearchDraft] = useState("");
  const galleryTab = kind === "effect" ? "特效广场" : "风格广场";
  const configuredEffectCards: AssetMarketCard[] = effectPresets.map((preset) => [
    preset.title,
    preset.author,
    preset.usageCount,
    preset.model,
  ]);
  const defaultCards =
    kind === "effect"
      ? configuredEffectCards.length > 0
        ? configuredEffectCards
        : EFFECT_MARKET_CARDS
      : STYLE_MARKET_CARDS;
  const searchCards = kind === "effect" ? EFFECT_MARKET_SEARCH_CARDS : STYLE_MARKET_SEARCH_CARDS;
  const normalizedSearch = committedSearch.trim().toLocaleLowerCase();
  const cards = normalizedSearch
    ? configuredEffectCards.length > 0 && kind === "effect"
      ? defaultCards.filter((card) =>
          `${card[0]} ${card[1]}`.toLocaleLowerCase().includes(normalizedSearch),
        )
      : searchCards
    : defaultCards;
  const categories = kind === "effect" ? ["推荐"] : STYLE_MARKET_CATEGORIES.filter((category) => category !== "全部");
  const placeholder = kind === "effect" ? "搜索特效名称、作者" : "搜索风格名称、作者";
  const visibleCards = activeTab === galleryTab ? cards : [];
  const isVideoEffectPicker = kind === "effect" && Boolean(onApplyEffect);

  return (
    <div className="pointer-events-none fixed inset-0 z-[701]" data-canvas-overlay="true">
      <section
        className={cn(
          "pointer-events-auto fixed left-1/2 flex flex-col overflow-hidden rounded-[12px] border-[0.5px] border-[#363636] bg-[#262626] text-white shadow-[0_28px_90px_rgba(0,0,0,0.56)]",
          minimized
            ? "top-1/2 h-[min(657px,calc(100dvh-48px))] w-[min(810px,calc(100vw-24px))] -translate-x-1/2 -translate-y-1/2"
            : "top-[79.5px] h-[calc(100dvh-159px)] w-[min(1312px,calc(100vw-200px))] -translate-x-1/2",
        )}
        data-effect-market-size={minimized ? "compact" : "expanded"}
      >
        <div className="mt-3 flex h-10 shrink-0 items-center gap-8 px-4">
          <div
            className={cn(
              "flex h-10 shrink-0 items-center gap-1 rounded-[12px] border-[0.5px] border-[#363636] bg-white/10 p-1",
              minimized ? "w-[241px]" : "w-[293px]",
            )}
          >
            {[galleryTab, "我的收藏", "最近使用"].map((tab) => (
              <button
                className={cn(
                  "flex h-8 items-center justify-center rounded-[8px] text-[15px] text-white/66 transition-colors hover:bg-white/10 hover:text-white",
                  minimized ? "w-[76px]" : "w-[92px]",
                  activeTab === tab && "bg-white/10 text-white"
                )}
                key={tab}
                onClick={() => setActiveTab(tab)}
                type="button"
              >
                {tab}
              </button>
            ))}
          </div>
          <div
            className={cn(
              "flex h-10 items-center rounded-[10px] text-white/42",
              minimized ? "w-[337px]" : "w-[310px]",
            )}
          >
            <input
              className="h-5 w-full bg-transparent text-[13px] text-white outline-none placeholder:text-white/36"
              onChange={(event) => setSearchDraft(event.target.value)}
              onKeyDown={(event) => {
                if (event.key === "Enter") setCommittedSearch(searchDraft.trim());
              }}
              placeholder={placeholder}
              type="text"
              value={searchDraft}
            />
          </div>
          <button
            aria-label={minimized ? "maximize" : "minimize"}
            className="ml-auto flex h-10 w-10 items-center justify-center rounded-[10px] text-white/64 hover:bg-white/8 hover:text-white"
            onClick={() => setMinimized((current) => !current)}
            title={minimized ? "展开" : "缩小"}
            type="button"
          >
            {minimized ? <Maximize2 className="h-5 w-5" /> : <Minimize2 className="h-5 w-5" />}
          </button>
          <button aria-label="close" className="flex h-10 w-10 items-center justify-center rounded-[10px] text-white/64 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="mt-[25px] flex h-7 shrink-0 items-center px-4">
          {activeTab === galleryTab ? (
            <div className="tiny-scrollbar flex h-7 min-w-0 flex-1 items-center gap-2 overflow-x-auto overflow-y-hidden">
              {categories.map((category) => (
                <button
                  className={cn(
                    "flex h-7 shrink-0 items-center justify-center rounded-[8px] px-3 text-[13px] text-white/68 transition-colors hover:bg-white/10 hover:text-white",
                    activeCategory === category && "bg-white/10 text-white"
                  )}
                  key={category}
                  onClick={() => setActiveCategory(category)}
                  style={{
                    width:
                      category === "推荐"
                        ? 50
                        : category === "Midjourney"
                          ? 91.3
                          : category === "建筑及室内设计"
                            ? 115
                            : 76,
                  }}
                  type="button"
                >
                  {category}
                </button>
              ))}
            </div>
          ) : (
            <div className="min-w-0 flex-1" />
          )}
          <div className="ml-6 flex h-7 shrink-0 items-center gap-2">
            {kind === "style" ? (
              <label className="flex h-4 items-center gap-0 text-[13px] text-white/58">
                <input checked={commercialOnly} className="h-4 w-4 accent-white" onChange={(event) => setCommercialOnly(event.target.checked)} type="checkbox" />
                <span className="ml-0">仅看可商用</span>
              </label>
            ) : null}
            {isVideoEffectPicker ? (
              <button
                className="flex h-7 cursor-not-allowed items-center justify-center gap-1 rounded-[8px] bg-white/10 px-2 text-[13px] text-[#919191] opacity-70"
                disabled
                title="当前节点已使用风格，模型不可切换"
                type="button"
              >
                {modelLabel} ·
                <ChevronDown className="h-3.5 w-3.5" />
              </button>
            ) : (
              <span className="flex h-7 w-[54px] items-center justify-center rounded-[8px] bg-white/10 text-[13px] text-white">全部</span>
            )}
          </div>
        </div>

        <div className="mt-3 min-h-0 flex-1 overflow-y-auto px-4 pb-4">
          {activeTab === "最近使用" ? (
            <div className="flex h-full min-h-[320px] items-center justify-center text-[13px] text-white/34">暂无素材</div>
          ) : activeTab === "我的收藏" ? (
            <div className="h-full min-h-[320px]" />
          ) : (
            <div
              className="grid gap-x-3 gap-y-3"
              style={{
                gridTemplateColumns: `repeat(${minimized ? 4 : 6}, minmax(0, 1fr))`,
              }}
            >
              {visibleCards.map((card) => {
                const [title, author, count, model] = card;
                const effectPreset = effectPresets.find((preset) => preset.title === title);
                const cardThumbnailUrl =
                  effectPreset?.thumbnailUrl ||
                  (kind === "effect" ? EFFECT_MARKET_THUMBNAIL_URL : STYLE_MARKET_THUMBNAIL_URL);
                const selected = kind === "effect" && selectedEffectTitle === title;
                return (
                  <div
                    className="group relative flex w-full cursor-pointer flex-col gap-2 rounded-[12px] p-1 text-left transition-colors hover:bg-white/8"
                    key={`${title}-${author}`}
                    onClick={() => {
                      if (kind === "style") {
                        onApplyStyle(card);
                        return;
                      }
                      if (onApplyEffect && effectPreset) {
                        onApplyEffect(effectPreset);
                        return;
                      }
                      onClose();
                    }}
                  >
                    <div
                      className={cn(
                        "relative w-full overflow-hidden rounded-[10px] bg-[#1f1f1f]",
                        kind === "effect" ? "aspect-square" : "h-[262px]",
                        selected && "border border-white",
                      )}
                    >
                      <img
                        alt={kind === "effect" ? title : ""}
                        className="h-full w-full object-cover opacity-92"
                        draggable={false}
                        onDragStart={preventNativeImageDrag}
                        src={cardThumbnailUrl}
                      />
                      <span className="absolute inset-0 bg-[linear-gradient(180deg,rgba(0,0,0,0.02),rgba(0,0,0,0.18))]" />
                      {selected ? <span className="absolute inset-0 bg-black/50" /> : null}
                      <button
                        aria-label="更多操作"
                        className="absolute left-2 top-2 flex h-6 w-6 items-center justify-center rounded-lg bg-black/65 text-white/72 transition-opacity hover:bg-black/80"
                        onClick={(event) => event.stopPropagation()}
                        type="button"
                      >
                        <Ellipsis className="h-3 w-3" />
                      </button>
                      <button
                        aria-label="收藏"
                        className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded-lg bg-black/65 text-white/72 opacity-0 transition-opacity hover:bg-black/80 group-hover:opacity-100"
                        onClick={(event) => event.stopPropagation()}
                        type="button"
                      >
                        <Star className="h-3 w-3" />
                      </button>
                      {selected ? (
                        <span className="absolute bottom-2 left-2 flex h-6 items-center gap-1 rounded-[8px] bg-white px-2 text-[12px] text-[#262626]">
                          <Check className="h-3 w-3" />
                          当前使用
                        </span>
                      ) : null}
                    </div>
                    <div className="flex w-full flex-col gap-1 px-1">
                      <div className="flex h-[18px] w-full items-center gap-2">
                        {kind === "style" && model ? <span className="shrink-0 text-[12px] leading-[18px] text-white/54">{model}</span> : null}
                        <span className="min-w-0 truncate text-[13px] leading-[18px] text-white/88">{title}</span>
                        {effectPreset?.commercial !== false ? (
                          <span className="ml-auto shrink-0 rounded-[4px] bg-white/10 px-1.5 text-[11px] leading-[18px] text-white/68">商用</span>
                        ) : null}
                      </div>
                      <div className="flex h-[18px] items-center justify-between text-[12px] leading-[18px] text-white/42">
                        <span className="truncate pr-2">{author}</span>
                        <span>{count}</span>
                      </div>
                    </div>
                  </div>
                );
              })}
              <div
                className="py-2 text-center text-[12px] text-white/34"
                style={{ gridColumn: `span ${minimized ? 4 : 6} / span ${minimized ? 4 : 6}` }}
              >
                {kind === "effect" ? "已加载全部" : "正在加载更多"}
              </div>
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

function HistoryAssetPickerModal({
  nodes,
  onClose,
  onConfirm,
}: {
  nodes: CloneNode[];
  onClose: () => void;
  onConfirm: (nodes: CloneNode[]) => void;
}) {
  const [sourceTab, setSourceTab] = useState("当前画布");
  const [mediaTab, setMediaTab] = useState<"image" | "video" | "audio">("image");
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const imageNodes = nodes.filter((node) => node.inputType === "image" && Boolean(getNodeMediaUrl(node)) && !node.draftValues?.historyHidden);
  const videoNodes = nodes.filter((node) => node.inputType === "video" && Boolean(getNodeMediaUrl(node)) && !node.draftValues?.historyHidden);
  const audioNodes = nodes.filter((node) => node.inputType === "audio" && Boolean(getNodeMediaUrl(node)) && !node.draftValues?.historyHidden);
  const historyImageNodes = imageNodes;
  const historyVideoNodes = videoNodes;
  const historyAudioNodes = audioNodes;
  const activeNodes =
    sourceTab === "当前画布"
      ? mediaTab === "image"
        ? historyImageNodes
        : mediaTab === "video"
          ? historyVideoNodes
          : historyAudioNodes
      : [];
  const [query,setQuery] = useState("");
  const visibleNodes = activeNodes.filter(node=>node.title.toLowerCase().includes(query.trim().toLowerCase()));
  const selectedNodes = activeNodes.filter((node) => selectedIds.includes(node.id));
  const unit = mediaTab === "image" ? "张" : "个";
  const title = mediaTab === "image" ? "选择图片" : mediaTab === "video" ? "选择视频" : "选择音频";

  useEffect(() => {
    setSelectedIds([]);
  }, [mediaTab, sourceTab]);

  const toggleSelected = (id: string) => {
    setSelectedIds((current) => {
      if (current.includes(id)) return current.filter((item) => item !== id);
      if (current.length >= 10) return current;
      return [...current, id];
    });
  };

  return (
    <div className="fixed inset-0 z-[601] flex items-center justify-center bg-black/45 text-white" data-canvas-overlay="true">
      <section className="flex h-[min(800px,94dvh)] w-[min(90vw,1600px)] max-w-[min(90vw,1600px)] flex-col overflow-hidden rounded-[10px] bg-[#1f1f1f] shadow-[0_28px_90px_rgba(0,0,0,0.54)]">
        <div className="flex h-14 shrink-0 items-center justify-between border-b border-white/8 px-6">
          <h3 className="text-base font-medium text-[#f2f2f2]">{title}</h3>
          <button className="flex h-8 w-8 items-center justify-center rounded-lg text-white/70 transition hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
            <X className="h-5 w-5" />
          </button>
        </div>
        <div className="flex h-12 shrink-0 items-start gap-3 px-6 pt-4">
          <div className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
            {["当前画布"].map((label) => (
              <button
                className={cn(
                  "flex h-8 shrink-0 cursor-pointer items-center justify-center rounded-lg border-none px-3 py-1 text-[13px] transition-colors",
                  sourceTab === label ? "bg-white/12 font-medium text-[#f2f2f2]" : "bg-transparent text-[#787878] hover:bg-white/8"
                )}
                key={label}
                onClick={() => setSourceTab(label)}
                type="button"
              >
                {label}
              </button>
            ))}
          </div>
          <div className="shrink-0 text-[13px] text-neutral-500">
            已选 <span className="text-[#478eff]">{selectedIds.length}/10</span> {unit}
          </div>
        </div>
        <div className="flex h-10 shrink-0 items-start gap-2 px-6 pt-3">
          {([
            ["image", "图片"],
            ["video", "视频"],
            ["audio", "音频"],
          ] as const).map(([key, label]) => (
            <button
              className={cn(
                "flex h-7 cursor-pointer items-center justify-center rounded-md border-none px-2.5 text-[12px] transition-colors",
                mediaTab === key ? "bg-white/12 font-medium text-[#f2f2f2]" : "bg-transparent text-[#787878] hover:bg-white/8"
              )}
              key={key}
              onClick={() => setMediaTab(key)}
              type="button"
            >
              {label}
            </button>
          ))}
        </div>
        <input aria-label="搜索可选素材" placeholder="搜索素材名称" className="mx-6 mt-3 rounded bg-white/10 p-2 text-sm" value={query} onChange={event=>setQuery(event.target.value)}/>
        <div className="min-h-0 flex-1 overflow-y-auto px-6 pb-4 pt-4">
          {visibleNodes.length > 0 ? (
            <div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-2">
              {visibleNodes.map((node) => {
                const mediaUrl = getNodeMediaUrl(node) || getNodeReferenceMediaUrl(node);
                const selected = selectedIds.includes(node.id);
                return (
                  <button
                    className={cn(
                      "group relative h-[276px] overflow-hidden rounded-[8px] border bg-[#262626] text-left transition",
                      selected ? "border-[#4eb7d8]" : "border-white/10 hover:border-white/24"
                    )}
                    key={node.id}
                    aria-label={`选择素材 ${node.title}`}
                    aria-pressed={selected}
                    onClick={() => toggleSelected(node.id)}
                    type="button"
                  >
                    {mediaUrl && mediaTab === "image" ? (
                      <img alt="" className="h-full w-full object-cover" draggable={false} src={mediaUrl} />
                    ) : mediaUrl && mediaTab === "video" ? (
                      <video className="h-full w-full object-cover" muted playsInline src={mediaUrl} />
                    ) : mediaTab === "audio" ? (
                      <div className="flex h-full w-full items-center justify-center bg-[#363636] text-white/45">
                        <Music2 className="h-6 w-6" />
                      </div>
                    ) : (
                      <div className="flex h-full w-full items-center justify-center text-white/42">
                        <ImageIcon className="h-10 w-10" />
                      </div>
                    )}
                    {selected ? (
                      <span className="absolute left-2 top-2 flex h-5 w-5 items-center justify-center rounded-full bg-[#37c6e8] text-white shadow-[0_2px_8px_rgba(0,0,0,0.35)]">
                        <Check className="h-3.5 w-3.5" strokeWidth={2.6} />
                      </span>
                    ) : null}
                    <span
                      className={cn(
                        "absolute inset-0 rounded-[8px] bg-black/0 transition group-hover:bg-black/18",
                        selected && "bg-black/10"
                      )}
                    />
                    <span className="absolute bottom-0 left-0 right-0 truncate bg-black/70 p-2 text-xs">{node.title}</span>
                  </button>
                );
              })}
            </div>
          ) : (
            <div className="flex h-full items-center justify-center text-[13px] text-white/36">暂无素材</div>
          )}
        </div>
        <div className="flex h-16 shrink-0 items-center justify-between px-6">
          <p className="text-xs text-white/50">共 {visibleNodes.length} 项 · 向下滚动查看更多 · 最多选择 10 项</p>
          <button
            className={cn(
              "flex h-8 w-[50px] items-center justify-center rounded-lg text-[13px] font-medium transition",
              selectedNodes.length > 0 ? "bg-white text-black hover:bg-white/90" : "bg-white/12 text-white/36"
            )}
            disabled={selectedNodes.length === 0}
            onClick={() => onConfirm(selectedNodes)}
            type="button"
          >
            确定
          </button>
        </div>
      </section>
    </div>
  );
}

function HistoryAssetsPanel({
  listDownloadPendingId,
  nodes,
  onClose,
  onOpenWatermarkRules,
  onSelectNode,
  onUseNode,
  onHideNodes,
}: {
  listDownloadPendingId: string | null;
  nodes: CloneNode[];
  onClose: () => void;
  onOpenWatermarkRules: (node: CloneNode) => void;
  onSelectNode: (id: string) => void;
  onUseNode: (node: CloneNode) => void;
  onHideNodes: (ids: string[]) => void;
}) {
  const [tab, setTab] = useState<"image" | "video" | "audio">("image");
  const [batchMode, setBatchMode] = useState(false);
  const [batchDeleteConfirmOpen, setBatchDeleteConfirmOpen] = useState(false);
  const [batchDownloadPending, setBatchDownloadPending] = useState(false);
  const [deletedHistoryIds, setDeletedHistoryIds] = useState<string[]>([]);
  const [previewDownloadPending, setPreviewDownloadPending] = useState(false);
  const [previewIndex, setPreviewIndex] = useState<number | null>(null);
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const [sortOrder, setSortOrder] = useState<"desc" | "asc">("desc");
  const [zoomIndex, setZoomIndex] = useState(1);
  const imageNodes = nodes.filter((node) => node.inputType === "image" && Boolean(getNodeMediaUrl(node)) && !node.draftValues?.historyHidden);
  const videoNodes = nodes.filter((node) => node.inputType === "video" && Boolean(getNodeMediaUrl(node)) && !node.draftValues?.historyHidden);
  const audioNodes = nodes.filter((node) => node.inputType === "audio" && Boolean(getNodeMediaUrl(node)) && !node.draftValues?.historyHidden);
  const deletedHistoryIdSet = new Set(deletedHistoryIds);
  const historyImageNodesBase = imageNodes;
  const historyVideoNodesBase = videoNodes;
  const historyImageNodes = historyImageNodesBase.filter((node) => !deletedHistoryIdSet.has(node.id));
  const historyVideoNodes = historyVideoNodesBase.filter((node) => !deletedHistoryIdSet.has(node.id));
  const historyAudioNodes = audioNodes.filter((node) => !deletedHistoryIdSet.has(node.id));
  const activeNodes = tab === "image" ? historyImageNodes : tab === "video" ? historyVideoNodes : historyAudioNodes;
  const sortedNodes = sortOrder === "desc" ? [...activeNodes].reverse() : activeNodes;
  const visibleNodes = sortedNodes;
  const zoomLevel = HISTORY_ASSET_ZOOM_LEVELS[zoomIndex];
  const activeNodeIdKey = activeNodes.map((node) => node.id).join("|");
  const selectedNodes = visibleNodes.filter((node) => selectedIds.includes(node.id));
  const groupSelected = visibleNodes.length > 0 && visibleNodes.every((node) => selectedIds.includes(node.id));

  useEffect(() => {
    const validIds = new Set(activeNodeIdKey ? activeNodeIdKey.split("|") : []);
    setSelectedIds((current) => current.filter((id) => validIds.has(id)));
  }, [activeNodeIdKey]);





  useEffect(() => {
    setPreviewDownloadPending(false);
  }, [previewIndex]);

  useEffect(() => {
    if (previewIndex === null) return;
    if (previewIndex >= visibleNodes.length) {
      setPreviewIndex(visibleNodes.length > 0 ? visibleNodes.length - 1 : null);
    }
  }, [previewIndex, visibleNodes.length]);

  useEffect(() => {
    if (previewIndex === null) return;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setPreviewIndex(null);
        return;
      }
      if (event.key === "ArrowRight") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setPreviewIndex((current) => (current === null ? current : Math.min(visibleNodes.length - 1, current + 1)));
        return;
      }
      if (event.key === "ArrowLeft") {
        event.preventDefault();
        event.stopImmediatePropagation();
        setPreviewIndex((current) => (current === null ? current : Math.max(0, current - 1)));
      }
    };
    window.addEventListener("keydown", handleKeyDown, true);
    return () => window.removeEventListener("keydown", handleKeyDown, true);
  }, [previewIndex, visibleNodes.length]);

  const switchTab = (nextTab: "image" | "video" | "audio") => {
    if (batchDownloadPending) return;
    setTab(nextTab);
    setBatchDeleteConfirmOpen(false);
    setPreviewDownloadPending(false);
    setPreviewIndex(null);
    setSelectedIds([]);
  };

  const toggleBatchMode = () => {
    if (batchDownloadPending) return;
    setBatchDeleteConfirmOpen(false);
    setPreviewDownloadPending(false);
    setPreviewIndex(null);
    setBatchMode((current) => !current);
    setSelectedIds([]);
  };

  const toggleNodeSelection = (id: string) => {
    if (batchDownloadPending) return;
    setSelectedIds((current) => (current.includes(id) ? current.filter((item) => item !== id) : [...current, id]));
  };

  const toggleGroupSelection = () => {
    if (batchDownloadPending) return;
    setSelectedIds(groupSelected ? [] : visibleNodes.map((node) => node.id));
  };

  const runBatchUse = () => {
    if (batchDownloadPending) return;
    if (selectedNodes.length === 0) return;
    selectedNodes.forEach((node) => onUseNode(node));
    setSelectedIds([]);
    setBatchMode(false);
  };

  const runBatchDownload = async () => {
    if (batchDownloadPending || !selectedNodes.length) return;
    setBatchDownloadPending(true);
    try { const result = await downloadCanvasMedia(selectedNodes.map(node => ({url:getNodeMediaUrl(node), name:node.title}))); if(result.failed) toast.error(`${result.failed} 项下载失败，详见压缩包内清单`); }
    catch(error) { toast.error(error instanceof Error ? error.message : "下载失败"); }
    finally { setBatchDownloadPending(false); }
  };

  const runBatchDelete = () => {
    if (batchDownloadPending) return;
    if (selectedNodes.length === 0) return;
    setBatchDeleteConfirmOpen(true);
  };

  const confirmBatchDelete = () => {
    if (selectedNodes.length === 0) {
      setBatchDeleteConfirmOpen(false);
      return;
    }
    onHideNodes(selectedNodes.map(node => node.id));
    setSelectedIds([]);
    setBatchDeleteConfirmOpen(false);
    toast.success("已从当前画布素材列表移除，可重新生成或上传素材；画布节点保留");
  };

  const previewNode = previewIndex === null ? null : visibleNodes[previewIndex] || null;
  const previewDisplayIndex = previewIndex ?? 0;
  const previewMediaUrl = previewNode ? getNodeMediaUrl(previewNode) || getNodeReferenceMediaUrl(previewNode) : "";
  const previewMediaType = previewNode?.inputType || "image";

  return (
    <>
      <div className="pointer-events-none fixed inset-0 z-[601] flex items-center justify-center text-white" data-canvas-overlay="true">
        <section className="pointer-events-auto flex h-[calc(100vh-160px)] min-h-[360px] w-[min(90vw,1600px)] max-w-[min(90vw,1600px)] flex-col overflow-hidden rounded-2xl bg-[#262626] shadow-[0_28px_90px_rgba(0,0,0,0.54)]">
          <div className="flex h-16 shrink-0 items-center justify-between px-4">
            <h3 className="text-base font-medium text-white/86">当前画布素材</h3>
            <div className="flex items-center gap-4">
              <div className="flex h-[29px] items-center gap-1 rounded-lg bg-[#171717]">
                <button
                  className="flex h-7 w-7 items-center justify-center rounded-lg text-[16px] leading-none text-white/62 transition hover:bg-white/8 hover:text-white"
                  onClick={() => setZoomIndex((current) => Math.max(0, current - 1))}
                  type="button"
                >
                  -
                </button>
                <span className="w-10 text-center text-[13px] text-white">{zoomLevel.label}</span>
                <button
                  className="flex h-7 w-7 items-center justify-center rounded-lg text-white/62 transition hover:bg-white/8 hover:text-white"
                  onClick={() => setZoomIndex((current) => Math.min(HISTORY_ASSET_ZOOM_LEVELS.length - 1, current + 1))}
                  type="button"
                >
                  <Plus className="h-3.5 w-3.5" strokeWidth={2} />
                </button>
              </div>
              <button className="flex h-7 w-7 items-center justify-center rounded-lg text-white/54 transition hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
                <X className="h-4 w-4" />
              </button>
            </div>
          </div>
          <div className="flex shrink-0 flex-wrap items-center justify-between gap-3 px-4 pb-4 pt-[15px]">
            <div className="flex items-center gap-6">
              <button
                className={cn(
                  "flex h-8 shrink-0 items-center justify-center rounded-lg bg-transparent px-0 text-[13px] transition hover:text-white",
                  tab === "image" ? "text-white/86" : "text-white/58"
                )}
                onClick={() => switchTab("image")}
                type="button"
              >
                图片历史({historyImageNodes.length})
              </button>
              <button
                className={cn(
                  "flex h-8 shrink-0 items-center justify-center rounded-lg bg-transparent px-0 text-[13px] transition hover:text-white",
                  tab === "video" ? "text-white/86" : "text-white/58"
                )}
                onClick={() => switchTab("video")}
                type="button"
              >
                视频历史({historyVideoNodes.length})
              </button>
              <button
                className={cn(
                  "flex h-8 shrink-0 items-center justify-center rounded-lg bg-transparent px-0 text-[13px] transition hover:text-white",
                  tab === "audio" ? "text-white/86" : "text-white/58"
                )}
                onClick={() => switchTab("audio")}
                type="button"
              >
                音频历史({audioNodes.length})
              </button>
            </div>
            {batchMode ? (
              <div className="flex items-center justify-end gap-2">
                <span className="block h-5 w-[67px] whitespace-nowrap text-[13px] text-white/58">已选择 {selectedIds.length} 项</span>
                <HistoryBatchActionButton disabled={batchDownloadPending || selectedIds.length === 0} label="移除" onClick={runBatchDelete} />
                <HistoryBatchActionButton disabled={batchDownloadPending || selectedIds.length === 0} label="下载" onClick={runBatchDownload} />
                <HistoryBatchActionButton disabled={batchDownloadPending || selectedIds.length === 0} label="使用" onClick={runBatchUse} />
                <button
                  className="ml-[17px] flex h-7 w-[68px] items-center justify-center rounded-lg bg-transparent text-[13px] text-white/58 transition hover:bg-white/8 hover:text-white disabled:pointer-events-none disabled:opacity-40"
                  disabled={batchDownloadPending}
                  onClick={toggleBatchMode}
                  type="button"
                >
                  取消选择
                </button>
              </div>
            ) : (
              <div className="flex items-center gap-[17px]">
                <button
                  className="flex h-8 w-[86px] items-center justify-center rounded-lg bg-transparent text-[13px] text-white/62 transition hover:bg-white/8 hover:text-white"
                  onClick={() => setSortOrder((current) => (current === "desc" ? "asc" : "desc"))}
                  type="button"
                >
                  {sortOrder === "desc" ? "最近添加优先" : "最早添加优先"}
                </button>
                <button
                  className="flex h-8 w-[86px] items-center justify-center rounded-lg bg-transparent text-[13px] text-white/62 transition hover:bg-white/8 hover:text-white"
                  onClick={toggleBatchMode}
                  type="button"
                >
                  批量操作
                </button>
              </div>
            )}
          </div>
          <div className="min-h-0 flex-1 overflow-y-auto px-5 pb-4">
            {activeNodes.length === 0 ? (
              <div className="flex h-full items-center justify-center text-[13px] text-white/36">暂无历史记录</div>
            ) : (
              <>
                <div className="mb-3 flex h-5 items-center gap-2">
                  {batchMode ? (
                    <HistorySelectionCheckbox checked={groupSelected} onClick={toggleGroupSelection} />
                  ) : null}
                  <h4 className="text-sm font-medium text-white/62">按节点添加顺序</h4>
                </div>
                <div className="grid gap-x-3 gap-y-4" style={{ gridTemplateColumns: `repeat(auto-fill, ${zoomLevel.cardSize}px)` }}>
                  {visibleNodes.map((node, index) => {
                    const mediaUrl = getNodeMediaUrl(node) || getNodeReferenceMediaUrl(node);
                    const selected = selectedIds.includes(node.id);
                    return (
                      <div
                        className="group relative cursor-pointer"
                        key={node.id}
                        onClick={() => (batchMode ? toggleNodeSelection(node.id) : onSelectNode(node.id))}
                        onKeyDown={(event) => {
                          if (event.key === "Enter" || event.key === " ") {
                            event.preventDefault();
                            if (batchMode) toggleNodeSelection(node.id);
                            else onSelectNode(node.id);
                          }
                        }}
                        role="button"
                        style={{ height: zoomLevel.cardSize, width: zoomLevel.cardSize }}
                        tabIndex={0}
                      >
                        <div
                          className={cn(
                            "relative box-border h-full w-full overflow-hidden rounded-lg border bg-[#363636]",
                            selected ? "border-white/44 ring-2 ring-white/24" : "border-white/8"
                          )}
                        >
                          {mediaUrl && node.inputType === "image" ? (
                            <img alt="" className="absolute inset-0 h-full w-full rounded-lg object-cover transition-transform duration-200 group-hover:scale-105" src={mediaUrl} />
                          ) : mediaUrl && node.inputType === "video" ? (
                            <video className="absolute inset-0 h-full w-full rounded-lg object-cover transition-transform duration-200 group-hover:scale-105" muted playsInline src={mediaUrl} />
                          ) : node.inputType === "audio" ? (
                            <div className="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-lg bg-[#363636] text-white/50">
                              <Music2 className="h-8 w-8" />
                              <span className="max-w-[112px] truncate text-[12px] text-white/54">{node.title}</span>
                            </div>
                          ) : (
                            <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-[#363636] text-white/44">
                              <ImageIcon className="h-8 w-8" />
                            </div>
                          )}
                          {batchMode ? (
                            <span className="absolute left-[5px] top-[5px] z-10">
                              <HistorySelectionCheckbox checked={selected} onClick={() => toggleNodeSelection(node.id)} />
                            </span>
                          ) : (
                            <div className="absolute inset-0 flex items-center justify-center gap-1 rounded-lg bg-black/65 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
                              <button
                                className="flex h-7 cursor-pointer items-center justify-center rounded-lg border-none px-1.5 text-[13px] text-white/90 transition hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
                                onClick={(event) => {
                                  event.stopPropagation();
                                  setPreviewIndex(index);
                                }}
                                type="button"
                              >
                                查看
                              </button>
                              <button
                                className="flex h-7 cursor-pointer items-center justify-center rounded-lg border-none px-1.5 text-[13px] text-white/90 transition hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
                                onClick={(event) => {
                                  event.stopPropagation();
                                  onUseNode(node);
                                }}
                                type="button"
                              >
                                使用
                              </button>
                              <button
                                className="flex h-7 cursor-pointer items-center justify-center rounded-lg border-none px-1.5 text-[13px] text-white/90 transition hover:bg-white/10 disabled:cursor-not-allowed disabled:opacity-50"
                                disabled={listDownloadPendingId === node.id}
                                onClick={(event) => {
                                  event.stopPropagation();
                                  void downloadCanvasMedia([{url:getNodeMediaUrl(node),name:node.title}]).catch(error=>toast.error(error.message));
                                }}
                                type="button"
                              >
                                下载
                              </button>
                            </div>
                          )}
                        </div>
                      </div>
                    );
                  })}
                </div>
              </>
            )}
          </div>
        </section>
      </div>
      {previewNode ? (
        <div
          className="fixed inset-0 z-[700] flex items-center justify-center bg-black/80 text-white"
          data-canvas-overlay="true"
          onPointerDown={(event) => {
            if (event.target === event.currentTarget) setPreviewIndex(null);
          }}
        >
          <div className="relative flex max-h-[90vh] max-w-[85vw] flex-col items-center gap-4">
            <div className="flex h-[min(644px,calc(90vh-92px))] w-[min(1285px,85vw)] items-center justify-center">
              {previewMediaType === "video" && previewMediaUrl ? (
                <video className="block max-h-full max-w-full select-none object-contain" controls playsInline src={previewMediaUrl} />
              ) : previewMediaType === "audio" ? (
                <div className="flex h-[220px] w-[520px] max-w-[85vw] flex-col items-center justify-center rounded-[16px] border border-white/12 bg-white/8 px-8">
                  <Music2 className="mb-5 h-10 w-10 text-white/66" />
                  <div className="mb-5 max-w-full truncate text-[15px] text-white/78">{previewNode.title}</div>
                  {previewMediaUrl ? <audio className="w-full" controls src={previewMediaUrl} /> : <div className="text-[13px] text-white/42">暂无音频预览</div>}
                </div>
              ) : previewMediaUrl ? (
                <img alt="" className="block max-h-full max-w-full select-none object-contain" draggable={false} src={previewMediaUrl} />
              ) : (
                <div className="flex h-[320px] w-[420px] items-center justify-center rounded-[16px] border border-white/12 bg-white/8 text-[14px] text-white/54">
                  暂无预览
                </div>
              )}
            </div>
	            {previewDisplayIndex > 0 ? (
	              <button
	                aria-label="上一张"
	                className="fixed left-4 top-1/2 z-[720] flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white/70 transition hover:bg-black/70 hover:text-white"
	                onClick={() => setPreviewIndex((current) => (current === null ? current : Math.max(0, current - 1)))}
	                type="button"
	              >
                <ChevronRight className="h-5 w-5 rotate-180" />
              </button>
            ) : null}
	            {previewDisplayIndex < visibleNodes.length - 1 ? (
	              <button
	                aria-label="下一张"
	                className="fixed right-4 top-1/2 z-[720] flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full bg-black/50 text-white/70 transition hover:bg-black/70 hover:text-white"
	                onClick={() => setPreviewIndex((current) => (current === null ? current : Math.min(visibleNodes.length - 1, current + 1)))}
	                type="button"
	              >
                <ChevronRight className="h-5 w-5" />
              </button>
            ) : null}
            <button
              aria-label="关闭预览"
              className="absolute -right-3 -top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/60 text-white/70 transition hover:bg-black/80 hover:text-white"
              onClick={() => setPreviewIndex(null)}
              type="button"
            >
              <X className="h-4 w-4" />
            </button>
            <div className="flex items-center gap-4">
              <span className="text-[14px] text-white/50">{previewDisplayIndex + 1} / {visibleNodes.length}</span>
              <button
                className={cn(
                  "flex h-9 items-center gap-2 rounded-lg bg-white/15 text-[14px] text-white/80 transition hover:bg-white/20 hover:text-white disabled:cursor-not-allowed disabled:opacity-50",
                  previewDownloadPending ? "w-[118px] justify-center px-0" : "px-5"
                )}
                disabled={previewDownloadPending}
                onClick={async () => { setPreviewDownloadPending(true); try {await downloadCanvasMedia([{url:previewMediaUrl,name:previewNode.title}]);} catch(error) {toast.error(error instanceof Error ? error.message : "下载失败");} finally {setPreviewDownloadPending(false);} }}
                type="button"
              >
                {previewDownloadPending ? null : <Download className="h-4 w-4" />}
                {previewDownloadPending ? "下载中..." : "下载"}
              </button>
            </div>
          </div>
        </div>
      ) : null}
      {batchDeleteConfirmOpen ? (
        <div className="fixed inset-0 z-[802] flex items-center justify-center" data-canvas-overlay="true">
          <section className="w-[min(344px,calc(100vw-32px))] rounded-xl border border-white/10 bg-[#262626] p-4 text-white shadow-[0_18px_48px_rgba(0,0,0,0.48)]">
            <div className="flex flex-col gap-3">
              <div className="flex items-start gap-2">
                <p className="text-sm font-bold text-white">从素材列表移除</p>
              </div>
              <div className="text-[13px] text-white/58">确认移除 {selectedIds.length} 项？画布节点及源文件保留，移除状态随画布保存。</div>
            </div>
            <div className="mt-4 flex items-center justify-end gap-3">
              <button
                className="h-8 rounded-lg bg-white/10 px-3 text-[13px] text-white transition-colors hover:bg-white/15"
                onClick={() => setBatchDeleteConfirmOpen(false)}
                type="button"
              >
                取消
              </button>
              <button
                className="h-8 rounded-lg bg-[#f7f7f7] px-3 text-[13px] text-[#141414] transition-colors hover:bg-white"
                onClick={confirmBatchDelete}
                type="button"
              >
                删除
              </button>
            </div>
          </section>
        </div>
      ) : null}
    </>
  );
}

function WatermarkRulesModal({ onSave }: { onSave: () => void }) {
  return (
    <div className="fixed inset-0 z-[801] flex items-center justify-center bg-black/25 px-6 text-white" data-canvas-overlay="true">
      <div className="flex h-[404px] w-[740px] max-w-[calc(100vw-48px)] flex-col rounded-[18px] border border-white/10 bg-[#202020] p-6 shadow-[0_28px_100px_rgba(0,0,0,0.58)]">
        <h3 className="text-[18px] font-semibold leading-5 text-white">AI 生成内容水印管理规则</h3>
        <div className="mt-4 flex-1 text-white/68">
          <div className="h-[160px] overflow-y-auto text-[12px] leading-5">
            <p>欢迎您使用LiblibAI的产品和服务！</p>
            <p className="indent-8">
            您申请我们向您提供没有添加显式标识（以下或称&quot;水印&quot;）的AI生成合成内容之前，亦即您使用&quot;去水印&quot;功能之前，请您务必认真阅读并充分理解本规则。您知悉、同意并遵守以下内容的，方可使用本功能。
            </p>
            <p className="indent-8">
            经您提出申请，LiblibAI平台可向您提供未添加前述显式标识的AI生成合成内容。请注意：您在使用网络信息内容传播服务发布该等AI生成合成内容时，需主动作出声明，并通过传播LiblibAI平台提供的标识功能完成标识操作。您确认已知晓并承诺：若您未依据法律法规要求在AI生成合成内容中添加显式标识，进而引发公众混淆或误认，由此产生的全部后果及法律责任均由您自行承担。更详细的说明见LiblibAI水印规范。
            </p>
          </div>
          <div className="mt-6 flex items-center gap-3">
            <label className="relative inline-flex h-5 w-[38px] shrink-0 cursor-pointer items-center rounded-full bg-white/25" htmlFor="watermark-rules-remove-watermark">
              <input
                aria-checked={false}
                checked={false}
                className="absolute inset-0 h-full w-full cursor-pointer opacity-0"
                id="watermark-rules-remove-watermark"
                onChange={() => undefined}
                role="switch"
                type="checkbox"
              />
              <span className="absolute left-[3px] top-[3px] h-3.5 w-3.5 rounded-full bg-[#171717]" />
            </label>
            <div className="text-[14px] font-medium text-white">去 AI 水印</div>
          </div>
          <div className="mt-2 text-[12px] leading-4 text-white/42">
            开启本功能开关并点击 &quot;保存设置&quot; 按钮，即视为您已充分知悉并同意本规则全部内容。后续您可通过 &quot;头像 - AI水印设置&quot; 路径调整本功能配置。
          </div>
        </div>
        <div className="mt-8 flex justify-end">
          <button
            className="h-11 w-[130px] rounded-[10px] bg-[#5DDCFF] text-[14px] font-medium text-black transition hover:bg-[#09CAF5]"
            onClick={onSave}
            type="button"
          >
            保存设置
          </button>
        </div>
      </div>
    </div>
  );
}

function HistoryBatchActionButton({
  disabled,
  label,
  onClick,
}: {
  disabled: boolean;
  label: string;
  onClick: () => void;
}) {
  const widthClass = label === "使用" ? "w-[50px]" : "w-[69px]";
  return (
    <button
      className={cn(
        "flex h-7 items-center justify-center rounded-lg bg-transparent text-[13px] text-white/62 transition hover:bg-white/8 hover:text-white disabled:pointer-events-none disabled:opacity-40",
        widthClass
      )}
      disabled={disabled}
      onClick={onClick}
      type="button"
    >
      {label}
    </button>
  );
}

function HistorySelectionCheckbox({
  checked,
  onClick,
}: {
  checked: boolean;
  onClick: () => void;
}) {
  return (
    <button
      aria-checked={checked}
      className={cn(
        "flex h-4 w-4 shrink-0 items-center justify-center rounded border transition-colors",
        checked ? "border-white bg-white text-black" : "border-white/30 bg-transparent text-transparent hover:border-white/58"
      )}
      onClick={(event) => {
        event.stopPropagation();
        onClick();
      }}
      role="checkbox"
      type="button"
    >
      <Check className="h-3 w-3" strokeWidth={2.4} />
    </button>
  );
}

const ASSET_MANAGER_FILTERS = ["全部", "文本", "图片", "视频", "视频合成", "导演台", "音频", "脚本", "脚本（旧版）"];
const VIDEO_CANVAS_TUTORIAL_URL = "https://resonate.feishu.cn/wiki/Loxfw6XHziYRk0kKzdjcFfp9nhb";

function CanvasAssetManagerPanel({
  nodes,
  projectTitle,
  onClose,
  onDuplicateNode,
  onRenameNode,
  onResizeStart,
  onSelectNode,
  panelWidth,
}: {
  nodes: CloneNode[];
  projectTitle: string;
  onClose: () => void;
  onDuplicateNode: (id: string) => void;
  onRenameNode: (id: string, title: string) => boolean;
  onResizeStart: (event: ReactPointerEvent<HTMLDivElement>) => void;
  onSelectNode: (id: string) => void;
  panelWidth: number;
}) {
  const assetFilterRef = useRef<HTMLDivElement | null>(null);
  const canvasFilterRef = useRef<HTMLDivElement | null>(null);
  const moreMenuRef = useRef<HTMLDivElement | null>(null);
  const searchInputRef = useRef<HTMLInputElement | null>(null);
  const [activeTab, setActiveTab] = useState<"canvas" | "assets">("canvas");
  const [assetFilterOpen, setAssetFilterOpen] = useState(false);
  const [assetSearchQuery, setAssetSearchQuery] = useState("");
  const [assetTypeFilter, setAssetTypeFilter] = useState("全部");
  const [collapsed, setCollapsed] = useState(false);
  const [editingNodeId, setEditingNodeId] = useState<string | null>(null);
  const [menuNodeId, setMenuNodeId] = useState<string | null>(null);
  const [renameDraft, setRenameDraft] = useState("");
  const [searchOpen, setSearchOpen] = useState(false);
  const [searchQuery, setSearchQuery] = useState("");
  const [showFilters, setShowFilters] = useState(false);
  const [filter, setFilter] = useState("全部");
  const nodeRowWidth = Math.max(0, panelWidth - 24);
  const nodeActionMoreLeft = Math.max(0, panelWidth - 74);
  const nodeActionLocateLeft = Math.max(0, panelWidth - 48);
  const visibleNodes = nodes.filter((node) => {
    if (filter === "全部") return true;
    const kind = getTargetModuleKind(node);
    if (filter === "文本") return kind === "text" || node.inputType === "text";
    if (filter === "图片") return kind === "image" || node.inputType === "image" || /图片|镜头|角色|场景/.test(node.title);
    if (filter === "视频") return kind === "video" || node.inputType === "video" || /视频/.test(node.title);
    if (filter === "视频合成") return kind === "video-clip";
    if (filter === "导演台") return kind === "director";
    if (filter === "音频") return kind === "audio" || node.inputType === "audio";
    if (filter === "脚本") return kind === "script" || /脚本|剧本/.test(node.title);
    return false;
  }).filter((node) => {
    const query = searchQuery.trim().toLowerCase();
    if (!query) return true;
    const kind = getTargetModuleKind(node) || node.inputType || node.kind;
    return `${node.title} ${node.subtitle || ""} ${kind}`.toLowerCase().includes(query);
  });

  useEffect(() => {
    if (searchOpen) searchInputRef.current?.focus();
  }, [searchOpen]);

  useEffect(() => {
    if (!assetFilterOpen && !menuNodeId && !showFilters) return;

    const handlePointerDown = (event: PointerEvent) => {
      const target = event.target as Node | null;
      if (!target) return;
      if (canvasFilterRef.current?.contains(target)) return;
      if (assetFilterRef.current?.contains(target)) return;
      if (moreMenuRef.current?.contains(target)) return;
      setAssetFilterOpen(false);
      setMenuNodeId(null);
      setShowFilters(false);
    };

    document.addEventListener("pointerdown", handlePointerDown);
    return () => document.removeEventListener("pointerdown", handlePointerDown);
  }, [assetFilterOpen, menuNodeId, showFilters]);

  const startRename = (node: CloneNode) => {
    setEditingNodeId(node.id);
    setRenameDraft(node.title);
    setMenuNodeId(null);
  };

  const commitRename = () => {
    if (!editingNodeId) return;
    const success = onRenameNode(editingNodeId, renameDraft);
    if (success) {
      setEditingNodeId(null);
      setRenameDraft("");
    }
  };

  return (
    <section
      className="fixed left-0 top-0 z-[30] flex h-dvh flex-col overflow-hidden border-r border-[#363636] bg-[#171717] text-white shadow-none"
      data-canvas-overlay="true"
      style={{ width: panelWidth }}
    >
      <div className="relative h-[92px] shrink-0">
        <div className="absolute left-2 top-[52px] flex h-7 min-w-0 items-center gap-[9px] px-1">
          <input
            aria-label="工作区名称"
            className="h-5 w-[78px] truncate bg-transparent text-[13px] text-white/82 outline-none"
            readOnly
            value={projectTitle}
          />
          <span className="text-xs text-white/45">当前画布</span>
        </div>
      </div>

      <div className="flex h-[50px] shrink-0 items-center justify-between border-y border-[#363636] px-2">
        <div className="flex items-center gap-2">
          <button
            className={cn(
              "h-[30px] rounded-lg px-2 text-[14px] transition-colors",
              activeTab === "canvas" ? "bg-white/15 text-white" : "bg-transparent text-white/90 hover:bg-white/10"
            )}
            onClick={() => {
              setActiveTab("canvas");
              setAssetFilterOpen(false);
              setMenuNodeId(null);
            }}
            type="button"
          >
            画布
          </button>
          <button
            className={cn(
              "h-[30px] rounded-lg px-2 text-[14px] transition-colors",
              activeTab === "assets" ? "bg-white/15 text-white" : "bg-transparent text-white/90 hover:bg-white/10"
            )}
            onClick={() => {
              setActiveTab("assets");
              setMenuNodeId(null);
              setShowFilters(false);
            }}
            type="button"
          >
            资产
          </button>
        </div>
        <button aria-label="资产管理" className="flex h-8 w-8 items-center justify-center rounded-lg text-white/80 hover:bg-white/10" onClick={onClose} type="button">
          <AssetGlyph />
        </button>
      </div>

      {activeTab === "canvas" ? (
        <>
          <div className="flex h-[52px] shrink-0 flex-col gap-2 px-2 py-3">
            <div className="flex min-h-7 w-full min-w-0 items-center justify-between gap-1 pl-2 pr-0">
              {searchOpen ? (
                <div className="flex min-w-0 flex-1 items-center gap-px">
                  <Search className="h-3 w-3 shrink-0 text-white/50" />
                  <input
                    aria-label="搜索画布元素"
                    className="h-5 w-[101px] bg-transparent text-[13px] text-white outline-none placeholder:text-white/40"
                    onChange={(event) => setSearchQuery(event.target.value)}
                    onKeyDown={(event) => {
                      if (event.key === "Escape") {
                        setSearchOpen(false);
                        setSearchQuery("");
                      }
                    }}
                    placeholder="搜索节点"
                    ref={searchInputRef}
                    value={searchQuery}
                  />
                </div>
              ) : (
                <div className="flex min-w-0 items-center gap-0.5">
                  <span className="text-[13px] font-medium leading-normal text-[#919191]">画布元素</span>
                  <button
                    aria-label={collapsed ? "展开节点列表" : "收起节点列表"}
                    aria-expanded={!collapsed}
                    className="flex h-7 w-7 items-center justify-center rounded-lg text-white/85 hover:bg-white/10"
                    onClick={() => setCollapsed((value) => !value)}
                    type="button"
                  >
                    <ChevronDown className={cn("h-4 w-4 transition-transform", collapsed && "-rotate-90")} />
                  </button>
                </div>
              )}

              <div className="flex shrink-0 items-center gap-0.5">
                <div className="relative" ref={canvasFilterRef}>
                  <button
                    aria-label={`筛选类型：${filter}`}
                    className={cn(
                      "flex h-7 items-center justify-center rounded-lg text-[13px] text-white hover:bg-white/10",
                      searchOpen ? "w-7" : "w-[54px]",
                      showFilters && "bg-white/10"
                    )}
                    onClick={() => setShowFilters((value) => !value)}
                    type="button"
                  >
                    {searchOpen ? <Settings2 className="h-4 w-4" /> : filter}
                  </button>
                  {showFilters ? (
                    <div className="absolute left-0 top-8 z-[410] grid w-[180px] gap-1 rounded-[12px] border border-white/10 bg-[#171717] px-1 pb-[3px] pt-2 shadow-[0_18px_60px_rgba(0,0,0,0.44)]" role="menu">
                      {ASSET_MANAGER_FILTERS.map((item) => (
                        <button
                          className={cn(
                            "h-8 rounded-[8px] px-2 text-left text-[13px] text-white hover:bg-white/10",
                            item === filter && "bg-white/10"
                          )}
                          key={item}
                          onClick={() => {
                            setFilter(item);
                            setShowFilters(false);
                          }}
                          role="menuitem"
                          type="button"
                        >
                          {item}
                        </button>
                      ))}
                    </div>
                  ) : null}
                </div>
                <button
                  aria-label={searchOpen ? "关闭搜索" : "搜索节点"}
                  className="flex h-7 w-7 items-center justify-center rounded-lg text-white/85 hover:bg-white/10"
                  onClick={() => {
                    setSearchOpen((value) => !value);
                    if (searchOpen) setSearchQuery("");
                  }}
                  type="button"
                >
                  {searchOpen ? <X className="h-4 w-4" /> : <Search className="h-4 w-4" />}
                </button>
              </div>
            </div>
          </div>

          <div className="min-h-0 flex-1 overflow-y-auto px-2 py-2">
            {collapsed ? null : visibleNodes.length === 0 ? (
              <div className="mt-2 rounded-lg px-3 py-5 text-center text-[13px] text-white/36">暂无匹配节点</div>
            ) : (
              <div className="grid gap-0.5">
                {visibleNodes.map((node) => (
                  <div className="group/node relative flex h-10 w-full items-center gap-0.5 rounded-lg py-1 pl-0 pr-0 hover:bg-white/10" key={node.id}>
                    {editingNodeId === node.id ? (
                      <input
                        aria-label={`重命名节点 ${node.title}`}
                        className="ml-2 h-7 min-w-0 flex-1 rounded-[7px] border border-white/14 bg-black/22 px-2 text-[13px] text-white outline-none"
                        onChange={(event) => setRenameDraft(event.target.value)}
                        onKeyDown={(event) => {
                          if (event.key === "Enter") commitRename();
                          if (event.key === "Escape") {
                            setEditingNodeId(null);
                            setRenameDraft("");
                          }
                        }}
                        value={renameDraft}
                      />
                    ) : (
                      <button
                        aria-label={`定位到节点 ${node.title}`}
                        className="flex h-8 min-w-0 items-center rounded-lg pl-3 pr-[58px] text-left text-[13px] text-white"
                        onClick={() => onSelectNode(node.id)}
                        style={{ width: nodeRowWidth }}
                        type="button"
                      >
                        <span className="block min-w-0 truncate">{node.title}</span>
                      </button>
                    )}
                    {editingNodeId === node.id ? (
                      <>
                        <button aria-label="确认重命名" className="flex h-6 w-6 items-center justify-center rounded-md text-white/50 hover:bg-white/10 hover:text-white" onClick={commitRename} type="button">
                          <Check className="h-3.5 w-3.5" />
                        </button>
                        <button aria-label="取消重命名" className="flex h-6 w-6 items-center justify-center rounded-md text-white/50 hover:bg-white/10 hover:text-white" onClick={() => {
                          setEditingNodeId(null);
                          setRenameDraft("");
                        }} type="button">
                          <X className="h-3.5 w-3.5" />
                        </button>
                      </>
                    ) : (
                      <>
                        <button
                          aria-label="更多操作"
                          className="absolute top-2 flex h-6 w-6 items-center justify-center rounded-md text-white/40 hover:bg-white/10 hover:text-white"
                          onClick={() => setMenuNodeId((current) => current === node.id ? null : node.id)}
                          style={{ left: nodeActionMoreLeft }}
                          type="button"
                        >
                          ...
                        </button>
                        <button
                          aria-label={`定位到节点 ${node.title}`}
                          className="absolute top-2 flex h-6 w-6 items-center justify-center rounded-md text-white/40 hover:bg-white/10 hover:text-white"
                          onClick={() => onSelectNode(node.id)}
                          style={{ left: nodeActionLocateLeft }}
                          type="button"
                        >
                          ↗
                        </button>
                      </>
                    )}
                    {menuNodeId === node.id ? (
                      <div
                        className="absolute top-[38px] z-[410] grid w-[180px] gap-1 rounded-[12px] border border-white/10 bg-[#171717] px-1 pb-1 pt-2 shadow-[0_18px_60px_rgba(0,0,0,0.46)]"
                        ref={moreMenuRef}
                        role="menu"
                        style={{ left: nodeActionMoreLeft }}
                      >
                        <button className="h-8 rounded-[8px] px-2 text-left text-[13px] text-white hover:bg-white/10" onClick={() => startRename(node)} role="menuitem" type="button">
                          重命名
                        </button>
                        <button className="h-8 rounded-[8px] px-2 text-left text-[13px] text-white hover:bg-white/10" onClick={() => {
                          onDuplicateNode(node.id);
                          setMenuNodeId(null);
                        }} role="menuitem" type="button">
                          复制
                        </button>
                      </div>
                    ) : null}
                  </div>
                ))}
              </div>
            )}
          </div>
        </>
      ) : (
        <div className="flex min-h-0 flex-1 flex-col gap-3 px-3 py-3">
          <input aria-label="搜索当前素材" className="rounded-lg bg-white/10 p-2 text-sm" placeholder="搜索当前画布素材" value={assetSearchQuery} onChange={e=>setAssetSearchQuery(e.target.value)}/>
          <select aria-label="素材类型" className="rounded bg-[#222] p-2 text-sm" value={assetTypeFilter} onChange={e=>setAssetTypeFilter(e.target.value)}>{["全部","图片","视频","音频"].map(type=><option key={type}>{type}</option>)}</select>
          <p className="text-xs text-white/40">当前画布中已有文件的素材，可定位或下载。</p>
          <div className="min-h-0 flex-1 space-y-3 overflow-auto">{nodes.filter(node=>Boolean(getNodeMediaUrl(node)) && (!assetSearchQuery.trim() || node.title.toLowerCase().includes(assetSearchQuery.trim().toLowerCase())) && (assetTypeFilter === "全部" || node.inputType === ({图片:"image",视频:"video",音频:"audio"} as Record<string,string>)[assetTypeFilter])).map(node=><article key={node.id} className="rounded-lg border border-white/10 p-2">
            {node.inputType === "image" ? <img alt={node.title} src={getNodeMediaUrl(node)} className="h-24 w-full object-contain"/> : <p className="py-4 text-center text-xs text-white/50">{node.inputType === "video" ? "视频" : "音频"}</p>}
            <p className="truncate py-2 text-xs">{node.title}</p><div className="flex gap-2 text-xs"><button className="rounded bg-white/10 px-2 py-1" onClick={()=>onSelectNode(node.id)}>定位</button><button className="rounded bg-white/10 px-2 py-1" onClick={()=>void downloadCanvasMedia([{url:getNodeMediaUrl(node),name:node.title}]).catch(e=>toast.error(e.message))}>下载</button></div>
          </article>)}</div>
        </div>
      )}

      <div className="flex h-[53px] shrink-0 items-center justify-between border-t border-[#363636] px-3 pb-3 pt-2 text-[12px] text-white/42">共 {nodes.length} 节点</div>
      <div
        aria-label="调整工作区面板宽度"
        aria-valuemax={ASSET_MANAGER_MAX_WIDTH}
        aria-valuemin={ASSET_MANAGER_MIN_WIDTH}
        aria-valuenow={panelWidth}
        className="workspace-panel-drawer-resize-handle absolute bottom-0 right-0 top-0 z-[100] w-3 shrink-0 cursor-col-resize touch-none select-none bg-transparent"
        onPointerDown={onResizeStart}
        role="separator"
        tabIndex={0}
      />
    </section>
  );
}

function CanvasNodeSearchPanel({
  nodes,
  onClose,
  onSelect,
}: {
  nodes: CloneNode[];
  onClose: () => void;
  onSelect: (nodeId: string) => void;
}) {
  const [query, setQuery] = useState("");
  const inputRef = useRef<HTMLInputElement | null>(null);
  useEffect(() => { inputRef.current?.focus(); }, []);
  const keyword = query.trim().toLowerCase();
  const matched = keyword
    ? nodes.filter((node) => (node.title || "").toLowerCase().includes(keyword)).slice(0, 30)
    : nodes.slice(0, 30);
  return (
    <section
      className="fixed left-1/2 top-[96px] z-[300] w-[min(92vw,560px)] -translate-x-1/2 overflow-hidden rounded-2xl border border-white/10 bg-[#262626]/97 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-lg"
      data-canvas-overlay="true"
    >
      <div className="flex items-center gap-2 border-white/8 border-b px-4 py-3">
        <Search className="h-4 w-4 shrink-0 text-white/45" />
        <input
          autoFocus
          className="h-8 w-full bg-transparent text-[14px] text-white/90 outline-none placeholder:text-white/32"
          onChange={(event) => setQuery(event.target.value)}
          onKeyDown={(event) => {
            if (event.key === "Escape") { event.preventDefault(); onClose(); }
            if (event.key === "Enter" && matched.length > 0) { event.preventDefault(); onSelect(matched[0].id); }
          }}
          placeholder="搜索画布节点名称（⌘F）"
          value={query}
        />
        <button
          aria-label="关闭节点搜索"
          className="flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-white/44 hover:bg-white/8"
          onClick={onClose}
          type="button"
        >
          <X className="h-4 w-4" />
        </button>
      </div>
      <div className="max-h-[46vh] overflow-y-auto p-2">
        {matched.length === 0 ? (
          <p className="px-3 py-6 text-center text-[13px] text-white/40">没有匹配的节点</p>
        ) : (
          matched.map((node) => (
            <button
              className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left text-[13px] text-white/82 transition hover:bg-white/8"
              key={node.id}
              onClick={() => onSelect(node.id)}
              type="button"
            >
              <span className="w-[64px] shrink-0 truncate text-[11px] text-white/38">
                {node.inputType === "video" ? "视频" : node.inputType === "audio" ? "音频" : node.inputType === "text" ? "文本" : node.kind === "script" ? "脚本" : "图片"}
              </span>
              <span className="min-w-0 flex-1 truncate">{node.title}</span>
            </button>
          ))
        )}
      </div>
    </section>
  );
}

function ShortcutPanel({ onClose }: { onClose: () => void }) {
  const groups = [
    ["创作", [["成组", "G"], ["解组", "⌘ + ⇧ + G"], ["连线模式", "L"], ["复制节点", "⌘ + D"], ["生成所选节点", "⌘ + Enter"], ["新建节点", "Tab"], ["节点搜索", "⌘ + F"]]],
    ["缩放", [["放大", "⌘ + +"], ["缩小", "⌘ + -"], ["适应画布", "⌘ + 0"]]],
    ["移动画布", [["临时平移", "Space + 拖动"], ["拖动画布工具", "V"], ["抓手平移", "H"], ["整理画布", "Option + ⇧ + F"]]],
    ["其他", [["撤销", "⌘ + Z"], ["重做", "⌘ + ⇧ + Z"], ["保存画布", "Ctrl/⌘ + S"], ["删除所选", "Del / Backspace"], ["退出/取消选择", "Escape"]]],
  ] as const;

  return (
    <section
      className="fixed left-1/2 top-[300px] z-[300] h-[436px] max-h-[80vh] w-[min(100%,calc(100vw-1.5rem))] max-w-[1152px] -translate-x-1/2 overflow-y-auto rounded-2xl border border-white/10 bg-[#444444]/95 p-6 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-lg"
      data-canvas-overlay="true"
    >
      <button
        aria-label="关闭快捷键面板"
        className="absolute right-[11px] top-3 flex h-7 w-7 shrink-0 items-center justify-center rounded-lg text-white/44 hover:bg-white/8"
        onClick={onClose}
        type="button"
      >
        <X className="h-4 w-4" />
      </button>
      <div className="grid grid-cols-4 gap-x-[49px]">
        {groups.map(([title, rows]) => (
          <div className="w-[239px]" key={title}>
            <h3 className="text-sm font-medium text-[#09CAF5]">{title}</h3>
            <div className="mt-[19px] grid gap-3">
              {rows.map(([label, key]) => (
                <div className="flex h-7 w-full items-center justify-between gap-4" key={label}>
                  <span className="min-w-0 flex-1 pr-2 text-left text-sm leading-snug text-white/50">{label}</span>
                  {key ? (
                    <span className="flex h-7 min-w-7 shrink-0 items-center justify-center px-1 font-sans text-sm text-white/72">{key}</span>
                  ) : null}
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function TutorialHelpPanel({ onClose }: { onClose: () => void }) {
  const [activeItem, setActiveItem] = useState<string | null>(null);
  const items = [
    { href: VIDEO_CANVAS_TUTORIAL_URL, label: "使用教程" },
    { label: "联系客服" },
    { label: "联系销售" },
    { label: "关注公众号" },
  ];
  return (
    <section
      className="fixed bottom-[69px] left-[calc(50%+109px)] z-[300] flex h-[154px] w-[104px] flex-col rounded-xl bg-[#262626] px-1 py-[5px] text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)]"
      data-canvas-overlay="true"
    >
      {items.map((item) => {
        const active = activeItem === item.label;
        return (
          <button
            className={cn(
              "h-9 w-[95px] whitespace-nowrap rounded-lg px-3 py-2 text-left text-[13px] text-white/74 transition-colors hover:bg-white/8",
              active && "bg-white/10 text-white"
            )}
            key={item.label}
            onClick={() => {
              setActiveItem(item.label);
              if ("href" in item && item.href) {
                window.open(item.href, "_blank", "noopener,noreferrer");
              }
            }}
            type="button"
          >
            {item.label}
          </button>
        );
      })}
    </section>
  );
}

function RoleLibraryPanel({
  onApplyRole,
  onClose,
  roles,
}: {
  onApplyRole: (role: RoleLibraryItem) => void;
  onClose: () => void;
  roles: RoleLibraryItem[];
}) {
  const [filterMenuOpen, setFilterMenuOpen] = useState(false);
  const [recentOnly, setRecentOnly] = useState(false);
  const [selectedFilters, setSelectedFilters] = useState<Partial<Record<RoleLibraryFilterKey, string>>>({});
  const [selectedRoleName, setSelectedRoleName] = useState(roles[0]?.name || "");
  const filteredRoles = useMemo(
    () =>
      recentOnly
        ? []
        : roles.filter((role) =>
            ROLE_LIBRARY_FILTER_GROUPS.every((group) => !selectedFilters[group.key] || role.filters[group.key] === selectedFilters[group.key])
          ),
    [recentOnly, roles, selectedFilters]
  );
  const selectedRole = (roles.find((role) => role.name === selectedRoleName) || filteredRoles[0] || roles[0])!;
  const selectedTags = selectedRole.tags.split(" ").filter(Boolean);
  const previewImages = [
    { className: "w-[191px]", label: "角色立绘", url: selectedRole.images.full },
    { className: "w-[191px]", label: "脸部近景", url: selectedRole.images.face },
    { className: "w-[191px]", label: "表情参考", url: selectedRole.images.expression },
    { className: "w-[453px]", label: "三视图", url: selectedRole.images.threeView },
  ];

  useEffect(() => {
    if (recentOnly || filteredRoles.length === 0) return;
    if (!filteredRoles.some((role) => role.name === selectedRoleName)) {
      setSelectedRoleName(filteredRoles[0].name);
    }
  }, [filteredRoles, recentOnly, selectedRoleName]);

  const toggleFilter = (key: RoleLibraryFilterKey, value: string) => {
    setSelectedFilters((current) => {
      const next = { ...current };
      if (next[key] === value) {
        delete next[key];
      } else {
        next[key] = value;
      }
      return next;
    });
  };

  const selectRelativeRole = (direction: -1 | 1) => {
    if (filteredRoles.length === 0) return;
    const currentIndex = Math.max(
      0,
      filteredRoles.findIndex((role) => role.name === selectedRole.name)
    );
    const nextIndex = (currentIndex + direction + filteredRoles.length) % filteredRoles.length;
    setSelectedRoleName(filteredRoles[nextIndex].name);
  };

  return (
    <section
      className="fixed left-1/2 top-1/2 z-50 flex h-[685px] w-[1376px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-2xl border border-[#303030] bg-[#222] text-[#f7f7f7] shadow-[0_28px_90px_rgba(0,0,0,0.54)]"
      data-canvas-overlay="true"
    >
      <div className="flex h-14 shrink-0 items-center justify-between px-4">
        <h3 className="text-[16px] font-semibold text-[#f5f5f5]">角色库</h3>
        <button
          aria-label="关闭角色库"
          className="flex h-8 w-8 items-center justify-center rounded-[8px] text-white/58 transition-colors hover:bg-white/8 hover:text-white"
          onClick={onClose}
          type="button"
        >
          <X className="h-4 w-4" />
        </button>
      </div>

      <div className="flex h-[391px] shrink-0 flex-col px-4 pb-4">
        <div className="flex min-h-0 flex-1 flex-col gap-4 overflow-hidden rounded-xl bg-white/[0.05] p-4">
          <div className="flex h-6 shrink-0 items-center gap-2">
            <span className="shrink-0 text-[14px] font-semibold text-[#f5f5f5]">{selectedRole.name}</span>
            {selectedTags.map((tag) => (
              <span className="rounded-md bg-white/10 px-2 py-1 text-[12px] leading-none text-[#c6c6c6]" key={tag}>
                {tag}
              </span>
            ))}
          </div>
          <div className="flex h-[255px] shrink-0 justify-center gap-2 overflow-hidden">
            {previewImages.map((image) => (
              <div className={cn("h-[255px] overflow-hidden rounded-lg bg-white", image.className)} key={image.label}>
                <img alt={`${selectedRole.name} ${image.label}`} className="h-full w-full object-contain" src={image.url} />
              </div>
            ))}
          </div>
          <div className="mt-auto flex h-8 shrink-0 items-center justify-between gap-4">
            <p className="min-w-0 truncate text-[12px] text-[#9a9a9a]">{selectedRole.description}</p>
            <button
              className="flex h-8 shrink-0 items-center gap-1 rounded-lg bg-white px-3 text-[13px] text-[#25272a] transition-colors hover:bg-[#fafafa]"
              onClick={() => onApplyRole(selectedRole)}
              type="button"
            >
              <Plus className="h-4 w-4" />
              应用至画布
            </button>
          </div>
        </div>
      </div>

      <div className="relative flex h-[236px] shrink-0 flex-col gap-4 border-t border-[#303030] pb-4">
        <div className="mt-[17px] flex h-7 shrink-0 items-center justify-between px-4">
          <div className="relative">
            <button
              className={cn(
                "flex h-7 shrink-0 items-center gap-1 rounded-lg border-[0.5px] border-white/12 px-2 text-[13px] text-[#f5f5f5] transition-colors hover:bg-white/25",
                filterMenuOpen ? "bg-white/[0.14]" : "bg-white/10"
              )}
              onClick={() => setFilterMenuOpen((open) => !open)}
              type="button"
            >
              角色筛选
              <ChevronDown className="h-3.5 w-3.5" />
            </button>
          </div>
          <button
            aria-checked={recentOnly}
            className="flex h-7 cursor-pointer items-center gap-2 rounded-md px-2 py-2 text-[#f7f7f7]"
            onClick={() => setRecentOnly((current) => !current)}
            role="checkbox"
            type="button"
          >
            <span
              className={cn(
                "flex h-4 w-4 items-center justify-center rounded border border-white/20",
                recentOnly ? "bg-white text-[#25272a]" : "bg-transparent"
              )}
            >
              {recentOnly ? <Check className="h-3 w-3" strokeWidth={2.2} /> : null}
            </span>
            <span className="text-[12px] leading-normal text-[#f5f5f5]">最近使用</span>
          </button>
        </div>

        {filterMenuOpen ? (
          <div
            className="tiny-scrollbar fixed z-[61] max-h-[420px] w-[328px] overflow-y-auto rounded-2xl bg-[#262626] px-2 pb-2 shadow-[0_18px_48px_rgba(0,0,0,0.42)]"
            style={{ left: "calc(50% - 671px)", top: "calc(50% - 305px)" }}
          >
            <div className="flex h-10 items-center justify-between px-1 pt-2">
              <span className="text-[14px] font-medium text-[#f5f5f5]">角色筛选</span>
              <button
                className="flex h-6 items-center gap-1 rounded-lg px-2 text-[13px] text-[#f7f7f7] transition-colors hover:bg-white/10"
                onClick={() => setSelectedFilters({})}
                type="button"
              >
                清空筛选
              </button>
            </div>
            <div className="flex flex-col gap-1 px-1 pb-2">
              {ROLE_LIBRARY_FILTER_GROUPS.map((group) => (
                <div className="flex flex-col gap-1" key={group.key}>
                  <span className="py-1 text-[13px] text-[#a8a8a8]">{group.label}</span>
                  <div className="flex flex-wrap gap-2">
                    {group.options.map((option) => {
                      const selected = selectedFilters[group.key] === option;
                      return (
                        <button
                          className={cn(
                            "relative flex h-7 w-[57px] items-center justify-center rounded-[8px] px-2 text-[12px] text-[#f7f7f7] transition-colors",
                            selected ? "bg-[#696969] text-white" : "bg-white/10 hover:bg-white/16"
                          )}
                          key={option}
                          onClick={() => toggleFilter(group.key, option)}
                          type="button"
                        >
                          {option}
                        </button>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          </div>
        ) : null}

        <div className="relative min-h-0 flex-1">
          {filteredRoles.length === 0 ? (
            <div className="flex h-[159px] items-center justify-center text-[13px] text-[#9a9a9a]">无最近使用的角色</div>
          ) : (
            <div className="flex h-[159px] w-full items-center">
              <button
                aria-label="prev"
                className="ml-4 flex h-7 w-7 shrink-0 items-center justify-center self-center rounded-lg border border-white/10 text-[#f5f5f5] transition-colors hover:bg-white/10"
                onClick={() => selectRelativeRole(-1)}
                type="button"
              >
                ‹
              </button>
              <div className="relative min-w-0 flex-1 overflow-x-hidden">
                <div className="scrollbar-hide flex h-full items-start gap-[15px] overflow-x-auto px-3">
                  {filteredRoles.map((role) => {
                    const selected = selectedRole.name === role.name;
                    const cardWidthClass = role.name === "清冷千金/白切黑女主" ? "w-[116px]" : "w-[104px]";
                    return (
                      <button
                        className={cn(
                          "flex h-[159px] shrink-0 flex-col items-center rounded-[10px] transition-colors",
                          cardWidthClass,
                          selected ? "bg-white/[0.04]" : "bg-transparent hover:bg-white/[0.03]"
                        )}
                        key={role.name}
                        onClick={() => setSelectedRoleName(role.name)}
                        type="button"
                      >
                        <span className="mt-[2.5px] block h-[133px] w-[99px] overflow-hidden rounded-lg bg-white">
                          <img alt={role.name} className="h-full w-full object-cover" src={role.images.full} />
                        </span>
                        <span
                          className={cn(
                            "mt-[4px] w-full truncate text-center text-[12px] leading-[17px]",
                            selected ? "font-medium text-[#f5f5f5]" : "font-normal text-[#5f5f5f]"
                          )}
                        >
                          {role.name}
                        </span>
                      </button>
                    );
                  })}
                </div>
              </div>
              <button
                aria-label="next"
                className="mr-4 flex h-7 w-7 shrink-0 items-center justify-center self-center rounded-lg border border-white/10 text-[#f5f5f5] transition-colors hover:bg-white/10"
                onClick={() => selectRelativeRole(1)}
                type="button"
              >
                ›
              </button>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function WorkflowPanel({
  groupTools,
  onAdd,
  onClose,
  workflows = [],
}: {
  groupTools: ReactNode;
  onAdd: (workflow: WorkflowPreset, index: number) => void;
  onClose: () => void;
  workflows?: WorkflowPreset[];
}) {
  const serverWorkflowTemplates = useMemo<ToolboxTemplatePreset[]>(
    () =>
      workflows.map((workflow, index) => ({
        accent: "linear-gradient(135deg,#dfe8ff,#8997ff)",
        author: "自定义工具箱",
        badge: "自定义",
        category: "全部",
        cover: workflow.cover,
        description: workflow.description || "自定义工作流预设",
        duration: "5s",
        id: workflow.id ?? `server-${index}`,
        name: workflow.name || workflow.title || "未命名预设",
        steps: ["素材", "配置", "生成", "视频"],
        templateKey: workflow.uuid || String(workflow.id ?? `server-${index}`),
        usageCount: "本地",
        uuid: workflow.uuid,
      })),
    [workflows]
  );
  const allTemplates = useMemo<ToolboxTemplatePreset[]>(
    () => [...TOOLBOX_TEMPLATE_PRESETS, ...serverWorkflowTemplates],
    [serverWorkflowTemplates]
  );
  const [scope,setScope]=useState("all");
  const [category,setCategory]=useState("全部");
  const visibleTemplates=(scope==="mine"?serverWorkflowTemplates:allTemplates).filter(template=>category==="全部"||template.category===category);
  const formatTemplateName = (workflow: ToolboxTemplatePreset) => {
    const name = String(workflow.name || workflow.title || "未命名预设");
    return name.startsWith("【预设】") ? name : `【预设】${name}`;
  };

  return (
    <section
      className="fixed bottom-[69px] left-1/2 z-20 flex h-[460px] w-[480px] -translate-x-1/2 flex-col overflow-hidden rounded-xl border-[0.5px] border-[#363636] bg-[#262626] text-[#f7f7f7]"
      data-canvas-overlay="true"
    >
      <div className="flex h-10 shrink-0 items-center justify-between px-4 pt-3">
        <div className="flex items-center gap-2">
          <div className="flex items-center gap-1">
            <button
              className="cursor-pointer rounded-md border-none bg-transparent py-1 pr-2 pl-0 text-sm font-medium text-white transition-colors"
              onClick={()=>setScope(value=>value==="mine"?"all":"mine")}
              type="button"
            >
              {scope==="mine"?"我的工具箱":"全部工具箱"}
            </button>
            <button
              aria-label="工具箱模板说明"
              className="-ml-1.5 flex size-4 cursor-help items-center justify-center rounded-full border-none bg-transparent p-0 text-white/70 opacity-50 transition-opacity hover:opacity-80"
              onClick={() => toast.info("工具箱使用示例参考图和待生成节点；生成需要另行提交。")}
              type="button"
            >
              <HelpCircle className="h-3.5 w-3.5" />
            </button>
          </div>
          <select aria-label="工具箱分类" className="bg-[#262626] text-sm" value={category} onChange={event=>setCategory(event.target.value)}>{TOOLBOX_TEMPLATE_CATEGORIES.map(item=><option key={item}>{item}</option>)}</select>
        </div>
        <button
          className="flex size-6 cursor-pointer items-center justify-center rounded-md text-white/50 opacity-50 transition-colors hover:bg-white/10 hover:opacity-100"
          onClick={onClose}
          type="button"
        >
          <X className="h-4 w-4" strokeWidth={1.8} />
        </button>
      </div>
      <div className="mt-3 h-px shrink-0 bg-[#363636]" />
      <div className="tiny-scrollbar min-h-0 flex-1 overflow-y-auto p-4">
        <details className="mb-4 rounded-lg border border-white/10 bg-white/[0.03] p-3 text-[12px]"><summary className="cursor-pointer">我的编组工具箱</summary><div className="mt-2">{groupTools}</div></details>
        <div className="grid grid-cols-3 gap-x-3 gap-y-3">
          {visibleTemplates.map((workflow, index) => (
            <div
              className="group flex min-w-0 cursor-grab flex-col gap-1 active:cursor-grabbing"
              key={`${workflow.templateKey}-${index}`}
            >
              <div className="relative aspect-square w-full overflow-hidden rounded-lg bg-[#2a2a2a]">
                {workflow.cover ? (
                  <img
                    alt=""
                    className="size-full object-cover"
                    draggable={false}
                    onDragStart={preventNativeImageDrag}
                    src={workflow.cover}
                  />
                ) : (
                  <div className="flex h-full items-center justify-center bg-white/6 text-white/24">
                    <WorkflowGlyph />
                  </div>
                )}
                <div className="absolute inset-0 flex items-center justify-center rounded-lg bg-black/65 opacity-0 transition-opacity duration-150 group-hover:opacity-100">
                  <button
                    className="flex h-6 cursor-pointer items-center justify-center rounded-lg border-none bg-white/15 px-3 text-[13px] font-medium text-white shadow-sm backdrop-blur-[2px] transition-colors hover:bg-white/25"
                    onClick={() => {
                      const workflowIndex = allTemplates.findIndex((item) => item.templateKey === workflow.templateKey);
                      onAdd(workflow, workflowIndex >= 0 ? workflowIndex : index);
                    }}
                    type="button"
                  >
                    使用
                  </button>
                </div>
              </div>
              <div className="min-w-0 text-[13px] leading-[16.5px] text-white/80">
                <div className="line-clamp-2 min-h-[16.5px]">{formatTemplateName(workflow)}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function InspectorPanel({
  modelOptions,
  node,
  referenceCount = 0,
  onAddReference,
  onChangeProperty,
  onClose,
  onGenerate,
}: {
  node: CloneNode;
  modelOptions: CanvasModelOption[];
  referenceCount?: number;
  onAddReference?: (node: CloneNode) => void;
  onChangeProperty: (key: string, value: unknown) => void;
  onClose: () => void;
  onGenerate?: (node: CloneNode) => void;
}) {
  const tool = node.tool;
  const type = getToolType(tool);
  const properties = getToolProperties(tool);
  const showUpload = Boolean(tool && requiresMedia(tool));
  const inspectorTitle = getInspectorTitle(node);
  const primaryTab = node.inputType || type || node.kind;
  const route = getDraftString(node, "route") || getToolRoute(tool);
  const selectableRoute = ["canvas-generate-image", "canvas-generate-video", "canvas-workflow-analyze"].includes(route);
  const modelKind: CanvasModelKind = route === "canvas-generate-video" ? "video" : route === "canvas-workflow-analyze" ? "multimodal" : getToolModes(tool).includes("image-edit") ? "image-edit" : "image";
  const compatibleModels = filterCanvasModels(modelOptions, modelKind);
  const selectedModel = getDraftString(node, "specifiedModel") || getDraftString(node, "model") || "auto";
  const unavailableSelection = selectedModel !== "auto" && !compatibleModels.some(model => model.id === selectedModel || model.modelId === selectedModel);
  const isGenerating = getDraftString(node, "generationStatus") === "pending";
  const statusLabel = route === "local" ? "本地处理" : isGenerating ? "生成中" : "已接入";
  return (
    <aside
      className="absolute right-4 top-[124px] z-50 w-[476px] overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] text-white shadow-[0_24px_80px_rgba(0,0,0,0.45)]"
      data-canvas-overlay="true"
    >
      <div className="flex items-start justify-between border-white/8 border-b px-6 py-5">
        <div>
          <div className="font-semibold text-[18px]">{inspectorTitle}</div>
          <div className="mt-2 flex flex-wrap gap-2">
            <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/58">
              {primaryTab}
            </span>
            <span className="rounded-[6px] bg-[#1f4d38] px-2 py-1 text-[12px] text-[#8ce0b5]">{statusLabel}</span>
            {tool?.vendor ? <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/48">{tool.vendor}</span> : null}
            {getToolModes(tool).map((mode) => (
              <span className="rounded-[6px] bg-white/8 px-2 py-1 text-[12px] text-white/48" key={mode}>
                {mode}
              </span>
            ))}
          </div>
        </div>
        <button className="rounded-[8px] p-2 text-white/50 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
          <X className="h-4 w-4" />
        </button>
      </div>
      <div className="space-y-4 p-6">
        {showUpload ? (
          <button
            className="flex h-[74px] w-full items-center justify-center rounded-[8px] border border-white/10 bg-white/5 text-[14px] text-white/52 hover:bg-white/8 hover:text-white"
            onClick={() => (onAddReference ? onAddReference(node) : toast.info("上传/素材选择接口待接入。"))}
            type="button"
          >
            <Plus className="mr-2 h-4 w-4" />
            {referenceCount > 0 ? `继续添加素材 · 已连入 ${referenceCount}` : "添加素材"}
          </button>
        ) : null}
        {properties.length > 0 ? (
          <div className="space-y-4">
            {properties.filter(([key]) => key !== "specifiedModel" && key !== "model").map(([key, config]) => (
              <PropertyField
                config={config}
                key={key}
                propertyKey={key}
                value={node.draftValues?.[key]}
                onChange={(value) => onChangeProperty(key, value)}
              />
            ))}
          </div>
        ) : (
          <div className="rounded-[8px] border border-white/10 bg-white/5 px-5 py-6 text-[14px] text-white/42">
            此模块未暴露可配置参数。
          </div>
        )}
        {selectableRoute ? <label className="block">
          <span className="mb-2 block text-[13px] text-white/72">模型</span>
          <select aria-label="节点模型" className="h-10 w-full rounded-lg border border-white/10 bg-[#262626] px-3 text-[13px] outline-none" value={selectedModel} onChange={event => onChangeProperty("specifiedModel", event.target.value)}>
            <option value="auto">自动匹配兼容模型</option>
            {unavailableSelection ? <option value={selectedModel} disabled>原模型不可用，请重新选择</option> : null}
            {compatibleModels.map(model => <option key={model.id} value={model.id}>{model.displayName || model.modelId}</option>)}
          </select>
          {!compatibleModels.length ? <p role="status" className="mt-2 text-xs text-amber-200/80">暂无匹配模型，请先在模型设置中启用。</p> : null}
        </label> : <p className="text-xs text-white/50">{route === "local" ? "此功能由本地处理，无需选择模型。" : "此功能使用对应的专用处理服务。"}</p>}
        <button
          className="h-[64px] w-full rounded-[8px] bg-white font-bold text-[16px] text-black hover:bg-white/90 disabled:cursor-not-allowed disabled:bg-white/35"
          disabled={isGenerating || (selectableRoute && (!compatibleModels.length || unavailableSelection))}
          onClick={() => (onGenerate ? onGenerate(node) : toast.info("生成接口待接入。"))}
          type="button"
        >
          {isGenerating ? "生成中..." : "生成"}
        </button>
      </div>
    </aside>
  );
}

function PropertyField({
  config,
  onChange,
  propertyKey,
  value,
}: {
  config: unknown;
  onChange: (value: unknown) => void;
  propertyKey: string;
  value: unknown;
}) {
  const label = getPropertyLabel(propertyKey, config);
  const options = getOptions(config);
  const current = String(value ?? getDefaultValue(propertyKey, config));
  const component = config && typeof config === "object" && "component" in config ? String((config as any).component || "") : "";

  if (propertyKey === "prompt") {
    return (
      <label className="block">
        <span className="mb-2 block text-[13px] text-white/72">{label}</span>
        <textarea
          className="min-h-[96px] w-full rounded-[8px] border border-white/10 bg-black/18 px-3 py-2 text-[13px] text-white outline-none placeholder:text-white/28 focus:border-white/24"
          onChange={(event) => onChange(event.target.value)}
          placeholder="请输入提示词"
          value={String(value ?? "")}
        />
      </label>
    );
  }

  if (component === "switch" || typeof config === "boolean") {
    const checked = current === "1" || current === "true";
    return <ToggleRow checked={checked} label={label} onChange={() => onChange(checked ? "0" : "1")} />;
  }

  if (options.length > 0) {
    if (options.length > 8) {
      return (
        <label className="block">
          <span className="mb-2 block text-[13px] text-white/72">{label}</span>
          <select
            className="h-10 w-full rounded-[8px] border border-white/10 bg-black/18 px-3 text-[13px] text-white outline-none"
            onChange={(event) => onChange(event.target.value)}
            value={current}
          >
            {options.map((option) => (
              <option className="bg-[#202020] text-white" key={getOptionValue(option)} value={getOptionValue(option)}>
                {getOptionLabel(option)}
              </option>
            ))}
          </select>
        </label>
      );
    }
    return (
      <div>
        <div className="mb-2 text-[13px] text-white/72">{label}</div>
        <div className="flex flex-wrap gap-2">
          {options.map((option) => {
            const optionValue = getOptionValue(option);
            return (
              <button
                className={cn(
                  "rounded-[8px] border border-white/8 px-3 py-1.5 text-[12px] text-white/62 hover:bg-white/8 hover:text-white",
                  current === optionValue && "border-white/20 bg-white text-black hover:bg-white hover:text-black"
                )}
                key={optionValue}
                onClick={() => onChange(optionValue)}
                type="button"
              >
                {getOptionLabel(option)}
              </button>
            );
          })}
        </div>
      </div>
    );
  }

  if (config && typeof config === "object" && "maxCount" in config) {
    const maxCount = Math.max(1, Math.min(24, Number((config as {maxCount:unknown}).maxCount) || 1));
    const selectedCount = Math.max(1, Math.min(maxCount, Number(value) || 1));
    return (
      <div>
        <div className="mb-2 text-[13px] text-white/72">{label}</div>
        <select aria-label={label} className="h-10 w-full rounded-[8px] border border-white/10 bg-[#292929] px-3 text-[13px] text-white"
          value={selectedCount} onChange={event=>onChange(Number(event.target.value))}>
          {Array.from({length:maxCount},(_,index)=><option key={index+1} value={index+1}>{index+1}</option>)}
        </select>
      </div>
    );
  }

  return (
    <label className="block">
      <span className="mb-2 block text-[13px] text-white/72">{label}</span>
      <input
        className="h-10 w-full rounded-[8px] border border-white/10 bg-black/18 px-3 text-[13px] text-white outline-none"
        onChange={(event) => onChange(event.target.value)}
        value={String(value ?? "")}
      />
    </label>
  );
}

function ToggleRow({
  checked,
  label,
  onChange,
}: {
  checked: boolean;
  label: string;
  onChange: () => void;
}) {
  return (
    <div className="flex items-center justify-between rounded-[8px] border border-white/8 bg-white/5 px-4 py-3">
      <span className="text-[13px] text-white/76">{label}</span>
      <button className={cn("relative h-6 w-11 rounded-full transition", checked ? "bg-white" : "bg-white/18")} onClick={onChange} type="button">
        <span className={cn("absolute top-1 h-4 w-4 rounded-full transition", checked ? "left-6 bg-black" : "left-1 bg-white")} />
      </button>
    </div>
  );
}


function SkillsAccessModal({
  onClose,
  siteName,
}: {
  onClose: () => void;
  siteName: string;
}) {
  const skillsName = `${siteName} Skills`;
  type AccessKeyItem = {
    id: string;
    name: string;
    tokenPrefix: string;
    scopes: string[];
    lastUsedAt: string | null;
    expiresAt: string | null;
    revokedAt: string | null;
    createdAt: string;
  };
  const [accessKeys, setAccessKeys] = useState<AccessKeyItem[]>([]);
  const [createdToken, setCreatedToken] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [isCreating, setIsCreating] = useState(false);
  const [revokingId, setRevokingId] = useState<string | null>(null);

  const loadAccessKeys = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch("/api/user/access-keys", { cache: "no-store" });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok || !payload?.success) {
        throw new Error(payload?.error || "加载 Access Key 失败");
      }
      setAccessKeys(Array.isArray(payload.data) ? payload.data : []);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "加载 Access Key 失败");
    } finally {
      setIsLoading(false);
    }
  }, []);

  useEffect(() => {
    void loadAccessKeys();
  }, [loadAccessKeys]);

  const handleCreateAccessKey = useCallback(async () => {
    setIsCreating(true);
    try {
      const response = await fetch("/api/user/access-keys", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          name: "OpenClaw",
          scopes: ["canvas:read", "canvas:write"],
          expiresInDays: 90,
        }),
      });
      const payload = await response.json().catch(() => ({}));
      if (!response.ok || !payload?.success || !payload?.data?.token) {
        throw new Error(payload?.error || "创建 Access Key 失败");
      }
      setCreatedToken(String(payload.data.token));
      toast.success("Access Key 已创建，请立即复制并妥善保存");
      await loadAccessKeys();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "创建 Access Key 失败");
    } finally {
      setIsCreating(false);
    }
  }, [loadAccessKeys]);

  const handleRevokeAccessKey = useCallback(
    async (accessKeyId: string) => {
      if (!window.confirm("撤销后使用该 Key 的 OpenClaw 将立即失去访问权限，确定继续吗？")) {
        return;
      }
      setRevokingId(accessKeyId);
      try {
        const response = await fetch(`/api/user/access-keys/${accessKeyId}`, {
          method: "DELETE",
        });
        const payload = await response.json().catch(() => ({}));
        if (!response.ok || !payload?.success) {
          throw new Error(payload?.error || "撤销 Access Key 失败");
        }
        setCreatedToken("");
        toast.success("Access Key 已撤销");
        await loadAccessKeys();
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "撤销 Access Key 失败");
      } finally {
        setRevokingId(null);
      }
    },
    [loadAccessKeys]
  );

  const formatDate = (value: string | null) => {
    if (!value) return "-";
    const date = new Date(value);
    return Number.isNaN(date.getTime()) ? "-" : date.toLocaleString("zh-CN");
  };

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/58" data-canvas-overlay="true">
      <div className="w-[600px] max-w-[calc(100vw-32px)] rounded-[8px] border border-white/10 bg-[#262626] px-4 py-5 text-white shadow-[0_30px_100px_rgba(0,0,0,0.58)]">
        <div className="flex items-start justify-between gap-4">
          <div className="min-w-0">
            <h2 className="text-[15px] font-semibold leading-none text-white">我的Access key</h2>
            <div className="mt-5 space-y-2 text-[13px] leading-none text-white/76">
              <p>· Access key 仅用于 {skillsName} 的调用授权使用，一旦传播给他人，有账号泄露的风险，请谨慎保管!</p>
              <p>· {skillsName} 可授权 Agent 读取和操作画布节点；视频生成仍需通过画布任务执行。</p>
              <p>
                · 安装使用请戳
                <button
                  className="ml-1 text-[#2f8bff] underline-offset-2 hover:underline"
                  onClick={() => window.open("/tvstar/plugin", "_blank", "noopener,noreferrer")}
                  type="button"
                >
                  接口文档
                </button>
              </p>
            </div>
          </div>
          <button className="rounded-[8px] p-2 text-white/54 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
            <X className="h-5 w-5" />
          </button>
        </div>

        <div className="mt-6 flex justify-end">
          <button
            className="h-8 rounded-[8px] bg-white px-4 text-[12px] font-semibold text-black hover:bg-white/90"
            disabled={isCreating}
            onClick={() => void handleCreateAccessKey()}
            type="button"
          >
            {isCreating ? "创建中..." : "创建新 Access Key"}
          </button>
        </div>

        {createdToken ? (
          <div className="mt-4 rounded-[8px] border border-[#2f8bff]/40 bg-[#2f8bff]/10 p-3">
            <div className="text-[12px] font-semibold text-white">仅显示一次，请立即复制</div>
            <div className="mt-2 flex items-center gap-2">
              <code className="min-w-0 flex-1 overflow-x-auto rounded bg-black/30 px-2 py-2 text-[11px] text-white/80">
                {createdToken}
              </code>
              <button
                className="flex h-8 shrink-0 items-center gap-1 rounded-[6px] bg-white px-2 text-[11px] font-medium text-black"
                onClick={() => {
                  void navigator.clipboard?.writeText(createdToken);
                  toast.success("Access Key 已复制");
                }}
                type="button"
              >
                <Copy className="h-3.5 w-3.5" />
                复制
              </button>
            </div>
          </div>
        ) : null}

        <div className="mt-4 overflow-hidden rounded-[8px] border border-white/8">
          <div className="grid h-11 grid-cols-[145px_1fr_130px_54px] bg-white/16 text-[12px] text-white/86">
            <div className="flex items-center px-3">名称 / 创建日期</div>
            <div className="flex items-center px-3">Access Key</div>
            <div className="flex items-center px-3">有效期</div>
            <div />
          </div>
          {isLoading ? (
            <div className="flex h-[66px] items-center justify-center text-white/45">
              <Loader2 className="h-4 w-4 animate-spin" />
            </div>
          ) : accessKeys.length === 0 ? (
            <div className="flex h-[66px] items-center px-4 text-[13px] text-white/45">
              暂无 Access Key
            </div>
          ) : (
            accessKeys.map((item) => {
              const isRevoked = Boolean(item.revokedAt);
              return (
                <div
                  className="grid min-h-[66px] grid-cols-[145px_1fr_130px_54px] border-white/8 border-t text-[11px]"
                  key={item.id}
                >
                  <div className="flex min-w-0 flex-col justify-center px-3">
                    <span className="truncate text-white/80">{item.name}</span>
                    <span className="mt-1 text-white/38">{formatDate(item.createdAt)}</span>
                  </div>
                  <div className="flex min-w-0 items-center px-3 text-white/60">
                    <code className="truncate">{item.tokenPrefix}••••••••</code>
                  </div>
                  <div className="flex flex-col justify-center px-3 text-white/48">
                    <span className={isRevoked ? "text-red-300/80" : undefined}>
                      {isRevoked ? "已撤销" : formatDate(item.expiresAt)}
                    </span>
                    {!isRevoked && item.lastUsedAt ? (
                      <span className="mt-1">使用于 {formatDate(item.lastUsedAt)}</span>
                    ) : null}
                  </div>
                  <div className="flex items-center justify-center">
                    {!isRevoked ? (
                      <button
                        aria-label="撤销 Access Key"
                        className="rounded p-2 text-white/40 hover:bg-red-500/10 hover:text-red-300"
                        disabled={revokingId === item.id}
                        onClick={() => void handleRevokeAccessKey(item.id)}
                        type="button"
                      >
                        {revokingId === item.id ? (
                          <Loader2 className="h-4 w-4 animate-spin" />
                        ) : (
                          <Trash2 className="h-4 w-4" />
                        )}
                      </button>
                    ) : null}
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>
    </div>
  );
}

function SharePopover({
  onClose,
  onCopyLink,
  onPublish,
  siteName,
}: {
  onClose: () => void;
  onCopyLink: () => void;
  onPublish: () => void;
  siteName: string;
}) {
  const showcaseName = getSiteShowcaseName(siteName);

  return (
    <div className="fixed inset-0 z-[70]" data-canvas-overlay="true">
      <button
        aria-label="关闭分享菜单"
        className="absolute inset-0 cursor-default bg-transparent"
        onClick={onClose}
        type="button"
      />
      <div className="fixed right-[312px] top-[66px] z-[75] w-[360px] rounded-[16px] border border-white/10 bg-[#202020]/98 p-2 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-[16px]">
        <div className="flex flex-col gap-2">
          <span className="pl-2 text-sm font-medium text-white/60">发布与分享</span>
          <button
            className="flex cursor-pointer items-center gap-3 rounded-xl p-2 text-left transition-colors hover:bg-white/8"
            onClick={onPublish}
            type="button"
          >
            <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white/10 text-white/80">
              <StoreGlyph />
            </span>
            <span className="flex min-w-0 flex-col gap-1">
              <span className="text-sm font-medium text-white">发布到{siteName}</span>
              <span className="text-xs leading-snug text-white/70">发布你的作品和创作过程，让更多创作者在{showcaseName}看到。</span>
            </span>
          </button>
          <button
            className="flex cursor-pointer items-center gap-3 rounded-xl p-2 text-left transition-colors hover:bg-white/8"
            onClick={onCopyLink}
            type="button"
          >
            <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-white/10 text-white/80">
              <Copy className="h-5 w-5" />
            </span>
            <span className="flex min-w-0 flex-col gap-1">
              <span className="text-sm font-medium text-white">分享链接</span>
              <span className="text-xs leading-snug text-white/70">拥有此链接的人可以查看并复制你的画布。</span>
            </span>
          </button>
        </div>
      </div>
    </div>
  );
}

function formatCurrencyAmount(currency: string, amount: number) {
  if (!Number.isFinite(amount)) return `${currency}0`;

  const normalizedCurrency = String(currency || "").trim() || "¥";
  const hasDecimals = Math.abs(amount - Math.round(amount)) > 0.001;
  const formatted = amount.toLocaleString("zh-CN", {
    minimumFractionDigits: hasDecimals ? 2 : 0,
    maximumFractionDigits: 2,
  });

  if (normalizedCurrency === "¥" || normalizedCurrency.toUpperCase() === "CNY") {
    return `¥${formatted}`;
  }

  return `${normalizedCurrency} ${formatted}`;
}

function formatBillingDate(value: string) {
  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 getBillingStatusLabel(status: "completed" | "pending" | "failed") {
  if (status === "completed") return "完成";
  if (status === "pending") return "处理中";
  return "失败";
}

function getBillingStatusClass(status: "completed" | "pending" | "failed") {
  if (status === "completed") return "border-emerald-400/20 bg-emerald-400/10 text-emerald-200";
  if (status === "pending") return "border-amber-400/20 bg-amber-400/10 text-amber-200";
  return "border-rose-400/20 bg-rose-400/10 text-rose-200";
}

function MemberStoreModal({ onClose }: { onClose: () => void }) {
  const [activeTab, setActiveTab] = useState<MemberStoreTab>("credits");
  const [billingCycle, setBillingCycle] = useState<"monthly" | "annual">("monthly");
  const [creatingPaymentPackageId, setCreatingPaymentPackageId] = useState<string | null>(null);
  const { data: siteSettingsData } = useSWR<VideoCanvasBillingSettings>(
    "/api/site-settings?scope=home",
    fetcher
  );
  const { data: membershipSummary } = useSWR<MembershipSummaryResponse>("/api/user/membership-summary", fetcher);
  const { data: accountCenterData } = useSWR<AccountCenterResponse>("/api/user/account-center", fetcher);

  const credits = Math.max(
    0,
    Number(accountCenterData?.profile?.availablePoints ?? membershipSummary?.summary?.currentCredits ?? 0)
  );
  const membershipPlans = useMemo(
    () =>
      (siteSettingsData?.membershipConfig?.plans || []).filter(
        (plan): plan is MembershipPlan => Boolean(plan && plan.id && plan.name)
      ),
    [siteSettingsData?.membershipConfig?.plans]
  );
  const enabledPointsPackages = useMemo(
    () =>
      (siteSettingsData?.pointsPackages || []).filter(
        (item) => item?.isEnabled !== false && Number(item?.price) > 0 && Number(item?.points) > 0
      ),
    [siteSettingsData?.pointsPackages]
  );
  const billingRecords = useMemo(
    () => (accountCenterData?.billingRecords || []).slice(0, 20),
    [accountCenterData?.billingRecords]
  );
  const currentPlanId =
    String(accountCenterData?.profile?.currentPlanId || membershipSummary?.currentPlanId || "").trim() || null;
  const currentPlanName =
    String(accountCenterData?.profile?.currentPlanName || membershipSummary?.currentPlan?.name || "Free").trim() ||
    "Free";
  const membershipCurrency = String(siteSettingsData?.membershipConfig?.currency || "¥").trim() || "¥";
  const paymentEnabled = siteSettingsData?.dulupayConfig?.enabled === true && enabledPointsPackages.length > 0;

  const tabs: Array<{ id: MemberStoreTab; title: string; desc: string }> = [
    {
      id: "credits",
      title: "积分充值",
      desc: paymentEnabled ? "使用当前站点充值接口" : "在线充值暂未开启",
    },
    {
      id: "vip",
      title: "会员特惠",
      desc: membershipPlans.length > 0 ? "展示当前站点会员配置" : "会员套餐暂未配置",
    },
    {
      id: "history",
      title: "账单记录",
      desc: billingRecords.length > 0 ? "查看最近订单状态" : "查看支付与赠送记录",
    },
  ];

  const handleCreateDulupayOrder = useCallback(
    async (packageId: string) => {
      if (creatingPaymentPackageId) return;

      setCreatingPaymentPackageId(packageId);
      try {
        const response = await fetch("/api/payment/dulupay/create", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            packageId,
            payType: siteSettingsData?.dulupayConfig?.defaultType || "alipay",
          }),
        });
        const result = await response.json().catch(() => ({}));

        if (response.status === 401) {
          throw new Error("请先登录后再充值");
        }

        if (!response.ok || !result?.paymentUrl) {
          throw new Error(result?.error || "创建支付订单失败");
        }

        window.location.href = result.paymentUrl;
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "创建支付订单失败");
      } finally {
        setCreatingPaymentPackageId(null);
      }
    },
    [creatingPaymentPackageId, siteSettingsData?.dulupayConfig?.defaultType]
  );

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/62 backdrop-blur-[3px]" data-canvas-overlay="true">
      <button aria-label="关闭积分中心" className="absolute inset-0 cursor-default" onClick={onClose} type="button" />
      <div className="relative flex max-h-[86dvh] w-[980px] max-w-[calc(100vw-32px)] overflow-hidden rounded-[16px] border border-white/12 bg-[#1f1f1f] text-white shadow-[0_30px_100px_rgba(0,0,0,0.62)]">
        <div className="w-[244px] shrink-0 border-white/8 border-r bg-[#171717] p-5">
          <div className="flex items-center gap-2">
            <span className="flex h-8 w-8 items-center justify-center rounded-[8px] bg-[#05dff6]/12 text-[#05dff6]">
              <StoreGlyph />
            </span>
            <div>
              <div className="text-[18px] font-semibold">会员中心</div>
              <div className="mt-0.5 text-[12px] text-white/42">统一读取站点会员与积分配置</div>
            </div>
          </div>
          <div className="mt-5 rounded-[12px] border border-[#ffc65d]/20 bg-[#2a2418] p-3">
            <div className="text-[12px] text-[#fad6a4]">当前套餐</div>
            <div className="mt-1 text-[22px] font-bold leading-tight">{currentPlanName}</div>
            <div className="mt-3 flex items-baseline gap-2">
              <span className="text-[26px] font-bold text-white">{formatCreditValue(credits)}</span>
              <span className="text-[12px] text-white/58">可用积分</span>
            </div>
            <div className="mt-2 text-[12px] leading-5 text-white/52">
              视频画布与首页共用同一套积分套餐、会员配置和支付接口，避免价格与入口冲突。
            </div>
          </div>
          <div className="mt-4 space-y-1">
            {tabs.map((tab) => (
              <button
                className={cn(
                  "w-full rounded-[10px] px-3 py-2 text-left transition-colors",
                  activeTab === tab.id ? "bg-white text-black" : "text-white/66 hover:bg-white/8 hover:text-white"
                )}
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                type="button"
              >
                <span className="block text-[13px] font-semibold">{tab.title}</span>
                <span className={cn("mt-1 block text-[11px]", activeTab === tab.id ? "text-black/55" : "text-white/36")}>
                  {tab.desc}
                </span>
              </button>
            ))}
          </div>
          <div className="mt-5 rounded-[8px] border border-white/8 bg-white/5 p-3 text-[12px] leading-5 text-white/48">
            会员订阅仍以站点套餐配置为准；目前已优先打通积分充值与账单查看，避免视频画布继续展示与站点不一致的占位价格。
          </div>
        </div>

        <div className="flex min-w-0 flex-1 flex-col">
          <div className="flex h-[72px] items-center justify-between border-white/8 border-b px-5">
            <div>
              <div className="text-[17px] font-semibold">
                {activeTab === "credits" ? "积分充值" : activeTab === "vip" ? "会员特惠" : "账单记录"}
              </div>
              <div className="mt-1 text-[12px] text-white/42">
                {activeTab === "credits"
                  ? paymentEnabled
                    ? "直接调用当前站点的 DuluPay 充值接口，支付完成后积分自动到账。"
                    : "当前未开启在线充值，请先检查站点支付配置。"
                  : activeTab === "vip"
                    ? "会员套餐直接读取站点会员配置，未接通订阅支付前不再显示自定义占位售价。"
                    : "展示当前账号最近的支付与赠送记录，方便排查充值状态。"}
              </div>
            </div>
            <div className="flex items-center gap-2">
              {activeTab === "vip" && siteSettingsData?.membershipConfig?.annualDiscountLabel ? (
                <span className="rounded-full border border-[#ffc65d]/20 bg-[#ffc65d]/10 px-3 py-1 text-[11px] text-[#ffd78f]">
                  {siteSettingsData.membershipConfig.annualDiscountLabel}
                </span>
              ) : null}
              <button className="flex h-8 w-8 items-center justify-center rounded-[8px] text-white/50 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
                <X className="h-4 w-4" />
              </button>
            </div>
          </div>

          <div className="overflow-y-auto p-5">
            {activeTab === "credits" ? (
              <CreditPackGrid
                creatingPaymentPackageId={creatingPaymentPackageId}
                currency={membershipCurrency}
                onCreateOrder={handleCreateDulupayOrder}
                packages={enabledPointsPackages}
                paymentEnabled={siteSettingsData?.dulupayConfig?.enabled === true}
              />
            ) : null}
            {activeTab === "vip" ? (
              <VipPlanGrid
                billingCycle={billingCycle}
                currency={membershipCurrency}
                currentPlanId={currentPlanId}
                onBillingCycleChange={setBillingCycle}
                plans={membershipPlans}
              />
            ) : null}
            {activeTab === "history" ? (
              <BillingHistoryGrid currency={membershipCurrency} records={billingRecords} />
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
}

function VipPlanGrid({
  billingCycle,
  currency,
  currentPlanId,
  onBillingCycleChange,
  plans,
}: {
  billingCycle: "monthly" | "annual";
  currency: string;
  currentPlanId: string | null;
  onBillingCycleChange: (value: "monthly" | "annual") => void;
  plans: MembershipPlan[];
}) {
  if (plans.length === 0) {
    return (
      <EmptyState
        description="当前站点还没有配置会员套餐，视频画布这里不会再展示独立的占位价目表。"
        icon={Sparkles}
        title="暂无会员配置"
      />
    );
  }

  return (
    <div>
      <div className="mb-4 flex items-center gap-2">
        <button
          className={cn(
            "h-8 rounded-full px-3 text-[12px] transition-colors",
            billingCycle === "monthly" ? "bg-white text-black" : "bg-white/6 text-white/62 hover:bg-white/10 hover:text-white"
          )}
          onClick={() => onBillingCycleChange("monthly")}
          type="button"
        >
          月付
        </button>
        <button
          className={cn(
            "h-8 rounded-full px-3 text-[12px] transition-colors",
            billingCycle === "annual" ? "bg-white text-black" : "bg-white/6 text-white/62 hover:bg-white/10 hover:text-white"
          )}
          onClick={() => onBillingCycleChange("annual")}
          type="button"
        >
          年付
        </button>
      </div>
      <div className="grid grid-cols-1 gap-3 lg:grid-cols-2 xl:grid-cols-3">
        {plans.map((plan) => {
          const isCurrent = currentPlanId === plan.id;
          const annualMonthlyPrice =
            plan.annualPrice > 0 ? Number((plan.annualPrice / 12).toFixed(2)) : 0;
          const isFree = plan.monthlyPrice <= 0 && plan.annualPrice <= 0;

          return (
            <div
              className={cn(
                "rounded-[12px] border p-4",
                plan.highlighted
                  ? "border-[#7d87ff] bg-[#23233a] shadow-[0_0_0_1px_rgba(125,135,255,0.3)]"
                  : "border-white/8 bg-white/[0.06]"
              )}
              key={plan.id}
            >
              <div className="flex items-center justify-between">
                <span className="text-[16px] font-semibold">{plan.name}</span>
                {plan.badge ? (
                  <span className="rounded-full bg-[#ffc65d]/16 px-2 py-0.5 text-[10px] font-semibold text-[#ffd78f]">
                    {plan.badge}
                  </span>
                ) : null}
              </div>
              <div className="mt-2 text-[12px] text-white/48">
                每月 {formatCreditValue(plan.monthlyCredits)} 积分
                {plan.dailyFreeCredits > 0 ? ` · 每日赠送 ${formatCreditValue(plan.dailyFreeCredits)} 积分` : ""}
              </div>
              <div className="mt-5">
                {isFree ? (
                  <div className="text-[30px] font-bold text-white">免费</div>
                ) : billingCycle === "monthly" ? (
                  <div className="text-[30px] font-bold text-white">
                    {formatCurrencyAmount(currency, plan.monthlyPrice)}
                    <span className="ml-1 text-[12px] font-normal text-white/42">/月</span>
                  </div>
                ) : (
                  <div>
                    <div className="text-[30px] font-bold text-white">
                      {formatCurrencyAmount(currency, plan.annualPrice)}
                      <span className="ml-1 text-[12px] font-normal text-white/42">/年</span>
                    </div>
                    <div className="mt-1 text-[11px] text-white/42">
                      折合 {formatCurrencyAmount(currency, annualMonthlyPrice)}/月
                    </div>
                  </div>
                )}
              </div>
              <button
                className={cn(
                  "mt-4 h-9 w-full rounded-[8px] text-[13px] font-semibold transition-colors",
                  isCurrent
                    ? "cursor-default bg-white/12 text-white/38"
                    : "bg-white text-black hover:bg-white/90"
                )}
                disabled={isCurrent}
                onClick={() => {
                  if (isCurrent) return;
                  toast.info("会员订阅支付尚未接入，当前请优先使用积分充值。");
                }}
                type="button"
              >
                {isCurrent ? "当前套餐" : isFree ? "默认套餐" : "即将接入"}
              </button>
              <div className="mt-4 space-y-2">
                {(plan.features || []).map((feature) => (
                  <div className="flex items-start gap-2 text-[12px] text-white/58" key={feature}>
                    <span className="mt-[6px] h-1.5 w-1.5 rounded-full bg-[#ffc65d]" />
                    <span>{feature}</span>
                  </div>
                ))}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function CreditPackGrid({
  creatingPaymentPackageId,
  currency,
  onCreateOrder,
  packages,
  paymentEnabled,
}: {
  creatingPaymentPackageId: string | null;
  currency: string;
  onCreateOrder: (packageId: string) => void;
  packages: PointsPackage[];
  paymentEnabled: boolean;
}) {
  if (!paymentEnabled || packages.length === 0) {
    return (
      <EmptyState
        description="当前站点暂未启用在线积分充值，视频画布这里不会再展示独立的占位充值套餐。"
        icon={Plus}
        title="充值未开启"
      />
    );
  }

  return (
    <div>
      <div className="mb-4 rounded-[10px] border border-[#09caf5]/18 bg-[#16242b] px-4 py-3 text-[12px] leading-6 text-white/64">
        支付成功后积分会直接充值到当前账号，视频画布与首页共用同一套积分余额和订单记录。
      </div>
      <div className="grid grid-cols-1 gap-3 md:grid-cols-2 xl:grid-cols-3">
        {packages.map((pkg) => {
          const isPaying = creatingPaymentPackageId === pkg.id;
          return (
            <div
              className="rounded-[12px] border border-white/8 bg-white/[0.06] p-4"
              key={pkg.id}
            >
              <div className="flex items-center justify-between gap-3">
                <span className="text-[16px] font-semibold text-white">{pkg.name}</span>
                <span className="rounded-full bg-[#ff4d4f]/18 px-2 py-0.5 text-[10px] font-semibold text-[#ff8c8c]">
                  {pkg.points >= 5000 ? "推荐" : "灵活补充"}
                </span>
              </div>
              <div className="mt-5 block text-[26px] font-bold">{formatCreditValue(pkg.points)}</div>
              <div className="mt-1 block text-[12px] text-white/45">通用积分</div>
              <div className="mt-5 text-[18px] font-semibold text-[#ffc65d]">
                {formatCurrencyAmount(pkg.currency || currency, pkg.price)}
              </div>
              <button
                className={cn(
                  "mt-4 flex h-9 w-full items-center justify-center rounded-[8px] text-[13px] font-semibold transition-colors",
                  isPaying ? "bg-white/12 text-white/48" : "bg-white text-black hover:bg-white/90"
                )}
                disabled={isPaying}
                onClick={() => onCreateOrder(pkg.id)}
                type="button"
              >
                {isPaying ? (
                  <span className="inline-flex items-center gap-1.5">
                    <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    跳转中
                  </span>
                ) : (
                  "立即充值"
                )}
              </button>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function BillingHistoryGrid({
  currency,
  records,
}: {
  currency: string;
  records: NonNullable<AccountCenterResponse["billingRecords"]>;
}) {
  if (records.length === 0) {
    return (
      <EmptyState
        description="当前账号还没有充值或赠送记录。完成支付后，这里会直接展示同一套站点账单状态。"
        icon={Clock3}
        title="暂无账单记录"
      />
    );
  }

  return (
    <div className="overflow-hidden rounded-[12px] border border-white/8 bg-white/[0.04]">
      <div className="grid grid-cols-[1.4fr_1.2fr_1fr_0.9fr] border-white/8 border-b bg-white/[0.03] px-4 py-3 text-[12px] text-white/42">
        <span>时间</span>
        <span>类型</span>
        <span>金额</span>
        <span>状态</span>
      </div>
      <div className="divide-y divide-white/6">
        {records.map((record) => {
          const isRecharge = record.category === "积分充值";
          const amountLabel = isRecharge
            ? formatCurrencyAmount(currency, Number(record.amount) || 0)
            : `${Number(record.amount) > 0 ? "+" : ""}${Number(record.amount) || 0} 积分`;

          return (
            <div
              className="grid grid-cols-[1.4fr_1.2fr_1fr_0.9fr] items-center px-4 py-3 text-[13px]"
              key={record.id}
            >
              <span className="text-white/50">{formatBillingDate(record.date)}</span>
              <span className="text-white/82">{record.category}</span>
              <span className="font-medium text-white">{amountLabel}</span>
              <span>
                <span
                  className={cn(
                    "inline-flex rounded-full border px-2 py-0.5 text-[11px]",
                    getBillingStatusClass(record.status)
                  )}
                >
                  {getBillingStatusLabel(record.status)}
                </span>
              </span>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function NotificationsPopover({ onClose,tasks,onLocate,onRefresh }: {onClose:()=>void;tasks:import("@/lib/video-canvas/task-contract").CanvasGenerationTask[];onLocate:(id:string)=>void;onRefresh:()=>void}) {
  return <div className="fixed inset-0 z-[70]" data-canvas-overlay="true">
    <button aria-label="关闭通知" className="absolute inset-0" onClick={onClose}/>
    <section className="fixed right-4 top-16 max-h-[70vh] w-[min(380px,94vw)] overflow-auto rounded-xl border border-white/10 bg-[#202020] p-4 text-white">
      <header className="mb-3 flex justify-between"><strong>当前画布任务</strong><button onClick={onRefresh}>刷新状态</button></header>
      {tasks.length?tasks.slice().reverse().map(task=><button key={task.id} className="mb-2 block w-full rounded-lg bg-white/5 p-3 text-left" onClick={()=>{onLocate(task.request.node.id);onClose();}}>
        <span className="block">{task.request.node.title} · {({pending:"排队中",running:"生成中",succeeded:"已完成",failed:"失败",cancelled:"已取消",interrupted:"待核实"} as Record<string,string>)[task.status]||task.status}</span>
        {task.error?<span className="mt-1 block text-xs text-red-300">{task.error}</span>:null}
      </button>):<p className="text-sm text-white/50">暂无任务</p>}
    </section>
  </div>;
}

function AccountPopover({
  onClose,
  onOpenMember,
}: {
  onClose: () => void;
  onOpenMember: () => void;
}) {
  const { data: membershipSummary } = useSWR<MembershipSummaryResponse>("/api/user/membership-summary", fetcher);
  const { data: accountCenterData } = useSWR<AccountCenterResponse>("/api/user/account-center", fetcher);
  const credits = formatCreditValue(
    Math.max(0, Number(accountCenterData?.profile?.availablePoints ?? membershipSummary?.summary?.currentCredits ?? 0))
  );
  const displayName =
    String(accountCenterData?.profile?.name || accountCenterData?.profile?.email || "当前用户").trim() || "当前用户";
  const displayEmail = String(accountCenterData?.profile?.email || "").trim();
  const currentPlanName =
    String(accountCenterData?.profile?.currentPlanName || membershipSummary?.currentPlan?.name || "Free").trim() ||
    "Free";
  const dailyFreeCredits = formatCreditValue(
    Math.max(
      0,
      Number(accountCenterData?.profile?.dailyFreeCredits ?? membershipSummary?.summary?.dailyFreeCredits ?? 0)
    )
  );

  return (
    <div className="fixed inset-0 z-[70]" data-canvas-overlay="true">
      <button aria-label="关闭账号菜单" className="absolute inset-0 cursor-default bg-transparent" onClick={onClose} type="button" />
      <div className="fixed right-4 top-[66px] z-[75] w-[388px] max-w-[calc(100vw-32px)] overflow-hidden rounded-[16px] border border-white/10 bg-[#202020]/98 text-white shadow-[0_24px_80px_rgba(0,0,0,0.54)] backdrop-blur-[16px]">
        <div className="px-4 pb-3 pt-5">
          <div className="flex items-start gap-3">
            <img alt="avatar" className="h-12 w-12 rounded-full object-cover" src={TARGET_AVATAR} />
            <div className="min-w-0 flex-1">
              <div className="flex items-center gap-2">
                <span className="truncate text-[14px] font-bold text-white/90">{displayName}</span>
                <span className="rounded-[7px] bg-[#09caf5]/12 px-2 py-0.5 text-[11px] text-[#09caf5]">个人</span>
              </div>
              <div className="mt-1 flex items-center gap-1 text-[12px] text-white/42">
                <span className="truncate">{displayEmail || "登录后查看账户邮箱"}</span>
                {displayEmail ? (
                  <button
                    className="rounded-[6px] px-1 text-white/42 hover:bg-white/8 hover:text-white"
                    onClick={() => {
                      void navigator.clipboard?.writeText(displayEmail);
                      toast.success("邮箱复制成功");
                    }}
                    type="button"
                  >
                    <Copy className="h-3 w-3" />
                  </button>
                ) : null}
              </div>
            </div>
            <ChevronDown className="mt-2 h-4 w-4 text-white/62" />
          </div>

          <div className="mt-4 rounded-[12px] border border-white/8 bg-white/[0.04] p-2">
            <div className="flex items-center gap-1 px-2 py-1 text-[14px] font-medium text-white/45">
              <UserRound className="h-4 w-4" />
              个人空间
            </div>
            <button
              className="flex w-full items-center justify-between rounded-[10px] p-2 text-left hover:bg-white/8"
              onClick={() => {
                onClose();
                onOpenMember();
              }}
              type="button"
            >
              <span>
                <span className="block text-[14px] font-medium text-white/86">积分与会员中心</span>
                <span className="mt-0.5 block text-[12px] text-white/48">{currentPlanName}</span>
              </span>
              <span className="h-[14px] w-[14px] rounded-full border border-[#09caf5] bg-[#09caf5]/18" />
            </button>
          </div>

          <div className="mt-4 grid grid-cols-2 gap-2">
            <AccountMetricCard className="col-span-2" label="积分余额" value={credits} suffix="点" accent />
            <AccountMetricCard label="当前套餐" value={currentPlanName} suffix="" />
            <AccountMetricCard label="每日赠送" value={dailyFreeCredits} suffix="点" />
          </div>

          <div className="mt-4 space-y-1">
            <AccountMenuButton
              icon={<StoreGlyph />}
              label="积分与会员中心"
              onClick={() => {
                onClose();
                onOpenMember();
              }}
            />
            <AccountMenuButton icon={<UserRound className="h-[18px] w-[18px]" />} label="个人中心" disabled />
            <AccountMenuButton icon={<Plus className="h-[18px] w-[18px]" />} label="创建团队" disabled />
            <AccountMenuButton icon={<FileText className="h-[18px] w-[18px]" />} label="订阅与开发票" disabled />
            <AccountMenuButton icon={<Settings2 className="h-[18px] w-[18px]" />} label="账号设置" disabled />
            <AccountMenuButton icon={<LogoutGlyph />} label="退出登录" onClick={async()=>{await fetch("/api/auth/logout",{method:"POST"});await signOut({callbackUrl:"/login",redirect:false});window.location.replace("/login");}} />
          </div>
        </div>
      </div>
    </div>
  );
}

function AccountMetricCard({
  accent = false,
  className,
  label,
  suffix,
  value,
}: {
  accent?: boolean;
  className?: string;
  label: string;
  suffix: string;
  value: string;
}) {
  return (
    <button
      className={cn(
        "rounded-[12px] border border-white/8 bg-white/[0.04] px-4 py-3 text-left hover:bg-white/[0.07]",
        className
      )}
      disabled title="此功能暂未接通"
      type="button"
    >
      <span className={cn("block text-[12px]", accent ? "text-[#09caf5]" : "text-white/45")}>{label}</span>
      <span className="mt-1 flex items-baseline gap-1">
        <span className={cn("font-['PlusJakartaSans'] text-[18px] font-bold", accent ? "text-[#09caf5]" : "text-white/88")}>{value}</span>
        <span className="text-[12px] text-white/44">{suffix}</span>
      </span>
    </button>
  );
}

function AccountMenuButton({
  icon,
  label,
  onClick,
  disabled=false,
}: {
  icon: React.ReactNode;
  label: string;
  onClick?: () => void;
  disabled?: boolean;
}) {
  return (
    <button disabled={disabled} title={disabled?"此功能暂不可用":undefined}
      className="flex h-10 w-full cursor-pointer items-center gap-3 rounded-[10px] px-2 text-left text-[13px] text-white/82 transition-colors hover:bg-white/8"
      onClick={disabled?undefined:onClick}
      type="button"
    >
      <span className="flex h-6 w-6 shrink-0 items-center justify-center text-white/50">{icon}</span>
      <span className="flex-1">{label}</span>
    </button>
  );
}

function LogoutGlyph() {
  return (
    <svg aria-hidden="true" className="h-[18px] w-[18px]" fill="none" viewBox="0 0 18 18">
      <path d="M9.75 2.925H4.5a.825.825 0 0 0-.825.825v10.5c0 .456.369.825.825.825h5.25v1.35H4.5a2.175 2.175 0 0 1-2.175-2.175V3.75c0-1.201.974-2.175 2.175-2.175h5.25zm5.658 5.482a.826.826 0 0 1 0 1.11l-3.658 4.025-.999-.908 2.722-2.996H5.25v-1.35h8.223L10.75 5.291l.999-.908z" fill="currentColor" />
    </svg>
  );
}

function SupportPanel() {
  return (
    <div className="space-y-3">
      {[
        ["使用教程", "打开视频画布使用教程。"],
        ["联系开发者", "提交需求或联系开发者。"],
        ["优化反馈", "反馈画布、生成和支付问题。"],
      ].map(([title, description]) => (
        <button
          className="w-full rounded-[8px] border border-white/8 bg-white/5 p-3 text-left hover:bg-white/8"
          key={title}
          disabled title="此功能暂未接通"
          type="button"
        >
          <div className="text-[13px] font-semibold text-white/82">{title}</div>
          <div className="mt-1 text-[12px] text-white/42">{description}</div>
        </button>
      ))}
    </div>
  );
}

function ImageNodePreview({ node }: { node: CloneNode }) {
  const mediaType = getDraftString(node, "mediaType") || node.inputType || "image";
  const url = getNodeMediaUrl(node);
  const sourceUrl = getNodeSourceMediaUrl(node);
  const rotation = Number(node.draftValues?.rotation || 0);
  const isNineGridComposite = Boolean(node.draftValues?.nineGridComposite);
  const cropTile = normalizeGridCropTile(node.draftValues?.cropTile);
  const gridCellVisual = node.draftValues?.gridCellVisual
    ? normalizeGridCellVisual(node.draftValues?.gridCellVisual)
    : null;

  if (!url && !isNineGridComposite) {
    return (
      <div className="flex h-[420px] items-center justify-center rounded-[8px] border border-white/8 bg-white/5 text-[14px] text-white/42">
        当前节点暂无可预览素材
      </div>
    );
  }

  return (
    <div className="rounded-[8px] border border-white/8 bg-[#111] p-3">
      {mediaType === "video" ? (
        <video className="max-h-[72vh] w-full rounded-[6px] object-contain" controls playsInline src={url} />
      ) : isNineGridComposite && url ? (
        <img
          alt={node.title}
          className="max-h-[72vh] w-full rounded-[6px] object-contain"
          src={url}
          style={{ transform: `rotate(${rotation}deg)` }}
        />
      ) : isNineGridComposite ? (
        <div className="relative aspect-video max-h-[72vh] w-full overflow-hidden rounded-[6px] bg-white">
          <NineGridCompositePreview node={node} sourceUrl={sourceUrl} />
        </div>
      ) : cropTile && url && gridCellVisual ? (
        <div className="relative aspect-square max-h-[72vh] w-full overflow-hidden rounded-[6px] bg-white">
          <GridCellImage alt={node.title} src={url} visual={gridCellVisual} />
        </div>
      ) : cropTile && url ? (
        <div className="relative aspect-square max-h-[72vh] w-full overflow-hidden rounded-[6px] bg-white">
          <CroppedGridTileImage alt={node.title} cropTile={cropTile} rotation={rotation} src={url} />
        </div>
      ) : (
        <img
          alt={node.title}
          className="max-h-[72vh] w-full rounded-[6px] object-contain"
          src={url}
          style={{ transform: `rotate(${rotation}deg)` }}
        />
      )}
    </div>
  );
}

function CancelGenerationConfirmDialog({
  onCancel,
  onConfirm,
}: {
  onCancel: () => void;
  onConfirm: () => void;
}) {
  return (
    <div
      className="fixed inset-0 z-[110] flex items-center justify-center bg-black/58"
      data-canvas-overlay="true"
      onPointerDown={(event) => event.stopPropagation()}
    >
      <section
        aria-labelledby="cancel-generation-title"
        aria-modal="true"
        className="w-[344px] rounded-[12px] border border-white/10 bg-[#232323] px-4 pb-4 pt-[14px] text-white shadow-[0_28px_90px_rgba(0,0,0,0.58)]"
        role="dialog"
      >
        <h2 className="text-[16px] font-semibold leading-6 text-white" id="cancel-generation-title">
          取消生成
        </h2>
        <p className="mt-4 whitespace-pre-line text-[14px] leading-6 text-white/72">
          仅排队中的任务可以取消。
          {"\n"}
          已提交供应商的任务将继续执行并保存结果，不能保证停止或退款。
        </p>
        <div className="mt-5 flex justify-end gap-3">
          <button
            className="h-8 rounded-[8px] border border-white/10 bg-white/8 px-4 text-[13px] text-white/72 transition hover:bg-white/12 hover:text-white"
            onClick={onCancel}
            type="button"
          >
            取消
          </button>
          <button
            className="h-8 rounded-[8px] bg-white px-4 text-[13px] font-medium text-[#1c1c1c] transition hover:bg-white/88"
            onClick={onConfirm}
            type="button"
          >
            确定
          </button>
        </div>
      </section>
    </div>
  );
}

function LibModal({
  children,
  onClose,
  title,
  width = 520,
}: {
  children: React.ReactNode;
  onClose: () => void;
  title: string;
  width?: number;
}) {
  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/64 backdrop-blur-[3px]" data-canvas-overlay="true">
      <div
        className="max-h-[86vh] overflow-hidden rounded-[8px] border border-white/12 bg-[#202020] text-white shadow-[0_30px_100px_rgba(0,0,0,0.58)]"
        style={{ width: `min(${width}px, calc(100vw - 32px))` }}
      >
        <div className="flex items-center justify-between border-white/8 border-b px-5 py-4">
          <h2 className="font-semibold text-[16px]">{title}</h2>
          <button className="rounded-[8px] p-2 text-white/50 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
            <X className="h-4 w-4" />
          </button>
        </div>
        <div className="max-h-[calc(86vh-65px)] overflow-y-auto p-5">{children}</div>
      </div>
    </div>
  );
}

function PublishModal({
  onClose,
  onTogglePublic,
  projectTitle,
  publishPublic,
  siteName,
}: {
  onClose: () => void;
  onTogglePublic: () => void;
  projectTitle: string;
  publishPublic: boolean;
  siteName: string;
}) {
  const showcaseName = getSiteShowcaseName(siteName);

  return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-[4px]" data-canvas-overlay="true">
      <div className="relative max-h-[min(90dvh,880px)] w-[480px] max-w-[calc(100vw-32px)] overflow-y-auto overflow-x-hidden rounded-[16px] border border-white/12 bg-[#242424] p-4 text-white shadow-[0_30px_100px_rgba(0,0,0,0.58)]">
        <div
          className="absolute -top-[60px] left-0 z-0 h-[214px] w-[503px] bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage: `linear-gradient(to bottom, rgba(0,0,0,0.25) 70%, #242424 100%), url(${PUBLISH_MODAL_BG_URL})`,
          }}
        />
        <button
          className="absolute right-4 top-4 z-[2] flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/80 transition-colors hover:bg-black/35 hover:text-white"
          onClick={onClose}
          type="button"
        >
          <X className="h-4 w-4" />
        </button>

        <div className="relative z-[1] flex flex-col gap-4">
          <div className="mt-3 flex max-w-[420px] flex-col gap-2">
            <p className="text-[16px] font-medium text-white drop-shadow-[0_1px_3px_rgba(0,0,0,0.85)]">
              发布作品到{siteName}
            </p>
            <p className="text-[14px] font-normal leading-normal text-white/85 drop-shadow-[0_1px_2px_rgba(0,0,0,0.75)]">
              您的作品将展示到{showcaseName}，方便大家交流使用
            </p>
          </div>

          <div className="mt-6 flex gap-3">
            <UploadBox label="选择视频" />
            <UploadBox label="选择封面" hint="建议上传横版图片" />
          </div>

          <label className="block">
            <span className="mb-1.5 block text-sm font-medium text-white/88">
              作品名称 <span className="text-red-500">*</span>
            </span>
            <input
              className="h-10 w-full rounded-[8px] border border-white/10 bg-transparent px-3 text-[13px] text-white outline-none placeholder:text-white/35 focus:border-white/20"
              defaultValue={projectTitle || "未命名"}
              maxLength={120}
              placeholder="请输入作品名称"
            />
          </label>

          <label className="block">
            <span className="mb-1.5 block text-sm font-medium text-white/88">作品描述</span>
            <textarea
              className="min-h-[78px] w-full resize-none rounded-[8px] border border-white/10 bg-transparent px-3 py-2 text-[13px] text-white outline-none placeholder:text-white/35 focus:border-white/20"
              maxLength={500}
              placeholder="请输入作品描述"
            />
          </label>

          <div className="flex gap-3">
            <label className="flex flex-1 flex-col gap-2">
              <span className="text-sm font-medium text-white/88">活动标签</span>
              <select className="h-10 rounded-[8px] border border-white/10 bg-transparent px-3 text-[13px] text-white/78 outline-none">
                <option className="bg-[#242424]" value="0">不参与</option>
                <option className="bg-[#242424]" value="1">{showcaseName}</option>
              </select>
            </label>
            <label className="flex flex-1 flex-col gap-2">
              <span className="text-sm font-medium text-white/88">参赛赛道</span>
              <select className="h-10 rounded-[8px] border border-white/10 bg-transparent px-3 text-[13px] text-white/45 outline-none">
                <option className="bg-[#242424]" value="">请选择参赛单元</option>
                <option className="bg-[#242424]" value="story">叙事短片</option>
                <option className="bg-[#242424]" value="music">音乐影像</option>
              </select>
            </label>
          </div>

          <label className="block">
            <span className="mb-1.5 flex items-center gap-1 text-sm font-medium text-white/88">
              社媒链接
              <HelpCircle className="h-3 w-3 text-white/48" />
            </span>
            <input
              className="h-10 w-full rounded-[8px] border border-white/10 bg-transparent px-3 text-[13px] text-white outline-none placeholder:text-white/35 focus:border-white/20"
              placeholder="请添加您在社媒发布该作品的链接"
            />
          </label>

          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              <span className="text-[13px] text-white/86">公开画布</span>
              <button
                className={cn("relative h-5 w-9 rounded-full transition", publishPublic ? "bg-white" : "bg-white/18")}
                onClick={onTogglePublic}
                type="button"
              >
                <span className={cn("absolute top-[3px] h-3.5 w-3.5 rounded-full transition", publishPublic ? "left-[19px] bg-black" : "left-[3px] bg-white")} />
              </button>
            </div>
            <button
              className="cursor-pointer rounded-lg bg-[#478EFF] px-3 py-2 text-[13px] text-white transition-colors hover:bg-[#2563EB]"
              disabled title="此功能暂未接通"
              type="button"
            >
              发布并投稿
            </button>
          </div>

          <label className="mt-[-4px] flex cursor-pointer items-center gap-1">
            <input className="h-3 w-3 accent-[#478EFF]" defaultChecked type="checkbox" />
            <span className="text-[10px] text-white/60">
              点击发布即代表同意
              <button
                className="text-[#478EFF] hover:underline"
                disabled title="此功能暂未接通"
                type="button"
              >
                《{siteName}创作许可服务协议》
              </button>
            </span>
          </label>
        </div>
      </div>
    </div>
  );
}

function UploadBox({ hint, label }: { hint?: string; label: string }) {
  return (
    <button
      className="flex h-[120px] flex-1 flex-col items-center justify-center rounded-[8px] border border-white/8 bg-white/12 text-white/72 transition-colors hover:bg-white/16 hover:text-white"
      disabled title="此功能暂未接通"
      type="button"
    >
      <Plus className="h-5 w-5" />
      <span className="mt-2 text-[13px]">{label}</span>
      {hint ? <span className="mt-2 text-[12px] text-white/42">{hint}</span> : null}
    </button>
  );
}

function EmptyState({
  description,
  icon: Icon,
  title,
}: {
  description: string;
  icon: LucideIcon;
  title: string;
}) {
  return (
    <div className="rounded-[8px] border border-white/8 bg-white/5 p-6 text-center">
      <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-[8px] bg-white/8 text-white/72">
        <Icon className="h-5 w-5" />
      </div>
      <div className="mt-4 font-semibold">{title}</div>
      <p className="mx-auto mt-2 max-w-[380px] text-[13px] text-white/48 leading-6">{description}</p>
    </div>
  );
}