"use client";

import {
  ArrowUp,
  Bell,
  BookOpen,
  BoxSelect,
  Camera,
  Check,
  ChevronDown,
  ChevronRight,
  Clock3,
  Copy,
  Download,
  Ellipsis,
  FileText,
  FolderOpen,
  GitBranch,
  Headphones,
  HelpCircle,
  Image as ImageIcon,
  Keyboard,
  Languages,
  Layers,
  Loader2,
  Maximize2,
  Minimize2,
  Music2,
  Move,
  Pause,
  Plus,
  Play,
  Redo2,
  RotateCcw,
  Search,
  Scissors,
  Settings2,
  SlidersHorizontal,
  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 WheelEvent as ReactWheelEvent,
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import { toast } from "sonner";
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,
  workflowAnalysisService,
} from "@/services/canvas";
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"
  | "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 =
  | "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;
    }
  | {
      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 CanvasModelKind = "image" | "video" | "multimodal" | "any";

type AddModuleKind = "text" | "image" | "video" | "video-clip" | "director" | "audio" | "script" | "legacy-script";
type CanvasCreateKind = AddModuleKind;
type TargetModuleActionLabel =
  | "自己编写内容"
  | "文生视频"
  | "图片反推提示词"
  | "文字生音乐"
  | "图生图"
  | "图片高清"
  | "参考"
  | "标记"
  | "风格"
  | "音频生视频"
  | "首尾帧生成视频"
  | "首帧生成视频"
  | "自己编写分镜脚本"
  | "生成高清视频"
  | "打开导演台"
  | "剧本生成分镜脚本"
  | "视频参考生成分镜脚本"
  | "角色生成分镜脚本";

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

type StoryToolbarAction = "regenerate" | "create-storyboard" | "batch-video";
type PresetMediaToolbarAction =
  | "first-frame-hd"
  | "first-frame-outpaint"
  | "first-frame-background"
  | "first-frame-download"
  | "audio-beat"
  | "audio-camera"
  | "audio-sfx"
  | "audio-download";

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 = {
  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 VideoAnalysisResponsePayload = {
  analysisRows?: Array<{
    backgroundMusic?: string;
    dialogue?: string;
    cameraAngle?: string;
    cameraMovement?: string;
    duration?: string | number;
    endTime?: string | number;
    focusDepth?: string;
    imagePrompt?: string;
    keyframeUrl?: string;
    lighting?: string;
    motionPrompt?: string;
    narrative?: string;
    sceneDescription?: string;
    scene?: string;
    shot?: string | number;
    shotSize?: string;
    startTime?: string | number;
    story?: string;
    voiceAndSfx?: string;
  }>;
  framePreviews?: string[];
  highlights?: string[];
  raw?: string;
  recommendedNextSteps?: string[];
  shotIdeas?: Array<{ title: string; description: string }>;
  summary?: string;
};

type VideoAnalysisResponseRow = NonNullable<VideoAnalysisResponsePayload["analysisRows"]>[number];

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: "video-clip", label: "视频合成", description: "多个视频片段合为一个", icon: Scissors, badge: "Beta" },
  { kind: "director", label: "导演台", description: "3D空间多视角截图", icon: Settings2, badge: "NEW" },
  { kind: "audio", label: "音频", description: "音效、配音、音乐", icon: Music2 },
  { kind: "script", label: "脚本", description: "创意脚本、生成故事板", icon: Layers, badge: "NEW" },
];

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: "video-clip", label: "视频合成", icon: Scissors },
  { kind: "script", label: "脚本生成", icon: Layers },
];

const TARGET_MODULE_CENTER_OFFSETS: Record<AddModuleKind, { x: number; y: number }> = {
  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 },
  "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 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 LIBLIB_VIDEO_MODEL_OPTIONS = [
  {
    label: "Seedance 2.0 VIP",
    duration: "2min",
    description: "最强视频模型，会员专属通道,15s音画同步",
  },
  {
    label: "Seedance 2.0 Fast VIP",
    duration: "2min",
    description: "最强视频模型快速版，会员专属通道，15s音画同步",
  },
  {
    label: "Seedance 2.0 Mini",
    duration: "2min",
    description: "最强视频模型mini版，高性价比生成，15s音画同步",
  },
  {
    label: "Happy Horse 1.1",
    duration: "3min",
    description: "阿里最新视频模型，一致性与视听质量更可控",
  },
  {
    label: "Happy Horse 1.0",
    duration: "3min",
    description: "阿里视频模型，支持多参生成",
  },
  {
    label: "Kling O3",
    duration: "3min",
    description: "视频编辑模型、参考一致性、音画同出、多镜头",
  },
  {
    label: "Kling 3.0 Turbo",
    duration: "3min",
    description: "视频生成模型，高质感、支持多镜头",
  },
  {
    label: "Kling 3.0",
    duration: "3min",
    description: "视频生成模型，高质感、支持多镜头",
  },
  {
    label: "Wan 2.7",
    duration: "3min",
    description: "全能参考，支持修改视频画面、剧情、环境",
  },
  {
    label: "Kling O1",
    duration: "3min",
    description: "可灵一代编辑模型、支持多模态输入",
  },
  {
    label: "Wan 2.6",
    duration: "3min",
    description: "音画同步，支持多机位镜头，最长可生15秒视频",
  },
  {
    label: "Hailuo 2.3",
    duration: "2min",
    description: "善于表达动作、表情、镜头，更高质感",
  },
  {
    label: "Seedance1.5 Pro",
    duration: "2min",
    description: "音画同步，支持多机位镜头，最长可生12秒视频",
  },
  {
    label: "Seedance 1.0 Pro",
    duration: "2min",
    description: "高精度提示词理解，40秒生成1080P视频",
  },
  {
    label: "Seedance 1.0 Lite",
    duration: "1min",
    description: "轻量快速，一键进行日常视频生成",
  },
  {
    label: "Kling 2.6",
    duration: "2min",
    description: "视频生成模型、直出音画同步",
  },
  {
    label: "Hailuo 02",
    duration: "2min",
    description: "画质稳定，适合打造运动特效场景",
  },
  {
    label: "Vidu Q2",
    duration: "3min",
    description: "多图主体参考，精确控制效果佳",
  },
  {
    label: "Vidu Q2 Pro",
    description: "Vidu Q2 Pro",
  },
  {
    label: "Vidu Q2 Turbo",
    description: "Vidu Q2 Turbo",
  },
  {
    label: "Vidu Q3 Pro",
    duration: "2min",
    description: "支持主体参考，精确控制效果佳",
  },
  {
    label: "OmniHuman 1.5",
    duration: "3min",
    description: "多模态数字人视频生成",
  },
  {
    label: "Kling 2.5",
    duration: "2min",
    description: "速度快、效果稳定、性价比高",
  },
  {
    label: "Kling 2.1",
    duration: "3min",
    description: "支持首尾帧，图生视频效果更出色",
  },
  {
    label: "Wan 2.2",
    duration: "3min",
    description: "支持特效、玩法千变万化",
  },
  {
    label: "Wan 2.5",
    duration: "3min",
    description: "支持特效、直出音画同步",
  },
  {
    label: "Pixverse V5.5",
    duration: "3min",
    description: "支持特效、玩法丰富",
  },
  {
    label: "Pixverse V5",
    duration: "3min",
    description: "支持特效、玩法丰富",
  },
  {
    label: "Hailuo 2.3 Fast",
    duration: "1min",
    description: "善于表达动作、表情、镜头，更快速",
    disabled: true,
  },
  {
    label: "Kling3.0 动作迁移",
    duration: "8min",
    description: "动作控制模型，需输入1张图片、1条视频",
    disabled: true,
  },
  {
    label: "MJ Video",
    duration: "2min",
    description: "图生视频效果稳定，画面表现力强",
    disabled: true,
  },
] as const;

const VIDEO_RATIO_OPTIONS = [
  { label: "Auto", value: "adaptive" },
  { label: "16:9", value: "16:9" },
  { label: "4:3", value: "4:3" },
  { label: "1:1", value: "1:1" },
  { label: "3:4", value: "3:4" },
  { label: "9:16", value: "9:16" },
  { label: "21:9", value: "21:9" },
] as const;

const VIDEO_RESOLUTION_OPTIONS = ["480P", "720P", "1080P", "4K"] as const;
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 PRESET_MEDIA_TOOLBAR_ITEMS: Record<PresetMediaToolbarAction, PresetFloatingToolbarItem> = {
  "first-frame-hd": ["高清", "首帧高清接口待接入。"],
  "first-frame-outpaint": ["扩图", "首帧扩图接口待接入。"],
  "first-frame-background": ["替换背景", "背景替换接口待接入。"],
  "first-frame-download": ["下载", "图片下载接口待接入。"],
  "audio-beat": ["节奏匹配", "音频节奏解析接口待接入。"],
  "audio-camera": ["镜头语言", "镜头语言配置接口待接入。"],
  "audio-sfx": ["生成音效", "音效生成接口待接入。"],
  "audio-download": ["下载", "素材下载接口待接入。"],
};

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: "roleLibrary", label: "角色库", icon: UserRound },
  { 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 VIDEO_SUBTITLE_ERASE_SIMULATED_MS = 42_000;
const OFFICIAL_TEXT_RESOURCE_HEIGHT = 330;
const OFFICIAL_TEXT_RESOURCE_WIDTH = 560;
const OFFICIAL_IMAGE_TOOLBAR_SCALE = 0.7;
const OFFICIAL_COMPOSER_SCALE = 0.546;
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_INLINE_LABEL = "1024 x 576";
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 CHARACTER_IMAGE_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-image.png";
const CHARACTER_THREE_VIEW_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/character-three-view.png";
const FIRST_FRAME_IMAGE_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/first-frame-image.png";
const AUDIO_SOURCE_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/audio-source.mp3";
const AUDIO_REFERENCE_IMAGE_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/audio-reference-image.png";
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 HD_IMAGE_SOURCE_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/hd-image-source.png";
const VIDEO_FIRST_FRAME_SOURCE_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/video-first-frame-source.png";
const VIDEO_FIRST_FRAME_PROMPT = "以当前图为首帧生成视频。";
const VIDEO_FIRST_LAST_FIRST_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/video-first-last-first.png";
const VIDEO_FIRST_LAST_LAST_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/video-first-last-last.png";
const VIDEO_FIRST_LAST_PROMPT =
  "手从白帆布包中取出青柠气泡水罐的特写，过渡到短发女生在户外草地闭眼仰头喝同款气泡水的中景，日系清新治愈风格，明亮自然光，柔和暖调，胶片质感，动作流畅自然";
const SCRIPT_VIDEO_REFERENCE_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/script-video-reference.mp4";
const SCRIPT_CHARACTER_ONE_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/script-character-one.png";
const SCRIPT_CHARACTER_TWO_URL =
  "https://demo-sparkai.oss-cn-shanghai.aliyuncs.com/video-canvas-demo/script-character-two.png";
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: [],
    createdAt: new Date(),
    updatedAt: new Date(),
  }));
}

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 === "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, "script" | "legacy-script" | "video-clip" | "director">, {
    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: "image",
    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],
    },
  };
}

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

const DEFAULT_IMAGE_HISTORY_NODES: CloneNode[] = [
  ["history-demo-image-1", "角色图", CHARACTER_IMAGE_URL],
  ["history-demo-image-2", "角色三视图", CHARACTER_THREE_VIEW_URL],
  ["history-demo-image-3", "首帧", FIRST_FRAME_IMAGE_URL],
  ["history-demo-image-4", "音频参考图", AUDIO_REFERENCE_IMAGE_URL],
  ["history-demo-image-5", "高清图片", HD_IMAGE_SOURCE_URL],
  ["history-demo-image-6", "视频首帧", VIDEO_FIRST_FRAME_SOURCE_URL],
  ["history-demo-image-7", "首尾帧-首帧", VIDEO_FIRST_LAST_FIRST_URL],
  ["history-demo-image-8", "首尾帧-尾帧", VIDEO_FIRST_LAST_LAST_URL],
].map(([id, title, mediaUrl]) => createHistoryDemoAssetNode({ id, mediaType: "image", mediaUrl, title }));

const DEFAULT_VIDEO_HISTORY_NODES: CloneNode[] = Array.from({ length: 10 }, (_, index) =>
  createHistoryDemoAssetNode({
    id: `history-demo-video-${index + 1}`,
    mediaType: "video",
    mediaUrl: SCRIPT_VIDEO_REFERENCE_URL,
    title: `分镜视频-#${index + 1}`,
  })
);

const DEFAULT_AUDIO_HISTORY_NODES: CloneNode[] = Array.from({ length: 6 }, (_, index) =>
  createHistoryDemoAssetNode({
    id: `history-demo-audio-${index + 1}`,
    mediaType: "audio",
    mediaUrl: AUDIO_SOURCE_URL,
    title: `示例音频-#${index + 1}`,
  })
);

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 getNodeReferenceMediaUrl(node: CloneNode | null | undefined) {
  return getNodeMediaUrl(node) || getDraftString(node, "sourceUrl");
}

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 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 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 formatVideoStoryNumber(value: unknown, fallback: number) {
  const text = String(value ?? "").trim();
  if (text) return text.replace(/\s*秒$/i, "").replace(/\s*s$/i, "");
  const numericValue = Number.isFinite(fallback) ? fallback : 0;
  return Number.isInteger(numericValue)
    ? String(numericValue)
    : String(Number(numericValue.toFixed(1))).replace(/\.0$/, "");
}

function formatVideoStoryShot(value: unknown, index: number) {
  const text = String(value ?? "").trim();
  return text || String(index + 1);
}

function cleanVideoStoryText(value: unknown, fallback: string) {
  const text = String(value ?? "").trim();
  return text || fallback;
}

function buildVideoAnalysisRows(node: CloneNode, responseData?: VideoAnalysisResponsePayload): VideoAnalysisRow[] {
  const previewUrl = getVideoNodePreviewUrl(node) || getNodeMediaUrl(node) || "";
  const modelRows = Array.isArray(responseData?.analysisRows) ? responseData.analysisRows : [];
  const framePreviews = Array.isArray(responseData?.framePreviews)
    ? responseData.framePreviews.map((item) => String(item || "").trim()).filter(Boolean)
    : [];
  const videoDuration = Math.max(1, Math.round(getVideoNodeDurationSeconds(node)));
  const defaultEndTime = formatVideoStoryNumber(undefined, videoDuration);
  const summary = responseData?.summary?.trim() || "";
  const fallbackPrompt = summary || responseData?.raw?.trim() || `${node.title} 的连续镜头推演`;
  const createRow = (
    row: Partial<VideoAnalysisResponseRow> & Record<string, unknown>,
    index: number,
  ): VideoAnalysisRow => {
    const sceneDescription = cleanVideoStoryText(
      row.sceneDescription || row.description || row.pictureDescription,
      index === 0 ? `${node.title} 开场镜头` : `镜头 ${index + 1}`
    );
    const narrative = cleanVideoStoryText(
      row.narrative || row.story || row.storyContent || row.summary,
      sceneDescription
    );
    const motionPrompt = cleanVideoStoryText(
      row.motionPrompt || row.videoPrompt,
      "The camera slowly pushes toward the main subject while the action continues naturally and smoothly."
    );

    return {
      id: `${node.id}-analysis-${index}`,
      shot: formatVideoStoryShot(row.shot || row.shotNumber || row.index, index),
      startTime: formatVideoStoryNumber(row.startTime, index === 0 ? 0 : index * videoDuration),
      endTime: formatVideoStoryNumber(row.endTime, (index + 1) * videoDuration),
      duration: formatVideoStoryNumber(row.duration, videoDuration),
      sceneDescription,
      narrative,
      shotSize: cleanVideoStoryText(row.shotSize || row.frameSize, "中景至近景"),
      cameraAngle: cleanVideoStoryText(row.cameraAngle || row.angle, "平视"),
      cameraMovement: cleanVideoStoryText(row.cameraMovement || row.cameraMove, "缓慢推镜头 (Slow Zoom In)"),
      focusDepth: cleanVideoStoryText(row.focusDepth || row.depthOfField, "浅景深"),
      lighting: cleanVideoStoryText(row.lighting || row.light, "冷调低沉照明，主体光线柔和。"),
      backgroundMusic: cleanVideoStoryText(row.backgroundMusic || row.music, "无"),
      voiceAndSfx: cleanVideoStoryText(row.voiceAndSfx || row.audio || row.sfx, "无"),
      imagePrompt: cleanVideoStoryText(row.imagePrompt || row.sceneDescription, fallbackPrompt),
      motionPrompt,
      keyframeUrl:
        String(row.keyframeUrl || row.previewUrl || row.imageUrl || "").trim() ||
        framePreviews[index % Math.max(framePreviews.length, 1)] ||
        previewUrl,
    };
  };

  if (modelRows.length > 0) {
    return modelRows.slice(0, 8).map((row, index) => createRow(row, index));
  }
  const highlights = responseData?.highlights || [];
  const shotIdeas = responseData?.shotIdeas?.slice(0, 3) || [];
  const rows =
    shotIdeas.length > 0
      ? shotIdeas.map((idea, index) =>
          createRow(
            {
              backgroundMusic: highlights[index] || highlights[0] || "氛围音乐待接入",
              imagePrompt: idea.description || fallbackPrompt,
              motionPrompt:
                responseData?.recommendedNextSteps?.[index] ||
                "The camera moves smoothly around the subject and keeps the action continuous.",
              narrative: idea.description || fallbackPrompt,
              sceneDescription: idea.title || `镜头 ${index + 1}`,
              voiceAndSfx: highlights[index + 1] || "无",
            },
            index
          )
        )
      : [
          createRow(
            {
              backgroundMusic: highlights[0] || "低沉的氛围电子乐，带有缓慢的机械节拍感。",
              endTime: defaultEndTime,
              imagePrompt: fallbackPrompt,
              motionPrompt:
                "The subject moves subtly while the camera slowly dollies in, keeping the scene cinematic and continuous.",
              narrative: summary || "通过主要角色、环境和镜头运动呈现当前视频的叙事情绪。",
              sceneDescription: `${node.title} 开场镜头`,
              startTime: "0",
              voiceAndSfx: highlights[1] || "环境声与轻微动作声。",
            },
            0
          ),
        ];

  return rows;
}

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) || getNodeMediaUrl(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 === "Topazlabs" ? "Topazlabs" : existingNode?.draftValues?.hdEngine || "Topazlabs",
      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) || SCRIPT_VIDEO_REFERENCE_URL;
  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) || SCRIPT_VIDEO_REFERENCE_URL;
  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>;
  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));
  if (rows.length > 0) return rows;
  return DEFAULT_STORY_SCRIPT_ROWS.map((row, index) => ({
    ...row,
    id: `${nodeId}-story-fallback-${index}`,
  }));
}

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

const STORY_WORKFLOW_ASSET_FALLBACKS: StoryWorkflowAsset[] = [
  {
    description: "现代办公室加班女性，穿越前状态，疲惫压抑。",
    imageUrl: SCRIPT_CHARACTER_ONE_URL,
    name: "现代沈昭昭",
    type: "role",
  },
  {
    description: "盛唐男装官服女主，朝堂危局中的核心角色。",
    imageUrl: SCRIPT_CHARACTER_TWO_URL,
    name: "沈昭昭",
    type: "role",
  },
  {
    description: "龙椅之上威严注视的盛唐皇帝。",
    imageUrl: CHARACTER_IMAGE_URL,
    name: "皇帝",
    type: "role",
  },
  {
    description: "恢弘金色朝堂，百官列立，压迫感强。",
    imageUrl: FIRST_FRAME_IMAGE_URL,
    name: "金銮殿",
    type: "scene",
  },
  {
    description: "晴朗盛唐长安，街市与山河展开。",
    imageUrl: VIDEO_FIRST_FRAME_SOURCE_URL,
    name: "长安城白昼",
    type: "scene",
  },
  {
    description: "夜色长安灯火连绵，结尾史诗气氛。",
    imageUrl: AUDIO_REFERENCE_IMAGE_URL,
    name: "长安城夜景",
    type: "scene",
  },
  {
    description: "侍卫拔刀形成威胁，刀光映入角色瞳孔。",
    imageUrl: FIRST_FRAME_IMAGE_URL,
    name: "侍卫长刀",
    type: "prop",
  },
];

function classifyStoryWorkflowAsset(name: string): StoryWorkflowAsset["type"] {
  if (/殿|城|长安|办公室|街|山河|夜景|白昼|场景/.test(name)) return "scene";
  if (/刀|剑|笔|卷|书|道具/.test(name)) return "prop";
  return "role";
}

function getStoryWorkflowAssetImage(type: StoryWorkflowAsset["type"], index: number) {
  if (type === "role") {
    return [SCRIPT_CHARACTER_ONE_URL, SCRIPT_CHARACTER_TWO_URL, CHARACTER_IMAGE_URL][index % 3];
  }
  if (type === "scene") {
    return [FIRST_FRAME_IMAGE_URL, VIDEO_FIRST_FRAME_SOURCE_URL, AUDIO_REFERENCE_IMAGE_URL][index % 3];
  }
  return [FIRST_FRAME_IMAGE_URL, CHARACTER_IMAGE_URL][index % 2];
}

function normalizeStoryWorkflowAssetName(rawName: string) {
  const knownAsset = STORY_WORKFLOW_ASSET_FALLBACKS.find((asset) => rawName.includes(asset.name));
  if (knownAsset) return knownAsset.name;
  return rawName
    .replace(/(伏案|抬头|猛然|跪|目光|缓缓|站直|吟诵|转身|低声|满脸|发现|身着|看向|穿过|指着|厉声|内|外).*/, "")
    .trim()
    .slice(0, 8);
}

function getStoryWorkflowAssetGroups(rows: StoryScriptRow[]) {
  const detectedNames = Array.from(
    new Set(
      rows.flatMap((row) =>
        [
          row.scene,
          row.sceneDescription,
          row.dialogue,
          row.voiceAndSfx,
          row.imagePrompt,
          row.motionPrompt,
        ]
          .join(" ")
          .match(/@([\u4e00-\u9fa5A-Za-z0-9_-]{2,18})/g)
          ?.map((item) => normalizeStoryWorkflowAssetName(item.slice(1)))
          .filter(Boolean) || []
      )
    )
  );
  const detectedAssets = detectedNames.map<StoryWorkflowAsset>((name, index) => {
    const type = classifyStoryWorkflowAsset(name);
    return {
      description:
        type === "role"
          ? "由脚本中 @ 引用自动抽取的角色资产。"
          : type === "scene"
            ? "由脚本镜头引用自动抽取的场景资产。"
            : "由镜头动作和威胁物件抽取的道具资产。",
      imageUrl: getStoryWorkflowAssetImage(type, index),
      name,
      type,
    };
  });

  const byName = new Map<string, StoryWorkflowAsset>();
  [...detectedAssets, ...STORY_WORKFLOW_ASSET_FALLBACKS].forEach((asset) => {
    if (!byName.has(asset.name)) byName.set(asset.name, asset);
  });
  const assets = Array.from(byName.values());
  return {
    prop: assets.filter((asset) => asset.type === "prop"),
    role: assets.filter((asset) => asset.type === "role"),
    scene: assets.filter((asset) => asset.type === "scene"),
  };
}

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,
  onStepChange,
  step,
}: {
  node: CloneNode;
  onClose: () => void;
  onRun: () => void;
  onStepChange: (step: StoryWorkflowStep) => void;
  step: StoryWorkflowStep;
}) {
  const rows = getStoryScriptRows(node);
  const assetGroups = getStoryWorkflowAssetGroups(rows);
  const assetCount = assetGroups.role.length + assetGroups.scene.length + assetGroups.prop.length;
  const [promptRow, setPromptRow] = useState<StoryScriptRow | null>(null);
  const steps: Array<{ key: StoryWorkflowStep; label: string; subLabel: string }> = [
    { key: "shots", label: "确认镜头", subLabel: `${rows.length}个镜头已就绪` },
    { key: "assets", label: "准备资产", subLabel: `${assetCount}/${assetCount} 已生成` },
    { key: "prompts", label: "合成提示词", subLabel: `${rows.length}/${rows.length} 已合成` },
  ];
  const tableColumns = [
    "镜号",
    "时长",
    "画面描述",
    "景别",
    "光影氛围",
    "对白·旁白",
    "音效",
    "运镜",
    "最终提示词",
    "操作",
  ];
  const gridTemplateColumns =
    "56px 56px 310px 72px 150px 140px 130px 128px 260px 162px";

  const renderShotTable = (highlightPrompt = false) => (
    <div className="absolute inset-x-6 bottom-[74px] top-[72px] overflow-hidden rounded-[12px] border border-white/8 bg-[#1b1b1b] shadow-[0_24px_80px_rgba(0,0,0,0.42)]">
      <div className="h-full overflow-auto">
        <div className="min-w-[1464px]">
          <div
            className="grid border-white/8 border-b bg-[#232323] text-[12px] font-medium text-white/42"
            style={{ gridTemplateColumns }}
          >
            {tableColumns.map((item) => (
              <div
                className={cn(
                  "border-white/8 border-r px-3 py-3 last:border-r-0",
                  highlightPrompt && item === "最终提示词" && "bg-white/[0.06] text-white/78"
                )}
                key={item}
              >
                {item}
              </div>
            ))}
          </div>
          {rows.map((row) => (
            <div
              className="grid h-[60px] overflow-hidden border-white/8 border-b text-[12px] leading-5 text-white/72"
              key={row.id}
              style={{ gridTemplateColumns }}
            >
              {[
                row.shot,
                row.duration,
                row.sceneDescription,
                row.shotSize,
                row.lighting,
                row.dialogue,
                row.voiceAndSfx,
                row.cameraMovement,
                row.imagePrompt,
              ].map((cell, index) => (
                <div
                  className={cn(
                    "overflow-hidden border-white/8 border-r px-3 py-3 last:border-r-0",
                    index === 8 && highlightPrompt && "bg-white/[0.035]"
                  )}
                  key={`${row.id}-${index}`}
                >
                  <div className="line-clamp-2">{cell}</div>
                </div>
              ))}
              <div className="flex items-center justify-center gap-2 px-2 py-2">
                <button
                  className="h-8 rounded-[8px] px-3 text-[12px] text-white/78 transition hover:bg-white/10 hover:text-white"
                  onClick={() => setPromptRow(row)}
                  type="button"
                >
                  查看提示词
                </button>
                <button
                  aria-label={`镜头 ${row.shot} 更多操作`}
                  className="flex h-8 w-8 items-center justify-center rounded-[8px] text-white/38 transition hover:bg-white/10 hover:text-white/78"
                  type="button"
                >
                  ⋯
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );

  const renderAssetGroup = (
    title: string,
    assets: StoryWorkflowAsset[],
    emptyLabel: string,
  ) => (
    <section className="space-y-3">
      <h3 className="text-[14px] font-medium text-white/84">{title}</h3>
      <div className="grid grid-cols-[repeat(4,277px)] gap-4">
        {assets.map((asset) => (
          <div
            className="group relative h-[196px] w-[277px] overflow-hidden rounded-[10px] border border-white/8 bg-[#242424]"
            key={`${asset.type}-${asset.name}`}
          >
            <img
              alt=""
              className="h-[156px] w-full object-cover"
              draggable={false}
              onDragStart={preventNativeImageDrag}
              src={asset.imageUrl}
            />
            <div className="flex h-10 flex-col justify-center px-3">
              <span className="truncate text-[13px] font-medium text-white/86">{asset.name}</span>
              <span className="truncate text-[11px] text-white/38">{asset.description}</span>
            </div>
            <div className="absolute right-2 top-2 hidden items-center gap-1 group-hover:flex">
              <button className="flex h-7 w-7 items-center justify-center rounded-[7px] bg-black/72 text-white/82" type="button">
                ⌕
              </button>
              <div className="relative">
                <button className="flex h-7 w-7 items-center justify-center rounded-[7px] bg-black/72 text-white/82" type="button">
                  ⋯
                </button>
                <div className="pointer-events-none absolute right-0 top-8 hidden w-[124px] rounded-[10px] border border-white/10 bg-[#1f1f1f] p-1 text-[12px] text-white/78 shadow-[0_18px_48px_rgba(0,0,0,0.42)] group-hover:block">
                  {["替换图片", "AI 生角色", "清除图片"].map((item) => (
                    <div className="rounded-[7px] px-3 py-2" key={item}>{item}</div>
                  ))}
                  <div className="rounded-[7px] px-3 py-2 text-[#ff6b6b]">删除</div>
                </div>
              </div>
            </div>
          </div>
        ))}
        <button
          className="flex h-[196px] w-[277px] flex-col items-center justify-center rounded-[10px] border border-dashed border-white/18 bg-white/[0.03] text-[13px] text-white/46 transition hover:border-white/32 hover:text-white/72"
          type="button"
        >
          <Plus className="mb-2 h-5 w-5" />
          {emptyLabel}
        </button>
      </div>
    </section>
  );

  return (
    <div
      className="fixed inset-0 z-[120] bg-[#111] text-white"
      data-canvas-overlay="true"
      onPointerDown={(event) => event.stopPropagation()}
    >
      <header className="relative flex h-16 shrink-0 items-center justify-center border-white/8 border-b bg-[#171717] px-14">
        <div className="absolute left-8 top-1/2 -translate-y-1/2 truncate text-[14px] font-semibold text-white/78">
          {node.title || "脚本生成器"}
        </div>
        <div className="flex h-14 items-center justify-center gap-[132px]">
          {steps.map((item, index) => {
            const active = item.key === step;
            return (
              <button
                className={cn(
                  "flex min-w-[72px] items-center gap-2 rounded-[8px] px-2 py-1 text-left transition",
                  active ? "bg-white/[0.08] text-white" : "text-white/72 hover:bg-white/[0.04]"
                )}
                key={item.key}
                onClick={() => onStepChange(item.key)}
                type="button"
              >
                <span
                  className={cn(
                    "flex h-10 w-10 items-center justify-center rounded-full border text-[14px]",
                    active ? "border-white/24 bg-white text-black" : "border-white/14 bg-white/[0.04] text-white/62"
                  )}
                >
                  {index + 1}
                </span>
                <span className="flex flex-col gap-1">
                  <span className={cn("whitespace-nowrap text-[13px]", active ? "text-white" : "text-white/54")}>
                    {item.label}
                  </span>
                  <span className={cn("whitespace-nowrap text-[12px]", active ? "text-white/82" : "text-white/34")}>
                    {item.subLabel}
                  </span>
                </span>
              </button>
            );
          })}
        </div>
        <div className="absolute right-16 top-1/2 -translate-y-1/2 text-[13px] text-white/42">
          3/3 完成后可批量生视频
        </div>
        <button
          aria-label="关闭脚本工作流"
          className="absolute right-5 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-[8px] text-white/54 transition hover:bg-white/8 hover:text-white"
          onClick={onClose}
          type="button"
        >
          <X className="h-5 w-5" />
        </button>
      </header>

      <main className="relative h-[calc(100%-64px)]">
        {step === "shots" ? renderShotTable(false) : null}
        {step === "assets" ? (
          <div className="absolute inset-x-6 bottom-[74px] top-[72px] overflow-auto rounded-[12px] border border-white/8 bg-[#1b1b1b] p-6 shadow-[0_24px_80px_rgba(0,0,0,0.42)]">
            <div className="mb-6 flex items-center gap-3 text-[13px] text-white/62">
              <span>全局风格</span>
              <span className="rounded-[7px] bg-white/[0.08] px-3 py-1 text-white/86">盛唐·国风二次元</span>
            </div>
            <div className="space-y-8">
              {renderAssetGroup("角色", assetGroups.role, "新增")}
              {renderAssetGroup("场景", assetGroups.scene, "新增")}
              {renderAssetGroup("道具", assetGroups.prop, "新增")}
            </div>
          </div>
        ) : null}
        {step === "prompts" ? renderShotTable(true) : null}

        <footer className="absolute inset-x-6 bottom-5 flex h-11 items-center justify-between rounded-[10px] border border-white/8 bg-[#1b1b1b] px-4 text-[13px] text-white/46">
          {step === "assets" ? (
            <span>资产已生成，如再次生成将会覆盖之前的图片/场景/道具等资产</span>
          ) : step === "prompts" ? (
            <span>最终提示词已合成，可继续查看单镜提示词或重新批量合成</span>
          ) : (
            <button className="rounded-[8px] px-3 py-2 text-white/62 transition hover:bg-white/8 hover:text-white" type="button">
              添加镜头
            </button>
          )}
          {step === "shots" ? (
            <button
              className="flex h-8 items-center gap-1 rounded-[8px] bg-white px-3 text-[13px] font-medium text-black transition hover:bg-white/88"
              onClick={() => onStepChange("assets")}
              type="button"
            >
              下一步：准备资产
              <ChevronRight className="h-4 w-4" />
            </button>
          ) : null}
          {step === "assets" ? (
            <button
              className="flex h-8 items-center gap-1 rounded-[8px] bg-white px-3 text-[13px] font-medium text-black transition hover:bg-white/88"
              onClick={() => onStepChange("prompts")}
              type="button"
            >
              下一步：合成提示词
              <ChevronRight className="h-4 w-4" />
            </button>
          ) : null}
          {step === "prompts" ? (
            <button
              className="h-8 rounded-[8px] bg-white px-3 text-[13px] font-medium text-black transition hover:bg-white/88"
              onClick={() => {
                onRun();
                toast.success("已开始重新合成全部提示词");
              }}
              type="button"
            >
              一键合成全部提示词
            </button>
          ) : null}
        </footer>
      </main>

      {promptRow ? (
        <div className="fixed inset-0 z-[130] flex items-center justify-center bg-black/58" data-canvas-overlay="true">
          <div className="flex h-[587px] max-h-[calc(100vh-160px)] w-[760px] flex-col overflow-hidden rounded-[14px] border border-white/10 bg-[#1f1f1f] shadow-[0_28px_100px_rgba(0,0,0,0.62)]">
            <div className="flex h-14 items-center justify-between border-white/8 border-b px-5">
              <h3 className="text-[16px] font-semibold text-white">第 {promptRow.shot} 镜：最终提示词</h3>
              <button
                aria-label="关闭提示词"
                className="flex h-8 w-8 items-center justify-center rounded-[8px] text-white/46 transition hover:bg-white/8 hover:text-white"
                onClick={() => setPromptRow(null)}
                type="button"
              >
                <X className="h-5 w-5" />
              </button>
            </div>
            <div className="space-y-4 overflow-auto p-5 text-[13px] leading-6 text-white/72">
              <section className="rounded-[10px] border border-white/8 bg-white/[0.035] p-4">
                <div className="mb-3 flex items-center justify-between">
                  <h4 className="font-medium text-white">分镜提示词</h4>
                  <span className="rounded-full bg-[#1f8f48]/18 px-2 py-1 text-[12px] text-[#6be49a]">
                    分镜图提示词·已生成
                  </span>
                </div>
                <p>{promptRow.imagePrompt.includes("[视觉风格") ? promptRow.imagePrompt : `${promptRow.imagePrompt} [视觉风格：盛唐·国风二次元]`}</p>
              </section>
              <section className="rounded-[10px] border border-white/8 bg-white/[0.035] p-4">
                <div className="mb-3 flex items-center justify-between">
                  <h4 className="font-medium text-white">视频运动提示词</h4>
                  <span className="rounded-full bg-[#1f8f48]/18 px-2 py-1 text-[12px] text-[#6be49a]">
                    视频运动提示词·已生成
                  </span>
                </div>
                <p>
                  {promptRow.motionPrompt.includes("起始状态")
                    ? promptRow.motionPrompt
                    : `起始状态：${promptRow.sceneDescription} 动作过程：${promptRow.cameraMovement}，角色动作自然连贯。 结束状态：镜头停留在关键情绪或剧情转折点。 音效：${promptRow.voiceAndSfx} [视觉风格：盛唐·国风二次元]`}
                </p>
              </section>
            </div>
            <div className="flex h-14 items-center justify-between border-white/8 border-t px-5 text-[13px] text-white/46">
              <span>GVLM 3.1 Flash</span>
              <div className="flex items-center gap-4">
                <span>消耗 2</span>
                <button
                  className="h-8 rounded-[8px] bg-white px-3 text-[13px] font-medium text-black transition hover:bg-white/88"
                  onClick={() => toast.success("已重新合成当前镜头提示词")}
                  type="button"
                >
                  重新合成提示词
                </button>
              </div>
            </div>
          </div>
        </div>
      ) : null}
    </div>
  );
}

function getPersistedVideoAnalysisState(node: CloneNode | null | undefined): VideoAnalysisState | null {
  if (!node) return null;
  const raw =
    node?.draftValues?.videoAnalysis &&
    typeof node.draftValues.videoAnalysis === "object" &&
    !Array.isArray(node.draftValues.videoAnalysis)
      ? (node.draftValues.videoAnalysis as Record<string, unknown>)
      : null;
  if (!raw) return null;
  const summary = String(raw.summary || "").trim() || "已保存视频解析结果";
  const responseData: VideoAnalysisResponsePayload = {
    analysisRows: Array.isArray(raw.rows) ? (raw.rows as VideoAnalysisResponsePayload["analysisRows"]) : [],
    framePreviews: Array.isArray(raw.framePreviews) ? raw.framePreviews.map((item) => String(item || "").trim()) : [],
    summary,
  };
  const rows = buildVideoAnalysisRows(node, responseData);
  if (rows.length === 0) return null;
  return {
    rows,
    status: "ready",
    summary,
  };
}

function normalizeVideoStoryRow(row: unknown, index: number, nodeId: string): VideoAnalysisRow | null {
  if (!row || typeof row !== "object") return null;
  const record = row as Partial<VideoAnalysisRow> & Record<string, unknown>;
  const sceneDescription = cleanVideoStoryText(record.sceneDescription || record.description, `镜头 ${index + 1}`);
  return {
    id: String(record.id || `${nodeId}-video-story-row-${index}`),
    shot: formatVideoStoryShot(record.shot, index),
    startTime: cleanVideoStoryText(record.startTime, index === 0 ? "0" : ""),
    endTime: cleanVideoStoryText(record.endTime, record.duration || ""),
    duration: cleanVideoStoryText(record.duration, ""),
    sceneDescription,
    narrative: cleanVideoStoryText(record.narrative || record.story, sceneDescription),
    shotSize: cleanVideoStoryText(record.shotSize, "中景至近景"),
    cameraAngle: cleanVideoStoryText(record.cameraAngle, "平视"),
    cameraMovement: cleanVideoStoryText(record.cameraMovement, "缓慢推镜头 (Slow Zoom In)"),
    focusDepth: cleanVideoStoryText(record.focusDepth, "浅景深"),
    lighting: cleanVideoStoryText(record.lighting, "冷调低沉照明，主体光线柔和。"),
    backgroundMusic: cleanVideoStoryText(record.backgroundMusic, "无"),
    voiceAndSfx: cleanVideoStoryText(record.voiceAndSfx, "无"),
    imagePrompt: cleanVideoStoryText(record.imagePrompt, sceneDescription),
    motionPrompt: cleanVideoStoryText(record.motionPrompt, "The camera moves smoothly and keeps the motion continuous."),
    keyframeUrl: cleanVideoStoryText(record.keyframeUrl || record.previewUrl || record.imageUrl, ""),
  };
}

function getVideoStoryRows(node: CloneNode | null | undefined): VideoAnalysisRow[] {
  const rawRows = Array.isArray(node?.draftValues?.rows) ? node.draftValues.rows : [];
  return rawRows
    .map((row, index) => normalizeVideoStoryRow(row, index, node?.id || "video-story"))
    .filter((row): row is VideoAnalysisRow => Boolean(row));
}

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;
  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 === 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") return "text";
  return "image";
}

function functionRequiresMedia(definition: VideoCanvasFunctionDefinition) {
  if (definition.route === "local") 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: AUDIO_SOURCE_URL,
      title,
      width: 720,
    };
  }
  if (template.kind === "video") {
    return {
      action: "VIDEO_RESOURCE",
      height: 315,
      mediaType: "video",
      mediaUrl: SCRIPT_VIDEO_REFERENCE_URL,
      title,
      width: 560,
    };
  }

  let mediaUrl = CHARACTER_IMAGE_URL;
  if (definition.key === "first-frame-video") mediaUrl = VIDEO_FIRST_FRAME_SOURCE_URL;
  if (definition.key === "first-last-frame-video") {
    mediaUrl = index === 0 ? VIDEO_FIRST_LAST_FIRST_URL : VIDEO_FIRST_LAST_LAST_URL;
  }
  if (definition.key === "audio-to-video") mediaUrl = AUDIO_REFERENCE_IMAGE_URL;
  if (definition.key === "image-to-prompt") mediaUrl = FIRST_FRAME_IMAGE_URL;
  if (definition.key === "hd-upscale") mediaUrl = HD_IMAGE_SOURCE_URL;

  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"
        ? 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"
        ? 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 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) {
  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.slice(0, 4);
}

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) {
  const usable = models.filter((model) => getCanvasModelRef(model));
  let filtered = usable;
  if (kind === "image") {
    filtered = usable.filter(isCanvasImageModel);
  } else if (kind === "video") {
    filtered = usable.filter(isCanvasVideoModel);
  } else if (kind === "multimodal") {
    filtered = usable.filter(
      (model) => model.isMultimodal || model.supportsVision || (!isCanvasImageModel(model) && !isCanvasVideoModel(model)),
    );
  }
  return filtered.length ? filtered : usable;
}

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 (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") {
    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 "";
      }
    })
  );

  const urls = Array.from(
    new Set(
      resolved
        .map((item) => String(item || "").trim())
        .filter(Boolean)
    )
  );
  return urls.length > 0 ? urls : fallbackUrl ? [fallbackUrl] : [];
}

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 && (node.kind === "media" || node.kind === "script") && !!getPresetControlMode(node);
}

function getTargetModuleKind(node: CloneNode): AddModuleKind | null {
  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 === "video-clip" ||
    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 {
  if (node.kind === "media" || 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 === "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 {
  const action = getDraftString(node, "action");
  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 {
  return {
    id: makeId(mediaType),
    kind: "media",
    title,
    subtitle: generated ? "生成结果" : mediaType === "audio" ? "音频资源" : "素材资源",
    inputType: mediaType,
    x,
    y,
    width,
    height,
    accent: mediaType === "audio" ? "#9ee6bb" : mediaType === "video" ? "#8b96ff" : "#8790ff",
    draftValues: {
      action,
      generated,
      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: isGenerator ? [] : [STORY_SCRIPT_TEXT],
      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",
      mediaUrl: CHARACTER_IMAGE_URL,
      preset,
      title: "角色图",
      width: 874,
      x: Math.round(center.x - 874 - distance / 2),
      y: Math.round(center.y - 320),
    });
    const rightBase = createPresetMediaNode({
      action: "IMAGE_GENERATE",
      generated: true,
      height: 520,
      mediaType: "image",
      mediaUrl: CHARACTER_THREE_VIEW_URL,
      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 === "首帧图生视频") {
    const preset = "first-frame";
    const left = createPresetMediaNode({
      action: "IMAGE_RESOURCE",
      height: 430,
      mediaType: "image",
      mediaUrl: FIRST_FRAME_IMAGE_URL,
      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",
      mediaUrl: AUDIO_SOURCE_URL,
      preset,
      title: "音频",
      width: 720,
      x: leftX,
      y: leftY,
    });
    const image = createPresetMediaNode({
      action: "IMAGE_RESOURCE",
      height: 400,
      mediaType: "image",
      mediaUrl: AUDIO_REFERENCE_IMAGE_URL,
      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 connectionDragCleanupRef = useRef<(() => void) | null>(null);
  const connectionDragRef = useRef<EndpointConnectionDragState | null>(null);
  const assetManagerResizeCleanupRef = useRef<(() => void) | null>(null);
  const dragRef = useRef<DragState | null>(null);
  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 [edges, setEdges] = useState<CloneEdge[]>([]);
  const [selectedNodeId, setSelectedNodeId] = useState<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 [markSelectionTargetId, setMarkSelectionTargetId] = useState<string | null>(null);
  const [markAnalysisState, setMarkAnalysisState] =
    useState<VideoCanvasMarkAnalysisState | null>(null);
  const [effectLibraryTargetNodeId, setEffectLibraryTargetNodeId] =
    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 [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 [isSaving, setIsSaving] = useState(false);
  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 [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 [videoClipRanges, setVideoClipRanges] = useState<Record<string, VideoClipRange>>({});
  const [videoAnalysisStates, setVideoAnalysisStates] = useState<Record<string, VideoAnalysisState>>({});
  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);
      setProjectTitle(title);
      setDraftTitle(title);
      setNodes(restoreNodes(project.canvasData));
      setEdges(restoreEdges(project.canvasData));
    };

    async function loadProject() {
      setIsProjectLoading(true);
      const hasInitialProject = initialProject?.id === canvasId;
      try {
        if (hasInitialProject) {
          hydrateProject(initialProject);
        }

        const result = await canvasService.getProject(canvasId);
        if (!active) return;
        if (result.success && result.data) {
          hydrateProject(result.data);
        } else if (!hasInitialProject) {
          setProjectTitle("未命名");
          setDraftTitle("未命名");
          const seedResult = await canvasService.saveCanvasState(
            canvasId,
            {
              nodes: [],
              edges: [],
              selectedNodeIds: [],
              viewport: DEFAULT_VIEWPORT,
              tool: "select",
            },
            "video"
          );
          if (!seedResult.success) {
            console.warn("Failed to seed blank video canvas", seedResult.error);
          }
        }
      } catch (error) {
        console.warn("Failed to load video canvas project", error);
      } finally {
        setIsProjectLoading(false);
      }
    }

    void loadProject();
    return () => {
      active = false;
    };
  }, [canvasId, initialProject]);

  const saveCanvas = useCallback(async () => {
    setIsSaving(true);
    const result = await canvasService.saveCanvasState(
      canvasId,
      {
        nodes: serializeNodes(nodes) as any,
        edges: serializeEdges(edges) as any,
        selectedNodeIds: selectedNodeId ? [selectedNodeId] : [],
        viewport,
        tool: "select",
      },
      "video"
    );
    if (result.success) {
      toast.success("已保存");
    } else {
      toast.error(result.error || "保存失败");
    }
    setIsSaving(false);
  }, [canvasId, edges, nodes, selectedNodeId, viewport]);

  const commitTitle = useCallback(async () => {
    const nextTitle = draftTitle.trim() || "未命名";
    setProjectTitle(nextTitle);
    setDraftTitle(nextTitle);
    setIsTitleEditing(false);
    await canvasService.updateProject(canvasId, { title: nextTitle }, "video");
  }, [canvasId, 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: Array<{ id: string; title: string }>) => {
      if (snapshots.length === 0) return;

      const nextNodes = snapshots.map((snapshot, index) => {
        const created = createMediaResourceNode({
          action: "DIRECTOR_CAMERA_SNAPSHOT",
          height: DIRECTOR_CAMERA_SNAPSHOT_NODE_HEIGHT,
          mediaType: "image",
          mediaUrl: FIRST_FRAME_IMAGE_URL,
          title: `${directorNode.title} ${snapshot.title}`,
          width: DIRECTOR_CAMERA_SNAPSHOT_NODE_WIDTH,
          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]
  );

  useEffect(() => {
    const timer = window.setInterval(() => {
      setNodes((current) => {
        let changed = false;
        const nextNodes = current.map((node) => {
          if (getDraftString(node, "generationStatus") !== "pending") return node;
          const currentProgress = getDraftNumber(node, "generationProgress", 2);
          const step = currentProgress < 24 ? 2 : currentProgress < 68 ? 1 : 0.35;
          const nextProgress = Math.min(96, Number((currentProgress + step).toFixed(1)));
          if (nextProgress === currentProgress) return node;
          changed = true;
          return {
            ...node,
            draftValues: {
              ...(node.draftValues || {}),
              generationProgress: nextProgress,
            },
          };
        });
        return changed ? nextNodes : current;
      });
    }, 850);

    return () => window.clearInterval(timer);
  }, []);

  const removeGenerationNode = useCallback((nodeId: string) => {
    setNodes((current) => 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);
  }, []);

  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 || FIRST_FRAME_IMAGE_URL,
        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: SCRIPT_VIDEO_REFERENCE_URL,
        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: true,
          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, reference, prompt, presetNode],
        [
          { 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 = edges
        .filter((edge) => edge.target === nodeId)
        .map((edge) => nodes.find((item) => item.id === edge.source))
        .filter((item): item is CloneNode => Boolean(item));
      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 = uniqueUrls(imageReferenceLists.flat());
      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))
      );
      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, promptInput);
        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 {
          const response = await workflowAnalysisService.analyze({
            imageUrls,
            mode: functionKey === "story-script" ? "story-script" : "video-analysis",
            nodeTitle: node.title,
            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
            prompt: finalPrompt,
            videoUrls,
          });
          if (!response.success) throw new Error(response.error || `${definition.label}生成失败`);
          const content =
            response.data?.raw ||
            response.data?.summary ||
            response.data?.agentPlan?.join("\n") ||
            response.data?.analysisRows?.map((row, index) => {
              const scene = row.sceneDescription || `片段 ${index + 1}`;
              return [scene, row.imagePrompt, row.motionPrompt].filter(Boolean).join("\n");
            }).join("\n\n") ||
            "";
          setNodes((current) =>
            current.map((item) =>
              item.id === nodeId
                ? {
                    ...item,
                    kind: "text",
                    subtitle: "生成结果",
                    draftValues: {
                      ...(item.draftValues || {}),
                      content: content ? [content] : item.draftValues?.content,
                      generated: true,
                      generationProgress: 100,
                      generationStatus: "complete",
                      prompt: finalPrompt,
                      rows: response.data?.analysisRows || response.data?.shotIdeas || item.draftValues?.rows,
                    },
                  }
                : item
            )
          );
          toast.success(`${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}生成失败`);
        }
        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, promptInput);
        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 {
          const response = await videoGenerationService.generateVideo({
            images: referenceImages,
            mode: requestedMode,
            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
            prompt: finalPrompt,
            ratio: "16:9",
            resolution: "720p",
          });
          if (!response.success || !response.data?.url) {
            throw new Error(response.error || `${definition.label}生成失败`);
          }
          setNodes((current) =>
            current.map((item) =>
              item.id === nodeId
                ? {
                    ...item,
                    kind: "media",
                    inputType: "video",
                    subtitle: "生成结果",
                    draftValues: {
                      ...(item.draftValues || {}),
                      generated: true,
                      generationProgress: 100,
                      generationStatus: "complete",
                      mediaType: "video",
                      mediaUrl: response.data?.url,
                      nodeType: "video",
                      prompt: finalPrompt,
                      url: [response.data?.url],
                      videoMeta: response.data?.metadata || null,
                    },
                  }
                : item
            )
          );
          toast.success(`${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}生成失败`);
        }
        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, promptInput)
          : isOfficialImagePresetFunctionKey(functionKey)
            ? composeConfiguredImagePresetPrompt(definition, promptInput)
            : composeFunctionPrompt(definition, promptInput);
      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 {
        let generatedUrl = "";
        if (route === "enhance") {
          const response = await imageGenerationService.enhanceImage(sourceUrl);
          generatedUrl = response.success ? response.data?.url || "" : "";
          if (!generatedUrl && !response.success) throw new Error(response.error || "高清处理失败");
        } else if (route === "extend") {
          const response = await imageGenerationService.extendImage(sourceUrl, { prompt: finalPrompt });
          generatedUrl = response.success ? response.data?.url || "" : "";
          if (!generatedUrl && !response.success) throw new Error(response.error || "扩图处理失败");
        } else if (route === "remove-bg") {
          const response = await imageGenerationService.removeBackground(sourceUrl);
          generatedUrl = response.success ? response.data?.url || "" : "";
          if (!generatedUrl && !response.success) throw new Error(response.error || "抠图处理失败");
        } else if (route === "canvas-generate-image" || definition.kind === "image-edit" || definition.kind === "utility") {
          const response = await imageGenerationService.generateImage({
            aspectRatio: isWideGeneration ? "16:9" : undefined,
            billingFeature: getImageGenerationBillingFeature(functionKey),
            imageCount: 1,
            model: getFunctionModel(videoCanvasFunctionConfig, definition, modelOverride),
            prompt: finalPrompt,
            promptExtend: !isWideGeneration,
            referenceImage: sourceUrl,
            referenceImages: extraReferenceImages,
          });
          generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
          if (!generatedUrl && !response.success) throw new Error(response.error || `${definition.label}生成失败`);
        } else {
          throw new Error(`${definition.label || node.title}暂未配置可执行路由`);
        }

        if (!generatedUrl) throw new Error(`${definition.label || node.title}未返回生成结果`);
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "media",
                  inputType: "image",
                  subtitle: "生成结果",
                  draftValues: {
                    ...(item.draftValues || {}),
                    generated: true,
                    generationProgress: 100,
                    generationStatus: "complete",
                    mediaType: "image",
                    mediaUrl: generatedUrl,
                    nodeType: "image",
                    nineGridCells: gridLayout
                      ? Array.from({ length: gridLayout.rows * gridLayout.columns }).map((_, index) => getGridCellVisual(index))
                      : item.draftValues?.nineGridCells,
                    nineGridComposite: gridLayout ? true : item.draftValues?.nineGridComposite,
                    prompt: finalPrompt,
                    sourceUrl,
                    url: [generatedUrl],
                  },
                }
              : item
          )
        );
        toast.success(`${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]
  );

  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 }) => {
      const viewportCenter = toCanvasPoint(window.innerWidth / 2, window.innerHeight / 2);
      const compactSpawn = window.innerWidth < 900 || window.innerHeight < 640;
      const useViewportTopLeftSpawn =
        kind === "text" ||
        kind === "image" ||
        kind === "video" ||
        kind === "video-clip" ||
        kind === "director" ||
        kind === "audio" ||
        kind === "script" ||
        kind === "legacy-script";
      const offset = compactSpawn || useViewportTopLeftSpawn ? { x: 0, y: 0 } : TARGET_MODULE_CENTER_OFFSETS[kind];
      const sameKindCount = nodes.filter((node) => getTargetModuleKind(node) === kind).length;
      const spawnOffset = useViewportTopLeftSpawn ? 0 : sameKindCount * 28;
      const center = point || {
        x: viewportCenter.x + offset.x + spawnOffset,
        y: viewportCenter.y + offset.y + spawnOffset,
      };
      const created = createTargetModuleNode(kind, 0, 0, nodes.length + 1);
      const useTopLeftSpawn = useViewportTopLeftSpawn && !point;
      const node = {
        ...created,
        x: Math.round(useTopLeftSpawn ? center.x : center.x - created.width / 2),
        y: Math.round(useTopLeftSpawn ? center.y : center.y - created.height / 2),
      };
      addNodes([node], []);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
    },
    [addNodes, nodes, toCanvasPoint]
  );

  const addUploadedFilesAtPoint = useCallback(
    (files: File[], center: { x: number; y: number }) => {
      if (files.length === 0) return;
      const newNodes = files.slice(0, 10).map((file, index) => {
        const created = createUploadedMediaNode(file, URL.createObjectURL(file), 0, 0, nodes.length + index + 1);
        return {
          ...created,
          x: Math.round(center.x - created.width / 2 + index * 450),
          y: Math.round(center.y - created.height / 2),
        };
      });
      addNodes(newNodes, []);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
      toast.success(files.length === 1 ? `已添加 ${newNodes[0]?.title || "素材"}` : `已添加 ${newNodes.length} 个素材`);
    },
    [addNodes, nodes.length]
  );

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

  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], []);
      setSelectedNodeId(null);
      setSelectedEdgeId(null);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
    },
    [addNodes, nodes, 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;
      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 };

      addNodes([node], [edge]);
      setSelectedNodeId(node.id);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      setActivePanel(null);
      setConnectionMenu(null);
      toast.success(`已添加并连接 ${node.title}`);
    },
    [addNodes, connectionMenu, nodes]
  );

  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 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;

      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 "打开导演台": {
          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 = createMediaResourceNode({
            mediaType: "image",
            mediaUrl: FIRST_FRAME_IMAGE_URL,
            title: "图片",
            width: 420,
            height: 280,
            x: leftOfAnchor(420),
            y: centerY(280),
          });
          draftUpdates = {
            action: "TEXT_GENERATE",
            content: [],
            params: { ...(anchor.draftValues?.params as Record<string, unknown> | undefined), 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 "图生图": {
          anchorUpdates = {
            kind: "media",
            title: "图片",
            subtitle: "图片资源",
            width: 420,
            height: 280,
            inputType: "image",
          };
          draftUpdates = {
            action: "IMAGE_RESOURCE",
            generated: false,
            mediaType: "image",
            mediaUrl: CHARACTER_IMAGE_URL,
            nodeType: "image",
            url: [CHARACTER_IMAGE_URL],
          };
          connectFromAnchor(makeGenerated("image", "图片生成", rightX));
          break;
        }
        case "图片高清": {
          anchorUpdates = {
            kind: "media",
            title: "图片",
            subtitle: "图片资源",
            width: 420,
            height: 280,
            inputType: "image",
          };
          draftUpdates = {
            action: "IMAGE_RESOURCE",
            generated: false,
            mediaType: "image",
            mediaUrl: HD_IMAGE_SOURCE_URL,
            nodeType: "image",
            url: [HD_IMAGE_SOURCE_URL],
          };
          connectFromAnchor(makeGenerated("image", "高清", rightX, { generatorType: "ENHANCE" }));
          break;
        }
        case "参考":
        case "标记":
        case "风格":
        case "自己编写分镜脚本": {
          setSelectedNodeId(nodeId);
          setNodeContextMenu(null);
          setConnectionMenu(null);
          setCanvasCommand(null);
          return;
        }
        case "音频生视频": {
          anchorUpdates = {
            kind: "media",
            title: "音频",
            subtitle: "音频资源",
            width: 720,
            height: 190,
            inputType: "audio",
          };
          draftUpdates = {
            action: "AUDIO_RESOURCE",
            generated: false,
            mediaType: "audio",
            mediaUrl: AUDIO_SOURCE_URL,
            nodeType: "audio",
            url: [AUDIO_SOURCE_URL],
          };
          const video = {
            ...makeGenerated("video", "视频", Math.round(anchor.x + 720 + OFFICIAL_NODE_GAP), { params: { prompt: AUDIO_TO_VIDEO_PROMPT } }),
            width: 760,
            height: 430,
            y: Math.round(anchor.y + 70),
          };
          const image = createMediaResourceNode({
            mediaType: "image",
            mediaUrl: AUDIO_REFERENCE_IMAGE_URL,
            title: "图片",
            width: 720,
            height: 400,
            x: anchor.x,
            y: Math.round(anchor.y + 300),
          });
          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 "首帧生成视频": {
          draftUpdates = { action: "VIDEO_GENERATE", params: { prompt: VIDEO_FIRST_FRAME_PROMPT } };
          connectToAnchor(
            createMediaResourceNode({
              mediaType: "image",
              mediaUrl: VIDEO_FIRST_FRAME_SOURCE_URL,
              title: "首帧",
              width: 420,
              height: 280,
              x: leftOfAnchor(420),
              y: centerY(280),
            })
          );
          selectedId = anchor.id;
          break;
        }
        case "首尾帧生成视频": {
          draftUpdates = { action: "VIDEO_GENERATE", params: { prompt: VIDEO_FIRST_LAST_PROMPT } };
          const first = createMediaResourceNode({
            mediaType: "image",
            mediaUrl: VIDEO_FIRST_LAST_FIRST_URL,
            title: "首帧",
            width: 420,
            height: 240,
            x: leftOfAnchor(420),
            y: Math.round(anchor.y + 18),
          });
          const last = createMediaResourceNode({
            mediaType: "image",
            mediaUrl: VIDEO_FIRST_LAST_LAST_URL,
            title: "尾帧",
            width: 420,
            height: 240,
            x: leftOfAnchor(420),
            y: Math.round(anchor.y + 286),
          });
          connectToAnchor(first);
          connectToAnchor(last);
          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: "解析视频内容生成分镜脚本。" } };
          connectToAnchor(
            createMediaResourceNode({
              action: "VIDEO_RESOURCE",
              mediaType: "video",
              mediaUrl: SCRIPT_VIDEO_REFERENCE_URL,
              prompt: "解析视频内容生成分镜脚本。",
              title: "视频",
              width: 560,
              height: 315,
              x: leftOfAnchor(560),
              y: centerY(315),
            })
          );
          selectedId = anchor.id;
          break;
        }
        case "角色生成分镜脚本": {
          draftUpdates = { action: "SCRIPT_GENERATE", params: { prompt: SCRIPT_CHARACTER_PROMPT } };
          const first = createMediaResourceNode({
            mediaType: "image",
            mediaUrl: SCRIPT_CHARACTER_ONE_URL,
            title: "角色 1",
            width: 300,
            height: 300,
            x: leftOfAnchor(300),
            y: Math.round(anchor.y + 10),
          });
          const second = createMediaResourceNode({
            mediaType: "image",
            mediaUrl: SCRIPT_CHARACTER_TWO_URL,
            title: "角色 2",
            width: 300,
            height: 300,
            x: leftOfAnchor(300),
            y: Math.round(anchor.y + 330),
          });
          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 !== "首尾帧生成视频"
      ) {
        toast.success(`已按「${actionLabel}」创建关联节点`);
      }
    },
    [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) || CHARACTER_IMAGE_URL;

      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") {
        setNodes((current) =>
          current.map((node) =>
            node.id === anchor.id
              ? {
                  ...node,
                  draftValues: {
                    ...(node.draftValues || {}),
                    annotationMode: true,
                    annotations: node.draftValues?.annotations || [{ label: "主体", x: 42, y: 46 }],
                  },
                }
              : node
          )
        );
        setSelectedNodeId(anchor.id);
        toast.success("已进入标注模式");
        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;
      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;
        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) {
            const response = await imageGenerationService.generateImage({
              aspectRatio: "16:9",
              billingFeature: getImageGenerationBillingFeature(functionKey),
              imageCount: 1,
              model: getFunctionModel(videoCanvasFunctionConfig, definition),
              prompt,
              promptExtend: false,
              referenceImage: sourceUrl,
              referenceImages: extraReferenceImages,
            });
            const generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
            if (generatedUrl) {
              setNodes((current) =>
                current.map((node) =>
                  node.id === pendingGridNode.id && getDraftString(node, "generationStatus") === "pending"
                    ? {
                        ...node,
                        draftValues: {
                          ...(node.draftValues || {}),
                          functionKey,
                          generated: true,
                          generationProgress: 100,
                          generationStatus: "complete",
                          gridPrompt: prompt,
                          mediaUrl: generatedUrl,
                          params: {
                            ...getNodeParams(node),
                            functionKey,
                            mode: "grid",
                            option: resultTitle,
                            prompt,
                            referenceImages: [sourceUrl, ...extraReferenceImages],
                          },
                          prompt,
                          sourceNodeId: anchor.id,
                          sourceUrl,
                          toolbarOption: resultTitle,
                          url: [generatedUrl],
                        },
                      }
                    : node
                )
              );
            } else {
              const errorMessage = response.error || `${definition.label}生成未返回结果`;
              setNodes((current) =>
                current.map((node) =>
                  node.id === pendingGridNode.id && getDraftString(node, "generationStatus") === "pending"
                    ? {
                        ...node,
                        draftValues: {
                          ...(node.draftValues || {}),
                          generationStatus: "failed",
                          generationError: errorMessage,
                        },
                      }
                    : node
                )
              );
              toast.error(`${errorMessage}，已保留占位节点`);
            }
          }
          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) {
          const response = await imageGenerationService.generateImage({
            aspectRatio: "16:9",
            billingFeature: getImageGenerationBillingFeature(functionKey),
            imageCount: 1,
            model: getFunctionModel(videoCanvasFunctionConfig, definition),
            prompt,
            promptExtend: false,
            referenceImage: sourceUrl,
            referenceImages: extraReferenceImages,
          });
          const generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
          if (generatedUrl) {
            setNodes((current) =>
              current.map((node) =>
                node.id === pendingNode.id && getDraftString(node, "generationStatus") === "pending"
                  ? {
                      ...node,
                      subtitle: "生成结果",
                      draftValues: {
                        ...(node.draftValues || {}),
                        functionKey,
                        generated: true,
                        generationProgress: 100,
                        generationStatus: "complete",
                        mediaUrl: generatedUrl,
                        params: {
                          ...getNodeParams(node),
                          functionKey,
                          option: resultTitle,
                          prompt,
                          referenceImages: [sourceUrl, ...extraReferenceImages],
                        },
                        prompt,
                        sourceNodeId: anchor.id,
                        sourceUrl,
                        toolbarOption: resultTitle,
                        url: [generatedUrl],
                      },
                    }
                  : node
              )
            );
          } else {
            const errorMessage = response.error || `${definition.label}生成未返回结果`;
            setNodes((current) =>
              current.map((node) =>
                node.id === pendingNode.id && getDraftString(node, "generationStatus") === "pending"
                  ? {
                      ...node,
                      draftValues: {
                        ...(node.draftValues || {}),
                        generationStatus: "failed",
                        generationError: errorMessage,
                      },
                    }
                  : node
              )
            );
            toast.error(`${errorMessage}，已保留占位节点`);
          }
        }
        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-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);

        let generatedUrl = "";
        if (definition.route === "enhance") {
          const response = await imageGenerationService.enhanceImage(sourceUrl);
          generatedUrl = response.success ? response.data?.url || "" : "";
          if (!generatedUrl && !response.success) toast.error(response.error || "高清处理失败");
        } else if (definition.route === "extend") {
          const response = await imageGenerationService.extendImage(sourceUrl, { prompt });
          generatedUrl = response.success ? response.data?.url || "" : "";
          if (!generatedUrl && !response.success) toast.error(response.error || "扩图处理失败");
        } else if (definition.route === "remove-bg") {
          const response = await imageGenerationService.removeBackground(sourceUrl);
          generatedUrl = response.success ? response.data?.url || "" : "";
          if (!generatedUrl && !response.success) toast.error(response.error || "抠图处理失败");
        } else if (definition.route === "canvas-generate-image") {
          const response = await imageGenerationService.generateImage({
            aspectRatio: "16:9",
            billingFeature: getImageGenerationBillingFeature(functionKey),
            imageCount: 1,
            model: getFunctionModel(videoCanvasFunctionConfig, definition),
            prompt,
            promptExtend: false,
            referenceImage: sourceUrl,
            referenceImages: extraReferenceImages,
          });
          generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
          if (!generatedUrl && !response.success) toast.error(response.error || `${definition.label}处理失败`);
        }

        if (generatedUrl) {
          setNodes((current) =>
            current.map((node) =>
              node.id === pendingNode.id && getDraftString(node, "generationStatus") === "pending"
                ? {
                    ...node,
                    draftValues: {
                      ...(node.draftValues || {}),
                      generated: true,
                      generationProgress: 100,
                      generationStatus: "complete",
                      mediaUrl: generatedUrl,
                      params: {
                        mode: action,
                        prompt,
                        referenceImages: [sourceUrl, ...extraReferenceImages],
                        sourceNodeId: anchor.id,
                        sourceUrl,
                      },
                      sourceNodeId: anchor.id,
                      sourceUrl,
                      toolbarOption: option || "",
                      url: [generatedUrl],
                    },
                  }
                : node
            )
          );
          toast.success(`已生成「${definition.label || title}」结果`);
        } else {
          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]
  );

  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 pollLocalEditTaskForNode = useCallback(async (nodeId: string, taskId: string) => {
    for (let attempt = 0; attempt < LOCAL_EDIT_MAX_POLL_ATTEMPTS; attempt += 1) {
      await wait(attempt < 6 ? 1500 : 2500);
      const response = await imageGenerationService.getImageTask(taskId);
      if (!response.success || !response.data?.task) {
        if (attempt > 4) {
          setNodes((current) =>
            current.map((node) =>
              node.id === nodeId
                ? {
                    ...node,
                    draftValues: {
                      ...(node.draftValues || {}),
                      generationError: response.error || "局部编辑任务查询失败",
                      generationStatus: "failed",
                    },
                  }
                : node
            )
          );
          toast.error(response.error || "局部编辑任务查询失败");
          return;
        }
        continue;
      }

      const { task } = response.data;
      if (task.status === "succeeded") {
        const first = task.result?.images?.[0];
        const generatedUrl = first?.originalUrl || first?.thumbnailUrl || "";
        if (!generatedUrl) {
          setNodes((current) =>
            current.map((node) =>
              node.id === nodeId
                ? {
                    ...node,
                    draftValues: {
                      ...(node.draftValues || {}),
                      generationError: "局部编辑已完成但未返回图片",
                      generationStatus: "failed",
                    },
                  }
                : node
            )
          );
          toast.error("局部编辑已完成但未返回图片");
          return;
        }
        setNodes((current) =>
          current.map((node) =>
            node.id === nodeId
              ? {
                  ...node,
                  subtitle: "生成结果",
                  draftValues: {
                    ...(node.draftValues || {}),
                    generated: true,
                    generationProgress: 100,
                    generationStatus: "complete",
                    localEditMode: false,
                    localEditRegions: [],
                    mediaUrl: generatedUrl,
                    modelRef: task.result?.modelRef,
                    params: {
                      ...getNodeParams(node),
                      model: task.result?.model,
                      taskId,
                    },
                    url: [generatedUrl],
                  },
                }
              : node
          )
        );
        setSelectedNodeId(nodeId);
        toast.success("局部编辑结果已生成");
        return;
      }

      if (task.status === "failed") {
        const errorMessage = task.error || "局部编辑生成失败";
        setNodes((current) =>
          current.map((node) =>
            node.id === nodeId
              ? {
                  ...node,
                  subtitle: "生成失败",
                  draftValues: {
                    ...(node.draftValues || {}),
                    generationError: errorMessage,
                    generationStatus: "failed",
                  },
                }
              : node
          )
        );
        toast.error(errorMessage);
        return;
      }

      const progress = Math.min(96, 8 + attempt * 2);
      setNodes((current) =>
        current.map((node) =>
          node.id === nodeId && getDraftString(node, "generationStatus") === "pending"
            ? {
                ...node,
                draftValues: {
                  ...(node.draftValues || {}),
                  generationProgress: Math.max(getDraftNumber(node, "generationProgress", 2), progress),
                },
              }
            : node
        )
      );
    }

    setNodes((current) =>
      current.map((node) =>
        node.id === nodeId
          ? {
              ...node,
              draftValues: {
                ...(node.draftValues || {}),
                generationError: "局部编辑任务等待超时，请稍后重试",
                generationStatus: "failed",
              },
            }
          : node
      )
    );
    toast.error("局部编辑任务等待超时，请稍后重试");
  }, []);

  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];
        const response = await imageGenerationService.enhanceImage(asset.url, { scaleFactor });
        const generatedUrl = response.success ? response.data?.url || "" : "";
        if (generatedUrl) {
          setNodes((current) =>
            current.map((node) =>
              node.id === pendingNode.id
                ? {
                    ...node,
                    subtitle: "生成结果",
                    draftValues: {
                      ...clearGridSplitDraftValues(node.draftValues),
                      functionKey: definition.key,
                      generated: true,
                      generationProgress: 100,
                      generationStatus: "complete",
                      mediaType: "image",
                      mediaUrl: generatedUrl,
                      nodeType: "image",
                      outputSizeLabel: `${scaleFactor}x 高清`,
                      params: {
                        ...getNodeParams(node),
                        functionKey: definition.key,
                        prompt: definition.prompt,
                        scaleFactor,
                        sourceNodeId: anchor.id,
                        sourceTileIndex: asset.index,
                        sourceUrl: asset.url,
                      },
                      sourceCompositeNodeId: anchor.id,
                      sourceNodeId: anchor.id,
                      sourceUrl: asset.url,
                      url: [generatedUrl],
                    },
                  }
                : node
            )
          );
        } else {
          setNodes((current) =>
            current.map((node) =>
              node.id === pendingNode.id
                ? {
                    ...node,
                    draftValues: {
                      ...clearGridSplitDraftValues(node.draftValues),
                      generationStatus: "failed",
                      generationError: response.error || "宫格高清放大失败",
                    },
                  }
                : node
            )
          );
        }
      }

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

  const submitSelectedImagePrompt = useCallback(
    async (nodeId: string, payload: ComposerSubmitPayload) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      if (!anchor) return;
      const anchorSplit = getNodeGridSplitState(anchor);
      const anchorReferenceImages = await resolveNodeReferenceImages(anchor);
      const referencedNodes = payload.references
        .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.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) || CHARACTER_IMAGE_URL;
      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 = payload.prompt.trim();
      const slashFunctionKey = getOfficialImagePresetFunctionKey(slashScene);
      const functionKey =
        slashFunctionKey ||
        (starterMode === CHARACTER_THREE_VIEW_FUNCTION_KEY
          ? CHARACTER_THREE_VIEW_FUNCTION_KEY
          : "image-repaint");
      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 = Math.max(1, Math.min(4, Number.parseInt(payload.settings.count, 10) || 1));
      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: isWideGeneration ? "2752 × 1536" : created.draftValues?.outputSizeLabel,
          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 = payload.references
        .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("已提交图片生成");

      try {
        if (!videoCanvasFunctionConfig.enabled || !definition?.enabled) {
          throw new Error("视频画布功能未启用，请先在配置中开启");
        }
        const response = await imageGenerationService.generateImage({
          aspectRatio: isWideGeneration ? "16:9" : payload.settings.ratio,
          billingFeature: getImageGenerationBillingFeature(functionKey),
          imageCount: isWideGeneration ? 1 : count,
          model: getFunctionModel(videoCanvasFunctionConfig, definition, payload.settings.model),
          prompt: finalPrompt,
          promptExtend: !isWideGeneration,
          referenceImage: sourceUrl,
          referenceImages: extraReferenceImages,
        });
        const generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
        if (!generatedUrl) {
          throw new Error(response.error || `${definition.label}生成失败`);
        }
        setNodes((current) =>
          current.map((item) =>
            item.id === resultNode.id
              ? {
                  ...item,
                  kind: "media",
                  inputType: "image",
                  subtitle: "生成结果",
                  draftValues: {
                    ...(item.draftValues || {}),
                    action: "IMAGE_RESOURCE",
                    generated: true,
                    generationProgress: 100,
                    generationStatus: "complete",
                    mediaType: "image",
                    mediaUrl: generatedUrl,
                    nodeType: "image",
                    nineGridCells: gridLayout
                      ? Array.from({ length: gridLayout.rows * gridLayout.columns }).map((_, index) => getGridCellVisual(index))
                      : item.draftValues?.nineGridCells,
                    nineGridComposite: gridLayout ? true : item.draftValues?.nineGridComposite,
                    prompt: finalPrompt,
                    sourceUrl,
                    url: [generatedUrl],
                  },
                }
              : item
          )
        );
        toast.success("已按当前提示词生成图片结果");
      } catch (error) {
        setNodes((current) =>
          current.map((item) =>
            item.id === resultNode.id
              ? {
                  ...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}生成失败`);
      }
    },
    [nodes, videoCanvasFunctionConfig]
  );

  const submitVideoTargetComposer = useCallback(
    async (
      nodeId: string,
      payload?: VideoTargetComposerSubmitPayload,
    ) => {
      const node = nodes.find((item) => item.id === nodeId);
      if (!node) return;
      const incomingNodes = edges
        .filter((edge) => edge.target === nodeId)
        .map((edge) => nodes.find((item) => item.id === edge.source))
        .filter((item): item is CloneNode => Boolean(item));
      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 = Array.from(
        new Set(
          [
            ...imageReferenceLists.flat(),
            ...getVideoCanvasMagicMarks(node).map((mark) => mark.imageUrl),
          ]
            .map((item) => String(item || "").trim())
            .filter(Boolean)
        )
      ).slice(0, 12);
      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),
      );
      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 resolution = normalizeVideoResolutionValue(
        requestedSettings?.resolution || params.resolution || paramsSettings.resolution,
      );
      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 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 = String(
        payload?.prompt ?? params.prompt ?? node.draftValues?.prompt ?? "",
      ).trim();
      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: requestedSettings?.autoValidateMaterial ?? normalizeComposerBoolean(
          paramsSettings.autoValidateMaterial ?? paramsSettings.auto_validate_material,
          true,
        ),
        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: requestedSettings?.searchEnabled ?? normalizeComposerBoolean(
          paramsSettings.searchEnabled ?? paramsSettings.search_enabled ?? paramsSettings.searchable,
          true,
        ),
        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
        )
      );

      try {
        const response = await videoGenerationService.generateVideo({
          duration,
          images: referenceImages,
          mode: requestedMode,
          preferredModelRef,
          prompt: finalPrompt,
          ratio,
          resolution,
        });
        if (!response.success || !response.data?.url) {
          throw new Error(response.error || "视频生成失败");
        }
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "media",
                  subtitle: "生成结果",
                  draftValues: {
                    ...clearGridSplitDraftValues(item.draftValues),
                    action: "VIDEO_GENERATE",
                    generated: true,
                    generationProgress: 100,
                    generationStatus: "complete",
                    mediaType: "video",
                    mediaUrl: response.data?.url,
                    nodeType: "video",
                    outputSizeLabel: `${formatVideoResolutionLabel(resolution)} · ${duration}s`,
                    params: {
                      ...getNodeParams(item),
                      duration,
                      effects: effectDescriptors,
                      roles: roleDescriptors,
                      mode: requestedMode,
                      magicMarks,
                      model: normalizeModelRef(preferredModelOverride) || undefined,
                      prompt: rawPrompt || finalPrompt,
                      ratio,
                      referenceImages,
                      resolution,
                      settings: savedSettings,
                    },
                    poster: previewUrl,
                    prompt: rawPrompt || finalPrompt,
                    sourceUrl: previewUrl,
                    url: [response.data?.url],
                    videoMeta: response.data?.metadata || null,
                  },
                }
              : item
          )
        );
        setSelectedNodeId(nodeId);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        toast.success("视频已开始生成并返回结果");
      } catch (error) {
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "media",
                  subtitle: "生成失败",
                  draftValues: {
                    ...clearGridSplitDraftValues(item.draftValues),
                    generationStatus: "failed",
                    generationError: error instanceof Error ? error.message : "视频生成失败",
                    poster: previewUrl,
                  },
                }
              : item
          )
        );
        toast.error(error instanceof Error ? error.message : "视频生成失败");
      }
    },
    [edges, nodes, videoCanvasFunctionConfig]
  );

  const runStoryScriptToolbarAction = useCallback(
    (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 = edges
          .filter((edge) => edge.target === nodeId)
          .map((edge) => nodes.find((item) => item.id === edge.source))
          .filter((item): item is CloneNode => Boolean(item));
        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 textInputs = incomingNodes
          .flatMap((item) => {
            const content = item.draftValues?.content;
            return Array.isArray(content) ? content.filter((value): value is string => typeof value === "string") : [];
          })
          .join("\n\n");
        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, `${draftPrompt}\n\n${textInputs}`.trim());
        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 || undefined,
                      prompt,
                      route: "canvas-workflow-analyze",
                      videoUrls,
                    },
                    prompt,
                  },
                }
              : item
          )
        );
        setSelectedNodeId(nodeId);
        closeTransientUi();
        void (async () => {
          try {
            const response = await workflowAnalysisService.analyze({
              imageUrls,
              mode: "story-script",
              nodeTitle: anchor.title,
              preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, selectedModelRef),
              prompt,
              videoUrls,
            });
            if (!response.success) throw new Error(response.error || "故事脚本生成失败");
            const content =
              response.data?.raw ||
              response.data?.agentPlan?.join("\n") ||
              response.data?.summary ||
              "";
            setNodes((current) =>
              current.map((item) =>
                item.id === nodeId
                  ? {
                      ...item,
                      subtitle: "生成结果",
                      draftValues: {
                        ...(item.draftValues || {}),
                        content: content ? [content] : item.draftValues?.content,
                        generated: true,
                        generationProgress: 100,
                        generationStatus: "complete",
                        prompt,
                        rows: response.data?.analysisRows || response.data?.shotIdeas || item.draftValues?.rows,
                      },
                    }
                  : item
              )
            );
            toast.success("故事脚本已重新生成");
          } 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 : "故事脚本生成失败");
          }
        })();
        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") {
        if (rowsToCreate.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",
                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();
        toast.success(`已批量生成 ${nextNodes.length} 个分镜图片节点`);
        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)));

      if (rowsForVideo.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));
      const 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 || FIRST_FRAME_IMAGE_URL;
        const duration = 5;
        const settings: ComposerSettings = {
          audio: "开启",
          camera: "摄像机",
          count: "1个",
          duration: `${duration}s`,
          model: "seedance-2.0-vip",
          modelLabel: "Seedance 2.0 VIP",
          panorama: referenceImage ? "首帧生成视频" : "文生视频",
          ratio: "16:9",
          resolution: "720P",
        };
        const prompt = buildStoryVideoPrompt(row);
        return {
          id: makeId("story-video"),
          kind: "media",
          title: `分镜视频-#${rowIndex + 1}`,
          subtitle: `${row.scene} · Seedance 2.0 VIP`,
          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: "first-frame-video",
            generated: false,
            generationProgress: 2,
            generationStatus: "pending",
            mediaType: "video",
            mediaUrl: "",
            nodeType: "video",
            outputSizeLabel: `720P · ${duration}s`,
            params: {
              duration,
              functionKey: "first-frame-video",
              imagePrompt: row.imagePrompt,
              mode: referenceImage ? "first-frame" : "text-to-video",
              model: "seedance-2.0-vip",
              modelLabel: "Seedance 2.0 VIP",
              motionPrompt: row.motionPrompt,
              prompt,
              ratio: "16:9",
              referenceImages: referenceImage ? [referenceImage] : [],
              resolution: "720p",
              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;
      });
      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();
      toast.success(`已创建 ${nextNodes.length} 个视频生成器组`);
    },
    [addNodes, edges, nodes, videoCanvasFunctionConfig]
  );

  const updateVideoClipRange = useCallback((nodeId: string, nextRange: VideoClipRange) => {
    setVideoClipRanges((current) => ({
      ...current,
      [nodeId]: {
        start: Math.max(0, Math.min(nextRange.start, 0.94)),
        end: Math.max(Math.min(nextRange.start + 0.04, 1), Math.min(nextRange.end, 1)),
      },
    }));
  }, []);

  const applyVideoClipSelection = useCallback(
    (nodeId: string) => {
      const node = nodes.find((item) => item.id === nodeId);
      if (!node) return;
      const existingRange = normalizeVideoClipRange(
        videoClipRanges[nodeId] || nodes.find((item) => item.id === nodeId)?.draftValues?.clipRange
      );
      const normalizedRange =
        existingRange.end > existingRange.start
          ? existingRange
          : { start: existingRange.start, end: Math.min(1, existingRange.start + 0.12) };
      const durationSeconds = getVideoNodeDurationSeconds(node) * Math.max(0.04, normalizedRange.end - normalizedRange.start);
      setNodes((current) =>
        current.map((item) =>
          item.id === nodeId
            ? {
                ...item,
                draftValues: {
                  ...(item.draftValues || {}),
                  clipDurationLabel: formatClipDurationLabel(durationSeconds),
                  clipRange: normalizedRange,
                },
              }
            : item
        )
      );
      setActiveVideoToolbarMode(null);
      toast.success("已记录当前剪辑范围，视频裁剪导出后端待接入。");
    },
    [nodes, videoClipRanges]
  );

  const downloadMediaNode = useCallback((node: CloneNode) => {
    const mediaUrl = getNodeMediaUrl(node) || getNodeReferenceMediaUrl(node);
    if (!mediaUrl) {
      toast.error("当前资产没有可下载地址");
      return;
    }
    const link = document.createElement("a");
    link.href = mediaUrl;
    const extension = node.inputType === "video" ? "mp4" : node.inputType === "audio" ? "mp3" : "png";
    link.download = `${node.title || "未命名资产"}.${extension}`;
    link.rel = "noreferrer";
    document.body.appendChild(link);
    link.click();
    link.remove();
    toast.success("已开始下载当前资产");
  }, []);

  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(
    (nodeId: string, kind: VideoFrameExtractionKind) => {
      const videoNode = nodes.find((item) => item.id === nodeId);
      if (!videoNode) return;
      const frameLabelMap: Record<VideoFrameExtractionKind, string> = {
        current: "当前帧",
        first: "首帧",
        last: "尾帧",
      };
      const frameUrl =
        getVideoNodePreviewUrl(videoNode) ||
        getNodeSourceMediaUrl(videoNode) ||
        getNodeMediaUrl(videoNode) ||
        FIRST_FRAME_IMAGE_URL;
      const existingFrameCount = nodes.filter(
        (item) =>
          item.draftValues?.sourceVideoNodeId === videoNode.id &&
          item.draftValues?.frameExtractionKind === kind
      ).length;
      const title = `${videoNode.title || "视频"}-${frameLabelMap[kind]}`;
      const created = createMediaResourceNode({
        action: "VIDEO_FRAME_EXTRACT",
        height: 236,
        mediaType: "image",
        mediaUrl: frameUrl,
        title,
        width: 420,
        x: videoNode.x + videoNode.width + OFFICIAL_NODE_GAP,
        y: videoNode.y + existingFrameCount * 260,
      });
      const frameNode: CloneNode = {
        ...created,
        subtitle: "视频帧截取",
        draftValues: {
          ...(created.draftValues || {}),
          frameExtractionKind: kind,
          generated: true,
          outputSizeLabel: "1280 × 720",
          sourceVideoNodeId: videoNode.id,
        },
      };
      addNodes([frameNode], [{ id: makeId("edge"), source: videoNode.id, target: frameNode.id }]);
      setSelectedNodeId(frameNode.id);
      setActiveVideoToolbarMode(null);
      toast.success(`已截取${frameLabelMap[kind]}`);
    },
    [addNodes, nodes]
  );

  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(
    (nodeId: string) => {
      const hdNode = nodes.find((item) => item.id === nodeId);
      if (!hdNode) return;
      const sourceNode = nodes.find((item) => item.id === getDraftString(hdNode, "sourceVideoNodeId"));
      const mediaUrl =
        getNodeReferenceMediaUrl(sourceNode) ||
        getDraftString(hdNode, "sourceUrl") ||
        getNodeMediaUrl(hdNode) ||
        SCRIPT_VIDEO_REFERENCE_URL;

      setNodes((current) =>
        current.map((item) =>
          item.id === nodeId
            ? {
                ...item,
                draftValues: {
                  ...(item.draftValues || {}),
                  generated: false,
                  generationProgress: 8,
                  generationStatus: "pending",
                  mediaUrl: "",
                  url: [],
                },
              }
            : item
        )
      );
      setSelectedNodeId(nodeId);
      window.setTimeout(() => {
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId && getDraftString(item, "generationStatus") === "pending"
              ? {
                  ...item,
                  subtitle: "生成结果",
                  draftValues: {
                    ...(item.draftValues || {}),
                    generated: true,
                    generationProgress: 100,
                    generationStatus: "complete",
                    mediaType: "video",
                    mediaUrl,
                    url: [mediaUrl],
                  },
                }
              : item
          )
        );
      }, 1800);
    },
    [nodes]
  );

  const applyVideoCropSelection = useCallback(
    (nodeId: string) => {
      const videoNode = nodes.find((item) => item.id === nodeId);
      if (!videoNode || videoCropGenerateStates[nodeId]?.status === "loading") return;
      const sourceUrl = getNodeReferenceMediaUrl(videoNode) || getNodeMediaUrl(videoNode);
      if (!sourceUrl) {
        toast.warning("视频尚未加载完成，请稍后再试");
        return;
      }

      setVideoCropGenerateStates((current) => ({
        ...current,
        [nodeId]: { progress: 37, status: "loading" },
      }));
      toast.info("正在裁剪视频，请稍候…");

      window.setTimeout(() => {
        setVideoCropGenerateStates((current) =>
          current[nodeId]?.status === "loading"
            ? { ...current, [nodeId]: { progress: 68, status: "loading" } }
            : current
        );
      }, 650);

      window.setTimeout(() => {
        const existingIndex = nodes.filter(
          (item) =>
            getDraftString(item, "action") === "VIDEO_CROP" &&
            getDraftString(item, "sourceVideoNodeId") === videoNode.id
        ).length;
        const cropNode = createVideoCropResultNode({ existingIndex, sourceNode: videoNode });

        addNodes([cropNode], [{ id: makeId("edge"), source: videoNode.id, target: cropNode.id }]);
        setSelectedNodeId(cropNode.id);
        setSelectedEdgeId(null);
        setActiveVideoToolbarMode(null);
        setVideoCropGenerateStates((current) => {
          const next = { ...current };
          delete next[nodeId];
          return next;
        });
        toast.success("已创建裁剪视频节点并开始上传");

        window.setTimeout(() => {
          setNodes((current) =>
            current.map((item) =>
              item.id === cropNode.id && getDraftString(item, "generationStatus") === "pending"
                ? {
                    ...item,
                    subtitle: "裁剪结果",
                    draftValues: {
                      ...(item.draftValues || {}),
                      generated: true,
                      generationProgress: 100,
                      generationStatus: "complete",
                      mediaType: "video",
                      mediaUrl: sourceUrl,
                      uploadStatus: "complete",
                      url: [sourceUrl],
                    },
                  }
                : item
            )
          );
        }, 1800);
      }, 1300);
    },
    [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) => {
      const videoNode = nodes.find((item) => item.id === nodeId);
      if (!videoNode) return;
      const sourceUrl = getNodeReferenceMediaUrl(videoNode) || getNodeMediaUrl(videoNode);
      if (!sourceUrl) {
        toast.warning("视频尚未加载完成，请稍后再试");
        return;
      }
      const regions = subtitleEraseRegions[nodeId] || [];
      if (mode === "region" && !regions.length) {
        toast.warning("请先框选需要擦除的字幕区域");
        return;
      }
      const existingIndex = nodes.filter(
        (item) =>
          getDraftString(item, "action") === "VIDEO_SUBTITLE_ERASE" &&
          getDraftString(item, "sourceVideoNodeId") === videoNode.id
      ).length;
      const eraseNode = createVideoSubtitleEraseNode({ existingIndex, mode, regions, sourceNode: videoNode });

      setNodes((current) => [...current, eraseNode]);
      setEdges((current) => [...current, { id: makeId("edge"), source: videoNode.id, target: eraseNode.id }]);
      setSelectedNodeId(videoNode.id);
      setSelectedEdgeId(null);
      setActiveVideoToolbarMode(null);

      window.setTimeout(() => {
        setNodes((current) =>
          current.map((item) =>
            item.id === eraseNode.id && getDraftString(item, "generationStatus") === "pending"
              ? {
                  ...item,
                  height: videoNode.height,
                  subtitle: "去字幕结果",
                  width: videoNode.width,
                  draftValues: {
                    ...(item.draftValues || {}),
                    generated: true,
                    generationProgress: 100,
                    generationStatus: "complete",
                    mediaType: "video",
                    mediaUrl: sourceUrl,
                    url: [sourceUrl],
                  },
                }
              : item
          )
        );
      }, VIDEO_SUBTITLE_ERASE_SIMULATED_MS);
    },
    [nodes, subtitleEraseMode, subtitleEraseRegions]
  );

  const splitVideoAudioTrack = useCallback(
    (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) || SCRIPT_VIDEO_REFERENCE_URL;
      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}处理中，请稍候…`);

      window.setTimeout(() => {
        const audioCreated = createMediaResourceNode({
          action: copy.audioAction,
          height: 148,
          mediaType: "audio",
          mediaUrl: AUDIO_SOURCE_URL,
          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 = createMediaResourceNode({
          action: copy.silentAction,
          height: 350,
          mediaType: "video",
          mediaUrl: sourceUrl,
          title: `${baseTitle}_无声`,
          width: 350,
          x: rightX,
          y: splitResultY,
        });
        const silentVideoNode: CloneNode = {
          ...silentCreated,
          subtitle: "无声视频",
          draftValues: {
            ...(silentCreated.draftValues || {}),
            durationSeconds,
            generated: true,
            mediaType: "video",
            nodeType: "video",
            outputSizeLabel,
            silentVideo: true,
            sourceUrl,
            sourceVideoNodeId: videoNode.id,
            sourceVideoTitle: videoNode.title,
            splitMode: mode,
          },
        };

        addNodes(
          [silentVideoNode, audioNode],
          [
            { id: makeId("edge"), source: videoNode.id, target: silentVideoNode.id },
            { id: makeId("edge"), source: videoNode.id, target: audioNode.id },
          ]
        );
        setSelectedNodeId(null);
        setSelectedEdgeId(null);
        setVideoAudioSplitStates((current) => {
          const next = { ...current };
          delete next[nodeId];
          return next;
        });
      }, 6400);
    },
    [addNodes, nodes, videoAudioSplitStates]
  );

  const upsertVideoStoryAnalysisNode = useCallback(
    (
      sourceNode: CloneNode,
      rows: VideoAnalysisRow[],
      summary: string,
      options?: { error?: string; framePreviews?: string[] }
    ) => {
      const existingStoryNode = nodes.find(
        (item) =>
          getDraftString(item, "action") === "VIDEO_STORY_ANALYSIS" &&
          getDraftString(item, "sourceVideoNodeId") === sourceNode.id
      );
      const storyNode = createVideoStoryAnalysisNode({
        error: options?.error,
        existingNode: existingStoryNode,
        framePreviews: options?.framePreviews,
        rows,
        sourceNode,
        summary,
      });

      setNodes((current) => {
        const currentExisting = current.find((item) => item.id === storyNode.id);
        if (currentExisting) {
          return current.map((item) => (item.id === storyNode.id ? { ...storyNode, x: item.x, y: item.y } : item));
        }
        return [...current, storyNode];
      });
      setEdges((current) =>
        current.some((edge) => edge.source === sourceNode.id && edge.target === storyNode.id)
          ? current
          : [...current, { id: makeId("edge"), source: sourceNode.id, target: storyNode.id }]
      );
      setSelectedNodeId(storyNode.id);
      setSelectedEdgeId(null);
      setActiveVideoToolbarMode(null);
      return storyNode.id;
    },
    [nodes]
  );

  const requestVideoAnalysis = useCallback(
    async (nodeId: string) => {
      const node = nodes.find((item) => item.id === nodeId);
      if (!node) return;
      const videoUrl = getNodeReferenceMediaUrl(node);
      const previewImageUrl = getVideoNodePreviewUrl(node);
      if (!videoUrl) {
        toast.error("当前视频暂时没有可解析的素材地址");
        return;
      }
      if (videoAnalysisStates[nodeId]?.status === "loading") {
        return;
      }
      if (videoAnalysisStates[nodeId]?.status === "ready") {
        const existingStoryNode = nodes.find(
          (item) =>
            getDraftString(item, "action") === "VIDEO_STORY_ANALYSIS" &&
            getDraftString(item, "sourceVideoNodeId") === node.id
        );
        if (existingStoryNode) {
          setSelectedNodeId(existingStoryNode.id);
          setSelectedEdgeId(null);
        }
        return;
      }

      const definition = getConfiguredFunction(videoCanvasFunctionConfig, "video-analysis");
      const prompt = composeFunctionPrompt(
        definition,
        [
          "请解析当前视频，输出结构化视频故事表。",
          "每个镜头必须包含：镜号、开始时间、结束时间、时长、画面描述、叙事内容、景别、摄影机角度、摄影机运动、焦距与景深、光线、背景音乐、人声/音效、图像生成提示词、视频运动提示词、关键帧建议。",
          "图像生成提示词和视频运动提示词优先使用英文，其他说明使用中文。",
          `视频标题：${node.title}`,
        ].join("\n")
      );

      setActiveVideoToolbarMode(null);
      setVideoAnalysisStates((current) => ({
        ...current,
        [nodeId]: {
          error: undefined,
          rows: [],
          status: "loading",
          summary: "正在解析视频故事...",
        },
      }));

      try {
        const response = await workflowAnalysisService.analyze({
          imageUrls:
            previewImageUrl && previewImageUrl !== videoUrl ? [previewImageUrl] : undefined,
          mode: "video-analysis",
          nodeTitle: node.title,
          preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition),
          prompt,
          videoUrls: [videoUrl],
        });
        if (!response.success) {
          throw new Error(response.error || "视频解析失败");
        }
        const rows = buildVideoAnalysisRows(node, response.data);
        const summary =
          response.data?.summary?.trim() ||
          response.data?.highlights?.join(" · ") ||
          "已整理出当前视频的镜头节奏与生成建议。";
        const framePreviews = response.data?.framePreviews || [];
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  draftValues: {
                    ...(item.draftValues || {}),
                    videoAnalysis: {
                      framePreviews,
                      rows,
                      summary,
                    },
                  },
                }
              : item
          )
        );
        upsertVideoStoryAnalysisNode(node, rows, summary, { framePreviews });
        setVideoAnalysisStates((current) => ({
          ...current,
          [nodeId]: {
            rows,
            status: "ready",
            summary,
          },
        }));
        toast.success("解析完成，已创建视频故事节点");
      } catch (error) {
        const fallbackRows = buildVideoAnalysisRows(node);
        const errorMessage = error instanceof Error ? error.message : "视频解析失败";
        const summary = "解析失败，先展示本地占位结构，方便继续编排。";
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  draftValues: {
                    ...(item.draftValues || {}),
                    videoAnalysis: {
                      rows: fallbackRows,
                      summary,
                    },
                  },
                }
              : item
          )
        );
        upsertVideoStoryAnalysisNode(node, fallbackRows, summary, { error: errorMessage });
        setVideoAnalysisStates((current) => ({
          ...current,
          [nodeId]: {
            error: errorMessage,
            rows: fallbackRows,
            status: "error",
            summary,
          },
        }));
        toast.error(errorMessage);
      }
    },
    [nodes, upsertVideoStoryAnalysisNode, videoAnalysisStates, videoCanvasFunctionConfig]
  );

  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 = edges
        .filter((edge) => edge.target === nodeId)
        .map((edge) => nodes.find((item) => item.id === edge.source))
        .filter((item): item is CloneNode => Boolean(item));
      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 textInputs = incomingNodes
            .flatMap((item) => {
              const content = item.draftValues?.content;
              return Array.isArray(content) ? content.filter((value): value is string => typeof value === "string") : [];
            })
            .join("\n\n");
          const prompt = composeFunctionPrompt(definition, `${draftPrompt}\n\n${textInputs}`.trim());
          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
            )
          );
          const response = await workflowAnalysisService.analyze({
            imageUrls,
            mode: "story-script",
            nodeTitle: node.title,
            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, selectedModelRef),
            prompt,
            videoUrls,
          });
          if (!response.success) throw new Error(response.error || "故事脚本生成失败");
          const content =
            response.data?.raw ||
            response.data?.agentPlan?.join("\n") ||
            response.data?.summary ||
            "";
          setNodes((current) =>
            current.map((item) =>
              item.id === nodeId
                ? {
                    ...item,
                    draftValues: {
                      ...(item.draftValues || {}),
                      content: content ? [content] : item.draftValues?.content,
                      generated: true,
                      generationProgress: 100,
                      generationStatus: "complete",
                      prompt,
                      rows: response.data?.analysisRows || response.data?.shotIdeas || item.draftValues?.rows,
                    },
                  }
                : item
            )
          );
          toast.success("故事脚本已生成");
          return;
        }

        const definition = getConfiguredFunction(
          videoCanvasFunctionConfig,
          mode === "audio-to-video" ? "audio-to-video" : "first-frame-video",
        );
        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);
        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
          )
        );
        const response = await videoGenerationService.generateVideo({
          duration,
          images: referenceImages,
          mode: requestedMode,
          preferredModelRef,
          prompt,
          ratio,
          resolution,
        });
        if (!response.success || !response.data?.url) {
          throw new Error(response.error || `${definition.label}生成失败`);
        }
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "media",
                  subtitle: "生成结果",
                  draftValues: {
                    ...(item.draftValues || {}),
                    generated: true,
                    generationProgress: 100,
                    generationStatus: "complete",
                    mediaType: "video",
                    mediaUrl: response.data?.url,
                    nodeType: "video",
                    outputSizeLabel: `${formatVideoResolutionLabel(resolution)} · ${duration}s`,
                    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: [response.data?.url],
                    videoMeta: response.data?.metadata || null,
                  },
                }
              : item
          )
        );
        toast.success(`${definition.label}已生成`);
      } 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]
  );

  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} - 副本`,
      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);

    const incomingNodes = edges
      .filter((edge) => edge.target === nodeId)
      .map((edge) => nodes.find((item) => item.id === edge.source))
      .filter((item): item is CloneNode => Boolean(item));
    const imageReferenceLists = await Promise.all(
      incomingNodes
        .filter((item) => item.inputType === "image")
        .map((item) => resolveNodeReferenceImages(item))
    );
    const imageUrls = Array.from(
      new Set(
        imageReferenceLists
          .flat()
          .map((item) => String(item || "").trim())
          .filter(Boolean)
      )
    ).slice(0, 12);
    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 = String(params.prompt || node.draftValues?.prompt || "");

    try {
      if (node.inputType === "image" || /IMAGE_GENERATE/.test(action)) {
        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);
        const sourceUrl = imageUrls[0] || getNodeReferenceMediaUrl(node);
        const extraReferenceImages = imageUrls.slice(1);
        const prompt =
          functionKey === MULTI_VIEW_NINE_GRID_FUNCTION_KEY
            ? composeMultiViewNineGridPrompt(definition, String(params.option || node.title))
            : isWideImageGenerationFunction(functionKey)
              ? composeConfiguredImagePresetPrompt(definition, rawPrompt || String(params.option || node.title))
            : composeFunctionPrompt(definition, rawPrompt || String(params.option || node.title));
        const gridLayout = getPresetGridLayout(functionKey);
        let generatedUrl = "";

        if (definition.route === "enhance" && sourceUrl) {
          const response = await imageGenerationService.enhanceImage(sourceUrl);
          generatedUrl = response.success ? response.data?.url || "" : "";
          if (!generatedUrl && !response.success) throw new Error(response.error || "图片增强失败");
        } else {
          const response = await imageGenerationService.generateImage({
            aspectRatio: isWideImageGenerationFunction(functionKey) ? "16:9" : undefined,
            billingFeature: getImageGenerationBillingFeature(functionKey),
            imageCount: 1,
            model: getFunctionModel(videoCanvasFunctionConfig, definition, nodeModelRef),
            prompt,
            promptExtend: !isWideImageGenerationFunction(functionKey),
            referenceImage: sourceUrl || undefined,
            referenceImages: extraReferenceImages,
          });
          generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
          if (!generatedUrl && !response.success) throw new Error(response.error || "图片生成失败");
        }

        if (!generatedUrl) throw new Error("图片生成未返回结果");
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  kind: "media",
                  subtitle: "生成结果",
                  draftValues: {
                    ...clearGridSplitDraftValues(item.draftValues),
                    functionKey,
                    generated: true,
                    generationProgress: 100,
                    generationStatus: "complete",
                    gridColumns: gridLayout?.columns || item.draftValues?.gridColumns,
                    gridPrompt: gridLayout ? prompt : item.draftValues?.gridPrompt,
                    gridRows: gridLayout?.rows || item.draftValues?.gridRows,
                    nineGridCells: gridLayout
                      ? Array.from({ length: gridLayout.rows * gridLayout.columns }).map((_, index) =>
                          getGridCellVisual(index)
                        )
                      : item.draftValues?.nineGridCells,
                    nineGridComposite: gridLayout ? true : item.draftValues?.nineGridComposite,
                    mediaType: "image",
                    mediaUrl: generatedUrl,
                    nodeType: "image",
                    outputSizeLabel: isWideImageGenerationFunction(functionKey)
                      ? "2752 × 1536"
                      : item.draftValues?.outputSizeLabel,
                    params: {
                      ...getNodeParams(item),
                      functionKey,
                      prompt,
                      referenceImages: sourceUrl ? [sourceUrl, ...extraReferenceImages] : extraReferenceImages,
                    },
                    prompt,
                    sourceUrl,
                    url: [generatedUrl],
                  },
                }
              : item
          )
        );
        toast.success(`${node.title} 已生成图片结果`);
        return;
      }

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

      if (node.inputType === "text" || /SCRIPT_GENERATE|TEXT_GENERATE/.test(action)) {
        const definition = getConfiguredFunction(
          videoCanvasFunctionConfig,
          imageUrls.length > 0 || videoUrls.length > 0 ? "image-to-prompt" : "story-script",
        );
        const prompt = composeFunctionPrompt(definition, rawPrompt || STORY_SCRIPT_PROMPT);
        const response = await workflowAnalysisService.analyze({
          imageUrls,
          mode: definition.key === "story-script" ? "story-script" : "agent-plan",
          nodeTitle: node.title,
          prompt,
          preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, nodeModelRef),
          videoUrls,
        });
        if (!response.success) throw new Error(response.error || "多模态分析失败");
        const content =
          response.data?.raw ||
          response.data?.agentPlan?.join("\n") ||
          response.data?.summary ||
          response.data?.recommendedNextSteps?.join("\n") ||
          "";
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  draftValues: {
                    ...(item.draftValues || {}),
                    content: content ? [content] : item.draftValues?.content,
                    generated: true,
                    prompt,
                    rows: response.data?.analysisRows || response.data?.shotIdeas || item.draftValues?.rows,
                  },
                }
              : item
          )
        );
        toast.success(`${node.title} 已生成文本结果`);
        return;
      }

      toast.info(`${node.title} 暂无可执行的后端动作`);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : `${node.title} 生成失败`);
    }
  }, [edges, nodes, submitVideoTargetComposer, videoCanvasFunctionConfig]);

  const deleteNode = useCallback((nodeId: string, options?: { silent?: boolean }) => {
    setNodes((current) => 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("节点已删除");
    }
  }, []);

  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);
        setViewport(PRESET_VIEWPORT);
        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 startNodeDrag = useCallback(
    (event: ReactPointerEvent, node: CloneNode) => {
      event.stopPropagation();
      if (markSelectionTargetId) {
        event.preventDefault();
        const mediaType = getDraftString(node, "mediaType") || node.inputType;
        const imageUrl = getNodeReferenceMediaUrl(node);
        const eligible =
          node.id !== markSelectionTargetId &&
          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 (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;

        setEdges((current) => {
          const connected = current.some(
            (edge) => edge.source === node.id && edge.target === referenceSelectionTargetId
          );
          if (connected) {
            return current.filter(
              (edge) => !(edge.source === node.id && edge.target === referenceSelectionTargetId)
            );
          }
          return [
            ...current,
            { id: makeId("edge"), source: node.id, target: referenceSelectionTargetId },
          ];
        });
        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;
      }

      event.currentTarget.setPointerCapture(event.pointerId);
      setSelectedNodeId(node.id);
      setSelectedEdgeId(null);
      setInspectorNodeId(null);
      setCanvasCommand(null);
      setNodeContextMenu(null);
      dragRef.current = {
        kind: "node",
        id: node.id,
        startX: event.clientX,
        startY: event.clientY,
        nodeX: node.x,
        nodeY: node.y,
      };
    },
    [
      analyzeVideoCanvasMark,
      connectExistingNodes,
      getCanvasPoint,
      lineConnectState,
      markAnalysisState,
      markSelectionTargetId,
      referenceSelectionTargetId,
    ]
  );

  const startCanvasDrag = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
    if (event.button !== 0) return;
    if ((event.target as HTMLElement).closest("[data-canvas-overlay]")) return;
    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]);

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      const target = event.target as HTMLElement | null;
      if (target?.closest("input, textarea, select, [contenteditable='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);
        setMarkSelectionTargetId(null);
        setMarkAnalysisState(null);
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [createLineConnectState, deleteNode, deleteSelectedEdge, nodes, selectedEdgeId, selectedNodeId]);

  const onPointerMove = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      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) =>
          current.map((node) =>
            node.id === drag.id
              ? { ...node, x: nextX, y: nextY }
              : node
          )
        );
        return;
      }
      setViewport((current) => ({
        ...current,
        x: Math.round(drag.viewportX + event.clientX - drag.startX),
        y: Math.round(drag.viewportY + event.clientY - drag.startY),
      }));
    },
    [getCanvasPoint, getConnectionHoverNodeId, lineConnectState?.sourceId, lineConnectState?.targetId, snapEnabled, updateEndpointConnectionDrag, viewport.zoom]
  );

  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
    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 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]);

  return (
    <div
      className="relative h-dvh w-full overflow-hidden bg-[#151515] text-white"
      onContextMenu={openCanvasCommand}
      onDoubleClick={openCanvasCommand}
      onPointerDown={startCanvasDrag}
      onPointerMove={onPointerMove}
      onPointerUp={onPointerUp}
      onWheel={onCanvasWheel}
      ref={canvasRef}
    >
      <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.18)_1px,transparent_1px)] bg-[length:16px_16px] bg-[position:2px_2px] opacity-[0.28]" />

      {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}

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

      {cancelGenerationConfirmNodeId ? (
        <CancelGenerationConfirmDialog
          onCancel={() => setCancelGenerationConfirmNodeId(null)}
          onConfirm={() => 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}
        />
        {nodes.map((node) => (
          <CloneCanvasNode
            connectionsHidden={edgesHidden}
            connectionHoverActive={node.id === lineConnectState?.hoverNodeId}
            key={node.id}
            node={node}
            selected={node.id === selectedNodeId}
            onContextMenu={(event) => openNodeContext(event, node)}
            onCancelGeneration={() => cancelGenerationNode(node.id)}
            onClearGridSplit={() => dismissNodeGridSplit(node.id)}
            onClearGridSplitSelection={() => clearNodeGridSplitSelection(node.id)}
            onClearLocalEditRegions={() => clearNodeLocalEditRegions(node.id)}
            onExtractVideoFrame={(kind) => extractVideoFrameNode(node.id, kind)}
            onGenerateVideoHd={() => generateVideoHdUpscaleNode(node.id)}
            onModuleAction={(actionLabel) => runTargetModuleAction(node.id, actionLabel)}
            onOpenConnectionMenu={(event, side) => openConnectionMenu(event, node, side)}
            onOpenScriptWorkflow={() => openStoryScriptWorkflow(node.id)}
            onPointerDown={(event) => 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.id !== markSelectionTargetId &&
                  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 ? (
        <div
          className="-translate-x-1/2 -translate-y-1/2 absolute left-1/2 top-[51%] z-20 w-[900px] max-w-[calc(100vw-180px)]"
          data-canvas-overlay="true"
        >
          <div className="mb-6 flex items-center justify-center gap-2 text-[13px] leading-none text-white/58">
            <PointerBadge />
            <span className="font-bold text-white/60">双击画布</span>
            <span>自由生成节点</span>
          </div>
          <div className="grid grid-cols-4 gap-3">
            {STARTER_CARDS.map((card) => {
              const cover = card.coverUrl || capturedWorkflows[0]?.cover || "";
              return (
                <button
                  className="group relative flex h-[56px] min-w-12 cursor-pointer items-center gap-2 overflow-hidden rounded-[8px] border border-neutral-800 px-4 py-1 text-left shadow-[0_4px_10px_rgba(0,0,0,0.04)] transition"
                  key={card.title}
                  onClick={() => createStarter(card)}
                  type="button"
                >
                  {cover ? (
                    <img
                      alt=""
                      className="absolute left-0 top-0 h-full w-full max-w-none object-cover transition-opacity duration-300 ease-out group-hover:opacity-100"
                      src={cover}
                    />
                  ) : null}
                  <span className="absolute inset-0 rounded-[8px] opacity-0 backdrop-blur-[6px] transition-opacity duration-300 ease-out group-hover:opacity-100 bg-white/12" />
                  <span className="relative z-10 flex items-center gap-2 transition-opacity duration-200 ease-out group-hover:opacity-0">
                    {card.icon === "music" ? <MusicStarterIcon /> : <span />}
                    <span className="text-xs leading-none text-white">{card.title}</span>
                  </span>
                  <span className="pointer-events-none absolute left-1/2 top-1/2 z-20 flex h-7 -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1 rounded-full bg-black/85 px-3 py-2 text-[12px] text-white opacity-0 transition-all duration-300 ease-out group-hover:opacity-100">
                    去生成
                    <ArrowGlyph />
                  </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)}
          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
            activeMode={activeVideoToolbarMode}
            analysisLoading={videoAnalysisStates[selectedVideoMediaNode.id]?.status === "loading"}
            anchor={selectedVideoAnchor}
            audioSplitLoading={videoAudioSplitStates[selectedVideoMediaNode.id]?.status === "loading"}
            onAnalyze={() => {
              setActiveVideoToolbarMode(null);
              void requestVideoAnalysis(selectedVideoMediaNode.id);
            }}
            onAudioVideoSplit={() => splitVideoAudioTrack(selectedVideoMediaNode.id, "audio-video")}
            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} />
              <VideoInlineActionBar
                actionLabel={VIDEO_CROP_INLINE_LABEL}
                anchor={selectedVideoAnchor}
                applyBusyLabel={
                  selectedVideoCropGenerateState
                    ? `生成中 ${Math.round(selectedVideoCropGenerateState.progress)}%`
                    : 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
              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)}
              onReset={() => updateVideoClipRange(selectedVideoMediaNode.id, { start: 0.18, end: 0.52 })}
            />
          ) : null}
        </div>
      ) : 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}
          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 === "video" && selectedTargetAnchor ? (
        <VideoTargetModuleComposer
          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 ? (
        <AudioTargetModuleComposer anchor={selectedTargetAnchor} />
      ) : null}

      {storyWorkflowNode ? (
        <StoryScriptWorkflowDialog
          node={storyWorkflowNode}
          onClose={() => setStoryWorkflowNodeId(null)}
          onRun={() => {
            void runNode(storyWorkflowNode.id);
          }}
          onStepChange={setStoryWorkflowStep}
          step={storyWorkflowStep}
        />
      ) : null}

      <TopBar
        draftTitle={draftTitle}
        isTitleEditing={isTitleEditing}
        onAccount={() => toggleTopPanel("account")}
        onCommitTitle={commitTitle}
        onDraftTitleChange={setDraftTitle}
        onStartTitleEdit={() => setIsTitleEditing(true)}
        projectTitle={projectTitle}
        routerBack={() => router.push("/")}
        siteLogo={siteBrandSettings?.siteLogo}
        siteLogoDark={siteBrandSettings?.siteLogoDark}
        siteName={resolvedSiteName}
      />

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

      <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)}
          onGallerySelect={() => setActivePanel("assets")}
          onHistorySelect={() => setActivePanel("historyPicker")}
          onUploadFiles={addUploadedFiles}
        />
      ) : null}

      {activePanel === "workflow" ? (
        <WorkflowPanel
          workflows={capturedWorkflows}
          onAdd={addWorkflowPreset}
          onClose={() => setActivePanel(null)}
        />
      ) : null}

      {inspectorNode ? (
        <InspectorPanel
          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)}
        />
      ) : null}

      {activePanel === "assets" ? (
        <AssetLibraryLauncherPanel
          onClose={() => setActivePanel(null)}
          onOpenEffectLibrary={() => setActivePanel("effectLibrary")}
          onOpenStyleLibrary={() => 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);
          }}
          onApplyStyle={addStyleAssetFromMarket}
          selectedEffectTitle={getDraftString(
            effectLibraryConnectedNode,
            "effectTitle",
          )}
        />
      ) : null}

      {activePanel === "history" ? (
        <HistoryAssetsPanel
          listDownloadPendingId={historyListDownloadPendingId}
          nodes={nodes}
          onClose={() => setActivePanel(null)}
          onOpenWatermarkRules={openHistoryWatermarkRules}
          onSelectNode={setSelectedNodeId}
          onUseNode={reuseHistoryAssetNode}
        />
      ) : null}

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

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

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

      {activePanel === "shortcuts" ? (
        <ShortcutPanel onClose={() => setActivePanel(null)} />
      ) : 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)} />
      ) : 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}

      {directorConsoleNode ? (
        <DirectorConsole3DDialog
          node={directorConsoleNode}
          onSendSnapshotsToCanvas={(snapshots) => sendDirectorSnapshotsToCanvas(directorConsoleNode, snapshots)}
          onTutorialActiveChange={setDirectorTutorialActive}
          onClose={() => setDirectorConsoleNodeId(null)}
          tutorialActive={directorTutorialActive}
        />
      ) : null}

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

      {angleEditorNode ? (
        <MultiAngleEditorDialog
          node={angleEditorNode}
          onApply={async (settings) => {
            const angleDefinition = getConfiguredFunction(videoCanvasFunctionConfig, "angle-edit");
            const sourceUrl = getNodeMediaUrl(angleEditorNode) || getNodeSourceMediaUrl(angleEditorNode);
            let generatedUrl = "";
            if (sourceUrl && videoCanvasFunctionConfig.enabled && angleDefinition?.enabled) {
              const response = await imageGenerationService.editAngle({
                horizontalAngle: settings.horizontalAngle,
                imageUrl: sourceUrl,
                verticalAngle: settings.verticalAngle,
                zoom: settings.zoom,
              });
              generatedUrl = response.success ? response.data?.url || response.data?.thumbnailUrl || "" : "";
              if (!generatedUrl && !response.success) {
                toast.error(response.error || "多角度生成失败，已保留参数");
              }
            }
            setNodes((current) =>
              current.map((node) =>
                node.id === angleEditorNode.id
                  ? {
                      ...node,
                      draftValues: {
                        ...(node.draftValues || {}),
                        angleSettings: settings,
                        params: {
                          ...((node.draftValues?.params as Record<string, unknown> | undefined) || {}),
                          horizontal_angle: settings.horizontalAngle,
                          prompt: settings.promptEnabled ? "按自定义多角度参数生成视角变化" : "",
                          vertical_angle: settings.verticalAngle,
                          zoom: settings.zoom,
                        },
                      },
                    }
                  : node
              )
            );
            if (generatedUrl) {
              const resultNode = createMediaResourceNode({
                action: "IMAGE_RESOURCE",
                height: 280,
                mediaType: "image",
                mediaUrl: generatedUrl,
                prompt: angleDefinition.prompt,
                title: "多角度结果",
                width: 420,
                x: Math.round(angleEditorNode.x + angleEditorNode.width + OFFICIAL_NODE_GAP),
                y: Math.round(angleEditorNode.y + angleEditorNode.height / 2 - 140),
              });
              setNodes((current) => [
                ...current,
                {
                  ...resultNode,
                  draftValues: {
                    ...(resultNode.draftValues || {}),
                    angleSettings: settings,
                    generated: true,
                    sourceNodeId: angleEditorNode.id,
                    sourceUrl,
                  },
                },
              ]);
              setEdges((current) => [
                ...current,
                { id: makeId("edge"), source: angleEditorNode.id, target: resultNode.id },
              ]);
              setSelectedNodeId(resultNode.id);
            }
            setAngleEditorNodeId(null);
            toast.success(generatedUrl ? "已按多角度参数生成结果" : "已应用多角度参数");
          }}
          onClose={() => setAngleEditorNodeId(null)}
        />
      ) : null}

      {isBusy ? (
        <div
          className="pointer-events-none fixed left-1/2 top-20 z-[45] flex -translate-x-1/2 items-center gap-2 rounded-[8px] border border-white/10 bg-[#202020]/88 px-3 py-2 text-[12px] text-white/62 shadow-[0_14px_36px_rgba(0,0,0,0.34)] backdrop-blur-[10px]"
          data-canvas-overlay="true"
        >
          <Loader2 className="h-4 w-4 animate-spin" />
          <span>项目加载中...</span>
        </div>
      ) : null}
    </div>
  );
}

function TopBar({
  draftTitle,
  isTitleEditing,
  onAccount,
  onCommitTitle,
  onDraftTitleChange,
  onStartTitleEdit,
  projectTitle,
  routerBack,
  siteLogo,
  siteLogoDark,
  siteName,
}: {
  draftTitle: string;
  isTitleEditing: boolean;
  onAccount: () => 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-4 z-40 flex h-12 items-center justify-between pl-2 pr-4">
      <div className="pointer-events-auto flex items-center gap-3">
        <button
          className="flex h-10 cursor-pointer items-center justify-center rounded-xl 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" />
        {isTitleEditing ? (
          <input
            autoFocus
            className="h-8 min-w-[60px] max-w-[160px] rounded-[8px] border border-white/14 bg-transparent px-2 text-sm font-medium text-white outline-none"
            onBlur={onCommitTitle}
            onChange={(event) => onDraftTitleChange(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Enter") onCommitTitle();
            }}
            value={draftTitle}
          />
        ) : (
          <button
            className="max-w-[160px] truncate text-sm font-medium text-white/78"
            onClick={onStartTitleEdit}
            type="button"
          >
            {projectTitle || "未命名"}
          </button>
        )}
      </div>

      <div className="pointer-events-auto flex items-center gap-2">
        <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 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,
  onOpen,
}: {
  activePanel: ActivePanel;
  onOpen: (panel: Exclude<ActivePanel, null>) => void;
}) {
  return (
    <aside
      className="fixed bottom-[15px] left-1/2 z-40 flex -translate-x-1/2 items-center gap-2 rounded-xl border border-white/9 bg-[#202020]/95 p-1 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 && "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>
          </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({
  activeMode,
  analysisLoading = false,
  anchor,
  audioSplitLoading = false,
  onAnalyze,
  onAudioVideoSplit,
  onHdOption,
  onSubtitleErase,
  onToggleCrop,
  onToggleClip,
  onVoiceSplit,
}: {
  activeMode: VideoToolbarMode;
  analysisLoading?: boolean;
  anchor?: PresetControlAnchor;
  audioSplitLoading?: boolean;
  onAnalyze: () => 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",
            }
      }
    >
      <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} />}
          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}>
            <div className="group relative">
              <div 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 group-hover:bg-white/8 group-hover:text-white">
                <span className="flex h-5 w-5 shrink-0 items-center justify-center text-white/46">
                  <Music2 className="h-4 w-4" strokeWidth={2.1} />
                </span>
                <span className="min-w-0 flex-1 truncate">人声分离</span>
                <ChevronRight className="h-3.5 w-3.5 shrink-0 text-white/44" />
              </div>
              <VideoToolbarSubmenu width={168}>
                <VideoToolbarMenuItem
                  icon={<Music2 className="h-4 w-4" strokeWidth={2.1} />}
                  label="仅保留人声"
                  onClick={() => {
                    setMenu(null);
                    onVoiceSplit("voice");
                  }}
                />
                <VideoToolbarMenuItem
                  icon={<Headphones className="h-4 w-4" strokeWidth={2.1} />}
                  label="仅保留背景音"
                  onClick={() => {
                    setMenu(null);
                    onVoiceSplit("background");
                  }}
                />
              </VideoToolbarSubmenu>
            </div>
            <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("Topazlabs")}
        type="button"
      >
        <span>Topazlabs</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,
}: {
  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);
  const cardLeft = anchor.centerX - nodeWidth / 2;
  const cropLeft = cardLeft + nodeWidth * VIDEO_CROP_RECT.x;
  const cropTop = cardTop + cardHeight * VIDEO_CROP_RECT.y;
  const cropWidth = nodeWidth * VIDEO_CROP_RECT.width;
  const cropHeight = cardHeight * VIDEO_CROP_RECT.height;
  const handlePoints = [
    ["left-0 top-0 -translate-x-1/2 -translate-y-1/2"],
    ["left-1/2 top-0 -translate-x-1/2 -translate-y-1/2"],
    ["right-0 top-0 translate-x-1/2 -translate-y-1/2"],
    ["right-0 top-1/2 -translate-y-1/2 translate-x-1/2"],
    ["right-0 bottom-0 translate-x-1/2 translate-y-1/2"],
    ["left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2"],
    ["left-0 bottom-0 -translate-x-1/2 translate-y-1/2"],
    ["left-0 top-1/2 -translate-x-1/2 -translate-y-1/2"],
  ];

  return (
    <div className="pointer-events-none absolute inset-0 z-[31]">
      <div
        className="absolute rounded-[4px] border border-white/78 bg-black/10 shadow-[0_0_0_9999px_rgba(0,0,0,0.34)]"
        style={{ height: cropHeight, left: cropLeft, top: cropTop, width: cropWidth }}
      >
        <span className="absolute left-2 top-2 rounded-[5px] bg-black/58 px-1.5 py-0.5 text-[10px] text-white/82">
          {VIDEO_CROP_INLINE_LABEL}
        </span>
        {handlePoints.map(([className]) => (
          <span
            className={cn("absolute h-2 w-2 rounded-full border border-white bg-[#1f1f1f]", className)}
            key={className}
          />
        ))}
      </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-[22px] font-semibold leading-none text-white/44">
        <Wand2 className="h-[22px] w-[22px]" />
        <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-[16px] 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 generationStatus = getDraftString(node, "generationStatus");
  const isGenerating = generationStatus === "pending";
  const generated = Boolean(node.draftValues?.generated);
  const mediaUrl = getNodeMediaUrl(node);
  const progress = getDraftNumber(node, "generationProgress", 0);
  const resolution = getDraftString(node, "hdResolution") || "1080P";
  const outputSizeLabel = getDraftString(node, "outputSizeLabel") || "1920 × 1080";

  return (
    <div className="h-full w-full" data-video-hd-node="true">
      <div className="mb-[10px] flex h-7 items-center gap-2 text-[22px] font-semibold leading-none text-white/44">
        <Sparkles className="h-[22px] w-[22px]" />
        <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
                className="h-full w-full object-cover"
                loop
                muted
                playsInline
                src={mediaUrl}
              />
              <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">
              配置参数
            </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}
                onClick={onGenerate}
                onPointerDown={(event) => event.stopPropagation()}
                type="button"
              >
                {isGenerating ? <Loader2 className="h-4 w-4 animate-spin" /> : <Sparkles className="h-4 w-4" />}
                {isGenerating ? "生成中" : "生成高清视频"}
              </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, "error");
  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 || 1} 镜
        </span>
      </div>
      {summary || error ? (
        <div className="border-b border-white/8 px-4 py-2 text-[12px] leading-5 text-white/48">
          {error || 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">
              暂无视频故事
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function VideoClipEditorBar({
  anchor,
  clipRange,
  durationSeconds,
  onApply,
  onChange,
  onReset,
  previewUrl,
  title,
}: {
  anchor?: PresetControlAnchor;
  clipRange: VideoClipRange;
  durationSeconds: number;
  onApply: () => void;
  onChange: (range: VideoClipRange) => 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) 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);
    };
  }, [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)]"
                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)]"
                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"
          onClick={() => toast.info("视频音轨编辑后端待接入。")}
          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"
          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"
          onClick={onApply}
          type="button"
        >
          <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,
  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;
  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"
          modelOptions={modelOptions}
          nodes={nodes}
          onSubmit={onComposerSubmit}
          referenceThumbnailUrl={getNodeReferenceMediaUrl(selectedNode) || CHARACTER_IMAGE_URL}
        />
      </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}
          submitMessage="故事脚本生成接口待接入。"
          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={[
            PRESET_MEDIA_TOOLBAR_ITEMS["first-frame-hd"],
            PRESET_MEDIA_TOOLBAR_ITEMS["first-frame-outpaint"],
            PRESET_MEDIA_TOOLBAR_ITEMS["first-frame-background"],
            PRESET_MEDIA_TOOLBAR_ITEMS["first-frame-download"],
          ]}
        />
        <PresetComposerPanel
          anchor={anchor}
          billingDefinition={definition}
          defaultModel={getFunctionModelValue(functionConfig, definition)}
          membershipSummary={membershipSummary}
          modelKind="video"
          modelOptions={modelOptions}
          onSubmit={onPresetSubmit}
          prompt="以当前图为首帧生成视频。"
          submitMessage="首帧图生视频接口待接入。"
          thumbnailUrl={FIRST_FRAME_IMAGE_URL}
          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}
      />
    </div>
  );
}

function TextTargetModuleComposer({
  anchor,
  billingDefinition,
  defaultModel = "auto",
  membershipSummary,
  modelOptions = [],
  node,
  onSubmit,
}: {
  anchor: PresetControlAnchor;
  billingDefinition?: VideoCanvasFunctionDefinition;
  defaultModel?: string;
  membershipSummary?: MembershipSummaryResponse;
  modelOptions?: CanvasModelOption[];
  node: CloneNode;
  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);
              setMenu(null);
            }}
          />
        ) : null}
        <textarea
          className="h-[158px] w-full resize-none bg-transparent text-[20px] leading-8 text-white/64 outline-none placeholder:text-white/38"
          onChange={(event) => setPrompt(event.target.value)}
          onPointerDown={(event) => event.stopPropagation()}
          placeholder="写下你想讲的故事、场景或角色设定。例如：一个来自未来的机器人，在城市屋顶看星星。"
          value={prompt}
        />
        <div className="absolute bottom-5 left-5 right-[84px] flex items-center gap-6 overflow-hidden text-[17px] 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" />
          <ComposerControl label="文" onClick={() => toast.info("翻译接口待接入。")} />
          <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 AudioTargetModuleComposer({ anchor }: { anchor: PresetControlAnchor }) {
  const [text, setText] = useState("");
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [expandedOpen, setExpandedOpen] = useState(false);
  const [modelMenuOpen, setModelMenuOpen] = useState(false);
  const [voiceModalOpen, setVoiceModalOpen] = useState(false);
  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 composerHeight = settingsOpen ? 565 : 189;
  const composerTop = compactComposer
    ? Math.max(12, Math.min(anchor.bottomY + 12, viewportHeight - composerHeight - 12))
    : anchor.bottomY + 12;

  const insertToken = useCallback((token: string) => {
    setText((current) => (current ? `${current} ${token}` : token));
  }, []);

  const renderQuickTools = () => (
    <div className="flex items-center gap-1 pl-1 pt-1">
      {[
        ["<#>", "停顿"],
        ["()", "语气词"],
      ].map(([icon, label]) => (
        <button
          className="flex h-6 shrink-0 items-center gap-1 rounded bg-white/10 px-2 text-[13px] text-white/72 transition-colors hover:bg-white/14 hover:text-white"
          key={label}
          onClick={() => insertToken(icon)}
          type="button"
        >
          <span>{icon}</span>
          <span>{label}</span>
        </button>
      ))}
    </div>
  );

  const renderControlRow = (label: string, value: string, progress: number) => (
    <div className="flex h-8 cursor-auto items-center justify-between gap-4" key={label}>
      <div className="flex min-w-0 max-w-[120px] flex-1 items-center">
        <div className="flex items-center gap-1 text-[13px] text-white/72">{label}</div>
      </div>
      <div className="flex min-w-0 flex-1 items-center gap-4">
        <div className="relative h-1.5 flex-1 rounded-full bg-white/16">
          <div className="absolute left-0 top-0 h-full rounded-full bg-[#2f8cff]" style={{ width: `${progress}%` }} />
          <div
            className="absolute top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white shadow-[0_1px_4px_rgba(0,0,0,0.4)]"
            style={{ left: `${progress}%` }}
          />
        </div>
        <div className="flex h-8 w-[68px] items-center justify-center rounded-lg bg-white/8 text-[13px] text-white/86">
          {value}
        </div>
      </div>
    </div>
  );

  const renderAdvancedSettings = (expanded: boolean) => (
    <div className={cn(expanded ? "shrink-0" : "", "px-4 pt-1 text-[13px] text-white/72")}>
      <div className="h-36">
        <div className="flex h-9 items-center justify-between py-2">
          <span>基础调节</span>
          <button className="rounded px-1 text-white/42 transition hover:text-white/78" type="button">
            一键重置
          </button>
        </div>
        <div className="flex flex-col gap-1 pb-1">
          {renderControlRow("语速", "1.00", 50)}
          {renderControlRow("声调", "0", 58)}
          {renderControlRow("音量", "1.0", 20)}
        </div>
      </div>
      <div className="h-[228px]">
        <div className="flex h-9 items-center justify-between py-2">
          <span>音色效果调节</span>
          <ChevronDown className="h-4 w-4 rotate-180 text-white/55" />
        </div>
        <div className="flex flex-col gap-1 pb-1">
          {renderControlRow("音高", "0", 58)}
          {renderControlRow("强度", "0", 58)}
          {renderControlRow("音色调节", "0", 58)}
        </div>
        <div className="mt-2 text-white/72">音效</div>
        <div className="mt-2 grid h-8 grid-cols-5 overflow-hidden rounded-lg bg-white/8 p-0.5 text-[13px] text-white/42">
          {["无", "空旷回音", "礼堂广播", "电话失真", "电音"].map((effect, index) => (
            <button
              className={cn(
                "rounded-md transition-colors hover:text-white/72",
                index === 0 ? "bg-white/14 text-white/88" : "text-white/42"
              )}
              key={effect}
              type="button"
            >
              {effect}
            </button>
          ))}
        </div>
      </div>
    </div>
  );

  const audioModelOptions = [
    ["Seed Audio 1.0", "多模态音频生成，支持人声、音效、音乐一体化创作"],
    ["Minimax-speech-2.8-hd", "文字转语音，多元的情绪渲染"],
    ["Minimax-speech-2.8-turbo", "文字转语音，快速生成自然的音频效果"],
    ["Eleven V3", "文字转语音，提供高质量、可定制的语音"],
    ["Eleven Music V3", "智能音乐生成，高质量音乐生成"],
    ["Mureka V8", "智能音乐生成，兼具多元风格"],
  ];

  const renderModelMenu = () => (
    <div className="absolute left-0 top-[calc(100%+1px)] z-[80] w-[369px] rounded-xl border border-white/10 bg-[#333]/95 p-1 shadow-[0_16px_36px_rgba(0,0,0,0.42)]">
      <div className="tiny-scrollbar max-h-[400px] w-[360px] overflow-y-auto">
        <div className="flex flex-col gap-1">
          {audioModelOptions.map(([title, description], index) => (
            <button
              className={cn(
                "group flex h-[52px] w-full items-center gap-2 rounded-xl p-2 text-left transition-colors",
                title === "Minimax-speech-2.8-hd" ? "bg-white/15" : "hover:bg-white/8"
              )}
              key={title}
              onClick={() => setModelMenuOpen(false)}
              type="button"
            >
              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-white/8 text-white/70">
                {index === 0 ? <Music2 className="h-4 w-4" /> : <BoxSelect className="h-4 w-4" />}
              </span>
              <span className="min-w-0 flex-1 overflow-hidden pr-1">
                <span className="block truncate text-[14px] text-white/88">{title}</span>
                <span className="block truncate text-[12px] text-white/42">{description}</span>
              </span>
            </button>
          ))}
        </div>
      </div>
    </div>
  );

  const voiceRows = [
    ["青涩青年音色", "中文(普通话)", "男"],
    ["精英青年音色", "中文(普通话)", "男"],
    ["霸道青年音色", "中文(普通话)", "男"],
    ["青年大学生音色", "中文(普通话)", "男"],
    ["少女音色", "中文(普通话)", "女"],
    ["御姐音色", "中文(普通话)", "女"],
    ["成熟女性音色", "中文(普通话)", "女"],
    ["甜美女性音色", "中文(普通话)", "女"],
    ["青涩青年音色-beta", "中文(普通话)", "男"],
  ];

  const renderVoiceModal = () => (
    <div className="fixed inset-0 z-[602] flex items-center justify-center" data-canvas-overlay="true">
      <section className="h-[616px] w-[800px] overflow-hidden rounded-2xl border border-white/10 bg-[#262626] text-white shadow-[0_24px_60px_rgba(0,0,0,0.55)]">
        <div className="flex h-[56px] items-center justify-between border-white/8 border-b px-4 py-3">
          <div className="text-[15px] font-medium text-white/88">音色选择</div>
          <button
            className="flex size-8 items-center justify-center rounded-lg text-white/45 transition-colors hover:bg-white/8 hover:text-white/85"
            onClick={() => setVoiceModalOpen(false)}
            type="button"
          >
            <X className="h-5 w-5" />
          </button>
        </div>
        <div className="flex h-[56px] items-center justify-between gap-3 p-4 pb-0">
          <div className="flex h-10 shrink-0 items-center gap-1 rounded-xl bg-white/8 p-1">
            {["音色库", "我的音色", "收藏音色"].map((tab, index) => (
              <button
                className={cn(
                  "min-w-[76px] whitespace-nowrap rounded-lg px-3 py-1.5 text-[13px] transition-colors",
                  index === 0 ? "bg-white/15 text-white" : "text-white/45 hover:text-white/78"
                )}
                key={tab}
                type="button"
              >
                {tab}
              </button>
            ))}
          </div>
          <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
            <button className="flex h-10 items-center gap-1 rounded-xl bg-[#3CB5CC1A] px-3 text-[#07B8DD] transition-colors hover:bg-[#3CB5CC2A]" type="button">
              <Music2 className="h-4 w-4" />
              克隆新音色
            </button>
            <label className="flex h-10 w-[240px] items-center gap-2 rounded-xl bg-white/8 px-3 text-white/42">
              <Search className="h-4 w-4" />
              <input className="min-w-0 flex-1 bg-transparent text-sm text-white outline-none placeholder:text-white/42" placeholder="搜索音色库" />
            </label>
            <button className="flex h-10 items-center gap-2 rounded-xl bg-white/8 px-3 text-white/78 transition-colors hover:bg-white/12" type="button">
              <SlidersHorizontal className="h-4 w-4" />
              筛选
            </button>
          </div>
        </div>
        <div className="h-[450px] p-4">
          <div className="tiny-scrollbar flex h-full flex-col gap-1 overflow-y-auto">
            {voiceRows.map(([name, language, gender]) => {
              const selected = name === "少女音色";
              return (
                <div
                  className={cn(
                    "group flex h-16 w-full items-center gap-3 rounded-xl p-3 transition-colors",
                    selected ? "bg-white/15" : "bg-white/5 hover:bg-white/10"
                  )}
                  key={name}
                >
                  <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-white/8 text-white/72">
                    <Music2 className="h-4 w-4" />
                  </div>
                  <div className="min-w-0 flex-1 text-[15px] text-white/88">{name}</div>
                  <div className="flex shrink-0 items-center gap-1 text-[12px] text-white/42">
                    <span>{language}</span>
                    <span>{gender}</span>
                  </div>
                  <button
                    className={cn(
                      "h-8 rounded-full px-4 text-[13px] transition-colors",
                      selected ? "bg-white/10 text-white/38" : "bg-white text-neutral-900 hover:bg-white/86"
                    )}
                    type="button"
                  >
                    {selected ? "已选" : "选择"}
                  </button>
                  <button className="flex size-8 items-center justify-center rounded-lg text-white/40 hover:bg-white/8 hover:text-white/78" type="button">
                    <Star className="h-4 w-4" />
                  </button>
                  <button className="flex size-8 items-center justify-center rounded-lg text-white/40 hover:bg-white/8 hover:text-white/78" type="button">
                    ...
                  </button>
                </div>
              );
            })}
          </div>
        </div>
        <div className="flex h-[53px] items-center gap-4 border-white/8 border-t px-4 text-[13px] text-white/45">
          <button className="flex size-7 items-center justify-center rounded-lg bg-white/14 text-white" type="button">1</button>
          {["2", "3", "4", "5", "...", "17"].map((page) => (
            <button className="px-1 transition-colors hover:text-white/80" key={page} type="button">{page}</button>
          ))}
          <button className="px-1 transition-colors hover:text-white/80" type="button">›</button>
          <button className="ml-2 h-8 rounded-lg bg-white/8 px-3 text-white/58" type="button">20条/页</button>
          <span>跳至</span>
          <span className="h-8 w-10 rounded-lg bg-white/8" />
          <span>页</span>
          <span className="ml-auto">共 327 条</span>
        </div>
      </section>
    </div>
  );

  const renderComposerSurface = (expanded: boolean) => {
    const surfaceWidth = expanded ? 800 : 660;
    const surfaceHeight = expanded ? 600 : composerHeight;
    const topSectionClass = expanded ? "flex min-h-0 flex-1 flex-col gap-2 p-2" : "flex min-h-0 flex-col gap-2 p-2";
    const textBoxClass = expanded ? "relative flex min-h-0 flex-1 gap-1" : "relative flex h-24 gap-1";

    return (
      <div
        className="relative flex w-full flex-col gap-0 overflow-hidden rounded-2xl border border-white/8 bg-[#262626] text-white shadow-[0_18px_56px_rgba(0,0,0,0.42)]"
        style={{ height: surfaceHeight, width: surfaceWidth }}
      >
        <div className={cn("flex w-full flex-col", expanded ? "min-h-0 flex-1 overflow-hidden" : "min-h-0")}>
          <div className={topSectionClass}>
            {renderQuickTools()}
            <div className={textBoxClass}>
              <div className={cn("relative flex-1 overflow-hidden rounded-xl p-2", expanded ? "min-h-0" : "min-h-20")}>
                {!text ? (
                  <div className="pointer-events-none absolute left-2 top-2 text-[13px] text-white/34">
                    输入要合成的文本
                  </div>
                ) : null}
                <textarea
                  className="h-full w-full resize-none bg-transparent text-[13px] leading-5 text-white/78 outline-none"
                  maxLength={50000}
                  onChange={(event) => setText(event.target.value)}
                  onPointerDown={(event) => event.stopPropagation()}
                  value={text}
                />
              </div>
            </div>
            <div className="flex h-8 w-full items-center gap-1 text-[13px] text-white/64">
              <div className="relative shrink-0">
                <button
                  className={cn(
                    "flex h-8 w-auto items-center justify-between gap-1 rounded-lg px-2 py-1 transition-colors",
                    modelMenuOpen ? "bg-white/10" : "bg-transparent hover:bg-white/8"
                  )}
                  onClick={() => setModelMenuOpen((current) => !current)}
                  type="button"
                >
                  <Headphones className="h-3.5 w-3.5 shrink-0 text-white/82" />
                  <span className="max-w-[170px] truncate">Minimax-speech-2.8-hd</span>
                  <ChevronDown className="h-3.5 w-3.5 shrink-0 text-white/42" />
                </button>
                {modelMenuOpen ? renderModelMenu() : null}
              </div>
              <div className="min-w-0 flex-1" />
              <div className="flex shrink-0 items-center gap-2">
                <button
                  className="flex h-8 max-w-[180px] shrink-0 items-center gap-1.5 rounded-lg bg-white/10 px-2 text-white/78 transition-colors hover:bg-white/14"
                  onClick={() => {
                    setModelMenuOpen(false);
                    setVoiceModalOpen(true);
                  }}
                  title="切换音色"
                  type="button"
                >
                  <Music2 className="h-3.5 w-3.5" />
                  <span className="truncate">少女音色</span>
                  <ChevronDown className="h-3.5 w-3.5 text-white/42" />
                </button>
                <button className="flex size-8 shrink-0 items-center justify-center rounded-lg text-white/58 transition-colors hover:bg-white/8 hover:text-white/86" 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",
                    settingsOpen ? "bg-white/10 text-white" : "text-white/58 hover:bg-white/8 hover:text-white/86"
                  )}
                  onClick={() => setSettingsOpen((current) => !current)}
                  title="基础调节"
                  type="button"
                >
                  <SlidersHorizontal className="h-4 w-4" />
                </button>
                <span className="shrink-0 text-white/45">{text.length}/50000</span>
                <div className="flex h-8 items-center gap-2 text-white/45">
                  <Zap className="h-3.5 w-3.5" />
                  <span>1</span>
                </div>
                <button className="flex size-8 shrink-0 items-center justify-center rounded-xl bg-white text-neutral-900 transition hover:bg-white/86" title="生成音频" type="button">
                  <ArrowUp className="h-4 w-4" />
                </button>
              </div>
            </div>
          </div>
          {settingsOpen ? renderAdvancedSettings(expanded) : null}
        </div>
        <button
          className="absolute right-2 top-2 z-10 flex size-7 shrink-0 items-center justify-center rounded-lg bg-[#262626] text-white/50 transition-colors hover:bg-white/8 hover:text-white/85"
          onClick={() => (expanded ? setExpandedOpen(false) : setExpandedOpen(true))}
          title={expanded ? "收起" : "展开"}
          type="button"
        >
          {expanded ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
        </button>
      </div>
    );
  };

  return (
    <>
      {expandedOpen ? (
        <div className="fixed inset-0 z-[600] bg-black/50" data-canvas-overlay="true">
          <div className="fixed left-1/2 top-1/2 z-[601] max-h-[90dvh] max-w-[90vw] -translate-x-1/2 -translate-y-1/2">
            {renderComposerSurface(true)}
          </div>
        </div>
      ) : (
        <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 : anchor.centerX,
            top: composerTop,
            transform: compactComposer ? "none" : "translateX(-50%)",
            transformOrigin: "top left",
            width: composerWidth,
          }}
        >
          {renderComposerSurface(false)}
        </div>
      )}
      {voiceModalOpen ? renderVoiceModal() : null}
    </>
  );
}

function ReferenceSelectionToolbar({
  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-[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">
            从画布选择参考
          </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,
  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;
  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: String(paramsSettings.modelLabel || "").trim() || "Seedance 2.0 VIP",
    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 [markMenuAnchor, setMarkMenuAnchor] = useState<{
    id: string;
    left: number;
    top: number;
  } | null>(null);
  const [settings, setSettings] = useState<ComposerSettings & { duration: string }>(initialSettings);
  const activeMode = resolveVideoComposerMode(activeTab);
  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: referenceCount >= 1 },
    { key: "first-last-frame", label: "首尾帧", enabled: referenceCount >= 1 },
    { 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);
    setPrompt(initialPrompt);
    setSettings(initialSettings);
  }, [initialPrompt, initialTab, node.id]);

  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 estimatedBillingDisplay = useMemo(
    () =>
      resolveVideoCanvasBillingDisplay({
        duration: normalizeVideoDurationValue(settings.duration),
        functionDefinition: activeDefinition,
        modelKind: "video",
        modelOptions,
        modelRef: settings.model,
        resolution: normalizeVideoResolutionValue(settings.resolution),
      }),
    [
      activeDefinition,
      modelOptions,
      settings.duration,
      settings.model,
      settings.resolution,
    ],
  );
  const visibleBillingDisplay = /^\d+$/.test(estimatedBillingDisplay.label)
    ? estimatedBillingDisplay
    : {
        label: "135",
        message: billingDisplay.message || "当前视频生成预计消耗 135 积分。",
      };
  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 = compactComposer
    ? Math.max(12, Math.min(anchor.bottomY + 12, viewportHeight - composerHeight - 12))
    : anchor.bottomY + 12;
  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 canSubmit = 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 : anchor.centerX,
        top: composerTop,
        transform: compactComposer ? "none" : "translateX(-50%)",
        transformOrigin: "top left",
        width: composerWidth,
      }}
    >
      <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
              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}
              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
              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}
            >
              {prompt}
              {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={() => toast.info(prompt.trim() ? "提示词优化后端待接入。" : "请先输入提示词或添加参考素材。")}
                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={() => toast.info(prompt.trim() ? "翻译提示词后端待接入。" : "请先输入提示词。")}
                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={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">
              <VideoAdvancedSwitchRow
                checked={settings.searchEnabled !== false}
                label="联网搜索"
                onChange={(checked) => setSettings((current) => ({ ...current, searchEnabled: checked }))}
              />
              <VideoAdvancedSwitchRow
                checked={settings.autoValidateMaterial !== false}
                label="自动校验素材"
                onChange={(checked) => setSettings((current) => ({ ...current, autoValidateMaterial: checked }))}
              />
            </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,
}: {
  anchor?: PresetControlAnchor;
  billingDefinition?: VideoCanvasFunctionDefinition;
  defaultModel?: string;
  membershipSummary?: MembershipSummaryResponse;
  modelOptions?: CanvasModelOption[];
  onSubmit?: (prompt: string, settings?: ComposerSettings) => void;
}) {
  const [prompt, setPrompt] = useState(AUDIO_TO_VIDEO_PROMPT);
  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: "Seedance 2.0 VIP",
    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: 260,
              left: compactComposer ? 12 : anchor.centerX,
              top: composerTop,
              transform: compactComposer ? "none" : "translateX(-50%)",
              transformOrigin: "top left",
              width: composerWidth,
            }
          : {
              bottom: 58,
              height: 260,
              left: "50%",
              transform: "translateX(-50%)",
              width: 1216,
            }
      }
    >
      <div className="relative h-[260px] 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)]">
        {showModelMenu ? (
          <VideoModelPopover
            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
            settings={settings}
            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 className="absolute right-6 top-5 text-[32px] text-white/38 hover:text-white/70" onClick={() => toast.info("展开音频生视频编辑器待接入。")} type="button">↗</button>
        <div className="flex items-center gap-3">
          {["文生视频", "全能参考", "图生视频", "首尾帧", "图片参考"].map((tab, index) => (
            <button
              className={cn(
                "h-[38px] rounded-[8px] border border-white/10 px-4 text-[18px] text-white/48",
                index === 1 && "bg-white/8 text-white"
              )}
              key={tab}
              onClick={() => toast.info(`${tab}模式后端待接入。`)}
              type="button"
            >
              {tab}
            </button>
          ))}
        </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>
          ))}
          <div className="relative h-[72px] w-[86px] overflow-hidden rounded-[9px]">
            <img alt="图片参考" className="h-full w-full object-cover" src={AUDIO_REFERENCE_IMAGE_URL} />
            <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>
          <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="mt-5 h-[62px] w-full resize-none bg-transparent text-[24px] leading-8 text-white/78 outline-none placeholder:text-white/46"
          onChange={(event) => setPrompt(event.target.value)}
          placeholder="根据上传的音频生成对应场景画面，镜头语言、节奏、音乐匹配情绪变化，电影级质感。"
          value={prompt}
        />
        <div className="absolute bottom-5 left-5 right-[86px] flex items-center gap-7 overflow-hidden text-[22px] 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 === "关闭" ? "开启" : "关闭" }))} />
          <ComposerControl label="文" onClick={() => toast.info("翻译接口待接入。")} />
          <ComposerControl label="" icon="⌘" onClick={() => toast.info("高级设置后端待接入。")} />
          <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={() => {
            if (onSubmit) {
              onSubmit(prompt, settings);
              return;
            }
            toast.info("音频生视频生成接口待接入。");
          }}
          type="button"
        >
          ↑
        </button>
      </div>
    </div>
  );
}

function MultiAngleEditorDialog({
  node,
  onApply,
  onClose,
}: {
  node: CloneNode;
  onApply: (settings: AngleEditorSettings) => void;
  onClose: () => void;
}) {
  const initialSettings = (node.draftValues?.angleSettings || {}) as Partial<AngleEditorSettings>;
  const [activeTab, setActiveTab] = useState("自定义");
  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 [promptEnabled, setPromptEnabled] = useState(Boolean(initialSettings.promptEnabled));
  const sourceUrl = getNodeMediaUrl(node) || getNodeSourceMediaUrl(node) || CHARACTER_THREE_VIEW_URL;
  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-[768px] w-[1200px] overflow-hidden 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-[30px] 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-8 flex gap-4">
          {tabs.map((tab) => (
            <button
              className={cn(
                "h-14 min-w-[148px] cursor-pointer rounded-[10px] border border-white/8 px-6 text-[21px] 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={() => setActiveTab(tab)}
              type="button"
            >
              {tab}
            </button>
          ))}
        </div>

        <div className="mt-6 flex gap-8">
          <div className="relative flex h-[480px] w-[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={() => setVerticalAngle((value) => Math.min(45, value + 5))} type="button">⌃</button>
            <button className="absolute bottom-9 text-[32px] text-white/42" onClick={() => setVerticalAngle((value) => Math.max(-45, value - 5))} type="button">⌄</button>
            <button className="absolute left-10 text-[42px] text-white/42" onClick={() => setHorizontalAngle((value) => Math.max(-180, value - 10))} type="button">‹</button>
            <button className="absolute right-10 text-[42px] text-white/42" onClick={() => 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={setHorizontalAngle} suffix="°" value={horizontalAngle} />
            <AngleSlider label="垂直俯仰" max={45} min={-45} onChange={setVerticalAngle} suffix="°" value={verticalAngle} />
            <AngleSlider label="景别缩放" max={100} min={0} onChange={setZoom} value={zoom} valueLabel={zoom < 35 ? "远景" : zoom > 70 ? "近景" : "中景"} />
            <div className="mt-10 flex items-center gap-8">
              <span className="w-[120px] text-[26px] text-white/42">提示词</span>
              <button
                aria-pressed={promptEnabled}
                className={cn(
                  "relative h-[30px] w-[54px] cursor-pointer rounded-full bg-white/14 transition",
                  promptEnabled && "bg-[#5f78ff]"
                )}
                onClick={() => setPromptEnabled((value) => !value)}
                type="button"
              >
                <span
                  className="absolute top-1 h-[22px] w-[22px] rounded-full bg-white shadow-[0_2px_8px_rgba(0,0,0,0.22)] transition-all"
                  style={{ left: promptEnabled ? 28 : 4 }}
                />
              </button>
            </div>
          </div>
        </div>

        <button
          className="absolute bottom-8 left-14 flex h-12 cursor-pointer items-center gap-3 rounded-[10px] px-2 text-[24px] 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">
          <span className="flex items-center gap-2 text-[22px] text-white/56">
            <span className="text-white/44">⚡</span>
            1
          </span>
          <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"
            onClick={() => onApply({ horizontalAngle, promptEnabled, verticalAngle, zoom })}
            type="button"
          >
            ↑
          </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-[26px] 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-[26px] 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>
  );
}

function StoryScriptScene() {
  return (
    <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
      <PresetFloatingToolbar
        items={[
          ["拆分场景", "按镜号拆分脚本接口待接入。"],
          ["生成分镜", "分镜生成接口待接入。"],
          ["表格视图", "脚本表格视图接口待接入。"],
          ["导出", "脚本导出接口待接入。"],
        ]}
      />
      <div className="pointer-events-auto absolute left-1/2 top-[196px] flex -translate-x-1/2 items-start gap-[112px]">
        <StoryTextPanel />
        <SceneConnector className="mt-[170px]" />
        <ScriptGeneratorPanel />
      </div>
      <PresetComposerPanel
        prompt={STORY_SCRIPT_PROMPT}
        submitMessage="故事脚本生成接口待接入。"
        title="脚本生成器"
      />
    </div>
  );
}

function FirstFrameVideoScene() {
  return (
    <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
      <PresetFloatingToolbar
        items={[
          ["高清", "首帧高清接口待接入。"],
          ["扩图", "首帧扩图接口待接入。"],
          ["替换背景", "背景替换接口待接入。"],
          ["下载", "图片下载接口待接入。"],
        ]}
      />
      <div className="pointer-events-auto absolute left-1/2 top-[190px] flex -translate-x-1/2 items-start gap-[108px]">
        <PresetMediaPanel imageUrl={FIRST_FRAME_IMAGE_URL} label="首帧" wide />
        <SceneConnector className="mt-[178px]" />
        <VideoResultPanel label="视频" />
      </div>
      <PresetComposerPanel
        modelKind="video"
        prompt="以当前图为首帧生成视频。"
        submitMessage="首帧图生视频接口待接入。"
        thumbnailUrl={FIRST_FRAME_IMAGE_URL}
        title="首帧图生视频"
      />
    </div>
  );
}

function AudioToVideoScene() {
  return (
    <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
      <PresetFloatingToolbar
        items={[
          PRESET_MEDIA_TOOLBAR_ITEMS["audio-beat"],
          PRESET_MEDIA_TOOLBAR_ITEMS["audio-camera"],
          PRESET_MEDIA_TOOLBAR_ITEMS["audio-sfx"],
          PRESET_MEDIA_TOOLBAR_ITEMS["audio-download"],
        ]}
      />
      <div className="pointer-events-auto absolute left-1/2 top-[178px] flex -translate-x-1/2 items-start gap-[98px]">
        <div className="flex flex-col gap-5">
          <AudioResourcePanel />
          <PresetMediaPanel imageUrl={AUDIO_REFERENCE_IMAGE_URL} label="图片" small />
        </div>
        <SceneConnector className="mt-[212px]" />
        <VideoResultPanel label="视频" />
      </div>
      <PresetComposerPanel
        modelKind="video"
        prompt={AUDIO_TO_VIDEO_PROMPT}
        submitMessage="音频生视频接口待接入。"
        thumbnailUrl={AUDIO_REFERENCE_IMAGE_URL}
        title="音频生视频"
      />
    </div>
  );
}

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 SceneConnector({ className }: { className?: string }) {
  return (
    <div className={cn("relative h-7 w-[108px]", className)}>
      <div className="absolute left-0 top-1/2 h-[2px] w-full -translate-y-1/2 bg-gradient-to-r from-[#5aa8ff] via-[#7a86ff] to-[#b6bcff]" />
      <button
        className="absolute left-1/2 top-1/2 flex h-7 w-7 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-white/45 bg-[#222] text-[22px] leading-none text-white/72"
        onClick={() => toast.info("连接素材节点接口待接入。")}
        type="button"
      >
        +
      </button>
    </div>
  );
}

function StoryTextPanel() {
  return (
    <div className="w-[560px]">
      <div className="mb-2 flex items-center gap-1 text-[20px] font-semibold text-white/50">
        <FileText className="h-5 w-5" />
        剧本
      </div>
      <div className="h-[390px] overflow-hidden rounded-[10px] border border-white/12 bg-[#f4f5f7] text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]">
        <div className="flex h-11 items-center justify-between border-[#dfe2e8] border-b px-4 text-[13px] text-[#697080]">
          <span>输入内容</span>
          <button className="rounded-[8px] px-2 py-1 text-[#4f5cff] hover:bg-black/5" onClick={() => toast.info("编辑剧本接口待接入。")} type="button">
            编辑
          </button>
        </div>
        <div className="h-[calc(100%-44px)] overflow-y-auto whitespace-pre-wrap px-5 py-4 text-[14px] leading-7">
          {STORY_SCRIPT_TEXT}
        </div>
      </div>
    </div>
  );
}

function ScriptGeneratorPanel() {
  const rows = [
    ["01", "现代办公室", "深夜加班，键盘声急促，人物体力透支", "环境键盘声"],
    ["02", "盛唐大殿", "女主惊醒跪于金銮殿，百官压迫", "鼓声与低频"],
    ["03", "长安街市", "诗声落下，盛唐山河展开", "史诗音乐起"],
  ];
  return (
    <div className="w-[560px]">
      <div className="mb-2 flex items-center gap-1 text-[20px] font-semibold text-white/50">
        <GridTilesGlyph />
        脚本生成器
      </div>
      <div className="h-[390px] overflow-hidden rounded-[10px] border border-white/12 bg-white text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]">
        <div className="flex h-12 items-center justify-between border-[#e5e7eb] border-b px-4">
          <span className="font-semibold text-[15px]">故事脚本</span>
          <span className="rounded-full bg-[#eef0ff] px-3 py-1 text-[12px] text-[#5161ff]">待生成</span>
        </div>
        <div className="grid grid-cols-[64px_120px_1fr_110px] border-[#eef0f3] border-b bg-[#f7f8fa] text-[12px] text-[#697080]">
          {["镜号", "场景", "画面", "声音"].map((item) => (
            <div className="border-[#eef0f3] border-r px-3 py-2 last:border-r-0" key={item}>{item}</div>
          ))}
        </div>
        {rows.map((row) => (
          <div className="grid grid-cols-[64px_120px_1fr_110px] border-[#eef0f3] border-b text-[12px]" key={row[0]}>
            {row.map((cell) => (
              <div className="border-[#eef0f3] border-r px-3 py-3 last:border-r-0" key={cell}>{cell}</div>
            ))}
          </div>
        ))}
        <button
          className="m-4 h-10 w-[calc(100%-32px)] rounded-[10px] bg-[#111] text-[13px] font-semibold text-white"
          onClick={() => toast.info("故事脚本生成接口待接入。")}
          type="button"
        >
          生成完整脚本
        </button>
      </div>
    </div>
  );
}

function PresetMediaPanel({
  imageUrl,
  label,
  small = false,
  wide = false,
}: {
  imageUrl: string;
  label: string;
  small?: boolean;
  wide?: boolean;
}) {
  return (
    <div className={cn("relative", small ? "w-[430px]" : wide ? "w-[620px]" : "w-[560px]")}>
      <div className="mb-2 flex items-center gap-1 text-[20px] font-semibold text-white/50">
        <ImageIcon className="h-5 w-5" />
        {label}
      </div>
      <div className={cn("relative overflow-hidden rounded-[10px] border border-white/12 bg-white shadow-[0_18px_60px_rgba(0,0,0,0.36)]", small ? "h-[220px]" : "h-[390px]")}>
        <img alt={label} className="h-full w-full object-cover" src={imageUrl} />
        <button
          className="absolute right-3 top-3 flex h-10 w-10 items-center justify-center rounded-[8px] bg-black/56 text-white/90"
          onClick={() => toast.info(`${label}素材替换接口待接入。`)}
          type="button"
        >
          ↥
        </button>
      </div>
    </div>
  );
}

function VideoResultPanel({ label }: { label: string }) {
  return (
    <div className="w-[560px]">
      <div className="mb-2 flex items-center gap-1 text-[20px] font-semibold text-white/50">
        <Video className="h-5 w-5" />
        {label}
      </div>
      <div className="relative flex h-[390px] items-center justify-center overflow-hidden rounded-[10px] border border-white/12 bg-[#101010] shadow-[0_18px_60px_rgba(0,0,0,0.36)]">
        <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.12)_1px,transparent_1px)] bg-[length:18px_18px] opacity-20" />
        <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"
          onClick={() => toast.info("视频全屏预览待接入。")}
          type="button"
        >
          ↗
        </button>
      </div>
    </div>
  );
}

function AudioResourcePanel() {
  return (
    <div className="w-[720px]">
      <div className="mb-2 flex items-center gap-1 text-[20px] font-semibold text-white/50">
        <Music2 className="h-5 w-5" />
        音频
      </div>
      <div className="h-[158px]">
        <OfficialAudioCard mediaUrl={AUDIO_SOURCE_URL} selected={false} />
      </div>
    </div>
  );
}

function PresetComposerPanel({
  anchor,
  billingDefinition,
  defaultModel = "auto",
  membershipSummary,
  modelKind = "image",
  modelOptions = [],
  onSubmit,
  prompt,
  submitMessage,
  thumbnailUrl,
  title,
}: {
  anchor?: PresetControlAnchor;
  billingDefinition?: VideoCanvasFunctionDefinition;
  defaultModel?: string;
  membershipSummary?: MembershipSummaryResponse;
  modelKind?: CanvasModelKind;
  modelOptions?: CanvasModelOption[];
  onSubmit?: (prompt: string, settings?: ComposerSettings) => void;
  prompt: string;
  submitMessage: string;
  thumbnailUrl?: string;
  title: string;
}) {
  const [menu, setMenu] = useState<ComposerMenu>(null);
  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: 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: PRESET_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
	            left: "50%",
	            transform: "translateX(-50%)",
	            width: PROMPT_COMPOSER_BASE_WIDTH * OFFICIAL_COMPOSER_SCALE,
	          }
	    }
	  >
	    <div
	      className="relative h-[238px] 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" }}
	    >
	      {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 className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => toast.info("展开提示词编辑器待接入。")} 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="h-[78px] w-full resize-none bg-transparent text-[20px] leading-8 text-white/64 outline-none placeholder:text-white/38"
	        onChange={(event) => setDraftPrompt(event.target.value)}
	        placeholder="描述你想要生成的画面内容，按 / 呼出指令，@引用素材"
	        value={draftPrompt}
	      />
	      <div className="absolute bottom-5 left-5 right-[84px] flex items-center gap-6 overflow-hidden text-[17px] 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 label="摄像机" icon="▣" onClick={() => toast.info("镜头配置接口待接入。")} />
	        <ComposerControl label={settings.count} dropdown onClick={() => toast.info("当前仅支持单次生成 1 个结果。")} />
	        <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={() => {
            if (onSubmit) {
              onSubmit(draftPrompt, settings);
              return;
            }
            toast.info(submitMessage);
          }}
	        type="button"
	      >
	        ↑
	      </button>
	    </div>
	  </div>
	);
}

function CharacterThreeViewScene() {
  const [toolbarMenu, setToolbarMenu] = useState<SceneToolbarMenu>(null);
  const sceneActions: Array<{
    action: Extract<ImageToolbarAction, "annotate" | "rotate" | "download" | "preview">;
    message: string;
  }> = [
    { action: "annotate", message: "绘制编辑待接入。" },
    { action: "rotate", message: "对比预览待接入。" },
    { action: "download", message: "下载素材待接入。" },
    { action: "preview", message: "全屏预览待接入。" },
  ];

  return (
    <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
      <div className="pointer-events-auto absolute left-1/2 top-[90px] flex h-[72px] -translate-x-1/2 items-center gap-6 rounded-[18px] border border-white/8 bg-[#262626]/96 px-7 text-[18px] text-white/82 shadow-[0_20px_64px_rgba(0,0,0,0.42)] backdrop-blur-[10px]">
        <SceneTool active={toolbarMenu === "panorama"} kind="panorama" label="全景" badge="NEW" onClick={() => setToolbarMenu((current) => current === "panorama" ? null : "panorama")} />
        <SceneTool active={toolbarMenu === "orbit"} kind="orbit" label="多角度" onClick={() => setToolbarMenu((current) => current === "orbit" ? null : "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")} />
        <div className="h-9 w-px bg-white/8" />
        {sceneActions.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={() => toast.info(item.message)}
            type="button"
          >
            <ImageToolbarActionGlyph action={item.action} />
          </button>
        ))}
      </div>
      {toolbarMenu ? <SceneToolbarPopover menu={toolbarMenu} onClose={() => setToolbarMenu(null)} /> : null}

      <div className="pointer-events-auto absolute left-1/2 top-[174px] flex -translate-x-1/2 items-start gap-[110px]">
        <CharacterImagePanel imageUrl={CHARACTER_IMAGE_URL} label="角色图" wide />
        <div className="relative mt-[214px] w-[4px]">
          <div className="absolute right-[4px] top-0 h-[2px] w-[110px] bg-gradient-to-r from-transparent via-[#59a8ff] to-[#9bd6ff]" />
          <button
            className="absolute -left-[16px] -top-[14px] flex h-7 w-7 items-center justify-center rounded-full border border-white/45 bg-[#222] text-[22px] leading-none text-white/72"
            onClick={() => toast.info("连接素材节点接口待接入。")}
            type="button"
          >
            +
          </button>
        </div>
        <CharacterImagePanel imageUrl={CHARACTER_THREE_VIEW_URL} label="角色三视图" />
      </div>

      <PromptComposer />
    </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-[360px] -translate-x-1/2 flex-col p-3 font-sans"
        role="menu"
        style={{ ...officialPopoverStyle, ...popoverSurfaceStyle }}
      >
        {nineGridOptions.map((option) => (
          <button
            className="flex h-[70px] w-full cursor-pointer items-center gap-7 rounded-[10px] px-5 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"
          >
            <NineGridPresetGlyph />
            <span className="min-w-0 flex-1 truncate text-[25px] font-normal leading-snug 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-[56px] w-full shrink-0 items-center gap-5 rounded-[10px] px-4 text-left text-[25px] 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-[70px] w-full cursor-pointer items-center rounded-[10px] px-5 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-[25px] 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-[70px] w-full cursor-pointer items-center justify-between rounded-[10px] px-5 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-[25px] 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-[25px] font-normal leading-none text-white/52">自定义宫格</span>
        <span className="text-[25px] 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 CharacterImagePanel({ imageUrl, label, wide = false }: { imageUrl: string; label: string; wide?: boolean }) {
  return (
    <div className={cn("relative", wide ? "w-[734px]" : "w-[556px]")}>
      <div className="mb-2 flex items-center gap-1 text-[20px] font-semibold text-white/50">
        <ImageIcon className="h-5 w-5" />
        {label}
      </div>
      <div className="relative h-[410px] overflow-hidden rounded-[10px] border border-white/14 bg-white shadow-[0_18px_60px_rgba(0,0,0,0.36)]">
        <img alt={label} className={cn("h-full w-full", wide ? "object-cover" : "object-contain")} src={imageUrl} />
        {wide ? (
          <button
            className="absolute right-3 top-3 flex h-10 w-10 items-center justify-center rounded-[8px] bg-black/56 text-white/90"
            onClick={() => toast.info("上传替换素材接口待接入。")}
            type="button"
          >
            ↥
          </button>
        ) : null}
      </div>
      <button
        className="absolute -right-[28px] top-[222px] flex h-7 w-7 items-center justify-center rounded-full border border-white/45 bg-[#222] text-[22px] leading-none text-white/72"
        onClick={() => toast.info(`${label}连接点接口待接入。`)}
        type="button"
      >
        +
      </button>
    </div>
  );
}

function PromptComposer({
  anchor,
  billingFeature = null,
  defaultModel = "auto",
  functionDefinition,
  membershipSummary,
  modelKind = "image",
  modelOptions = [],
  nodes = [],
  onSubmit,
  referenceThumbnailUrl = CHARACTER_IMAGE_URL,
}: {
  anchor?: PresetControlAnchor;
  billingFeature?: ImageToolCreditFeature | null;
  defaultModel?: string;
  functionDefinition?: VideoCanvasFunctionDefinition;
  membershipSummary?: MembershipSummaryResponse;
  modelKind?: CanvasModelKind;
  modelOptions?: CanvasModelOption[];
  nodes?: CloneNode[];
  onSubmit?: (payload: ComposerSubmitPayload) => void;
  referenceThumbnailUrl?: string;
}) {
  const [menu, setMenu] = useState<ComposerMenu>(null);
  const [prompt, setPrompt] = useState("");
  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);
    toast.info(`${option} 已应用，生成接口待接入。`);
  }, []);

  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: 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: PROMPT_COMPOSER_BASE_HEIGHT * OFFICIAL_COMPOSER_SCALE,
              left: "50%",
              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" }}
      >
      <button className="absolute right-5 top-5 text-[26px] text-white/45" onClick={() => toast.info("展开提示词编辑器待接入。")} type="button">↗</button>
      <div className="flex items-center gap-3">
        {[
          ["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)}
          />
        ))}
        <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>
      </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="mt-5 h-[86px] w-full resize-none bg-transparent text-[20px] leading-8 text-white/64 outline-none placeholder:text-white/42"
        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-6 overflow-hidden text-[18px] 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
              ? onSubmit({
                  prompt,
                  references,
                  settings,
                  slashScene,
                })
              : toast.info("角色三视图生成接口待接入。")
          }
          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 configuredLabel = settings.modelLabel?.trim();
  if (configuredLabel) return configuredLabel;
  const normalized = normalizeModelRef(settings.model);
  if (!normalized) return "Seedance 2.0 VIP";
  return getCanvasModelDisplayName(settings.model, modelOptions);
}

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 || "2.0";
}

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,
  onSelect,
}: {
  currentLabel: string;
  modelOptions: CanvasModelOption[];
  onSelect: (option: { label: string; modelRef?: string }) => void;
}) {
  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">
        <div className="flex flex-col gap-1">
          {LIBLIB_VIDEO_MODEL_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.label}
                onClick={() => onSelect({ label: option.label, modelRef: index === 0 ? "auto" : undefined })}
                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,
}: {
  leftOffset?: number;
  onChange: (updates: Partial<ComposerSettings>) => void;
  settings: ComposerSettings;
}) {
  const durationSeconds = normalizeVideoDurationValue(settings.duration);
  const clampedDurationSeconds = Math.min(15, Math.max(4, durationSeconds));
  const [durationDraft, setDurationDraft] = useState(String(clampedDurationSeconds));
  const durationProgress = ((clampedDurationSeconds - 4) / 11) * 100;

  useEffect(() => {
    setDurationDraft(String(clampedDurationSeconds));
  }, [clampedDurationSeconds]);

  const commitDuration = useCallback(() => {
    const parsed = Number.parseInt(durationDraft, 10);
    const nextDuration = Number.isFinite(parsed)
      ? Math.min(15, Math.max(4, parsed))
      : clampedDurationSeconds;
    setDurationDraft(String(nextDuration));
    onChange({ duration: `${nextDuration}s` });
  }, [clampedDurationSeconds, durationDraft, onChange]);

  const updateDurationFromSlider = useCallback(
    (value: string) => {
      const nextDuration = Math.min(15, Math.max(4, Number.parseInt(value, 10) || 5));
      setDurationDraft(String(nextDuration));
      onChange({ duration: `${nextDuration}s` });
    },
    [onChange]
  );

  return (
    <div
      className="absolute bottom-[48px] z-[90] flex h-[445px] w-[341px] flex-col gap-2 rounded-2xl border-[0.5px] border-[#363636] bg-[#2d2d2d]/95 p-3 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"
      style={{ left: leftOffset }}
    >
      <VideoParameterRow label="比例">
        <VideoRatioOptions
          selected={formatVideoRatioLabel(settings.ratio)}
          onSelect={(label) => onChange({ ratio: label })}
        />
      </VideoParameterRow>
      <VideoParameterRow label="清晰度">
        <VideoSegmentedOptions
          columns={4}
          options={[...VIDEO_RESOLUTION_OPTIONS]}
          selected={settings.resolution || "720P"}
          onSelect={(resolution) => onChange({ resolution })}
        />
      </VideoParameterRow>
      <VideoParameterRow label="视频时长">
        <div className="flex h-5 items-center gap-2">
          <div className="relative h-2 min-w-0 flex-1">
            <span
              className="pointer-events-none absolute left-1 right-1 top-1/2 h-1 -translate-y-1/2"
              style={{
                background: `linear-gradient(to right, #3b82f6 0%, #3b82f6 ${durationProgress}%, rgba(145,145,145,0.3) ${durationProgress}%, rgba(145,145,145,0.3) 100%)`,
              }}
            />
            <input
              aria-label="视频时长"
              className="absolute inset-0 h-2 w-full cursor-pointer appearance-none bg-transparent outline-none [&::-webkit-slider-runnable-track]:h-1 [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:mt-[-4px] [&::-webkit-slider-thumb]:size-3 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[0.5px] [&::-webkit-slider-thumb]:border-[#262626] [&::-webkit-slider-thumb]:bg-white"
              max={15}
              min={4}
              onChange={(event) => updateDurationFromSlider(event.target.value)}
              step={1}
              type="range"
              value={clampedDurationSeconds}
            />
          </div>
          <input
            aria-label="视频时长秒数"
            className="h-5 w-12 appearance-none rounded-md border-0 bg-white/10 px-1.5 py-0.5 text-center text-xs text-[#f7f7f7] outline-none transition-colors focus:bg-white/15 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
            max={15}
            min={4}
            onBlur={commitDuration}
            onChange={(event) => setDurationDraft(event.target.value)}
            onKeyDown={(event) => {
              if (event.key === "Enter") {
                event.preventDefault();
                commitDuration();
              }
            }}
            step={1}
            type="number"
            value={durationDraft}
          />
          <span className="text-xs text-[#919191]">s</span>
        </div>
      </VideoParameterRow>
      <VideoParameterRow label="生成音频" showHelp>
        <VideoSegmentedOptions
          columns={2}
          options={[...VIDEO_AUDIO_OPTIONS]}
          selected={settings.audio || "开启"}
          onSelect={(audio) => onChange({ audio })}
        />
      </VideoParameterRow>
      <VideoParameterRow label="生成数量">
        <VideoSegmentedOptions
          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-sm font-medium leading-5 text-[#919191]">
        <span>{label}</span>
        {showHelp ? <HelpCircle className="h-3 w-3" /> : null}
      </div>
      {children}
    </div>
  );
}

function VideoRatioOptions({
  onSelect,
  selected,
}: {
  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 },
  };

  return (
    <div className="grid grid-cols-5 gap-2">
      {VIDEO_RATIO_OPTIONS.map((option) => {
        const isSelected = selected === option.label;
        const iconSize = iconSizes[option.label];
        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",
              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"}
            key={option.label}
            onClick={() => onSelect(option.label)}
            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({
  columns,
  onSelect,
  options,
  selected,
}: {
  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",
            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"}
          key={option}
          onClick={() => onSelect(option)}
          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 modelItems = [
    { label: "自动模型", value: "auto" },
    ...filterCanvasModelsByKind(modelOptions, modelKind).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)]">
      {options.map((option) => (
        <button
          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,
}: {
  active?: boolean;
  dropdown?: boolean;
  icon?: string;
  label: string;
  muted?: boolean;
  onClick: () => void;
}) {
  return (
    <button
      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={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={(action) => {
          toast.info(action === "style" ? "风格库节点待接入。" : "特效库节点待接入。");
          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 />
          </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,
  onClearGridSplit,
  onClearGridSplitSelection,
  onClearLocalEditRegions,
  node,
  onCancelGeneration,
  onContextMenu,
  onExtractVideoFrame,
  onGenerateVideoHd,
  onModuleAction,
  onOpenConnectionMenu,
  onOpenScriptWorkflow,
  onPointerDown,
  onStartConnectionDrag,
  onStartConnectionMouseDrag,
  onRunNode,
  onSetLocalEditMode,
  onSubmitLocalEdit,
  onToggleGridSplitSelection,
  onUpdateLocalEditRegions,
  onTextResourceChange,
  selected,
}: {
  connectionsHidden: boolean;
  connectionHoverActive: boolean;
  onClearGridSplit: () => void;
  onClearGridSplitSelection: () => void;
  onClearLocalEditRegions: () => void;
  node: CloneNode;
  onCancelGeneration: () => void;
  onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
  onExtractVideoFrame: (kind: VideoFrameExtractionKind) => 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;
  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} />;
  }

  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 kind={targetModuleKind} node={node} onAction={onModuleAction} 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}
          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-[4px] bg-[#f8f9ff] text-center text-[#2a2d3a]",
            selected && "outline outline-2 outline-[#8b96ff]"
          )}
        >
          {previewUrl ? (
            <>
              <img
                alt=""
                className="pointer-events-none absolute inset-0 h-full w-full object-cover opacity-28"
                draggable={false}
                onDragStart={preventNativeImageDrag}
                src={previewUrl}
              />
              <span className="absolute inset-0 bg-white/62" />
            </>
          ) : null}
          <span className="relative mb-3 flex h-8 w-8 items-center justify-center rounded-[8px] border border-[#dfe3ff] bg-white text-[#7a85ff]">
            <Icon className="h-4 w-4" />
          </span>
          <div className="relative font-semibold text-[14px]">{node.title}</div>
          <div className="relative mt-2 line-clamp-3 px-5 text-[11px] leading-5 text-[#6f7482]">{node.subtitle}</div>
          <button className="relative mt-3 h-8 rounded-[8px] border border-[#dfe3ff] bg-white px-4 text-[11px] text-[#5161ff]" 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-[20px] 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 }: { node: CloneNode; selected: boolean }) {
  return (
    <div
      className={cn(
        "react-flow__node react-flow__node-group nopan selectable parent draggable pointer-events-none absolute z-[1] rounded-[20px] border bg-white/10 text-white/72",
        selected ? "selected border-[#363636]" : "border-white/10"
      )}
      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 }}
    >
      <div className="absolute left-5 top-5 text-[120px] font-semibold leading-none text-white/46">
        {node.title}
      </div>
    </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({
  kind,
  node,
  onAction,
  selected,
}: {
  kind: AddModuleKind;
  node: CloneNode;
  onAction: (actionLabel: TargetModuleActionLabel) => void;
  selected: boolean;
}) {
  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 }>> = {
    audio: [{ icon: Play, label: "音频生视频" }],
    director: [{ icon: Settings2, label: "打开导演台" }],
    image: [
      { icon: Upload, label: "图生图" },
      { icon: "hd", label: "图片高清" },
      { icon: Layers, label: "参考" },
      { icon: BoxSelect, label: "标记" },
      { icon: Sparkles, 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: "首帧生成视频" },
    ],
    "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-[166px]"
      : 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]";
  const parameterSummary =
    kind === "image"
      ? "Lib Image  自适应 · 标准画质 · 2K · 1张   18"
      : kind === "text"
        ? "GVLM 3.1   6"
        : "";

  return (
    <div className="h-full w-full">
      <div className="mb-[10px] flex h-7 items-center gap-2 text-[22px] font-semibold leading-none text-white/44">
        <HeaderIcon className="h-[22px] w-[22px]" />
        <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)]",
          isCompactTargetModule ? "h-[312px]" : "h-[432px]",
          selected && "outline outline-1 outline-white/22"
        )}
      >
        {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-[16px] 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-[14px] leading-[22px] 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-5 text-[17px] text-white/42">尝试：</div>
            <div className={cn(kind === "image" ? "space-y-[10px]" : "space-y-5")}>
              {actions[kind].map((action) => (
                <button
                  className={cn(
                    "flex items-center gap-3 leading-none text-white/82 hover:text-white",
                    kind === "image" ? "text-[16px]" : "text-[18px]"
                  )}
                  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 === "image" ? (
          <div className="absolute bottom-5 left-8 right-8 text-[12px] leading-[18px] text-white/42">
            <div className="mb-3 line-clamp-2">
              可直接文字生图，或上传图片输入文字指令对图片进行编辑，如：将背景改为雪夜
            </div>
            <div className="truncate text-white/58">{parameterSummary}</div>
          </div>
        ) : null}
      </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_RATIO_OPTIONS = ["Auto", "21:9", "16:9", "4:3", "1:1", "3:4", "9:16"] as const;
const DIRECTOR_CAMERA_PRESET_OPTIONS = [
  "当前视角",
  "正面中景",
  "正面特写",
  "正面全景",
  "侧面跟拍",
  "侧面近景",
  "背面中景",
  "俯拍全景",
  "45° 俯拍",
  "低角度仰拍",
  "低角度广角",
  "过肩镜头",
  "过肩镜头（右）",
  "鸟瞰",
  "荷兰角",
] as const;
const DIRECTOR_CAMERA_PRESET_CONFIG: Record<
  (typeof DIRECTOR_CAMERA_PRESET_OPTIONS)[number],
  { position: [string, string, string]; target: [string, string, string] }
> = {
  "45° 俯拍": { position: ["4", "6.5", "8"], target: ["0", "1.2", "0"] },
  低角度仰拍: { position: ["0", "0.7", "6"], target: ["0", "2.2", "0"] },
  低角度广角: { position: ["0", "0.6", "10"], target: ["0", "1.6", "0"] },
  侧面跟拍: { position: ["8", "2.2", "2"], target: ["0", "1.2", "0"] },
  侧面近景: { position: ["5", "2", "2"], target: ["0", "1.3", "0"] },
  俯拍全景: { position: ["0", "9", "6"], target: ["0", "1.2", "0"] },
  当前视角: { position: ["0", "2.2", "10"], target: ["0", "1.2", "0"] },
  正面中景: { position: ["0", "2.2", "10"], target: ["0", "1.2", "0"] },
  正面全景: { position: ["0", "2.8", "14"], target: ["0", "1.2", "0"] },
  正面特写: { position: ["0", "2", "5.5"], target: ["0", "1.5", "0"] },
  荷兰角: { position: ["2", "2.4", "8"], target: ["0", "1.2", "0"] },
  背面中景: { position: ["0", "2.2", "-10"], target: ["0", "1.2", "0"] },
  过肩镜头: { position: ["-1.8", "2.4", "4"], target: ["0", "1.4", "0"] },
  "过肩镜头（右）": { position: ["1.8", "2.4", "4"], target: ["0", "1.4", "0"] },
  鸟瞰: { position: ["0", "12", "0"], target: ["0", "0", "0"] },
};
const DIRECTOR_FOV_MIN = 15;
const DIRECTOR_FOV_MAX = 90;
const DIRECTOR_CAMERA_SNAPSHOT_NODE_OFFSET_X = 470;
const DIRECTOR_CAMERA_SNAPSHOT_NODE_WIDTH = 350;
const DIRECTOR_CAMERA_SNAPSHOT_NODE_HEIGHT = 622;
const DIRECTOR_ROLE_MENU_OPTIONS = [
  { hasSubmenu: false, key: "upload", label: "本地上传", separatorAfter: true },
  { hasSubmenu: false, key: "male", label: "男性素体", separatorAfter: false },
  { hasSubmenu: false, key: "female", label: "女性素体", separatorAfter: false },
  { hasSubmenu: false, key: "wide", label: "宽厚素体", separatorAfter: false },
  { hasSubmenu: false, key: "strong", label: "健壮素体", separatorAfter: false },
  { hasSubmenu: false, key: "slim", label: "纤细素体", separatorAfter: false },
  { hasSubmenu: false, key: "teen", label: "少年素体", separatorAfter: false },
  { hasSubmenu: false, key: "child", label: "儿童素体", separatorAfter: false },
  { hasSubmenu: false, key: "chibi", label: "二头身", separatorAfter: false },
  { key: "crowd", label: "群众 (3x3)", hasSubmenu: true, separatorAfter: true },
  { hasSubmenu: true, key: "geometry", label: "几何模型", separatorAfter: false },
] as const;
const DIRECTOR_PANORAMA_MENU_OPTIONS = [
  { icon: Upload, key: "upload", label: "本地上传" },
  { icon: Clock3, key: "history", label: "历史记录" },
  { icon: Sparkles, key: "ai", label: "AI生成" },
] as const;
type DirectorTransformMode = "move" | "rotate" | "scale";
const DIRECTOR_TRANSFORM_MODE_OPTIONS: Array<{
  icon: LucideIcon;
  key: DirectorTransformMode;
  label: string;
  shortcut: string;
}> = [
  { icon: Move, key: "move", label: "移动", shortcut: "V" },
  { icon: RotateCcw, key: "rotate", label: "旋转", shortcut: "R" },
  { icon: Maximize2, key: "scale", label: "缩放", shortcut: "S" },
];
const DIRECTOR_HELP_SHORTCUTS = [
  ["俯视视角", "T"],
  ["重置视角", "Q"],
  ["打组", "G"],
  ["撤销", "Z"],
  ["正面视角", "Y"],
  ["网格吸附", "X"],
  ["解组", "⇧ D"],
  ["删除", ""],
] as const;
const DIRECTOR_AI_HISTORY_IMAGES = [
  CHARACTER_IMAGE_URL,
  CHARACTER_THREE_VIEW_URL,
  FIRST_FRAME_IMAGE_URL,
  AUDIO_REFERENCE_IMAGE_URL,
  CHARACTER_IMAGE_URL,
  CHARACTER_THREE_VIEW_URL,
  FIRST_FRAME_IMAGE_URL,
  AUDIO_REFERENCE_IMAGE_URL,
];
const DIRECTOR_AI_IMPORTED_PROPS = ["道具1", "道具2", "道具3", "道具4", "道具5", "道具6", "道具7"];

function DirectorRatioPreview({ ratio }: { ratio: (typeof DIRECTOR_RATIO_OPTIONS)[number] }) {
  const ratioSize: Record<(typeof DIRECTOR_RATIO_OPTIONS)[number], string> = {
    "1:1": "h-5 w-5",
    "3:4": "h-6 w-[18px]",
    "4:3": "h-[18px] w-6",
    "9:16": "h-7 w-4",
    "16:9": "h-4 w-7",
    "21:9": "h-[14px] w-8",
    Auto: "h-5 w-7 border-dashed",
  };

  return <span aria-hidden="true" className={cn("rounded-[3px] border border-current", ratioSize[ratio])} />;
}

function getNextDirectorCameraName(cameraNames: string[]) {
  const highestCameraIndex = cameraNames.reduce((highest, name) => {
    const match = /^机位(\d+)$/.exec(name);
    return match ? Math.max(highest, Number(match[1])) : highest;
  }, 0);

  return `机位${highestCameraIndex + 1}`;
}

function formatDirectorCameraShotTitle(title: string) {
  const match = /^(机位\d+)-shot-(\d+)$/.exec(title);
  return match ? `${match[1]}-截图${match[2]}` : title;
}

function getNextDirectorRoleName(roleNames: string[]) {
  const usedIndexes = roleNames
    .map((name) => {
      const match = /^角色([A-Z])$/.exec(name);
      return match ? match[1].charCodeAt(0) - 65 : -1;
    })
    .filter((index) => index >= 0);
  const nextIndex = Math.max(-1, ...usedIndexes) + 1;

  return nextIndex < 26 ? `角色${String.fromCharCode(65 + nextIndex)}` : `角色${nextIndex + 1}`;
}

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 DirectorConsole3DDialog({
  node,
  onClose,
  onSendSnapshotsToCanvas,
  onTutorialActiveChange,
  tutorialActive,
}: {
  node: CloneNode;
  onClose: () => void;
  onSendSnapshotsToCanvas: (snapshots: Array<{ id: string; title: string }>) => void;
  onTutorialActiveChange: (active: boolean) => void;
  tutorialActive: boolean;
}) {
  const [viewMode, setViewMode] = useState<"director" | "camera">("director");
  const [selectedObject, setSelectedObject] = useState("机位1");
  const [fov, setFov] = useState(50);
  const [ratio, setRatio] = useState("16:9");
  const [ratioMenuOpen, setRatioMenuOpen] = useState(false);
  const [roleMenuOpen, setRoleMenuOpen] = useState(false);
  const [cameraPresetMenuOpen, setCameraPresetMenuOpen] = useState(false);
  const [panoramaMenuOpen, setPanoramaMenuOpen] = useState(false);
  const [panoramaHistoryOpen, setPanoramaHistoryOpen] = useState(false);
  const [panoramaAiOpen, setPanoramaAiOpen] = useState(false);
  const [transformMenuOpen, setTransformMenuOpen] = useState(false);
  const [directorTransformMode, setDirectorTransformMode] = useState<DirectorTransformMode>("move");
  const [directorHelpMenuOpen, setDirectorHelpMenuOpen] = useState(false);
  const [directorHelpShortcutOpen, setDirectorHelpShortcutOpen] = useState(false);
  const [directorFullscreen, setDirectorFullscreen] = useState(false);
  const [sceneSearchQuery, setSceneSearchQuery] = useState("");
  const [cameraNames, setCameraNames] = useState(["机位1"]);
  const [cameraPresetByName, setCameraPresetByName] = useState<Record<string, (typeof DIRECTOR_CAMERA_PRESET_OPTIONS)[number]>>({
    机位1: "当前视角",
  });
  const [roleNames, setRoleNames] = useState(["角色A"]);
  const [propNames, setPropNames] = useState<string[]>([]);
  const [cameraInspectorOpen, setCameraInspectorOpen] = useState(false);
  const [cameraInspectorTab, setCameraInspectorTab] = useState<"properties" | "shots">("properties");
  const [roleInspectorOpen, setRoleInspectorOpen] = useState(false);
  const [cameraSnapshots, setCameraSnapshots] = useState<Array<{ id: string; title: string }>>([]);
  const [snapshotClearConfirmOpen, setSnapshotClearConfirmOpen] = useState(false);
  const [snapshotUploading, setSnapshotUploading] = useState(false);
  const [aiImportOpen, setAiImportOpen] = useState(false);
  const [aiImportTab, setAiImportTab] = useState<"upload" | "history">("upload");
  const [aiImportSelectedImage, setAiImportSelectedImage] = useState<string | null>(null);
  const [aiImportMode, setAiImportMode] = useState<"insert" | "overwrite">("insert");
  const [aiImportRunning, setAiImportRunning] = useState(false);
  const panoramaUploadInputRef = useRef<HTMLInputElement | null>(null);
  const snapshotTimerRef = useRef<number | null>(null);
  const aiImportTimerRef = useRef<number | null>(null);
  const sceneObjects = [
    ...propNames.map((name) => ({ icon: BoxSelect, kind: "prop" as const, name })),
    ...cameraNames.map((name) => ({ icon: Camera, kind: "camera" as const, name })),
    ...roleNames.map((name) => ({ icon: UserRound, kind: "role" as const, name })),
  ];
  const normalizedSceneSearchQuery = sceneSearchQuery.trim().toLowerCase();
  const filteredSceneObjects = normalizedSceneSearchQuery
    ? sceneObjects.filter((item) => item.name.toLowerCase().includes(normalizedSceneSearchQuery))
    : sceneObjects;
  const selectedCameraPreset = cameraPresetByName[selectedObject] ?? "当前视角";
  const selectedCameraConfig = DIRECTOR_CAMERA_PRESET_CONFIG[selectedCameraPreset];
  const normalizedFov = Math.min(DIRECTOR_FOV_MAX, Math.max(DIRECTOR_FOV_MIN, Number.isFinite(fov) ? fov : 50));
  const fovTrackPercent = ((normalizedFov - DIRECTOR_FOV_MIN) / (DIRECTOR_FOV_MAX - DIRECTOR_FOV_MIN)) * 100;
  const displayedRoleName = roleInspectorOpen ? selectedObject : "角色A";
  const selectedCameraSnapshots = cameraSnapshots.filter((snapshot) => snapshot.title.startsWith(`${selectedObject}-`));
  const selectedCameraSnapshotsEmpty = selectedCameraSnapshots.length === 0;
  const updateDirectorFov = useCallback((value: number) => {
    const nextValue = Number.isFinite(value) ? value : 50;
    setFov(Math.min(DIRECTOR_FOV_MAX, Math.max(DIRECTOR_FOV_MIN, nextValue)));
  }, []);
  const closeDirectorFloatingMenus = useCallback(() => {
    setRatioMenuOpen(false);
    setCameraPresetMenuOpen(false);
    setRoleMenuOpen(false);
    setPanoramaMenuOpen(false);
    setTransformMenuOpen(false);
    setDirectorHelpMenuOpen(false);
    setDirectorHelpShortcutOpen(false);
    setSnapshotClearConfirmOpen(false);
  }, []);
  const handleDirectorTransformMenu = useCallback(() => {
    setRatioMenuOpen(false);
    setCameraPresetMenuOpen(false);
    setRoleMenuOpen(false);
    setPanoramaMenuOpen(false);
    setDirectorHelpMenuOpen(false);
    setDirectorHelpShortcutOpen(false);
    setTransformMenuOpen((current) => !current);
  }, []);
  const handleDirectorTransformSelect = useCallback((mode: DirectorTransformMode) => {
    setDirectorTransformMode(mode);
    setTransformMenuOpen(false);
  }, []);
  const handleDirectorRoleMenu = useCallback(() => {
    setRatioMenuOpen(false);
    setCameraPresetMenuOpen(false);
    setPanoramaMenuOpen(false);
    setTransformMenuOpen(false);
    setDirectorHelpMenuOpen(false);
    setDirectorHelpShortcutOpen(false);
    setRoleMenuOpen((current) => !current);
  }, []);
  const handleDirectorRoleSelect = useCallback(
    (option: (typeof DIRECTOR_ROLE_MENU_OPTIONS)[number]) => {
      if (option.key === "upload" || option.hasSubmenu) return;
      const nextRoleName = getNextDirectorRoleName(roleNames);
      setRoleNames((current) => (current.includes(nextRoleName) ? current : [...current, nextRoleName]));
      setSelectedObject(nextRoleName);
      setCameraInspectorOpen(false);
      setRoleInspectorOpen(true);
      setRoleMenuOpen(false);
      setRatioMenuOpen(false);
      setCameraPresetMenuOpen(false);
      setPanoramaMenuOpen(false);
      setTransformMenuOpen(false);
      setDirectorHelpMenuOpen(false);
      setDirectorHelpShortcutOpen(false);
    },
    [roleNames]
  );
  const handleDirectorCameraPresetMenu = useCallback(() => {
    setRatioMenuOpen(false);
    setRoleMenuOpen(false);
    setPanoramaMenuOpen(false);
    setTransformMenuOpen(false);
    setDirectorHelpMenuOpen(false);
    setDirectorHelpShortcutOpen(false);
    setCameraPresetMenuOpen((current) => !current);
  }, []);
  const handleDirectorCameraPresetSelect = useCallback(
    (_preset: (typeof DIRECTOR_CAMERA_PRESET_OPTIONS)[number]) => {
      const nextCameraName = getNextDirectorCameraName(cameraNames);
      setCameraNames((current) => (current.includes(nextCameraName) ? current : [...current, nextCameraName]));
      setCameraPresetByName((current) => ({ ...current, [nextCameraName]: _preset }));
      setSelectedObject(nextCameraName);
      setCameraInspectorOpen(true);
      setCameraInspectorTab("properties");
      setRoleInspectorOpen(false);
      setCameraPresetMenuOpen(false);
      setRatioMenuOpen(false);
      setPanoramaMenuOpen(false);
      setTransformMenuOpen(false);
      setDirectorHelpMenuOpen(false);
      setDirectorHelpShortcutOpen(false);
    },
    [cameraNames]
  );
  const handleDirectorPanoramaMenu = useCallback(() => {
    setRatioMenuOpen(false);
    setRoleMenuOpen(false);
    setCameraPresetMenuOpen(false);
    setTransformMenuOpen(false);
    setDirectorHelpMenuOpen(false);
    setDirectorHelpShortcutOpen(false);
    setPanoramaMenuOpen((current) => !current);
  }, []);
  const handleDirectorHelpMenu = useCallback(() => {
    setRatioMenuOpen(false);
    setCameraPresetMenuOpen(false);
    setRoleMenuOpen(false);
    setPanoramaMenuOpen(false);
    setTransformMenuOpen(false);
    setDirectorHelpShortcutOpen(false);
    setDirectorHelpMenuOpen((current) => !current);
  }, []);
  const handleDirectorTutorial = useCallback(() => {
    setDirectorHelpShortcutOpen(false);
    onTutorialActiveChange(true);
  }, [onTutorialActiveChange]);
  const handleDirectorPanoramaSelect = useCallback((option: (typeof DIRECTOR_PANORAMA_MENU_OPTIONS)[number]) => {
    closeDirectorFloatingMenus();

    if (option.key === "upload") {
      panoramaUploadInputRef.current?.click();
      return;
    }

    if (option.key === "history") {
      setPanoramaHistoryOpen(true);
      return;
    }

    setPanoramaAiOpen(true);
  }, []);
  const selectedTransformOption =
    DIRECTOR_TRANSFORM_MODE_OPTIONS.find((option) => option.key === directorTransformMode) ?? DIRECTOR_TRANSFORM_MODE_OPTIONS[0];
  const directorToolbarItems: Array<{
    active?: boolean;
    disabled?: boolean;
    icon: LucideIcon;
    label: string;
    loading?: boolean;
    menu?: "transform";
    onClick: () => void;
  }> = [
    {
      active: transformMenuOpen,
      icon: selectedTransformOption.icon,
      label: `${selectedTransformOption.label} (${selectedTransformOption.shortcut})`,
      menu: "transform",
      onClick: handleDirectorTransformMenu,
    },
    { active: roleMenuOpen, icon: UserRound, label: "添加角色", onClick: handleDirectorRoleMenu },
    {
      active: panoramaMenuOpen,
      icon: ImageIcon,
      label: "全景图",
      onClick: handleDirectorPanoramaMenu,
    },
    { active: cameraPresetMenuOpen, icon: Plus, label: "添加机位", onClick: handleDirectorCameraPresetMenu },
  ];
  const handleDirectorScreenshot = useCallback(() => {
    if (snapshotUploading) return;
    const nextCameraName = getNextDirectorCameraName(cameraNames);
    const nextShotTitle = `${nextCameraName}-shot-${String(cameraSnapshots.length + 1).padStart(2, "0")}`;
    closeDirectorFloatingMenus();
    setSnapshotUploading(true);
    toast.info("正在上传截图...");
    if (snapshotTimerRef.current !== null) {
      window.clearTimeout(snapshotTimerRef.current);
    }
    snapshotTimerRef.current = window.setTimeout(() => {
      setCameraNames((current) => (current.includes(nextCameraName) ? current : [...current, nextCameraName]));
      setCameraPresetByName((current) => ({ ...current, [nextCameraName]: current[nextCameraName] ?? "当前视角" }));
      setSelectedObject(nextCameraName);
      setCameraInspectorOpen(true);
      setCameraInspectorTab("properties");
      setRoleInspectorOpen(false);
      setCameraSnapshots((current) =>
        current.some((snapshot) => snapshot.title === nextShotTitle)
          ? current
          : [...current, { id: `${nextCameraName}-${nextShotTitle}`, title: nextShotTitle }]
      );
      setSnapshotUploading(false);
      snapshotTimerRef.current = null;
    }, 6500);
  }, [cameraNames, cameraSnapshots.length, closeDirectorFloatingMenus, snapshotUploading]);
  const handleDirectorAiImport = useCallback(() => {
    closeDirectorFloatingMenus();
    setAiImportOpen(true);
  }, [closeDirectorFloatingMenus]);
  const handleDirectorFullscreenToggle = useCallback(() => {
    closeDirectorFloatingMenus();
    setDirectorFullscreen((current) => !current);
  }, [closeDirectorFloatingMenus]);
  const handleStartAiImport = useCallback(() => {
    if (!aiImportSelectedImage || aiImportRunning) return;
    setAiImportRunning(true);
    if (aiImportTimerRef.current !== null) {
      window.clearTimeout(aiImportTimerRef.current);
    }
    aiImportTimerRef.current = window.setTimeout(() => {
      setPropNames(DIRECTOR_AI_IMPORTED_PROPS);
      setCameraNames((current) => {
        const base = aiImportMode === "overwrite" ? ["机位1"] : current;
        const merged = ["机位1", "机位2", "机位3", ...base];
        return merged.filter((name, index) => merged.indexOf(name) === index);
      });
      setCameraPresetByName((current) => ({
        ...(aiImportMode === "overwrite" ? { 机位1: "当前视角" as const } : current),
        机位1: "当前视角",
        机位2: "当前视角",
        机位3: "当前视角",
      }));
      setRoleNames((current) => {
        const base = aiImportMode === "overwrite" ? ["角色A"] : current;
        return base.includes("角色B") ? base : [...base, "角色B"];
      });
      setSelectedObject("");
      setCameraInspectorOpen(false);
      setRoleInspectorOpen(false);
      setAiImportOpen(false);
      setAiImportRunning(false);
      aiImportTimerRef.current = null;
    }, 24000);
  }, [aiImportMode, aiImportRunning, aiImportSelectedImage]);
  const directorTrailingToolbarItems: Array<{ disabled?: boolean; icon: LucideIcon; label: string; loading?: boolean; onClick: () => void }> = [
    {
      disabled: snapshotUploading,
      icon: Camera,
      label: snapshotUploading ? "正在上传截图..." : "截图",
      loading: snapshotUploading,
      onClick: handleDirectorScreenshot,
    },
    { icon: Search, label: "AI 识图导入", onClick: handleDirectorAiImport },
    { icon: directorFullscreen ? Minimize2 : Maximize2, label: directorFullscreen ? "退出全屏" : "全屏", onClick: handleDirectorFullscreenToggle },
  ];

  useEffect(() => {
    const handleShortcut = (event: KeyboardEvent) => {
      if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return;
      const target = event.target;
      if (
        target instanceof HTMLElement &&
        (target.isContentEditable || ["INPUT", "SELECT", "TEXTAREA"].includes(target.tagName))
      ) {
        return;
      }
      const modeByKey: Record<string, DirectorTransformMode> = {
        r: "rotate",
        s: "scale",
        v: "move",
      };
      const nextMode = modeByKey[event.key.toLowerCase()];
      if (!nextMode) return;
      event.preventDefault();
      setDirectorTransformMode(nextMode);
    };

    window.addEventListener("keydown", handleShortcut);
    return () => window.removeEventListener("keydown", handleShortcut);
  }, []);
  useEffect(
    () => () => {
      if (snapshotTimerRef.current !== null) {
        window.clearTimeout(snapshotTimerRef.current);
      }
      if (aiImportTimerRef.current !== null) {
        window.clearTimeout(aiImportTimerRef.current);
      }
    },
    []
  );

  return (
    <div
      className="fixed inset-0 z-[600] flex flex-col text-white"
      data-canvas-overlay="true"
      onPointerDown={(event) => event.stopPropagation()}
      style={{ backgroundColor: "rgba(8,8,16,0.98)" }}
    >
      <div className="relative flex h-16 shrink-0 items-center justify-between border-white/8 border-b bg-[#212121] px-6">
        <div className="text-base font-medium leading-6 text-neutral-50">3D导演台</div>
        <div className="absolute left-1/2 top-1/2 ml-[6.7px] flex h-10 -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-1 overflow-hidden rounded-2xl border border-neutral-800 bg-neutral-950 px-1 py-1">
          {[
            { key: "director", label: "导演视角" },
            { key: "camera", label: "机位视角" },
          ].map((item) => (
            <button
              className={cn(
                "h-8 w-20 rounded-full px-3 text-sm leading-5 text-neutral-50 transition-colors disabled:cursor-not-allowed disabled:opacity-35",
                viewMode === item.key ? "rounded-xl bg-white/10" : "hover:bg-white/10"
              )}
              key={item.key}
              onClick={() => {
                closeDirectorFloatingMenus();
                setViewMode(item.key as "director" | "camera");
              }}
              type="button"
            >
              {item.label}
            </button>
          ))}
        </div>
        <div className="relative flex h-6 items-center gap-2">
          <div className="relative">
            <button
              aria-label="帮助"
              className={cn(
                "flex size-6 items-center justify-center rounded-lg text-neutral-50 transition-colors hover:bg-white/10",
                directorHelpMenuOpen && "bg-white/10"
              )}
              onClick={handleDirectorHelpMenu}
              title="帮助"
              type="button"
            >
              <HelpCircle className="h-4 w-4" />
            </button>
            {directorHelpMenuOpen ? (
              <div className="absolute right-0 top-6 z-50 pt-1.5">
                <div className="nodrag nopan nowheel flex w-[120px] flex-col gap-1 rounded-xl border border-white/10 bg-[rgba(31,31,31,0.94)] p-1 text-neutral-50 shadow-[0_8px_24px_rgba(0,0,0,0.35)] backdrop-blur-xl">
                  <div className="relative">
                    <button
                      className={cn(
                        "flex h-8 w-full items-center rounded-lg px-3 text-left text-[13px] leading-none text-white/75 transition-colors hover:bg-white/10 hover:text-white",
                        directorHelpShortcutOpen && "bg-white/10"
                      )}
                      onClick={() => setDirectorHelpShortcutOpen((current) => !current)}
                      onMouseEnter={() => setDirectorHelpShortcutOpen(true)}
                      type="button"
                    >
                      快捷键
                    </button>
                    {directorHelpShortcutOpen ? (
                      <div className="absolute right-full top-0 z-50 pr-2">
                        <div className="nodrag nopan nowheel h-[234px] w-[408px] rounded-2xl border border-white/10 bg-[#1f1f1f]/95 p-6 text-neutral-50 shadow-[0_8px_24px_rgba(0,0,0,0.35)] backdrop-blur-xl">
                          <div className="flex h-[22px] items-center justify-between">
                            <span className="text-[14px] font-medium text-white">快捷键</span>
                          </div>
                          <div className="mt-5 grid grid-cols-2 gap-x-11 gap-y-3">
                            {DIRECTOR_HELP_SHORTCUTS.map(([label, shortcut]) => (
                              <div className="flex h-7 items-center justify-between gap-4 text-[13px]" key={label}>
                                <span className="min-w-0 text-white/58">{label}</span>
                                {shortcut ? <span className="shrink-0 text-white/78">{shortcut}</span> : null}
                              </div>
                            ))}
                          </div>
                        </div>
                      </div>
                    ) : null}
                  </div>
                  <button
                    className="flex h-8 w-full items-center rounded-lg px-3 text-left text-[13px] leading-none text-white/75 transition-colors hover:bg-white/10 hover:text-white"
                    onClick={handleDirectorTutorial}
                    onMouseEnter={() => setDirectorHelpShortcutOpen(false)}
                    type="button"
                  >
                    使用教程
                  </button>
                </div>
              </div>
            ) : null}
          </div>
          <button
            aria-label="关闭"
            className="flex size-6 items-center justify-center rounded-lg text-neutral-50 transition-colors hover:bg-white/10"
            onClick={onClose}
            title="关闭"
            type="button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>
      </div>
      {tutorialActive ? (
        <>
          <div className="pointer-events-none absolute inset-0 z-[180]">
            <div className="absolute inset-0 bg-black/20 backdrop-blur-md" />
            <div className="absolute left-[567px] top-28 h-[581px] w-[327px] rounded-xl outline -outline-offset-1 outline-white/18" />
            <button
              className="pointer-events-auto absolute left-[854px] top-[120px] flex size-8 items-center justify-center rounded-lg text-white/50 transition-colors hover:bg-white/10 hover:text-white/80"
              title="构图参考线"
              type="button"
            >
              <BoxSelect className="h-4 w-4" />
            </button>
          </div>
          <DirectorTutorialFollowBar onCancel={() => onTutorialActiveChange(false)} />
        </>
      ) : null}

      <div className="min-h-0 flex-1 overflow-hidden">
        <div className={cn("grid h-full min-h-0 overflow-hidden", directorFullscreen ? "grid-cols-1" : "grid-cols-[230px_1fr_281px]")}>
          {directorFullscreen ? null : (
          <aside className="min-h-0 overflow-hidden border-white/8 border-r bg-[#1f1f1f]">
            <div className="flex h-full w-full flex-col px-3 py-6 text-neutral-50">
              <div className="flex h-[14px] items-center px-3">
                <span className="text-[14px] font-medium leading-none text-white/85">场景</span>
              </div>
              <div className="relative">
                <span className="sr-only">搜索场景对象</span>
                <input
                  className="mt-6 h-8 w-full rounded-lg bg-white/8 pl-3 pr-9 text-[13px] leading-none text-neutral-50 outline-none placeholder:text-neutral-500 focus:bg-white/10"
                  onChange={(event) => setSceneSearchQuery(event.target.value)}
                  placeholder="请输入搜索内容"
                  value={sceneSearchQuery}
                />
                <Search className="pointer-events-none absolute right-3 top-[40px] h-4 w-4 -translate-y-1/2 text-white/48" />
              </div>
              <div className="mt-5 min-h-0 flex-1 overflow-y-auto [scrollbar-color:rgba(255,255,255,0.36)_transparent] [scrollbar-width:thin]">
                {filteredSceneObjects.length === 0 ? (
                  <div className="px-3 py-5 text-center text-[12px] text-white/35">没有匹配的场景对象</div>
                ) : null}
                <div className="flex w-full flex-col">
                {filteredSceneObjects.map((item) => {
                  const Icon = item.icon;
                  return (
                  <button
                    className={cn(
                      "group relative flex h-8 w-full cursor-pointer items-center py-1 pr-2 text-left text-[12px] leading-none outline-none transition-colors after:pointer-events-none after:absolute after:left-0 after:right-0 after:top-1/2 after:z-0 after:h-6 after:-translate-y-1/2 after:rounded after:transition-colors",
                      selectedObject === item.name
                        ? "text-neutral-50 after:bg-white/8 hover:after:bg-white/8"
                        : "text-white/75 hover:text-neutral-50 hover:after:bg-white/4"
                    )}
                    key={item.name}
                    onClick={() => {
                      setSnapshotClearConfirmOpen(false);
                      setSelectedObject(item.name);
                      setCameraInspectorOpen(item.kind === "camera");
                      if (item.kind === "camera") {
                        setCameraInspectorTab("properties");
                      }
                      setRoleInspectorOpen(item.kind === "role");
                      setRoleMenuOpen(false);
                      setCameraPresetMenuOpen(false);
                      setPanoramaMenuOpen(false);
                      setTransformMenuOpen(false);
                    }}
                    type="button"
                  >
                    <span className="z-10 flex min-w-0 flex-1 items-center">
                      <span className="flex h-8 w-10 shrink-0 items-center justify-center text-white/72">
                        <Icon className="h-3.5 w-3.5" />
                      </span>
                      <span className="z-10 min-w-0 flex-1 truncate pl-1">{item.name}</span>
                    </span>
                  </button>
                  );
                })}
                </div>
              </div>
            </div>
          </aside>
          )}

          <main className="relative min-h-0 overflow-hidden bg-[#111]">
            <div className="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.04)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.04)_1px,transparent_1px)] bg-[length:48px_48px]" />
            <div className="absolute inset-x-[8%] bottom-[18%] h-[28%] skew-y-[-7deg] rounded-[18px] border border-white/12 bg-[#202020] shadow-[0_28px_90px_rgba(0,0,0,0.55)]" />
            <div
              className={cn(
                "absolute left-1/2 top-[42%] h-[116px] w-[66px] -translate-x-1/2 -translate-y-1/2 rounded-t-full border border-white/14 shadow-[0_24px_80px_rgba(92,115,255,0.34)]",
                roleInspectorOpen ? "bg-[#63d46a]/70" : "bg-[#6f7cff]/45"
              )}
            />
            <div
              className={cn(
                "absolute left-1/2 top-[54%] h-[98px] w-[118px] -translate-x-1/2 rounded-[28px] border border-white/12",
                roleInspectorOpen ? "bg-[#5ebd62]/70" : "bg-[#4f5665]"
              )}
            />
            {roleInspectorOpen ? (
              <>
                <div className="absolute left-[45%] top-[60%] h-[3px] w-32 rounded-full bg-gradient-to-r from-transparent via-[#ff3b30] to-[#ff3b30]" />
                <div className="absolute left-1/2 top-[57%] h-28 w-[3px] -translate-x-1/2 rounded-full bg-gradient-to-b from-[#34c759] to-transparent" />
                <div className="absolute left-[51%] top-[56%] h-8 w-8 rounded-[6px] bg-[#244eff]/80" />
              </>
            ) : null}
            <div className="absolute left-[57%] top-[31%] flex h-12 w-16 items-center justify-center rounded-[8px] border border-[#8dc5ff]/60 bg-[#8dc5ff]/16 text-[11px] text-[#b8dcff]">
              机位1
            </div>
            <div className="absolute left-[57%] top-[36%] h-[86px] w-px origin-top -rotate-[28deg] bg-[#8dc5ff]/40" />
            <div className="absolute left-5 top-5 rounded-[9px] border border-white/8 bg-[#202020]/82 px-3 py-2 text-[12px] text-white/50">
              {node.title} · {viewMode === "director" ? "导演视角" : "机位视角"} · {ratio}
            </div>
            <div className="absolute left-1/2 top-[36%] -translate-x-1/2 text-[12px] font-semibold text-white/90">{displayedRoleName}</div>
            <div className="absolute right-5 top-4 h-[72px] w-[72px] overflow-hidden rounded-[8px] bg-[#1c1c1c] shadow-[inset_0_0_0_1px_rgba(255,255,255,0.12)]">
              <canvas className="absolute inset-0 h-full w-full opacity-60" height={144} width={144} />
              <div className="absolute inset-0 bg-[radial-gradient(circle_at_55%_40%,rgba(141,197,255,0.26),transparent_34%),linear-gradient(rgba(255,255,255,0.06)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.06)_1px,transparent_1px)] bg-[length:auto,18px_18px,18px_18px]" />
            </div>
            <button
              className="absolute right-5 top-[94px] h-[21px] w-[72px] rounded-[6px] bg-white/10 text-[11px] text-white/60 transition hover:bg-white/15 hover:text-white/85"
              onClick={closeDirectorFloatingMenus}
              type="button"
            >
              重置视角
            </button>
          </main>

          {directorFullscreen ? null : (
          <aside className="flex min-h-0 flex-col overflow-hidden border-white/8 border-l bg-[#1f1f1f]">
            <div className="flex h-12 shrink-0 items-center border-white/8 border-b px-4 text-[14px] font-semibold text-white/86">
              {cameraInspectorOpen ? "摄像机" : roleInspectorOpen ? "角色" : "3D场景"}
            </div>
            <div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
              {cameraInspectorOpen ? (
                <div className={cn("-mx-4 -my-4", cameraInspectorTab === "shots" && "flex min-h-[calc(100dvh-7rem)] flex-col")}>
                  <section className="border-white/8 border-b px-4 pb-3 pt-4">
                    <div className="flex h-7 gap-2">
                      <button
                        className={cn(
                          "h-7 min-w-12 rounded-lg px-3 text-[13px] font-normal transition-colors",
                          cameraInspectorTab === "properties"
                            ? "bg-white/10 text-neutral-50"
                            : "hover:bg-white/6 text-white/45 hover:text-white/75"
                        )}
                        onClick={() => {
                          setSnapshotClearConfirmOpen(false);
                          setCameraInspectorTab("properties");
                        }}
                        type="button"
                      >
                        属性
                      </button>
                      <button
                        className={cn(
                          "h-7 min-w-12 rounded-lg px-3 text-[13px] font-normal transition-colors",
                          cameraInspectorTab === "shots" ? "bg-white/10 text-neutral-50" : "hover:bg-white/6 text-white/45 hover:text-white/75"
                        )}
                        onClick={() => {
                          setSnapshotClearConfirmOpen(false);
                          setCameraInspectorTab("shots");
                        }}
                        type="button"
                      >
                        摄像机截图
                      </button>
                    </div>
                  </section>
                  {cameraInspectorTab === "properties" ? (
                  <>
                  <section className="border-white/8 border-b px-4 py-4">
                    <div className="relative h-[135px] w-[240px] overflow-hidden rounded-xl border border-white/8 bg-[#08080d]">
                      <div className="absolute left-3 top-3 text-[13px] leading-none text-white/55">FOV {normalizedFov.toFixed(0)}°</div>
                      <div className="absolute inset-x-0 bottom-0 h-[62px] bg-[radial-gradient(circle_at_70%_34%,rgba(141,197,255,0.22),transparent_28%),linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))]" />
                      <div className="absolute bottom-7 right-16 flex h-8 w-12 items-center justify-center rounded border border-[#8dc5ff]/35 bg-[#8dc5ff]/12 text-[9px] text-[#b8dcff]">
                        {selectedObject}
                      </div>
                      <div className="absolute bottom-8 right-24 h-10 w-px rotate-[24deg] bg-[#8dc5ff]/35" />
                      <div className="absolute bottom-7 right-9 h-11 w-8 rounded-t-full bg-[#5d72d8]/70" />
                      <button
                        className="absolute bottom-3 right-3 flex size-6 items-center justify-center rounded-lg bg-white/10 text-white/85 transition-colors hover:bg-white/16 hover:text-white"
                        onClick={() => {
                          closeDirectorFloatingMenus();
                          setViewMode("camera");
                        }}
                        title="切换到机位视角"
                        type="button"
                      >
                        <Maximize2 className="h-3.5 w-3.5" />
                      </button>
                    </div>
                  </section>
                  <section className="space-y-3 border-white/8 border-b px-4 py-4">
                    <label className="block">
                      <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">名称</span>
                      <input
                        className="h-7 w-full rounded-lg border-0 bg-white/10 px-2 text-[12px] text-neutral-50 outline-none placeholder:text-white/30"
                        readOnly
                        value={selectedObject}
                      />
                    </label>
                    <label className="block">
                      <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">切换机位</span>
                      <select
                        className="h-7 w-full rounded-lg border-0 bg-white/10 px-2 text-[12px] text-neutral-50 outline-none"
                        onChange={(event) => {
                          setSnapshotClearConfirmOpen(false);
                          setSelectedObject(event.target.value);
                          setCameraInspectorOpen(true);
                          setCameraInspectorTab("properties");
                        }}
                        value={selectedObject}
                      >
                        {cameraNames.map((name) => (
                          <option key={name} value={name}>
                            {name}
                          </option>
                        ))}
                      </select>
                    </label>
                    <DirectorAxisInputs label="位置" values={selectedCameraConfig.position} />
                    <label className="block">
                      <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">注视目标</span>
                      <select className="h-7 w-full rounded-lg border-0 bg-white/10 px-2 text-[12px] text-neutral-50 outline-none" defaultValue="手动坐标">
                        <option>手动坐标</option>
                        {roleNames.map((name) => (
                          <option key={name}>{name}</option>
                        ))}
                      </select>
                    </label>
                    <DirectorAxisInputs label="注视坐标" values={selectedCameraConfig.target} />
                  </section>
                  <section className="border-white/8 border-b px-4 py-4">
                    <div className="mb-3 flex items-center gap-1">
                      <div className="text-[13px] font-medium leading-none text-white/45">视野角度 (FOV)</div>
                      <HelpCircle className="h-4 w-4 text-white/35" />
                    </div>
                    <div className="flex h-7 items-center gap-2">
                      <div className="relative h-7 w-[170px] shrink-0">
                        <div className="absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 overflow-hidden rounded-full bg-white/12">
                          <span className="block h-full rounded-full bg-[#65c7ff]" style={{ width: `${fovTrackPercent}%` }} />
                        </div>
                        <input
                          className="absolute inset-x-0 top-1/2 h-5 w-full -translate-y-1/2 cursor-pointer opacity-0"
                          max={DIRECTOR_FOV_MAX}
                          min={DIRECTOR_FOV_MIN}
                          onChange={(event) => updateDirectorFov(Number(event.target.value))}
                          step={1}
                          type="range"
                          value={normalizedFov}
                        />
                      </div>
                      <input
                        className="h-7 min-w-px flex-1 rounded-lg border-0 bg-white/10 px-2 text-center text-[13px] tabular-nums text-neutral-50 outline-none transition-colors focus:bg-white/13"
                        onChange={(event) => updateDirectorFov(Number(event.target.value))}
                        value={normalizedFov.toFixed(1)}
                      />
                    </div>
                    <p className="mt-2 text-[12px] leading-[18px] text-white/38">
                      控制镜头视野范围。数值越小，画面越近、越聚焦；数值越大，画面越广、能看到更多环境。
                    </p>
                  </section>
                  <section className="px-4 py-4">
                    <div className="mb-2 text-[12px] text-white/42">相机截图</div>
                    <div className="space-y-2">
                      {cameraSnapshots.map((snapshot) => (
                        <button
                          className="flex h-[92px] w-full items-center gap-3 rounded-[8px] border border-white/8 bg-[#252525] p-2 text-left text-[12px] text-white/74 transition hover:border-white/16 hover:bg-[#2b2b2b]"
                          key={snapshot.id}
                          type="button"
                        >
                          <span className="flex h-20 w-20 shrink-0 items-center justify-center overflow-hidden rounded-[8px] bg-[radial-gradient(circle_at_52%_30%,rgba(141,197,255,0.38),transparent_34%),linear-gradient(135deg,#2b3344,#161719)] text-white/48">
                            <Camera className="h-5 w-5" />
                          </span>
                          <span className="min-w-0 truncate">{snapshot.title}</span>
                        </button>
                      ))}
                    </div>
                  </section>
                  </>
                  ) : (
                  <div className="flex min-h-0 flex-1 flex-col">
                    <div className="flex min-h-0 flex-1 flex-col gap-3 px-2 pb-4 pt-3">
                      {selectedCameraSnapshotsEmpty ? (
                        <div className="flex min-h-0 flex-1 items-center justify-center px-2 text-center text-[13px] leading-5 text-white/40">
                          暂无摄像机截图
                        </div>
                      ) : (
                        <section className="flex w-full flex-col gap-1 px-2">
                          <div className="flex h-7 items-center text-[13px] font-normal leading-none text-white/45">
                            {selectedObject}截图
                          </div>
                          <div className="grid grid-cols-3 gap-1">
                            {selectedCameraSnapshots.map((snapshot) => (
                              <button className="group flex min-w-0 flex-col items-start gap-1" key={snapshot.id} type="button">
                                <span className="flex h-20 w-20 items-center justify-center overflow-hidden rounded-lg bg-[radial-gradient(circle_at_52%_30%,rgba(141,197,255,0.38),transparent_34%),linear-gradient(135deg,#2b3344,#161719)] text-white/48 transition group-hover:text-white/65">
                                  <Camera className="h-5 w-5" />
                                </span>
                                <span className="w-full truncate text-left text-[12px] leading-[18px] text-white/45">
                                  {formatDirectorCameraShotTitle(snapshot.title)}
                                </span>
                              </button>
                            ))}
                          </div>
                        </section>
                      )}
                    </div>
                    <div className="flex h-[73px] shrink-0 items-center gap-2 border-white/8 border-t px-4">
                      <div className="relative flex flex-1">
                        {snapshotClearConfirmOpen ? (
                          <div className="absolute bottom-[calc(100%+8px)] left-0 right-0 flex flex-col gap-2 rounded-xl bg-[#2b2b2b] p-3 shadow-[0_8px_24px_rgba(0,0,0,0.45)]">
                            <div className="text-center text-[13px] text-white/70">确认清空所有截图？</div>
                            <div className="flex gap-2">
                              <button
                                className="hover:bg-white/14 flex h-7 flex-1 items-center justify-center rounded-md bg-white/10 text-[12px] text-white/70 transition-colors"
                                onClick={() => setSnapshotClearConfirmOpen(false)}
                                type="button"
                              >
                                取消
                              </button>
                              <button
                                className="flex h-7 flex-1 items-center justify-center rounded-md bg-red-500/80 text-[12px] text-white transition-[filter,opacity] hover:brightness-110"
                                onClick={() => {
                                  setCameraSnapshots([]);
                                  setSnapshotClearConfirmOpen(false);
                                }}
                                type="button"
                              >
                                确认
                              </button>
                            </div>
                          </div>
                        ) : null}
                        <button
                          className="hover:bg-white/14 flex h-10 w-full items-center justify-center rounded-lg bg-white/10 text-[13px] text-white/70 transition-colors disabled:cursor-not-allowed disabled:opacity-40"
                          disabled={selectedCameraSnapshotsEmpty}
                          onClick={() => setSnapshotClearConfirmOpen(true)}
                          type="button"
                        >
                          全部清空
                        </button>
                      </div>
                      <button
                        className="flex h-10 flex-1 items-center justify-center rounded-lg bg-white text-[13px] text-neutral-950 transition-[filter,opacity] hover:brightness-95 disabled:cursor-not-allowed disabled:opacity-40"
                        disabled={selectedCameraSnapshotsEmpty}
                        onClick={() => {
                          setSnapshotClearConfirmOpen(false);
                          onSendSnapshotsToCanvas(selectedCameraSnapshots);
                        }}
                        type="button"
                      >
                        发送到画布
                      </button>
                    </div>
                  </div>
                  )}
                </div>
              ) : roleInspectorOpen ? (
                <DirectorRoleInspectorPanel selectedObject={selectedObject} />
              ) : (
                <div className="space-y-5">
                  <div>
                    <div className="mb-3 text-[12px] text-white/42">场景缩放</div>
                    <div className="flex items-center gap-3">
                      <input
                        className="h-1.5 flex-1 accent-white"
                        max={100}
                        min={20}
                        onChange={(event) => setFov(Number(event.target.value))}
                        type="range"
                        value={fov}
                      />
                      <input
                        className="h-8 w-14 rounded-[6px] border border-white/8 bg-[#252525] text-center text-[12px] text-white/78 outline-none"
                        onChange={(event) => setFov(Number(event.target.value) || 50)}
                        value={fov.toFixed(0)}
                      />
                    </div>
                  </div>
                  <DirectorAxisInputs label="场景平移" values={["0", "0", "0"]} />
                  <DirectorAxisInputs label="场景旋转" values={["0", "0", "0"]} />
                  <div className="space-y-2">
                    <div className="text-[12px] text-white/42">全景背景</div>
                    <div className="rounded-[8px] border border-white/8 bg-[#252525] px-3 py-3 text-[12px] leading-[19px] text-white/58">
                      <div className="mb-1 text-white/72">已连接全景图</div>
                      <div>请将图片节点连接到导演台左侧输入口</div>
                    </div>
                  </div>
                  <div>
                    <div className="mb-2 text-[12px] text-white/42">天空颜色</div>
                    <div className="flex h-8 items-center rounded-[6px] border border-white/8 bg-[#252525] px-2 text-[12px] text-white/72">
                      <span className="mr-2 h-4 w-4 rounded-[3px] bg-[#2f3a4a]" />
                      #
                    </div>
                  </div>
                  <div className="space-y-3">
                    <div className="text-[12px] font-medium text-white/62">全景球</div>
                    {["水平旋转", "球形半径"].map((label, index) => (
                      <div className="flex items-center gap-3" key={label}>
                        <span className="w-16 text-[12px] text-white/42">{label}</span>
                        <input className="h-1.5 flex-1 accent-white" defaultValue={index === 0 ? 0 : 70} max={100} min={0} type="range" />
                      </div>
                    ))}
                  </div>
                  {["角色标签", "网格吸附", "地面"].map((label, index) => (
                    <label className="flex h-8 items-center justify-between text-[12px] text-white/62" key={label}>
                      <span>{label}</span>
                      <input className="h-4 w-4 accent-white" defaultChecked={index !== 1} type="checkbox" />
                    </label>
                  ))}
                  {["透明度", "高度"].map((label, index) => (
                    <div className="flex items-center gap-3" key={label}>
                      <span className="w-12 text-[12px] text-white/42">{label}</span>
                      <input className="h-1.5 flex-1 accent-white" defaultValue={index === 0 ? 55 : 20} max={100} min={0} type="range" />
                    </div>
                  ))}
                </div>
              )}
            </div>
          </aside>
          )}
        </div>
      </div>

      <div className="pointer-events-none absolute bottom-5 left-1/2 z-[200] flex h-[53px] w-[361px] -translate-x-1/2 items-center justify-center gap-2">
        {directorToolbarItems.map((item) => {
          const Icon = item.icon;
          return (
            <div className="group relative flex h-9 w-9 shrink-0" key={item.label}>
              <button
                aria-label={item.label}
                className={cn(
                  "pointer-events-auto flex h-9 w-9 items-center justify-center rounded-[10px] text-white/66 transition hover:bg-white/8 hover:text-white",
                  item.active &&
                    (item.menu === "transform" ? "bg-white/[0.14] text-white ring-1 ring-white/30" : "bg-white/8 text-white")
                )}
                onClick={item.onClick}
                title={item.label}
                type="button"
              >
                <Icon className="h-4 w-4" />
              </button>
              {item.menu === "transform" && transformMenuOpen ? (
                <div className="pointer-events-auto absolute bottom-[calc(100%+8.5px)] left-[-8.5px] z-[1600] flex h-[118px] w-[132px] flex-col gap-1 rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-[6px] text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
                  {DIRECTOR_TRANSFORM_MODE_OPTIONS.map((option) => {
                    const OptionIcon = option.icon;
                    const selected = directorTransformMode === option.key;
                    return (
                      <button
                        className={cn(
                          "flex h-8 w-full items-center gap-2.5 rounded-lg px-2.5 text-left text-[13px] leading-none transition-colors hover:bg-white/10",
                          selected ? "bg-white/12 text-white" : "text-white/85"
                        )}
                        key={option.key}
                        onClick={() => handleDirectorTransformSelect(option.key)}
                        type="button"
                      >
                        <OptionIcon className="h-5 w-5 shrink-0 text-white/90" strokeWidth={1.8} />
                        <span className="min-w-0 flex-1">{option.label}</span>
                        <span className="text-[13px] font-medium text-white/45">{option.shortcut}</span>
                      </button>
                    );
                  })}
                </div>
              ) : item.label === "添加角色" && roleMenuOpen ? (
                <div className="pointer-events-auto absolute bottom-[calc(100%+8.5px)] left-[-8.5px] z-[1600] flex h-[420px] w-[148px] flex-col rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-[4px] text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
                  {DIRECTOR_ROLE_MENU_OPTIONS.map((option) => (
                    <Fragment key={option.key}>
                      <button
                        className="group flex h-8 w-full items-center gap-2 rounded-lg px-2 text-left text-[13px] leading-none text-white/70 transition-colors hover:bg-white/8 hover:text-white"
                        onClick={() => handleDirectorRoleSelect(option)}
                        type="button"
                      >
                        {option.key === "upload" ? <Upload className="h-4 w-4 shrink-0 text-white/56" /> : <UserRound className="h-4 w-4 shrink-0 text-white/56" />}
                        <span className="min-w-0 flex-1 truncate">{option.label}</span>
                        {option.hasSubmenu ? <ChevronRight className="h-4 w-4 shrink-0 text-white/42" /> : null}
                      </button>
                      {option.separatorAfter ? (
                        <span className="my-[6px] h-px w-full bg-white/8" />
                      ) : option.key !== "geometry" ? (
                        <span className="h-1 w-full" />
                      ) : null}
                    </Fragment>
                  ))}
                </div>
              ) : item.label === "全景图" && panoramaMenuOpen ? (
                <div className="pointer-events-auto absolute bottom-[calc(100%+8px)] left-1/2 z-[1600] flex h-[114px] w-[148px] -translate-x-1/2 flex-col rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-[4px] text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
                  {DIRECTOR_PANORAMA_MENU_OPTIONS.map((option, index) => {
                    const OptionIcon = option.icon;
                    return (
                      <Fragment key={option.key}>
                        <button
                          className="group flex h-8 w-full items-center gap-1.5 rounded-lg px-2 text-left text-[13px] leading-none text-white/70 transition-colors hover:bg-white/8 hover:text-white"
                          onClick={() => handleDirectorPanoramaSelect(option)}
                          type="button"
                        >
                          <OptionIcon className="h-4 w-4 shrink-0 text-white/56" />
                          <span className="min-w-0 flex-1 truncate">{option.label}</span>
                        </button>
                        {index < DIRECTOR_PANORAMA_MENU_OPTIONS.length - 1 ? <span className="h-1 w-full" /> : null}
                      </Fragment>
                    );
                  })}
                </div>
              ) : item.label === "添加机位" && cameraPresetMenuOpen ? (
                <div className="pointer-events-auto absolute bottom-[calc(100%+8px)] left-1/2 z-[1600] h-[318px] w-[240px] -translate-x-1/2 rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-[6px] text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
                  <div className="h-6 px-0 pb-1 pt-1 text-[10px] font-semibold leading-none text-white/35">选择机位视角</div>
                  <div className="max-h-[280px] overflow-y-auto [scrollbar-color:rgba(255,255,255,0.36)_transparent] [scrollbar-width:thin]">
                    <div className="grid grid-cols-2 gap-1.5">
                      {DIRECTOR_CAMERA_PRESET_OPTIONS.map((option) => (
                        <button
                          className="flex h-[72px] min-w-0 flex-col items-center justify-center gap-1.5 rounded-xl bg-white/[0.06] px-1.5 py-3 text-center text-[11px] leading-tight text-white/75 transition-colors hover:bg-white/10 hover:text-white"
                          key={option}
                          onClick={() => handleDirectorCameraPresetSelect(option)}
                          type="button"
                        >
                          <Video className="h-6 w-6 text-white/42" strokeWidth={1.6} />
                          <span>{option}</span>
                        </button>
                      ))}
                    </div>
                  </div>
                </div>
              ) : (
                <span className="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 z-[1700] flex h-7 max-w-[240px] -translate-x-1/2 items-center whitespace-nowrap rounded-lg bg-[#2b2b2b] px-2 text-xs text-white opacity-0 shadow-lg transition group-hover:opacity-100">
                  {item.label}
                </span>
              )}
            </div>
          );
        })}
        <div className="group relative flex h-9 w-9 shrink-0">
          <button
            aria-label="选择画幅比例"
            className={cn(
              "pointer-events-auto flex h-9 w-9 items-center justify-center rounded-[10px] text-white/66 transition hover:bg-white/8 hover:text-white",
              ratioMenuOpen && "bg-white/8 text-white"
            )}
            onClick={() => {
              setCameraPresetMenuOpen(false);
              setRoleMenuOpen(false);
              setPanoramaMenuOpen(false);
              setTransformMenuOpen(false);
              setRatioMenuOpen((current) => !current);
            }}
            title="选择画幅比例"
            type="button"
          >
            <BoxSelect className="h-4 w-4" />
          </button>
          {ratioMenuOpen ? (
            <div className="pointer-events-auto absolute bottom-[calc(100%+8px)] left-1/2 z-[1600] h-[182px] w-[280px] -translate-x-1/2 rounded-xl border border-white/12 bg-[rgba(31,31,31,0.72)] p-3 text-white shadow-[0_4px_10px_rgba(0,0,0,0.35),0_2px_4px_rgba(0,0,0,0.25)] backdrop-blur-[14px]">
              <div className="mb-2 text-[12px] leading-none text-white/45">比例</div>
              <div className="grid grid-cols-4 gap-2">
                {DIRECTOR_RATIO_OPTIONS.map((option) => (
                  <button
                    className={cn(
                      "flex h-16 min-w-0 flex-col items-center justify-center gap-1 rounded-lg border border-white/20 px-1 py-3 text-[12px] leading-none text-white/55 transition-colors hover:bg-white/8 hover:text-white",
                      ratio === option && "bg-white/8 text-white"
                    )}
                    key={option}
                    onClick={() => setRatio(option)}
                    type="button"
                  >
                    <DirectorRatioPreview ratio={option} />
                    <span>{option}</span>
                  </button>
                ))}
              </div>
            </div>
          ) : (
            <span className="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 z-[1700] flex h-7 max-w-[240px] -translate-x-1/2 items-center whitespace-nowrap rounded-lg bg-[#2b2b2b] px-2 text-xs text-white opacity-0 shadow-lg transition group-hover:opacity-100">
              选择画幅比例
            </span>
          )}
        </div>
        {directorTrailingToolbarItems.map((item) => {
          const Icon = item.icon;
          return (
            <div className="group relative flex h-9 w-9 shrink-0" key={item.label}>
              <button
                aria-label={item.label}
                className="pointer-events-auto flex h-9 w-9 items-center justify-center rounded-[10px] text-white/66 transition hover:bg-white/8 hover:text-white disabled:cursor-not-allowed disabled:opacity-60"
                disabled={item.disabled}
                onClick={item.onClick}
                title={item.label}
                type="button"
              >
                {item.loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <Icon className="h-4 w-4" />}
              </button>
              <span className="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 z-[1700] flex h-7 max-w-[240px] -translate-x-1/2 items-center whitespace-nowrap rounded-lg bg-[#2b2b2b] px-2 text-xs text-white opacity-0 shadow-lg transition group-hover:opacity-100">
                {item.label}
              </span>
            </div>
          );
        })}
      </div>

      <input
        accept="image/*"
        className="hidden"
        onChange={(event) => {
          event.currentTarget.value = "";
        }}
        ref={panoramaUploadInputRef}
        type="file"
      />

      {aiImportOpen ? (
        <DirectorAiImportDialog
          mode={aiImportMode}
          onClose={() => setAiImportOpen(false)}
          onModeChange={setAiImportMode}
          onSelectImage={(imageUrl) => {
            setAiImportSelectedImage(imageUrl);
            setAiImportTab("history");
          }}
          onStart={handleStartAiImport}
          onTabChange={setAiImportTab}
          running={aiImportRunning}
          selectedImage={aiImportSelectedImage}
          tab={aiImportTab}
        />
      ) : null}
      {panoramaHistoryOpen ? <DirectorPanoramaHistoryDialog onClose={() => setPanoramaHistoryOpen(false)} /> : null}
      {panoramaAiOpen ? <DirectorPanoramaAiDialog onClose={() => setPanoramaAiOpen(false)} /> : null}
    </div>
  );
}

function DirectorPanoramaHistoryDialog({ onClose }: { onClose: () => void }) {
  const [activeTab, setActiveTab] = useState<"image" | "video" | "audio">("image");
  const tabs = [
    { count: 8, key: "image" as const, label: "图片历史" },
    { count: 10, key: "video" as const, label: "视频历史" },
    { count: 6, key: "audio" as const, label: "音频历史" },
  ];
  const assets = Array.from({ length: activeTab === "video" ? 10 : activeTab === "audio" ? 6 : 8 }, (_, index) => ({
    id: `${activeTab}-${index}`,
    image: DIRECTOR_AI_HISTORY_IMAGES[index % DIRECTOR_AI_HISTORY_IMAGES.length],
    title: activeTab === "image" ? `全景参考 ${index + 1}` : activeTab === "video" ? `视频资产 ${index + 1}` : `音频资产 ${index + 1}`,
  }));

  return (
    <div className="absolute inset-0 z-[650] flex items-start justify-center bg-transparent">
      <section className="relative mt-20 h-[645px] w-[calc(100vw-151.2px)] max-w-[1360.8px] overflow-hidden rounded-[16px] bg-[#262626] text-white shadow-2xl">
        <div className="flex h-[58px] items-center gap-4 border-white/8 border-b px-6">
          <div className="text-[16px] font-semibold leading-5 text-white/90">历史资产</div>
          <span className="rounded-md bg-white/8 px-2 py-1 text-[12px] leading-none text-white/58">100%</span>
          <button
            className="absolute right-4 top-4 flex h-7 w-7 items-center justify-center rounded-lg text-white/56 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-12 items-center justify-between border-white/8 border-b px-6">
          <div className="flex items-center gap-6">
            {tabs.map((tabItem) => (
              <button
                className={cn(
                  "h-8 text-[13px] leading-8 transition-colors hover:text-white",
                  activeTab === tabItem.key ? "font-medium text-white" : "text-white/42"
                )}
                key={tabItem.key}
                onClick={() => setActiveTab(tabItem.key)}
                type="button"
              >
                {tabItem.label}({tabItem.count})
              </button>
            ))}
          </div>
          <div className="flex items-center gap-3 text-[12px] text-white/54">
            <button className="flex h-8 items-center gap-1 rounded-lg bg-white/8 px-3 text-white/62" type="button">
              时间降序
              <ChevronDown className="h-3.5 w-3.5" />
            </button>
            <button className="h-8 rounded-lg bg-white/8 px-3 text-white/62" type="button">
              批量操作
            </button>
          </div>
        </div>

        <div className="h-[535px] overflow-hidden px-6 py-4">
          <div className="mb-4 text-[13px] leading-[18px] text-white/66">2026-07-09</div>
          <div className="grid grid-cols-4 gap-4">
            {assets.slice(0, 8).map((asset) => (
              <div className="group overflow-hidden rounded-[10px] bg-[#1f1f1f]" key={asset.id}>
                <div className="relative h-[138px] overflow-hidden bg-[#303030]">
                  {activeTab === "image" ? (
                    <img alt="" className="h-full w-full object-cover" src={asset.image} />
                  ) : (
                    <div className="flex h-full w-full items-center justify-center bg-[radial-gradient(circle_at_50%_28%,rgba(255,255,255,0.14),transparent_30%),#303030] text-white/34">
                      {activeTab === "video" ? <Video className="h-10 w-10" /> : <Music2 className="h-10 w-10" />}
                    </div>
                  )}
                  <span className="absolute left-2 top-2 rounded bg-black/45 px-1.5 py-0.5 text-[10px] leading-none text-white/70">历史</span>
                </div>
                <div className="flex h-[74px] flex-col justify-between px-3 py-2">
                  <div className="truncate text-[12px] leading-[17px] text-white/72">{asset.title}</div>
                  <div className="flex items-center gap-2 text-[12px] leading-none text-white/58">
                    <button className="rounded-md px-1 py-1 transition-colors hover:bg-white/8 hover:text-white" type="button">
                      查看
                    </button>
                    <button className="rounded-md px-1 py-1 transition-colors hover:bg-white/8 hover:text-white" type="button">
                      使用
                    </button>
                    <button className="rounded-md px-1 py-1 transition-colors hover:bg-white/8 hover:text-white" type="button">
                      下载
                    </button>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function DirectorPanoramaAiDialog({ onClose }: { onClose: () => void }) {
  const uploadInputRef = useRef<HTMLInputElement | null>(null);

  return (
    <div className="absolute inset-0 z-[500] flex items-center justify-center bg-black/35">
      <section className="flex h-[448px] w-[640px] flex-col overflow-hidden rounded-xl border border-white/8 bg-[#1f1f1f] text-white shadow-2xl">
        <div className="flex h-[52px] shrink-0 items-start justify-between px-4 pt-[10px]">
          <div className="pt-0.5 text-sm font-medium leading-5 text-white">AI生成</div>
          <button
            className="flex h-6 w-6 items-center justify-center rounded-lg text-white/74 transition-colors hover:bg-white/10 hover:text-white"
            onClick={onClose}
            type="button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="px-4 pt-[10px]">
          <button
            className="flex h-[320px] w-full flex-col items-center justify-center rounded-lg border border-white/8 bg-white/[0.03] text-white/72 transition-colors hover:border-white/16 hover:bg-white/[0.05] hover:text-white"
            onClick={() => uploadInputRef.current?.click()}
            type="button"
          >
            <Upload className="mb-4 h-8 w-8 text-white/42" />
            <span className="text-[14px] leading-5">上传图片</span>
          </button>
        </div>

        <div className="relative mt-4 h-12 shrink-0 border-white/8 border-t">
          <div className="absolute left-4 top-[7px] text-xs leading-[18px] text-white/65">退出不会中断生成，可在历史记录中查看结果</div>
          <div className="absolute right-4 top-[1px] flex items-start gap-3">
            <span className="text-[13px] leading-7 text-white/78">0</span>
            <button
              aria-label="生成"
              className="flex h-7 w-7 items-center justify-center rounded-full bg-white text-[#141414] transition-colors hover:bg-neutral-100 active:bg-neutral-200"
              title="生成"
              type="button"
            >
              <Sparkles className="h-3.5 w-3.5" />
            </button>
          </div>
        </div>

        <input
          accept="image/*"
          className="hidden"
          onChange={(event) => {
            event.currentTarget.value = "";
          }}
          ref={uploadInputRef}
          type="file"
        />
      </section>
    </div>
  );
}

function DirectorRoleInspectorPanel({ selectedObject }: { selectedObject: string }) {
  return (
    <div className="-mx-4 -my-4">
      <section className="border-white/8 border-b px-4 pb-3 pt-4">
        <div className="flex h-7 gap-2">
          <button className="h-7 min-w-12 rounded-lg bg-white/10 px-3 text-[13px] text-white" type="button">
            属性
          </button>
          <button className="h-7 rounded-lg px-3 text-[13px] text-white/40 hover:bg-white/6 hover:text-white/65" type="button">
            姿势
          </button>
        </div>
      </section>
      <section className="border-white/8 border-b px-4 py-4">
        <div className="space-y-3">
          <label className="block">
            <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">名称</span>
            <input
              className="h-7 w-full rounded-lg border-0 bg-white/10 px-2 text-[12px] text-neutral-50 outline-none placeholder:text-white/30"
              readOnly
              value={selectedObject}
            />
          </label>
          <DirectorAxisInputs label="位置" values={["0", "0", "0"]} />
          <DirectorAxisInputs label="旋转" values={["0", "0", "0"]} />
          <DirectorAxisInputs label="缩放" values={["1.03", "1.03", "1.03"]} />
          <div>
            <div className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">统一缩放</div>
            <div className="flex items-center gap-3">
              <input className="h-1.5 flex-1 accent-[#65c7ff]" defaultValue={1} max={2} min={0.2} step={0.1} type="range" />
              <input
                className="h-8 w-14 rounded-[8px] border-0 bg-white/10 text-center text-[12px] text-white/78 outline-none"
                readOnly
                value="1.0"
              />
            </div>
          </div>
          <label className="block">
            <span className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">颜色</span>
            <div className="flex h-7 items-center rounded-lg bg-white/10 px-2 text-[12px] text-white/75">
              <span className="mr-2 h-5 w-5 rounded-md bg-[#34C759]" />
              <span className="mr-1 text-white/35">#</span>
              <span>34C759</span>
            </div>
          </label>
        </div>
      </section>
    </div>
  );
}

function DirectorAiImportDialog({
  mode,
  onClose,
  onModeChange,
  onSelectImage,
  onStart,
  onTabChange,
  running,
  selectedImage,
  tab,
}: {
  mode: "insert" | "overwrite";
  onClose: () => void;
  onModeChange: (mode: "insert" | "overwrite") => void;
  onSelectImage: (imageUrl: string) => void;
  onStart: () => void;
  onTabChange: (tab: "upload" | "history") => void;
  running: boolean;
  selectedImage: string | null;
  tab: "upload" | "history";
}) {
  const showHistory = tab === "history" && !selectedImage;

  return (
    <div className="absolute inset-0 z-[500] flex items-center justify-center bg-black/35 backdrop-blur-sm">
      <section className="flex h-[571px] w-[640px] flex-col overflow-hidden rounded-xl border border-white/10 bg-[#1f1f1f] shadow-2xl">
        <div className="flex h-12 shrink-0 items-start justify-between border-white/10 border-b px-4 pt-3">
          <div className="pt-0.5 text-sm font-medium leading-5 text-white">AI 识图导入</div>
          <button
            className="flex size-6 items-center justify-center rounded-lg text-white/80 transition-colors hover:bg-white/10 hover:text-white"
            onClick={onClose}
            type="button"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="flex flex-1 flex-col gap-4 px-4 py-4">
          <div className="flex h-[18px] items-center gap-6">
            {[
              { key: "upload" as const, label: "本地上传" },
              { key: "history" as const, label: "历史记录" },
            ].map((item) => (
              <button
                className={cn(
                  "h-[18px] shrink-0 text-[13px] leading-[18px] transition-colors hover:text-white/75 disabled:cursor-not-allowed disabled:opacity-45",
                  tab === item.key ? "font-medium text-white" : "text-white/40"
                )}
                disabled={running}
                key={item.key}
                onClick={() => onTabChange(item.key)}
                type="button"
              >
                {item.label}
              </button>
            ))}
          </div>

          {selectedImage ? (
            <button
              className="group relative flex h-[298px] w-full shrink-0 items-center justify-center overflow-hidden rounded-xl border border-white/8 bg-[#171717]"
              disabled={running}
              onClick={() => {
                if (!running) {
                  onTabChange("history");
                }
              }}
              type="button"
            >
              <img alt="上传图片预览" className="h-full w-full object-cover" src={selectedImage} />
              <span className="absolute inset-0 flex items-center justify-center bg-black/55 text-[13px] text-white opacity-0 transition-opacity group-hover:opacity-100">
                更换图片
              </span>
            </button>
          ) : showHistory ? (
            <div className="h-[298px] w-full shrink-0 overflow-hidden">
              <div className="text-[13px] leading-[18px] text-white/66">2026-07-09</div>
              <div className="mt-[23px] grid grid-cols-4 gap-3 px-[9px]">
                {DIRECTOR_AI_HISTORY_IMAGES.map((imageUrl, index) => (
                  <div className="group relative h-[138px] overflow-hidden rounded-lg bg-[#262626]" key={`${imageUrl}-${index}`}>
                    <img alt="" className="h-full w-full object-cover" src={imageUrl} />
                    <span className="pointer-events-none absolute left-1.5 top-1.5 h-4 w-[33px] rounded bg-black/45" />
                    <div className="absolute inset-0 flex items-center justify-center bg-black/55 opacity-100 transition-opacity">
                      <button
                        className="flex h-7 w-[38px] cursor-pointer items-center justify-center rounded-lg px-1.5 text-[13px] text-white transition-colors hover:text-white/80"
                        onClick={() => onSelectImage(imageUrl)}
                        type="button"
                      >
                        使用
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ) : (
            <button
              className="relative flex h-[298px] w-full shrink-0 flex-col items-center justify-center overflow-hidden rounded-xl border border-dashed border-white/22 bg-[#171717] px-12 text-center transition-colors hover:border-white/34"
              onClick={() => onTabChange("history")}
              type="button"
            >
              <Upload className="mb-3 h-8 w-8 text-white/35" />
              <span className="text-[14px] leading-5 text-white/78">点击上传图片或拖拽本地图片至此上传</span>
              <span className="mt-2 text-[12px] leading-[17px] text-white/38">上传后画布将新建一个图片节点并自动替换当前图源</span>
            </button>
          )}

          <div className="flex flex-col gap-2">
            <div className="text-[13px] leading-[18px] text-white/65">选择是否覆盖场景</div>
            <div className="flex gap-2">
              {[
                {
                  key: "insert" as const,
                  title: "插入当前导演台",
                  desc: "作为站位参考层插入，不覆盖当前全景、角色和机位",
                },
                {
                  key: "overwrite" as const,
                  title: "覆盖当前导演台",
                  desc: "作为站位参考层插入，覆盖当前全景、角色和机位",
                },
              ].map((item) => (
                <button
                  className={cn(
                    "flex h-[53px] w-[299px] items-start gap-2 rounded-lg border px-2 py-2 text-left transition-colors",
                    mode === item.key
                      ? "border-white/28 bg-white/[0.04] text-white/80"
                      : "border-white/10 bg-transparent text-white/45 hover:border-white/20 hover:text-white/65"
                  )}
                  disabled={running}
                  key={item.key}
                  onClick={() => onModeChange(item.key)}
                  type="button"
                >
                  <span
                    className={cn(
                      "mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-full border",
                      mode === item.key ? "border-white bg-white text-[#141414]" : "border-white/24"
                    )}
                  >
                    {mode === item.key ? <Check className="h-3 w-3" /> : null}
                  </span>
                  <span className="min-w-0">
                    <span className="block text-[13px] leading-[18px]">{item.title}</span>
                    <span className="mt-0.5 block text-[11px] leading-[15px] text-current opacity-65">{item.desc}</span>
                  </span>
                </button>
              ))}
            </div>
          </div>
        </div>

        <div className="flex h-16 shrink-0 items-start justify-between border-white/10 border-t px-4 pt-4">
          <div className="pt-[7px] text-xs leading-[17px] text-white/65">退出不会中断生成过程，全景图生成成功后，会自动加载到背景</div>
          <div className="flex h-8 shrink-0 items-center gap-2">
            <span className="text-[13px] leading-[18px] text-white/78">6</span>
            <button
              className="flex h-8 min-w-[102px] items-center justify-center gap-1.5 rounded-lg bg-white px-3 text-[13px] leading-[18px] text-[#141414] transition-[filter,opacity] hover:bg-neutral-100 active:bg-neutral-200 disabled:cursor-not-allowed disabled:opacity-45"
              disabled={!selectedImage || running}
              onClick={onStart}
              type="button"
            >
              {running ? (
                <>
                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
                  识图中…
                </>
              ) : (
                "识图导入场景"
              )}
            </button>
          </div>
        </div>
      </section>
    </div>
  );
}

function DirectorAxisInputs({
  label,
  values,
}: {
  label: string;
  values: [string, string, string] | string[];
}) {
  return (
    <div>
      <div className="mb-1 flex h-7 items-center text-[13px] font-normal leading-none text-white/45">{label}</div>
      <div className="grid grid-cols-3 gap-1">
        {["X", "Y", "Z"].map((axis, index) => (
          <label className="relative block" key={axis}>
            <span
              className="pointer-events-none absolute left-2 top-1/2 z-10 -translate-y-1/2 text-[12px] leading-none text-white/30"
              title={`左右拖动调整 ${axis} 轴`}
            >
              {axis}
            </span>
            <input
              className="h-7 w-full rounded-lg border-0 bg-white/10 pl-6 pr-1 text-[12px] leading-none text-white/78 outline-none"
              defaultValue={values[index] || "0"}
            />
          </label>
        ))}
      </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) => 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 safeDuration = Math.max(1, 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();
      setPlaying(true);
      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] object-cover"
        muted
        onEnded={() => setPlaying(false)}
        onPause={() => setPlaying(false)}
        onPlay={() => setPlaying(true)}
        onTimeUpdate={(event) => setCurrentTime(event.currentTarget.currentTime)}
        playsInline
        poster={previewUrl || undefined}
        preload="metadata"
        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);
                  }}
                  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 durationLabel = `00:00 / ${formatAudioTimestamp(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"
      )}
    >
      <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
        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"
        onClick={() => toast.info("音频播放控制待接入。")}
        type="button"
      >
        <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({
  onClearGridSplit,
  onClearGridSplitSelection,
  onClearLocalEditRegions,
  node,
  onCancelGeneration,
  onExtractVideoFrame,
  onSetLocalEditMode,
  onSubmitLocalEdit,
  onToggleGridSplitSelection,
  onUpdateLocalEditRegions,
  selected,
}: {
  onClearGridSplit: () => void;
  onClearGridSplitSelection: () => void;
  onClearLocalEditRegions: () => void;
  node: CloneNode;
  onCancelGeneration: () => void;
  onExtractVideoFrame: (kind: VideoFrameExtractionKind) => 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-[20px] font-semibold text-white/50">
        <span className="flex min-w-0 items-center gap-1">
          <Icon className="h-5 w-5 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>
      {mediaType === "audio" ? (
        <OfficialAudioCard durationSeconds={getDraftNumber(node, "durationSeconds", 3)} mediaUrl={mediaUrl} selected={selected} />
      ) : 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={getVideoNodePreviewUrl(node) || sourceUrl}
              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"
            onClick={() => toast.info("视频全屏预览待接入。")}
            type="button"
          >
            ↗
          </button>
        </div>
      ) : (
        <div
          className={cn(
            "relative h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/12 bg-white 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={cn("pointer-events-none h-full w-full", localEditMode || isCharacterThreeViewNode(node) ? "object-contain" : "object-cover")}
              draggable={false}
              onDragStart={preventNativeImageDrag}
              src={mediaUrl}
              style={{ transform: `rotate(${rotation}deg)` }}
            />
          ) : (
            <div className="flex h-full items-center justify-center text-[13px] text-black/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"
              onClick={() => toast.info(`${node.title}素材替换接口待接入。`)}
              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-[20px] font-semibold text-white/50">
        <FileText className="h-5 w-5" />
        <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-[22px] leading-8 text-white/72 outline-none placeholder:text-white/48",
            textContent && "top-[44px] h-[calc(100%-88px)] text-left text-[18px] leading-8"
          )}
          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 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
        ? ""
        : STORY_SCRIPT_TEXT;
  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-[20px] font-semibold text-white/50">
        {scriptRole === "generator" ? <GridTilesGlyph /> : <FileText className="h-5 w-5" />}
        {node.title}
      </div>
      {scriptRole === "generator" ? (
        <div
          className={cn(
            "h-[calc(100%-32px)] overflow-hidden rounded-[10px] border border-white/12 bg-white text-[#1f2329] 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-[#e5e7eb] border-b px-4">
            <span className="font-semibold text-[15px]">故事脚本</span>
            <span
              className={cn(
                "rounded-full px-3 py-1 text-[12px]",
                isGenerating
                  ? "bg-[#eef0ff] text-[#5161ff]"
                  : isGenerationFailed
                    ? "bg-[#fff1f1] text-[#d64545]"
                    : isGenerated
                      ? "bg-[#edf8ef] text-[#268648]"
                      : "bg-[#eef0ff] text-[#5161ff]"
              )}
            >
              {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-[#eef0f3] border-b bg-[#f7f8fa] text-[12px] text-[#697080]">
                {["镜号", "时长", "画面描述", "景别", "光影氛围", "对白·旁白", "音效", "运镜", "最终提示词"].map((item) => (
                  <div className="border-[#eef0f3] border-r 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-[#eef0f3] border-b text-[12px]" 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-[#eef0f3] border-r 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] bg-[#111] text-[13px] font-semibold text-white transition hover:bg-[#262626]"
                onClick={(event) => {
                  event.stopPropagation();
                  onOpenWorkflow();
                }}
                onPointerDown={(event) => event.stopPropagation()}
                type="button"
              >
                打开脚本节点 →
              </button>
            ) : null}
            <button
              className={cn(
                "h-10 rounded-[10px] bg-[#111] text-[13px] font-semibold text-white disabled:cursor-wait disabled:bg-[#555]",
                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/12 bg-[#f4f5f7] text-[#1f2329] 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-[#dfe2e8] border-b px-4 text-[13px] text-[#697080]">
            <span>输入内容</span>
            <button className="rounded-[8px] px-2 py-1 text-[#4f5cff] hover:bg-black/5" onClick={() => toast.info("编辑剧本接口待接入。")} type="button">
              编辑
            </button>
          </div>
          <textarea
            className="h-[calc(100%-44px)] w-full resize-none bg-transparent px-5 py-4 text-[14px] leading-7 outline-none placeholder:text-black/38"
            onChange={(event) => onTextResourceChange(event.target.value)}
            onPointerDown={(event) => event.stopPropagation()}
            onWheel={(event) => event.stopPropagation()}
            placeholder="输入内容"
            value={textContent}
          />
        </div>
      )}
    </div>
  );
}

function AddModulePanel({
  onAddModule,
  onClose,
  onGallerySelect,
  onHistorySelect,
  onUploadFiles,
}: {
  onAddModule: (kind: AddModuleKind) => void;
  onClose: () => 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>
      </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={(action) => {
          toast.info(action === "style" ? "风格库节点待接入。" : "特效库节点待接入。");
          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>
            ) : (
              <button className="flex h-7 w-[54px] items-center justify-center rounded-[8px] bg-white/10 text-[13px] text-white" type="button">
                全部
              </button>
            )}
          </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("LibTV");
  const [mediaTab, setMediaTab] = useState<"image" | "video" | "audio">("image");
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const imageNodes = nodes.filter((node) => node.inputType === "image" || /图片|镜头|角色|场景|道具|皇帝|沈昭昭|长安|金銮殿/.test(node.title));
  const videoNodes = nodes.filter((node) => node.inputType === "video" || /视频/.test(node.title));
  const audioNodes = nodes.filter((node) => node.inputType === "audio" || /音频/.test(node.title));
  const historyImageNodes = imageNodes.length >= 8 ? imageNodes : [...imageNodes, ...DEFAULT_IMAGE_HISTORY_NODES.slice(0, 8 - imageNodes.length)];
  const historyVideoNodes = videoNodes.length > 0 ? videoNodes : DEFAULT_VIDEO_HISTORY_NODES;
  const historyAudioNodes = audioNodes.length > 0 ? audioNodes : DEFAULT_AUDIO_HISTORY_NODES;
  const activeNodes =
    sourceTab === "LibTV"
      ? mediaTab === "image"
        ? historyImageNodes
        : mediaTab === "video"
          ? historyVideoNodes
          : historyAudioNodes
      : [];
  const visibleNodes = activeNodes.slice(0, 10);
  const selectedNodes = visibleNodes.filter((node) => selectedIds.includes(node.id));
  const unit = "张";
  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-[calc(100vh-160px)] min-h-[360px] 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">
            {["LibTV", "Lib生成器", "WebUI", "ComfyUI", "AI应用"].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>
        <div className="min-h-0 flex-1 px-6 pb-4 pt-4">
          {visibleNodes.length > 0 ? (
            <div className="grid grid-cols-6 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}
                    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-2 right-2 flex gap-2 opacity-0 transition group-hover:opacity-100">
                      <span className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/86">
                        <Trash2 className="h-4 w-4" />
                      </span>
                      <span className="flex h-7 w-7 items-center justify-center rounded-full bg-black/60 text-white/86">
                        <Search className="h-4 w-4" />
                      </span>
                    </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">
          <div className="flex items-center gap-4 text-[13px] text-white/42">
            <button className="flex h-8 w-8 items-center justify-center rounded-lg text-white/36 transition hover:bg-white/8 hover:text-white" type="button">
              <ChevronRight className="h-4 w-4 rotate-180" />
            </button>
            <span className="flex h-8 min-w-8 items-center justify-center rounded-lg bg-white/10 px-3 text-white/82">1</span>
            <button className="flex h-8 w-8 items-center justify-center rounded-lg text-white/36 transition hover:bg-white/8 hover:text-white" type="button">
              <ChevronRight className="h-4 w-4" />
            </button>
            <span className="flex h-8 items-center rounded-lg bg-white/10 px-3 text-white/58">15条/页</span>
            <span>跳至</span>
            <span className="h-8 w-10 rounded-lg bg-white/10" />
            <span>页</span>
          </div>
          <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,
}: {
  listDownloadPendingId: string | null;
  nodes: CloneNode[];
  onClose: () => void;
  onOpenWatermarkRules: (node: CloneNode) => void;
  onSelectNode: (id: string) => void;
  onUseNode: (node: CloneNode) => 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" || /图片|镜头|角色|场景|道具|皇帝|沈昭昭|长安|金銮殿/.test(node.title));
  const videoNodes = nodes.filter((node) => node.inputType === "video" || /视频/.test(node.title));
  const audioNodes = nodes.filter((node) => node.inputType === "audio" || /音频/.test(node.title));
  const deletedHistoryIdSet = new Set(deletedHistoryIds);
  const historyImageNodesBase = imageNodes.length >= 8 ? imageNodes : [...imageNodes, ...DEFAULT_IMAGE_HISTORY_NODES.slice(0, 8 - imageNodes.length)];
  const historyVideoNodesBase = videoNodes.length > 0 ? videoNodes : DEFAULT_VIDEO_HISTORY_NODES;
  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 : [...activeNodes].reverse();
  const visibleNodes = sortedNodes.slice(0, 8);
  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(() => {
    if (!batchDownloadPending) return;
    const timer = window.setTimeout(() => {
      setBatchDownloadPending(false);
    }, 15000);
    return () => window.clearTimeout(timer);
  }, [batchDownloadPending]);

  useEffect(() => {
    if (!previewDownloadPending) return;
    const timer = window.setTimeout(() => {
      setPreviewDownloadPending(false);
    }, 15000);
    return () => window.clearTimeout(timer);
  }, [previewDownloadPending]);

  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 = () => {
    if (batchDownloadPending) return;
    if (selectedNodes.length === 0) return;
    setBatchDownloadPending(true);
  };

  const runBatchDelete = () => {
    if (batchDownloadPending) return;
    if (selectedNodes.length === 0) return;
    setBatchDeleteConfirmOpen(true);
  };

  const confirmBatchDelete = () => {
    if (selectedNodes.length === 0) {
      setBatchDeleteConfirmOpen(false);
      return;
    }
    setDeletedHistoryIds((current) => Array.from(new Set([...current, ...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">2026-07-09</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();
                                  onOpenWatermarkRules(node);
                                }}
                                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={() => setPreviewDownloadPending(true)}
                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,
  onClose,
  onDuplicateNode,
  onRenameNode,
  onResizeStart,
  onSelectNode,
  panelWidth,
}: {
  nodes: CloneNode[];
  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 [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="未命名工作区"
          />
          <button className="flex h-7 w-[68px] items-center justify-center rounded-lg text-[13px] text-white hover:bg-white/10" type="button">
            画布 1
          </button>
        </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 ? "展开全部分组" : "收起全部分组"}
                    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">
            {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-2 py-3">
          <div className="flex h-[30px] items-center gap-1">
            <div className="relative h-[30px] min-w-0 flex-1">
              <input
                className="h-[30px] w-full rounded-lg border border-white/10 bg-white/8 px-3 pr-8 text-[13px] text-white outline-none placeholder:text-white/35"
                onChange={(event) => setAssetSearchQuery(event.target.value)}
                placeholder="请输入搜索内容"
                value={assetSearchQuery}
              />
              <button aria-label="搜索" className="absolute right-1 top-1 flex h-[22px] w-[22px] items-center justify-center rounded-md text-white/50 hover:bg-white/10 hover:text-white" type="button">
                <Search className="h-3.5 w-3.5" />
              </button>
            </div>
            <div className="relative" ref={assetFilterRef}>
              <button
                aria-label="筛选素材类型"
                className="flex h-7 w-7 items-center justify-center rounded-lg text-white/55 hover:bg-white/10 hover:text-white"
                onClick={() => setAssetFilterOpen((value) => !value)}
                type="button"
              >
                <Settings2 className="h-4 w-4" />
              </button>
              {assetFilterOpen ? (
                <div className="absolute left-0 top-[38px] z-[410] w-[322px] rounded-[12px] border border-white/10 bg-[#212121] p-4 shadow-[0_18px_60px_rgba(0,0,0,0.46)]" role="menu">
                  <div className="text-[14px] leading-5 text-white/50">标签</div>
                  <div className="mt-3 grid w-[192px] grid-cols-3 gap-x-2 gap-y-2">
                    {["其它", "人物", "场景", "物品", "风格", "音效"].map((tag) => (
                      <button className="h-8 rounded-lg text-[13px] text-white/78 hover:bg-white/10" key={tag} type="button">
                        {tag}
                      </button>
                    ))}
                  </div>
                  <div className="mt-5 flex justify-end gap-3">
                    <button className="h-8 rounded-lg px-3 text-[13px] text-white/55 hover:bg-white/10" onClick={() => setAssetFilterOpen(false)} type="button">
                      清空
                    </button>
                    <button className="h-8 rounded-lg px-3 text-[13px] text-white hover:bg-white/10" onClick={() => setAssetFilterOpen(false)} type="button">
                      应用
                    </button>
                  </div>
                </div>
              ) : null}
            </div>
          </div>

          <div className="flex min-h-0 flex-1 flex-col">
            <div className="tiny-scrollbar h-full overflow-y-auto overflow-x-hidden">
              <div className="flex min-h-[188px] flex-col items-center justify-center px-4 py-8 text-center text-[13px] text-white/45">
                暂无资产
              </div>
            </div>
          </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 ShortcutPanel({ onClose }: { onClose: () => void }) {
  const groups = [
    ["创作", [["成组", "G"], ["合并分镜组", "Option+G"], ["解组", "Shift+G"], ["连线", "L"], ["复制节点和连线", "D"], ["生成", "Enter"], ["新建节点", "Tab"], ["节点复制", "Option+拖动节点"]]],
    ["缩放", [["放大", ""], ["缩小", ""], ["适应画布", "0"]]],
    ["移动画布", [["键盘", "Space"], ["触控板", ""], ["鼠标", ""], ["整理画布", "Option+Shift+F"]]],
    ["其他", [["撤销", "Z"], ["重做", "Shift+Z"], ["删除", ""]]],
  ] 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({
  onAdd,
  onClose,
  workflows = [],
}: {
  onAdd: (workflow: WorkflowPreset, index: number) => void;
  onClose: () => void;
  workflows?: WorkflowPreset[];
}) {
  const serverWorkflowTemplates = useMemo<ToolboxTemplatePreset[]>(
    () =>
      workflows.slice(0, 6).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 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"
              type="button"
            >
              我的工具箱
            </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>
          <button
            className="cursor-pointer rounded-md border-none bg-transparent px-2 py-1 text-sm font-medium text-white/55 transition-colors hover:text-white/80"
            type="button"
          >
            周星驰经典名场面
          </button>
        </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">
        <div className="grid grid-cols-3 gap-x-3 gap-y-3">
          {allTemplates.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({
  node,
  referenceCount = 0,
  onAddReference,
  onChangeProperty,
  onClose,
  onGenerate,
}: {
  node: CloneNode;
  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 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.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>
        )}
        <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}
          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) {
    return (
      <div>
        <div className="mb-2 text-[13px] text-white/72">{label}</div>
        <button
          className="h-10 w-full rounded-[8px] border border-white/10 bg-black/18 px-3 text-left text-[13px] text-white/46 hover:border-white/20 hover:text-white"
          onClick={() => toast.info(`${label}选择器待接入。`)}
          type="button"
        >
          选择{label}
        </button>
      </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 AssetLibraryPanel({
  onSelectAsset,
}: {
  onSelectAsset?: (asset: CanvasLibraryAsset) => void;
}) {
  const assets: CanvasLibraryAsset[] = [
    { label: "角色图", mediaType: "image", type: "图片", url: CHARACTER_IMAGE_URL },
    { label: "角色三视图", mediaType: "image", type: "图片", url: CHARACTER_THREE_VIEW_URL },
    { label: "首帧", mediaType: "image", type: "图片", url: FIRST_FRAME_IMAGE_URL },
    { label: "音频参考图", mediaType: "image", type: "图片", url: AUDIO_REFERENCE_IMAGE_URL },
    { label: "示例音频", mediaType: "audio", type: "音频", url: AUDIO_SOURCE_URL },
    { label: "视频参考", mediaType: "video", type: "视频", url: SCRIPT_VIDEO_REFERENCE_URL },
  ];
  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        {["项目素材", "图片", "视频", "音频", "风格", "标记"].map((item, index) => (
          <button
            className={cn(
              "h-8 rounded-[8px] border border-white/8 px-3 text-[12px] text-white/56 hover:bg-white/8 hover:text-white",
              index === 0 && "bg-white text-black hover:bg-white hover:text-black"
            )}
            key={item}
            type="button"
          >
            {item}
          </button>
        ))}
      </div>
      <button
        className="flex h-20 w-full items-center justify-center rounded-[8px] border border-dashed border-white/16 bg-white/5 text-[13px] text-white/54 hover:bg-white/8 hover:text-white"
        onClick={() => toast.info("素材上传接口待接入。")}
        type="button"
      >
        <Plus className="mr-2 h-4 w-4" />
        上传或拖入素材
      </button>
      <div className="grid grid-cols-2 gap-3">
        {assets.map((asset) => (
          <button
            className="overflow-hidden rounded-[8px] border border-white/8 bg-white/5 text-left hover:border-white/20 hover:bg-white/8"
            key={asset.label}
            onClick={() => (onSelectAsset ? onSelectAsset(asset) : toast.info(`${asset.label}选择接口待接入。`))}
            type="button"
          >
            <div className="h-28 bg-cover bg-center" style={{ backgroundImage: `url(${asset.mediaType === "audio" ? AUDIO_REFERENCE_IMAGE_URL : asset.url})` }} />
            <div className="flex items-center justify-between px-3 py-2">
              <span className="text-[13px] text-white/82">{asset.label}</span>
              <span className="rounded-[6px] bg-white/8 px-2 py-0.5 text-[11px] text-white/42">{asset.type}</span>
            </div>
          </button>
        ))}
      </div>
    </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} 是 {siteName} 提供给 agent 使用的入口，可在 openclaw 中调用，完成专业视频创作。</p>
              <p>
                · 安装使用请戳
                <button
                  className="ml-1 text-[#2f8bff] underline-offset-2 hover:underline"
                  onClick={() =>
                    toast.info("安装包位于 integrations/openclaw，可通过 STDIO MCP 接入。")
                  }
                  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 }: { onClose: () => void }) {
  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-[404px] top-[66px] z-[75] w-[360px] overflow-hidden rounded-[16px] border border-white/10 bg-[#202020]/98 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-[16px]">
        <div className="flex items-center justify-between border-white/8 border-b px-4 py-3">
          <div className="flex items-center gap-2">
            <span className="relative flex h-8 w-8 items-center justify-center rounded-[8px] bg-white/8">
              <span className="absolute right-1 top-1 h-[5px] w-[5px] rounded-full bg-[#f53f3f]" />
              <Bell className="h-4 w-4 text-white/76" />
            </span>
            <div>
              <div className="text-[14px] font-semibold">通知</div>
              <div className="text-[11px] text-white/40">生成任务与系统消息</div>
            </div>
          </div>
          <button className="rounded-[8px] p-1.5 text-white/48 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
            <X className="h-4 w-4" />
          </button>
        </div>
        <div className="p-3">
          <div className="mb-3 flex gap-2">
            {["全部", "生成任务", "系统通知", "会员活动"].map((item, index) => (
              <button
                className={cn(
                  "h-7 rounded-[8px] px-3 text-[12px] transition-colors",
                  index === 0 ? "bg-white text-black" : "bg-white/6 text-white/56 hover:bg-white/10 hover:text-white"
                )}
                key={item}
                type="button"
              >
                {item}
              </button>
            ))}
          </div>
          {[
            ["生成任务", "任务状态、进度轮询和失败原因接口待接入。"],
            ["系统通知", "审核、账户和平台消息接口待接入。"],
            ["积分提醒", "积分套餐与模型资源入口待接入。"],
          ].map(([title, description]) => (
            <button
              className="mb-2 w-full rounded-[10px] border border-white/8 bg-white/5 p-3 text-left hover:bg-white/8"
              key={title}
              onClick={() => toast.info(`${title}接口待接入。`)}
              type="button"
            >
              <span className="block text-[13px] font-semibold text-white/82">{title}</span>
              <span className="mt-1 block text-[12px] leading-5 text-white/42">{description}</span>
            </button>
          ))}
        </div>
      </div>
    </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="个人中心" onClick={() => toast.info("个人中心入口待接入。")} />
            <AccountMenuButton icon={<Plus className="h-[18px] w-[18px]" />} label="创建团队" onClick={() => toast.info("创建团队接口待接入。")} />
            <AccountMenuButton icon={<FileText className="h-[18px] w-[18px]" />} label="订阅与开发票" onClick={() => toast.info("订阅与开发票入口待接入。")} />
            <AccountMenuButton icon={<Settings2 className="h-[18px] w-[18px]" />} label="账号设置" onClick={() => toast.info("账号设置入口待接入。")} />
            <AccountMenuButton icon={<LogoutGlyph />} label="退出登录" onClick={() => toast.info("退出登录接口待接入。")} />
          </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
      )}
      onClick={() => toast.info(`${label}接口待接入。`)}
      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,
}: {
  icon: React.ReactNode;
  label: string;
  onClick: () => void;
}) {
  return (
    <button
      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={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}
          onClick={() => toast.info(`${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]"
              onClick={() => toast.info("发布接口待接入。")}
              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"
                onClick={() => toast.info("服务协议入口待接入。")}
                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"
      onClick={() => toast.info(`${label}接口待接入。`)}
      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>
  );
}