import {
  AppstoreOutlined,
  CloudUploadOutlined,
  CloseOutlined,
  FileImageOutlined,
  LoadingOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  QuestionCircleOutlined,
  SettingOutlined,
  SkinOutlined,
} from "@ant-design/icons";
import { useEffect, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type ReactNode } from "react";
import ecommerceGenerated from "../../assets/ecommerce-carousel-generated.png";
import ecommerceSlide4 from "../../assets/ecommerce-hero-carousel/slide-4.png";
import ecommerceSlide5 from "../../assets/ecommerce-hero-carousel/slide-5.png";
import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";
import EcommerceVideoWorkspace from "./EcommerceVideoWorkspace";
import { aiGenerationClient } from "../../api/aiGenerationClient";
import {
  analyzeProductImages,
  buildProductSummary,
  extractSellingPoints,
  generateCreativeOptions,
  generateStoryboard,
  generateVideoPrompts,
  checkCompliance,
  type AdVideoUserConfig,
  type ProductSummary,
  type SellingPointResult,
  type CreativeOption,
  type Storyboard,
  type VideoPrompt,
  type ComplianceCheck,
} from "../../api/adVideoPlanClient";


interface ProductClonePageProps {
  [key: string]: unknown;
}

type ProductCloneStatus = "idle" | "ready" | "generating" | "done";
type ProductSetOutputKey = "set" | "detail" | "model" | "video";
type CloneOutputKey = ProductSetOutputKey | "hot";
type CloneSetCountKey = "selling" | "white" | "scene";
type CloneModelPanelTab = "scene" | "model";
type CloneVideoQualityKey = "standard" | "high" | "ultra";
type ProductSetStatus = "idle" | "ready" | "generating" | "done";
type ProductKitToolKey = "set" | "detail" | "wear" | "clone";
type CloneBasicSelectKey = "platform" | "market" | "language" | "ratio";
type CloneModelSelectKey = "gender" | "age" | "ethnicity" | "body";
type CloneReferenceMode = "upload" | "link";
type CloneReplicateLevelKey = "style" | "high";
type TryOnModelSource = "ai" | "library";
type TryOnStatus = "idle" | "modeling" | "ready" | "generating" | "done";
type DetailStatus = "idle" | "ready" | "generating" | "done";

interface CloneImageItem {
  id: string;
  src: string;
  name: string;
  width?: number;
  height?: number;
  format?: string;
}

interface CloneResult {
  id: string;
  src: string;
  label: string;
}

interface CloneSavedSetting {
  id: string;
  name: string;
  savedAt: string;
  output: CloneOutputKey;
  platform: string;
  market: string;
  language: string;
  ratio: string;
  setCounts: Record<CloneSetCountKey, number>;
  detailModules: string[];
  modelPanelTab: CloneModelPanelTab;
  modelScenes: string[];
  modelCustomScene: string;
  modelGender: string;
  modelAge: string;
  modelEthnicity: string;
  modelBody: string;
  modelAppearance: string;
  videoQuality: CloneVideoQualityKey;
  videoDurationSeconds: number;
  videoSmart: boolean;
  referenceMode?: CloneReferenceMode;
  replicateLevel?: CloneReplicateLevelKey;
  requirement: string;
}

type PlatformRatioModeKey = ProductSetOutputKey | "hot";

interface PlatformRatioGroup {
  ratios: string[];
  defaultRatio: string;
}

const sideTools: Array<{ key: ProductKitToolKey; label: string; icon: ReactNode }> = [
  { key: "set", label: "商品套图", icon: <AppstoreOutlined /> },
  { key: "detail", label: "A+详情", icon: <FileImageOutlined /> },
  { key: "wear", label: "服饰穿戴", icon: <SkinOutlined /> },
  { key: "clone", label: "电商AI作图", icon: <AppstoreOutlined /> },
];

const platformSpecOptions: Array<{
  label: string;
  ratios: string[];
  defaultRatio: string;
  ratioGroups?: Partial<Record<PlatformRatioModeKey, PlatformRatioGroup>>;
  specs: string[];
  tip?: string;
  aliases?: string[];
}> = [
  {
    label: "淘宝/天猫",
    ratios: ["淘宝主图 / SKU 图 800×800px", "详情页宽 750px", "详情页宽 790px"],
    defaultRatio: "淘宝主图 / SKU 图 800×800px",
    ratioGroups: {
      set: {
        ratios: ["1000×1000px\u00a0\u00a0\u00a01：1", "800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1000×1000px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: [
          "750×1000px\u00a0\u00a0\u00a03：4",
          "790×1053px\u00a0\u00a0\u00a03：4",
          "750×1125px\u00a0\u00a0\u00a02：3",
          "790×1185px\u00a0\u00a0\u00a02：3",
        ],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      model: {
        ratios: ["750×1000px\u00a0\u00a0\u00a03：4"],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16", "1080×1440px\u00a0\u00a0\u00a03：4", "1080×1080px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
      hot: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["主图 / SKU 图 800×800px，≤3MB", "详情页宽 750px 或 790px，单张高≤1546px"],
    tip: "建议主图 200-400KB JPG，超过 500KB 会影响加载速度。",
  },
  {
    label: "京东",
    ratios: ["京东主图 / SKU 图 800×800px", "详情页宽 750px", "首图主体占比 ≥70%"],
    defaultRatio: "京东主图 / SKU 图 800×800px",
    ratioGroups: {
      set: {
        ratios: ["1000×1000px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1000×1000px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: [
          "750×1000px\u00a0\u00a0\u00a03：4",
          "990×1320px\u00a0\u00a0\u00a03：4",
          "750×1125px\u00a0\u00a0\u00a02：3",
          "990×1485px\u00a0\u00a0\u00a02：3",
        ],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      model: {
        ratios: ["750×1125px\u00a0\u00a0\u00a02：3", "990×1485px\u00a0\u00a0\u00a02：3"],
        defaultRatio: "750×1125px\u00a0\u00a0\u00a02：3",
      },
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16", "1920×1080px\u00a0\u00a0\u00a016：9"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
      hot: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["主图 / SKU 图 800×800px，白底，≤1MB", "详情页宽 750px，首图主体占比 ≥70%"],
  },
  {
    label: "拼多多",
    ratios: ["主图 750×352px", "主图 800×800px", "详情页宽 750px"],
    defaultRatio: "主图 750×352px",
    ratioGroups: {
      set: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1", "750×1000px\u00a0\u00a0\u00a03：4"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: ["750×1000px\u00a0\u00a0\u00a03：4", "750×1125px\u00a0\u00a0\u00a02：3"],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      model: {
        ratios: ["750×1000px\u00a0\u00a0\u00a03：4"],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
      hot: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["主图 750×352px 或 800×800px，≤1MB", "详情页宽 750px，要求纯白底、无水印、无拼接"],
  },
  {
    label: "抖音电商",
    ratios: ["短视频 1080×1920px"],
    defaultRatio: "短视频 1080×1920px",
    ratioGroups: {
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
      hot: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["短视频 1080×1920px，9:16", "30s 内最佳"],
  },
  {
    label: "亚马逊 Amazon",
    ratios: ["主图 ≥1600×1600px", "建议 2000×2000px+", "最小 500×500px"],
    defaultRatio: "主图 ≥1600×1600px",
    ratioGroups: {
      set: {
        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1600×1600px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1", "1200×1800px\u00a0\u00a0\u00a02：3", "1200×1600px\u00a0\u00a0\u00a03：4"],
        defaultRatio: "1200×1800px\u00a0\u00a0\u00a02：3",
      },
      model: {
        ratios: ["1200×1800px\u00a0\u00a0\u00a02：3"],
        defaultRatio: "1200×1800px\u00a0\u00a0\u00a02：3",
      },
      video: {
        ratios: ["1920×1080px\u00a0\u00a0\u00a016：9"],
        defaultRatio: "1920×1080px\u00a0\u00a0\u00a016：9",
      },
      hot: {
        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1600×1600px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["主图 1600×1600px+，纯白底，≤10MB", "最小 500×500px，建议 2000px+ 以支持缩放"],
    aliases: ["亚马逊"],
  },
  {
    label: "Shopee",
    ratios: ["商品主图 1024×1024px", "基础主图 800×800px"],
    defaultRatio: "商品主图 1024×1024px",
    ratioGroups: {
      set: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: ["750×1000px\u00a0\u00a0\u00a03：4", "750×1125px\u00a0\u00a0\u00a02：3"],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      model: {
        ratios: ["750×1000px\u00a0\u00a0\u00a03：4"],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
      hot: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["商品主图推荐 1024×1024px，基础 800×800px", "≤2MB，白底或浅色底"],
    aliases: ["虾皮 Shopee/Lazada", "虾皮"],
  },
  {
    label: "Lazada",
    ratios: ["商品主图 800×800px"],
    defaultRatio: "商品主图 800×800px",
    ratioGroups: {
      set: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: ["750×1000px\u00a0\u00a0\u00a03：4", "750×1125px\u00a0\u00a0\u00a02：3"],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      model: {
        ratios: ["750×1000px\u00a0\u00a0\u00a03：4"],
        defaultRatio: "750×1000px\u00a0\u00a0\u00a03：4",
      },
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
      hot: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["商品主图 800×800px，1:1"],
  },
  {
    label: "Instagram",
    ratios: ["帖子 1080×1350px", "帖子 1080×1080px", "Stories / Reels 1080×1920px", "头像 320×320px"],
    defaultRatio: "帖子 1080×1350px",
    ratioGroups: {
      set: {
        ratios: ["1080×1080px\u00a0\u00a0\u00a01：1", "1080×1350px\u00a0\u00a0\u00a04：5"],
        defaultRatio: "1080×1080px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: ["1080×1350px\u00a0\u00a0\u00a04：5"],
        defaultRatio: "1080×1350px\u00a0\u00a0\u00a04：5",
      },
      model: {
        ratios: ["1080×1350px\u00a0\u00a0\u00a04：5"],
        defaultRatio: "1080×1350px\u00a0\u00a0\u00a04：5",
      },
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16", "1080×1350px\u00a0\u00a0\u00a04：5"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
    },
    specs: ["帖子 1080×1350px 或 1080×1080px", "Stories / Reels 封面 1080×1920px，头像 320×320px"],
    tip: "建议 ≤1MB JPG。",
    aliases: ["Instagram Reels"],
  },
  {
    label: "速卖通",
    ratios: ["主图 800×800px", "主图 1000×1000px+"],
    defaultRatio: "主图 800×800px",
    ratioGroups: {
      set: {
        ratios: ["1000×1000px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1000×1000px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: ["750×1125px\u00a0\u00a0\u00a02：3", "750×1000px\u00a0\u00a0\u00a03：4"],
        defaultRatio: "750×1125px\u00a0\u00a0\u00a02：3",
      },
      model: {
        ratios: ["750×1125px\u00a0\u00a0\u00a02：3"],
        defaultRatio: "750×1125px\u00a0\u00a0\u00a02：3",
      },
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16", "1920×1080px\u00a0\u00a0\u00a016：9"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
      hot: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["主图建议 800×800px 或更高，1:1", "适合跨境电商主图、SKU 图和场景图"],
  },
  {
    label: "eBay",
    ratios: ["商品图 1:1", "白底多角度展示图 1:1"],
    defaultRatio: "商品图 1:1",
    ratioGroups: {
      set: {
        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1600×1600px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: ["1000×1500px\u00a0\u00a0\u00a02：3", "1200×1600px\u00a0\u00a0\u00a03：4"],
        defaultRatio: "1000×1500px\u00a0\u00a0\u00a02：3",
      },
      model: {
        ratios: ["1000×1500px\u00a0\u00a0\u00a02：3"],
        defaultRatio: "1000×1500px\u00a0\u00a0\u00a02：3",
      },
      video: {
        ratios: ["1920×1080px\u00a0\u00a0\u00a016：9", "1080×1920px\u00a0\u00a0\u00a09：16"],
        defaultRatio: "1920×1080px\u00a0\u00a0\u00a016：9",
      },
      hot: {
        ratios: ["1600×1600px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1600×1600px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["商品图建议 1:1，主体清晰居中", "适合白底主图和多角度展示图"],
  },
  {
    label: "TikTok Shop",
    ratios: ["商品主图 1:1", "短视频 / 竖版封面 9:16"],
    defaultRatio: "商品主图 1:1",
    ratioGroups: {
      set: {
        ratios: ["1280×1280px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "1280×1280px\u00a0\u00a0\u00a01：1",
      },
      detail: {
        ratios: ["1080×1350px\u00a0\u00a0\u00a04：5"],
        defaultRatio: "1080×1350px\u00a0\u00a0\u00a04：5",
      },
      model: {
        ratios: ["1080×1350px\u00a0\u00a0\u00a04：5"],
        defaultRatio: "1080×1350px\u00a0\u00a0\u00a04：5",
      },
      video: {
        ratios: ["1080×1920px\u00a0\u00a0\u00a09：16"],
        defaultRatio: "1080×1920px\u00a0\u00a0\u00a09：16",
      },
      hot: {
        ratios: ["800×800px\u00a0\u00a0\u00a01：1"],
        defaultRatio: "800×800px\u00a0\u00a0\u00a01：1",
      },
    },
    specs: ["商品主图建议 1:1", "短视频/竖版封面建议 9:16"],
  },
];
const platformOptions = platformSpecOptions.map((option) => option.label);
const marketLanguageOptions: Array<{ country: string; languages: string[] }> = [
  { country: "中国", languages: ["中文"] },
  { country: "美国", languages: ["英文"] },
  { country: "加拿大", languages: ["英文", "法文"] },
  { country: "英国", languages: ["英文"] },
  { country: "德国", languages: ["德文"] },
  { country: "法国", languages: ["法文"] },
  { country: "意大利", languages: ["意大利语"] },
  { country: "西班牙", languages: ["西班牙语"] },
  { country: "日本", languages: ["日文"] },
  { country: "韩国", languages: ["韩文"] },
  { country: "澳大利亚", languages: ["英文"] },
  { country: "新加坡", languages: ["英文", "中文"] },
  { country: "马来西亚", languages: ["马来语", "英文", "中文"] },
  { country: "印尼", languages: ["印度尼西亚语", "英文"] },
  { country: "越南", languages: ["越南语", "英文"] },
  { country: "泰国", languages: ["泰语", "英文"] },
  { country: "菲律宾", languages: ["菲律宾语（他加禄语）", "英文"] },
  { country: "巴西", languages: ["葡萄牙语"] },
  { country: "墨西哥", languages: ["西班牙语"] },
  { country: "智利", languages: ["西班牙语"] },
  { country: "哥伦比亚", languages: ["西班牙语"] },
  { country: "阿联酋", languages: ["阿拉伯语", "英文"] },
  { country: "沙特阿拉伯", languages: ["阿拉伯语", "英文"] },
  { country: "俄罗斯", languages: ["俄语"] },
  { country: "波兰", languages: ["波兰语"] },
];
const marketOptions = marketLanguageOptions.map((option) => option.country);
const languageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages)));
const languageAliases: Record<string, string> = {
  英语: "英文",
  日语: "日文",
  德语: "德文",
  法语: "法文",
  韩语: "韩文",
  西文: "西班牙语",
  葡文: "葡萄牙语",
  印尼语: "印度尼西亚语",
  菲律宾语: "菲律宾语（他加禄语）",
};
const defaultPlatformSpec = platformSpecOptions[0]!;
const getPlatformSpec = (value: string) =>
  platformSpecOptions.find((option) => option.label === value || option.aliases?.includes(value)) ?? defaultPlatformSpec;
const normalizePlatform = (value: string) => getPlatformSpec(value).label;
const domesticPlatformLabels = new Set(["淘宝/天猫", "京东", "拼多多", "抖音电商"]);
const domesticPlatformLanguages = ["中文"];
const isDomesticPlatform = (platformValue: string) => domesticPlatformLabels.has(normalizePlatform(platformValue));
const getPlatformRatioGroup = (value: string, mode?: PlatformRatioModeKey): PlatformRatioGroup => {
  const platformSpec = getPlatformSpec(value);
  return (mode ? platformSpec.ratioGroups?.[mode] : null) ?? {
    ratios: platformSpec.ratios,
    defaultRatio: platformSpec.defaultRatio,
  };
};
const getPlatformRatioOptions = (value: string, mode?: PlatformRatioModeKey) => getPlatformRatioGroup(value, mode).ratios;
const getPlatformDefaultRatio = (value: string, mode?: PlatformRatioModeKey) => getPlatformRatioGroup(value, mode).defaultRatio;
const getUniqueRatioOptions = (ratios: string[]) => Array.from(new Set(ratios));
const normalizeRatioToken = (value: string) => value.replace(/：/g, ":").trim();
const normalizeRatioForPlatform = (platformValue: string, ratioValue: string, mode?: PlatformRatioModeKey) => {
  const platformRatios = getPlatformRatioOptions(platformValue, mode);
  if (platformRatios.includes(ratioValue)) return ratioValue;
  const normalizedRatio = normalizeRatioToken(ratioValue);
  const matchedRatio = platformRatios.find((option) => normalizeRatioToken(option).includes(normalizedRatio));
  return matchedRatio ?? getPlatformDefaultRatio(platformValue, mode);
};
const formatRatioDisplayValue = (value: string) => {
  if (!value.includes("套图")) return value;
  const size = value.match(/\d+\s*×\s*\d+\s*px?/u)?.[0]?.replace(/\s+/g, "") ?? "";
  const ratio = value.match(/\d+(?:\.\d+)?\s*[:：]\s*\d+(?:\.\d+)?/u)?.[0]?.replace(/\s+/g, "").replace(/:/g, "：") ?? "";
  return size && ratio ? `${size}\u00a0\u00a0\u00a0${ratio}` : value.replace(/^套图[:：]\s*/, "");
};
const greatestCommonDivisor = (left: number, right: number): number => {
  let a = Math.abs(left);
  let b = Math.abs(right);
  while (b) {
    [a, b] = [b, a % b];
  }
  return a || 1;
};
const formatAspectRatio = (width: number, height: number) => {
  const divisor = greatestCommonDivisor(width, height);
  return `${Math.round(width / divisor)}：${Math.round(height / divisor)}`;
};
const formatUploadedImageRatio = (image?: CloneImageItem) => {
  if (!image) return null;
  const format = image.format ? `\u00a0\u00a0\u00a0${image.format}` : "";
  if (!image.width || !image.height) return `上传图片\u00a0\u00a0\u00a0原图比例${format}`;
  return `上传图片 ${image.width}×${image.height}px\u00a0\u00a0\u00a0${formatAspectRatio(image.width, image.height)}${format}`;
};
const defaultMarketLanguageOption = marketLanguageOptions[0]!;
const normalizeMarket = (value: string) =>
  marketLanguageOptions.some((option) => option.country === value) ? value : defaultMarketLanguageOption.country;
const normalizeLanguage = (value: string) => languageAliases[value] ?? value;
const uniqueLanguages = (languages: string[]) => Array.from(new Set(languages));
const appendEnglish = (languages: string[]) => Array.from(new Set([...languages, "英文"]));
const getMarketLanguageOptions = (marketValue: string) =>
  appendEnglish((marketLanguageOptions.find((option) => option.country === marketValue) ?? defaultMarketLanguageOption).languages);
const getPlatformLanguageOptions = (platformValue: string, marketValue: string) => {
  const marketLanguages = getMarketLanguageOptions(marketValue);
  if (!isDomesticPlatform(platformValue)) return marketLanguages;
  const localLanguages = marketLanguages.filter((item) => item !== "英文");
  return uniqueLanguages([...localLanguages, ...domesticPlatformLanguages, "英文"]);
};
const getPlatformDefaultLanguage = (platformValue: string, marketValue: string) =>
  isDomesticPlatform(platformValue) ? "中文" : (getPlatformLanguageOptions(platformValue, marketValue)[0] ?? languageOptions[0] ?? "英文");
const normalizeLanguageForPlatform = (platformValue: string, marketValue: string, languageValue: string) => {
  const normalizedLanguage = normalizeLanguage(languageValue);
  const platformLanguages = getPlatformLanguageOptions(platformValue, marketValue);
  return platformLanguages.includes(normalizedLanguage) ? normalizedLanguage : getPlatformDefaultLanguage(platformValue, marketValue);
};
const productSetOutputOptions: Array<{ key: ProductSetOutputKey; label: string }> = [
  { key: "set", label: "套图" },
  { key: "detail", label: "详情图" },
  { key: "model", label: "模特图" },
  { key: "video", label: "短视频" },
];
const cloneOutputOptions: Array<{ key: CloneOutputKey; label: string }> = [
  ...productSetOutputOptions,
  { key: "hot", label: "爆款图复刻" },
];
const cloneSetCountOptions: Array<{
  key: CloneSetCountKey;
  title: string;
  desc: string;
}> = [
  { key: "selling", title: "卖点图", desc: "展示商品的核心卖点及细节特写" },
  { key: "white", title: "白底图", desc: "白底主图，多角度呈现商品细节" },
  { key: "scene", title: "场景图", desc: "展示商品的生活使用场景和人物搭配" },
];
const defaultCloneSetCounts: Record<CloneSetCountKey, number> = {
  selling: 3,
  white: 1,
  scene: 3,
};
const minCloneSetTotal = 1;
const maxCloneSetTotal = 16;
const maxCloneProductImages = 7;
const maxCloneReferenceImages = 20;
const cloneVideoDurationMin = 5;
const cloneVideoDurationMax = 15;
const cloneLatestSettingStorageKey = "omniai.clone-ai.latest-setting";
const cloneVideoQualityOptions: Array<{ key: CloneVideoQualityKey; label: string; desc: string }> = [
  { key: "standard", label: "标准", desc: "快速出片" },
  { key: "high", label: "高清", desc: "推荐" },
  { key: "ultra", label: "超清", desc: "细节增强" },
];
const cloneReplicateLevelOptions: Array<{ key: CloneReplicateLevelKey; title: string; desc: string }> = [
  { key: "style", title: "参考风格", desc: "参考整体风格和结构，自动调整色彩和重构场景。" },
  { key: "high", title: "高度复刻", desc: "参照参考图视觉结构替换产品和文案，场景细节略有差异。" },
];
const tryOnRatioOptions = ["3:4", "1:1", "9:16"];
const tryOnScenes = ["纯色棚拍", "都市街头", "街角咖啡", "自然草坪", "度假海滩", "温馨居家", "艺术展馆"];
const normalizeCloneModelSceneSelection = (scenes: string[] | null | undefined) => {
  const validScenes = (scenes ?? []).filter((scene) => typeof scene === "string" && scene.trim());
  const latestScene = validScenes[validScenes.length - 1];
  return latestScene ? [latestScene] : [];
};
const tryOnModelOptions = {
  gender: ["女", "男"],
  age: ["青年", "少年", "中年"],
  ethnicity: ["欧美白人", "亚洲人", "拉美裔", "非洲裔"],
  body: ["标准", "高挑", "微胖", "运动"],
};
const sampleResults = [ecommerceSlide4, ecommerceGenerated, ecommerceSlide5];
const productSetAssets = {
  main: "https://xiuxiu-pro.meitudata.com/poster/6e3eebacad8d5e47e1896ee7d54827bc.png?imageView2/2/w/800/format/webp/q/80/ignore-error/1",
  scene: "https://xiuxiu-pro.meitudata.com/poster/21225fc86b28d9e4d85636483c67408e.png?imageView2/2/w/400/format/webp/q/80/ignore-error/1",
  model: "https://xiuxiu-pro.meitudata.com/poster/4b8e6d1bd0996be52822dd1fac73cffd.png?imageView2/2/w/400/format/webp/q/80/ignore-error/1",
  detail: "https://xiuxiu-pro.meitudata.com/poster/29dd195a450ee5a7f7451ded6680e969.png?imageView2/2/w/400/format/webp/q/80/ignore-error/1",
  selling: "https://xiuxiu-pro.meitudata.com/poster/66bdef541b67588e8db2a03b39dc815b.jpg?imageView2/2/w/400/format/webp/q/80/ignore-error/1",
  hosting: "https://xiuxiu-pro-new.meitudata.com/poster/50c17a98c77fac4d0523c8cbdf0d33ca.jpg?imageView2/2/format/webp/q/80/ignore-error/1",
};
const productSetPreviewCards = [
  { id: "main", label: "01 主图 (白底/合规)", src: productSetAssets.main },
  { id: "scene", label: "02 场景展示", src: productSetAssets.scene },
  { id: "model", label: "03 模特场景图", src: productSetAssets.model },
  { id: "detail", label: "04 细节说明", src: productSetAssets.detail },
  { id: "selling", label: "05 卖点详解", src: productSetAssets.selling },
];
const tryOnAssets = {
  dressA: "https://xiuxiu-pro-new.meitudata.com/poster/133ca2d6c13bac6cfaa11fa29a155551.jpg?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
  dressB: "https://xiuxiu-pro-new.meitudata.com/poster/a661006820e888d9df13023075096e94.jpg?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
  modelWoman: "https://xiuxiu-pro-new.meitudata.com/poster/f806c6afaf6f38f634c156c5b6058201.png?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
  modelMan: "https://xiuxiu-pro-new.meitudata.com/poster/8c26503c67dc695e25e420e48caf4cde.png?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
  modelAsian: "https://xiuxiu-pro-new.meitudata.com/poster/0f2a7c92707312ec74647d66f15a6ef9.jpg?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
  tryA: "https://xiuxiu-pro-new.meitudata.com/poster/7f77e0866f05ff723959e1f48830713c.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
  tryB: "https://xiuxiu-pro-new.meitudata.com/poster/0b951004eabcdd7cae595dfdb4c7f8c3.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
  jacket: "https://xiuxiu-pro-new.meitudata.com/poster/fdbf10b4c92af5b1986444cdd9affaa5.png?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
  jacketResultA: "https://xiuxiu-pro-new.meitudata.com/poster/b1152bb292323b87696dd2f6e518e818.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
  jacketResultB: "https://xiuxiu-pro-new.meitudata.com/poster/1c1e757702108fef92d85be0c2802c01.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
  hat: "https://xiuxiu-pro-new.meitudata.com/poster/278af735b076ab812888802d3e3db0b8.jpg?imageView2/2/w/280/format/webp/q/80/ignore-error/1",
  hatResultA: "https://xiuxiu-pro-new.meitudata.com/poster/a3ba241b7aa6060869b096d3f10e5db4.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
  hatResultB: "https://xiuxiu-pro-new.meitudata.com/poster/01ed1ae80a187c70c682bb6d0ec6fa68.jpg?imageView2/2/w/345/format/webp/q/80/ignore-error/1",
};

const tryOnCards = [
  {
    title: "多件混搭自动融合",
    tone: "red",
    inputs: [tryOnAssets.dressA, tryOnAssets.dressB, tryOnAssets.modelWoman],
    results: [tryOnAssets.tryA, tryOnAssets.tryB],
  },
  {
    title: "一件也能出大片",
    tone: "brown",
    inputs: [tryOnAssets.jacket, tryOnAssets.modelMan],
    results: [tryOnAssets.jacketResultA, tryOnAssets.jacketResultB],
  },
  {
    title: "鞋帽饰品完美适配",
    tone: "gold",
    inputs: [tryOnAssets.hat, tryOnAssets.modelAsian],
    results: [tryOnAssets.hatResultA, tryOnAssets.hatResultB],
  },
];

const detailTypeOptions = ["普通A+", "品牌A+", "标准详情页", "移动端长图"];
const detailModules = [
  { id: "hero", title: "首屏主视觉", desc: "传递核心价值" },
  { id: "selling", title: "核心卖点图", desc: "突出卖点优势" },
  { id: "usage", title: "使用场景图", desc: "呈现真实使用场景" },
  { id: "angle", title: "多角度图", desc: "多角度呈现外观" },
  { id: "scene", title: "场景氛围图", desc: "展示使用场景" },
  { id: "detail", title: "商品细节图", desc: "放大材质与工艺" },
  { id: "story", title: "品牌故事图", desc: "传达品牌理念" },
  { id: "size", title: "尺寸/容量/尺码图", desc: "展示规格信息" },
  { id: "compare", title: "效果对比图", desc: "使用前后效果对比" },
  { id: "spec", title: "详细规格/参数表", desc: "展示详细商品数据" },
  { id: "craft", title: "工艺制作图", desc: "展示工艺制作过程" },
  { id: "gift", title: "配件/赠品图", desc: "明确收货的所有物品" },
  { id: "series", title: "系列展示图", desc: "多色或多SKU展示" },
  { id: "ingredient", title: "商品成分图", desc: "展示配方/材质/成分" },
  { id: "service", title: "售后保障图", desc: "说明质保退换政策" },
  { id: "tips", title: "使用建议图", desc: "商品使用的注意事项" },
];
const defaultDetailModuleIds: string[] = [];
const defaultCloneDetailModuleIds = ["hero", "selling", "usage", "angle", "scene", "detail"];
const cloneDetailModules = detailModules;
const detailAssets = {
  productA: "https://xiuxiu-pro.meitudata.com/poster/182676711565ee98e20cf92d766d1643.png?imageView2/2/format/webp/q/80/ignore-error/1",
  productB: "https://xiuxiu-pro.meitudata.com/poster/ba6312cbc3a32ceb8966f9ea20b9ee9c.png?imageView2/2/format/webp/q/80/ignore-error/1",
  productC: "https://xiuxiu-pro.meitudata.com/poster/7ee5753a3141fa12cda155126c8225d3.png?imageView2/2/format/webp/q/80/ignore-error/1",
  longPage: "https://xiuxiu-pro.meitudata.com/poster/19ef313484fc87c9bdd3cd52ce2a5947.png?imageView2/2/format/webp/q/80/ignore-error/1",
  gridA: "https://xiuxiu-pro.meitudata.com/poster/e74e8d920ac0f87020f90457d42a7153.png?imageView2/2/format/webp/q/80/ignore-error/1",
  gridB: "https://xiuxiu-pro.meitudata.com/poster/1652064f17c5c2b32ce287244b505c15.png?imageView2/2/format/webp/q/80/ignore-error/1",
  gridC: "https://xiuxiu-pro.meitudata.com/poster/dd8abace327edf61d8a8e2d7db42cfbe.png?imageView2/2/format/webp/q/80/ignore-error/1",
  gridD: "https://xiuxiu-pro.meitudata.com/poster/7dc397f1cb76a35f7f0ed3c3ce78ba81.png?imageView2/2/format/webp/q/80/ignore-error/1",
  gridE: "https://xiuxiu-pro.meitudata.com/poster/1199bd8b968a5162752e1ee2b093d315.png?imageView2/2/format/webp/q/80/ignore-error/1",
  gridF: "https://xiuxiu-pro.meitudata.com/poster/7a8cdb3693418df9915741960f8f5aa8.png?imageView2/2/format/webp/q/80/ignore-error/1",
};
const detailProductSamples = [detailAssets.productA, detailAssets.productB, detailAssets.productC];
const detailGridSamples = [detailAssets.gridA, detailAssets.gridB, detailAssets.gridC, detailAssets.gridD, detailAssets.gridE, detailAssets.gridF];

function getImageFileFormat(file: File) {
  const mimeFormat = file.type.split("/")[1]?.replace("jpeg", "jpg").toUpperCase();
  if (mimeFormat) return mimeFormat;
  return file.name.split(".").pop()?.toUpperCase() ?? "";
}

function readImageDimensions(src: string): Promise<{ width: number; height: number }> {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight });
    image.onerror = reject;
    image.src = src;
  });
}

function createObjectImageItems(files: File[], limit: number, prefix: string) {
  return Array.from(files)
    .filter((file) => file.type.startsWith("image/"))
    .slice(0, limit)
    .map<CloneImageItem>((file, index) => ({
      id: `${prefix}-${Date.now()}-${index}`,
      src: URL.createObjectURL(file),
      name: file.name,
      format: getImageFileFormat(file),
    }));
}

function isCloneSavedSetting(item: unknown): item is CloneSavedSetting {
  const candidate = item as Partial<CloneSavedSetting>;
  return (
    typeof candidate.id === "string" &&
    typeof candidate.name === "string" &&
    typeof candidate.savedAt === "string" &&
    typeof candidate.output === "string" &&
    typeof candidate.platform === "string" &&
    typeof candidate.market === "string" &&
    typeof candidate.language === "string" &&
    typeof candidate.ratio === "string" &&
    typeof candidate.videoDurationSeconds === "number"
  );
}

function readCloneLatestSetting() {
  if (typeof window === "undefined") return null;
  try {
    const rawValue = window.localStorage.getItem(cloneLatestSettingStorageKey);
    if (rawValue) {
      const parsedValue: unknown = JSON.parse(rawValue);
      if (isCloneSavedSetting(parsedValue)) return parsedValue;
    }
  } catch {
    return null;
  }
  return null;
}

function writeCloneLatestSetting(setting: CloneSavedSetting) {
  if (typeof window === "undefined") return;
  window.localStorage.setItem(cloneLatestSettingStorageKey, JSON.stringify(setting));
}

function clampCloneVideoDuration(value: number) {
  return Math.min(cloneVideoDurationMax, Math.max(cloneVideoDurationMin, Math.round(value)));
}

function ProductClonePage(_props: ProductClonePageProps = {}) {
  const setInputRef = useRef<HTMLInputElement>(null);
  const productInputRef = useRef<HTMLInputElement>(null);
  const cloneReferenceInputRef = useRef<HTMLInputElement>(null);
  const requirementTextareaRef = useRef<HTMLTextAreaElement>(null);
  const garmentInputRef = useRef<HTMLInputElement>(null);
  const detailInputRef = useRef<HTMLInputElement>(null);
  const countHoldTimeoutRef = useRef<number | null>(null);
  const countHoldIntervalRef = useRef<number | null>(null);
  const latestCloneSettingRef = useRef<CloneSavedSetting | null>(null);
  const skipInitialCloneAutoSaveRef = useRef(true);
  const skipNextCloneAutoSaveRef = useRef(false);
  const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
  const [setImages, setSetImages] = useState<CloneImageItem[]>([]);
  const [productSetPlatform, setProductSetPlatform] = useState(platformOptions[0]);
  const [productSetMarket, setProductSetMarket] = useState(marketOptions[0]);
  const [productSetLanguage, setProductSetLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
  const [productSetRatio, setProductSetRatio] = useState(getPlatformDefaultRatio(platformOptions[0]));
  const [productSetRequirement, setProductSetRequirement] = useState("");
  const [productSetOutput, setProductSetOutput] = useState<ProductSetOutputKey>("video");
  const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
  const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
  const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<{ src: string; label: string } | null>(null);
  const [showHostingModal, setShowHostingModal] = useState(false);
  const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
  const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
  const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>("detail");
  const [openCloneBasicSelect, setOpenCloneBasicSelect] = useState<CloneBasicSelectKey | null>(null);
  const [openCloneModelSelect, setOpenCloneModelSelect] = useState<CloneModelSelectKey | null>(null);
  const [cloneModelSelectDropUp, setCloneModelSelectDropUp] = useState(false);
  const [cloneReferenceMode, setCloneReferenceMode] = useState<CloneReferenceMode>("upload");
  const [cloneReferenceImages, setCloneReferenceImages] = useState<CloneImageItem[]>([]);
  const [cloneReplicateLevel, setCloneReplicateLevel] = useState<CloneReplicateLevelKey>("high");
  const [cloneSetCounts, setCloneSetCounts] = useState(defaultCloneSetCounts);
  const [selectedCloneDetailModules, setSelectedCloneDetailModules] = useState<string[]>(defaultCloneDetailModuleIds);
  const [cloneModelPanelTab, setCloneModelPanelTab] = useState<CloneModelPanelTab>("scene");
  const [selectedCloneModelScenes, setSelectedCloneModelScenes] = useState<string[]>([]);
  const [cloneModelCustomScene, setCloneModelCustomScene] = useState("");
  const [cloneModelGender, setCloneModelGender] = useState(tryOnModelOptions.gender[0]);
  const [cloneModelAge, setCloneModelAge] = useState(tryOnModelOptions.age[0]);
  const [cloneModelEthnicity, setCloneModelEthnicity] = useState(tryOnModelOptions.ethnicity[0]);
  const [cloneModelBody, setCloneModelBody] = useState(tryOnModelOptions.body[0]);
  const [cloneModelAppearance, setCloneModelAppearance] = useState("");
  const [cloneVideoQuality, setCloneVideoQuality] = useState<CloneVideoQualityKey>("high");
  const [cloneVideoDuration, setCloneVideoDuration] = useState(10);
  const [cloneVideoSmart, setCloneVideoSmart] = useState(true);
  const [adVideoStep, setAdVideoStep] = useState<"idle" | "planning" | "planned" | "rendering">("idle");
  const [adVideoBusy, setAdVideoBusy] = useState(false);
  const [adVideoError, setAdVideoError] = useState<string | null>(null);
  const [adVideoProgress, setAdVideoProgress] = useState("");
  const [adVideoSummary, setAdVideoSummary] = useState<ProductSummary | null>(null);
  const [adVideoSelling, setAdVideoSelling] = useState<SellingPointResult | null>(null);
  const [adVideoCreatives, setAdVideoCreatives] = useState<CreativeOption[]>([]);
  const [adVideoStoryboard, setAdVideoStoryboard] = useState<Storyboard | null>(null);
  const [adVideoPrompts, setAdVideoPrompts] = useState<VideoPrompt[]>([]);
  const [adVideoCompliance, setAdVideoCompliance] = useState<ComplianceCheck | null>(null);
  const [adVideoScenes, setAdVideoScenes] = useState<
    Array<{ sceneId: number; taskId?: string; status: string; progress: number; resultUrl?: string | null; error?: string }>
  >([]);
  const [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
  const [requirement, setRequirement] = useState("");
  const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
  const [cloneSettingName, setCloneSettingName] = useState("新建创作");
  const [platform, setPlatform] = useState(platformOptions[0]);
  const [market, setMarket] = useState(marketOptions[0]);
  const [language, setLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
  const [ratio, setRatio] = useState(getPlatformDefaultRatio(platformOptions[0]));
  const [status, setStatus] = useState<ProductCloneStatus>("idle");
  const [results, setResults] = useState<CloneResult[]>([]);
  const [garmentImages, setGarmentImages] = useState<CloneImageItem[]>([]);
  const [modelSource, setModelSource] = useState<TryOnModelSource>("ai");
  const [modelGender, setModelGender] = useState(tryOnModelOptions.gender[0]);
  const [modelAge, setModelAge] = useState(tryOnModelOptions.age[0]);
  const [modelEthnicity, setModelEthnicity] = useState(tryOnModelOptions.ethnicity[0]);
  const [modelBody, setModelBody] = useState(tryOnModelOptions.body[0]);
  const [appearance, setAppearance] = useState("");
  const [selectedScenes, setSelectedScenes] = useState<string[]>([]);
  const [customScene, setCustomScene] = useState("");
  const [smartScene, setSmartScene] = useState(false);
  const [tryOnRatio, setTryOnRatio] = useState(tryOnRatioOptions[0]);
  const [tryOnStatus, setTryOnStatus] = useState<TryOnStatus>("idle");
  const [tryOnResultImages, setTryOnResultImages] = useState<string[]>([]);
  const [detailProductImages, setDetailProductImages] = useState<CloneImageItem[]>([]);
  const [detailPlatform, setDetailPlatform] = useState(platformOptions[0]);
  const [detailMarket, setDetailMarket] = useState(marketOptions[0]);
  const [detailLanguage, setDetailLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
  const [detailType, setDetailType] = useState(detailTypeOptions[0]);
  const [detailRequirement, setDetailRequirement] = useState("");
  const [selectedDetailModules, setSelectedDetailModules] = useState<string[]>(defaultDetailModuleIds);
  const [detailStatus, setDetailStatus] = useState<DetailStatus>("idle");
  const productSetRatioOptions = getPlatformRatioOptions(productSetPlatform, productSetOutput);
  const hotUploadedRatioOption = cloneOutput === "hot" ? formatUploadedImageRatio(cloneReferenceImages[0]) : null;
  const baseCloneRatioOptions = getPlatformRatioOptions(platform, cloneOutput);
  const cloneRatioOptions = hotUploadedRatioOption
    ? getUniqueRatioOptions([...baseCloneRatioOptions, hotUploadedRatioOption])
    : baseCloneRatioOptions;
  const productSetLanguageOptions = getPlatformLanguageOptions(productSetPlatform, productSetMarket);
  const cloneLanguageOptions = getPlatformLanguageOptions(platform, market);
  const detailLanguageOptions = getPlatformLanguageOptions(detailPlatform, detailMarket);
  const ecommerceMentionImages: MentionImageOption[] = [
    ...productImages.map((image, index) => ({ ...image, label: `商品图 ${index + 1}` })),
    ...cloneReferenceImages.map((image, index) => ({ ...image, label: `参考图 ${index + 1}` })),
  ];

  const selectedProductSetOutput =
    productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
  const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
  const productSetPreviewReady = productSetStatus === "done";
  const cloneSetTotal = Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0);
  const canGenerateSet = setImages.length > 0 && productSetStatus !== "generating";
  const canGenerate = productImages.length > 0 && status !== "generating";
  const canGenerateTryOn = garmentImages.length > 0 && tryOnStatus !== "generating" && tryOnStatus !== "modeling";
  const canGenerateDetail = detailProductImages.length > 0 && detailStatus !== "generating";
  const cloneVideoDurationProgress =
    ((cloneVideoDuration - cloneVideoDurationMin) / (cloneVideoDurationMax - cloneVideoDurationMin)) * 100;
  const cloneVideoDurationStyle = {
    "--clone-video-duration-progress": `${cloneVideoDurationProgress}%`,
  } as CSSProperties;

  const syncRequirementMentionQuery = (value: string, selectionStart: number | null | undefined) => {
    setRequirementImageMentionQuery(ecommerceMentionImages.length ? getImageMentionQuery(value, selectionStart) : null);
  };

  const insertRequirementImageMention = (image: MentionImageOption) => {
    const textarea = requirementTextareaRef.current;
    const cursor = textarea?.selectionStart ?? requirement.length;
    const next = insertImageMentionValue(requirement, cursor, image.name, 500);
    setRequirement(next.value);
    setRequirementImageMentionQuery(null);
    window.requestAnimationFrame(() => {
      requirementTextareaRef.current?.focus();
      requirementTextareaRef.current?.setSelectionRange(next.selectionStart, next.selectionStart);
    });
  };

  const addSetImages = (files: File[]) => {
    if (setImages.length >= 3) return;
    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
    if (!imageFiles.length) return;
    setSetImages((current) => {
      const nextImages = createObjectImageItems(imageFiles, 3 - current.length, "set");
      return nextImages.length ? [...current, ...nextImages].slice(0, 3) : current;
    });
    setProductSetStatus("ready");
  };

  const handleSetUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files?.length) return;
    addSetImages(Array.from(files));
    event.target.value = "";
  };

  const handleSetDrop = (event: DragEvent<HTMLButtonElement>) => {
    event.preventDefault();
    setIsSetUploadDragging(false);
    const files = Array.from(event.dataTransfer.files);
    if (files.length) addSetImages(files);
  };

  const removeSetImage = (imageId: string) => {
    setSetImages((current) => {
      const next = current.filter((item) => item.id !== imageId);
      if (next.length === 0) setProductSetStatus("idle");
      return next;
    });
  };

  const addProductImages = (files: File[]) => {
    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
    if (!imageFiles.length) return;
    setProductImages((current) => {
      if (current.length >= maxCloneProductImages) return current;
      const nextImages = createObjectImageItems(imageFiles, maxCloneProductImages - current.length, "product");
      return nextImages.length ? [...current, ...nextImages].slice(0, maxCloneProductImages) : current;
    });
    setStatus("ready");
    setResults([]);
  };

  const handleProductUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files?.length) return;
    addProductImages(Array.from(files));
    event.target.value = "";
  };

  const handleProductDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsProductUploadDragging(false);
    const files = Array.from(event.dataTransfer.files);
    if (files.length) addProductImages(files);
  };

  const removeProductImage = (imageId: string) => {
    setProductImages((current) => {
      const next = current.filter((item) => item.id !== imageId);
      if (next.length === 0) {
        setStatus("idle");
        setResults([]);
      }
      return next;
    });
  };

  const hydrateCloneReferenceImageMeta = (items: CloneImageItem[]) => {
    items.forEach((item) => {
      readImageDimensions(item.src)
        .then(({ width, height }) => {
          setCloneReferenceImages((current) =>
            current.map((currentItem) => (currentItem.id === item.id ? { ...currentItem, width, height } : currentItem)),
          );
        })
        .catch(() => undefined);
    });
  };

  const addCloneReferenceImages = (files: File[]) => {
    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
    if (!imageFiles.length) return;
    const remainingSlots = maxCloneReferenceImages - cloneReferenceImages.length;
    if (remainingSlots <= 0) return;
    const nextImages = createObjectImageItems(imageFiles, remainingSlots, "reference");
    if (!nextImages.length) return;
    setCloneReferenceImages((current) => {
      if (current.length >= maxCloneReferenceImages) return current;
      return nextImages.length ? [...current, ...nextImages].slice(0, maxCloneReferenceImages) : current;
    });
    hydrateCloneReferenceImageMeta(nextImages);
  };

  const handleCloneReferenceUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files?.length) return;
    addCloneReferenceImages(Array.from(files));
    event.target.value = "";
  };

  const updateCloneSetCount = (key: CloneSetCountKey, delta: -1 | 1) => {
    setCloneSetCounts((current) => {
      const total = Object.values(current).reduce((sum, value) => sum + value, 0);
      const nextValue = current[key] + delta;
      if (delta < 0 && (current[key] <= 0 || total <= minCloneSetTotal)) return current;
      if (delta > 0 && total >= maxCloneSetTotal) return current;
      return { ...current, [key]: Math.max(0, Math.min(maxCloneSetTotal, nextValue)) };
    });
  };

  const clearCloneSetCountHold = () => {
    if (countHoldTimeoutRef.current !== null) {
      window.clearTimeout(countHoldTimeoutRef.current);
      countHoldTimeoutRef.current = null;
    }
    if (countHoldIntervalRef.current !== null) {
      window.clearInterval(countHoldIntervalRef.current);
      countHoldIntervalRef.current = null;
    }
  };

  const startCloneSetCountHold = (key: CloneSetCountKey, delta: -1 | 1, disabled: boolean) => {
    if (disabled) return;
    clearCloneSetCountHold();
    updateCloneSetCount(key, delta);
    window.addEventListener("pointerup", clearCloneSetCountHold, { once: true });
    window.addEventListener("pointercancel", clearCloneSetCountHold, { once: true });
    countHoldTimeoutRef.current = window.setTimeout(() => {
      countHoldIntervalRef.current = window.setInterval(() => updateCloneSetCount(key, delta), 110);
    }, 320);
  };

  const toggleCloneDetailModule = (moduleId: string) => {
    setSelectedCloneDetailModules((current) =>
      current.includes(moduleId) ? current.filter((item) => item !== moduleId) : [...current, moduleId],
    );
  };

  const toggleCloneModelScene = (scene: string) => {
    setSelectedCloneModelScenes((current) => (current[0] === scene ? [] : [scene]));
  };

  const handleProductSetPlatformChange = (nextPlatform: string) => {
    const normalizedPlatform = normalizePlatform(nextPlatform);
    setProductSetPlatform(normalizedPlatform);
    setProductSetRatio((current) => normalizeRatioForPlatform(normalizedPlatform, current, productSetOutput));
    setProductSetLanguage(getPlatformDefaultLanguage(normalizedPlatform, productSetMarket));
  };

  const handleProductSetOutputChange = (nextOutput: ProductSetOutputKey) => {
    setProductSetOutput(nextOutput);
    setProductSetRatio((current) => normalizeRatioForPlatform(productSetPlatform, current, nextOutput));
  };

  const handleProductSetMarketChange = (nextMarket: string) => {
    const normalizedMarket = normalizeMarket(nextMarket);
    setProductSetMarket(normalizedMarket);
    setProductSetLanguage(getPlatformDefaultLanguage(productSetPlatform, normalizedMarket));
  };

  const handleClonePlatformChange = (nextPlatform: string) => {
    const normalizedPlatform = normalizePlatform(nextPlatform);
    setPlatform(normalizedPlatform);
    setRatio((current) =>
      cloneOutput === "hot" && current.startsWith("上传图片") && hotUploadedRatioOption
        ? hotUploadedRatioOption
        : normalizeRatioForPlatform(normalizedPlatform, current, cloneOutput),
    );
    setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market));
  };

  const handleCloneOutputChange = (nextOutput: CloneOutputKey) => {
    setCloneOutput(nextOutput);
    setRatio((current) =>
      nextOutput === "hot" && current.startsWith("上传图片") && hotUploadedRatioOption
        ? hotUploadedRatioOption
        : normalizeRatioForPlatform(platform, current, nextOutput),
    );
  };

  const handleCloneMarketChange = (nextMarket: string) => {
    const normalizedMarket = normalizeMarket(nextMarket);
    setMarket(normalizedMarket);
    setLanguage(getPlatformDefaultLanguage(platform, normalizedMarket));
  };

  const handleDetailPlatformChange = (nextPlatform: string) => {
    const normalizedPlatform = normalizePlatform(nextPlatform);
    setDetailPlatform(normalizedPlatform);
    setDetailLanguage(getPlatformDefaultLanguage(normalizedPlatform, detailMarket));
  };

  const handleDetailMarketChange = (nextMarket: string) => {
    const normalizedMarket = normalizeMarket(nextMarket);
    setDetailMarket(normalizedMarket);
    setDetailLanguage(getPlatformDefaultLanguage(detailPlatform, normalizedMarket));
  };

  const createCloneSettingSnapshot = (name: string, id = `clone-setting-${Date.now()}`): CloneSavedSetting => ({
    id,
    name,
    savedAt: new Date().toISOString(),
    output: cloneOutput,
    platform,
    market,
    language,
    ratio,
    setCounts: { ...cloneSetCounts },
    detailModules: [...selectedCloneDetailModules],
    modelPanelTab: cloneModelPanelTab,
    modelScenes: [...selectedCloneModelScenes],
    modelCustomScene: cloneModelCustomScene,
    modelGender: cloneModelGender,
    modelAge: cloneModelAge,
    modelEthnicity: cloneModelEthnicity,
    modelBody: cloneModelBody,
    modelAppearance: cloneModelAppearance,
    videoQuality: cloneVideoQuality,
    videoDurationSeconds: cloneVideoDuration,
    videoSmart: cloneVideoSmart,
    referenceMode: cloneReferenceMode,
    replicateLevel: cloneReplicateLevel,
    requirement,
  });

  const persistLatestCloneSetting = () => {
    const snapshot = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest");
    latestCloneSettingRef.current = snapshot;
    writeCloneLatestSetting(snapshot);
    return snapshot;
  };

  const applyCloneSavedSetting = (setting: CloneSavedSetting) => {
    const nextCounts = {
      selling: Number.isFinite(setting.setCounts?.selling) ? setting.setCounts.selling : defaultCloneSetCounts.selling,
      white: Number.isFinite(setting.setCounts?.white) ? setting.setCounts.white : defaultCloneSetCounts.white,
      scene: Number.isFinite(setting.setCounts?.scene) ? setting.setCounts.scene : defaultCloneSetCounts.scene,
    };
    const nextPlatform = normalizePlatform(setting.platform);
    const nextMarket = normalizeMarket(setting.market);
    const nextOutput = cloneOutputOptions.some((option) => option.key === setting.output) ? setting.output : "detail";
    setCloneOutput(nextOutput);
    setPlatform(nextPlatform);
    setMarket(nextMarket);
    setLanguage(normalizeLanguageForPlatform(nextPlatform, nextMarket, setting.language));
    setRatio(normalizeRatioForPlatform(nextPlatform, setting.ratio, nextOutput));
    setCloneSetCounts(nextCounts);
    setSelectedCloneDetailModules(setting.detailModules?.length ? setting.detailModules : defaultCloneDetailModuleIds);
    setCloneModelPanelTab(setting.modelPanelTab === "model" ? "model" : "scene");
    setSelectedCloneModelScenes(normalizeCloneModelSceneSelection(setting.modelScenes));
    setCloneModelCustomScene(setting.modelCustomScene ?? "");
    setCloneModelGender(tryOnModelOptions.gender.includes(setting.modelGender) ? setting.modelGender : tryOnModelOptions.gender[0]);
    setCloneModelAge(tryOnModelOptions.age.includes(setting.modelAge) ? setting.modelAge : tryOnModelOptions.age[0]);
    setCloneModelEthnicity(
      tryOnModelOptions.ethnicity.includes(setting.modelEthnicity) ? setting.modelEthnicity : tryOnModelOptions.ethnicity[0],
    );
    setCloneModelBody(tryOnModelOptions.body.includes(setting.modelBody) ? setting.modelBody : tryOnModelOptions.body[0]);
    setCloneModelAppearance(setting.modelAppearance ?? "");
    setCloneVideoQuality(
      cloneVideoQualityOptions.some((option) => option.key === setting.videoQuality) ? setting.videoQuality : "high",
    );
    setCloneVideoDuration(clampCloneVideoDuration(setting.videoDurationSeconds));
    setCloneVideoSmart(Boolean(setting.videoSmart));
    setCloneReferenceMode(setting.referenceMode === "link" ? "link" : "upload");
    setCloneReplicateLevel(setting.replicateLevel === "style" ? "style" : "high");
    setRequirement((setting.requirement ?? "").slice(0, 500));
    setCloneSettingName(setting.name);
    latestCloneSettingRef.current = setting;
    writeCloneLatestSetting(setting);
  };

  useEffect(() => {
    latestCloneSettingRef.current = createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest");
  });

  useEffect(() => {
    const latestSetting = readCloneLatestSetting();
    if (!latestSetting) return;
    skipNextCloneAutoSaveRef.current = true;
    applyCloneSavedSetting(latestSetting);
  }, []);

  useEffect(() => {
    setProductSetRatio((current) => normalizeRatioForPlatform(productSetPlatform, current, productSetOutput));
  }, [productSetOutput, productSetPlatform]);

  useEffect(() => {
    setRatio((current) => {
      const platformRatios = getPlatformRatioOptions(platform, cloneOutput);
      const availableRatios = hotUploadedRatioOption ? getUniqueRatioOptions([...platformRatios, hotUploadedRatioOption]) : platformRatios;
      if (current.startsWith("上传图片") && hotUploadedRatioOption) return hotUploadedRatioOption;
      if (availableRatios.includes(current)) return current;
      const normalizedRatio = normalizeRatioToken(current);
      const matchedRatio = availableRatios.find((option) => normalizeRatioToken(option).includes(normalizedRatio));
      return matchedRatio ?? getPlatformDefaultRatio(platform, cloneOutput);
    });
  }, [cloneOutput, hotUploadedRatioOption, platform]);

  useEffect(() => {
    if (skipInitialCloneAutoSaveRef.current) {
      skipInitialCloneAutoSaveRef.current = false;
      return undefined;
    }
    if (skipNextCloneAutoSaveRef.current) {
      skipNextCloneAutoSaveRef.current = false;
      return undefined;
    }

    const timeoutId = window.setTimeout(() => {
      persistLatestCloneSetting();
    }, 300);

    return () => window.clearTimeout(timeoutId);
  }, [
    activeTool,
    cloneOutput,
    platform,
    market,
    language,
    ratio,
    cloneSetCounts,
    selectedCloneDetailModules,
    cloneModelPanelTab,
    selectedCloneModelScenes,
    cloneModelCustomScene,
    cloneModelGender,
    cloneModelAge,
    cloneModelEthnicity,
    cloneModelBody,
    cloneModelAppearance,
    cloneVideoQuality,
    cloneVideoDuration,
    cloneVideoSmart,
    cloneReferenceMode,
    cloneReplicateLevel,
    requirement,
    cloneSettingName,
  ]);

  useEffect(() => {
    const persistSnapshot = () => {
      if (latestCloneSettingRef.current) writeCloneLatestSetting(latestCloneSettingRef.current);
    };
    const handleVisibilityChange = () => {
      if (document.visibilityState === "hidden") persistSnapshot();
    };

    window.addEventListener("pagehide", persistSnapshot);
    document.addEventListener("visibilitychange", handleVisibilityChange);

    return () => {
      persistSnapshot();
      window.removeEventListener("pagehide", persistSnapshot);
      document.removeEventListener("visibilitychange", handleVisibilityChange);
    };
  }, []);

  useEffect(() => clearCloneSetCountHold, []);

  useEffect(() => {
    if (!openCloneBasicSelect) return undefined;

    const handlePointerDown = (event: PointerEvent) => {
      const target = event.target;
      if (!(target instanceof Element) || target.closest("[data-clone-basic-select]")) return;
      setOpenCloneBasicSelect(null);
    };
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpenCloneBasicSelect(null);
    };

    document.addEventListener("pointerdown", handlePointerDown);
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("pointerdown", handlePointerDown);
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [openCloneBasicSelect]);

  useEffect(() => {
    if (!openCloneModelSelect) return undefined;

    const handlePointerDown = (event: PointerEvent) => {
      const target = event.target;
      if (!(target instanceof Element) || target.closest("[data-clone-model-select]")) return;
      setOpenCloneModelSelect(null);
      setCloneModelSelectDropUp(false);
    };
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setOpenCloneModelSelect(null);
        setCloneModelSelectDropUp(false);
      }
    };

    document.addEventListener("pointerdown", handlePointerDown);
    document.addEventListener("keydown", handleKeyDown);
    return () => {
      document.removeEventListener("pointerdown", handlePointerDown);
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, [openCloneModelSelect]);

  const handleGarmentUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files?.length) return;
    const uploadedFiles = Array.from(files);
    setGarmentImages((current) => [...current, ...createObjectImageItems(uploadedFiles, 5 - current.length, "garment")].slice(0, 5));
    setTryOnStatus("ready");
    event.target.value = "";
  };

  const handleDetailUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files?.length) return;
    const uploadedFiles = Array.from(files);
    setDetailProductImages((current) => [...current, ...createObjectImageItems(uploadedFiles, 3 - current.length, "detail")].slice(0, 3));
    setDetailStatus("ready");
    event.target.value = "";
  };

  const buildAdVideoConfig = (): AdVideoUserConfig => ({
    platform,
    aspectRatio: ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : "1:1",
    durationSeconds: cloneVideoDuration,
    style: "痛点解决",
    language,
    market,
    needVoiceover: true,
    needSubtitle: true,
    conversionFocus: "conversion",
  });

  const uploadProductImages = async (): Promise<string[]> => {
    const urls: string[] = [];
    for (const item of productImages) {
      try {
        const resp = await fetch(item.src);
        const blob = await resp.blob();
        const dataUrl = await new Promise<string>((resolve, reject) => {
          const reader = new FileReader();
          reader.onload = () => resolve(String(reader.result));
          reader.onerror = () => reject(reader.error);
          reader.readAsDataURL(blob);
        });
        const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType: blob.type });
        urls.push(url);
      } catch {
        // skip images that fail to upload
      }
    }
    return urls;
  };

  const adVideoUploadedUrlsRef = useRef<string[]>([]);

  const handleAdVideoPlan = async () => {
    if (productImages.length === 0 && !requirement.trim()) {
      setAdVideoError("请先上传产品图片或填写商品说明");
      return;
    }
    setAdVideoBusy(true);
    setAdVideoError(null);
    setAdVideoStep("planning");
    try {
      setAdVideoProgress("正在上传产品图片…");
      const imageUrls = await uploadProductImages();
      adVideoUploadedUrlsRef.current = imageUrls;

      setAdVideoProgress("正在分析产品图片…");
      const imageDesc = await analyzeProductImages(imageUrls);

      setAdVideoProgress("正在生成商品理解…");
      const summary = await buildProductSummary(imageDesc, requirement);
      setAdVideoSummary(summary);

      setAdVideoProgress("正在提炼卖点…");
      const selling = await extractSellingPoints(summary);
      setAdVideoSelling(selling);

      const config = buildAdVideoConfig();
      setAdVideoProgress("正在生成广告创意…");
      const creatives = await generateCreativeOptions(selling, config);
      setAdVideoCreatives(creatives);
      const chosen = creatives[0];
      if (!chosen) throw new Error("未能生成有效的广告创意");

      setAdVideoProgress("正在生成视频分镜…");
      const storyboard = await generateStoryboard(chosen, summary, config);
      setAdVideoStoryboard(storyboard);

      setAdVideoProgress("正在生成镜头提示词…");
      const prompts = await generateVideoPrompts(storyboard, summary);
      setAdVideoPrompts(prompts);

      setAdVideoProgress("正在进行合规检查…");
      const compliance = await checkCompliance(summary, selling, storyboard);
      setAdVideoCompliance(compliance);

      setAdVideoStep("planned");
    } catch (err) {
      setAdVideoError(err instanceof Error ? err.message : "广告策划生成失败");
      setAdVideoStep("idle");
    } finally {
      setAdVideoBusy(false);
      setAdVideoProgress("");
    }
  };

  const pollAdVideoTask = async (sceneId: number, taskId: string) => {
    for (let i = 0; i < 150; i++) {
      await new Promise((r) => setTimeout(r, 4000));
      let st;
      try {
        st = await aiGenerationClient.getTaskStatus(taskId);
      } catch {
        continue;
      }
      setAdVideoScenes((prev) =>
        prev.map((s) =>
          s.sceneId === sceneId
            ? { ...s, status: st.status === "cancelled" ? "failed" : st.status, progress: st.progress, resultUrl: st.resultUrl }
            : s,
        ),
      );
      if (st.status === "completed" || st.status === "failed" || st.status === "cancelled") return;
    }
  };

  const handleAdVideoRender = async () => {
    if (!adVideoStoryboard) return;
    setAdVideoStep("rendering");
    setAdVideoError(null);
    const referenceUrl = adVideoUploadedUrlsRef.current[0];
    setAdVideoScenes(
      adVideoStoryboard.scenes.map((s) => ({ sceneId: s.scene_id, status: "idle", progress: 0 })),
    );
    for (const scene of adVideoStoryboard.scenes) {
      const prompt = adVideoPrompts.find((p) => p.scene_id === scene.scene_id);
      const positivePrompt = prompt?.positive_prompt || scene.visual_description;
      const sceneDuration = Number.parseInt(scene.duration, 10) || 5;
      try {
        const { taskId } = await aiGenerationClient.createVideoTask({
          model: "happyhorse-1.0-i2v",
          prompt: positivePrompt,
          ratio: buildAdVideoConfig().aspectRatio,
          duration: sceneDuration,
          imageUrl: referenceUrl,
          referenceUrls: referenceUrl ? [referenceUrl] : undefined,
        });
        setAdVideoScenes((prev) =>
          prev.map((s) => (s.sceneId === scene.scene_id ? { ...s, taskId, status: "pending" } : s)),
        );
        void pollAdVideoTask(scene.scene_id, taskId);
      } catch (err) {
        setAdVideoScenes((prev) =>
          prev.map((s) =>
            s.sceneId === scene.scene_id
              ? { ...s, status: "failed", error: err instanceof Error ? err.message : "提交失败" }
              : s,
          ),
        );
      }
    }
  };

  const renderAdVideoCompliance = () => {
    if (!adVideoCompliance) return null;
    const level = adVideoCompliance.risk_level;
    const canRender = adVideoCompliance.allow_video_generation;
    const rendering = adVideoStep === "rendering";
    return (
      <div className="clone-ai-adwizard__block">
        <span className={`clone-ai-adwizard__risk is-${level}`}>
          合规风险：{level === "low" ? "低" : level === "medium" ? "中" : "高"}
        </span>
        {adVideoCompliance.issues.length > 0 ? (
          <ul className="clone-ai-adwizard__issues">
            {adVideoCompliance.issues.map((issue, i) => (
              <li key={i}>{issue.field}：{issue.problem} → {issue.suggestion}</li>
            ))}
          </ul>
        ) : null}
        <button
          type="button"
          className="clone-ai-adwizard__render"
          disabled={!canRender || rendering}
          onClick={handleAdVideoRender}
        >
          {rendering ? "正在出视频…" : canRender ? "✦ 确认并逐镜头出视频" : "存在高风险，无法生成"}
        </button>
      </div>
    );
  };

  const renderAdVideoPlan = () => {
    if (adVideoStep !== "planned" && adVideoStep !== "rendering") return null;
    return (
      <div className="clone-ai-adwizard__plan-result">
        {adVideoSummary ? (
          <div className="clone-ai-adwizard__block">
            <strong>{adVideoSummary.product_name} · {adVideoSummary.category}</strong>
            <p>{adVideoSummary.appearance}</p>
            <div className="clone-ai-adwizard__chips">
              {adVideoSummary.selling_points.map((sp, i) => (
                <span key={i}>{sp}</span>
              ))}
            </div>
          </div>
        ) : null}
        {adVideoCreatives[0] ? (
          <div className="clone-ai-adwizard__block">
            <span className="clone-ai-adwizard__label">广告创意：{adVideoCreatives[0].creative_type}</span>
            <p>{adVideoCreatives[0].hook}</p>
          </div>
        ) : null}
        {adVideoStoryboard ? (
          <div className="clone-ai-adwizard__block">
            <span className="clone-ai-adwizard__label">分镜：{adVideoStoryboard.video_title}</span>
            <div className="clone-ai-adwizard__scenes">
              {adVideoStoryboard.scenes.map((scene) => {
                const sceneVideo = adVideoScenes.find((s) => s.sceneId === scene.scene_id);
                return (
                  <div key={scene.scene_id} className="clone-ai-adwizard__scene">
                    <div className="clone-ai-adwizard__scene-head">
                      <span>镜头 {scene.scene_id} · {scene.duration}</span>
                      {sceneVideo ? (
                        <span className={`clone-ai-adwizard__scene-status is-${sceneVideo.status}`}>
                          {sceneVideo.status === "completed"
                            ? "完成"
                            : sceneVideo.status === "failed"
                              ? "失败"
                              : sceneVideo.status === "idle"
                                ? "等待"
                                : `${sceneVideo.progress}%`}
                        </span>
                      ) : null}
                    </div>
                    <p>{scene.visual_description}</p>
                    {sceneVideo?.resultUrl ? (
                      <video src={sceneVideo.resultUrl} controls className="clone-ai-adwizard__scene-video" />
                    ) : null}
                  </div>
                );
              })}
            </div>
          </div>
        ) : null}
        {renderAdVideoCompliance()}
      </div>
    );
  };

  const handleGenerate = () => {
    if (!canGenerate) return;
    setStatus("generating");
    window.setTimeout(() => {
      const stamp = Date.now();
      setResults(
        sampleResults.map((src, index) => ({
          id: `clone-result-${stamp}-${index}`,
          src,
          label: index === 0 ? "高度复刻" : index === 1 ? "参考风格" : "平台适配",
        })),
      );
      setStatus("done");
    }, 900);
  };

  const handleGenerateModel = () => {
    setTryOnStatus("modeling");
    window.setTimeout(() => setTryOnStatus("ready"), 700);
  };

  const handleTryOnGenerate = () => {
    if (!canGenerateTryOn) return;
    setTryOnStatus("generating");
    window.setTimeout(() => {
      setTryOnResultImages([tryOnAssets.tryA, tryOnAssets.tryB, tryOnAssets.hatResultA]);
      setTryOnStatus("done");
    }, 900);
  };

  const toggleScene = (scene: string) => {
    setSelectedScenes((current) =>
      current.includes(scene) ? current.filter((item) => item !== scene) : [...current, scene],
    );
  };

  const toggleDetailModule = (moduleId: string) => {
    setSelectedDetailModules((current) =>
      current.includes(moduleId) ? current.filter((item) => item !== moduleId) : [...current, moduleId],
    );
  };

  const handleSetGenerate = () => {
    if (!canGenerateSet) return;
    setProductSetStatus("generating");
    window.setTimeout(() => setProductSetStatus("done"), 900);
  };

  const openProductSetPreview = (card: { src: string; label: string }) => {
    setSelectedProductSetPreview(card);
  };

  const handleDetailAiWrite = () => {
    setDetailRequirement(
      "1.产品名称：无线降噪蓝牙耳机\n2.核心卖点：主动降噪、24H续航、低延迟连接、舒适佩戴\n3.适用人群：通勤、办公、运动和旅行用户\n4.期望场景：地铁通勤、居家办公、户外运动\n5.具体参数：蓝牙5.3、IPX4防水、快充10分钟使用2小时",
    );
  };

  const handleDetailGenerate = () => {
    if (!canGenerateDetail) return;
    setDetailStatus("generating");
    window.setTimeout(() => setDetailStatus("done"), 900);
  };

  const resetTask = () => {
    setSetImages([]);
    setProductSetRequirement("");
    setProductSetOutput("video");
    setProductSetRatio((current) => normalizeRatioForPlatform(productSetPlatform, current, "video"));
    setProductSetStatus("idle");
    setIsSetUploadDragging(false);
    setSelectedProductSetPreview(null);
    setShowHostingModal(false);
    setProductImages([]);
    setIsProductUploadDragging(false);
    setCloneOutput("detail");
    setRatio((current) => normalizeRatioForPlatform(platform, current, "detail"));
    setCloneSetCounts(defaultCloneSetCounts);
    setSelectedCloneDetailModules(defaultCloneDetailModuleIds);
    setCloneModelPanelTab("scene");
    setSelectedCloneModelScenes([]);
    setCloneModelCustomScene("");
    setCloneModelGender(tryOnModelOptions.gender[0]);
    setCloneModelAge(tryOnModelOptions.age[0]);
    setCloneModelEthnicity(tryOnModelOptions.ethnicity[0]);
    setCloneModelBody(tryOnModelOptions.body[0]);
    setCloneModelAppearance("");
    setCloneVideoQuality("high");
    setCloneVideoDuration(10);
    setCloneVideoSmart(true);
    setCloneReferenceMode("upload");
    setCloneReferenceImages([]);
    setCloneReplicateLevel("high");
    setRequirement("");
    setCloneSettingName("新建创作");
    setResults([]);
    setStatus("idle");
    setGarmentImages([]);
    setAppearance("");
    setSelectedScenes([]);
    setCustomScene("");
    setSmartScene(false);
    setTryOnRatio(tryOnRatioOptions[0]);
    setTryOnStatus("idle");
    setTryOnResultImages([]);
    setDetailProductImages([]);
    setDetailRequirement("");
    setSelectedDetailModules(defaultDetailModuleIds);
    setDetailStatus("idle");
  };

  const activeToolMeta = sideTools.find((tool) => tool.key === activeTool);
  const isSetTool = activeTool === "set";
  const isDetail = activeTool === "detail";
  const isTryOn = activeTool === "wear";
  const isCloneTool = activeTool === "clone";
  const pageLabel = isSetTool ? "商品套图" : isDetail ? "A+/详情页" : isTryOn ? "AI服饰穿戴" : activeToolMeta?.label || "商品工具";
  const setPrimaryLabel =
    setImages.length === 0
      ? `请先上传商品原图`
      : productSetStatus === "generating"
        ? "生成中..."
        : `生成${selectedProductSetOutput.label}`;
  const tryOnPrimaryLabel =
    garmentImages.length === 0 ? "请先上传服装图片" : tryOnStatus === "generating" ? "生成中..." : "生成服饰穿戴图";
  const detailPrimaryLabel =
    detailProductImages.length === 0 ? "请上传产品图" : detailStatus === "generating" ? "生成中..." : "生成A+详情页";
  const clonePrimaryLabel =
    productImages.length === 0 ? "请先上传商品原图" : status === "generating" ? "生成中..." : `生成${selectedCloneOutput.label}`;
  const clonePreviewCards = productSetPreviewCards.map((card, index) => ({
    ...card,
    src: results[index]?.src ?? card.src,
  }));
  const cloneBasicSelects: Array<{
    key: CloneBasicSelectKey;
    label: string;
    value: string;
    options: string[];
    onChange: (value: string) => void;
  }> = [
    { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: handleClonePlatformChange },
    { key: "market", label: "国家", value: market, options: marketOptions, onChange: handleCloneMarketChange },
    { key: "language", label: "语言", value: language, options: cloneLanguageOptions, onChange: setLanguage },
    { key: "ratio", label: "尺寸/比例", value: ratio, options: cloneRatioOptions, onChange: setRatio },
  ];

  const cloneModelSelects: Array<{
    key: CloneModelSelectKey;
    label: string;
    value: string;
    options: string[];
    onChange: (value: string) => void;
  }> = [
    { key: "gender", label: "性别", value: cloneModelGender, options: tryOnModelOptions.gender, onChange: setCloneModelGender },
    { key: "age", label: "年龄", value: cloneModelAge, options: tryOnModelOptions.age, onChange: setCloneModelAge },
    {
      key: "ethnicity",
      label: "人种",
      value: cloneModelEthnicity,
      options: tryOnModelOptions.ethnicity,
      onChange: setCloneModelEthnicity,
    },
    { key: "body", label: "体型", value: cloneModelBody, options: tryOnModelOptions.body, onChange: setCloneModelBody },
  ];

  const setPanel = (
    <>
      <div className="product-clone-panel__scroll">
        <section className="product-clone-field product-set-upload-section">
          <h2>
            上传商品原图
            <CloudUploadOutlined />
          </h2>
          <button
            type="button"
            className={`product-clone-upload-zone product-set-upload${isSetUploadDragging ? " is-dragging" : ""}`}
            onClick={() => setInputRef.current?.click()}
            onDragEnter={(event) => {
              event.preventDefault();
              setIsSetUploadDragging(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={() => setIsSetUploadDragging(false)}
            onDrop={handleSetDrop}
          >
            <span className="product-set-upload-icon">
              <FileImageOutlined />
            </span>
            <span className="product-set-upload-title">拖拽或点击上传</span>
            <strong>
              <span aria-hidden="true">+</span>
              上传图片
            </strong>
            <span className="product-set-upload-note">同一产品，最多 3 张</span>
          </button>
          <input ref={setInputRef} type="file" accept="image/jpeg,image/png,image/webp" multiple onChange={handleSetUpload} />
          {setImages.length ? (
            <div className="product-clone-thumb-row product-set-thumb-row" aria-label="已上传商品原图">
              {setImages.map((item) => (
                <figure key={item.id} className="product-set-thumb">
                  <img src={item.src} alt={item.name} />
                  <span className="uploaded-image-zoom" aria-hidden="true">
                    <img src={item.src} alt="" />
                  </span>
                  <button type="button" onClick={() => removeSetImage(item.id)} aria-label={`删除${item.name}`}>
                    <CloseOutlined />
                  </button>
                </figure>
              ))}
            </div>
          ) : null}
        </section>

        <section className="product-clone-field product-set-settings-section">
          <h2>
            生成设置
            <SettingOutlined />
          </h2>
          <div className="product-set-setting-block">
            <span className="product-set-setting-title">生成内容</span>
            <div className="product-set-output-grid" role="radiogroup" aria-label="生成内容">
              {productSetOutputOptions.map((option) => (
                <button
                  key={option.key}
                  type="button"
                  className={productSetOutput === option.key ? "is-active" : ""}
                  aria-pressed={productSetOutput === option.key}
                  onClick={() => handleProductSetOutputChange(option.key)}
                >
                  {option.label}
                </button>
              ))}
            </div>
          </div>
          <div className="product-set-setting-block">
            <span className="product-set-setting-title">基础设置</span>
            <div className="product-set-field-grid">
              <label>
                <span>平台</span>
                <select value={productSetPlatform} onChange={(event) => handleProductSetPlatformChange(event.target.value)}>
                  {platformOptions.map((item) => (
                    <option key={item}>{item}</option>
                  ))}
                </select>
              </label>
              <label>
                <span>国家</span>
                <select value={productSetMarket} onChange={(event) => handleProductSetMarketChange(event.target.value)}>
                  {marketOptions.map((item) => (
                    <option key={item}>{item}</option>
                  ))}
                </select>
              </label>
              <label>
                <span>语言</span>
                <select value={productSetLanguage} onChange={(event) => setProductSetLanguage(event.target.value)}>
                  {productSetLanguageOptions.map((item) => (
                    <option key={item}>{item}</option>
                  ))}
                </select>
              </label>
              <label>
                <span>尺寸/比例</span>
                <select
                  value={productSetRatio}
                  onChange={(event) => setProductSetRatio(event.target.value)}
                  disabled={productSetRatioOptions.length <= 1}
                >
                  {productSetRatioOptions.map((item) => (
                    <option key={item} value={item}>{formatRatioDisplayValue(item)}</option>
                  ))}
                </select>
              </label>
            </div>
          </div>
        </section>
      </div>
    </>
  );

  const clonePanel = (
    <>
      <div className="product-clone-panel__scroll clone-ai-panel">
        <header className="clone-ai-logo">
          <span className="clone-ai-logo__mark">AI</span>
          <strong>电商生成</strong>
        </header>

        <section className="clone-ai-card">
          <h2>
            <CloudUploadOutlined />
            上传商品原图
          </h2>
          <div
            role="button"
            tabIndex={0}
            className={`clone-ai-upload-zone${isProductUploadDragging ? " is-dragging" : ""}`}
            onClick={() => productInputRef.current?.click()}
            onKeyDown={(event) => {
              if (event.target !== event.currentTarget) return;
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                productInputRef.current?.click();
              }
            }}
            onDragEnter={(event) => {
              event.preventDefault();
              setIsProductUploadDragging(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={() => setIsProductUploadDragging(false)}
            onDrop={handleProductDrop}
          >
            <div className="clone-ai-upload-main">
              <span className="clone-ai-upload-icon">
                <FileImageOutlined />
              </span>
              <span className="clone-ai-upload-title">拖拽或点击上传</span>
              <strong>
                <span aria-hidden="true">+</span>
                上传图片
              </strong>
              <span className="clone-ai-upload-hint">同一产品，最多 7 张</span>
            </div>
            {productImages.length ? (
              <div className="clone-ai-uploaded-files" aria-label="已上传商品原图">
                {productImages.map((item) => (
                  <figure key={item.id} className="clone-ai-uploaded-file">
                    <img src={item.src} alt={item.name} />
                    <span className="uploaded-image-zoom" aria-hidden="true">
                      <img src={item.src} alt="" />
                    </span>
                    <button
                      type="button"
                      onClick={(event) => {
                        event.stopPropagation();
                        removeProductImage(item.id);
                      }}
                      aria-label={`删除${item.name}`}
                    >
                      <CloseOutlined />
                    </button>
                  </figure>
                ))}
              </div>
            ) : null}
          </div>
          <input ref={productInputRef} type="file" accept="image/*" multiple onChange={handleProductUpload} />
        </section>

        <section className="clone-ai-card">
          <h2>
            <SettingOutlined />
            生成设置
          </h2>
          <div className="clone-ai-settings-section">
            <span className="clone-ai-settings-label">生成内容</span>
            <div className="clone-ai-tag-group" role="radiogroup" aria-label="生成内容">
              {cloneOutputOptions.map((option) => (
                <button
                  key={option.key}
                  type="button"
                  className={cloneOutput === option.key ? "is-active" : ""}
                  aria-pressed={cloneOutput === option.key}
                  onClick={() => handleCloneOutputChange(option.key)}
                >
                  {option.label}
                </button>
              ))}
            </div>
          </div>
          <div className="clone-ai-settings-section">
            <span className="clone-ai-settings-label">基础设置</span>
            <div className="clone-ai-select-group">
              {cloneBasicSelects.map((item) => {
                const hasMultipleOptions = item.options.length > 1;
                const isOpen = hasMultipleOptions && openCloneBasicSelect === item.key;
                return (
                  <div key={item.key} className="clone-ai-basic-select" data-clone-basic-select>
                    <button
                      type="button"
                      className={`${isOpen ? "is-open" : ""}${hasMultipleOptions ? "" : " is-static"}`}
                      aria-expanded={hasMultipleOptions ? isOpen : undefined}
                      aria-haspopup={hasMultipleOptions ? "listbox" : undefined}
                      aria-controls={hasMultipleOptions ? `clone-basic-select-${item.key}` : undefined}
                      onClick={() => setOpenCloneBasicSelect(hasMultipleOptions ? (isOpen ? null : item.key) : null)}
                    >
                      <span>{item.label}</span>
                      <strong>{item.key === "ratio" ? formatRatioDisplayValue(item.value) : item.value}</strong>
                      {hasMultipleOptions ? <i aria-hidden="true" /> : null}
                    </button>
                    {hasMultipleOptions && isOpen ? (
                      <div id={`clone-basic-select-${item.key}`} className="clone-ai-basic-select__menu" role="listbox">
                        {item.options.map((option) => (
                          <button
                            key={option}
                            type="button"
                            className={item.value === option ? "is-active" : ""}
                            role="option"
                            aria-selected={item.value === option}
                            onClick={() => {
                              item.onChange(option);
                              setOpenCloneBasicSelect(null);
                            }}
                          >
                            {item.key === "ratio" ? formatRatioDisplayValue(option) : option}
                          </button>
                        ))}
                      </div>
                    ) : null}
                  </div>
                );
              })}
            </div>
          </div>
        </section>

        {cloneOutput === "hot" ? (
          <section className="clone-ai-replicate-panel" aria-label="爆款图复刻设置">
            <div className="clone-ai-replicate-section">
              <span className="clone-ai-replicate-title">参考内容</span>
              <div className="clone-ai-replicate-tabs" role="tablist" aria-label="参考内容来源">
                <button
                  type="button"
                  className={cloneReferenceMode === "upload" ? "is-active" : ""}
                  aria-selected={cloneReferenceMode === "upload"}
                  onClick={() => setCloneReferenceMode("upload")}
                >
                  上传参考图
                </button>
                <button
                  type="button"
                  className={cloneReferenceMode === "link" ? "is-active" : ""}
                  aria-selected={cloneReferenceMode === "link"}
                  onClick={() => setCloneReferenceMode("link")}
                >
                  导入链接
                </button>
              </div>
              {cloneReferenceMode === "upload" ? (
                <button type="button" className="clone-ai-replicate-upload" onClick={() => cloneReferenceInputRef.current?.click()}>
                  <span>
                    <CloudUploadOutlined />
                    <span className="clone-ai-replicate-upload-text">添加图片</span>
                  </span>
                  <em>{cloneReferenceImages.length ? `已选 ${cloneReferenceImages.length}/${maxCloneReferenceImages}` : `最多 ${maxCloneReferenceImages} 张`}</em>
                  {cloneReferenceImages.length ? (
                    <div className="clone-ai-replicate-preview" aria-hidden="true">
                      {cloneReferenceImages.slice(0, 4).map((item) => (
                        <figure key={item.id}>
                          <img src={item.src} alt="" />
                          <span className="uploaded-image-zoom">
                            <img src={item.src} alt="" />
                          </span>
                        </figure>
                      ))}
                      {cloneReferenceImages.length > 4 ? <b>+{cloneReferenceImages.length - 4}</b> : null}
                    </div>
                  ) : null}
                </button>
              ) : (
                <label className="clone-ai-replicate-link">
                  <input placeholder="粘贴商品图或详情页链接" />
                </label>
              )}
              <input
                ref={cloneReferenceInputRef}
                type="file"
                accept="image/jpeg,image/png,image/webp"
                multiple
                onChange={handleCloneReferenceUpload}
              />
            </div>
            <div className="clone-ai-replicate-section">
              <span className="clone-ai-replicate-title">复刻程度</span>
              <div className="clone-ai-replicate-levels" role="radiogroup" aria-label="复刻程度">
                {cloneReplicateLevelOptions.map((option) => (
                  <button
                    key={option.key}
                    type="button"
                    className={cloneReplicateLevel === option.key ? "is-active" : ""}
                    aria-pressed={cloneReplicateLevel === option.key}
                    onClick={() => setCloneReplicateLevel(option.key)}
                  >
                    <strong>{option.title}</strong>
                    <span>{option.desc}</span>
                  </button>
                ))}
              </div>
            </div>
          </section>
        ) : null}

        {cloneOutput === "set" ? (
          <section className="clone-ai-count-panel" aria-label="套图图片数量">
            <p>可自由调整各类型图片数量，总数 1-16 张</p>
            <div className="clone-ai-count-list">
              {cloneSetCountOptions.map((item) => {
                const count = cloneSetCounts[item.key];
                const decrementDisabled = count <= 0 || cloneSetTotal <= minCloneSetTotal;
                const incrementDisabled = cloneSetTotal >= maxCloneSetTotal;
                return (
                  <div key={item.key} className="clone-ai-count-row">
                    <div className="clone-ai-count-copy">
                      <strong>{item.title}</strong>
                      <span>{item.desc}</span>
                    </div>
                    <div className="clone-ai-count-stepper" aria-label={`${item.title}数量`}>
                      <button
                        type="button"
                        disabled={decrementDisabled}
                        onPointerDown={(event) => {
                          event.preventDefault();
                          startCloneSetCountHold(item.key, -1, decrementDisabled);
                        }}
                        onPointerUp={clearCloneSetCountHold}
                        onPointerLeave={clearCloneSetCountHold}
                        onPointerCancel={clearCloneSetCountHold}
                        onBlur={clearCloneSetCountHold}
                        aria-label={`减少${item.title}`}
                      >
                        -
                      </button>
                      <b>{count}</b>
                      <button
                        type="button"
                        disabled={incrementDisabled}
                        onPointerDown={(event) => {
                          event.preventDefault();
                          startCloneSetCountHold(item.key, 1, incrementDisabled);
                        }}
                        onPointerUp={clearCloneSetCountHold}
                        onPointerLeave={clearCloneSetCountHold}
                        onPointerCancel={clearCloneSetCountHold}
                        onBlur={clearCloneSetCountHold}
                        aria-label={`增加${item.title}`}
                      >
                        +
                      </button>
                    </div>
                  </div>
                );
              })}
            </div>
          </section>
        ) : null}

        {cloneOutput === "detail" ? (
          <section className="clone-ai-module-panel" aria-label="详情图包含模块">
            <p>
              包含模块（多选）
              <QuestionCircleOutlined />
            </p>
            <div className="clone-ai-module-list">
              {cloneDetailModules.map((module) => {
                const isSelected = selectedCloneDetailModules.includes(module.id);
                return (
                  <button
                    key={module.id}
                    type="button"
                    className={isSelected ? "is-active" : ""}
                    aria-pressed={isSelected}
                    onClick={() => toggleCloneDetailModule(module.id)}
                  >
                    <strong>{module.title}</strong>
                    <span>{module.desc}</span>
                  </button>
                );
              })}
            </div>
          </section>
        ) : null}

        {cloneOutput === "model" ? (
          <section className="clone-ai-model-panel" aria-label="模特图设置">
            <div className="clone-ai-model-tabs" role="tablist" aria-label="模特图设置类型">
              <button
                type="button"
                className={cloneModelPanelTab === "scene" ? "is-active" : ""}
                aria-selected={cloneModelPanelTab === "scene"}
                onClick={() => setCloneModelPanelTab("scene")}
              >
                拍摄场景
              </button>
              <button
                type="button"
                className={cloneModelPanelTab === "model" ? "is-active" : ""}
                aria-selected={cloneModelPanelTab === "model"}
                onClick={() => setCloneModelPanelTab("model")}
              >
                模特形象
              </button>
            </div>
            <div className="clone-ai-model-scroll">
              {cloneModelPanelTab === "scene" ? (
                <div className="clone-ai-model-scenes">
                  <div className="clone-ai-model-scene-grid">
                    {tryOnScenes.map((scene) => {
                      const isSelected = selectedCloneModelScenes.includes(scene);
                      return (
                        <button
                          key={scene}
                          type="button"
                          className={isSelected ? "is-active" : ""}
                          aria-pressed={isSelected}
                          onClick={() => toggleCloneModelScene(scene)}
                        >
                          <span aria-hidden="true" />
                          {scene}
                        </button>
                      );
                    })}
                  </div>
                  <label className="clone-ai-model-textarea">
                    <strong>或自定义描述场景（可选）</strong>
                    <textarea
                      value={cloneModelCustomScene}
                      onChange={(event) => setCloneModelCustomScene(event.target.value)}
                      placeholder="描述你想要的场景：如秋季枫叶小径、暖色调午后阳光、模特倚靠树干..."
                    />
                  </label>
                </div>
              ) : (
                <div className="clone-ai-model-profile">
                  <div className="clone-ai-model-select-grid">
                    {cloneModelSelects.map((item) => {
                      const isOpen = openCloneModelSelect === item.key;
                      return (
                        <div
                          key={item.key}
                          className={`clone-ai-model-select${isOpen ? " is-open" : ""}${
                            isOpen && cloneModelSelectDropUp ? " is-drop-up" : ""
                          }`}
                          data-clone-model-select
                        >
                          <span>{item.label}</span>
                          <button
                            type="button"
                            className={isOpen ? "is-open" : ""}
                            aria-expanded={isOpen}
                            aria-haspopup="listbox"
                            aria-controls={`clone-model-select-${item.key}`}
                            onClick={(event) => {
                              setOpenCloneBasicSelect(null);
                              if (!isOpen) {
                                event.currentTarget.scrollIntoView({ block: "center", inline: "nearest" });
                                const triggerRect = event.currentTarget.getBoundingClientRect();
                                const scrollRect = event.currentTarget.closest(".clone-ai-model-scroll")?.getBoundingClientRect();
                                const lowerBoundary = Math.min(window.innerHeight, scrollRect?.bottom ?? window.innerHeight);
                                const upperBoundary = Math.max(0, scrollRect?.top ?? 0);
                                const estimatedMenuHeight = Math.min(150, item.options.length * 36 + 12);
                                const belowSpace = lowerBoundary - triggerRect.bottom;
                                const aboveSpace = triggerRect.top - upperBoundary;
                                setCloneModelSelectDropUp(belowSpace < estimatedMenuHeight && aboveSpace > belowSpace);
                              } else {
                                setCloneModelSelectDropUp(false);
                              }
                              setOpenCloneModelSelect(isOpen ? null : item.key);
                            }}
                          >
                            <strong>{item.value}</strong>
                            <i aria-hidden="true" />
                          </button>
                          {isOpen ? (
                            <div id={`clone-model-select-${item.key}`} className="clone-ai-model-select__menu" role="listbox">
                              {item.options.map((option) => (
                                <button
                                  key={option}
                                  type="button"
                                  className={item.value === option ? "is-active" : ""}
                                  role="option"
                                  aria-selected={item.value === option}
                                  onClick={() => {
                                    item.onChange(option);
                                    setOpenCloneModelSelect(null);
                                    setCloneModelSelectDropUp(false);
                                  }}
                                >
                                  {option}
                                </button>
                              ))}
                            </div>
                          ) : null}
                        </div>
                      );
                    })}
                  </div>
                  <label className="clone-ai-model-textarea">
                    <strong>外貌细节（可选）</strong>
                    <textarea
                      value={cloneModelAppearance}
                      onChange={(event) => setCloneModelAppearance(event.target.value)}
                      placeholder="例如：小麦色皮肤、齐刘海、眼角有泪痣..."
                    />
                  </label>
                </div>
              )}
            </div>
          </section>
        ) : null}

        {cloneOutput === "video" ? (
          <section className="clone-ai-video-panel" aria-label="短视频设置">
            <div className="clone-ai-video-section">
              <span className="clone-ai-video-title">视频画质</span>
              <div className="clone-ai-video-options">
                {cloneVideoQualityOptions.map((option) => (
                  <button
                    key={option.key}
                    type="button"
                    className={cloneVideoQuality === option.key ? "is-active" : ""}
                    aria-pressed={cloneVideoQuality === option.key}
                    onClick={() => setCloneVideoQuality(option.key)}
                  >
                    <strong>{option.label}</strong>
                    <span>{option.desc}</span>
                  </button>
                ))}
              </div>
            </div>
            <div className="clone-ai-video-section">
              <div className="clone-ai-video-title-row">
                <span className="clone-ai-video-title">时间设置</span>
                <strong>{cloneVideoDuration}秒</strong>
              </div>
              <div className="clone-ai-duration-control" style={cloneVideoDurationStyle}>
                <input
                  type="range"
                  min={cloneVideoDurationMin}
                  max={cloneVideoDurationMax}
                  step={1}
                  value={cloneVideoDuration}
                  onChange={(event) => setCloneVideoDuration(clampCloneVideoDuration(Number(event.target.value)))}
                  aria-label="短视频时长"
                />
                <div className="clone-ai-duration-scale" aria-hidden="true">
                  <span>5秒</span>
                  <span>10秒</span>
                  <span>15秒</span>
                </div>
              </div>
            </div>
            <button
              type="button"
              className={`clone-ai-video-smart${cloneVideoSmart ? " is-on" : ""}`}
              aria-pressed={cloneVideoSmart}
              onClick={() => setCloneVideoSmart((current) => !current)}
            >
              <span>
                <strong>智能选择</strong>
                <em>根据平台、商品图和尺寸自动匹配推荐参数</em>
              </span>
              <i aria-hidden="true" />
            </button>
          </section>
        ) : null}

        <button type="button" className="clone-ai-generate" disabled={!canGenerate || cloneOutput === "video"} onClick={handleGenerate} style={cloneOutput === "video" ? { display: "none" } : undefined}>
          {status === "generating" ? <LoadingOutlined /> : null}
          {status === "generating" ? "生成中..." : "✦ 开始生成"}
        </button>
      </div>
    </>
  );

  const detailPanel = (
    <>
      <div className="product-clone-panel__scroll">
        <section className="product-clone-field">
          <h2>
            商品原图
            <QuestionCircleOutlined />
          </h2>
          <button type="button" className="product-clone-upload-zone product-detail-upload" onClick={() => detailInputRef.current?.click()}>
            <strong>
              <CloudUploadOutlined />
              上传图片
            </strong>
            <span>同一产品，最多3张。</span>
          </button>
          <input ref={detailInputRef} type="file" accept="image/*" multiple onChange={handleDetailUpload} />
          {detailProductImages.length ? (
            <div className="product-clone-thumb-row" aria-label="已上传商品原图">
              {detailProductImages.map((item) => (
                <figure key={item.id} className="product-clone-uploaded-thumb">
                  <img src={item.src} alt={item.name} />
                  <span className="uploaded-image-zoom" aria-hidden="true">
                    <img src={item.src} alt="" />
                  </span>
                </figure>
              ))}
            </div>
          ) : null}
        </section>

        <section className="product-clone-field">
          <h2>生成设置</h2>
          <div className="product-detail-settings-grid">
            <select value={detailPlatform} onChange={(event) => handleDetailPlatformChange(event.target.value)}>
              {platformOptions.map((item) => (
                <option key={item}>{item}</option>
              ))}
            </select>
            <select value={detailMarket} onChange={(event) => handleDetailMarketChange(event.target.value)}>
              {marketOptions.map((item) => (
                <option key={item}>{item}</option>
              ))}
            </select>
            <select value={detailLanguage} onChange={(event) => setDetailLanguage(event.target.value)}>
              {detailLanguageOptions.map((item) => (
                <option key={item}>{item}</option>
              ))}
            </select>
            <select value={detailType} onChange={(event) => setDetailType(event.target.value)}>
              {detailTypeOptions.map((item) => (
                <option key={item}>{item}</option>
              ))}
            </select>
          </div>
        </section>

        <section className="product-clone-field product-detail-requirement">
          <h2>
            商品卖点&要求
            <QuestionCircleOutlined />
            <button
              type="button"
              onClick={(event) => {
                event.preventDefault();
                event.stopPropagation();
                handleDetailAiWrite();
              }}
            >
              AI 帮写
            </button>
          </h2>
          <textarea
            value={detailRequirement}
            onChange={(event) => setDetailRequirement(event.target.value)}
            placeholder={"建议包含以下信息生成更精准：\n1.产品名称\n2.核心卖点\n3.适用人群\n4.期望场景\n5.具体参数"}
          />
        </section>

        <section className="product-clone-field">
          <h2>
            包含模块（多选）
            <QuestionCircleOutlined />
          </h2>
          <div className="product-detail-module-grid">
            {detailModules.map((module) => (
              <button
                key={module.id}
                type="button"
                className={selectedDetailModules.includes(module.id) ? "is-active" : ""}
                onClick={() => toggleDetailModule(module.id)}
              >
                <strong>{module.title}</strong>
                <span>{module.desc}</span>
              </button>
            ))}
          </div>
        </section>
      </div>

      <footer className="product-clone-panel__footer">
        <button type="button" className="product-clone-primary" disabled={!canGenerateDetail} onClick={handleDetailGenerate}>
          {detailStatus === "generating" ? <LoadingOutlined /> : null}
          {detailPrimaryLabel}
        </button>
      </footer>
    </>
  );

  const tryOnPanel = (
    <>
      <div className="product-clone-panel__scroll">
        <section className="product-clone-field">
          <h2>服装图片</h2>
          <button type="button" className="product-clone-upload-zone product-try-on-upload" onClick={() => garmentInputRef.current?.click()}>
            <strong>
              <CloudUploadOutlined />
              服装图片
            </strong>
            <span>整套搭配或同一件服装不同角度图，最多5张。</span>
          </button>
          <input ref={garmentInputRef} type="file" accept="image/*" multiple onChange={handleGarmentUpload} />
          {garmentImages.length ? (
            <div className="product-clone-thumb-row product-try-on-thumb-row" aria-label="已上传服装图片">
              {garmentImages.map((item) => (
                <figure key={item.id} className="product-clone-uploaded-thumb">
                  <img src={item.src} alt={item.name} />
                  <span className="uploaded-image-zoom" aria-hidden="true">
                    <img src={item.src} alt="" />
                  </span>
                </figure>
              ))}
            </div>
          ) : null}
        </section>

        <section className="product-clone-field">
          <h2>模特形象</h2>
          <div className="product-clone-segment" role="tablist" aria-label="模特来源">
            <button type="button" className={modelSource === "ai" ? "is-active" : ""} onClick={() => setModelSource("ai")}>
              AI 生成
            </button>
            <button type="button" className={modelSource === "library" ? "is-active" : ""} onClick={() => setModelSource("library")}>
              模特库
              <QuestionCircleOutlined />
            </button>
          </div>
          {modelSource === "ai" ? (
            <>
              <div className="product-clone-model-grid">
                <select value={modelGender} onChange={(event) => setModelGender(event.target.value)}>
                  {tryOnModelOptions.gender.map((item) => (
                    <option key={item}>{item}</option>
                  ))}
                </select>
                <select value={modelAge} onChange={(event) => setModelAge(event.target.value)}>
                  {tryOnModelOptions.age.map((item) => (
                    <option key={item}>{item}</option>
                  ))}
                </select>
                <select value={modelEthnicity} onChange={(event) => setModelEthnicity(event.target.value)}>
                  {tryOnModelOptions.ethnicity.map((item) => (
                    <option key={item}>{item}</option>
                  ))}
                </select>
                <select value={modelBody} onChange={(event) => setModelBody(event.target.value)}>
                  {tryOnModelOptions.body.map((item) => (
                    <option key={item}>{item}</option>
                  ))}
                </select>
              </div>
              <label className="product-try-on-textarea-label">
                <span>外貌细节（可选）</span>
                <textarea
                  value={appearance}
                  onChange={(event) => setAppearance(event.target.value)}
                  placeholder="例如：小麦色皮肤、齐刘海、眼角有泪痣..."
                />
              </label>
              <button type="button" className="product-clone-model-button" onClick={handleGenerateModel} disabled={tryOnStatus === "modeling"}>
                {tryOnStatus === "modeling" ? <LoadingOutlined /> : null}
                {tryOnStatus === "modeling" ? "生成中..." : "生成基准模特"}
              </button>
            </>
          ) : (
            <div className="product-try-on-library" aria-label="模特库">
              {[tryOnAssets.modelWoman, tryOnAssets.modelMan, tryOnAssets.modelAsian].map((src, index) => (
                <button key={src} type="button" className={index === 0 ? "is-active" : ""}>
                  <img src={src} alt={`模特 ${index + 1}`} />
                </button>
              ))}
            </div>
          )}
        </section>

        <section className="product-clone-field">
          <h2>拍摄场景</h2>
          <div className="product-clone-scene-grid">
            {tryOnScenes.map((scene) => (
              <button
                key={scene}
                type="button"
                className={selectedScenes.includes(scene) ? "is-active" : ""}
                onClick={() => toggleScene(scene)}
              >
                <span aria-hidden="true" />
                {scene}
              </button>
            ))}
          </div>
        </section>

        <label className="product-clone-field product-try-on-scene-field">
          <h2>或自定义描述场景（可选）</h2>
          <textarea
            value={customScene}
            onChange={(event) => setCustomScene(event.target.value)}
            placeholder="描述你想要的场景：如秋季枫叶小径、暖色调午后阳光、模特倚靠树干..."
          />
        </label>

        <section className="product-clone-field">
          <button type="button" className="product-clone-switch-row" onClick={() => setSmartScene((current) => !current)}>
            <span>
              <strong>智能推荐场景</strong>
              <em>根据服装自动匹配最佳场景</em>
            </span>
            <span className={`product-clone-switch${smartScene ? " is-on" : ""}`} role="switch" aria-checked={smartScene}>
              <span />
            </span>
          </button>
        </section>

        <section className="product-clone-field">
          <h2>图片比例</h2>
          <div className="product-clone-ratio-row">
            {tryOnRatioOptions.map((item) => (
              <button key={item} type="button" className={tryOnRatio === item ? "is-active" : ""} onClick={() => setTryOnRatio(item)}>
                {item}
              </button>
            ))}
          </div>
        </section>
      </div>

      <footer className="product-clone-panel__footer">
        <button type="button" className="product-clone-primary" disabled={!canGenerateTryOn} onClick={handleTryOnGenerate}>
          {tryOnStatus === "generating" ? <LoadingOutlined /> : null}
          {tryOnPrimaryLabel}
        </button>
      </footer>
    </>
  );

  const placeholderPanel = (
    <>
      <div className="product-clone-panel__scroll">
        <section className="product-clone-empty-panel">
          <span>{activeToolMeta?.icon}</span>
          <h2>{activeToolMeta?.label}</h2>
          <p>该工具页面正在接入，当前可使用电商AI作图、商品套图、A+详情与服饰穿戴。</p>
        </section>
      </div>
      <footer className="product-clone-panel__footer">
        <button type="button" className="product-clone-primary" disabled>
          暂未开放
        </button>
      </footer>
    </>
  );

  const setPreview = (
    <main className="product-clone-preview product-clone-preview--set" aria-label="AI商品套图预览">
      <div className="product-clone-preview__headline">
        <h1>预览</h1>
        <p>
          上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的高转化率商品套图。
        </p>
      </div>

      {productSetPreviewReady ? (
        <section className="product-set-demo-board">
          <button
            type="button"
            className="product-set-main-card"
            onClick={() => openProductSetPreview(productSetPreviewCards[0])}
          >
            <img src={productSetPreviewCards[0].src} alt="01 主图" />
            <span>{productSetPreviewCards[0].label}</span>
          </button>
          <div className="product-set-flow-arrow" aria-hidden="true" />
          <div className="product-set-card-grid">
            {productSetPreviewCards.slice(1).map((card) => (
              <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                <img src={card.src} alt={card.label} />
                <span>{card.label}</span>
              </button>
            ))}
          </div>
        </section>
      ) : (
        <section className="product-set-empty-preview" aria-live="polite">
          {productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
          <strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
          <span>{productSetStatus === "generating" ? "AI 正在整理主图、场景、细节与卖点图。" : "上传商品原图并填写信息后，AI 将为您生成专业的电商商品图"}</span>
        </section>
      )}

      {productSetStatus === "done" ? <p className="product-set-generated-note">已生成{selectedProductSetOutput.label}预览</p> : null}

      <section className="product-set-floating-detail" aria-label="信息详情">
        <div className="product-set-floating-detail__head">
          <strong>信息详情</strong>
          <span>{productSetRequirement.length}/500</span>
        </div>
        <textarea
          value={productSetRequirement}
          onChange={(event) => setProductSetRequirement(event.target.value)}
          maxLength={500}
          placeholder="建议包含以下信息：产品名称、核心卖点、期望场景、具体参数"
        />
        <button type="button" className="product-set-floating-submit" disabled={!canGenerateSet} onClick={handleSetGenerate}>
          {productSetStatus === "generating" ? <LoadingOutlined /> : null}
          {setPrimaryLabel}
        </button>
      </section>

      <button type="button" className="product-clone-help" aria-label="帮助">
        <QuestionCircleOutlined />
      </button>
    </main>
  );

  const clonePreview = (
    <main className="product-clone-preview clone-ai-preview" aria-label="电商AI作图预览">
      <header className="clone-ai-preview-header">
        <strong>预览</strong>
        <span>
          上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
        </span>
      </header>

      {status === "done" ? (
        <section className="clone-ai-preview-showcase" aria-label="生成结果">
          <button type="button" className="clone-ai-main-result" onClick={() => openProductSetPreview(clonePreviewCards[0])}>
            <img src={productImages[0]?.src ?? clonePreviewCards[0].src} alt="上传商品原图" />
            <span>原图素材</span>
          </button>
          <div className="clone-ai-flow-arrow" aria-hidden="true" />
          <div className="clone-ai-result-grid">
            {clonePreviewCards.map((card) => (
              <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                <img src={card.src} alt={card.label} />
                <span>{card.label}</span>
              </button>
            ))}
          </div>
        </section>
      ) : (
        <section className="clone-ai-empty-state" aria-live="polite">
          {status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
          <strong>{status === "generating" ? "正在生成" : "等待生成"}</strong>
          <span>
            {status === "generating"
              ? `AI 正在为 ${platform} / ${market} 整理${selectedCloneOutput.label}。`
              : "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}
          </span>
        </section>
      )}

      <section className="clone-ai-bottom-input" aria-label="信息详情">
        <div className="clone-ai-input-wrapper">
          <textarea
            ref={requirementTextareaRef}
            value={requirement}
            onChange={(event) => {
              const nextValue = event.target.value.slice(0, 500);
              setRequirement(nextValue);
              syncRequirementMentionQuery(nextValue, event.target.selectionStart);
            }}
            onClick={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
            onKeyUp={(event) => syncRequirementMentionQuery(requirement, event.currentTarget.selectionStart)}
            onKeyDown={(event) => {
              if (event.key === "Escape") setRequirementImageMentionQuery(null);
            }}
            maxLength={500}
            placeholder="建议包含以下信息，产品名称，核心卖点，期望场景，具体参数"
          />
          {requirementImageMentionQuery !== null && ecommerceMentionImages.length ? (
            <ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
          ) : null}
          <button type="button" className="clone-ai-send-button" disabled={!canGenerate} onClick={handleGenerate} aria-label={clonePrimaryLabel}>
            {status === "generating" ? <LoadingOutlined /> : "↑"}
          </button>
        </div>
        <span className="clone-ai-char-count">{requirement.length}/500</span>
      </section>
    </main>
  );

  const detailPreview = (
    <main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览">
      <div className="product-clone-preview__headline">
        <h1>A+/详情页</h1>
        <p>
          上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的专业详情页。
        </p>
      </div>

      <section className="product-detail-demo-board">
        <div className="product-detail-source-stack">
          {(detailProductImages.length ? detailProductImages.map((item) => item.src) : detailProductSamples).map((src, index) => (
            <figure key={`${src}-${index}`}>
              <img src={src} alt={`商品原图 ${index + 1}`} />
            </figure>
          ))}
          <span>上传产品图</span>
        </div>
        <div className="product-detail-flow-arrow" aria-hidden="true" />
        <div className="product-detail-long-result">
          <img src={detailAssets.longPage} alt="生成电商长图" />
          <span>{detailStatus === "done" ? "已生成电商长图" : "生成电商长图"}</span>
        </div>
        <div className="product-detail-grid-result">
          {detailGridSamples.map((src, index) => (
            <img key={src} src={src} alt={`详情页模块 ${index + 1}`} />
          ))}
          <span>符合多电商平台规范</span>
        </div>
      </section>

      <button type="button" className="product-clone-help" aria-label="帮助">
        <QuestionCircleOutlined />
      </button>
    </main>
  );

  const tryOnPreview = (
    <main className="product-clone-preview product-clone-preview--try-on" aria-label="服饰穿戴预览">
      <div className="product-clone-preview__headline">
        <h1>AI服饰穿戴</h1>
        <p>上传服装图，定制专属模特，即刻生成多种场景不同姿势套图。</p>
      </div>

      {tryOnResultImages.length ? (
        <section className="product-try-on-generated" aria-label="生成结果">
          {tryOnResultImages.map((src, index) => (
            <figure key={src}>
              <img src={src} alt={`生成结果 ${index + 1}`} />
              <figcaption>{selectedScenes[index % Math.max(selectedScenes.length, 1)] || "智能场景"}</figcaption>
            </figure>
          ))}
        </section>
      ) : null}

      <section className="product-try-on-demo-board">
        {tryOnCards.map((card) => (
          <article key={card.title} className={`product-try-on-card product-try-on-card--${card.tone}`}>
            <h2>{card.title}</h2>
            <div className="product-try-on-inputs">
              {card.inputs.map((src, index) => (
                <div className="product-try-on-input-group" key={`${card.title}-${src}`}>
                  <img src={src} alt={`${card.title} 输入 ${index + 1}`} />
                  {index < card.inputs.length - 1 ? <span className="product-try-on-plus">+</span> : null}
                </div>
              ))}
            </div>
            <div className="product-try-on-arrow" aria-hidden="true" />
            <div className="product-try-on-results">
              {card.results.map((src, index) => (
                <img key={src} src={src} alt={`${card.title} 示例 ${index + 1}`} />
              ))}
            </div>
          </article>
        ))}
      </section>

      <button type="button" className="product-clone-help" aria-label="帮助">
        <QuestionCircleOutlined />
      </button>
    </main>
  );

  const placeholderPreview = (
    <main className="product-clone-preview product-clone-preview--placeholder" aria-label={`${pageLabel}预览`}>
      <div className="product-clone-preview__headline">
        <h1>{pageLabel}</h1>
        <p>选择左侧已接入的工具开始生成商品视觉内容。</p>
      </div>
      <button type="button" className="product-clone-help" aria-label="帮助">
        <QuestionCircleOutlined />
      </button>
    </main>
  );

  return (
    <section
      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}`}
      data-tool={activeTool}
      aria-label={pageLabel}
    >
      <div className="product-clone-shell">
        <aside className="product-clone-rail" aria-label="商品工具">
          {sideTools.map((tool) => (
            <button key={tool.key} type="button" className={activeTool === tool.key ? "is-active" : ""} onClick={() => setActiveTool(tool.key)}>
              {tool.icon}
              <span>{tool.label}</span>
            </button>
          ))}
        </aside>

        <aside
          id={isCloneTool ? "ecommerce-clone-settings-panel" : undefined}
          className="product-clone-panel"
          aria-label={`${pageLabel}参数`}
          aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
        >
          {isSetTool ? setPanel : isDetail ? detailPanel : isTryOn ? tryOnPanel : isCloneTool ? clonePanel : placeholderPanel}
        </aside>

        {isCloneTool ? (
          <button
            type="button"
            className="clone-ai-settings-toggle"
            onClick={() => setIsCloneSettingsCollapsed((current) => !current)}
            aria-label={isCloneSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
            aria-controls="ecommerce-clone-settings-panel"
            aria-expanded={!isCloneSettingsCollapsed}
            title={isCloneSettingsCollapsed ? "展开设置面板" : "收起设置面板"}
          >
            {isCloneSettingsCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          </button>
        ) : null}

        {isSetTool ? setPreview : isDetail ? detailPreview : isTryOn ? tryOnPreview : isCloneTool ? (cloneOutput === "video" ? (
          <main className="product-clone-preview product-clone-preview--video" style={{ padding: 0, overflow: "hidden" }}>
            <EcommerceVideoWorkspace
              isAuthenticated={Boolean((_props as Record<string, unknown>).isAuthenticated)}
              productImageDataUrls={productImages.map((img) => img.src)}
              requirement={requirement}
              platform={platform}
              aspectRatio={ratio.includes("9：16") || ratio.includes("9:16") ? "9:16" : ratio.includes("16：9") || ratio.includes("16:9") ? "16:9" : ratio.includes("3：4") || ratio.includes("3:4") ? "3:4" : "9:16"}
              durationSeconds={cloneVideoDuration}
              resolution={cloneVideoQuality === "standard" ? "720P" : "1080P"}
              onRequestLogin={() => ((_props as Record<string, (() => void) | undefined>).onRequireLogin?.())}
            />
          </main>
        ) : clonePreview) : placeholderPreview}
      </div>

      {selectedProductSetPreview ? (
        <div className="product-set-preview-backdrop" role="presentation" onClick={() => setSelectedProductSetPreview(null)}>
          <section
            className="product-set-preview-modal"
            role="dialog"
            aria-modal="true"
            aria-label={selectedProductSetPreview.label}
            onClick={(event) => event.stopPropagation()}
          >
            <button
              type="button"
              className="product-set-preview-close"
              onClick={() => setSelectedProductSetPreview(null)}
              aria-label="关闭预览"
            >
              <CloseOutlined />
            </button>
            <img src={selectedProductSetPreview.src} alt={selectedProductSetPreview.label} />
            <strong>{selectedProductSetPreview.label}</strong>
          </section>
        </div>
      ) : null}

      {showHostingModal ? (
        <div className="product-set-hosting-backdrop" role="presentation">
          <section className="product-set-hosting-modal" role="dialog" aria-modal="true" aria-label="批量托管上线啦">
            <img src={productSetAssets.hosting} alt="托管模式" />
            <div className="product-set-hosting-content">
              <button type="button" className="product-set-hosting-close" onClick={() => setShowHostingModal(false)} aria-label="关闭">
                ×
              </button>
              <h2>
                批量托管上线啦！
                <span>批量6折</span>
              </h2>
              <strong>睡一觉，图就做好了！</strong>
              <ul>
                <li>
                  <b>批量生产</b>
                  <span>支持无限任务并行生成，效率直线飞升。</span>
                </li>
                <li>
                  <b>成本立省40%</b>
                  <span>调度夜间闲置算力，享受专属离线点数折扣。</span>
                </li>
                <li>
                  <b>AI智能提取</b>
                  <span>自动识别图片卖点，生成高转化销售卖点。</span>
                </li>
              </ul>
              <button type="button" className="product-set-hosting-confirm" onClick={() => setShowHostingModal(false)}>
                我知道了
              </button>
            </div>
          </section>
        </div>
      ) : null}
    </section>
  );
}

export default ProductClonePage;
