"use client";

import {
  Bell,
  ChevronDown,
  Clock3,
  Copy,
  FileText,
  GitBranch,
  Headphones,
  HelpCircle,
  Image as ImageIcon,
  Layers,
  Loader2,
  Music2,
  Plus,
  Play,
  Save,
  Scissors,
  Settings2,
  Share2,
  Sparkles,
  Trash2,
  Upload,
  UserRound,
  Video,
  X,
  type LucideIcon,
} from "lucide-react";
import { useRouter } from "next/navigation";
import {
  type ChangeEvent as ReactChangeEvent,
  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 capturedCanvasModules from "@/artifacts/liblib-frontend-capture-ed9a2c12570a49b9a1186017b2c38b52/canvas-modules.json";
import { cn } from "@/lib/utils";
import { canvasService } from "@/services/canvas";

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 SceneToolbarMenu = "panorama" | "orbit" | "lighting" | "grid" | "hd" | "crop" | null;
type ComposerMenu =
  | "style"
  | "mark"
  | "focus"
  | "model"
  | "ratio"
  | "resolution"
  | "camera"
  | "panorama"
  | "translate"
  | "settings"
  | "count"
  | "reference"
  | "slash"
  | null;
type MemberStoreTab = "vip" | "model" | "credits";

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

type ComposerSettings = {
  camera: string;
  count: string;
  model: string;
  panorama: string;
  ratio: string;
  resolution: string;
};

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

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

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

type LiblibVideoCanvasReplicaProps = {
  canvasId: string;
  isLoading?: boolean;
};

const capturedTools = ((capturedCanvasModules as any).tools || []) as CapturedTool[];
const capturedCounts = (capturedCanvasModules as any).counts || {};
const capturedWorkflows = ((capturedCanvasModules as any).workflows || []) as 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://liblibai-online.liblib.cloud/web/ef0097ae9da74189a0f5d604e98c77cd/f9d23335-4ec2-412d-9954-91c58f4b5eb3.png",
    steps: ["故事脚本", "多模态文本模型Pro", "可灵 3.0", "预览"],
  },
  {
    title: "角色三视图",
    subtitle: "角色资产沉淀",
    coverUrl:
      "https://liblibai-online.liblib.cloud/web/ef0097ae9da74189a0f5d604e98c77cd/e3731aeb-a95b-46e9-99e7-3cd7f22a1e3f.png",
    steps: ["角色描述", "角色三视图", "全能图片模型V2", "保存"],
  },
  {
    title: "首帧图生视频",
    subtitle: "参考图到成片",
    coverUrl:
      "https://liblibai-online.liblib.cloud/web/ef0097ae9da74189a0f5d604e98c77cd/f407cb9c-8dd7-436b-8e80-88da1cebf25d.png",
    steps: ["上传图片", "首帧图", "可灵 3.0", "预览"],
  },
  {
    title: "音频生视频",
    subtitle: "音频驱动画面",
    coverUrl:
      "https://liblibai-online.liblib.cloud/web/ef0097ae9da74189a0f5d604e98c77cd/bd88df14-04bd-473d-9016-ec72a5273bfb.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 = 232;
const OFFICIAL_TEXT_RESOURCE_WIDTH = 350;

const TARGET_AVATAR =
  "https://liblibai-online.liblib.cloud/web/1656e2f1b3c74f1ba823b610f1b2cbdf/0c3eb5e2-1dc0-405c-a823-07b2570237f8.jpg?x-oss-process=image/resize,w_100,m_lfit/format,webp";
const CHARACTER_IMAGE_URL =
  "https://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/cca9e085-dccc-4f72-aef7-d68dc6688bcf.png";
const CHARACTER_THREE_VIEW_URL =
  "https://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/7a32ba0b-7b5b-46b1-a86c-e0904482adf7.png";
const FIRST_FRAME_IMAGE_URL =
  "https://liblibai-online.liblib.cloud/web/28aa80df5944499487381983a8f9bbdd/da241fab-3569-49aa-ae4e-c20de9f718e0.png";
const AUDIO_SOURCE_URL =
  "https://liblibai-online.liblib.cloud/web/28aa80df5944499487381983a8f9bbdd/3ca0886d-d35f-4048-95bf-cc655e9c57fd.mp3";
const AUDIO_REFERENCE_IMAGE_URL =
  "https://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/1342d344-2d95-41a1-a2aa-4d20869a318c.png";
const PUBLISH_MODAL_BG_URL =
  "https://libtv-res.liblib.art/upload-images/4e7115e6ee6947b78d73e0203a85fc56/771d92a21c6dce69a97513d21ee3253fe0eedec9.png";
const MEMBER_CARD_THEMES: Record<string, { bg: string; icon: string; tone: string }> = {
  "lib-nano": {
    bg: "https://liblibai-online.liblib.cloud/web/4e7115e6ee6947b78d73e0203a85fc56/3b7bcfd5-d1d3-4545-8089-53c04bad6ede.svg",
    icon: "https://liblibai-online.liblib.cloud/web/4e7115e6ee6947b78d73e0203a85fc56/8d5f4fb5-8132-4049-b902-7eca7db0de1d.svg",
    tone: "#2A2038",
  },
  "seedance-2": {
    bg: "https://liblibai-online.liblib.cloud/web/4e7115e6ee6947b78d73e0203a85fc56/a520a76c-8101-4be3-8c3b-30a37b2320d9.svg",
    icon: "https://liblibai-online.liblib.cloud/web/4e7115e6ee6947b78d73e0203a85fc56/9207509b-a5d5-47af-944b-1894b469735f.svg",
    tone: "#222A3E",
  },
  "seedance-2-1080p": {
    bg: "https://liblibai-online.liblib.cloud/web/4e7115e6ee6947b78d73e0203a85fc56/a32e399e-8353-4cdf-a44e-e7e08cca8c7f.svg",
    icon: "https://liblibai-online.liblib.cloud/web/4e7115e6ee6947b78d73e0203a85fc56/9207509b-a5d5-47af-944b-1894b469735f.svg",
    tone: "#222222",
  },
};
const MEMBER_MODEL_CARDS = [
  {
    title: "Seedance 2.0",
    label: "1080P 专享",
    power: "45,000",
    price: "2,999",
    corner: "首购加赠45000",
    desc: "大师版及以上会员可购买",
    group: "seedance-2-1080p",
  },
  {
    title: "Seedance 2.0",
    label: "1080P 专享",
    power: "60,000",
    price: "3,999",
    corner: "首购加赠60000",
    desc: "大师版及以上会员可购买",
    group: "seedance-2-1080p",
  },
  {
    title: "Lib Nano Pro",
    label: "模型积分卡",
    power: "20,000",
    price: "1,999",
    corner: "多生成571张图片",
    desc: "尊享版可购买",
    group: "lib-nano",
  },
  {
    title: "Lib Nano 2",
    label: "模型积分卡",
    power: "45,000",
    price: "2,999",
    corner: "多生成1500张图片",
    desc: "尊享版可购买",
    group: "lib-nano",
  },
  {
    title: "Seedance 2.0",
    label: "视频模型卡",
    power: "7,500",
    price: "599",
    corner: "多生成341秒视频",
    desc: "大师版及以上会员可购买",
    group: "seedance-2",
  },
  {
    title: "Seedance 2.0",
    label: "视频模型卡",
    power: "15,000",
    price: "999",
    corner: "多生成682秒视频",
    desc: "大师版及以上会员可购买",
    group: "seedance-2",
  },
];
const VIP_PLAN_CARDS = [
  { title: "基础版VIP", power: "每月 8,000 点积分", price: "39", benefits: ["登录每日赠送20积分", "云端存储空间20GB", "会员专属模型"] },
  { title: "大师版VIP", power: "每月 18,000 点积分", price: "89", benefits: ["无限并发任务", "会员专享无限次加速", "Seedance 2.0 活动权益"] },
  { title: "尊享版VIP", power: "每月 34,000 点积分", price: "169", benefits: ["云端存储空间500GB", "智能分镜（Kling3.0）", "去除品牌水印"] },
];
const CREDIT_PACKS = [
  { points: "1,000", price: "6", tag: "限时 6 折" },
  { points: "5,000", price: "30", tag: "首充推荐" },
  { points: "10,000", price: "60", tag: "最高赠送" },
  { points: "30,000", price: "180", tag: "创作囤货" },
];
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://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/5d40e509-6182-4d5d-b202-8e130b44a66c.png";
const VIDEO_FIRST_FRAME_SOURCE_URL =
  "https://liblibai-online.liblib.cloud/web/28aa80df5944499487381983a8f9bbdd/604bb8d4-e8d1-439d-80b4-9867a579d0e7.png";
const VIDEO_FIRST_FRAME_PROMPT = "以当前图为首帧生成视频。";
const VIDEO_FIRST_LAST_FIRST_URL =
  "https://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/3dbb2a8e-47a7-4480-9de0-293adea8fbb4.png";
const VIDEO_FIRST_LAST_LAST_URL =
  "https://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/cea9eb03-e93f-45ab-b1c3-42d749d95321.png";
const VIDEO_FIRST_LAST_PROMPT =
  "手从白帆布包中取出青柠气泡水罐的特写，过渡到短发女生在户外草地闭眼仰头喝同款气泡水的中景，日系清新治愈风格，明亮自然光，柔和暖调，胶片质感，动作流畅自然";
const SCRIPT_VIDEO_REFERENCE_URL =
  "https://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/7a21a9b9-503b-4168-b9c2-be0a3770f215.mp4";
const SCRIPT_CHARACTER_ONE_URL =
  "https://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/b6989b27-e725-4958-a062-e8dfb3312db3.png";
const SCRIPT_CHARACTER_TWO_URL =
  "https://liblibai-online.liblib.cloud/web/ea95cb51f3d94addbb92dc003cd33b49/fe840bb1-649e-4664-a23d-30f5ecf8e36c.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 || "LibTV workflow",
    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 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 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 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 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): CloneNode {
  const shouldUseOfficialSize =
    Boolean(node.draftValues?.manualEditing) || /^(文本|文本生成|文本节点)/.test(String(node.title || ""));
  return {
    ...node,
    kind: "script",
    title: node.title && !/文本生成|文本节点/.test(node.title) ? node.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");
  if (action === "TEXT_RESOURCE" && !getPresetMode(node)) {
    return normalizeTextResourceNode(node);
  }

  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";
    const distance = 100;
    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 right = createPresetMediaNode({
      action: "IMAGE_GENERATE",
      generated: true,
      height: 520,
      mediaType: "image",
      mediaUrl: CHARACTER_THREE_VIEW_URL,
      preset,
      title: "角色三视图",
      width: 660,
      x: Math.round(center.x + distance / 2),
      y: Math.round(center.y - 320),
    });
    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 - 510);
    const leftY = Math.round(center.y - 320);
    const audio = createPresetMediaNode({
      action: "AUDIO_RESOURCE",
      height: 158,
      mediaType: "audio",
      mediaUrl: AUDIO_SOURCE_URL,
      preset,
      title: "音频",
      width: 430,
      x: leftX,
      y: leftY,
    });
    const image = createPresetMediaNode({
      action: "IMAGE_RESOURCE",
      height: 252,
      mediaType: "image",
      mediaUrl: AUDIO_REFERENCE_IMAGE_URL,
      preset,
      title: "图片",
      width: 430,
      x: leftX,
      y: leftY + 190,
    });
    const right = createPresetMediaNode({
      action: "VIDEO_GENERATE",
      generated: true,
      height: 430,
      mediaType: "video",
      preset,
      prompt: AUDIO_TO_VIDEO_PROMPT,
      title: "视频",
      width: 560,
      x: Math.round(center.x + 100),
      y: Math.round(center.y - 320),
    });
    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 [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 selectedNode = useMemo(
    () => nodes.find((node) => node.id === selectedNodeId) || null,
    [nodes, selectedNodeId]
  );

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

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

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

  const addWorkflowPreset = useCallback(
    (workflow: WorkflowPreset, index = 0) => {
      const node = createWorkflowNode(workflow, 440 + index * 24, 350 + index * 18);
      addNodes([node], []);
      setActivePanel(null);
      setConnectionMenu(null);
      toast.success("已添加工作流");
    },
    [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);
      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);
    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);
    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]);
      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 "自己编写内容": {
          anchorUpdates = {
            kind: "script",
            title: "文本",
            subtitle: "文本资源",
            inputType: "text",
            width: OFFICIAL_TEXT_RESOURCE_WIDTH,
            height: OFFICIAL_TEXT_RESOURCE_HEIGHT,
          };
          draftUpdates = {
            action: "TEXT_RESOURCE",
            content: [],
            manualEditing: true,
            nodeType: "text",
            scriptRole: "resource",
            viewMode: undefined,
          };
          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: 430,
            height: 170,
            inputType: "audio",
          };
          draftUpdates = {
            action: "AUDIO_RESOURCE",
            generated: false,
            mediaType: "audio",
            mediaUrl: AUDIO_SOURCE_URL,
            nodeType: "audio",
            url: [AUDIO_SOURCE_URL],
          };
          const video = makeGenerated("video", "视频", rightX, { params: { prompt: AUDIO_TO_VIDEO_PROMPT } });
          const image = createMediaResourceNode({
            mediaType: "image",
            mediaUrl: AUDIO_REFERENCE_IMAGE_URL,
            title: "图片",
            width: 430,
            height: 252,
            x: anchor.x,
            y: Math.round(anchor.y + 170 + OFFICIAL_NODE_GAP),
          });
          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(
    (nodeId: string, action: ImageToolbarAction, option?: string) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      if (!anchor) return;
      const sourceUrl = getNodeMediaUrl(anchor) || CHARACTER_IMAGE_URL;

      if (action === "download") {
        if (!sourceUrl) {
          toast.error("当前素材没有可下载地址");
          return;
        }
        const link = document.createElement("a");
        link.href = sourceUrl;
        link.download = `${anchor.title || "libtv-image"}.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;
      }

      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[] = [];

      if (action === "crop") {
        const parsed = Number.parseInt(option || "9", 10);
        const tileCount = Number.isFinite(parsed) && parsed > 0 ? parsed : 9;
        const columns = Math.ceil(Math.sqrt(tileCount));
        const tileSize = 180;
        const gap = 26;
        const rows = Math.ceil(tileCount / columns);
        const startY = Math.round(anchor.y + anchor.height / 2 - (rows * tileSize + (rows - 1) * gap) / 2);

        Array.from({ length: tileCount }).forEach((_, index) => {
          const tile = createMediaResourceNode({
            action: "IMAGE_RESOURCE",
            height: tileSize,
            mediaType: "image",
            mediaUrl: sourceUrl,
            prompt: option || "宫格切分",
            title: `切分 ${index + 1}`,
            width: tileSize,
            x: rightX + (index % columns) * (tileSize + gap),
            y: startY + Math.floor(index / columns) * (tileSize + gap),
          });
          nextNodes.push(tile);
          nextEdges.push({ id: makeId("edge"), source: anchor.id, target: tile.id });
        });

        setNodes((current) => [...current, ...nextNodes]);
        setEdges((current) => [...current, ...nextEdges]);
        setSelectedNodeId(anchor.id);
        setCanvasCommand(null);
        setNodeContextMenu(null);
        setConnectionMenu(null);
        setActivePanel(null);
        toast.success(`已创建「${option || "宫格切分"}」结果节点`);
        return;
      }

      const labels: Record<Exclude<ImageToolbarAction, "annotate" | "rotate" | "download" | "preview" | "crop">, string> = {
        grid: "九宫格",
        hd: "高清",
        lighting: "打光",
        orbit: "多角度",
        panorama: "720 全景",
      };
      const title = labels[action];
      const created = createTargetModuleNode("image", rightX, 0, nodes.length + 1);
      const prompt = option?.trim() || title;
      const resultNode: CloneNode = {
        ...created,
        title,
        y: centerY(created.height),
        draftValues: {
          ...(created.draftValues || {}),
          generatorType: action === "hd" ? "ENHANCE" : "DEFAULT",
          params: {
            mode: action,
            prompt,
            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]
  );

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

  const submitSelectedImagePrompt = useCallback(
    (nodeId: string, payload: ComposerSubmitPayload) => {
      const anchor = nodes.find((node) => node.id === nodeId);
      if (!anchor) return;
      const sourceUrl = getNodeMediaUrl(anchor) || CHARACTER_IMAGE_URL;
      const rightX = Math.round(anchor.x + anchor.width + OFFICIAL_NODE_GAP);
      const created = createTargetModuleNode("image", rightX, 0, nodes.length + 1);
      const prompt = payload.prompt.trim() || payload.slashScene || "生成角色三视图";
      const resultNode: CloneNode = {
        ...created,
        title: payload.slashScene || "图片生成",
        y: Math.round(anchor.y + anchor.height / 2 - created.height / 2),
        draftValues: {
          ...(created.draftValues || {}),
          params: {
            prompt,
            references: payload.references,
            settings: payload.settings,
            slashScene: payload.slashScene,
            sourceNodeId: anchor.id,
            sourceUrl,
          },
          sourceNodeId: anchor.id,
          sourceUrl,
        },
      };
      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("已按当前提示词创建图片生成节点");
    },
    [nodes]
  );

  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);
    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((nodeId: string) => {
    const node = nodes.find((item) => item.id === nodeId);
    if (!node) return;
    setSelectedNodeId(nodeId);
    setNodeContextMenu(null);
    setConnectionMenu(null);
    toast.message(`${node.title} 生成接口待接入。`);
  }, [nodes]);

  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));
    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 === selectedNodeId
          ? { ...node, draftValues: { ...(node.draftValues || {}), [key]: value } }
          : node
      )
    );
  }, [selectedNodeId]);

  const startNodeDrag = useCallback((event: ReactPointerEvent, node: CloneNode) => {
    event.stopPropagation();
    event.currentTarget.setPointerCapture(event.pointerId);
    setSelectedNodeId(node.id);
    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);
    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;
        setNodes((current) =>
          current.map((node) =>
            node.id === drag.id
              ? { ...node, x: Math.round(drag.nodeX + dx), y: Math.round(drag.nodeY + dy) }
              : node
          )
        );
        return;
      }
      setViewport((current) => ({
        ...current,
        x: Math.round(drag.viewportX + event.clientX - drag.startX),
        y: Math.round(drag.viewportY + event.clientY - drag.startY),
      }));
    },
    [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 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);
    setActivePanel((current) => (current === panel ? null : panel));
  }, []);

  const isBusy = isLoading || isProjectLoading;
  const selectedPresetControlNode =
    selectedNode?.kind === "media" && selectedNode.inputType !== "audio" ? selectedNode : null;
  const selectedPresetMode = getPresetMode(selectedPresetControlNode);
  const selectedTargetModuleKind = selectedNode ? getTargetModuleKind(selectedNode) : null;
  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),
    };
  }, [selectedPresetControlNode, 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)}
            onModuleAction={(actionLabel) => runTargetModuleAction(node.id, actionLabel)}
            onOpenConnectionMenu={(event, side) => openConnectionMenu(event, node, side)}
            onPointerDown={(event) => startNodeDrag(event, node)}
            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}

      {selectedPresetMode && selectedPresetAnchor && selectedPresetControlNode ? (
        <PresetWorkflowControls
          anchor={selectedPresetAnchor}
          mode={selectedPresetMode}
          nodes={nodes}
          onComposerSubmit={(payload) => submitSelectedImagePrompt(selectedPresetControlNode.id, payload)}
          onImageToolAction={(action, option) => runSelectedImageToolAction(selectedPresetControlNode.id, action, option)}
          selectedNode={selectedPresetControlNode}
        />
      ) : null}

      <TopBar
        draftTitle={draftTitle}
        isSaving={isSaving}
        isTitleEditing={isTitleEditing}
        onAccount={() => toggleTopPanel("account")}
        onBell={() => toggleTopPanel("notifications")}
        onCommitTitle={commitTitle}
        onDraftTitleChange={setDraftTitle}
        onMember={() => toggleTopPanel("member")}
        onSave={saveCanvas}
        onShare={() => toggleTopPanel("share")}
        onSkills={() => toggleTopPanel("skills")}
        onStartTitleEdit={() => setIsTitleEditing(true)}
        projectTitle={projectTitle}
        routerBack={() => router.push("/")}
      />

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

      <ZoomDock
        compact={false}
        zoom={viewport.zoom}
        onCenter={() => setViewport(DEFAULT_VIEWPORT)}
        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}

      {selectedNode && !selectedPresetMode && !selectedTargetModuleKind ? (
        <InspectorPanel
          node={selectedNode}
          onChangeProperty={updateNodeDraft}
          onClose={() => setSelectedNodeId(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)} />
      ) : null}

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

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

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

      {activePanel === "notifications" ? (
        <NotificationsPopover onClose={() => setActivePanel(null)} />
      ) : null}

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

      {previewNode ? (
        <LibModal onClose={() => setPreviewNode(null)} title={previewNode.title || "预览"} width={920}>
          <ImageNodePreview node={previewNode} />
        </LibModal>
      ) : 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,
  isSaving,
  isTitleEditing,
  onAccount,
  onBell,
  onCommitTitle,
  onDraftTitleChange,
  onMember,
  onSave,
  onShare,
  onSkills,
  onStartTitleEdit,
  projectTitle,
  routerBack,
}: {
  draftTitle: string;
  isSaving: boolean;
  isTitleEditing: boolean;
  onAccount: () => void;
  onBell: () => void;
  onCommitTitle: () => void;
  onDraftTitleChange: (value: string) => void;
  onMember: () => void;
  onSave: () => void;
  onShare: () => void;
  onSkills: () => void;
  onStartTitleEdit: () => void;
  projectTitle: string;
  routerBack: () => void;
}) {
  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"
        >
          <LibTVLogo />
        </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">
        <TopButton onClick={onSkills}>LibTV Skills</TopButton>
        <TopButton onClick={onSave} title="保存">
          {isSaving ? <Loader2 className="h-4 w-4 animate-spin" /> : <Save className="h-4 w-4" />}
        </TopButton>
        <TopButton onClick={onShare} title="分享">
          <Share2 className="h-4 w-4" />
        </TopButton>
        <TopButton className="relative" onClick={onBell} title="通知">
          <span className="absolute right-px top-px h-[5px] w-[5px] rounded-full bg-[#f53f3f]" />
          <Bell className="h-4 w-4" />
        </TopButton>
        <TopButton className="gap-1 px-3 text-[#05dff6]" onClick={onMember}>
          <StoreGlyph />
          会员超市
        </TopButton>
        <MemberDealPill onAccount={onAccount} onMember={onMember} />
      </div>
    </header>
  );
}

function TopButton({
  children,
  className,
  onClick,
  title,
}: {
  children: React.ReactNode;
  className?: string;
  onClick: () => void;
  title?: string;
}) {
  return (
    <button
      className={cn(
        "flex h-10 min-w-10 cursor-pointer items-center justify-center rounded-xl border border-white/8 bg-[#202020] px-3 text-[13px] font-normal text-white/72 shadow-[0_12px_30px_rgba(0,0,0,0.28)] transition hover:bg-[#2a2a2a] hover:text-white",
        className
      )}
      onClick={onClick}
      title={title}
      type="button"
    >
      {children}
    </button>
  );
}

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,
  onCenter,
  onZoomIn,
  onZoomOut,
  zoom,
}: {
  compact?: boolean;
  onCenter: () => void;
  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-4 left-4 z-40 flex items-center gap-1 rounded-xl border 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-7 items-center justify-center rounded-lg transition-colors hover:bg-white/10" type="button">
        <GridTilesGlyph />
      </button>
      <button className="flex h-7 w-7 items-center justify-center rounded-lg transition-colors hover:bg-white/10" type="button">
        <MapPinGlyph />
      </button>
      <button className="flex h-7 w-7 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-7 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-[58px] rounded-lg px-1 text-[13px] leading-normal transition-colors hover:bg-white/10" onClick={onCenter} type="button">
        {Math.round(zoom * 100)}%
      </button>
      <button className="flex h-7 w-7 items-center justify-center rounded-lg text-[18px] leading-none transition-colors hover:bg-white/10" onClick={onZoomIn} type="button">
        +
      </button>
    </div>
  );
}

function LibTVLogo() {
  return (
    <svg aria-hidden="true" className="h-6 text-white" fill="currentColor" height="17" viewBox="0 0 76.234 16.79" width="77">
      <path d="M16.576 16.616H0l.833-4.418H17.65z" />
      <path d="m0 16.616 2.314-12.27h4.448l-2.316 12.27zM8.27 0h16.936l-.832 4.416H7.544z" />
      <path d="m25.206 0-2.314 12.27-4.512.002L20.76 0zM30.857 14.816 33.09 2.217h2.7l-1.82 10.276h4.968l-.415 2.321h-7.666zM41.025 6.328h2.556l-1.639 8.488h-2.537l1.619-8.488zm.235-2.51c0-.882.701-1.547 1.566-1.547.81 0 1.367.54 1.367 1.315 0 .882-.702 1.547-1.566 1.547-.81 0-1.367-.54-1.367-1.314M53.696 9.488c0 3.077-2.232 5.435-4.933 5.435-1.458 0-2.268-.559-2.735-1.296l-.45 1.189h-2.232L45.56 2.217h2.538l-.738 4.265c.63-.63 1.44-1.025 2.555-1.025 2.214 0 3.78 1.71 3.78 4.03m-2.574.198c0-1.422-.756-2.16-1.87-2.16-1.657 0-2.7 1.547-2.7 3.168 0 1.421.774 2.16 1.89 2.16 1.638 0 2.682-1.548 2.682-3.168zM53.929 2.217h9.934l-.395 2.321H59.85L58.03 14.814h-2.699l1.819-10.276h-3.618zM72.934 2.217h2.879l-6.497 12.599h-3.222L64.042 2.217h2.772l1.368 9.322z" />
    </svg>
  );
}

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 MemberDealPill({ onAccount, onMember }: { onAccount: () => void; onMember: () => void }) {
  return (
    <div className="flex h-10 items-center gap-2 rounded-xl border border-white/8 bg-[#202020] px-3 py-[6px] text-[12px] text-white/76 shadow-[0_12px_30px_rgba(0,0,0,0.28)]">
      <button className="relative flex cursor-pointer items-center gap-1 rounded-[8px] px-0.5 hover:text-white" onClick={onMember} type="button">
        <span className="absolute -top-5 left-0 z-10 flex h-4 whitespace-nowrap rounded-md rounded-bl-none bg-[#FAD6A4] px-2 py-0.5 text-center text-[10px] leading-[12px] text-[#0D0D0D]">
          限时 39 折
        </span>
        <DiamondGlyph />
        <span>
          会员特惠<span className="font-[800]">39折</span>
        </span>
      </button>
      <button className="flex cursor-pointer items-center gap-1 rounded-[8px] px-0.5 hover:text-white" onClick={onMember} type="button">
        <LightningGlyph />
        <span>100</span>
      </button>
      <button className="rounded-full" onClick={onAccount} type="button">
        <img alt="avatar" className="h-7 w-7 rounded-full object-cover" src={TARGET_AVATAR} />
      </button>
    </div>
  );
}

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 PresetWorkflowControls({
  anchor,
  mode,
  nodes,
  onComposerSubmit,
  onImageToolAction,
  selectedNode,
}: {
  anchor: PresetControlAnchor;
  mode: Exclude<ActiveStarterScene, null>;
  nodes: CloneNode[];
  onComposerSubmit: (payload: ComposerSubmitPayload) => void;
  onImageToolAction: (action: ImageToolbarAction, option?: string) => void;
  selectedNode: CloneNode;
}) {
  if (mode === "character-three-view") {
    return (
      <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
        <CharacterPresetToolbar anchor={anchor} onToolAction={onImageToolAction} />
        <PromptComposer
          anchor={anchor}
          nodes={nodes}
          onSubmit={onComposerSubmit}
          referenceThumbnailUrl={getNodeMediaUrl(selectedNode) || CHARACTER_IMAGE_URL}
        />
      </div>
    );
  }

  if (mode === "story-script") {
    return (
      <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
        <PresetFloatingToolbar
          anchor={anchor}
          items={[
            ["拆分场景", "按镜号拆分脚本接口待接入。"],
            ["生成分镜", "分镜生成接口待接入。"],
            ["表格视图", "脚本表格视图接口待接入。"],
            ["导出", "脚本导出接口待接入。"],
          ]}
        />
        <PresetComposerPanel
          anchor={anchor}
          credit="8"
          prompt={STORY_SCRIPT_PROMPT}
          submitMessage="故事脚本生成接口待接入。"
          title="脚本生成器"
        />
      </div>
    );
  }

  if (mode === "first-frame") {
    return (
      <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
        <PresetFloatingToolbar
          anchor={anchor}
          items={[
            ["高清", "首帧高清接口待接入。"],
            ["扩图", "首帧扩图接口待接入。"],
            ["替换背景", "背景替换接口待接入。"],
            ["下载", "图片下载接口待接入。"],
          ]}
        />
        <PresetComposerPanel
          anchor={anchor}
          credit="28"
          prompt="以当前图为首帧生成视频。"
          submitMessage="首帧图生视频接口待接入。"
          thumbnailUrl={FIRST_FRAME_IMAGE_URL}
          title="首帧图生视频"
        />
      </div>
    );
  }

  return (
    <div className="pointer-events-none absolute inset-0 z-30" data-canvas-overlay="true">
      <PresetFloatingToolbar
        anchor={anchor}
        items={[
          ["节奏匹配", "音频节奏解析接口待接入。"],
          ["镜头语言", "镜头语言配置接口待接入。"],
          ["生成音效", "音效生成接口待接入。"],
          ["下载", "素材下载接口待接入。"],
        ]}
      />
      <PresetComposerPanel
        anchor={anchor}
        credit="32"
        prompt={AUDIO_TO_VIDEO_PROMPT}
        submitMessage="音频生视频接口待接入。"
        thumbnailUrl={AUDIO_REFERENCE_IMAGE_URL}
        title="音频生视频"
      />
    </div>
  );
}

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

  return (
    <>
      <div
        className={cn(
          "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]",
          anchor
            ? "origin-bottom -translate-x-1/2 -translate-y-full scale-[0.7]"
            : "left-1/2 top-[168px] origin-top -translate-x-1/2 scale-[0.7]"
        )}
        style={anchor ? { left: anchor.centerX, top: anchor.topY - 14 } : undefined}
      >
        <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" />
        {iconActions.map((item) => (
          <button
            className="flex h-10 w-10 items-center justify-center rounded-[8px] text-[28px] text-white/84 hover:bg-white/8"
            key={item.action}
            onClick={() => onToolAction(item.action)}
            title={item.label}
            type="button"
          >
            {item.icon}
          </button>
        ))}
      </div>
      {activeToolbarMenu ? (
        <SceneToolbarPopover
          anchor={anchor}
          menu={activeToolbarMenu}
          onClose={() => setToolbarMenu(null)}
          onSelect={(option) => {
            onToolAction(activeToolbarMenu, option);
            setToolbarMenu(null);
          }}
        />
      ) : null}
    </>
  );
}

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
        credit="8"
        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
        credit="28"
        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
        credit="32"
        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={cn(
        "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]",
        anchor
          ? "origin-bottom -translate-x-1/2 -translate-y-full scale-[0.7]"
          : "left-1/2 top-[94px] -translate-x-1/2"
      )}
      style={anchor ? { left: anchor.centerX, top: anchor.topY - 14 } : undefined}
    >
      {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-[430px]">
      <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="rounded-[10px] border border-white/12 bg-[#f4f5f7] p-4 text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]">
        <div className="flex items-center gap-4">
          <button
            className="flex h-12 w-12 items-center justify-center rounded-full bg-[#111] text-white"
            onClick={() => toast.info("音频播放控制待接入。")}
            type="button"
          >
            ▶
          </button>
          <div className="min-w-0 flex-1">
            <div className="truncate text-[14px] font-semibold">情绪配乐.mp3</div>
            <div className="mt-1 text-[12px] text-[#697080]">音频生视频参考素材</div>
          </div>
          <a className="rounded-[8px] px-2 py-1 text-[12px] text-[#4f5cff] hover:bg-black/5" href={AUDIO_SOURCE_URL} rel="noreferrer" target="_blank">
            试听
          </a>
        </div>
        <div className="mt-4 flex h-12 items-end gap-1">
          {Array.from({ length: 38 }).map((_, index) => (
            <span
              className="flex-1 rounded-full bg-[#7b86ff]"
              key={index}
              style={{ height: `${18 + ((index * 17) % 28)}px`, opacity: 0.34 + ((index % 5) * 0.12) }}
            />
          ))}
        </div>
      </div>
    </div>
  );
}

function PresetComposerPanel({
  anchor,
  credit,
  prompt,
  submitMessage,
  thumbnailUrl,
  title,
}: {
  anchor?: PresetControlAnchor;
  credit: string;
  prompt: string;
  submitMessage: string;
  thumbnailUrl?: string;
  title: string;
}) {
  const [draftPrompt, setDraftPrompt] = useState(prompt);

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

  return (
    <div
      className={cn(
        "pointer-events-auto absolute 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)]",
        anchor
          ? "origin-top -translate-x-1/2 scale-[0.5]"
          : "bottom-[64px] left-1/2 origin-bottom -translate-x-1/2 scale-[0.5]"
      )}
      style={anchor ? { left: anchor.centerX, top: anchor.bottomY + 18 } : undefined}
    >
      <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-5 flex items-center gap-6 text-[17px] text-white/78">
        <ComposerControl label="Lib Nano Pro" icon="◉" dropdown onClick={() => toast.info("模型选择接口待接入。")} />
        <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={credit} icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
        <button
          className="ml-auto flex h-11 w-11 items-center justify-center rounded-[12px] bg-white/76 text-[24px] text-black hover:bg-white"
          onClick={() => toast.info(submitMessage)}
          type="button"
        >
          ↑
        </button>
      </div>
    </div>
  );
}

function CharacterThreeViewScene() {
  const [toolbarMenu, setToolbarMenu] = useState<SceneToolbarMenu>(null);

  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" />
        {["⌁", "↔", "↓", "↗"].map((item, index) => (
          <button
            className="flex h-10 w-10 items-center justify-center rounded-[8px] text-[28px] text-white/84 hover:bg-white/8"
            key={item}
            onClick={() => toast.info(["绘制编辑待接入。", "对比预览待接入。", "下载素材待接入。", "全屏预览待接入。"][index])}
            type="button"
          >
            {item}
          </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";
  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 quickOptions: Record<Exclude<SceneToolbarMenu, "lighting" | null>, string[]> = {
    crop: ["4 宫格切分", "9 宫格切分", "16 宫格切分", "25 宫格切分"],
    grid: ["2 x 2", "3 x 3", "4 x 4", "自定义宫格"],
    hd: ["2倍高清", "4倍高清"],
    orbit: ["正侧背三视角", "八方向参考", "环绕镜头"],
    panorama: ["全景", "半身", "近景"],
  };

  if (menu === "lighting") {
    return (
      <div
        className={cn(
          "pointer-events-auto absolute z-40 w-[420px] rounded-[14px] border border-white/10 bg-[#262626]/98 p-4 text-white shadow-[0_24px_80px_rgba(0,0,0,0.46)] backdrop-blur-[10px]",
          anchor
            ? "origin-top -translate-x-1/2 scale-[0.7]"
            : "left-1/2 top-[214px] origin-top -translate-x-1/2 scale-[0.7]"
        )}
        style={anchor ? { left: anchor.centerX, top: anchor.topY + 8 } : undefined}
      >
        <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>
    );
  }

  return (
    <div
      className={cn(
        "pointer-events-auto absolute z-40 w-[260px] rounded-[14px] border border-white/10 bg-[#262626]/98 p-2 text-white shadow-[0_24px_80px_rgba(0,0,0,0.46)] backdrop-blur-[10px]",
        anchor
          ? "origin-top -translate-x-1/2 scale-[0.7]"
          : "left-1/2 top-[214px] origin-top -translate-x-1/2 scale-[0.7]"
      )}
      style={anchor ? { left: anchor.centerX, top: anchor.topY + 8 } : undefined}
    >
      {quickOptions[menu].map((option) => (
        <button
          className="flex h-10 w-full items-center justify-between rounded-[10px] 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 SceneToolIcon({ kind }: { kind: "panorama" | "orbit" | "lighting" | "grid" | "hd" | "crop" }) {
  if (kind === "panorama") {
    return <span className="font-['Barlow_Condensed',sans-serif] text-[16px] font-bold leading-none text-white/86">720</span>;
  }
  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,
  nodes = [],
  onSubmit,
  referenceThumbnailUrl = CHARACTER_IMAGE_URL,
}: {
  anchor?: PresetControlAnchor;
  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: "Lib Nano Pro",
    panorama: "全景",
    ratio: "16:9",
    resolution: "2K",
  });
  const referenceNodes = useMemo(
    () => nodes.filter((node) => node.kind !== "script" && node.inputType !== "audio"),
    [nodes]
  );

  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={cn(
        "pointer-events-auto absolute 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)]",
        anchor
          ? "origin-top -translate-x-1/2 scale-[0.5]"
          : "bottom-[64px] left-1/2 origin-bottom -translate-x-1/2 scale-[0.5]"
      )}
      style={anchor ? { left: anchor.centerX, top: anchor.bottomY + 18 } : undefined}
    >
      <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} 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-5 flex items-center gap-6 text-[18px] text-white/78">
        <ComposerControl active={menu === "model"} label={settings.model} 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="14" icon="⚡" muted onClick={() => toast.info("积分估算接口待接入。")} />
        <button
          className="ml-auto 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({
  menu,
  onSelect,
}: {
  menu: Exclude<ComposerMenu, "focus" | "reference" | "slash" | null>;
  onSelect: (option: string) => void;
}) {
  const options: Record<Exclude<ComposerMenu, "focus" | "reference" | "slash" | null>, string[]> = {
    camera: ["摄像机", "手持镜头", "固定镜头"],
    count: ["1张", "2张", "4张"],
    mark: ["添加人物标记", "添加构图标记", "添加动作标记"],
    model: ["Lib Nano Pro", "Lib Seedream Pro", "Lib Universal"],
    panorama: ["全景", "半身", "近景"],
    ratio: ["16:9", "9:16", "1:1", "4:3"],
    resolution: ["1K", "2K", "4K"],
    settings: ["提示词增强", "参考图权重", "高级参数"],
    style: ["写实", "电影感", "国风", "柔和自然光"],
    translate: ["中文", "English", "自动翻译"],
  };

  return (
    <div className="absolute left-5 top-[102px] z-50 w-[260px] rounded-[14px] border border-white/10 bg-[#1f1f1f] p-2 shadow-[0_24px_80px_rgba(0,0,0,0.5)]">
      {options[menu].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}
          onClick={() => onSelect(option)}
          type="button"
        >
          {option}
          <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>{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 curve = Math.max(90, Math.abs(endX - startX) * 0.42);
        return (
          <path
            d={`M ${startX} ${startY} C ${startX + curve} ${startY}, ${endX - curve} ${endY}, ${endX} ${endY}`}
            fill="none"
            key={edge.id}
            stroke="#7c86ff"
            strokeLinecap="round"
            strokeOpacity="0.95"
            strokeWidth="4"
          />
        );
      })}
    </svg>
  );
}

function CloneCanvasNode({
  node,
  onContextMenu,
  onModuleAction,
  onOpenConnectionMenu,
  onPointerDown,
  onTextResourceChange,
  selected,
}: {
  node: CloneNode;
  onContextMenu: (event: ReactMouseEvent<HTMLDivElement>) => void;
  onModuleAction: (actionLabel: TargetModuleActionLabel) => void;
  onOpenConnectionMenu: (event: ReactMouseEvent<HTMLButtonElement>, side: ConnectionSide) => void;
  onPointerDown: (event: ReactPointerEvent<HTMLDivElement>) => 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 (node.kind === "media") {
    return (
      <CanvasNodeShell node={node} onContextMenu={onContextMenu} onOpenConnectionMenu={onOpenConnectionMenu} onPointerDown={onPointerDown} selected={selected}>
        <PresetMediaCanvasNode node={node} 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="absolute inset-0 h-full w-full object-cover opacity-28" 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 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({ node, selected }: { node: CloneNode; selected: boolean }) {
  const mediaType = getDraftString(node, "mediaType") || node.inputType || "image";
  const mediaUrl = getNodeMediaUrl(node);
  const generated = Boolean(node.draftValues?.generated);
  const annotationMode = Boolean(node.draftValues?.annotationMode);
  const rotation = Number(node.draftValues?.rotation || 0);
  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 gap-1 text-[20px] font-semibold text-white/50">
        <Icon className="h-5 w-5" />
        {node.title}
      </div>
      {mediaType === "audio" ? (
        <div
          className={cn(
            "h-[calc(100%-32px)] rounded-[10px] border border-white/12 bg-[#f4f5f7] p-4 text-[#1f2329] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
            selected && "outline outline-2 outline-[#8b96ff]"
          )}
        >
          <div className="flex items-center gap-4">
            <button
              className="flex h-12 w-12 items-center justify-center rounded-full bg-[#111] text-white"
              onClick={() => toast.info("音频播放控制待接入。")}
              type="button"
            >
              ▶
            </button>
            <div className="min-w-0 flex-1">
              <div className="truncate text-[14px] font-semibold">情绪配乐.mp3</div>
              <div className="mt-1 text-[12px] text-[#697080]">音频生视频参考素材</div>
            </div>
            {mediaUrl ? (
              <a className="rounded-[8px] px-2 py-1 text-[12px] text-[#4f5cff] hover:bg-black/5" href={mediaUrl} rel="noreferrer" target="_blank">
                试听
              </a>
            ) : null}
          </div>
          <div className="mt-4 flex h-12 items-end gap-1">
            {Array.from({ length: 38 }).map((_, index) => (
              <span
                className="flex-1 rounded-full bg-[#7b86ff]"
                key={index}
                style={{ height: `${18 + ((index * 17) % 28)}px`, opacity: 0.34 + ((index % 5) * 0.12) }}
              />
            ))}
          </div>
        </div>
      ) : mediaType === "video" ? (
        <div
          className={cn(
            "relative flex h-[calc(100%-32px)] items-center justify-center overflow-hidden rounded-[10px] border border-white/12 bg-[#101010] shadow-[0_18px_60px_rgba(0,0,0,0.36)]",
            selected && "outline outline-2 outline-[#8b96ff]"
          )}
        >
          <div className="absolute inset-0 bg-[radial-gradient(circle,rgba(255,255,255,0.12)_1px,transparent_1px)] bg-[length:18px_18px] opacity-20" />
          {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]"
          )}
        >
          {mediaUrl ? (
            <img
              alt={node.title}
              className={cn("h-full w-full", node.title === "角色三视图" ? "object-contain" : "object-cover")}
              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}
          {!generated ? (
            <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 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[];
}) {
  return (
    <section
      className="absolute left-[88px] top-[110px] z-50 flex h-[min(720px,calc(100vh-140px))] w-[420px] flex-col overflow-hidden rounded-[8px] border border-white/10 bg-[#202020] shadow-[0_28px_90px_rgba(0,0,0,0.48)]"
      data-canvas-overlay="true"
    >
      <div className="flex items-center justify-between border-white/8 border-b p-4">
        <div>
          <div className="font-semibold text-[16px]">工作流</div>
          <div className="mt-1 text-[12px] text-white/42">{workflows.length} 个预设</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="min-h-0 flex-1 overflow-y-auto p-3">
        <div className="grid gap-3">
          {workflows.map((workflow, index) => (
            <button
              className="group overflow-hidden rounded-[8px] border border-white/8 bg-[#2a2a2a] text-left hover:border-white/18 hover:bg-[#323232]"
              key={`${workflow.id || ""}-${workflow.uuid || workflow.name}`}
              onClick={() => onAdd(workflow, index)}
              type="button"
            >
              {workflow.cover ? (
                <div
                  className="h-24 bg-cover bg-center"
                  style={{ backgroundImage: `linear-gradient(90deg, rgba(0,0,0,0.74), rgba(0,0,0,0.18)), url(${workflow.cover})` }}
                />
              ) : null}
              <div className="p-3">
                <div className="font-medium text-white">{workflow.name || workflow.title || "未命名"}</div>
                <div className="mt-1 line-clamp-2 text-[12px] text-white/46">{workflow.description || "LibTV workflow"}</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">用于 LibTV Skills 调用、模型能力和自动化任务。</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 }: { onClose: () => void }) {
  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 仅用于 LibTV skills 的调用授权使用，一旦传播给他人，有账号泄露的风险，请谨慎保管!</p>
              <p>· LibTVskills ：是Libtv提供给agent使用的入口，可在openclaw中调用，完成专业视频创作。</p>
              <p>
                · 安装使用请戳
                <button
                  className="ml-1 text-[#2f8bff] underline-offset-2 hover:underline"
                  onClick={() => toast.info("LibTV Skills 文档入口待接入。")}
                  type="button"
                >
                  LibTV Skills
                </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,
}: {
  onClose: () => void;
  onCopyLink: () => void;
  onPublish: () => 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-[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">在LibTV上发布</span>
              <span className="text-xs leading-snug text-white/70">发布你的作品和创作过程，让更多创作者看到。</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 MemberStoreModal({ onClose }: { onClose: () => void }) {
  const [activeTab, setActiveTab] = useState<MemberStoreTab>("model");

  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]">限时 39 折</div>
            <div className="mt-1 text-[22px] font-bold leading-tight">会员特惠39折</div>
            <div className="mt-2 text-[12px] leading-5 text-white/52">会员专属模型超市，顶级模型囤货必选。</div>
          </div>
          <div className="mt-4 space-y-1">
            {[
              ["vip", "会员特惠", "每月积分与专属权益"],
              ["model", "模型积分卡", "限时闪购 买一赠一"],
              ["credits", "积分充值", "通用积分灵活补充"],
            ].map(([id, title, desc]) => (
              <button
                className={cn(
                  "w-full rounded-[10px] px-3 py-2 text-left transition-colors",
                  activeTab === id ? "bg-white text-black" : "text-white/66 hover:bg-white/8 hover:text-white"
                )}
                key={id}
                onClick={() => setActiveTab(id as MemberStoreTab)}
                type="button"
              >
                <span className="block text-[13px] font-semibold">{title}</span>
                <span className={cn("mt-1 block text-[11px]", activeTab === id ? "text-black/55" : "text-white/36")}>{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">
            免费用户登录每日赠送20积分，每日赠2次5折视频；云端存储空间3GB。
          </div>
        </div>

        <div className="flex min-w-0 flex-1 flex-col">
          <div className="flex h-[64px] items-center justify-between border-white/8 border-b px-5">
            <div>
              <div className="text-[17px] font-semibold">
                {activeTab === "model" ? "模型积分卡" : activeTab === "vip" ? "会员特惠" : "积分充值"}
              </div>
              <div className="mt-1 text-[12px] text-white/42">
                {activeTab === "model" ? "模型超市内积分有效期为6个月，支付后不退不换。" : activeTab === "vip" ? "购买后立即生效，积分按月自动发放。" : "积分有效期2年，支付后不退不换。"}
              </div>
            </div>
            <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 className="overflow-y-auto p-5">
            {activeTab === "model" ? <ModelCardGrid /> : null}
            {activeTab === "vip" ? <VipPlanGrid /> : null}
            {activeTab === "credits" ? <CreditPackGrid /> : null}
          </div>
        </div>
      </div>
    </div>
  );
}

function ModelCardGrid() {
  return (
    <div>
      <div className="mb-4 flex items-center justify-between rounded-[10px] border border-[#ffc65d]/20 bg-[#2a2418] px-4 py-3">
        <div>
          <div className="text-[14px] font-semibold text-[#ffdca8]">限时闪购 买一赠一</div>
          <div className="mt-1 text-[12px] text-white/48">会员专属模型超市，顶级模型囤货必选</div>
        </div>
        <button
          className="h-9 rounded-[8px] bg-[#ffc65d] px-4 text-[13px] font-semibold text-black hover:bg-[#ffd282]"
          onClick={() => toast.info("模型积分卡购买接口待接入。")}
          type="button"
        >
          查看规则
        </button>
      </div>
      <div className="grid grid-cols-3 gap-3">
        {MEMBER_MODEL_CARDS.map((card) => (
          <MemberModelCard card={card} key={`${card.title}-${card.power}`} />
        ))}
      </div>
    </div>
  );
}

function MemberModelCard({ card }: { card: (typeof MEMBER_MODEL_CARDS)[number] }) {
  const theme = MEMBER_CARD_THEMES[card.group] || MEMBER_CARD_THEMES["seedance-2"];

  return (
    <button
      className="group relative min-h-[190px] overflow-hidden rounded-[12px] border border-white/8 p-4 text-left shadow-[0_14px_36px_rgba(0,0,0,0.24)] transition-colors hover:border-white/18"
      onClick={() => toast.info(`${card.title} 购买接口待接入。`)}
      style={{
        backgroundColor: theme.tone,
        backgroundImage: `linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)), url(${theme.bg})`,
        backgroundPosition: "right top",
        backgroundRepeat: "no-repeat",
        backgroundSize: "170px auto",
      }}
      type="button"
    >
      <span className="absolute right-3 top-3 rounded-[8px] bg-[#ff4d4f] px-2 py-1 text-[10px] font-semibold text-white">{card.corner}</span>
      <span className="flex h-8 w-8 items-center justify-center rounded-[8px] bg-white/14">
        <img alt="" className="h-5 w-5" src={theme.icon} />
      </span>
      <span className="mt-5 block text-[16px] font-semibold text-white">{card.title}</span>
      <span className="mt-1 block text-[12px] text-white/55">{card.label}</span>
      <span className="mt-4 flex items-baseline gap-1">
        <span className="text-[24px] font-bold text-white">{card.power}</span>
        <span className="text-[12px] text-white/50">积分</span>
      </span>
      <span className="mt-3 flex items-center justify-between">
        <span className="text-[11px] text-white/42">{card.desc}</span>
        <span className="rounded-[8px] bg-white px-3 py-1.5 text-[12px] font-semibold text-black transition group-hover:bg-white/90">￥{card.price}</span>
      </span>
    </button>
  );
}

function VipPlanGrid() {
  return (
    <div className="grid grid-cols-3 gap-3">
      {VIP_PLAN_CARDS.map((plan, index) => (
        <div className="rounded-[12px] border border-white/8 bg-white/[0.06] p-4" key={plan.title}>
          <div className="flex items-center justify-between">
            <span className="text-[16px] font-semibold">{plan.title}</span>
            {index === 1 ? <span className="rounded-full bg-[#ffc65d] px-2 py-0.5 text-[10px] font-semibold text-black">推荐</span> : null}
          </div>
          <div className="mt-2 text-[12px] text-white/48">{plan.power}</div>
          <div className="mt-5 flex items-end gap-1">
            <span className="text-[13px] text-[#ffc65d]">￥</span>
            <span className="text-[32px] font-bold text-[#ffc65d]">{plan.price}</span>
            <span className="pb-1 text-[12px] text-white/42">/月起</span>
          </div>
          <button
            className="mt-4 h-9 w-full rounded-[8px] bg-white text-[13px] font-semibold text-black hover:bg-white/90"
            onClick={() => toast.info(`${plan.title} 购买接口待接入。`)}
            type="button"
          >
            立即开通
          </button>
          <div className="mt-4 space-y-2">
            {plan.benefits.map((benefit) => (
              <div className="flex items-center gap-2 text-[12px] text-white/58" key={benefit}>
                <span className="h-1.5 w-1.5 rounded-full bg-[#ffc65d]" />
                {benefit}
              </div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

function CreditPackGrid() {
  return (
    <div className="grid grid-cols-4 gap-3">
      {CREDIT_PACKS.map((pack) => (
        <button
          className="rounded-[12px] border border-white/8 bg-white/[0.06] p-4 text-left transition hover:border-white/18 hover:bg-white/[0.08]"
          key={pack.points}
          onClick={() => toast.info(`${pack.points} 积分充值接口待接入。`)}
          type="button"
        >
          <span className="rounded-full bg-[#ff4d4f]/18 px-2 py-0.5 text-[10px] font-semibold text-[#ff8c8c]">{pack.tag}</span>
          <span className="mt-5 block text-[26px] font-bold">{pack.points}</span>
          <span className="mt-1 block text-[12px] text-white/45">通用积分</span>
          <span className="mt-5 block text-[15px] font-semibold text-[#ffc65d]">￥{pack.price}</span>
        </button>
      ))}
    </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>
          {[
            ["生成任务", "任务状态、进度轮询和失败原因接口待接入。"],
            ["系统通知", "审核、账户和平台消息接口待接入。"],
            ["会员活动", "限时 39 折，会员超市模型积分卡活动待接入。"],
          ].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 }: { 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-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">微信用户82a0d8</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>UUID</span>
                <button
                  className="rounded-[6px] px-1 text-white/42 hover:bg-white/8 hover:text-white"
                  onClick={() => {
                    void navigator.clipboard?.writeText("c9d954c4006648a2825b7240bf046f96");
                    toast.success("ID 复制成功");
                  }}
                  type="button"
                >
                  <Copy className="h-3 w-3" />
                </button>
              </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={() => toast.info("账号切换接口待接入。")}
              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">个人免费版</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="100" suffix="点" accent />
            <AccountMetricCard label="加速余额" value="0" suffix="次" />
            <AccountMetricCard label="存储空间" value="0G" suffix="/ 3G" />
          </div>

          <div className="mt-4 space-y-1">
            <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">
      {[
        ["使用教程", "打开 LibTV 视频画布教程。"],
        ["联系客服", "提交工单或联系在线客服。"],
        ["问题反馈", "反馈画布、生成和支付问题。"],
      ].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 rotation = Number(node.draftValues?.rotation || 0);

  if (!url) {
    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} />
      ) : (
        <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,
}: {
  onClose: () => void;
  onTogglePublic: () => void;
  projectTitle: string;
  publishPublic: boolean;
}) {
  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)]">
              发布作品到LibTV
            </p>
            <p className="text-[14px] font-normal leading-normal text-white/85 drop-shadow-[0_1px_2px_rgba(0,0,0,0.75)]">
              您的作品将展示到LibTV Show，方便大家交流使用
            </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">LibTV Show</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">
              点击发布即代表同意
              <a
                className="text-[#478EFF] hover:underline"
                href="https://www.liblib.art/activities/4b7ea7f1dbbf41669d9e05cd25a3fa77"
                rel="noreferrer"
                target="_blank"
              >
                《LibTV创作许可服务协议》
              </a>
            </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>
  );
}