"use client";

import {
  Bell,
  Check,
  ChevronDown,
  Clock3,
  Copy,
  Download,
  FileText,
  GitBranch,
  Headphones,
  HelpCircle,
  Image as ImageIcon,
  Layers,
  Loader2,
  Music2,
  Plus,
  Play,
  RotateCcw,
  Scissors,
  Settings2,
  Sparkles,
  Trash2,
  Upload,
  UserRound,
  Video,
  Wand2,
  X,
  type LucideIcon,
} from "lucide-react";
import { useRouter } from "next/navigation";
import {
  type ChangeEvent as ReactChangeEvent,
  type DragEvent as ReactDragEvent,
  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 {
  getVideoCanvasFunctionBillingCopy,
  type VideoCanvasFunctionConfig,
  type VideoCanvasFunctionDefinition,
  defaultVideoCanvasFunctionConfig,
  normalizeVideoCanvasFunctionConfig,
} from "@/lib/video-canvas/config";
import type { VideoGenerationMode, VideoRatio, VideoResolution } from "@/types/ai";

type ActivePanel =
  | "add"
  | "workflow"
  | "assets"
  | "history"
  | "help"
  | "support"
  | "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"
  | "ratio"
  | "resolution"
  | "duration"
  | "camera"
  | "panorama"
  | "translate"
  | "settings"
  | "count"
  | "reference"
  | "slash"
  | null;
type MemberStoreTab = "vip" | "history" | "credits";
type VideoToolbarMode = "clip" | "analysis" | null;

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 WorkflowPreset = {
  id?: string | number;
  uuid?: string;
  name?: string;
  title?: string;
  description?: string;
  cover?: string;
};

type CloneNodeKind = "input" | "model" | "text" | "audio" | "workflow" | "preview" | "save" | "media" | "script";

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 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 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 = {
  camera: string;
  count: string;
  model: string;
  panorama: string;
  ratio: string;
  resolution: string;
};

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

type VideoTargetComposerSubmitPayload = {
  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" | "audio" | "script";
type CanvasCreateKind = AddModuleKind;
type TargetModuleActionLabel =
  | "自己编写内容"
  | "文生视频"
  | "图片反推提示词"
  | "文字生音乐"
  | "图生图"
  | "图片高清"
  | "音频生视频"
  | "首尾帧生成视频"
  | "首帧生成视频"
  | "剧本生成分镜脚本"
  | "视频参考生成分镜脚本"
  | "角色生成分镜脚本";

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

type ComposerSubmitPayload = {
  prompt: string;
  references: string[];
  settings: ComposerSettings;
  slashScene: string | null;
};

type LiblibVideoCanvasReplicaProps = {
  canvasId: string;
  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;
  sceneDescription: string;
  backgroundMusic: string;
  voiceAndSfx: string;
  imagePrompt: string;
  motionPrompt: string;
  keyframeUrl: string;
};

type VideoAnalysisResponsePayload = {
  analysisRows?: Array<{
    backgroundMusic?: string;
    imagePrompt?: string;
    keyframeUrl?: string;
    motionPrompt?: string;
    sceneDescription?: string;
    voiceAndSfx?: string;
  }>;
  framePreviews?: string[];
  highlights?: string[];
  raw?: string;
  recommendedNextSteps?: string[];
  shotIdeas?: Array<{ title: string; description: string }>;
  summary?: string;
};

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

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: "audio", label: "音频", description: "音效、配音、音乐", icon: Music2 },
  { kind: "script", label: "脚本", description: "创意脚本、生成故事板", icon: Layers, badge: "Beta" },
];

const CONNECTION_ADD_MODULES: Array<{
  icon: LucideIcon;
  kind: Exclude<AddModuleKind, "audio">;
  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 },
  script: { x: 556, y: 253 },
  text: { x: -742, y: -257 },
  video: { x: -574, y: 253 },
  "video-clip": { x: 80, 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 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: "history", label: "历史", icon: Clock3 },
  { id: "help", label: "帮助", icon: HelpCircle },
  { id: "support", label: "客服", icon: Headphones },
];

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 OFFICIAL_NODE_GAP = 100;
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_ZOOM_DOCK_SCALE = 0.65;
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_COLORS = [
  "#ff3b30",
  "#1677ff",
  "#00c853",
  "#ff9500",
  "#af52de",
  "#00bcd4",
  "#ff2d55",
  "#8d6e63",
];
const VIDEO_CLIP_FRAME_COUNT = 9;
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";
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岁），面色苍白，伏案加班。手机提示音不断。她抬头，视线模糊，黑屏。

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

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

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

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 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";
  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 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: `脚本 ${index}`,
      subtitle: "脚本生成",
      inputType: "text",
      x,
      y,
      width: 438,
      height: 470,
      accent: "#f0d06b",
      draftValues: {
        action: "SCRIPT_GENERATE",
        generatorType: "DEFAULT",
        nodeType: "script",
        rows: [],
        scriptRole: "generator",
        viewMode: "table",
      },
    };
  }

  if (kind === "video-clip") {
    return {
      id: makeId("video-clip"),
      kind: "model",
      title: `视频合成 ${index}`,
      subtitle: "视频合成",
      inputType: "video",
      x,
      y,
      width: 436,
      height: 470,
      accent: "#ffb8c8",
      draftValues: {
        action: "VIDEO_CLIP_RESOURCE",
        nodeType: "video-clip",
        params: {},
        url: [],
      },
    };
  }

  const meta: Record<Exclude<AddModuleKind, "script" | "video-clip">, {
    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 isWideModule = item.nodeType === "image" || item.nodeType === "video";
  return {
    id: makeId(kind),
    kind: item.kind,
    title: item.title,
    subtitle: item.subtitle,
    inputType: item.nodeType,
    x,
    y,
    width: isWideModule ? 773 : 436,
    height: 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 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 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 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 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 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)
    : [];
  if (modelRows.length > 0) {
    return modelRows.slice(0, 8).map((row, index) => ({
      id: `${node.id}-analysis-${index}`,
      sceneDescription: String(row.sceneDescription || `镜头 ${index + 1}`).trim(),
      backgroundMusic: String(row.backgroundMusic || "无").trim(),
      voiceAndSfx: String(row.voiceAndSfx || "无").trim(),
      imagePrompt: String(row.imagePrompt || row.sceneDescription || `${node.title} 关键帧`).trim(),
      motionPrompt: String(row.motionPrompt || "保持镜头运动自然、连贯。").trim(),
      keyframeUrl:
        String(row.keyframeUrl || "").trim() ||
        framePreviews[index % Math.max(framePreviews.length, 1)] ||
        previewUrl,
    }));
  }
  const highlights = responseData?.highlights || [];
  const shotIdeas = responseData?.shotIdeas?.slice(0, 3) || [];
  const summary = responseData?.summary?.trim() || "";
  const fallbackPrompt = summary || responseData?.raw?.trim() || `${node.title} 的连续镜头推演`;
  const rows =
    shotIdeas.length > 0
      ? shotIdeas.map((idea, index) => ({
          id: `${node.id}-analysis-${index}`,
          sceneDescription: idea.title || `镜头 ${index + 1}`,
          backgroundMusic: highlights[index] || highlights[0] || "氛围音乐待接入",
          voiceAndSfx: highlights[index + 1] || "无",
          imagePrompt: idea.description || fallbackPrompt,
          motionPrompt:
            responseData?.recommendedNextSteps?.[index] ||
            "保持镜头运动自然平稳，围绕主体动作推进。",
          keyframeUrl: framePreviews[index % Math.max(framePreviews.length, 1)] || previewUrl,
        }))
      : [
          {
            id: `${node.id}-analysis-0`,
            sceneDescription: `${node.title} 开场镜头`,
            backgroundMusic: highlights[0] || "轻氛围背景音乐",
            voiceAndSfx: highlights[1] || "无",
            imagePrompt: fallbackPrompt,
            motionPrompt: "中景起势，镜头跟随主体动作缓慢推进。",
            keyframeUrl: framePreviews[0] || previewUrl,
          },
          {
            id: `${node.id}-analysis-1`,
            sceneDescription: `${node.title} 情绪推进`,
            backgroundMusic: highlights[2] || highlights[0] || "音乐情绪逐渐抬升",
            voiceAndSfx: highlights[3] || "环境声增强",
            imagePrompt: fallbackPrompt,
            motionPrompt: "切换近景，强调表情和动作细节。",
            keyframeUrl: framePreviews[1] || framePreviews[0] || previewUrl,
          },
        ];

  return rows;
}

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 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 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"
  ) {
    return ratio;
  }
  return "16:9";
}

function normalizeVideoResolutionValue(value: unknown): VideoResolution {
  const normalized = String(value || "")
    .trim()
    .toLowerCase()
    .replace(/\s+/g, "");
  if (normalized === "480p") return "480p";
  if (normalized === "1080p" || normalized === "1k") 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 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 === "audio" ||
    nodeType === "script"
  ) {
    return nodeType;
  }
  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 === "audio" || nodeType === "script") {
    return nodeType;
  }
  if (nodeType === "video-clip" || nodeType === "video_clip" || nodeType === "videoGroup") return "video-clip";

  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 (/音频|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);
  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, isLoading = false }: LiblibVideoCanvasReplicaProps) {
  const router = useRouter();
  const canvasRef = useRef<HTMLDivElement | null>(null);
  const dragRef = useRef<DragState | null>(null);
  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 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 [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 [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 [angleEditorNodeId, setAngleEditorNodeId] = useState<string | null>(null);
  const [inspectorNodeId, setInspectorNodeId] = useState<string | null>(null);
  const [dockOverviewOpen, setDockOverviewOpen] = useState(false);
  const [snapEnabled, setSnapEnabled] = useState(true);
  const [activeVideoToolbarMode, setActiveVideoToolbarMode] = useState<VideoToolbarMode>(null);
  const [videoClipRanges, setVideoClipRanges] = useState<Record<string, VideoClipRange>>({});
  const [videoAnalysisStates, setVideoAnalysisStates] = useState<Record<string, VideoAnalysisState>>({});

  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 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);
  }, [selectedVideoMediaNode?.id]);

  useEffect(() => {
    let active = true;

    async function loadProject() {
      setIsProjectLoading(true);
      const result = await canvasService.getProject(canvasId);
      if (!active) return;
      if (result.success && result.data) {
        const title = normalizeCanvasTitle(result.data.title);
        setProjectTitle(title);
        setDraftTitle(title);
        const restoredNodes = restoreNodes(result.data.canvasData);
        const restoredEdges = restoreEdges(result.data.canvasData);
        setNodes(restoredNodes);
        setEdges(restoredEdges);
      } else {
        setProjectTitle("未命名");
        setDraftTitle("未命名");
        await canvasService.saveCanvasState(
          canvasId,
          {
            nodes: [],
            edges: [],
            selectedNodeIds: [],
            viewport: DEFAULT_VIEWPORT,
            tool: "select",
          },
          "video"
        );
      }
      setIsProjectLoading(false);
    }

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

  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]);
    const last = nextNodes[nextNodes.length - 1];
    if (last) setSelectedNodeId(last.id);
  }, []);

  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 cancelGenerationNode = 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));
    toast.success("已取消生成");
  }, []);

  const addWorkflowPreset = useCallback(
    (workflow: WorkflowPreset, index = 0) => {
      const title = String(workflow.name || workflow.title || "工具箱预设");
      const baseX = 360 + index * 36;
      const baseY = 300 + index * 24;
      const reference = createMediaResourceNode({
        action: "IMAGE_RESOURCE",
        height: 280,
        mediaType: "image",
        mediaUrl: workflow.cover || CHARACTER_IMAGE_URL,
        title: "参考图",
        width: 420,
        x: baseX,
        y: baseY,
      });
      const result = createMediaResourceNode({
        action: "VIDEO_GENERATE",
        height: 315,
        mediaType: "video",
        mediaUrl: "",
        prompt: workflow.description || `${title} 预设工作流`,
        title,
        width: 560,
        x: baseX + 520,
        y: baseY - 18,
      });
      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,
          },
          sourceNodeId: reference.id,
          workflow,
        },
      };
      addNodes([reference, presetNode], [{ id: makeId("edge"), source: reference.id, target: presetNode.id }]);
      setActivePanel(null);
      setConnectionMenu(null);
      toast.success(`已添加「${title}」工具箱工作流`);
    },
    [addNodes]
  );

  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 offset = TARGET_MODULE_CENTER_OFFSETS[kind];
      const sameKindCount = nodes.filter((node) => getTargetModuleKind(node) === kind).length;
      const center = point || {
        x: viewportCenter.x + offset.x + sameKindCount * 28,
        y: viewportCenter.y + offset.y + sameKindCount * 28,
      };
      const created = createTargetModuleNode(kind, 0, 0, nodes.length + 1);
      const node = {
        ...created,
        x: Math.round(center.x - created.width / 2),
        y: Math.round(center.y - created.height / 2),
      };
      addNodes([node], []);
      setActivePanel(null);
      setCanvasCommand(null);
      setConnectionMenu(null);
      toast.success(`已添加 ${node.title}`);
    },
    [addNodes, nodes.length, 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 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);
      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);
    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();
    setSelectedNodeId(node.id);
    setCanvasCommand(null);
    setNodeContextMenu(null);
    setInspectorNodeId(null);
    setConnectionMenu(null);
    setActivePanel(null);
    setConnectionMenu({
      nodeId: node.id,
      screenX: event.clientX,
      screenY: event.clientY,
      side,
    });
  }, []);

  const addConnectedModule = useCallback(
    (kind: Exclude<AddModuleKind, "audio">) => {
      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 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 "自己编写内容": {
          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 "音频生视频": {
          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 !== "自己编写内容") 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 < 180; 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 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: response.data.prompt,
        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: response.data.prompt,
            regions: validRegions,
            sourceNodeId: anchor.id,
            sourceHeight: response.data.sourceHeight,
            sourceUrl,
            sourceWidth: response.data.sourceWidth,
            taskId: response.data.taskId,
          },
          pendingLabel: "局部编辑中",
          prompt: response.data.prompt,
          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 || "生成角色三视图",
              );
      let generatedUrl = "";

      if (videoCanvasFunctionConfig.enabled && definition?.enabled) {
        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,
        });
        generatedUrl = response.success ? getFirstGeneratedImageUrl(response) : "";
        if (!generatedUrl && !response.success) {
          toast.error(response.error || `${definition.label}生成失败，已保留生成节点`);
        }
      }

      const generatedNode = generatedUrl
        ? createMediaResourceNode({
            action: "IMAGE_RESOURCE",
            height: resultHeight,
            mediaType: "image",
            mediaUrl: generatedUrl,
            prompt: finalPrompt,
            title: resultTitle,
            width: resultWidth,
            x: rightX,
            y: Math.round(anchor.y + anchor.height / 2 - resultHeight / 2),
          })
        : null;
      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 = generatedNode || placeholderNode;
      const resultNode: CloneNode = {
        ...created,
        title: resultTitle,
        y:
          generatedNode?.y ??
          (isWideGeneration
            ? placeholderNode.y
            : Math.round(anchor.y + anchor.height / 2 - created.height / 2)),
        draftValues: {
          ...(created.draftValues || {}),
          functionKey,
          generated: Boolean(generatedUrl) || created.draftValues?.generated,
          generationStatus: generatedUrl ? "complete" : created.draftValues?.generationStatus,
          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,
          },
          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(generatedUrl ? "已按当前提示词生成图片结果" : "已按当前提示词创建图片生成节点");
    },
    [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 imageUrls = Array.from(
        new Set(
          imageReferenceLists
            .flat()
            .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 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 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;
      }
      if (requestedMode === "reference-images" && referenceImages.length < 1) {
        toast.error("全能参考至少需要 1 张参考图片");
        return;
      }

      const rawPrompt = String(
        payload?.prompt ?? params.prompt ?? node.draftValues?.prompt ?? "",
      ).trim();
      const finalPrompt = composeFunctionPrompt(definition, rawPrompt || node.title);
      const previewUrl =
        referenceImages[0] ||
        getNodeReferenceMediaUrl(incomingNodes.find((item) => item.inputType === "image")) ||
        getNodeReferenceMediaUrl(node) ||
        "";
      const savedSettings: ComposerSettings & { duration: string } = {
        camera: requestedSettings?.camera || String(paramsSettings.camera || "摄像机"),
        count: requestedSettings?.count || String(paramsSettings.count || "1个"),
        model: normalizeModelRef(preferredModelOverride) || "auto",
        panorama: requestedSettings?.panorama || String(paramsSettings.panorama || "全能参考"),
        ratio,
        resolution: formatVideoResolutionLabel(resolution),
        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,
                    mode: requestedMode,
                    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,
                      mode: requestedMode,
                      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 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 downloadVideoNode = useCallback((node: CloneNode) => {
    const mediaUrl = getNodeMediaUrl(node);
    if (!mediaUrl) {
      toast.error("当前视频没有可下载地址");
      return;
    }
    const link = document.createElement("a");
    link.href = mediaUrl;
    link.download = `${node.title || "未命名视频"}.mp4`;
    link.rel = "noreferrer";
    document.body.appendChild(link);
    link.click();
    link.remove();
    toast.success("已开始下载当前视频");
  }, []);

  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" || videoAnalysisStates[nodeId]?.status === "ready") {
        return;
      }

      const definition = getConfiguredFunction(videoCanvasFunctionConfig, "video-analysis");
      const prompt = composeFunctionPrompt(
        definition,
        `请解析当前视频，输出结构化视频故事表。重点补充镜头描述、背景音乐、人声/音效、图像生成提示词、视频运动提示词与关键帧建议。视频标题：${node.title}`
      );

      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(" · ") ||
          "已整理出当前视频的镜头节奏与生成建议。";
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  draftValues: {
                    ...(item.draftValues || {}),
                    videoAnalysis: {
                      framePreviews: response.data?.framePreviews || [],
                      rows,
                      summary,
                    },
                  },
                }
              : item
          )
        );
        setVideoAnalysisStates((current) => ({
          ...current,
          [nodeId]: {
            rows,
            status: "ready",
            summary,
          },
        }));
      } catch (error) {
        const fallbackRows = buildVideoAnalysisRows(node);
        setNodes((current) =>
          current.map((item) =>
            item.id === nodeId
              ? {
                  ...item,
                  draftValues: {
                    ...(item.draftValues || {}),
                    videoAnalysis: {
                      rows: fallbackRows,
                      summary: "解析失败，先展示本地占位结构，方便继续编排。",
                    },
                  },
                }
              : item
          )
        );
        setVideoAnalysisStates((current) => ({
          ...current,
          [nodeId]: {
            error: error instanceof Error ? error.message : "视频解析失败",
            rows: fallbackRows,
            status: "error",
            summary: "解析失败，先展示本地占位结构，方便继续编排。",
          },
        }));
        toast.error(error instanceof Error ? error.message : "视频解析失败");
      }
    },
    [nodes, 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);

      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 response = await workflowAnalysisService.analyze({
            imageUrls,
            mode: "agent-plan",
            nodeTitle: node.title,
            prompt,
            preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, settings?.model),
            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,
                      prompt,
                      rows: 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 prompt = composeFunctionPrompt(definition, draftPrompt);
        const response = await videoGenerationService.generateVideo({
          images: imageUrls.slice(0, 4),
          preferredModelRef: getFunctionModel(videoCanvasFunctionConfig, definition, settings?.model),
          prompt,
          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",
                  subtitle: "生成结果",
                  draftValues: {
                    ...(item.draftValues || {}),
                    generated: true,
                    mediaType: "video",
                    mediaUrl: response.data?.url,
                    nodeType: "video",
                    prompt,
                    url: [response.data?.url],
                    videoMeta: response.data?.metadata || null,
                  },
                }
              : item
          )
        );
        toast.success(`${definition.label}已生成`);
      } catch (error) {
        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"),
      x: node.x + 32,
      y: node.y + 32,
    };
    setNodes((current) => [...current, duplicate]);
    setSelectedNodeId(duplicate.id);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    toast.success("已复制节点");
  }, [nodes]);

  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: "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?.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) => {
    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));
    setInspectorNodeId((current) => (current === nodeId ? null : current));
    setNodeContextMenu(null);
    setConnectionMenu(null);
    toast.success("节点已删除");
  }, []);

  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 startNodeDrag = useCallback((event: ReactPointerEvent, node: CloneNode) => {
    event.stopPropagation();
    event.currentTarget.setPointerCapture(event.pointerId);
    setSelectedNodeId(node.id);
    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,
    };
  }, []);

  const startCanvasDrag = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
    if (event.button !== 0) return;
    if ((event.target as HTMLElement).closest("[data-canvas-overlay]")) return;
    setSelectedNodeId(null);
    setInspectorNodeId(null);
    setCanvasCommand(null);
    setNodeContextMenu(null);
    setConnectionMenu(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.key === "Delete" || event.key === "Backspace") && selectedNodeId) {
        event.preventDefault();
        deleteNode(selectedNodeId);
      }
      if (event.key === "Escape") {
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setSelectedNodeId(null);
        setActivePanel(null);
      }
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [deleteNode, selectedNodeId]);

  const onPointerMove = useCallback(
    (event: ReactPointerEvent<HTMLDivElement>) => {
      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),
      }));
    },
    [snapEnabled, viewport.zoom]
  );

  const onPointerUp = useCallback(() => {
    dragRef.current = null;
  }, []);

  const zoomBy = useCallback((delta: number) => {
    setViewport((current) => ({
      ...current,
      zoom: Math.min(2.4, Math.max(0.3, Number((current.zoom + delta).toFixed(2)))),
    }));
  }, []);

  const zoomAtPoint = useCallback((delta: number, clientX: number, clientY: number) => {
    setViewport((current) => {
      const nextZoom = Math.min(2.4, Math.max(0.3, Number((current.zoom + delta).toFixed(2))));
      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(0.3, 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 focusDockTarget = useCallback(() => {
    const target = selectedNode ? [selectedNode] : nodes;
    fitNodesToView(target);
    setDockOverviewOpen(false);
  }, [fitNodesToView, nodes, selectedNode]);

  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 toggleTopPanel = useCallback((panel: Exclude<ActivePanel, null>) => {
    setCanvasCommand(null);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    setInspectorNodeId(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 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]);

  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]" />

      <div
        className="absolute left-0 top-0 origin-top-left"
        style={{ height: CANVAS_EXTENT, transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`, width: CANVAS_EXTENT }}
      >
        <CloneEdges edges={edges} nodes={nodes} />
        {nodes.map((node) => (
          <CloneCanvasNode
            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)}
            onModuleAction={(actionLabel) => runTargetModuleAction(node.id, actionLabel)}
            onOpenConnectionMenu={(event, side) => openConnectionMenu(event, node, side)}
            onPointerDown={(event) => startNodeDrag(event, node)}
            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)}
          />
        ))}
      </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);
          }}
          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
            )
          }
          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">
          <VideoMediaToolbar
            activeMode={activeVideoToolbarMode}
            anchor={selectedVideoAnchor}
            onAnalyze={() => {
              const nextMode = activeVideoToolbarMode === "analysis" ? null : "analysis";
              setActiveVideoToolbarMode(nextMode);
              if (nextMode === "analysis") {
                void requestVideoAnalysis(selectedVideoMediaNode.id);
              }
            }}
            onDownload={() => downloadVideoNode(selectedVideoMediaNode)}
            onHd={() => toast.info("视频高清后端待接入，按钮先保留。")}
            onPreview={() => setPreviewNode(selectedVideoMediaNode)}
            onToggleClip={() => setActiveVideoToolbarMode((current) => current === "clip" ? null : "clip")}
          />
          {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}
          {activeVideoToolbarMode === "analysis" ? (
            <VideoAnalysisFloatingPanel
              anchor={selectedVideoAnchor}
              analysisState={
                videoAnalysisStates[selectedVideoMediaNode.id] ||
                getPersistedVideoAnalysisState(selectedVideoMediaNode) || {
                  rows: [],
                  status: "idle",
                  summary: "准备解析当前视频故事...",
                }
              }
              node={selectedVideoMediaNode}
              onClose={() => setActiveVideoToolbarMode(null)}
            />
          ) : 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}
          modelOptions={canvasModelOptions}
          node={selectedNode}
          sourceNodes={selectedTargetSourceNodes}
          onSubmit={(payload) => {
            void submitVideoTargetComposer(selectedNode.id, payload);
          }}
        />
      ) : 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
        compact={false}
        nodes={nodes}
        overviewOpen={dockOverviewOpen}
        selectedNodeId={selectedNodeId}
        snapEnabled={snapEnabled}
        zoom={viewport.zoom}
        onCenter={focusDockTarget}
        onToggleOverview={() => setDockOverviewOpen((value) => !value)}
        onToggleSnap={() => setSnapEnabled((value) => !value)}
        onZoomIn={() => zoomBy(0.1)}
        onZoomOut={() => zoomBy(-0.1)}
      />

      {activePanel === "add" ? (
        <AddModulePanel
          onAddModule={addTargetModule}
          onClose={() => setActivePanel(null)}
          onGallerySelect={() => setActivePanel("assets")}
          onUploadFiles={addUploadedFiles}
        />
      ) : null}

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

      {inspectorNode ? (
        <InspectorPanel
          node={inspectorNode}
          onChangeProperty={updateNodeDraft}
          onClose={() => setInspectorNodeId(null)}
        />
      ) : null}

      {activePanel === "assets" ? (
        <LibModal onClose={() => setActivePanel(null)} title="素材库">
          <AssetLibraryPanel />
        </LibModal>
      ) : null}

      {activePanel === "history" ? (
        <LibModal onClose={() => setActivePanel(null)} title="历史记录">
          <div className="space-y-2">
            {nodes.length === 0 ? (
              <EmptyState icon={Clock3} title="暂无历史" description="节点执行、草稿版本和回滚记录待接入。" />
            ) : (
              nodes.slice(-10).reverse().map((node) => (
                <button
                  className="flex w-full items-center justify-between rounded-[8px] border border-white/8 bg-white/5 px-3 py-2 text-left hover:bg-white/8"
                  key={node.id}
                  onClick={() => setSelectedNodeId(node.id)}
                  type="button"
                >
                  <span>
                    <span className="block text-[13px] text-white/86">{node.title}</span>
                    <span className="text-[11px] text-white/38">{node.subtitle || node.kind}</span>
                  </span>
                  <ChevronDown className="-rotate-90 h-4 w-4 text-white/38" />
                </button>
              ))
            )}
          </div>
        </LibModal>
      ) : 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}

      {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="absolute inset-0 z-[120] flex items-center justify-center bg-[#151515]">
          <div className="flex flex-col items-center gap-3 text-white/72">
            <Loader2 className="h-7 w-7 animate-spin" />
            <span className="text-sm">项目加载中...</span>
          </div>
        </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 LeftToolbar({
  activePanel,
  onOpen,
}: {
  activePanel: ActivePanel;
  onOpen: (panel: Exclude<ActivePanel, null>) => void;
}) {
  return (
    <aside
      className="-translate-y-1/2 absolute left-4 top-1/2 z-40 flex flex-col items-center gap-2 rounded-xl border border-white/9 bg-[#202020]/95 p-2 shadow-[0_22px_60px_rgba(0,0,0,0.45)] backdrop-blur-[8px]"
      data-canvas-overlay="true"
    >
      {TOOLBAR_ITEMS.map((item, index) => {
        const Icon = item.icon;
        const isActive = activePanel === item.id || (!activePanel && item.id === "add");
        return (
          <div className="contents" key={item.id}>
            <button
              className={cn(
                "group flex h-9 w-9 cursor-pointer items-center justify-center rounded-[12px] 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={item.label}
              type="button"
            >
              {item.id === "assets" ? (
                <AssetGlyph />
              ) : item.id === "workflow" ? (
                <WorkflowGlyph />
              ) : (
                <Icon className={cn("h-[18px] w-[18px]", item.id === "add" && "transition-transform duration-200 group-hover:rotate-45")} />
              )}
            </button>
            {index === 3 ? <div className="my-0 h-px w-5 shrink-0 bg-white/10" /> : null}
          </div>
        );
      })}
    </aside>
  );
}

function ZoomDock({
  compact = false,
  nodes = [],
  onCenter,
  onToggleOverview,
  onToggleSnap,
  overviewOpen = false,
  selectedNodeId,
  snapEnabled = true,
  onZoomIn,
  onZoomOut,
  zoom,
}: {
  compact?: boolean;
  nodes?: CloneNode[];
  onCenter: () => void;
  onToggleOverview?: () => void;
  onToggleSnap?: () => void;
  overviewOpen?: boolean;
  selectedNodeId?: string | null;
  snapEnabled?: boolean;
  onZoomIn: () => void;
  onZoomOut: () => void;
  zoom: number;
}) {
  if (compact) {
    return (
      <div
        className="absolute 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="absolute bottom-5 left-5 z-40" data-canvas-overlay="true">
      <div style={{ transform: `scale(${OFFICIAL_ZOOM_DOCK_SCALE})`, transformOrigin: "bottom left" }}>
        {overviewOpen ? (
          <CanvasOverviewPopover nodes={nodes} selectedNodeId={selectedNodeId || null} />
        ) : null}
        <div className="flex h-[54px] items-center gap-1 rounded-[14px] border border-white/9 bg-[#202020]/95 px-2 text-white/74 shadow-[0_18px_48px_rgba(0,0,0,0.42)] backdrop-blur-[10px]">
          <ZoomDockButton active={overviewOpen} label="画布总览" onClick={onToggleOverview}>
            <GridTilesGlyph />
          </ZoomDockButton>
          <ZoomDockButton active={Boolean(selectedNodeId)} label="定位选中" onClick={onCenter} selectedOutline>
            <MapPinGlyph />
          </ZoomDockButton>
          <ZoomDockButton active={snapEnabled} label={snapEnabled ? "吸附已开启" : "吸附已关闭"} onClick={onToggleSnap}>
            <MagnetGlyph />
          </ZoomDockButton>
          <div className="mx-1 h-7 w-px bg-white/10" />
          <button
            className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-[10px] text-[21px] leading-none text-white/72 transition-colors hover:bg-white/8 hover:text-white"
            onClick={onZoomOut}
            type="button"
          >
            -
          </button>
          <button
            className="h-10 min-w-[68px] cursor-pointer rounded-[10px] px-2 text-center text-[16px] font-medium tabular-nums leading-[40px] text-white/86 transition-colors hover:bg-white/8"
            onClick={onCenter}
            type="button"
          >
            {Math.round(zoom * 100)}%
          </button>
          <button
            className="flex h-10 w-10 cursor-pointer items-center justify-center rounded-[10px] text-[23px] leading-none text-white/82 transition-colors hover:bg-white/8 hover:text-white"
            onClick={onZoomIn}
            type="button"
          >
            +
          </button>
        </div>
      </div>
    </div>
  );
}

function ZoomDockButton({
  active,
  children,
  label,
  onClick,
  selectedOutline,
}: {
  active?: boolean;
  children: ReactNode;
  label: string;
  onClick?: () => void;
  selectedOutline?: boolean;
}) {
  return (
    <button
      className={cn(
        "flex h-10 w-10 cursor-pointer items-center justify-center rounded-[10px] text-white/74 transition-colors hover:bg-white/10 hover:text-white",
        active && "bg-white/10 text-white",
        active && selectedOutline && "bg-transparent shadow-[0_0_0_2px_#8dc5ff]"
      )}
      onClick={onClick}
      title={label}
      type="button"
    >
      {children}
    </button>
  );
}

function CanvasOverviewPopover({ nodes, selectedNodeId }: { nodes: CloneNode[]; selectedNodeId: string | null }) {
  const bounds = 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));
    return { minX, minY, maxX, maxY, width: Math.max(1, maxX - minX), height: Math.max(1, maxY - minY) };
  }, [nodes]);
  const scale = bounds ? Math.min(188 / bounds.width, 112 / bounds.height) : 1;

  return (
    <div className="mb-3 w-[232px] rounded-[16px] border border-white/10 bg-[#202020]/96 p-3 shadow-[0_20px_60px_rgba(0,0,0,0.42)] backdrop-blur-[12px]">
      <div className="mb-2 flex items-center justify-between text-[12px] text-white/52">
        <span>画布总览</span>
        <span>{nodes.length} 个节点</span>
      </div>
      <div className="relative h-[124px] overflow-hidden rounded-[10px] border border-white/8 bg-[#111]">
        <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.2)_1px,transparent_1px)] bg-[length:12px_12px] opacity-25" />
        {bounds ? (
          nodes.map((node) => (
            <span
              className={cn(
                "absolute rounded-[3px] border border-white/18 bg-white/18",
                node.id === selectedNodeId && "border-[#8dc5ff] bg-[#8dc5ff]/42"
              )}
              key={node.id}
              style={{
                height: Math.max(5, node.height * scale),
                left: 14 + (node.x - bounds.minX) * scale,
                top: 8 + (node.y - bounds.minY) * scale,
                width: Math.max(8, node.width * scale),
              }}
            />
          ))
        ) : (
          <div className="absolute inset-0 flex items-center justify-center text-[12px] text-white/34">暂无节点</div>
        )}
      </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() || "";
  const shouldInvertLogo = !siteLogoDark?.trim() && Boolean(siteLogo?.trim());

  return (
    <span className="flex min-w-0 items-center gap-2.5">
      {displayLogo ? (
        <img
          alt={resolvedSiteName}
          className={cn(
            "h-8 w-8 shrink-0 object-contain",
            shouldInvertLogo && "brightness-0 invert"
          )}
          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 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 MapPinGlyph() {
  return (
    <svg aria-hidden="true" className="h-[14px] w-[14px]" fill="none" viewBox="0 0 22 22">
      <path d="M10.9 1C7.59 1 4.9 3.67 4.9 6.96c0 4.35 5.15 8.65 5.37 8.83.36.3.89.3 1.25 0 .22-.18 5.37-4.48 5.37-8.83C16.9 3.67 14.21 1 10.9 1Z" stroke="currentColor" strokeWidth="1.8" />
      <path d="M10.9 9.25a2.2 2.2 0 1 0 0-4.4 2.2 2.2 0 0 0 0 4.4Z" stroke="currentColor" strokeWidth="1.8" />
      <path d="M6.9 13h-2.8a1.1 1.1 0 0 0-1.04.75L1.4 18.75A1.1 1.1 0 0 0 2.45 20.2h16.9a1.1 1.1 0 0 0 1.05-1.45l-1.66-5a1.1 1.1 0 0 0-1.04-.75h-2.8" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
    </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 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 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,
  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;
  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}
          items={[
            ["拆分场景", "按镜号拆分脚本接口待接入。"],
            ["生成分镜", "分镜生成接口待接入。"],
            ["表格视图", "脚本表格视图接口待接入。"],
            ["导出", "脚本导出接口待接入。"],
          ]}
        />
        <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={[
            ["高清", "首帧高清接口待接入。"],
            ["扩图", "首帧扩图接口待接入。"],
            ["替换背景", "背景替换接口待接入。"],
            ["下载", "图片下载接口待接入。"],
          ]}
        />
        <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 VideoTargetModuleComposer({
  anchor,
  functionConfig,
  membershipSummary,
  modelOptions = [],
  node,
  onSubmit,
  sourceNodes,
}: {
  anchor: PresetControlAnchor;
  functionConfig: VideoCanvasFunctionConfig;
  membershipSummary?: MembershipSummaryResponse;
  modelOptions?: CanvasModelOption[];
  node: CloneNode;
  onSubmit: (payload: VideoTargetComposerSubmitPayload) => void;
  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 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 } = {
    camera: String(paramsSettings.camera || "摄像机"),
    count: String(paramsSettings.count || "1个"),
    model:
      normalizeModelRef(String(params.model || paramsSettings.model || "")) ||
      getFunctionModelValue(
        functionConfig,
        getConfiguredFunction(functionConfig, getVideoFunctionKeyForMode(resolveVideoComposerMode(initialTab))),
      ),
    panorama: String(paramsSettings.panorama || "全能参考"),
    ratio: normalizeVideoRatioValue(params.ratio || paramsSettings.ratio),
    resolution: formatVideoResolutionLabel(params.resolution || paramsSettings.resolution),
    duration: formatVideoDurationLabel(params.duration || paramsSettings.duration),
  };
  const [activeTab, setActiveTab] = useState<VideoComposerTabKey>(initialTab);
  const [menu, setMenu] = useState<ComposerMenu>(null);
  const [prompt, setPrompt] = useState(initialPrompt);
  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 activeMenu =
    menu === "model" || menu === "ratio" || menu === "resolution" || menu === "duration" ? menu : null;
  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: true },
    { key: "reference-images", label: "全能参考", enabled: referenceCount >= 1 },
    { key: "first-frame", label: "图生视频", enabled: referenceCount >= 1 },
    { key: "first-last-frame", label: "首尾帧", enabled: referenceCount >= 2 },
    { 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, 4);

  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,
    ],
  );

  return (
    <div
      className="pointer-events-auto absolute z-30 overflow-visible"
      data-canvas-overlay="true"
      style={{
        height: 260,
        left: anchor.centerX,
        top: anchor.bottomY + 18,
        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)]">
        {activeMenu ? (
          <ComposerPopover
            customOptions={
              activeMenu === "resolution"
                ? [
                    { label: "480P", value: "480P" },
                    { label: "720P", value: "720P" },
                    { label: "1080P", value: "1080P" },
                  ]
                : activeMenu === "duration"
                  ? [
                      { label: "5s", value: "5s" },
                      { label: "10s", value: "10s" },
                    ]
                  : undefined
            }
            menu={activeMenu}
            modelKind={activeMenu === "model" ? "video" : "image"}
            modelOptions={modelOptions}
            onSelect={(option) => {
              if (activeMenu === "model") {
                setSettings((current) => ({ ...current, model: option }));
              } else if (activeMenu === "ratio") {
                setSettings((current) => ({ ...current, ratio: option }));
              } else if (activeMenu === "resolution") {
                setSettings((current) => ({ ...current, resolution: option }));
              } else if (activeMenu === "duration") {
                setSettings((current) => ({ ...current, duration: option }));
              }
              setMenu(null);
            }}
          />
        ) : 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">
          {tabItems.map((item) => (
            <button
              className={cn(
                "h-[38px] rounded-[8px] border border-white/10 px-4 text-[18px] transition",
                item.enabled
                  ? item.key === activeTab
                    ? "bg-white/10 text-white"
                    : "text-white/56 hover:bg-white/6 hover:text-white/86"
                  : "cursor-not-allowed text-white/22"
              )}
              key={item.key}
              onClick={() => {
                if (!item.enabled) {
                  toast.info(item.key === "first-last-frame" ? "首尾帧模式至少需要 2 张参考图片。" : "请先接入参考图片。");
                  return;
                }
                setActiveTab(item.key);
                setSettings((current) => ({
                  ...current,
                  panorama: item.label,
                }));
              }}
              type="button"
            >
              {item.label}
            </button>
          ))}
        </div>
        <div className="mt-4 flex items-center gap-3">
          {[
            ["标记", "◎"],
            ["运镜", "▣"],
            ["角色库", "♙"],
          ].map(([label, icon]) => (
            <button
              className="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"
              key={label}
              onClick={() => toast.info(`${label}参数后端待接入。`)}
              type="button"
            >
              <span className="text-[26px] leading-none">{icon}</span>
              <span>{label}</span>
            </button>
          ))}
          {referenceThumbnails.length > 0 ? (
            referenceThumbnails.map((thumbnail, index) => (
              <div className="relative h-[72px] w-[86px] overflow-hidden rounded-[9px]" key={thumbnail.id}>
                <img alt={thumbnail.title} className="h-full w-full object-cover" src={thumbnail.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]">
                  {index + 1}
                </span>
              </div>
            ))
          ) : (
            <div className="flex h-[72px] min-w-[180px] items-center justify-center rounded-[9px] border border-dashed border-white/10 px-4 text-[14px] text-white/34">
              接入图片参考后可直接图生视频
            </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)}
          onPointerDown={(event) => event.stopPropagation()}
          placeholder={activePromptPlaceholder}
          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"}
            dropdown
            icon="▥"
            label={getCanvasModelDisplayName(settings.model, modelOptions)}
            onClick={() => setMenu((current) => current === "model" ? null : "model")}
          />
          <ComposerControl
            active={menu === "ratio"}
            dropdown
            icon="▭"
            label={settings.ratio}
            onClick={() => setMenu((current) => current === "ratio" ? null : "ratio")}
          />
          <ComposerControl
            active={menu === "resolution"}
            dropdown
            label={settings.resolution}
            onClick={() => setMenu((current) => current === "resolution" ? null : "resolution")}
          />
          <ComposerControl
            active={menu === "duration"}
            dropdown
            label={settings.duration}
            onClick={() => setMenu((current) => current === "duration" ? null : "duration")}
          />
          <ComposerControl label="" icon="♬" muted onClick={() => toast.info("音频控制后端待接入。")} />
          <ComposerControl label="文" onClick={() => toast.info("翻译接口待接入。")} />
          <ComposerControl label="" icon="⌘" onClick={() => toast.info("高级视频参数后端待接入。")} />
          <ComposerControl label="1个" 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-14 w-14 items-center justify-center rounded-[14px] bg-white text-[28px] leading-none text-black hover:bg-white/90"
          onClick={() =>
            onSubmit({
              mode: activeMode,
              prompt,
              settings: {
                ...settings,
                camera: settings.camera,
                count: "1个",
                panorama: tabItems.find((item) => item.key === activeTab)?.label || settings.panorama,
              },
              tab: activeTab,
            })
          }
          type="button"
        >
          ⟳
        </button>
      </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 [settings, setSettings] = useState<ComposerSettings>({
    camera: "摄像机",
    count: "1个",
    model: normalizeModelRef(defaultModel) || "auto",
    panorama: "全景",
    ratio: "16:9",
    resolution: "720P",
  });

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

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

  return (
    <div
      className="pointer-events-auto absolute overflow-visible"
      style={
        anchor
          ? {
              height: 260,
              left: anchor.centerX,
              top: anchor.bottomY + 18,
              transform: "translateX(-50%)",
              width: 1216,
            }
          : {
              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)]">
        {menu === "model" ? (
          <ComposerPopover
            menu="model"
            modelKind="video"
            modelOptions={modelOptions}
            onSelect={(option) => {
              setSettings((current) => ({ ...current, model: option }));
              setMenu(null);
            }}
          />
        ) : 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">
          {[
            ["标记", "◎"],
            ["运镜", "▣"],
            ["角色库", "♙"],
          ].map(([label, icon]) => (
            <button
              className="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"
              key={label}
              onClick={() => toast.info(`${label}参数后端待接入。`)}
              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={getCanvasModelDisplayName(settings.model, 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 label="16:9" icon="▭" onClick={() => toast.info("比例选择后端待接入。")} />
          <ComposerControl label="720P" onClick={() => toast.info("清晰度选择后端待接入。")} />
          <ComposerControl label="5s" onClick={() => toast.info("时长选择后端待接入。")} />
          <ComposerControl label="" icon="♬" dropdown onClick={() => toast.info("音频参数后端待接入。")} />
          <ComposerControl label="文" onClick={() => toast.info("翻译接口待接入。")} />
          <ComposerControl label="" icon="⌘" onClick={() => toast.info("高级设置后端待接入。")} />
          <ComposerControl label="1个" dropdown 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={[
          ["节奏匹配", "音频节奏解析接口待接入。"],
          ["镜头语言", "镜头语言配置接口待接入。"],
          ["生成音效", "音效生成接口待接入。"],
          ["下载", "素材下载接口待接入。"],
        ]}
      />
      <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>
  );
}

function PresetFloatingToolbar({
  anchor,
  items,
}: {
  anchor?: PresetControlAnchor;
  items: Array<[string, string]>;
}) {
	return (
	  <div
	    className="pointer-events-auto absolute flex h-[58px] items-center gap-2 rounded-[16px] border border-white/8 bg-[#262626]/96 px-4 text-white/78 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: 94, transform: "translateX(-50%)" }
	    }
	  >
      {items.map(([label, message]) => (
        <button
          className="flex h-10 items-center gap-2 rounded-[10px] px-3 text-[15px] hover:bg-white/8 hover:text-white"
          key={label}
          onClick={() => toast.info(message)}
          type="button"
        >
          <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>
          {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: "1张",
    model: normalizeModelRef(defaultModel) || "auto",
    panorama: "全景",
    ratio: "16:9",
    resolution: "2K",
  });

  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" ? "720p" : null,
      }),
    [billingDefinition, membershipSummary, modelKind, modelOptions, settings.model],
  );

	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" }}
	    >
	      {menu === "model" ? (
	        <ComposerPopover
	          menu="model"
	          modelKind={modelKind}
	          modelOptions={modelOptions}
	          onSelect={(option) => {
	            setSettings((current) => ({ ...current, model: 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 label="16:9" icon="▭" dropdown onClick={() => toast.info("比例选择接口待接入。")} />
	        <ComposerControl label="2K" dropdown onClick={() => toast.info("清晰度选择接口待接入。")} />
	        <ComposerControl label="摄像机" icon="▣" onClick={() => toast.info("镜头配置接口待接入。")} />
	        <ComposerControl label="1张" dropdown 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] 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 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 })),
    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 CanvasCommandPalette({
  onClose,
  onCreate,
  onGallerySelect,
  onUploadFiles,
  state,
}: {
  onClose: () => void;
  onCreate: (kind: CanvasCreateKind) => void;
  onGallerySelect: () => void;
  onUploadFiles: (files: File[]) => void;
  state: NonNullable<CanvasCommandState>;
}) {
  const uploadInputRef = useRef<HTMLInputElement | null>(null);

  return (
    <div
      className="fixed z-[90] 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: `min(${state.screenX}px, calc(100vw - 256px))`,
        top: `min(${state.screenY}px, calc(100vh - 540px))`,
      }}
    >
      <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="mb-2 flex items-center justify-between px-2 py-1">
        <h4 className="text-[14px] font-medium leading-5 text-white/60">添加节点</h4>
        <button className="flex h-7 w-7 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>

      {ADD_NODE_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="h-full min-w-0 flex-1 overflow-hidden">
              <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
                <span className="flex items-center gap-1.5 text-[14px] font-medium leading-5">
                  {item.label}
                  {item.badge ? <span className="rounded-[4px] bg-white/10 px-1.5 py-0.5 text-[10px] leading-3 text-white/50">{item.badge}</span> : null}
                </span>
                <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
                  {item.description}
                </span>
              </span>
            </span>
          </button>
        );
      })}
      <h4 className="px-2 py-1 text-[14px] font-medium leading-5 text-white/60">添加资源</h4>
      <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"
        onClick={() => uploadInputRef.current?.click()}
        type="button"
      >
        <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
          <Upload className="h-5 w-5" />
        </span>
        <span className="h-full min-w-0 flex-1 overflow-hidden">
          <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
            <span className="text-[14px] font-medium leading-5">上传</span>
            <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
              可上传图片、视频、音频文件
            </span>
          </span>
        </span>
      </button>
      <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"
        onClick={onGallerySelect}
        type="button"
      >
        <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
          <Layers className="h-5 w-5" />
        </span>
        <span className="h-full min-w-0 flex-1 overflow-hidden">
          <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
            <span className="text-[14px] font-medium leading-5">从图库选择</span>
            <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
              从历史生成中选择素材
            </span>
          </span>
        </span>
      </button>
    </div>
  );
}

function ConnectionAddMenu({
  node,
  onClose,
  onCreate,
  state,
}: {
  node: CloneNode;
  onClose: () => void;
  onCreate: (kind: Exclude<AddModuleKind, "audio">) => 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 CloneEdges({ edges, nodes }: { edges: CloneEdge[]; nodes: CloneNode[] }) {
  const nodeMap = new Map(nodes.map((node) => [node.id, node]));
  return (
    <svg className="pointer-events-none absolute left-0 top-0 overflow-visible" style={{ height: CANVAS_EXTENT, width: CANVAS_EXTENT }}>
      {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 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 path = `M ${startX} ${startY} C ${startX + curve} ${startY}, ${endX - curve} ${endY}, ${endX} ${endY}`;
        return (
          <g key={edge.id}>
            <path
              d={path}
              fill="none"
              stroke="#86909c"
              strokeLinecap="round"
              strokeOpacity="0.98"
              strokeWidth="2"
            />
            <EdgeFlowSegments pathD={path} uniqueId={edge.id} visible />
          </g>
        );
      })}
    </svg>
  );
}

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({
  onClearGridSplit,
  onClearGridSplitSelection,
  onClearLocalEditRegions,
  node,
  onCancelGeneration,
  onContextMenu,
  onModuleAction,
  onOpenConnectionMenu,
  onPointerDown,
  onSetLocalEditMode,
  onSubmitLocalEdit,
  onToggleGridSplitSelection,
  onUpdateLocalEditRegions,
  onTextResourceChange,
  selected,
}: {
  onClearGridSplit: () => void;
  onClearGridSplitSelection: () => void;
  onClearLocalEditRegions: () => void;
  node: CloneNode;
  onCancelGeneration: () => void;
  onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
  onModuleAction: (actionLabel: TargetModuleActionLabel) => void;
  onOpenConnectionMenu: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => 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;
}) {
  const targetModuleKind = getTargetModuleKind(node);
  if (targetModuleKind) {
    return (
      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
        <TargetModuleCanvasNode kind={targetModuleKind} node={node} onAction={onModuleAction} selected={selected} />
      </CanvasNodeShell>
    );
  }

  if (getDraftString(node, "action") === "TEXT_RESOURCE") {
    return (
      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
        <PureTextResourceCanvasNode node={node} onTextResourceChange={onTextResourceChange} selected={selected} />
      </CanvasNodeShell>
    );
  }

  if (node.kind === "media") {
    return (
      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
        <PresetMediaCanvasNode
          node={node}
          onCancelGeneration={onCancelGeneration}
          onClearGridSplit={onClearGridSplit}
          onClearGridSplitSelection={onClearGridSplitSelection}
          onClearLocalEditRegions={onClearLocalEditRegions}
          onSetLocalEditMode={onSetLocalEditMode}
          onSubmitLocalEdit={onSubmitLocalEdit}
          onToggleGridSplitSelection={onToggleGridSplitSelection}
          onUpdateLocalEditRegions={onUpdateLocalEditRegions}
          selected={selected}
        />
      </CanvasNodeShell>
    );
  }

  if (node.kind === "script") {
    return (
      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
        <PresetScriptCanvasNode node={node} 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 node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
      {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 TargetModuleCanvasNode({
  kind,
  node,
  onAction,
  selected,
}: {
  kind: AddModuleKind;
  node: CloneNode;
  onAction: (actionLabel: TargetModuleActionLabel) => void;
  selected: boolean;
}) {
  const HeaderIcon = kind === "video-clip" ? Scissors : kind === "audio" ? Music2 : kind === "video" ? Video : kind === "image" ? ImageIcon : FileText;
  const actions: Record<AddModuleKind, Array<{ icon: LucideIcon | "hd"; label: TargetModuleActionLabel }>> = {
    audio: [{ icon: Play, label: "音频生视频" }],
    image: [
      { icon: Upload, label: "图生图" },
      { icon: "hd", label: "图片高清" },
    ],
    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 actionTop =
    kind === "text"
      ? "top-[166px]"
      : kind === "image" || kind === "video"
        ? "top-[220px]"
        : kind === "script"
          ? "top-[190px]"
          : "top-[190px]";

  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 h-[432px] 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={cn("absolute inset-x-0 flex justify-center text-white/18", kind === "text" || kind === "script" ? "top-[62px]" : "top-[116px]")}>
          <TargetModuleHeroGraphic kind={kind} />
        </div>
        {kind === "video-clip" ? (
          <div className="absolute inset-x-0 top-[254px] text-center text-[16px] text-white/34">
            空空如也，请连接多个视频节点后操作
          </div>
        ) : (
          <div className={cn("absolute left-8", actionTop)}>
            <div className="mb-5 text-[17px] text-white/42">尝试:</div>
            <div className="space-y-5">
              {actions[kind].map((action) => (
                <button
                  className="flex items-center gap-3 text-[18px] leading-none text-white/82 hover:text-white"
                  key={action.label}
                  onClick={() => onAction(action.label)}
                  onPointerDown={(event) => event.stopPropagation()}
                  type="button"
                >
                  <ModuleActionIcon icon={action.icon} />
                  <span>{action.label}</span>
                </button>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function TargetModuleHeroGraphic({ kind }: { kind: AddModuleKind }) {
  if (kind === "text" || kind === "script") {
    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>
    );
  }

  return <Scissors className="h-[92px] w-[92px]" strokeWidth={1.4} />;
}

function ModuleActionIcon({ icon }: { icon: LucideIcon | "hd" }) {
  if (icon === "hd") {
    return (
      <span className="flex h-[18px] min-w-[24px] items-center justify-center rounded-[3px] border border-white/72 px-1 text-[10px] font-bold leading-none text-white/86">
        HD
      </span>
    );
  }
  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 OfficialAudioCard({ mediaUrl, selected }: { mediaUrl: string; selected: boolean }) {
  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>00:00 / 00:03</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,
  node,
  onContextMenu,
  onOpenConnectionMenu,
  onPointerDown,
  selected,
}: {
  children: ReactNode;
  node: CloneNode;
  onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
  onOpenConnectionMenu: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => void;
  selected: boolean;
}) {
  const targetModuleKind = getTargetModuleKind(node);
  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-overlay="true"
      onContextMenu={onContextMenu}
      onPointerDown={onPointerDown}
      style={{ height: node.height, left: node.x, top: node.y, width: node.width }}
    >
      {targetModuleKind ? (
        <>
          <button
            className="absolute left-[-13px] top-1/2 z-10 mt-[14px] flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-white/18 bg-[#242424] text-[20px] leading-none text-white/50 hover:border-white/34 hover:text-white/82"
            onClick={(event) => onOpenConnectionMenu(event, "target")}
            onPointerDown={(event) => event.stopPropagation()}
            title="添加上下文"
            type="button"
          >
            +
          </button>
          <button
            className="absolute right-[-13px] top-1/2 z-10 mt-[14px] flex h-6 w-6 -translate-y-1/2 cursor-pointer items-center justify-center rounded-full border border-white/18 bg-[#242424] text-[20px] leading-none text-white/50 hover:border-white/34 hover:text-white/82"
            onClick={(event) => onOpenConnectionMenu(event, "source")}
            onPointerDown={(event) => event.stopPropagation()}
            title="引用该节点生成"
            type="button"
          >
            +
          </button>
        </>
      ) : (
        <>
          <button
            className="absolute left-[-10px] top-1/2 z-10 h-5 w-5 -translate-y-1/2 cursor-pointer rounded-full border border-white/30 bg-white text-[16px] leading-[16px] text-black/45 hover:text-black"
            onClick={(event) => onOpenConnectionMenu(event, "target")}
            onPointerDown={(event) => event.stopPropagation()}
            title="添加上下文"
            type="button"
          >
            +
          </button>
          <button
            className="absolute right-[-10px] top-1/2 z-10 h-5 w-5 -translate-y-1/2 cursor-pointer rounded-full border border-white/30 bg-white text-[16px] leading-[16px] text-black/45 hover:text-black"
            onClick={(event) => onOpenConnectionMenu(event, "source")}
            onPointerDown={(event) => event.stopPropagation()}
            title="引用该节点生成"
            type="button"
          >
            +
          </button>
        </>
      )}
      {children}
    </div>
  );
}

function PresetMediaCanvasNode({
  onClearGridSplit,
  onClearGridSplitSelection,
  onClearLocalEditRegions,
  node,
  onCancelGeneration,
  onSetLocalEditMode,
  onSubmitLocalEdit,
  onToggleGridSplitSelection,
  onUpdateLocalEditRegions,
  selected,
}: {
  onClearGridSplit: () => void;
  onClearGridSplitSelection: () => void;
  onClearLocalEditRegions: () => void;
  node: CloneNode;
  onCancelGeneration: () => 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 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 ? (
            <video className="relative h-full w-full object-cover" controls playsInline src={mediaUrl} />
          ) : (
            <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,
  onTextResourceChange,
  selected,
}: {
  node: CloneNode;
  onTextResourceChange: (content: string) => void;
  selected: boolean;
}) {
  const scriptRole = getDraftString(node, "scriptRole");
  const contentValues = node.draftValues?.content;
  const textContent =
    Array.isArray(contentValues) && typeof contentValues[0] === "string"
      ? contentValues[0]
      : node.draftValues?.manualEditing
        ? ""
        : STORY_SCRIPT_TEXT;
  const rows = [
    ["01", "现代办公室", "深夜加班，键盘声急促，人物体力透支", "环境键盘声"],
    ["02", "盛唐大殿", "女主惊醒跪于金銮殿，百官压迫", "鼓声与低频"],
    ["03", "长安街市", "诗声落下，盛唐山河展开", "史诗音乐起"],
  ];

  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="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
          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,
  onUploadFiles,
}: {
  onAddModule: (kind: AddModuleKind) => void;
  onClose: () => void;
  onGallerySelect: () => void;
  onUploadFiles: (files: File[]) => void;
}) {
  const uploadInputRef = useRef<HTMLInputElement | null>(null);

  const triggerUpload = () => {
    uploadInputRef.current?.click();
  };

  return (
    <section
      className="fixed left-[88px] top-[300px] z-50 flex w-[240px] flex-col gap-2 rounded-[16px] border border-white/10 bg-[#202020]/96 p-2 text-white shadow-[0_24px_80px_rgba(0,0,0,0.52)] backdrop-blur-[32px]"
      data-canvas-overlay="true"
    >
      <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 items-center justify-between px-2 py-1">
        <h4 className="text-[14px] font-medium leading-5 text-white/60">添加节点</h4>
        <button 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>
      {ADD_NODE_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={() => onAddModule(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="h-full min-w-0 flex-1 overflow-hidden">
              <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
                <span className="flex items-center gap-1.5 text-[14px] font-medium leading-5">
                  {item.label}
                  {item.badge ? (
                    <span className="rounded-[4px] bg-white/10 px-1.5 py-0.5 text-[10px] leading-3 text-white/50">
                      {item.badge}
                    </span>
                  ) : null}
                </span>
                <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
                  {item.description}
                </span>
              </span>
            </span>
          </button>
        );
      })}
      <h4 className="px-2 py-1 text-[14px] font-medium leading-5 text-white/60">添加资源</h4>
      <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"
        onClick={triggerUpload}
        type="button"
      >
        <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
          <Upload className="h-5 w-5" />
        </span>
        <span className="h-full min-w-0 flex-1 overflow-hidden">
          <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
            <span className="text-[14px] font-medium leading-5">上传</span>
            <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
              可上传图片、视频、音频文件
            </span>
          </span>
        </span>
      </button>
      <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"
        onClick={onGallerySelect}
        type="button"
      >
        <span className="flex h-[34px] w-[34px] shrink-0 items-center justify-center rounded-[8px] bg-white/8 text-white/82">
          <Layers className="h-5 w-5" />
        </span>
        <span className="h-full min-w-0 flex-1 overflow-hidden">
          <span className="flex h-full translate-y-2 flex-col justify-start transition-transform duration-200 group-hover:translate-y-0">
            <span className="text-[14px] font-medium leading-5">从图库选择</span>
            <span className="mt-0.5 truncate text-[12px] leading-4 opacity-0 transition-opacity duration-200 group-hover:opacity-60">
              从历史生成中选择素材
            </span>
          </span>
        </span>
      </button>
    </section>
  );
}

function WorkflowPanel({
  onAdd,
  onClose,
  workflows,
}: {
  onAdd: (workflow: WorkflowPreset, index: number) => void;
  onClose: () => void;
  workflows: WorkflowPreset[];
}) {
  const visibleWorkflows: WorkflowPreset[] = workflows.length > 0
    ? workflows.slice(0, 9)
    : STARTER_CARDS.map<WorkflowPreset>((card, index) => ({
        cover: card.coverUrl,
        description: card.subtitle,
        id: index,
        name: `【预设】${card.title}`,
      }));

  return (
    <section
      className="absolute left-[132px] top-[72px] z-50 flex h-[min(794px,calc(100vh-96px))] w-[960px] flex-col overflow-hidden rounded-[18px] border border-white/10 bg-[#202020] shadow-[0_28px_90px_rgba(0,0,0,0.48)]"
      data-canvas-overlay="true"
    >
      <div className="flex h-[96px] items-center justify-between border-white/8 border-b px-8">
        <div className="flex items-center gap-3">
          <div className="font-semibold text-[26px] text-white">我的工具箱</div>
          <button className="flex h-7 w-7 items-center justify-center rounded-full border border-white/22 text-[18px] text-white/52" onClick={() => toast.info("工具箱说明待接入。")} type="button">
            ?
          </button>
        </div>
        <button className="rounded-[8px] p-2 text-white/50 hover:bg-white/8 hover:text-white" onClick={onClose} type="button">
          <X className="h-9 w-9" strokeWidth={1.6} />
        </button>
      </div>
      <div className="min-h-0 flex-1 overflow-y-auto px-8 py-8">
        <div className="grid grid-cols-3 gap-x-6 gap-y-8">
          {visibleWorkflows.map((workflow, index) => (
            <button
              className="group text-left"
              key={`${workflow.id || ""}-${workflow.uuid || workflow.name}`}
              onClick={() => onAdd(workflow, index)}
              type="button"
            >
              <div className="relative h-[282px] overflow-hidden rounded-[8px] bg-[#2a2a2a]">
                {workflow.cover ? (
                  <img
                    alt=""
                    className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.025]"
                    src={workflow.cover}
                  />
                ) : (
                  <div className="flex h-full items-center justify-center bg-white/6 text-white/24">
                    <WorkflowGlyph />
                  </div>
                )}
                <span className="absolute inset-0 bg-black/0 transition group-hover:bg-black/8" />
              </div>
              <div className="mt-3 px-1">
                <div className="line-clamp-2 text-[22px] font-medium leading-7 text-white/76">{workflow.name || workflow.title || "未命名预设"}</div>
              </div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

function InspectorPanel({
  node,
  onChangeProperty,
  onClose,
}: {
  node: CloneNode;
  onChangeProperty: (key: string, value: unknown) => void;
  onClose: () => 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;
  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-[#5b5220] px-2 py-1 text-[12px] text-[#d7c66a]">后端待接入</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={() => toast.info("上传/素材选择接口待接入。")}
            type="button"
          >
            <Plus className="mr-2 h-4 w-4" />
            添加素材
          </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"
          onClick={() => toast.info("生成接口待接入。")}
          type="button"
        >
          生成
        </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() {
  const assets = [
    { label: "角色图", type: "图片", url: CHARACTER_IMAGE_URL },
    { label: "角色三视图", type: "图片", url: CHARACTER_THREE_VIEW_URL },
    { label: "首帧", type: "图片", url: FIRST_FRAME_IMAGE_URL },
    { label: "音频参考图", type: "图片", url: AUDIO_REFERENCE_IMAGE_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={() => toast.info(`${asset.label}选择接口待接入。`)}
            type="button"
          >
            <div className="h-28 bg-cover bg-center" style={{ backgroundImage: `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 SkillsAccessPanel() {
  return (
    <div className="space-y-4">
      <div className="rounded-[8px] border border-white/8 bg-white/5 p-4">
        <div className="flex items-center justify-between">
          <div>
            <div className="font-semibold text-[15px] text-white">OpenAPI Access Key</div>
            <div className="mt-1 text-[12px] text-white/42">用于接口调用、模型能力和自动化任务。</div>
          </div>
          <button
            className="h-9 rounded-[8px] bg-white px-3 text-[12px] font-semibold text-black hover:bg-white/90"
            onClick={() => toast.info("Access Key 创建接口待接入。")}
            type="button"
          >
            创建 Key
          </button>
        </div>
        <div className="mt-4 rounded-[8px] border border-white/8 bg-black/20 px-3 py-3 text-[13px] text-white/42">
          暂无 Access Key
        </div>
      </div>
      <div className="grid grid-cols-5 gap-2">
        {Object.entries(capturedCounts.byType || {}).map(([type, count]) => {
          const meta = TOOL_TYPE_META[type] || TOOL_TYPE_META.video;
          return (
            <div className="rounded-[8px] bg-white/6 p-3 text-center" key={type}>
              <div className="text-[18px] text-white">{String(count)}</div>
              <div className="mt-1 text-[11px] text-white/42">{meta.label}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function SkillsAccessModal({
  onClose,
  siteName,
}: {
  onClose: () => void;
  siteName: string;
}) {
  const skillsName = `${siteName} Skills`;

  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("接口文档入口待接入。")}
                  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"
            onClick={() => toast.info("Access key 创建接口待接入。")}
            type="button"
          >
            创建新Access key
          </button>
        </div>

        <div className="mt-4 overflow-hidden rounded-[8px] border border-white/8">
          <div className="grid h-11 grid-cols-[240px_1fr] bg-white/16 text-[13px] text-white/86">
            <div className="flex items-center px-4">创建日期</div>
            <div className="flex items-center px-4">Access key</div>
          </div>
          <div className="flex h-[66px] items-center px-4 text-[13px] text-white/45">暂无 Access key</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 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>
  );
}