import {
  AppstoreAddOutlined,
  BorderOuterOutlined,
  ClearOutlined,
  CloudUploadOutlined,
  CloseOutlined,
  DeleteOutlined,
  EditOutlined,
  FireOutlined,
  FileImageOutlined,
  FileTextOutlined,
  FolderOpenOutlined,
  FrownOutlined,
  GlobalOutlined,
  HighlightOutlined,
  LoadingOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PaperClipOutlined,
  PlayCircleOutlined,
  PlusOutlined,
  QuestionCircleOutlined,
  ReloadOutlined,
  ScissorOutlined,
  SettingOutlined,
  TableOutlined,
  TranslationOutlined,
} from "@ant-design/icons";
import {
  ArrowsCounterClockwise,
  MagicWand,
  PaperPlaneRight,
} from "@phosphor-icons/react";
import { Fragment, useEffect, useMemo, useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode } from "react";
import { createPortal } from "react-dom";
import { useTypewriter } from "../../hooks/useTypewriter";
import "../../styles/pages/ecommerce.css";
import "../../styles/pages/local-theme-parity.css";
import { EcommerceProgressBar } from "./EcommerceProgressBar";
import ImageMentionMenu, { getImageMentionQuery, insertImageMentionValue, type MentionImageOption } from "./ImageMentionMenu";
import EcommerceVideoWorkspace from "./EcommerceVideoWorkspace";
import EcommerceVideoHistoryPanel from "./panels/EcommerceVideoHistoryPanel";
import ProductSetHostingModal from "./panels/ProductSetHostingModal";
import ProductSetPreviewModal, { type ProductSetPreviewSelection } from "./panels/ProductSetPreviewModal";
import CommandHistorySidebar from "./panels/CommandHistorySidebar";
import WatermarkToolPage from "./panels/WatermarkToolPage";
import EcommerceDetailPanel from "./panels/EcommerceDetailPanel";
import EcommerceSetPanel from "./panels/EcommerceSetPanel";
import EcommerceTryOnPanel from "./panels/EcommerceTryOnPanel";
import EcommerceClonePanel from "./panels/EcommerceClonePanel";
import EcommerceCopywritingPanel from "./panels/EcommerceCopywritingPanel";
import EcommerceOneClickVideoPanel from "./panels/EcommerceOneClickVideoPanel";
import { ecommerceOssScopes, listEcommerceGenerationHistory, saveUnifiedEcommerceGenerationRecord, deleteEcommerceGenerationRecord } from "./ecommerceGenerationPersistence";
import { downloadResultAsset } from "../workbench/workbenchDownload";
import {
  defaultCloneOutput,
  defaultEcommercePlatform,
  defaultProductSetOutput,
  getPlatformDefaultLanguage,
  getPlatformDefaultRatio,
  getPlatformLanguageOptions,
  getPlatformRatioOptions,
  marketLanguageOptions,
  marketOptions,
  normalizeLanguageForPlatform,
  normalizeMarket,
  normalizePlatform,
  normalizeRatioForPlatform,
  platformOptions,
} from "./utils/platformRules";
import type {
  CloneOutputKey,
  ProductSetOutputKey,
} from "./utils/platformRules";
import {
  buildHistoryTurnFromRecord,
  cloneLatestSettingStorageKey,
  defaultCloneDetailModuleIds,
  defaultCloneSetCounts,
  ecommerceHistoryStorageKey,
  getEcommerceHistoryUserBucket,
  getTurnResults,
  normalizeEcommerceHistoryRecord,
  normalizeEcommerceHistoryTurn,
  readEcommerceHistoryRecords,
  writeCloneLatestSetting,
  writeEcommerceHistoryRecords,
} from "./utils/clonePersistence";
import type {
  CloneImageItem,
  CloneModelPanelTab,
  CloneReferenceMode,
  CloneReplicateLevelKey,
  CloneResult,
  CloneSavedSetting,
  CloneSetCountKey,
  CloneVideoQualityKey,
  EcommerceHistoryRecord,
  EcommerceHistoryStatus,
  EcommerceHistoryTurn,
} from "./utils/clonePersistence";
import { aiGenerationClient } from "../../api/aiGenerationClient";
import { listEcommerceTemplates } from "../../api/ecommerceTemplateClient";
import { ServerRequestError } from "../../api/serverConnection";
import { waitForTask } from "../../api/taskSubscription";
import { toast } from "../../components/toast/toastStore";
import { useGenerationTasks } from "../../hooks/useGenerationTasks";
import { useAppStore } from "../../stores";
import {
  normalizeEcommerceImageMime,
} from "./ecommerceImageValidation";
import {
  clampNumber,
  hexToHsv,
  hexToRgb,
  hsvToRgb,
  normalizeHexColor,
  parseSmartCutoutAspect,
  parseSmartCutoutPercent,
  rgbToHex,
} from "./utils/colorUtils";
import {
  formatRatioDisplayValue,
  getQuickSetRatioValue,
  getRatioDisplayParts,
  normalizeRatioForApi,
  normalizeRatioToken,
  parseRatioToAspectCss,
  quickSetRatioOptions,
} from "./utils/ratioUtils";
import type {
  SmartCutoutImageItem,
  ProductClonePageProps,
  ProductCloneStatus,
  CommerceScenarioKey,
  CommerceDefaultImageScenarioKey,
  CommerceDefaultIntent,
  ProductSetStatus,
  ProductKitToolKey,
  ComposerMenuKey,
  ComposerAssetTabKey,
  ComposerWorkModeKey,
  CloneBasicSelectKey,
  CloneModelSelectKey,
  CloneTemplateAsset,
  CommerceScenarioTemplate,
  TryOnModelSource,
  TryOnStatus,
  DetailStatus,
  CanvasNode,
  PreviewTouchPoint,
  PreviewTouchGesture,
  EcommerceImagePromptOptions,
} from "./ecommerceTypes";
import {
  smartCutoutColorPresets,
  smartCutoutSizeOptions,
  type SmartCutoutSizeKey,
  buildInspirationPrompt,
  primaryCommerceScenarioKeys,
  scenarioSettingsKeys,
  scenarioAdvancedSettingsKeys,
  commerceScenarioOutputMap,
  mapRemoteTemplateToScenarioTemplate,
  commerceScenarioGenerationKind,
  cloneSetCountOptions,
  cloneSetCountKeys,
  minCloneSetTotal,
  maxCloneSetTotal,
  maxCloneProductImages,
  maxCloneReferenceImages,
  cloneVideoDurationMin,
  cloneVideoDurationMax,
  composerDurationOptions,
  cloneVideoQualityOptions,
  cloneReplicateLevelOptions,
  tryOnRatioOptions,
  tryOnScenes,
  normalizeCloneModelSceneSelection,
  tryOnModelOptions,
  detailTypeOptions,
  detailModules,
  defaultDetailModuleIds,
  maxDetailModuleSelection,
  cloneDetailModules,
  getImageFileFormat,
  getRemoteImageFormat,
  getRemoteImageName,
  readImageDimensions,
  clampCloneVideoDuration,
  mergeEcommerceHistoryRecords,
} from "./ecommerceConstants";
import {
  sideTools,
  productSetOutputOptions,
  cloneOutputOptions,
  commerceScenarioOptions,
} from "./ecommerceJsxConstants";
import {
  ecommerceInspirationRows,
  productSetPreviewCards,
  tryOnAssets,
  tryOnCards,
  detailAssets,
  detailProductSamples,
  detailGridSamples,
  commerceScenarioTemplates,
} from "./ecommerceAssets";
import {
  createLocalImageItems,
  uploadImageItem,
  persistGeneratedImageUrl,
  notifyRejectedImages,
} from "./ecommerceImagePipeline";
import { classifyDefaultCommerceIntent } from "./ecommerceIntentClassifier";

function ProductClonePage(_props: ProductClonePageProps = {}) {
  const { onWorkspaceChromeChange } = _props;
  const setInputRef = useRef<HTMLInputElement>(null);
  const productInputRef = useRef<HTMLInputElement>(null);
  const cloneReferenceInputRef = useRef<HTMLInputElement>(null);
  const smartCutoutInputRef = useRef<HTMLInputElement>(null);
  const imageWorkbenchInputRef = useRef<HTMLInputElement>(null);
  const imageWorkbenchUrlInputRef = useRef<HTMLInputElement>(null);
  const imageWorkbenchProgressRef = useRef<number | null>(null);
  const watermarkInputRef = useRef<HTMLInputElement>(null);
  const watermarkUrlInputRef = useRef<HTMLInputElement>(null);
  const watermarkProcessTimeoutRef = useRef<number | null>(null);
  const translateInputRef = useRef<HTMLInputElement>(null);
  const translateUrlInputRef = useRef<HTMLInputElement>(null);
  const translateProcessTimeoutRef = useRef<number | null>(null);
  const smartCutoutTransitionTimeoutRef = useRef<number | null>(null);
  const smartCutoutPendingUrlsRef = useRef<string[]>([]);
  const smartCutoutPaletteRef = useRef<HTMLDivElement>(null);
  const smartCutoutToolsRef = useRef<HTMLDivElement>(null);
  const composerMenuCloseTimeoutRef = useRef<number | null>(null);
  const requirementTextareaRef = useRef<HTMLTextAreaElement>(null);
  const commandComposerWrapRef = useRef<HTMLElement | null>(null);
  const templateStripRef = useRef<HTMLElement | null>(null);
  const garmentInputRef = useRef<HTMLInputElement>(null);
  const detailInputRef = useRef<HTMLInputElement>(null);
  const detailProgressRef = useRef<number | null>(null);
  const hotProgressRef = useRef<number | null>(null);
  const hotMaterialInputRef = useRef<HTMLInputElement>(null);
  const countHoldTimeoutRef = useRef<number | null>(null);
  const countHoldIntervalRef = useRef<number | null>(null);
  const isAuthenticated = Boolean((_props as Record<string, unknown>).isAuthenticated);
  const requestLogin = () => {
    const handler = (_props as Record<string, unknown>).onRequireLogin;
    if (typeof handler === "function") handler();
  };
  const imageGen = useGenerationTasks({ sourceView: "ecommerce" });
  const appUsage = useAppStore((s) => s.usage);
  const latestCloneSettingRef = useRef<CloneSavedSetting | null>(null);
  const skipInitialCloneAutoSaveRef = useRef(true);
  const skipNextCloneAutoSaveRef = useRef(false);
  const [activeTool, setActiveTool] = useState<ProductKitToolKey>("clone");
  useEffect(() => {
    setPreviewZoom(1);
    setIsCommandComposerCompact(false);
  }, [activeTool]);
  const [setImages, setSetImages] = useState<CloneImageItem[]>([]);
  const [productSetPlatform, setProductSetPlatform] = useState(defaultEcommercePlatform);
  const [productSetMarket, setProductSetMarket] = useState(marketOptions[0]);
  const [productSetLanguage, setProductSetLanguage] = useState(getPlatformDefaultLanguage(defaultEcommercePlatform, marketOptions[0]));
  const [productSetRatio, setProductSetRatio] = useState(getPlatformDefaultRatio(defaultEcommercePlatform, defaultProductSetOutput));
  const [productSetRequirement, setProductSetRequirement] = useState("");
  const [productSetOutput, setProductSetOutput] = useState<ProductSetOutputKey>(defaultProductSetOutput);
  const [productSetStatus, setProductSetStatus] = useState<ProductSetStatus>("idle");
  // 套图/图像生成的真实进度（0-100）：多张串行生成时按"已完成张数 + 当前张子进度"推进，
  // 替代进度条原先写死 50 导致卡在 75% 的假进度。
  const [generationProgress, setGenerationProgress] = useState(0);
  const [productSetResultImages, setProductSetResultImages] = useState<string[]>([]);
  const [isSetUploadDragging, setIsSetUploadDragging] = useState(false);
  const [selectedProductSetPreview, setSelectedProductSetPreview] = useState<ProductSetPreviewSelection | null>(null);
  const [showHostingModal, setShowHostingModal] = useState(false);
  const [productImages, setProductImages] = useState<CloneImageItem[]>([]);
  const [activeQuickTool, setActiveQuickTool] = useState<"cutout" | "detail" | "watermark" | "image-edit" | "translate" | "hot" | "quick-set" | "copywriting" | "oneClickVideo" | null>(null);
  const [smartCutoutImage, setSmartCutoutImage] = useState<SmartCutoutImageItem | null>(null);
  const [smartCutoutBatchImages, setSmartCutoutBatchImages] = useState<SmartCutoutImageItem[]>([]);
  const [smartCutoutBackgroundColor, setSmartCutoutBackgroundColor] = useState("#ffffff");
  const [smartCutoutBackgroundAlpha, setSmartCutoutBackgroundAlpha] = useState(100);
  const [smartCutoutHexDraft, setSmartCutoutHexDraft] = useState("#ffffff");
  const [isSmartCutoutPaletteOpen, setIsSmartCutoutPaletteOpen] = useState(false);
  const [smartCutoutSizeKey, setSmartCutoutSizeKey] = useState<SmartCutoutSizeKey>("original");
  const [isSmartCutoutDragging, setIsSmartCutoutDragging] = useState(false);
  const [isSmartCutoutComparing, setIsSmartCutoutComparing] = useState(false);
  const [isSmartCutoutTransitioning, setIsSmartCutoutTransitioning] = useState(false);
  const [smartCutoutTransitionMessage, setSmartCutoutTransitionMessage] = useState({
    title: "正在切换页面",
    subtitle: "请稍候",
  });
  const [watermarkImage, setWatermarkImage] = useState<{ src: string; name: string; format: string } | null>(null);
  const [watermarkStatus, setWatermarkStatus] = useState<"idle" | "processing" | "done" | "failed">("idle");
  const [isWatermarkDragging, setIsWatermarkDragging] = useState(false);
  const [watermarkResultUrl, setWatermarkResultUrl] = useState<string | null>(null);
  const [watermarkProgress, setWatermarkProgress] = useState(0);
  const [translateImage, setTranslateImage] = useState<{ src: string; name: string; format: string } | null>(null);
  const [translateStatus, setTranslateStatus] = useState<"idle" | "processing" | "done" | "failed">("idle");
  const [isTranslateDragging, setIsTranslateDragging] = useState(false);
  const [translateLanguage, setTranslateLanguage] = useState("zh");
  const [translateResultUrl, setTranslateResultUrl] = useState<string | null>(null);
  const [imageWorkbenchImage, setImageWorkbenchImage] = useState<{ src: string; name: string; format: string } | null>(null);
  const [imageWorkbenchPrompt, setImageWorkbenchPrompt] = useState("");
  const [imageWorkbenchBrushSize, setImageWorkbenchBrushSize] = useState(50);
  const [imageWorkbenchRatio, setImageWorkbenchRatio] = useState("1:1");
  const [imageWorkbenchStatus, setImageWorkbenchStatus] = useState<"idle" | "processing" | "done" | "failed">("idle");
  const [isImageWorkbenchDragging, setIsImageWorkbenchDragging] = useState(false);
  const [imageWorkbenchMaskStrokes, setImageWorkbenchMaskStrokes] = useState<Array<{ id: string; size: number; points: Array<{ x: number; y: number }> }>>([]);
  const [imageWorkbenchBrushCursor, setImageWorkbenchBrushCursor] = useState<{ x: number; y: number } | null>(null);
  const [imageWorkbenchResultUrl, setImageWorkbenchResultUrl] = useState<string | null>(null);
  const [imageWorkbenchProgress, setImageWorkbenchProgress] = useState(0);
  const [isProductUploadDragging, setIsProductUploadDragging] = useState(false);
  const [activeCommerceScenario, setActiveCommerceScenario] = useState<CommerceScenarioKey | null>(null);
  const [isCommerceScenarioMoreOpen, setIsCommerceScenarioMoreOpen] = useState(false);
  const [remoteCommerceScenarioTemplates, setRemoteCommerceScenarioTemplates] = useState<CommerceScenarioTemplate[] | null>(null);
  const [cloneOutput, setCloneOutput] = useState<CloneOutputKey>(defaultCloneOutput);
  const [isCloneTemplateStripVisible, setIsCloneTemplateStripVisible] = useState(false);
  const [videoHistoryVisible, setVideoHistoryVisible] = useState(false);
  const [isVideoWorkspaceVisible, setIsVideoWorkspaceVisible] = useState(false);
  const [videoPlanTrigger, setVideoPlanTrigger] = useState(0);
  const [isDefaultIntentRouting, setIsDefaultIntentRouting] = useState(false);
  const [openCloneBasicSelect, setOpenCloneBasicSelect] = useState<CloneBasicSelectKey | null>(null);
  const [openQuickSetSelect, setOpenQuickSetSelect] = useState<CloneBasicSelectKey | null>(null);
  const [visibleQuickSetSelect, setVisibleQuickSetSelect] = useState<CloneBasicSelectKey | null>(null);
  const [isQuickSetSelectClosing, setIsQuickSetSelectClosing] = useState(false);
  const [composerMenu, setComposerMenu] = useState<ComposerMenuKey | null>(null);
  const [visibleComposerMenu, setVisibleComposerMenu] = useState<ComposerMenuKey | null>(null);
  const [isComposerMenuClosing, setIsComposerMenuClosing] = useState(false);
  const [composerPopoverLeft, setComposerPopoverLeft] = useState(0);
  const [composerPopoverTop, setComposerPopoverTop] = useState(0);
  const [composerTooltip, setComposerTooltip] = useState<{ text: string; left: number; top: number } | null>(null);
  const [composerAssetTab, setComposerAssetTab] = useState<ComposerAssetTabKey>("recent");
  const [composerWorkMode, setComposerWorkMode] = useState<ComposerWorkModeKey>("quick");
  const [aiWriteDraft, setAiWriteDraft] = useState("");
  const [isCommandHistoryCollapsed, setIsCommandHistoryCollapsed] = useState(true);
  const [inspirationPreview, setInspirationPreview] = useState<{ mediaUrl: string; mediaType: "image" | "video"; prompt: string } | null>(null);
  const [isQuickPanelCollapsed, setIsQuickPanelCollapsed] = useState(false);
  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 [isCloneSettingsCollapsed, setIsCloneSettingsCollapsed] = useState(false);
  const [isCloneConversationCollapsed, setIsCloneConversationCollapsed] = useState(false);
  const [quickSetStatus, setQuickSetStatus] = useState<"idle" | "generating" | "done" | "failed">("idle");
  const [quickSetResultUrls, setQuickSetResultUrls] = useState<string[]>([]);
  const [quickSetProgress, setQuickSetProgress] = useState(0);
  const [quickSetRequirement, setQuickSetRequirement] = useState("");
  const quickSetProgressRef = useRef<number | null>(null);
  const [previewZoom, setPreviewZoom] = useState(1);
  const quickSetSelectTimerRef = useRef<number | null>(null);
  const openQuickSetSelectRef = useRef<CloneBasicSelectKey | null>(null);
  const visibleQuickSetSelectRef = useRef<CloneBasicSelectKey | null>(null);
  const [previewOffset, setPreviewOffset] = useState({ x: 0, y: 0 });
  const previewSurfaceRef = useRef<HTMLElement | null>(null);
  const previewZoomRef = useRef(previewZoom);
  const previewOffsetRef = useRef(previewOffset);
  const imageWorkbenchMaskPaintingRef = useRef(false);
  const imageWorkbenchActiveStrokeIdRef = useRef<string | null>(null);
  const imageWorkbenchMaskCanvasRef = useRef<HTMLCanvasElement>(null);
  const imageWorkbenchLastMaskPointRef = useRef<{ x: number; y: number } | null>(null);
  const previewPanRef = useRef<{ active: boolean; startX: number; startY: number; offsetX: number; offsetY: number }>({
    active: false,
    startX: 0,
    startY: 0,
    offsetX: 0,
    offsetY: 0,
  });
  const previewTouchGestureRef = useRef<PreviewTouchGesture>({
    mode: "none",
    points: [],
    startOffset: { x: 0, y: 0 },
    startZoom: 1,
    startDistance: 0,
    startCenter: { x: 0, y: 0 },
  });
  const nodeDragRef = useRef<{ active: boolean; nodeId: string; startX: number; startY: number; originX: number; originY: number }>({
    active: false,
    nodeId: "",
    startX: 0,
    startY: 0,
    originX: 0,
    originY: 0,
  });
  const [isCommandComposerCompact, setIsCommandComposerCompact] = useState(false);
  const typewriterText = useTypewriter("万物皆可AI，广告素材一键生成");

  useEffect(() => {
    previewZoomRef.current = previewZoom;
  }, [previewZoom]);

  useEffect(() => {
    previewOffsetRef.current = previewOffset;
  }, [previewOffset]);

  useEffect(() => {
    if (typeof window === "undefined") return undefined;
    // aside 默认收起，用户手动控制展开/收起
    return undefined;
  }, []);

  useEffect(() => {
    if (!inspirationPreview) return undefined;
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") setInspirationPreview(null);
    };
    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [inspirationPreview]);

  const previewTransformStyle = useMemo<CSSProperties>(
    () => ({
      transform: `translate3d(${previewOffset.x}px, ${previewOffset.y}px, 0) scale(${previewZoom})`,
    }),
    [previewOffset.x, previewOffset.y, previewZoom],
  );

  const updatePreviewTransform = (nextZoom: number, nextOffset: { x: number; y: number }) => {
    previewZoomRef.current = nextZoom;
    previewOffsetRef.current = nextOffset;
    setPreviewZoom(nextZoom);
    setPreviewOffset(nextOffset);
  };

  const getPreviewGestureDistance = (points: PreviewTouchPoint[]) => {
    if (points.length < 2) return 0;
    return Math.hypot(points[0]!.x - points[1]!.x, points[0]!.y - points[1]!.y);
  };

  const getPreviewGestureCenter = (points: PreviewTouchPoint[]) => {
    if (points.length < 2) return points[0] ? { x: points[0].x, y: points[0].y } : { x: 0, y: 0 };
    return {
      x: (points[0]!.x + points[1]!.x) / 2,
      y: (points[0]!.y + points[1]!.y) / 2,
    };
  };

  const isPreviewTouchInteractiveTarget = (target: HTMLElement | null) =>
    Boolean(target?.closest(".ecom-command-composer-wrap, .clone-ai-preview-header, .clone-ai-source-corner-action, input, textarea, select, a, button"));

  const startPreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
    if (event.pointerType === "mouse" || isPreviewTouchInteractiveTarget(event.target as HTMLElement | null)) return;
    event.preventDefault();
    event.currentTarget.setPointerCapture(event.pointerId);
    const points = [
      ...previewTouchGestureRef.current.points.filter((point) => point.id !== event.pointerId),
      { id: event.pointerId, x: event.clientX, y: event.clientY },
    ].slice(-2);
    const mode = points.length >= 2 ? "pinch" : "pan";
    previewTouchGestureRef.current = {
      mode,
      points,
      startOffset: previewOffsetRef.current,
      startZoom: previewZoomRef.current,
      startDistance: getPreviewGestureDistance(points),
      startCenter: getPreviewGestureCenter(points),
    };
    event.currentTarget.classList.add("is-touch-panning");
  };

  const movePreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
    const gesture = previewTouchGestureRef.current;
    if (gesture.mode === "none" || event.pointerType === "mouse") return;
    event.preventDefault();
    const points = gesture.points.map((point) => point.id === event.pointerId ? { ...point, x: event.clientX, y: event.clientY } : point);
    if (!points.some((point) => point.id === event.pointerId)) return;

    if (gesture.mode === "pinch" && points.length >= 2 && gesture.startDistance > 0) {
      const rect = event.currentTarget.getBoundingClientRect();
      const center = getPreviewGestureCenter(points);
      const zoomRatio = getPreviewGestureDistance(points) / gesture.startDistance;
      const nextZoom = Math.min(2, Math.max(0.25, gesture.startZoom * zoomRatio));
      const startCenterX = gesture.startCenter.x - rect.left;
      const startCenterY = gesture.startCenter.y - rect.top;
      const currentCenterX = center.x - rect.left;
      const currentCenterY = center.y - rect.top;
      const contentX = (startCenterX - gesture.startOffset.x) / gesture.startZoom;
      const contentY = (startCenterY - gesture.startOffset.y) / gesture.startZoom;
      updatePreviewTransform(nextZoom, {
        x: currentCenterX - contentX * nextZoom,
        y: currentCenterY - contentY * nextZoom,
      });
    } else {
      const point = points[0]!;
      const startPoint = gesture.points[0]!;
      updatePreviewTransform(gesture.startZoom, {
        x: gesture.startOffset.x + point.x - startPoint.x,
        y: gesture.startOffset.y + point.y - startPoint.y,
      });
    }

    previewTouchGestureRef.current = { ...gesture, points };
  };

  const stopPreviewTouchGesture = (event: ReactPointerEvent<HTMLElement>) => {
    const gesture = previewTouchGestureRef.current;
    if (event.pointerType === "mouse" || gesture.mode === "none") return;
    const points = gesture.points.filter((point) => point.id !== event.pointerId);
    if (points.length) {
      previewTouchGestureRef.current = {
        mode: "pan",
        points,
        startOffset: previewOffsetRef.current,
        startZoom: previewZoomRef.current,
        startDistance: 0,
        startCenter: getPreviewGestureCenter(points),
      };
    } else {
      previewTouchGestureRef.current = {
        mode: "none",
        points: [],
        startOffset: previewOffsetRef.current,
        startZoom: previewZoomRef.current,
        startDistance: 0,
        startCenter: { x: 0, y: 0 },
      };
      event.currentTarget.classList.remove("is-touch-panning");
    }
    try {
      event.currentTarget.releasePointerCapture(event.pointerId);
    } catch {
      // Pointer capture can already be released by the browser after cancel.
    }
  };

  useEffect(() => {
    const container = previewSurfaceRef.current;
    if (!container) return undefined;

    const handleWheel = (event: WheelEvent) => {
      const target = event.target as HTMLElement | null;
      if (target?.closest(".ecom-inspiration-preview")) {
        event.preventDefault();
        return;
      }
      if (target?.closest(".ecom-command-composer-wrap, .clone-ai-preview-header")) return;
      event.preventDefault();
      const currentZoom = previewZoomRef.current;
      const rect = container.getBoundingClientRect();
      const cursorX = event.clientX - rect.left;
      const cursorY = event.clientY - rect.top;
      const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
      const nextZoom = Math.min(2, Math.max(0.25, currentZoom * zoomDelta));
      if (nextZoom === currentZoom) return;

      const currentOffset = previewOffsetRef.current;
      const contentX = (cursorX - currentOffset.x) / currentZoom;
      const contentY = (cursorY - currentOffset.y) / currentZoom;
      const nextOffset = {
        x: cursorX - contentX * nextZoom,
        y: cursorY - contentY * nextZoom,
      };

      previewZoomRef.current = nextZoom;
      previewOffsetRef.current = nextOffset;
      setPreviewZoom(nextZoom);
      setPreviewOffset(nextOffset);
    };

    container.addEventListener("wheel", handleWheel, { passive: false, capture: true });
    return () => container.removeEventListener("wheel", handleWheel, { capture: true });
  }, [activeTool, cloneOutput]);

  useEffect(() => {
    const container = previewSurfaceRef.current;
    if (!container) return undefined;
    const listenerOptions = { capture: true };

    const handleMouseDown = (event: MouseEvent) => {
      if (event.button !== 0 && event.button !== 1) return;
      const target = event.target as HTMLElement | null;
      if (target?.closest(".ecom-command-composer-wrap, .clone-ai-preview-header, .clone-ai-preview-showcase, .clone-ai-main-result, .clone-ai-result-grid, .clone-ai-node-drag-handle, input, textarea, select, a, button, img")) return;
      event.preventDefault();
      const currentOffset = previewOffsetRef.current;
      previewPanRef.current = {
        active: true,
        startX: event.clientX,
        startY: event.clientY,
        offsetX: currentOffset.x,
        offsetY: currentOffset.y,
      };
      container.classList.add("is-middle-panning");
    };

    const handleMouseMove = (event: MouseEvent) => {
      const pan = previewPanRef.current;
      if (!pan.active) return;
      event.preventDefault();
      const nextOffset = {
        x: pan.offsetX + event.clientX - pan.startX,
        y: pan.offsetY + event.clientY - pan.startY,
      };
      previewOffsetRef.current = nextOffset;
      setPreviewOffset(nextOffset);
    };

    const stopMousePan = () => {
      const pan = previewPanRef.current;
      if (!pan.active) return;
      previewPanRef.current = { ...pan, active: false };
      container.classList.remove("is-middle-panning");
    };

    const preventAuxClick = (event: MouseEvent) => {
      if (event.button === 1) event.preventDefault();
    };

    container.addEventListener("mousedown", handleMouseDown, listenerOptions);
    container.addEventListener("auxclick", preventAuxClick, listenerOptions);
    window.addEventListener("mousemove", handleMouseMove);
    window.addEventListener("mouseup", stopMousePan);
    window.addEventListener("blur", stopMousePan);

    return () => {
      container.removeEventListener("mousedown", handleMouseDown, listenerOptions);
      container.removeEventListener("auxclick", preventAuxClick, listenerOptions);
      window.removeEventListener("mousemove", handleMouseMove);
      window.removeEventListener("mouseup", stopMousePan);
      window.removeEventListener("blur", stopMousePan);
    };
  }, [activeTool, cloneOutput]);

  const bindPreviewSurface = (node: HTMLElement | null) => {
    previewSurfaceRef.current = node;
  };

  const getPreviewSurfaceProps = () => ({
    ref: bindPreviewSurface,
    onMouseDown: (event: ReactMouseEvent<HTMLElement>) => {
      if (event.button === 1) event.preventDefault();
    },
    onAuxClick: (event: ReactMouseEvent<HTMLElement>) => {
      if (event.button === 1) event.preventDefault();
    },
    onPointerDown: startPreviewTouchGesture,
    onPointerMove: movePreviewTouchGesture,
    onPointerUp: stopPreviewTouchGesture,
    onPointerCancel: stopPreviewTouchGesture,
  });

  const startCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, node: CanvasNode) => {
    if (event.button !== 0 || event.pointerType === "mouse") return;
    if ((event.target as HTMLElement | null)?.closest("button, a, input, textarea, select")) return;
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.setPointerCapture(event.pointerId);
    nodeDragRef.current = { active: true, nodeId: node.id, startX: event.clientX, startY: event.clientY, originX: node.x, originY: node.y };
  };

  const moveCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, nodeId: string) => {
    const drag = nodeDragRef.current;
    if (!drag.active || drag.nodeId !== nodeId || event.pointerType === "mouse") return;
    event.preventDefault();
    event.stopPropagation();
    const zoom = previewZoomRef.current;
    const dx = (event.clientX - drag.startX) / zoom;
    const dy = (event.clientY - drag.startY) / zoom;
    setCanvasNodes((prev) => prev.map((node) => node.id === nodeId ? { ...node, x: drag.originX + dx, y: drag.originY + dy } : node));
  };

  const stopCanvasNodeDrag = (event: ReactPointerEvent<HTMLElement>, nodeId: string) => {
    if (nodeDragRef.current.nodeId !== nodeId || event.pointerType === "mouse") return;
    nodeDragRef.current = { ...nodeDragRef.current, active: false };
    event.stopPropagation();
    try {
      event.currentTarget.releasePointerCapture(event.pointerId);
    } catch {
      // Pointer capture can already be released by the browser after cancel.
    }
  };

  const handlePreviewWheel = (event: React.WheelEvent<HTMLElement>) => {
    if (!event.currentTarget) return;
    const container = event.currentTarget as HTMLElement;
    const rect = container.getBoundingClientRect();
    const cursorX = event.clientX - rect.left;
    const cursorY = event.clientY - rect.top;
    const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;

    const nextZoom = Math.min(2, Math.max(0.25, previewZoom * zoomDelta));
    if (nextZoom === previewZoom) return;

    const contentX = (cursorX + container.scrollLeft) / previewZoom;
    const contentY = (cursorY + container.scrollTop) / previewZoom;

    setPreviewZoom(nextZoom);

    requestAnimationFrame(() => {
      container.scrollLeft = contentX * nextZoom - cursorX;
      container.scrollTop = contentY * nextZoom - cursorY;
    });
  };

  const handleQuickPreviewWheel = (event: React.WheelEvent<HTMLDivElement>) => {
    event.preventDefault();
    event.stopPropagation();
    const zoomDelta = event.deltaY < 0 ? 1.08 : 0.92;
    setPreviewZoom((value) => Math.min(2, Math.max(0.25, value * zoomDelta)));
  };

  const handleQuickPanelWheel = (event: React.WheelEvent<HTMLElement>) => {
    const panel = event.currentTarget;
    if (panel.scrollHeight <= panel.clientHeight) return;
    event.stopPropagation();
    panel.scrollTop += event.deltaY;
  };

  const [requirement, setRequirement] = useState("");
  const [requirementImageMentionQuery, setRequirementImageMentionQuery] = useState<string | null>(null);
  const [cloneSettingName, setCloneSettingName] = useState("新建创作");
  const [platform, setPlatform] = useState(defaultEcommercePlatform);
  const [market, setMarket] = useState(marketOptions[0]);
  const [language, setLanguage] = useState(getPlatformDefaultLanguage(defaultEcommercePlatform, marketOptions[0]));
  const [ratio, setRatio] = useState(getPlatformDefaultRatio(defaultEcommercePlatform, defaultCloneOutput));
  const [status, setStatus] = useState<ProductCloneStatus>("idle");
  const [results, setResults] = useState<CloneResult[]>([]);
  const [canvasNodes, setCanvasNodes] = useState<CanvasNode[]>([]);
  const [ecommerceHistoryRecords, setEcommerceHistoryRecords] = useState<EcommerceHistoryRecord[]>(() => readEcommerceHistoryRecords());
  const [activeHistoryRecordId, setActiveHistoryRecordId] = useState<string | null>(null);
  const [historyRefreshTick, setHistoryRefreshTick] = useState(0);
  const [isHistoryRefreshing, setIsHistoryRefreshing] = useState(false);
  const [historyRefreshMessage, setHistoryRefreshMessage] = useState("");
  const [historyRefreshStamp, setHistoryRefreshStamp] = useState(0);
  const historyRefreshLockRef = useRef(false);
  const lastSavedHistorySignatureRef = useRef("");
  const historyUserBucketRef = useRef<string>(getEcommerceHistoryUserBucket());
  const imageAbortRef = useRef({ current: false });
  const activeHistoryTurnIdRef = useRef<string | null>(null);
  const activeEcommerceTaskIdsRef = useRef<Set<string>>(new Set());
  const lastFailedActionRef = useRef<(() => void) | null>(null);
  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[]>([]);

  useEffect(() => {
    if (status === "done") {
      setIsCommandComposerCompact(true);
    } else if (status === "generating" || status === "idle") {
      setIsCommandComposerCompact(false);
    }
  }, [status]);

  // 用户身份变化（登入 / 登出 / 换账号）时，工作台保活不卸载，内存里的历史记录
  // 不会自动失效。这里检测分桶 key 变化并从当前用户的 bucket 重新加载，
  // 避免未登录或换账号后仍显示上一个用户的历史。
  useEffect(() => {
    const bucket = getEcommerceHistoryUserBucket();
    if (bucket === historyUserBucketRef.current) return;
    historyUserBucketRef.current = bucket;
    setActiveHistoryRecordId(null);
    lastSavedHistorySignatureRef.current = "";
    setEcommerceHistoryRecords(readEcommerceHistoryRecords());
  }, [isAuthenticated]);

  useEffect(() => {
    writeEcommerceHistoryRecords(ecommerceHistoryRecords);
  }, [ecommerceHistoryRecords]);

  useEffect(() => {
    if (!isAuthenticated) return;
    let cancelled = false;
    void listEcommerceGenerationHistory(30)
      .then((serverRecords) => {
        if (cancelled) return;
        setEcommerceHistoryRecords((current) => {
          const mergedRecords = mergeEcommerceHistoryRecords(serverRecords, current, readEcommerceHistoryRecords());
          writeEcommerceHistoryRecords(mergedRecords);
          return mergedRecords;
        });
      })
      .catch(() => {
        // Local history remains available when the server list endpoint is offline.
      });
    return () => {
      cancelled = true;
    };
  }, [isAuthenticated]);

  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 [detailRatio, setDetailRatio] = useState(getQuickSetRatioValue(getPlatformDefaultRatio(platformOptions[0], "detail")));
  const [detailType, setDetailType] = useState(detailTypeOptions[0]);
  const [detailRequirement, setDetailRequirement] = useState("");
  const [selectedDetailModules, setSelectedDetailModules] = useState<string[]>(defaultDetailModuleIds);
  const [detailStatus, setDetailStatus] = useState<DetailStatus>("idle");
  const [detailResultUrl, setDetailResultUrl] = useState<string | null>(null);
  const [detailProgress, setDetailProgress] = useState(0);
  const [hotRequirement, setHotRequirement] = useState("");
  const [isHotMaterialDragging, setIsHotMaterialDragging] = useState(false);
  const [hotMaterialHoverZoom, setHotMaterialHoverZoom] = useState<{ src: string; x: number; y: number; placement: "above" | "below" } | null>(null);
  const [hotPlatform, setHotPlatform] = useState(platformOptions[0]);
  const [hotMarket, setHotMarket] = useState(marketOptions[0]);
  const [hotLanguage, setHotLanguage] = useState(getPlatformDefaultLanguage(platformOptions[0], marketOptions[0]));
  const [hotRatio, setHotRatio] = useState(getQuickSetRatioValue(getPlatformDefaultRatio(platformOptions[0], "detail")));
  const [hotStatus, setHotStatus] = useState<DetailStatus>("idle");
  const [hotResultUrl, setHotResultUrl] = useState<string | null>(null);
  const [hotProgress, setHotProgress] = useState(0);
  useEffect(() => {
    let cancelled = false;
    listEcommerceTemplates()
      .then((response) => {
        if (cancelled) return;
        const templates = response.templates
          .map(mapRemoteTemplateToScenarioTemplate)
          .filter((template): template is CommerceScenarioTemplate => Boolean(template));
        setRemoteCommerceScenarioTemplates(templates.length ? templates : null);
      })
      .catch(() => {
        if (!cancelled) setRemoteCommerceScenarioTemplates(null);
      });

    return () => {
      cancelled = true;
    };
  }, []);
  const productSetRatioOptions = useMemo(
    () => getPlatformRatioOptions(productSetPlatform, productSetOutput),
    [productSetOutput, productSetPlatform],
  );
  const baseCloneRatioOptions = useMemo(
    () => getPlatformRatioOptions(platform, cloneOutput),
    [cloneOutput, platform],
  );
  const cloneRatioOptions = baseCloneRatioOptions;
  const composerRatioOptions = useMemo(
    () => [
      "1000×1000px\u00a0\u00a0\u00a01:1",
      "800×1200px\u00a0\u00a0\u00a02:3",
      "1200×800px\u00a0\u00a0\u00a03:2",
      "1200×900px\u00a0\u00a0\u00a04:3",
      "900×1200px\u00a0\u00a0\u00a03:4",
      "1080×1920px\u00a0\u00a0\u00a09:16",
      "1920×1080px\u00a0\u00a0\u00a016:9",
    ],
    [],
  );
  const productSetLanguageOptions = useMemo(
    () => getPlatformLanguageOptions(productSetPlatform, productSetMarket),
    [productSetMarket, productSetPlatform],
  );
  const cloneLanguageOptions = useMemo(
    () => getPlatformLanguageOptions(platform, market),
    [market, platform],
  );
  const detailLanguageOptions = useMemo(
    () => getPlatformLanguageOptions(detailPlatform, detailMarket),
    [detailMarket, detailPlatform],
  );
  const hotLanguageOptions = useMemo(
    () => getPlatformLanguageOptions(hotPlatform, hotMarket),
    [hotMarket, hotPlatform],
  );
  const ecommerceMentionImages: MentionImageOption[] = [
    ...productImages.map((image, index) => ({ ...image, label: `商品图 ${index + 1}` })),
    ...cloneReferenceImages.map((image, index) => ({ ...image, label: `参考图 ${index + 1}` })),
  ];

  const ecommerceVideoImageDataUrls = useMemo(
    () => productImages.map((img) => img.src),
    [productImages],
  );
  const ecommerceVideoImageFiles = useMemo(
    () => productImages.map((img) => img.file),
    [productImages],
  );

  const selectedProductSetOutput =
    productSetOutputOptions.find((option) => option.key === productSetOutput) ?? productSetOutputOptions[0]!;
  const selectedCloneOutput = cloneOutputOptions.find((option) => option.key === cloneOutput) ?? cloneOutputOptions[1]!;
  const visibleCommerceScenarioOptions = useMemo(
    () =>
      isCommerceScenarioMoreOpen
        ? commerceScenarioOptions
        : commerceScenarioOptions.filter((option) => primaryCommerceScenarioKeys.includes(option.key)),
    [isCommerceScenarioMoreOpen],
  );
  const effectiveCommerceScenarioTemplates = remoteCommerceScenarioTemplates?.length
    ? remoteCommerceScenarioTemplates
    : commerceScenarioTemplates;
  const popularCommerceScenarioTemplates = useMemo(
    () =>
      commerceScenarioOptions
        .filter((option): option is { key: Exclude<CommerceScenarioKey, "popular">; label: string; desc: string; icon: ReactNode } => option.key !== "popular")
        .map((option) => effectiveCommerceScenarioTemplates.find((template) => template.scenario === option.key))
        .filter((template): template is CommerceScenarioTemplate => Boolean(template)),
    [effectiveCommerceScenarioTemplates],
  );
  const activeCommerceScenarioTemplates = activeCommerceScenario === null
    ? []
    : activeCommerceScenario === "popular"
      ? popularCommerceScenarioTemplates
      : effectiveCommerceScenarioTemplates.filter((template) => template.scenario === activeCommerceScenario);
  const shouldShowScenarioSettings = activeCommerceScenario !== null && scenarioSettingsKeys.includes(activeCommerceScenario);
  useEffect(() => {
    templateStripRef.current?.scrollTo({ left: 0, behavior: "auto" });
  }, [activeCommerceScenario, isCloneTemplateStripVisible]);
  const cloneRequirementPlaceholder =
    cloneOutput === "model"
      ? "建议包含以下信息：产品名称、核心卖点、期望场景、模特外貌描述（如小麦色皮肤、齐刘海、眼角有泪痣）、具体参数"
      : "建议包含以下信息：产品名称、核心卖点、期望场景、具体参数";
  const productSetPreviewReady = productSetStatus === "done";
  const cloneSetTotal = useMemo(
    () => Object.values(cloneSetCounts).reduce((sum, value) => sum + value, 0),
    [cloneSetCounts],
  );
  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 canGenerateHot = cloneReferenceImages.length > 0 && hotStatus !== "generating";
  const canGenerateQuickSet = productImages.length > 0 && quickSetStatus !== "generating";
  const cloneVideoDurationProgress =
    ((cloneVideoDuration - cloneVideoDurationMin) / (cloneVideoDurationMax - cloneVideoDurationMin)) * 100;
  const cloneVideoDurationStyle: CSSProperties = useMemo(
    () => ({
      "--clone-video-duration-progress": `${cloneVideoDurationProgress}%`,
    }) as CSSProperties,
    [cloneVideoDurationProgress],
  );

  const trackEcommerceTask = (taskId: string) => {
    activeEcommerceTaskIdsRef.current.add(taskId);
  };

  const untrackEcommerceTask = (taskId: string) => {
    activeEcommerceTaskIdsRef.current.delete(taskId);
  };

  const handleCancelGenerate = () => {
    imageAbortRef.current.current = true;
    const taskIds = Array.from(activeEcommerceTaskIdsRef.current);
    activeEcommerceTaskIdsRef.current.clear();
    taskIds.forEach((taskId) => {
      aiGenerationClient.cancelTask(taskId).catch(() => {});
    });
    lastFailedActionRef.current = null;
    if (productSetStatus === "generating") setProductSetStatus("idle");
    if (status === "generating") {
      setStatus("idle");
      if (activeHistoryRecordId) {
        const turnId = activeHistoryTurnIdRef.current;
        if (turnId) {
          updateLocalEcommerceHistoryTurn(activeHistoryRecordId, turnId, (turn) => ({
            ...turn,
            status: "failed",
            errorMessage: "已取消生成",
          }));
        } else {
          updateLocalEcommerceHistoryRecord(activeHistoryRecordId, (record) => ({
            ...record,
            status: "failed",
            errorMessage: "已取消生成",
          }));
        }
      }
    }
    if (detailStatus === "generating") setDetailStatus("idle");
    if (tryOnStatus === "generating") setTryOnStatus("idle");
    if (tryOnStatus === "modeling") setTryOnStatus("ready");
    toast.info("\u5df2\u53d6\u6d88\u751f\u6210");
  };

  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 = notifyRejectedImages(files);
    if (!imageFiles.length) return;
    const remainingSlots = 3 - setImages.length;
    if (remainingSlots <= 0) return;

    const localItems = createLocalImageItems(imageFiles, remainingSlots, "set");
    setSetImages((current) => [...current, ...localItems].slice(0, 3));
    setProductSetStatus("ready");

    Promise.all(localItems.map(async (item) => {
      const uploaded = await uploadImageItem(item);
      if (uploaded.src) URL.revokeObjectURL(item.src);
      return { id: item.id, uploaded };
    })).then((results) => {
      const updateMap = new Map(results.map((result) => [result.id, result.uploaded]));
      setSetImages((current) => current.map((item) => {
        const update = updateMap.get(item.id);
        return update ? { ...item, ...update } : item;
      }));
    }).catch(() => {
      toast.error("套图后台上传失败，请检查网络后重试");
    });
  };

  const handleSetUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files?.length) return;
    void 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) void addSetImages(files);
  };

  const revokeSmartCutoutItem = (item: SmartCutoutImageItem | null) => {
    if (!item) return;
    URL.revokeObjectURL(item.src);
    if (item.originalSrc && item.originalSrc !== item.src) URL.revokeObjectURL(item.originalSrc);
  };

  const revokeSmartCutoutItems = (items: SmartCutoutImageItem[]) => {
    items.forEach(revokeSmartCutoutItem);
  };

  const clearSmartCutoutTransition = () => {
    if (smartCutoutTransitionTimeoutRef.current !== null) {
      window.clearTimeout(smartCutoutTransitionTimeoutRef.current);
      smartCutoutTransitionTimeoutRef.current = null;
    }
    if (smartCutoutPendingUrlsRef.current.length) {
      smartCutoutPendingUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
      smartCutoutPendingUrlsRef.current = [];
    }
    setIsSmartCutoutTransitioning(false);
  };

  const runSmartCutoutPageTransition = (message: { title: string; subtitle: string }, action: () => void, delay = 460) => {
    clearSmartCutoutTransition();
    setSmartCutoutTransitionMessage(message);
    setIsSmartCutoutTransitioning(true);
    smartCutoutTransitionTimeoutRef.current = window.setTimeout(() => {
      smartCutoutTransitionTimeoutRef.current = null;
      action();
      setIsSmartCutoutTransitioning(false);
    }, delay);
  };

  const openSmartCutoutUpload = () => {
    clearSmartCutoutTransition();
    setComposerMenu(null);
    toast.info("功能正在优化中");
  };

  const openWatermarkRemovalPage = () => {
    clearSmartCutoutTransition();
    setActiveQuickTool("watermark");
    setComposerMenu(null);
    setIsCloneSettingsCollapsed(false);
  };

  const loadRemoteImageFromInput = async (input: HTMLInputElement | null, fallbackName: string) => {
    const rawValue = input?.value.trim() ?? "";
    if (!rawValue) {
      toast.info("请先粘贴图片 URL");
      return null;
    }

    let imageUrl: string;
    try {
      const parsed = new URL(rawValue, window.location.href);
      if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
        throw new Error("仅支持 http 或 https 图片链接");
      }
      imageUrl = parsed.toString();
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "图片 URL 不正确");
      return null;
    }

    try {
      const response = await fetch(imageUrl);
      if (!response.ok) throw new Error(`图片读取失败（${response.status}）`);
      const blob = await response.blob();
      if (!blob.type.startsWith("image/")) throw new Error("链接内容不是图片");
      const src = URL.createObjectURL(blob);
      try {
        await readImageDimensions(src);
      } catch {
        URL.revokeObjectURL(src);
        throw new Error("图片无法预览，请换一个链接");
      }
      if (input) input.value = "";
      return {
        src,
        name: getRemoteImageName(imageUrl, fallbackName),
        format: getRemoteImageFormat(blob.type, imageUrl),
      };
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "图片导入失败");
      return null;
    }
  };

  const closeWatermarkRemovalPage = () => {
    stopWatermarkProgress();
    setActiveQuickTool(null);
    setWatermarkStatus("idle");
    setWatermarkResultUrl(null);
    setWatermarkProgress(0);
    setWatermarkImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
    });
  };

  const addWatermarkImage = (file: File) => {
    const nextImage = {
      src: URL.createObjectURL(file),
      name: file.name,
      format: getImageFileFormat(file) || "PNG / JPG / WebP",
    };
    setWatermarkImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return nextImage;
    });
    setWatermarkStatus("idle");
    setWatermarkResultUrl(null);
    setWatermarkProgress(0);
    setActiveQuickTool("watermark");
  };

  const removeWatermarkImage = () => {
    stopWatermarkProgress();
    setWatermarkStatus("idle");
    setWatermarkResultUrl(null);
    setWatermarkProgress(0);
    setWatermarkImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
    });
  };

  const handleWatermarkUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;
    addWatermarkImage(file);
    event.target.value = "";
  };

  const handleWatermarkDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsWatermarkDragging(false);
    const file = Array.from(event.dataTransfer.files).find((item) => item.type.startsWith("image/"));
    if (file) addWatermarkImage(file);
  };

  const handleWatermarkUrlImport = async () => {
    const nextImage = await loadRemoteImageFromInput(watermarkUrlInputRef.current, "watermark-source");
    if (!nextImage) return;
    setWatermarkImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return nextImage;
    });
    setWatermarkStatus("idle");
    setActiveQuickTool("watermark");
    toast.success("图片已导入");
  };

  const stopWatermarkProgress = () => {
    if (watermarkProcessTimeoutRef.current !== null) {
      window.clearInterval(watermarkProcessTimeoutRef.current);
      watermarkProcessTimeoutRef.current = null;
    }
  };

  const startWatermarkProgress = () => {
    stopWatermarkProgress();
    setWatermarkProgress(0);
    watermarkProcessTimeoutRef.current = window.setInterval(() => {
      setWatermarkProgress((prev) => {
        if (prev >= 90) {
          stopWatermarkProgress();
          return 90;
        }
        return prev + (90 - prev) * 0.06;
      });
    }, 500);
  };

  const handleWatermarkGenerate = async () => {
    if (!watermarkImage || watermarkStatus === "processing") return;
    setWatermarkStatus("processing");
    setWatermarkResultUrl(null);
    startWatermarkProgress();

    try {
      const sourceBlob = await fetch(watermarkImage.src).then((res) => res.blob());
      const sourceMime = normalizeEcommerceImageMime(sourceBlob.type || "image/png");
      const { url: imageUrl } = await aiGenerationClient.uploadAssetBinary(sourceBlob, {
        name: `watermark-source-${Date.now()}.png`,
        mimeType: sourceMime,
        scope: ecommerceOssScopes.productSource,
      });

      const { taskId } = await aiGenerationClient.createImageEditTask({
        imageUrl,
        function: "watermark-remove",
      });

      const resultUrl = await waitForTask(taskId, {
        abortRef: { current: false },
        onProgress: () => {},
      });

      if (resultUrl) {
        const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult("watermark"), "ecommerce-watermark");
        setWatermarkResultUrl(persistedUrl);
        setWatermarkStatus("done");
        stopWatermarkProgress();
        setWatermarkProgress(100);
        toast.success("去水印处理完成");
        void saveUnifiedEcommerceGenerationRecord({
          clientRecordId: crypto.randomUUID(),
          title: `去水印 ${watermarkImage.name || ""}`.trim(),
          mode: "watermark",
          taskIds: [taskId],
          sourceImages: [{ url: imageUrl, label: watermarkImage.name || "watermark-source" }],
          results: [{ url: persistedUrl, label: "去水印结果", mediaType: "image", taskId }],
          createdAt: new Date().toISOString(),
        });
      } else {
        setWatermarkStatus("failed");
        stopWatermarkProgress();
        setWatermarkProgress(0);
        toast.error("去水印未返回结果");
      }
    } catch (err) {
      setWatermarkStatus("failed");
      stopWatermarkProgress();
      setWatermarkProgress(0);
      if (err instanceof ServerRequestError && err.status === 402) {
        toast.error("余额不足，请充值后继续");
      } else {
        toast.error(err instanceof Error ? err.message : "去水印失败");
      }
    }
  };

  const handleWatermarkDownload = () => {
    if (!watermarkResultUrl || watermarkStatus !== "done") {
      toast.info("请先完成去水印");
      return;
    }
    const link = document.createElement("a");
    const safeName = (watermarkImage?.name || "watermark-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
    link.href = watermarkResultUrl;
    link.download = `${safeName || "watermark-result"}-去水印.png`;
    document.body.appendChild(link);
    link.click();
    link.remove();
  };

  const openImageTranslatePage = () => {
    clearSmartCutoutTransition();
    setComposerMenu(null);
    toast.info("功能正在优化中");
  };

  const closeImageTranslatePage = () => {
    if (translateProcessTimeoutRef.current !== null) {
      window.clearTimeout(translateProcessTimeoutRef.current);
      translateProcessTimeoutRef.current = null;
    }
    setActiveQuickTool(null);
    setTranslateStatus("idle");
    setTranslateResultUrl(null);
    setTranslateImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
    });
  };

  const addTranslateImage = (file: File) => {
    const nextImage = {
      src: URL.createObjectURL(file),
      name: file.name,
      format: getImageFileFormat(file) || "PNG / JPG / WebP",
    };
    setTranslateImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return nextImage;
    });
    setTranslateStatus("idle");
    setTranslateResultUrl(null);
    setActiveQuickTool("translate");
  };

  const removeTranslateImage = () => {
    if (translateProcessTimeoutRef.current !== null) {
      window.clearTimeout(translateProcessTimeoutRef.current);
      translateProcessTimeoutRef.current = null;
    }
    setTranslateStatus("idle");
    setTranslateResultUrl(null);
    setTranslateImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
    });
  };

  const handleTranslateUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;
    addTranslateImage(file);
    event.target.value = "";
  };

  const handleTranslateDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsTranslateDragging(false);
    const file = Array.from(event.dataTransfer.files).find((item) => item.type.startsWith("image/"));
    if (file) addTranslateImage(file);
  };

  const handleTranslateUrlImport = async () => {
    const nextImage = await loadRemoteImageFromInput(translateUrlInputRef.current, "translate-source");
    if (!nextImage) return;
    setTranslateImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return nextImage;
    });
    setTranslateStatus("idle");
    setTranslateResultUrl(null);
    toast.success("图片已导入");
  };

  const handleTranslateGenerate = async () => {
    if (!translateImage || translateStatus === "processing") return;
    const targetLabel = translateLanguageOptions.find((option) => option.value === translateLanguage)?.label || "中文";
    setTranslateStatus("processing");
    setTranslateResultUrl(null);

    try {
      const sourceBlob = await fetch(translateImage.src).then((res) => res.blob());
      const sourceMime = normalizeEcommerceImageMime(sourceBlob.type || "image/png");
      const { url: imageUrl } = await aiGenerationClient.uploadAssetBinary(sourceBlob, {
        name: `translate-source-${Date.now()}.png`,
        mimeType: sourceMime,
        scope: ecommerceOssScopes.productSource,
      });

      const prompt = `将图片中的所有文字翻译成${targetLabel}，保持原有的排版、字体风格、位置和整体设计不变，只替换文字内容。`;
      const { taskId } = await aiGenerationClient.createImageEditTask({
        imageUrl,
        function: "description_edit",
        prompt,
      });

      const resultUrl = await waitForTask(taskId, {
        kind: "image",
        abortRef: { current: false },
        onProgress: () => {},
      });

      if (resultUrl) {
        const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult("translate"), "ecommerce-translate");
        setTranslateResultUrl(persistedUrl);
        setTranslateStatus("done");
        toast.success("图片翻译完成");
        void saveUnifiedEcommerceGenerationRecord({
          clientRecordId: crypto.randomUUID(),
          title: `图片翻译（${targetLabel}） ${translateImage.name || ""}`.trim(),
          mode: "translate",
          prompt,
          taskIds: [taskId],
          sourceImages: [{ url: imageUrl, label: translateImage.name || "translate-source" }],
          results: [{ url: persistedUrl, label: "翻译结果", mediaType: "image", taskId }],
          config: { targetLanguage: translateLanguage },
          createdAt: new Date().toISOString(),
        });
      } else {
        setTranslateStatus("failed");
        toast.error("翻译未返回结果");
      }
    } catch (err) {
      setTranslateStatus("failed");
      if (err instanceof ServerRequestError && err.status === 402) {
        toast.error("余额不足，请充值后继续");
      } else {
        toast.error(err instanceof Error ? err.message : "图片翻译失败");
      }
    }
  };

  const handleTranslateDownload = () => {
    if (!translateResultUrl || translateStatus !== "done") {
      toast.info("请先完成图片翻译");
      return;
    }
    const link = document.createElement("a");
    const safeName = (translateImage?.name || "translate-result").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
    link.href = translateResultUrl;
    link.download = `${safeName || "translate-result"}-翻译.png`;
    document.body.appendChild(link);
    link.click();
    link.remove();
  };

  const openImageWorkbenchPage = () => {
    clearSmartCutoutTransition();
    setActiveQuickTool("image-edit");
    setComposerMenu(null);
    setIsCloneSettingsCollapsed(false);
    setImageWorkbenchStatus("idle");
  };

  const closeImageWorkbenchPage = () => {
    setActiveQuickTool(null);
    setImageWorkbenchStatus("idle");
    setImageWorkbenchResultUrl(null);
    setImageWorkbenchPrompt("");
    setImageWorkbenchMaskStrokes([]);
    setImageWorkbenchBrushCursor(null);
    clearImageWorkbenchMaskCanvas();
    imageWorkbenchMaskPaintingRef.current = false;
    imageWorkbenchActiveStrokeIdRef.current = null;
    setImageWorkbenchImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
    });
  };

  const addImageWorkbenchImage = (file: File) => {
    if (!file.type.startsWith("image/")) {
      toast.error("请上传图片文件");
      return;
    }
    const nextImage = {
      src: URL.createObjectURL(file),
      name: file.name,
      format: getImageFileFormat(file) || "PNG / JPG / WebP",
    };
    setImageWorkbenchImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return nextImage;
    });
    setImageWorkbenchStatus("idle");
    setImageWorkbenchResultUrl(null);
    setImageWorkbenchMaskStrokes([]);
    setImageWorkbenchBrushCursor(null);
    clearImageWorkbenchMaskCanvas();
    imageWorkbenchActiveStrokeIdRef.current = null;
    setActiveQuickTool("image-edit");
  };

  const removeImageWorkbenchImage = () => {
    setImageWorkbenchStatus("idle");
    setImageWorkbenchResultUrl(null);
    setImageWorkbenchMaskStrokes([]);
    setImageWorkbenchBrushCursor(null);
    clearImageWorkbenchMaskCanvas();
    imageWorkbenchMaskPaintingRef.current = false;
    imageWorkbenchActiveStrokeIdRef.current = null;
    setImageWorkbenchImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return null;
    });
  };

  const handleImageWorkbenchUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;
    addImageWorkbenchImage(file);
    event.target.value = "";
  };

  const handleImageWorkbenchDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsImageWorkbenchDragging(false);
    const file = Array.from(event.dataTransfer.files).find((item) => item.type.startsWith("image/"));
    if (file) addImageWorkbenchImage(file);
  };

  const handleImageWorkbenchUrlImport = async () => {
    const nextImage = await loadRemoteImageFromInput(imageWorkbenchUrlInputRef.current, "image-workbench-source");
    if (!nextImage) return;
    setImageWorkbenchImage((current) => {
      if (current?.src) URL.revokeObjectURL(current.src);
      return nextImage;
    });
    setImageWorkbenchStatus("idle");
    setImageWorkbenchMaskStrokes([]);
    setImageWorkbenchBrushCursor(null);
    clearImageWorkbenchMaskCanvas();
    imageWorkbenchActiveStrokeIdRef.current = null;
    setActiveQuickTool("image-edit");
    toast.success("图片已导入");
  };

  const stopWorkbenchProgress = () => {
    if (imageWorkbenchProgressRef.current !== null) {
      window.clearInterval(imageWorkbenchProgressRef.current);
      imageWorkbenchProgressRef.current = null;
    }
  };

  const startWorkbenchProgress = () => {
    stopWorkbenchProgress();
    setImageWorkbenchProgress(0);
    imageWorkbenchProgressRef.current = window.setInterval(() => {
      setImageWorkbenchProgress((prev) => {
        if (prev >= 90) {
          stopWorkbenchProgress();
          return 90;
        }
        return prev + (90 - prev) * 0.06;
      });
    }, 500);
  };

  const exportWorkbenchMask = (): string | null => {
    const canvas = imageWorkbenchMaskCanvasRef.current;
    if (!canvas) return null;
    const ctx = canvas.getContext("2d");
    if (!ctx) return null;
    const w = canvas.width;
    const h = canvas.height;
    const maskCanvas = document.createElement("canvas");
    maskCanvas.width = w;
    maskCanvas.height = h;
    const maskCtx = maskCanvas.getContext("2d")!;
    maskCtx.fillStyle = "#000000";
    maskCtx.fillRect(0, 0, w, h);
    const imgData = ctx.getImageData(0, 0, w, h);
    const maskData = maskCtx.getImageData(0, 0, w, h);
    for (let i = 3; i < imgData.data.length; i += 4) {
      if (imgData.data[i] > 0) {
        const pi = i - 3;
        maskData.data[pi] = 255;
        maskData.data[pi + 1] = 255;
        maskData.data[pi + 2] = 255;
        maskData.data[pi + 3] = 255;
      }
    }
    maskCtx.putImageData(maskData, 0, 0);
    return maskCanvas.toDataURL("image/png");
  };

  const handleImageWorkbenchGenerate = async () => {
    if (!imageWorkbenchImage) {
      toast.info("请先上传图片");
      return;
    }
    setImageWorkbenchStatus("processing");
    setImageWorkbenchResultUrl(null);
    startWorkbenchProgress();

    try {
      const sourceBlob = await fetch(imageWorkbenchImage.src).then((res) => res.blob());
      const sourceMime = normalizeEcommerceImageMime(sourceBlob.type || "image/png");
      const { url: imageUrl } = await aiGenerationClient.uploadAssetBinary(sourceBlob, {
        name: `inpaint-source-${Date.now()}.png`,
        mimeType: sourceMime,
        scope: ecommerceOssScopes.productSource,
      });

      let maskUrl: string | undefined;
      if (imageWorkbenchMaskStrokes.length > 0) {
        const maskDataUrl = exportWorkbenchMask();
        if (maskDataUrl) {
          const { url } = await aiGenerationClient.uploadAsset({
            dataUrl: maskDataUrl,
            name: `inpaint-mask-${Date.now()}.png`,
            mimeType: "image/png",
            scope: ecommerceOssScopes.productSource,
          });
          maskUrl = url;
        }
      }

      const { taskId } = await aiGenerationClient.createImageEditTask({
        imageUrl,
        function: "inpaint",
        prompt: imageWorkbenchPrompt || undefined,
        maskUrl,
        ratio: imageWorkbenchRatio,
      });

      const resultUrl = await waitForTask(taskId, {
        abortRef: { current: false },
        onProgress: () => {},
      });

      if (resultUrl) {
        const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult("inpaint"), "ecommerce-inpaint");
        setImageWorkbenchResultUrl(persistedUrl);
        setImageWorkbenchStatus("done");
        stopWorkbenchProgress();
        setImageWorkbenchProgress(100);
        toast.success("局部重绘已完成");
        void saveUnifiedEcommerceGenerationRecord({
          clientRecordId: crypto.randomUUID(),
          title: imageWorkbenchPrompt.trim() || `图片修改 ${imageWorkbenchImage.name || ""}`.trim(),
          mode: "inpaint",
          prompt: imageWorkbenchPrompt || undefined,
          taskIds: [taskId],
          sourceImages: [{ url: imageUrl, label: imageWorkbenchImage.name || "inpaint-source" }],
          results: [{ url: persistedUrl, label: "局部重绘结果", mediaType: "image", taskId }],
          config: { ratio: imageWorkbenchRatio },
          createdAt: new Date().toISOString(),
        });
      } else {
        setImageWorkbenchStatus("failed");
        stopWorkbenchProgress();
        setImageWorkbenchProgress(0);
        toast.error("重绘未返回结果");
      }
    } catch (err) {
      setImageWorkbenchStatus("failed");
      stopWorkbenchProgress();
      setImageWorkbenchProgress(0);
      if (err instanceof ServerRequestError && err.status === 402) {
        toast.error("余额不足，请充值后继续");
      } else {
        toast.error(err instanceof Error ? err.message : "重绘失败");
      }
    }
  };

  const syncImageWorkbenchMaskCanvas = () => {
    const canvas = imageWorkbenchMaskCanvasRef.current;
    if (!canvas) return null;
    const rect = canvas.getBoundingClientRect();
    const dpr = window.devicePixelRatio || 1;
    const width = Math.max(1, Math.round(rect.width * dpr));
    const height = Math.max(1, Math.round(rect.height * dpr));
    if (canvas.width !== width || canvas.height !== height) {
      canvas.width = width;
      canvas.height = height;
    }
    const context = canvas.getContext("2d");
    if (!context) return null;
    context.setTransform(dpr, 0, 0, dpr, 0, 0);
    context.lineCap = "round";
    context.lineJoin = "round";
    context.strokeStyle = "rgba(30, 189, 219, 0.52)";
    context.fillStyle = "rgba(30, 189, 219, 0.52)";
    context.lineWidth = imageWorkbenchBrushSize;
    return { canvas, context, rect };
  };

  const clearImageWorkbenchMaskCanvas = () => {
    const canvas = imageWorkbenchMaskCanvasRef.current;
    if (!canvas) return;
    const context = canvas.getContext("2d");
    if (!context) return;
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
  };

  const getImageWorkbenchMaskPoint = (event: ReactPointerEvent<HTMLElement>) => {
    const canvas = imageWorkbenchMaskCanvasRef.current;
    const rect = (canvas ?? event.currentTarget).getBoundingClientRect();
    const x = clampNumber(event.clientX - rect.left, 0, rect.width);
    const y = clampNumber(event.clientY - rect.top, 0, rect.height);
    return { x, y };
  };

  const appendImageWorkbenchMaskPoint = (event: ReactPointerEvent<HTMLElement>) => {
    const point = getImageWorkbenchMaskPoint(event);
    const rect = imageWorkbenchMaskCanvasRef.current?.getBoundingClientRect();
    setImageWorkbenchBrushCursor(rect ? { x: (point.x / Math.max(rect.width, 1)) * 100, y: (point.y / Math.max(rect.height, 1)) * 100 } : null);
    setImageWorkbenchStatus((current) => (current === "done" ? "idle" : current));
    const activeStrokeId = imageWorkbenchActiveStrokeIdRef.current;
    if (!activeStrokeId) return;
    const lastPoint = imageWorkbenchLastMaskPointRef.current;
    if (lastPoint && Math.hypot(point.x - lastPoint.x, point.y - lastPoint.y) < 1.5) return;
    const synced = syncImageWorkbenchMaskCanvas();
    if (!synced) return;
    synced.context.beginPath();
    synced.context.moveTo(lastPoint?.x ?? point.x, lastPoint?.y ?? point.y);
    synced.context.lineTo(point.x, point.y);
    synced.context.stroke();
    imageWorkbenchLastMaskPointRef.current = point;
  };

  const handleImageWorkbenchMaskPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (!imageWorkbenchImage || event.button !== 0) return;
    event.preventDefault();
    event.currentTarget.setPointerCapture(event.pointerId);
    syncImageWorkbenchMaskCanvas();
    const point = getImageWorkbenchMaskPoint(event);
    const rect = imageWorkbenchMaskCanvasRef.current?.getBoundingClientRect();
    const strokeId = `mask-${Date.now()}`;
    imageWorkbenchMaskPaintingRef.current = true;
    imageWorkbenchActiveStrokeIdRef.current = strokeId;
    imageWorkbenchLastMaskPointRef.current = point;
    setImageWorkbenchBrushCursor(rect ? { x: (point.x / Math.max(rect.width, 1)) * 100, y: (point.y / Math.max(rect.height, 1)) * 100 } : null);
    setImageWorkbenchStatus((current) => (current === "done" ? "idle" : current));
    setImageWorkbenchMaskStrokes((current) => [...current, { id: strokeId, size: imageWorkbenchBrushSize, points: [] }]);
    const synced = syncImageWorkbenchMaskCanvas();
    if (synced) {
      synced.context.beginPath();
      synced.context.arc(point.x, point.y, imageWorkbenchBrushSize / 2, 0, Math.PI * 2);
      synced.context.fill();
    }
  };

  const handleImageWorkbenchMaskPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
    if (!imageWorkbenchImage) return;
    const point = getImageWorkbenchMaskPoint(event);
    const rect = imageWorkbenchMaskCanvasRef.current?.getBoundingClientRect();
    setImageWorkbenchBrushCursor(rect ? { x: (point.x / Math.max(rect.width, 1)) * 100, y: (point.y / Math.max(rect.height, 1)) * 100 } : null);
    if (!imageWorkbenchMaskPaintingRef.current) return;
    appendImageWorkbenchMaskPoint(event);
  };

  const stopImageWorkbenchMaskPainting = () => {
    imageWorkbenchMaskPaintingRef.current = false;
    imageWorkbenchActiveStrokeIdRef.current = null;
    imageWorkbenchLastMaskPointRef.current = null;
  };

  const clearQuickSetSelectTimer = () => {
    if (quickSetSelectTimerRef.current) {
      window.clearTimeout(quickSetSelectTimerRef.current);
      quickSetSelectTimerRef.current = null;
    }
  };

  const resetQuickSetSelectState = () => {
    clearQuickSetSelectTimer();
    openQuickSetSelectRef.current = null;
    visibleQuickSetSelectRef.current = null;
    setOpenQuickSetSelect(null);
    setVisibleQuickSetSelect(null);
    setIsQuickSetSelectClosing(false);
  };

  const closeQuickSetSelect = () => {
    if (!visibleQuickSetSelectRef.current) {
      openQuickSetSelectRef.current = null;
      setOpenQuickSetSelect(null);
      return;
    }
    clearQuickSetSelectTimer();
    openQuickSetSelectRef.current = null;
    setOpenQuickSetSelect(null);
    setIsQuickSetSelectClosing(true);
    quickSetSelectTimerRef.current = window.setTimeout(() => {
      visibleQuickSetSelectRef.current = null;
      setVisibleQuickSetSelect(null);
      setIsQuickSetSelectClosing(false);
      quickSetSelectTimerRef.current = null;
    }, 420);
  };

  const showQuickSetSelect = (key: CloneBasicSelectKey) => {
    clearQuickSetSelectTimer();
    if (visibleQuickSetSelectRef.current && visibleQuickSetSelectRef.current !== key && openQuickSetSelectRef.current) {
      openQuickSetSelectRef.current = null;
      setOpenQuickSetSelect(null);
      setIsQuickSetSelectClosing(true);
      quickSetSelectTimerRef.current = window.setTimeout(() => {
        visibleQuickSetSelectRef.current = key;
        openQuickSetSelectRef.current = key;
        setVisibleQuickSetSelect(key);
        setOpenQuickSetSelect(key);
        setIsQuickSetSelectClosing(false);
        quickSetSelectTimerRef.current = null;
      }, 180);
      return;
    }
    visibleQuickSetSelectRef.current = key;
    openQuickSetSelectRef.current = key;
    setVisibleQuickSetSelect(key);
    setOpenQuickSetSelect(key);
    setIsQuickSetSelectClosing(false);
  };

  const toggleQuickSetSelect = (key: CloneBasicSelectKey) => {
    if (openQuickSetSelectRef.current === key) {
      closeQuickSetSelect();
      return;
    }
    showQuickSetSelect(key);
  };

  const openQuickDetailPage = () => {
    clearSmartCutoutTransition();
    setActiveQuickTool("detail");
    setComposerMenu(null);
    setIsCloneSettingsCollapsed(false);
    setIsQuickPanelCollapsed(false);
    setPreviewZoom(1);
    resetQuickSetSelectState();
    if (!selectedDetailModules.length) setSelectedDetailModules(defaultCloneDetailModuleIds);
  };

  const openHotClonePage = () => {
    clearSmartCutoutTransition();
    setActiveQuickTool("hot");
    setComposerMenu(null);
    setIsCloneSettingsCollapsed(false);
    setIsQuickPanelCollapsed(false);
    setPreviewZoom(1);
    resetQuickSetSelectState();
  };

  const closeSmartCutoutTool = () => {
    runSmartCutoutPageTransition(
      {
        title: "正在返回首页",
        subtitle: "回到电商智能体",
      },
      () => {
        setSmartCutoutBatchImages((current) => {
          revokeSmartCutoutItems(current);
          return [];
        });
        setSmartCutoutImage((current) => {
          revokeSmartCutoutItem(current);
          return null;
        });
        setIsSmartCutoutComparing(false);
        setActiveQuickTool(null);
        setComposerMenu(null);
      },
    );
  };

  const goSmartCutoutPrevious = () => {
    if (!smartCutoutImage) {
      closeSmartCutoutTool();
      return;
    }
    runSmartCutoutPageTransition(
      {
        title: "正在返回上一页",
        subtitle: "回到图片上传页",
      },
      () => {
        setSmartCutoutBatchImages((current) => {
          revokeSmartCutoutItems(current);
          return [];
        });
        setSmartCutoutImage((current) => {
          revokeSmartCutoutItem(current);
          return null;
        });
        setIsSmartCutoutComparing(false);
      },
    );
  };

  const addSmartCutoutImage = (files: File[]) => {
    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
    if (!imageFiles.length) {
      toast.error("请上传图片文件");
      return;
    }
    clearSmartCutoutTransition();
    setSmartCutoutBatchImages((current) => {
      revokeSmartCutoutItems(current);
      return [];
    });
    setSmartCutoutImage((current) => {
      revokeSmartCutoutItem(current);
      return null;
    });
    setIsSmartCutoutComparing(false);
    const nextImages = imageFiles.map((file) => {
      const originalSrc = URL.createObjectURL(file);
      return { src: originalSrc, originalSrc, name: file.name };
    });
    smartCutoutPendingUrlsRef.current = nextImages.map((item) => item.src);
    setActiveQuickTool("cutout");
    setSmartCutoutSizeKey("original");
    setSmartCutoutTransitionMessage({
      title: imageFiles.length > 1 ? "正在批量抠图" : "正在智能抠图",
      subtitle: imageFiles.length > 1 ? `正在处理 ${imageFiles.length} 张图片` : "即将进入图片编辑室",
    });
    setIsSmartCutoutTransitioning(true);
    smartCutoutTransitionTimeoutRef.current = window.setTimeout(() => {
      smartCutoutTransitionTimeoutRef.current = null;
      smartCutoutPendingUrlsRef.current = [];
      setSmartCutoutBatchImages(nextImages);
      setSmartCutoutImage(nextImages[0]);
      setIsSmartCutoutTransitioning(false);
    }, 620);
  };

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

  const handleSmartCutoutDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    setIsSmartCutoutDragging(false);
    const files = Array.from(event.dataTransfer.files);
    if (files.length) addSmartCutoutImage(files);
  };

  const smartCutoutBackgroundValue = useMemo(() => {
    const rgb = hexToRgb(smartCutoutBackgroundColor) ?? { r: 255, g: 255, b: 255 };
    if (smartCutoutBackgroundAlpha >= 100) return smartCutoutBackgroundColor;
    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${Math.round(smartCutoutBackgroundAlpha) / 100})`;
  }, [smartCutoutBackgroundAlpha, smartCutoutBackgroundColor]);

  const smartCutoutColorHsv = useMemo(() => hexToHsv(smartCutoutBackgroundColor), [smartCutoutBackgroundColor]);

  const selectedSmartCutoutSize = useMemo(
    () => smartCutoutSizeOptions.find((option) => option.key === smartCutoutSizeKey) ?? smartCutoutSizeOptions[0],
    [smartCutoutSizeKey],
  );

  const previewSmartCutoutSize = isSmartCutoutComparing ? smartCutoutSizeOptions[0] : selectedSmartCutoutSize;
  const previewSmartCutoutSizeKey = isSmartCutoutComparing ? "original" : smartCutoutSizeKey;
  const previewSmartCutoutImageSrc = isSmartCutoutComparing ? smartCutoutImage?.originalSrc ?? smartCutoutImage?.src : smartCutoutImage?.src;

  const smartCutoutFrameStyle = useMemo<CSSProperties>(
    () => ({
      "--smart-cutout-bg": smartCutoutBackgroundValue,
      "--smart-cutout-frame-width": previewSmartCutoutSize.frameWidth,
      "--smart-cutout-frame-aspect": previewSmartCutoutSize.frameAspect,
      "--smart-cutout-image-max-width": previewSmartCutoutSize.imageMaxWidth,
      "--smart-cutout-image-max-height": previewSmartCutoutSize.imageMaxHeight,
    } as CSSProperties),
    [previewSmartCutoutSize, smartCutoutBackgroundValue],
  );

  const showSmartCutoutOriginalCompare = (event: ReactPointerEvent<HTMLButtonElement>) => {
    event.currentTarget.setPointerCapture(event.pointerId);
    setIsSmartCutoutComparing(true);
  };

  const hideSmartCutoutOriginalCompare = () => {
    setIsSmartCutoutComparing(false);
  };

  const applySmartCutoutHsv = (h: number, s: number, v: number) => {
    const rgb = hsvToRgb(h, s, v);
    setSmartCutoutBackgroundColor(rgbToHex(rgb.r, rgb.g, rgb.b));
  };

  const updateSmartCutoutColorFromPoint = (element: HTMLElement, clientX: number, clientY: number) => {
    const rect = element.getBoundingClientRect();
    const saturation = clampNumber(((clientX - rect.left) / rect.width) * 100, 0, 100);
    const value = clampNumber(100 - ((clientY - rect.top) / rect.height) * 100, 0, 100);
    applySmartCutoutHsv(smartCutoutColorHsv.h, saturation, value);
  };

  const handleSmartCutoutColorPlanePointer = (event: ReactPointerEvent<HTMLButtonElement>) => {
    event.preventDefault();
    event.currentTarget.setPointerCapture(event.pointerId);
    updateSmartCutoutColorFromPoint(event.currentTarget, event.clientX, event.clientY);
  };

  const handleSmartCutoutColorPlaneMove = (event: ReactPointerEvent<HTMLButtonElement>) => {
    if (event.buttons !== 1) return;
    updateSmartCutoutColorFromPoint(event.currentTarget, event.clientX, event.clientY);
  };

  const handleSmartCutoutHexChange = (value: string) => {
    const nextValue = value.startsWith("#") ? value : `#${value}`;
    if (!/^#[0-9a-fA-F]{0,6}$/.test(nextValue)) return;
    setSmartCutoutHexDraft(nextValue);
    const normalized = normalizeHexColor(nextValue);
    if (normalized) setSmartCutoutBackgroundColor(normalized);
  };

  const scrollSmartCutoutTools = (direction: -1 | 1) => {
    smartCutoutToolsRef.current?.scrollBy({
      left: direction * 340,
      behavior: "smooth",
    });
  };

  const handleSmartCutoutDownload = async () => {
    if (!smartCutoutImage) {
      toast.error("请先上传图片");
      return;
    }
    try {
      const image = new Image();
      image.decoding = "async";
      const imageLoaded = new Promise<void>((resolve, reject) => {
        image.onload = () => resolve();
        image.onerror = () => reject(new Error("图片加载失败"));
      });
      image.src = smartCutoutImage.src;
      await imageLoaded;

      const aspect = parseSmartCutoutAspect(selectedSmartCutoutSize.frameAspect);
      const naturalWidth = Math.max(1, image.naturalWidth || image.width || 1200);
      const naturalHeight = Math.max(1, image.naturalHeight || image.height || 900);
      const outputWidth = "outputWidth" in selectedSmartCutoutSize ? selectedSmartCutoutSize.outputWidth : undefined;
      const outputHeight = "outputHeight" in selectedSmartCutoutSize ? selectedSmartCutoutSize.outputHeight : undefined;
      let canvasWidth = naturalWidth;
      let canvasHeight = naturalHeight;
      if (outputWidth && outputHeight) {
        canvasWidth = outputWidth;
        canvasHeight = outputHeight;
      } else if (aspect) {
        const longSide = 1600;
        if (aspect >= 1) {
          canvasWidth = longSide;
          canvasHeight = Math.round(longSide / aspect);
        } else {
          canvasHeight = longSide;
          canvasWidth = Math.round(longSide * aspect);
        }
      } else {
        const maxSide = 1600;
        const scale = Math.min(1, maxSide / Math.max(naturalWidth, naturalHeight));
        canvasWidth = Math.max(1, Math.round(naturalWidth * scale));
        canvasHeight = Math.max(1, Math.round(naturalHeight * scale));
      }

      const canvas = document.createElement("canvas");
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      const context = canvas.getContext("2d");
      if (!context) throw new Error("无法生成图片");

      context.clearRect(0, 0, canvasWidth, canvasHeight);
      context.fillStyle = smartCutoutBackgroundValue;
      context.fillRect(0, 0, canvasWidth, canvasHeight);

      const maxWidthRatio = parseSmartCutoutPercent(selectedSmartCutoutSize.imageMaxWidth, 0.82);
      const maxHeightRatio = parseSmartCutoutPercent(selectedSmartCutoutSize.imageMaxHeight, 0.82);
      const fitScale = Math.min((canvasWidth * maxWidthRatio) / naturalWidth, (canvasHeight * maxHeightRatio) / naturalHeight, 1);
      const drawWidth = Math.round(naturalWidth * fitScale);
      const drawHeight = Math.round(naturalHeight * fitScale);
      const drawX = Math.round((canvasWidth - drawWidth) / 2);
      const drawY = Math.round((canvasHeight - drawHeight) / 2);
      context.drawImage(image, drawX, drawY, drawWidth, drawHeight);

      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, "image/png"));
      if (!blob) throw new Error("图片导出失败");

      const objectUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      const safeName = (smartCutoutImage.name || "smart-cutout").replace(/\.[^.]+$/, "").replace(/[\\/:*?"<>|]+/g, "-");
      link.href = objectUrl;
      link.download = `${safeName || "smart-cutout"}-${selectedSmartCutoutSize.label}.png`;
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.setTimeout(() => URL.revokeObjectURL(objectUrl), 1000);
      toast.success("已下载图片");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "下载图片失败");
    }
  };

  useEffect(() => {
    setSmartCutoutHexDraft(smartCutoutBackgroundColor);
  }, [smartCutoutBackgroundColor]);

  useEffect(() => {
    if (!isSmartCutoutPaletteOpen) return undefined;
    const handlePointerDown = (event: PointerEvent) => {
      if (!smartCutoutPaletteRef.current?.contains(event.target as Node)) {
        setIsSmartCutoutPaletteOpen(false);
      }
    };
    document.addEventListener("pointerdown", handlePointerDown);
    return () => document.removeEventListener("pointerdown", handlePointerDown);
  }, [isSmartCutoutPaletteOpen]);

  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 = notifyRejectedImages(files);
    if (!imageFiles.length) return;
    const remainingSlots = maxCloneProductImages - productImages.length;
    if (remainingSlots <= 0) {
      toast.info(`最多上传 ${maxCloneProductImages} 张素材`);
      return;
    }
    if (imageFiles.length > remainingSlots) {
      toast.info(`最多上传 ${maxCloneProductImages} 张素材，已自动保留前 ${remainingSlots} 张`);
    }

    const localItems = createLocalImageItems(imageFiles, remainingSlots, "product");
    setProductImages((current) => [...current, ...localItems].slice(0, maxCloneProductImages));
    setStatus("ready");
    setResults([]);

    Promise.all(localItems.map(async (item) => {
      const uploaded = await uploadImageItem(item);
      if (uploaded.src) {
        URL.revokeObjectURL(item.src);
      }
      return { id: item.id, uploaded };
    })).then((results) => {
      const updateMap = new Map(results.map((result) => [result.id, result.uploaded]));
      setProductImages((current) => current.map((item) => {
        const update = updateMap.get(item.id);
        if (!update) return item;
        return { ...item, ...update };
      }));
    }).catch(() => {
      toast.error("商品图后台上传失败，请检查网络后重试");
    });
  };

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

  const addComposerAssets = (files: File[]) => {
    const imageFiles = files.filter((file) => file.type.startsWith("image/"));
    const unsupportedCount = files.length - imageFiles.length;
    if (imageFiles.length) void addProductImages(imageFiles);
    if (unsupportedCount > 0) toast.info("仅支持上传图片文件");
  };

  const handleComposerAssetUpload = (event: ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files;
    if (!files?.length) return;
    addComposerAssets(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) void 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 = notifyRejectedImages(files);
    if (!imageFiles.length) return;
    const remainingSlots = maxCloneReferenceImages - cloneReferenceImages.length;
    if (remainingSlots <= 0) return;

    const localItems = createLocalImageItems(imageFiles, remainingSlots, "reference");
    setCloneReferenceImages((current) => [...current, ...localItems].slice(0, maxCloneReferenceImages));
    hydrateCloneReferenceImageMeta(localItems);

    Promise.all(localItems.map(async (item) => {
      const uploaded = await uploadImageItem(item);
      if (uploaded.src) URL.revokeObjectURL(item.src);
      return { id: item.id, uploaded };
    })).then((results) => {
      const updateMap = new Map(results.map((result) => [result.id, result.uploaded]));
      setCloneReferenceImages((current) => current.map((item) => {
        const update = updateMap.get(item.id);
        return update ? { ...item, ...update } : item;
      }));
    }).catch(() => {
      toast.error("参考图后台上传失败，请检查网络后重试");
    });
  };

  const removeCloneReferenceImage = (imageId: string) => {
    setCloneReferenceImages((current) => {
      const next = current.filter((item) => item.id !== imageId);
      if (next.length === 0) {
        setHotStatus("idle");
        setHotResultUrl(null);
      }
      return next;
    });
  };

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

  const [isCloneReferenceDragging, setIsCloneReferenceDragging] = useState(false);

  const handleCloneReferenceDragOver = (event: DragEvent<HTMLButtonElement>) => {
    event.preventDefault();
    event.stopPropagation();
    if (event.dataTransfer.types.includes("Files")) {
      setIsCloneReferenceDragging(true);
    }
  };

  const handleCloneReferenceDragLeave = (event: DragEvent<HTMLButtonElement>) => {
    event.preventDefault();
    event.stopPropagation();
    if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) {
      setIsCloneReferenceDragging(false);
    }
  };

  const handleCloneReferenceDrop = (event: DragEvent<HTMLButtonElement>) => {
    event.preventDefault();
    event.stopPropagation();
    setIsCloneReferenceDragging(false);
    const files = Array.from(event.dataTransfer.files);
    if (files.length) addCloneReferenceImages(files);
  };

  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 = () => {
    window.removeEventListener("pointerup", clearCloneSetCountHold);
    window.removeEventListener("pointercancel", 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) => {
      if (current.includes(moduleId)) return current.filter((item) => item !== moduleId);
      if (current.length >= maxDetailModuleSelection) {
        toast.info(`最多选择 ${maxDetailModuleSelection} 个模块`);
        return current;
      }
      return [...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) =>
      normalizeRatioForPlatform(normalizedPlatform, current, cloneOutput),
    );
    setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market));
  };

  const handleCloneOutputChange = (nextOutput: CloneOutputKey) => {
    setCloneOutput(nextOutput);
    setIsCloneTemplateStripVisible(true);
    if (nextOutput !== "video") setIsVideoWorkspaceVisible(false);
    setRatio((current) =>
      normalizeRatioForPlatform(platform, current, nextOutput),
    );
  };

  const handleCommerceScenarioClick = (nextScenario: CommerceScenarioKey) => {
    if (nextScenario === activeCommerceScenario) {
      setActiveCommerceScenario(null);
      setIsCloneTemplateStripVisible(false);
      setComposerMenu(null);
      return;
    }
    setActiveCommerceScenario(nextScenario);
    setIsCloneTemplateStripVisible(true);
    setComposerMenu(null);
    if (nextScenario === "popular") return;
    const mappedOutput = commerceScenarioOutputMap[nextScenario];
    if (mappedOutput !== cloneOutput) handleCloneOutputChange(mappedOutput);
  };

  const handleCommerceScenarioMoreToggle = () => {
    setIsCommerceScenarioMoreOpen((visible) => !visible);
    setComposerMenu(null);
  };

  const scrollCommerceTemplateStrip = (direction: -1 | 1) => {
    const strip = templateStripRef.current;
    if (!strip) return;
    const firstCard = strip.querySelector<HTMLElement>(".ecom-command-template-card");
    const cardStep = firstCard ? firstCard.offsetWidth + 14 : 0;
    const viewportStep = Math.max(280, strip.clientWidth * 0.78);
    strip.scrollBy({
      left: direction * Math.max(cardStep, viewportStep),
      behavior: "smooth",
    });
  };

  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));
    setDetailRatio((current) => getQuickSetRatioValue(current));
  };

  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 latestCloneSettingSnapshot = useMemo(
    () => createCloneSettingSnapshot(cloneSettingName, "clone-setting-latest"),
    [
      cloneOutput,
      platform,
      market,
      language,
      ratio,
      cloneSetCounts,
      selectedCloneDetailModules,
      cloneModelPanelTab,
      selectedCloneModelScenes,
      cloneModelCustomScene,
      cloneModelGender,
      cloneModelAge,
      cloneModelEthnicity,
      cloneModelBody,
      cloneModelAppearance,
      cloneVideoQuality,
      cloneVideoDuration,
      cloneVideoSmart,
      cloneReferenceMode,
      cloneReplicateLevel,
      requirement,
      cloneSettingName,
    ],
  );

  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 : defaultCloneOutput;
    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).slice(0, maxDetailModuleSelection));
    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 = latestCloneSettingSnapshot;
  }, [latestCloneSettingSnapshot]);

  useEffect(() => {
    window.localStorage.removeItem(cloneLatestSettingStorageKey);
  }, []);

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

  useEffect(() => {
    setRatio((current) => {
      const platformRatios = getPlatformRatioOptions(platform, cloneOutput);
      if (platformRatios.includes(current)) return current;
      const normalizedRatio = normalizeRatioToken(current);
      const matchedRatio = platformRatios.find((option) => normalizeRatioToken(option).includes(normalizedRatio));
      return matchedRatio ?? getPlatformDefaultRatio(platform, cloneOutput);
    });
  }, [cloneOutput, 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 (!composerMenu && !(status === "done" && !isCommandComposerCompact)) return undefined;

    const handlePointerDown = (event: PointerEvent) => {
      const target = event.target;
      if (!(target instanceof Node)) return;
      const composer = commandComposerWrapRef.current;
      if (composer?.contains(target)) return;

      if (composerMenu && composerMenu !== "settings") setComposerMenu(null);
      if (status === "done" && !isCommandComposerCompact) setIsCommandComposerCompact(true);
    };

    document.addEventListener("pointerdown", handlePointerDown);
    return () => document.removeEventListener("pointerdown", handlePointerDown);
  }, [composerMenu, isCommandComposerCompact, status]);

  useEffect(() => {
    if (composerMenuCloseTimeoutRef.current !== null) {
      window.clearTimeout(composerMenuCloseTimeoutRef.current);
      composerMenuCloseTimeoutRef.current = null;
    }
    if (composerMenu) {
      setVisibleComposerMenu(composerMenu);
      setIsComposerMenuClosing(false);
      return;
    }
    if (!visibleComposerMenu) return;
    setIsComposerMenuClosing(true);
    composerMenuCloseTimeoutRef.current = window.setTimeout(() => {
      composerMenuCloseTimeoutRef.current = null;
      setVisibleComposerMenu(null);
      setIsComposerMenuClosing(false);
    }, 220);
  }, [composerMenu, visibleComposerMenu]);

  useEffect(
    () => () => {
      if (composerMenuCloseTimeoutRef.current !== null) {
        window.clearTimeout(composerMenuCloseTimeoutRef.current);
      }
    },
    [],
  );

  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 addGarmentImages = (files: File[]) => {
    const uploadedFiles = notifyRejectedImages(files);
    if (!uploadedFiles.length) return;
    const remainingSlots = 5 - garmentImages.length;
    if (remainingSlots <= 0) return;

    const localItems = createLocalImageItems(uploadedFiles, remainingSlots, "garment");
    setGarmentImages((current) => [...current, ...localItems].slice(0, 5));
    setTryOnStatus("ready");

    Promise.all(localItems.map(async (item) => {
      const uploaded = await uploadImageItem(item);
      if (uploaded.src) URL.revokeObjectURL(item.src);
      return { id: item.id, uploaded };
    })).then((results) => {
      const updateMap = new Map(results.map((result) => [result.id, result.uploaded]));
      setGarmentImages((current) => current.map((item) => {
        const update = updateMap.get(item.id);
        return update ? { ...item, ...update } : item;
      }));
    }).catch(() => {
      toast.error("服饰图后台上传失败，请检查网络后重试");
    });
  };

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

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

  const handleDetailDrop = (event: DragEvent<HTMLDivElement>) => {
    event.preventDefault();
    const files = Array.from(event.dataTransfer.files);
    if (files.length) void addDetailImages(files);
  };

  const removeDetailImage = (imageId: string) => {
    setDetailProductImages((current) => {
      const next = current.filter((item) => item.id !== imageId);
      if (next.length === 0) {
        setDetailStatus("idle");
        setDetailResultUrl(null);
      }
      return next;
    });
  };

  const blobToDataUrl = (blob: Blob): Promise<string> =>
    new Promise((resolve, reject) => {
      const reader = new FileReader();
      reader.onload = () => resolve(String(reader.result || ""));
      reader.onerror = () => reject(reader.error || new Error("文件读取失败"));
      reader.readAsDataURL(blob);
    });

  const addDetailImages = (files: File[]) => {
    const uploadedFiles = notifyRejectedImages(files);
    if (!uploadedFiles.length) return;
    const remainingSlots = 3 - detailProductImages.length;
    if (remainingSlots <= 0) return;

    const localItems = createLocalImageItems(uploadedFiles, remainingSlots, "detail");
    setDetailProductImages((current) => [...current, ...localItems].slice(0, 3));
    setDetailStatus("ready");
    setDetailResultUrl(null);

    Promise.all(localItems.map(async (item) => {
      const uploaded = await uploadImageItem(item);
      if (uploaded.src) URL.revokeObjectURL(item.src);
      return { id: item.id, uploaded };
    })).then((results) => {
      const updateMap = new Map(results.map((result) => [result.id, result.uploaded]));
      setDetailProductImages((current) => current.map((item) => {
        const update = updateMap.get(item.id);
        return update ? { ...item, ...update } : item;
      }));
    }).catch(() => {
      toast.error("详情图后台上传失败，请检查网络后重试");
    });
  };

  const uploadCloneImages = async (images: CloneImageItem[]): Promise<string[]> => {
    const urls: string[] = [];
    for (const item of images) {
      try {
        if (!item.file && item.src.startsWith("blob:")) {
          throw new Error("本地预览图缺少原始文件，无法上传");
        }
        const rawBlob = item.file ?? (item.src.startsWith("data:") ? null : await (await fetch(item.src)).blob());
        const mimeType = normalizeEcommerceImageMime(
          rawBlob?.type || item.src.match(/^data:([^;,]+)/)?.[1] || "image/png",
        );
        const blob = rawBlob ? (rawBlob.type === mimeType ? rawBlob : new Blob([rawBlob], { type: mimeType })) : null;
        const dataUrl = item.src.startsWith("data:") ? item.src : await blobToDataUrl(blob!);
        const { url } = await aiGenerationClient.uploadAsset({ dataUrl, name: item.name, mimeType, scope: ecommerceOssScopes.productSource });
        urls.push(url);
      } catch {
        // skip images that fail to upload
      }
    }
    return urls;
  };

  const withStableSourceImage = (images: CloneImageItem[], sourceUrl?: string): CloneImageItem[] => {
    if (!sourceUrl || !images.length) return images;
    return images.map((image, index) => (index === 0 ? { ...image, src: sourceUrl } : image));
  };

  const setCountLabels: Record<CloneSetCountKey, { label: string; promptDesc: string }> = {
    selling: { label: "卖点图", promptDesc: "selling-point infographic image highlighting core product advantages and detail close-ups" },
    white:   { label: "白底图", promptDesc: "clean white-background product photo showing the item from its best angle, studio lighting, no props" },
    scene:   { label: "场景图", promptDesc: "lifestyle scene image showing the product in a realistic usage environment with natural surroundings" },
  };

  const buildDetailModulePrompt = (moduleIds: string[]): string => {
    if (!moduleIds.length) {
      return "Generate a complete A+ detail layout with hero, selling points, usage scene, product detail, and specification modules.";
    }

    const selectedModules = cloneDetailModules.filter((module) => moduleIds.includes(module.id));
    if (!selectedModules.length) return "";

    const moduleList = selectedModules.map((module) => `${module.title}: ${module.desc}`).join("; ");
    return `Only generate these selected A+ detail modules, no extra modules: ${moduleList}. Keep the output focused even if only one or two modules are selected.`;
  };

  const buildSetSubPrompt = (countKey: CloneSetCountKey, index: number, totalCount: number, pPlatform: string, pRatio: string, pLanguage: string, pMarket: string): string => {
    const info = setCountLabels[countKey];
    const parts: string[] = [];
    parts.push(`Generate an e-commerce ${info.label.toLowerCase()} for a product listing.`);
    parts.push(info.promptDesc);
    if (countKey === "white") {
      parts.push("The output must be a clean white-background product image. Do not use lifestyle backgrounds, props, text overlays, or people.");
    }
    if (countKey === "scene") {
      parts.push("The output must be a realistic usage scene image. Keep the product clearly visible and preserve its shape, color, and key details.");
    }
    if (countKey === "selling") {
      parts.push("The output must be a selling-point graphic with clear hierarchy, concise copy, and product detail callouts.");
    }
    if (totalCount > 1) {
      parts.push(`This is variant ${index + 1} of ${totalCount} —vary the angle, composition, or emphasis to make each distinct.`);
    }
    parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
    parts.push("Must comply with platform image guidelines —proper margins, no watermark, professional quality.");
    return parts.join(" ");
  };

  const buildEcommerceImagePrompt = (
    outputKey: CloneOutputKey, userText: string,
    pPlatform: string, pRatio: string, pLanguage: string, pMarket: string,
    tryOnOptions?: EcommerceImagePromptOptions,
  ): string => {
    const parts: string[] = [];
    if (outputKey === "detail") {
      parts.push("Generate a professional A+ detail page hero image for an e-commerce product listing.");
      parts.push("Create a high-impact first-screen visual that combines the product photo with key selling points, usage scenes, and detailed specifications in a cohesive layout.");
      parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
      if (outputKey === "detail" && tryOnOptions?.detailModules) parts.push(buildDetailModulePrompt(tryOnOptions.detailModules));
      parts.push("Follow platform A+ page best practices —clear hierarchy, professional typography, high visual impact.");
    } else if (outputKey === "model") {
      parts.push("Generate model/try-on lifestyle images for an e-commerce product listing.");
      parts.push("Show the product being used or worn by a model in attractive lifestyle settings.");
      parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
      if (tryOnOptions) {
        if (tryOnOptions.gender) parts.push(`Model gender: ${tryOnOptions.gender}.`);
        if (tryOnOptions.age) parts.push(`Model age: ${tryOnOptions.age}.`);
        if (tryOnOptions.ethnicity) parts.push(`Model ethnicity: ${tryOnOptions.ethnicity}.`);
        if (tryOnOptions.body) parts.push(`Model body type: ${tryOnOptions.body}.`);
        if (tryOnOptions.appearance) parts.push(`Model appearance details: ${tryOnOptions.appearance}.`);
        if (tryOnOptions.scenes?.length) parts.push(`Background scenes: ${tryOnOptions.scenes.join(", ")}.`);
        if (tryOnOptions.customScene) parts.push(`Custom background scene: ${tryOnOptions.customScene}.`);
        if (tryOnOptions.smartScene) parts.push("Use smart scene matching to select the best background context.");
      }
      parts.push("Model should appear natural and appealing. Background should complement the product. Image must meet platform standards.");
    } else if (outputKey === "hot") {
      parts.push("Generate a high-conversion e-commerce product image that closely replicates the style and composition of the reference image while adapting it to the target platform.");
      parts.push(`Replicate the visual style, color palette, and layout feel of the source product image, then adapt it for ${pPlatform} marketplace standards.`);
      parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
      parts.push("The result must look professional and optimized for high click-through rate and conversion on the specified platform.");
    }
    if (userText.trim()) {
      parts.push(`Additional user requirements: ${userText.trim()}`);
    }
    return parts.join(" ");
  };

  const buildCommerceScenarioImagePrompt = (
    scenario: CommerceDefaultImageScenarioKey,
    userText: string,
    pPlatform: string,
    pRatio: string,
    pLanguage: string,
    pMarket: string,
  ): string => {
    const parts: string[] = [];
    const scenarioPrompts: Record<CommerceDefaultImageScenarioKey, string> = {
      poster: "Generate one ecommerce campaign poster image with clear product focus, promotional hierarchy, and polished marketing layout.",
      mainImage: "Generate one high-conversion ecommerce product main image. Keep the product accurate, clear, and platform-ready.",
      scene: "Generate one realistic ecommerce lifestyle scene image. Preserve the product appearance and place it in a suitable usage environment.",
      festival: "Generate one ecommerce product image with a tasteful holiday or seasonal marketing style.",
      model: "Generate one ecommerce model or try-on image that naturally presents the product on or near a suitable model.",
      background: "Replace or rebuild the product image background. Preserve the product exactly and use the user's prompt or extra reference image as background guidance.",
      retouch: "Perform a seamless ecommerce image edit. Preserve the product identity while applying the user's requested local cleanup or refinement.",
    };
    parts.push(scenarioPrompts[scenario]);
    parts.push(`Platform: ${pPlatform}. Aspect ratio: ${pRatio}. Language/copy: ${pLanguage}. Market: ${pMarket}.`);
    parts.push("Output a single image only.");
    if (userText.trim()) parts.push(`User request: ${userText.trim()}`);
    return parts.join(" ");
  };

  const generateCommerceScenarioImage = async (
    scenario: CommerceDefaultImageScenarioKey,
    images: CloneImageItem[],
    userText: string,
    pPlatform: string,
    pRatio: string,
    pLanguage: string,
    pMarket: string,
    statusFn: (status: "generating" | "done" | "idle" | "failed") => void,
    resultFn: (results: CloneResult[], sourceUrl?: string) => void,
  ): Promise<void> => {
    statusFn("generating");
    try {
      const uploadedUrls = await uploadCloneImages(images);
      if (!uploadedUrls.length) {
        statusFn("idle");
        return;
      }
      if (imageAbortRef.current.current) {
        statusFn("idle");
        return;
      }

      const prompt = buildCommerceScenarioImagePrompt(scenario, userText, pPlatform, pRatio, pLanguage, pMarket);
      const stamp = Date.now();
      const label = commerceScenarioOptions.find((option) => option.key === scenario)?.label || selectedCloneOutput.label;
      setGenerationProgress(0);

      const imageTask = scenario === "background" || scenario === "retouch"
        ? await aiGenerationClient.createImageEditTask({
            imageUrl: uploadedUrls[0]!,
            function: scenario === "background" ? "background-replace" : "retouch",
            prompt,
            ratio: normalizeRatioForApi(pRatio),
            referenceUrls: uploadedUrls.slice(1),
          })
        : await aiGenerationClient.createImageTask({
            prompt,
            ratio: normalizeRatioForApi(pRatio),
            quality: pRatio.includes("720") ? "720P" : "1080P",
            gridMode: "single",
            referenceUrls: uploadedUrls,
          });
      const { taskId } = imageTask;
      const storeId = imageGen.submitTask({ title: label, type: "image", status: "running", progress: 5, prompt, sourceView: "ecommerce", taskId });

      const immediateResultUrl = (imageTask as { resultUrl?: string | null }).resultUrl;
      let resultUrl: string | null = immediateResultUrl ?? null;
      if (!resultUrl) {
        trackEcommerceTask(taskId);
        try {
          resultUrl = await waitForTask(taskId, {
            kind: "image",
            abortRef: imageAbortRef.current,
            onProgress: (event) => {
              const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
              setGenerationProgress(Math.round(Math.min(99, sub)));
            },
          });
        } finally {
          untrackEcommerceTask(taskId);
        }
      } else {
        setGenerationProgress(100);
      }

      if (imageAbortRef.current.current) {
        statusFn("idle");
        return;
      }

      if (resultUrl) {
        const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult(scenario), `ecommerce-${scenario}`);
        resultFn([{ id: `scenario-${scenario}-${stamp}`, src: persistedUrl, label }], uploadedUrls[0]);
        statusFn("done");
        imageGen.updateTask(storeId, { status: "completed", progress: 100, resultUrl: persistedUrl });
      } else {
        statusFn("failed");
        imageGen.updateTask(storeId, { status: "failed", error: "No image result returned" });
      }
    } catch (err) {
      if (imageAbortRef.current.current) {
        statusFn("idle");
        return;
      }
      if (err instanceof ServerRequestError && err.status === 402) {
        toast.error("余额不足，请充值后继续");
      } else {
        toast.error(err instanceof Error ? err.message : "生成失败");
      }
      statusFn("failed");
    }
  };

  const generateSetImages = async (
    images: CloneImageItem[],
    counts: Record<CloneSetCountKey, number>,
    userText: string,
    pPlatform: string,
    pRatio: string,
    pLanguage: string,
    pMarket: string,
    setStatusFn: (status: "generating" | "done" | "idle" | "failed") => void,
    setResultFn: (urls: string[], sourceUrl?: string) => void,
  ): Promise<void> => {
    setStatusFn("generating");
    try {
      const referenceUrls = await uploadCloneImages(images);
      if (!referenceUrls.length) {
        setStatusFn("idle");
        return;
      }
      if (imageAbortRef.current.current) {
        setStatusFn("idle");
        return;
      }

      const generatedUrls: string[] = [];
      const stamp = Date.now();
      const totalCount = Math.max(1, cloneSetCountKeys.reduce((sum, key) => sum + counts[key], 0));
      let completedCount = 0;
      setGenerationProgress(0);

      for (const countKey of cloneSetCountKeys) {
        if (imageAbortRef.current.current) break;
        const count = counts[countKey];
        for (let i = 0; i < count; i++) {
          if (imageAbortRef.current.current) break;
          const subPrompt = buildSetSubPrompt(countKey, i, count, pPlatform, pRatio, pLanguage, pMarket);
          const fullPrompt = userText.trim() ? `${subPrompt} Additional user requirements: ${userText.trim()}` : subPrompt;

          const imageTask = await aiGenerationClient.createImageTask({
            prompt: fullPrompt,
            ratio: normalizeRatioForApi(pRatio),
            quality: pRatio.includes("720") ? "720P" : "1080P",
            gridMode: "single",
            referenceUrls,
          });
          const { taskId } = imageTask;

          const storeId = imageGen.submitTask({ title: `${setCountLabels[countKey].label} ${i + 1}`, type: "image", status: "running", progress: 5, prompt: fullPrompt, sourceView: "ecommerce", taskId });

          let resultUrl: string | null = imageTask.resultUrl ?? null;
          if (!resultUrl) {
            trackEcommerceTask(taskId);
            try {
              resultUrl = await waitForTask(taskId, {
                kind: "image",
                abortRef: imageAbortRef.current,
                onProgress: (event) => {
                  const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
                  const overall = ((completedCount + sub / 100) / totalCount) * 100;
                  setGenerationProgress(Math.round(Math.min(99, overall)));
                },
              });
            } finally {
              untrackEcommerceTask(taskId);
            }
          } else {
            setGenerationProgress(Math.round(Math.min(99, ((completedCount + 1) / totalCount) * 100)));
          }

          if (imageAbortRef.current.current) break;

          if (resultUrl) {
            const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult("set"), `ecommerce-${countKey}-${i + 1}`);
            generatedUrls.push(persistedUrl);
            imageGen.updateTask(storeId, { status: "completed", progress: 100, resultUrl: persistedUrl });
          } else {
            generatedUrls.push("");
            imageGen.updateTask(storeId, { status: "failed", error: "生成未返回结果" });
          }
          completedCount += 1;
          setGenerationProgress(Math.round(Math.min(99, (completedCount / totalCount) * 100)));
        }
      }

      if (imageAbortRef.current.current) {
        setStatusFn("idle");
        return;
      }
      setResultFn(generatedUrls, referenceUrls[0]);
      setStatusFn(generatedUrls.some(Boolean) ? "done" : "failed");
    } catch (err) {
      if (imageAbortRef.current.current) {
        setStatusFn("idle");
        return;
      }
      if (err instanceof ServerRequestError && err.status === 402) {
        setResultFn([]);
        toast.error("余额不足，请充值后继续");
      } else {
        const msg = err instanceof Error ? err.message : "生成失败";
        toast.error(msg);
      }
      setStatusFn("failed");
    }
  };

  const generateEcommerceImage = async (
    outputKey: CloneOutputKey,
    images: CloneImageItem[],
    userText: string,
    pPlatform: string,
    pRatio: string,
    pLanguage: string,
    pMarket: string,
    tryOnOptions?: EcommerceImagePromptOptions,
    statusFn?: (status: "generating" | "done" | "idle" | "failed") => void,
    resultFn?: (results: CloneResult[], sourceUrl?: string) => void,
  ): Promise<void> => {
    statusFn?.("generating");
    try {
      const referenceUrls = await uploadCloneImages(images);
      if (!referenceUrls.length) {
        statusFn?.("idle");
        return;
      }
      if (imageAbortRef.current.current) {
        statusFn?.("idle");
        return;
      }

      const prompt = buildEcommerceImagePrompt(outputKey, userText, pPlatform, pRatio, pLanguage, pMarket, tryOnOptions);
      const stamp = Date.now();
      setGenerationProgress(0);

      const imageTask = await aiGenerationClient.createImageTask({
        prompt,
        ratio: normalizeRatioForApi(pRatio),
        quality: pRatio.includes("720") ? "720P" : "1080P",
        gridMode: "single",
        referenceUrls,
      });
      const { taskId } = imageTask;

      const outputLabel = cloneOutputOptions.find((option) => option.key === outputKey)?.label || selectedCloneOutput.label;
      const storeId = imageGen.submitTask({ title: outputLabel, type: "image", status: "running", progress: 5, prompt, sourceView: "ecommerce", taskId });

      let resultUrl: string | null = imageTask.resultUrl ?? null;
      if (!resultUrl) {
        trackEcommerceTask(taskId);
        try {
          resultUrl = await waitForTask(taskId, {
            kind: "image",
            abortRef: imageAbortRef.current,
            onProgress: (event) => {
              const sub = Math.max(0, Math.min(100, Number(event.progress) || 0));
              setGenerationProgress(Math.round(Math.min(99, sub)));
            },
          });
        } finally {
          untrackEcommerceTask(taskId);
        }
      } else {
        setGenerationProgress(100);
      }

      if (imageAbortRef.current.current) {
        statusFn?.("idle");
        return;
      }

      if (resultUrl) {
        const persistedUrl = await persistGeneratedImageUrl(resultUrl, ecommerceOssScopes.cloneResult(outputKey), `ecommerce-${outputKey}`);
        resultFn?.([{ id: `ecommerce-${stamp}`, src: persistedUrl, label: outputLabel }], referenceUrls[0]);
        statusFn?.("done");
        imageGen.updateTask(storeId, { status: "completed", progress: 100, resultUrl: persistedUrl });
      } else {
        statusFn?.("idle");
        imageGen.updateTask(storeId, { status: "failed", error: "生成未返回结果" });
      }
    } catch (err) {
      if (imageAbortRef.current.current) {
        statusFn?.("idle");
        return;
      }
      if (err instanceof ServerRequestError && err.status === 402) {
        resultFn?.([{ id: `ecommerce-error-402`, src: "", label: "余额不足，请充值后继续" }]);
        toast.error("余额不足，请充值后继续");
      } else {
        const msg = err instanceof Error ? err.message : "生成失败";
        toast.error(msg);
      }
      statusFn?.("failed");
    }
  };

  const handleGenerate = (defaultIntent?: CommerceDefaultIntent) => {
    if (!canGenerate) return;

    if ((appUsage?.balanceCents ?? 0) <= 0) {
      toast.error("积分不足，请充值后继续");
      return;
    }

    const explicitImageScenario =
      activeCommerceScenario && activeCommerceScenario !== "popular" && activeCommerceScenario !== "salesVideo"
        ? activeCommerceScenario
        : null;
    const routedScenario = defaultIntent?.kind === "image" ? defaultIntent.scenario : explicitImageScenario;
    const effectiveOutput = routedScenario ? commerceScenarioOutputMap[routedScenario] : cloneOutput;
    const shouldConfirmSetCount = !defaultIntent && !routedScenario && cloneOutput === "set" && cloneSetTotal > 5;
    if (shouldConfirmSetCount) {
      if (!window.confirm("将生成 " + String(cloneSetTotal) + " 张图片，可能消耗较多积分，是否继续？")) return;
    }

    setComposerMenu(null);
    setIsCommandComposerCompact(true);
    imageAbortRef.current = { current: false };
    lastFailedActionRef.current = null;
    setGenerationProgress(0);
    setResults([]);
    setProductSetResultImages([]);
    const pendingGeneration = beginEcommerceHistoryTurn();
    const pendingRecordId = pendingGeneration.record.id;
    const pendingTurnId = pendingGeneration.turn.id;
    setPreviewZoom(1);
    setPreviewOffset({ x: 0, y: 0 });
    previewOffsetRef.current = { x: 0, y: 0 };
    if (defaultIntent?.kind === "video") {
      handleStartVideoPlan();
      return;
    }

    if (routedScenario) {
      const routedModeLabel = commerceScenarioOptions.find((option) => option.key === routedScenario)?.label || selectedCloneOutput.label;
      const routedSettingLabel = commerceScenarioGenerationKind(routedScenario) === "imageEdit" ? "图片编辑 1张" : "单图 1张";
      const routedGenerationKind = commerceScenarioGenerationKind(routedScenario);
      void generateCommerceScenarioImage(
        routedScenario, productImages, requirement,
        platform, ratio, language, market,
        (s) => {
          setStatus(s as ProductCloneStatus);
          if (s === "generating") {
            updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({
              ...turn,
              output: effectiveOutput,
              modeLabel: routedModeLabel,
              settingLabel: routedSettingLabel,
              generationKind: routedGenerationKind,
              status: "generating",
              errorMessage: undefined,
            }));
          } else if (s === "failed") {
            updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({
              ...turn,
              output: effectiveOutput,
              modeLabel: routedModeLabel,
              settingLabel: routedSettingLabel,
              generationKind: routedGenerationKind,
              status: "failed",
              errorMessage: "生成失败，请检查网络或参数后重试。",
            }));
          }
        },
        (newResults, sourceUrl) => {
          const validResults = newResults.filter((item) => item.src);
          const turnProductImages = withStableSourceImage(productImages, sourceUrl);
          setResults(validResults);
          updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({
            ...turn,
            output: effectiveOutput,
            modeLabel: routedModeLabel,
            settingLabel: routedSettingLabel,
            generationKind: routedGenerationKind,
            status: validResults.length ? "done" : "failed",
            errorMessage: validResults.length ? undefined : newResults[0]?.label || "生成未返回结果",
            productImages: turnProductImages,
            results: validResults,
            setResultImages: [],
          }));
          if (validResults.length && validResults[0].src) {
            upsertCanvasNode({
              id: pendingTurnId,
              mode: routedScenario,
              sourceImage: sourceUrl || productImages[0]?.src,
              results: validResults,
              createdAt: Date.now(),
            });
          }
        },
      );
      lastFailedActionRef.current = () => handleGenerate(defaultIntent);
    } else if (cloneOutput === "set") {
      void generateSetImages(
        productImages, cloneSetCounts, requirement,
        platform, ratio, language, market,
        (s) => {
          setStatus(s as ProductCloneStatus);
          if (s === "generating") {
            updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({ ...turn, status: "generating", errorMessage: undefined }));
          } else if (s === "failed") {
            updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({ ...turn, status: "failed", errorMessage: "生成失败，请检查网络或参数后重试。" }));
          }
        },
        (urls, sourceUrl) => {
          setProductSetResultImages(urls);
          const validUrls = urls.filter(Boolean);
          const stableSourceUrl = sourceUrl || (productImages[0]?.src?.startsWith("blob:") ? undefined : productImages[0]?.src);
          const turnProductImages = withStableSourceImage(productImages, stableSourceUrl);
          const resultCards = validUrls.map((src, i) => ({ id: `set-${Date.now()}-${i}`, src, label: `套图 ${i + 1}` }));
          updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({
            ...turn,
            status: validUrls.length ? "done" : "failed",
            errorMessage: validUrls.length ? undefined : "生成未返回结果",
            productImages: turnProductImages,
            setResultImages: validUrls,
            results: resultCards,
          }));
          if (validUrls.length) {
            upsertCanvasNode({
              id: pendingTurnId,
              mode: "set",
              sourceImage: stableSourceUrl || productImages[0]?.src,
              results: resultCards,
              createdAt: Date.now(),
            });
          }
        },
      );
      lastFailedActionRef.current = () => handleGenerate();
    } else {
      const clonePromptOptions: EcommerceImagePromptOptions | undefined =
        cloneOutput === "model"
          ? {
              gender: cloneModelGender,
              age: cloneModelAge,
              ethnicity: cloneModelEthnicity,
              body: cloneModelBody,
              scenes: selectedCloneModelScenes,
              customScene: cloneModelCustomScene,
            }
          : cloneOutput === "detail"
            ? { detailModules: selectedCloneDetailModules }
            : undefined;
      void generateEcommerceImage(
        cloneOutput, productImages, requirement,
        platform, ratio, language, market,
        clonePromptOptions,
        (s: string) => {
          setStatus(s as ProductCloneStatus);
          if (s === "generating") {
            updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({ ...turn, status: "generating", errorMessage: undefined }));
          } else if (s === "failed") {
            updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({ ...turn, status: "failed", errorMessage: "生成失败，请检查网络或参数后重试。" }));
          }
        },
        (newResults: CloneResult[], sourceUrl?: string) => {
          const validResults = newResults.filter((item) => item.src);
          const turnProductImages = withStableSourceImage(productImages, sourceUrl);
          setResults(validResults);
          updateLocalEcommerceHistoryTurn(pendingRecordId, pendingTurnId, (turn) => ({
            ...turn,
            status: validResults.length ? "done" : "failed",
            errorMessage: validResults.length ? undefined : newResults[0]?.label || "生成未返回结果",
            productImages: turnProductImages,
            results: validResults,
            setResultImages: [],
          }));
          if (validResults.length && validResults[0].src) {
            upsertCanvasNode({
              id: pendingTurnId,
              mode: cloneOutput,
              sourceImage: sourceUrl || productImages[0]?.src,
              results: validResults,
              createdAt: Date.now(),
            });
          }
        },
      );
      lastFailedActionRef.current = () => handleGenerate();
    }
  };

  const handleGenerateModel = () => {
    imageAbortRef.current = { current: false };
    lastFailedActionRef.current = null;
    setTryOnStatus("modeling");
    void generateEcommerceImage(
      "model", garmentImages, requirement,
      platform, ratio, language, market,
      { gender: modelGender, age: modelAge, ethnicity: modelEthnicity, body: modelBody, appearance, scenes: selectedScenes, smartScene },
      (s) => {
        if (s === "done") setTryOnStatus("ready");
        else setTryOnStatus(s as TryOnStatus);
      },
      () => { setTryOnStatus("ready"); },
    );
    lastFailedActionRef.current = () => handleGenerateModel();
  };

  const handleTryOnGenerate = () => {
    if (!canGenerateTryOn) return;
    imageAbortRef.current = { current: false };
    lastFailedActionRef.current = null;
    void generateEcommerceImage(
      "model", garmentImages, requirement,
      platform, ratio, language, market,
      { gender: modelGender, age: modelAge, ethnicity: modelEthnicity, body: modelBody, appearance, scenes: selectedScenes, smartScene },
      (s) => setTryOnStatus(s as TryOnStatus),
      (res) => {
        const urls: string[] = [];
        for (const item of res) {
          if (item.src) urls.push(item.src);
        }
        setTryOnResultImages(urls);
      },
    );
    lastFailedActionRef.current = () => handleTryOnGenerate();
  };

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

  const toggleDetailModule = (moduleId: string) => {
    setSelectedDetailModules((current) => {
      if (current.includes(moduleId)) return current.filter((item) => item !== moduleId);
      if (current.length >= maxDetailModuleSelection) {
        toast.info(`最多选择 ${maxDetailModuleSelection} 个模块`);
        return current;
      }
      return [...current, moduleId];
    });
  };

  const handleSetGenerate = () => {
    if (!canGenerateSet) return;
    imageAbortRef.current = { current: false };
    lastFailedActionRef.current = null;
    void generateSetImages(
      setImages, cloneSetCounts, productSetRequirement,
      productSetPlatform, productSetRatio, productSetLanguage, productSetMarket,
      (s) => setProductSetStatus(s as ProductSetStatus),
      (urls) => setProductSetResultImages(urls),
    );
    lastFailedActionRef.current = () => handleSetGenerate();
  };

  const openProductSetPreview = (card: { id?: string; src: string; label: string }, options?: { nodeId?: string; removable?: boolean }) => {
    setSelectedProductSetPreview({
      src: card.src,
      label: card.label,
      cardId: card.id,
      nodeId: options?.nodeId,
      removable: Boolean(options?.removable && options.nodeId && card.id),
    });
  };

  const handleDownloadCanvasResult = async (card: { src: string; label: string }) => {
    try {
      await downloadResultAsset(card.src, card.label || "generated-image", false);
      toast.success("已开始下载图片");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "下载图片失败");
    }
  };

  const removeCanvasResult = (nodeId: string, cardId: string) => {
    setCanvasNodes((current) =>
      current
        .map((node) => (node.id === nodeId ? { ...node, results: node.results.filter((card) => card.id !== cardId) } : node))
        .filter((node) => node.sourceImage || node.results.length > 0),
    );
    setResults((current) => current.filter((card) => card.id !== cardId));
    toast.success("已从当前视图移除");
  };

  const upsertCanvasNode = (node: Omit<CanvasNode, "x" | "y">) => {
    setCanvasNodes((current) => {
      const existingIndex = current.findIndex((item) => item.id === node.id);
      if (existingIndex >= 0) {
        return current.map((item) => (item.id === node.id ? { ...item, ...node } : item));
      }
      return [
        ...current,
        {
          ...node,
          x: current.length * 420,
          y: current.length % 2 === 0 ? 0 : 160,
        },
      ];
    });
  };

  const removeSelectedProductSetPreview = (preview: ProductSetPreviewSelection) => {
    if (!preview.nodeId || !preview.cardId) return;
    removeCanvasResult(preview.nodeId, preview.cardId);
    setSelectedProductSetPreview(null);
  };

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

  const stopDetailProgress = () => {
    if (detailProgressRef.current !== null) {
      window.clearInterval(detailProgressRef.current);
      detailProgressRef.current = null;
    }
  };

  const startDetailProgress = () => {
    stopDetailProgress();
    setDetailProgress(0);
    detailProgressRef.current = window.setInterval(() => {
      setDetailProgress((prev) => {
        if (prev >= 90) {
          stopDetailProgress();
          return 90;
        }
        return prev + (90 - prev) * 0.06;
      });
    }, 500);
  };

  const handleDetailGenerate = () => {
    if (!canGenerateDetail) return;
    imageAbortRef.current = { current: false };
    lastFailedActionRef.current = null;
    startDetailProgress();
    void generateEcommerceImage(
      "detail", detailProductImages, detailRequirement,
      detailPlatform, detailRatio, detailLanguage, detailMarket,
      { detailModules: selectedDetailModules },
      (s: string) => {
        setDetailStatus(s as DetailStatus);
        if (s === "done") {
          stopDetailProgress();
          setDetailProgress(100);
        } else if (s === "failed" || s === "idle") {
          stopDetailProgress();
          setDetailProgress(0);
        }
      },
      (res) => setDetailResultUrl(res[0]?.src ?? null),
    );
  };

  const handleHotPlatformChange = (nextPlatform: string) => {
    const normalizedPlatform = normalizePlatform(nextPlatform);
    setHotPlatform(normalizedPlatform);
    setHotLanguage(getPlatformDefaultLanguage(normalizedPlatform, hotMarket));
    setHotRatio((current) => getQuickSetRatioValue(current));
  };

  const handleHotMarketChange = (nextMarket: string) => {
    const normalizedMarket = normalizeMarket(nextMarket);
    setHotMarket(normalizedMarket);
    setHotLanguage(getPlatformDefaultLanguage(hotPlatform, normalizedMarket));
  };

  const handleHotAiWrite = () => {
    setHotRequirement(
      "1.产品名称：便携式咖啡保温杯\n2.核心卖点：316不锈钢内胆、12小时长效保温、防漏便携、大容量\n3.参考风格：极简日系、暖光氛围、生活场景\n4.期望场景：办公桌面、户外通勤、运动健身\n5.具体参数：容量500ml、口径4.5cm、高度22cm",
    );
  };

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

  const stopHotProgress = () => {
    if (hotProgressRef.current !== null) {
      window.clearInterval(hotProgressRef.current);
      hotProgressRef.current = null;
    }
  };

  const stopQuickSetProgress = () => {
    if (quickSetProgressRef.current !== null) {
      window.clearInterval(quickSetProgressRef.current);
      quickSetProgressRef.current = null;
    }
  };

  const startQuickSetProgress = () => {
    stopQuickSetProgress();
    setQuickSetProgress(0);
    quickSetProgressRef.current = window.setInterval(() => {
      setQuickSetProgress((prev) => {
        if (prev >= 90) {
          stopQuickSetProgress();
          return 90;
        }
        return prev + (90 - prev) * 0.06;
      });
    }, 500);
  };

  const startHotProgress = () => {
    stopHotProgress();
    setHotProgress(0);
    hotProgressRef.current = window.setInterval(() => {
      setHotProgress((prev) => {
        if (prev >= 90) {
          stopHotProgress();
          return 90;
        }
        return prev + (90 - prev) * 0.06;
      });
    }, 500);
  };

  const handleHotGenerate = () => {
    if (!canGenerateHot) return;
    imageAbortRef.current = { current: false };
    lastFailedActionRef.current = null;
    startHotProgress();
    void generateEcommerceImage(
      "hot", cloneReferenceImages, hotRequirement,
      hotPlatform, hotRatio, hotLanguage, hotMarket,
      undefined,
      (s: string) => {
        setHotStatus(s as DetailStatus);
        if (s === "done") {
          stopHotProgress();
          setHotProgress(100);
        } else if (s === "failed" || s === "idle") {
          stopHotProgress();
          setHotProgress(0);
        }
      },
      (res) => setHotResultUrl(res[0]?.src ?? null),
    );
  };

  const handleQuickSetGenerate = () => {
    if (!canGenerateQuickSet) return;
    imageAbortRef.current = { current: false };
    lastFailedActionRef.current = null;
    startQuickSetProgress();
    setQuickSetStatus("generating");
    void generateSetImages(
      productImages, cloneSetCounts, quickSetRequirement,
      platform, ratio, language, market,
      (s) => {
        setQuickSetStatus(s as "idle" | "generating" | "done" | "failed");
        if (s === "done") {
          stopQuickSetProgress();
          setQuickSetProgress(100);
        } else if (s === "failed") {
          stopQuickSetProgress();
          setQuickSetProgress(0);
        }
      },
      (urls) => {
        setQuickSetResultUrls(urls);
        const validUrls = urls.filter(Boolean);
        if (validUrls.length) {
          setQuickSetStatus("done");
          stopQuickSetProgress();
          setQuickSetProgress(100);
        } else {
          setQuickSetStatus("failed");
          stopQuickSetProgress();
          setQuickSetProgress(0);
        }
      },
    );
    lastFailedActionRef.current = () => handleQuickSetGenerate();
  };

  const handleHotMaterialMouseEnter = (src: string, event: ReactMouseEvent<HTMLElement>) => {
    const rect = event.currentTarget.getBoundingClientRect();
    const previewHalfWidth = 150;
    const previewHeight = 360;
    const gap = 12;
    const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
    const x = Math.min(
      Math.max(rect.left + rect.width / 2, previewHalfWidth + gap),
      Math.max(previewHalfWidth + gap, viewportWidth - previewHalfWidth - gap),
    );
    const showAbove = rect.top > previewHeight + gap;
    const y = showAbove
      ? rect.top - gap
      : Math.min(rect.bottom + gap, viewportHeight - gap);
    setHotMaterialHoverZoom({ src, x, y, placement: showAbove ? "above" : "below" });
  };
  const handleHotMaterialMouseLeave = () => setHotMaterialHoverZoom(null);

  const renderHotMaterialThumbs = (items: CloneImageItem[], onRemove: (imageId: string) => void) => (
    <div className="ecom-quick-upload-thumbs" aria-label="已上传商品素材">
      {items.map((item) => (
        <figure
          key={item.id}
          className="ecom-command-asset-thumb ecom-quick-upload-thumb"
          onMouseEnter={(e) => handleHotMaterialMouseEnter(item.src, e)}
          onMouseLeave={handleHotMaterialMouseLeave}
        >
          <img src={item.src} alt={item.name} />
          <button
            type="button"
            className="ecom-hot-material-delete"
            aria-label={`删除${item.name || "图片"}`}
            onClick={(event) => {
              event.stopPropagation();
              setHotMaterialHoverZoom(null);
              onRemove(item.id);
            }}
          >
            <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
              <path d="M9 6V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v1" />
              <path d="M5 6h14" />
              <path d="M8 6l1 14h6l1-14" />
              <path d="M10.5 10v6" />
              <path d="M13.5 10v6" />
            </svg>
          </button>
        </figure>
      ))}
    </div>
  );

  const closeHotClonePage = () => {
    stopHotProgress();
    setActiveQuickTool(null);
    setHotStatus("idle");
    setHotResultUrl(null);
    setHotProgress(0);
    setHotRequirement("");
    setIsHotMaterialDragging(false);
    setHotMaterialHoverZoom(null);
    setComposerMenu(null);
  };

  const openQuickSetPage = () => {
    clearSmartCutoutTransition();
    setActiveQuickTool("quick-set");
    setComposerMenu(null);
    setIsCloneSettingsCollapsed(false);
    setIsQuickPanelCollapsed(false);
  };

  const closeQuickSetPage = () => {
    stopQuickSetProgress();
    setActiveQuickTool(null);
    setQuickSetStatus("idle");
    setQuickSetResultUrls([]);
    setQuickSetProgress(0);
    setQuickSetRequirement("");
    setComposerMenu(null);
  };

  const openCopywritingPage = () => {
    clearSmartCutoutTransition();
    setActiveQuickTool("copywriting");
    setComposerMenu(null);
    setIsCloneSettingsCollapsed(false);
    setIsQuickPanelCollapsed(false);
  };

  const closeCopywritingPage = () => {
    setActiveQuickTool(null);
    setComposerMenu(null);
  };

  const openOneClickVideoPage = () => {
    clearSmartCutoutTransition();
    setActiveQuickTool("oneClickVideo");
    setComposerMenu(null);
    setIsCloneSettingsCollapsed(false);
    setIsQuickPanelCollapsed(false);
  };

  const closeOneClickVideoPage = () => {
    setActiveQuickTool(null);
    setComposerMenu(null);
  };

  const handleOneClickVideoPlatformChange = (nextPlatform: string) => {
    const normalizedPlatform = normalizePlatform(nextPlatform);
    setPlatform(normalizedPlatform);
    setRatio((current) => normalizeRatioForPlatform(normalizedPlatform, current, "video"));
    setLanguage(getPlatformDefaultLanguage(normalizedPlatform, market));
  };

  const resetTask = () => {
    setSetImages([]);
    setProductSetRequirement("");
    setProductSetPlatform(defaultEcommercePlatform);
    setProductSetLanguage(getPlatformDefaultLanguage(defaultEcommercePlatform, productSetMarket));
    setProductSetOutput(defaultProductSetOutput);
    setProductSetRatio(getPlatformDefaultRatio(defaultEcommercePlatform, defaultProductSetOutput));
    setProductSetStatus("idle");
    setProductSetResultImages([]);
    setIsSetUploadDragging(false);
    setSelectedProductSetPreview(null);
    setShowHostingModal(false);
    setProductImages([]);
    setIsProductUploadDragging(false);
    setCloneOutput(defaultCloneOutput);
    setPlatform(defaultEcommercePlatform);
    setLanguage(getPlatformDefaultLanguage(defaultEcommercePlatform, market));
    setRatio(getPlatformDefaultRatio(defaultEcommercePlatform, defaultCloneOutput));
    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 isSmartCutoutTool = isCloneTool && activeQuickTool === "cutout";
  const isQuickDetailTool = isCloneTool && activeQuickTool === "detail";
  const isWatermarkTool = isCloneTool && activeQuickTool === "watermark";
  const isImageEditTool = isCloneTool && activeQuickTool === "image-edit";
  const isTranslateTool = isCloneTool && activeQuickTool === "translate";
  const isHotCloneTool = isCloneTool && activeQuickTool === "hot";
  const isQuickSetTool = isCloneTool && activeQuickTool === "quick-set";
  const isCopywritingTool = isCloneTool && activeQuickTool === "copywriting";
  const isOneClickVideoTool = isCloneTool && activeQuickTool === "oneClickVideo";
  const isWorkspaceToolPage =
    !isCloneTool ||
    isSmartCutoutTool ||
    isQuickDetailTool ||
    isWatermarkTool ||
    isTranslateTool ||
    isImageEditTool ||
    isHotCloneTool ||
    isQuickSetTool ||
    isCopywritingTool ||
    isOneClickVideoTool ||
    isVideoWorkspaceVisible ||
    Boolean(activeHistoryRecordId);

  useEffect(() => {
    onWorkspaceChromeChange?.({ isToolPage: isWorkspaceToolPage });
  }, [isWorkspaceToolPage, onWorkspaceChromeChange]);

  useEffect(() => {
    return () => {
      onWorkspaceChromeChange?.({ isToolPage: false });
    };
  }, [onWorkspaceChromeChange]);
  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 =
    cloneOutput === "video"
      ? !productImages.length && !requirement.trim()
        ? "填写需求或上传商品图"
        : !isAuthenticated
          ? "登录后生成短视频"
          : "生成短视频"
      : productImages.length === 0 ? "请先上传商品原图" : status === "generating" ? "生成中..." : "生成" + selectedCloneOutput.label;
  const setPreviewCards: CloneResult[] = [];
  let setIndex = 0;
  for (const countKey of cloneSetCountKeys) {
    const count = cloneSetCounts[countKey];
    const info = setCountLabels[countKey];
    for (let i = 0; i < count; i++) {
      setPreviewCards.push({
        id: String(countKey) + "-" + String(i),
        src: productSetResultImages[setIndex] || productSetPreviewCards[setIndex % productSetPreviewCards.length]?.src || "",
        label: info.label + (count > 1 ? " " + String(i + 1) : ""),
      });
      setIndex++;
    }
  }

  const clonePreviewCards: CloneResult[] = [];
  let cloneIndex = 0;
  for (const countKey of cloneSetCountKeys) {
    const count = cloneSetCounts[countKey];
    const info = setCountLabels[countKey];
    for (let i = 0; i < count; i++) {
      clonePreviewCards.push({
        id: String(countKey) + "-" + String(i),
        src: productSetResultImages[cloneIndex] || productSetPreviewCards[cloneIndex % productSetPreviewCards.length]?.src || "",
        label: info.label + (count > 1 ? " " + String(i + 1) : ""),
      });
      cloneIndex++;
    }
  }

  const getCurrentHistoryResults = () =>
    cloneOutput === "set"
      ? productSetResultImages
          .filter(Boolean)
            .map((src, index) => ({ id: "history-set-" + String(index), src, label: clonePreviewCards[index]?.label || "套图 " + String(index + 1) }))
      : results.filter((item) => item.src);

  const buildHistorySignature = (output: CloneOutputKey, prompt: string, historyResults: CloneResult[], sourceImages: CloneImageItem[]) =>
    [
      output,
      prompt.trim(),
      historyResults.map((item) => item.src).join("|"),
      sourceImages.map((item) => item.src).join("|"),
    ].join("::");

  const getHistoryRecordResults = (record: EcommerceHistoryRecord) => {
    const turns = record.turns?.length ? record.turns : [buildHistoryTurnFromRecord(record)];
    return turns.flatMap(getTurnResults);
  };

  const persistEcommerceHistoryRecord = (record: EcommerceHistoryRecord, historyResults: CloneResult[]) => {
    void saveUnifiedEcommerceGenerationRecord({
      clientRecordId: record.id,
      title: record.title,
      mode: record.output,
      prompt: record.requirement,
      sourceImages: record.productImages.map((image, index) => ({
        url: image.src,
        ossKey: image.ossKey,
        label: image.name || `source-${index + 1}`,
      })),
      results: historyResults.map((item) => ({
        url: item.src,
        label: item.label,
        mediaType: "image",
      })),
      config: {
        platform: record.platform,
        market: record.market,
        language: record.language,
        ratio: record.ratio,
        setCounts: record.setCounts,
        detailModules: record.detailModules,
        modelScenes: record.modelScenes,
        replicateLevel: record.replicateLevel,
      },
      metadata: {
        localHistoryStorageKey: ecommerceHistoryStorageKey,
        referenceImageCount: record.referenceImages.length,
        turnCount: record.turns?.length ?? 1,
        latestTurnId: record.turns?.[record.turns.length - 1]?.id,
        modeLabel: record.modeLabel,
        settingLabel: record.settingLabel,
        generationKind: record.generationKind,
        referenceImages: record.referenceImages.map(({ id, src, name, width, height, format, mimeType, ossKey }) => ({
          id,
          src,
          name,
          width,
          height,
          format,
          mimeType,
          ossKey,
        })),
        turns: (record.turns?.length ? record.turns : [buildHistoryTurnFromRecord(record)]).map((turn) => ({
          ...turn,
          productImages: turn.productImages.map(({ id, src, name, width, height, format, mimeType, ossKey }) => ({
            id,
            src,
            name,
            width,
            height,
            format,
            mimeType,
            ossKey,
          })),
          referenceImages: turn.referenceImages.map(({ id, src, name, width, height, format, mimeType, ossKey }) => ({
            id,
            src,
            name,
            width,
            height,
            format,
            mimeType,
            ossKey,
          })),
        })),
      },
      createdAt: new Date(record.createdAt).toISOString(),
    });
  };

  const formatHistoryTime = (timestamp: number) => {
    const diff = Math.max(0, Date.now() - timestamp);
    const minute = 60 * 1000;
    const hour = 60 * minute;
    const day = 24 * hour;
    if (diff < minute) return "刚刚";
    if (diff < hour) return String(Math.floor(diff / minute)) + " 分钟前";
    if (diff < day) return String(Math.floor(diff / hour)) + " 小时前";
    return String(Math.floor(diff / day)) + " 天前";
  };

  const buildEcommerceHistoryTitle = (output: CloneOutputKey, prompt: string, createdAt: number) => {
    const outputLabel = cloneOutputOptions.find((option) => option.key === output)?.label || "生成记录";
    return prompt.trim() || outputLabel + " " + new Date(createdAt).toLocaleTimeString("zh-CN", { hour: "2-digit", minute: "2-digit" });
  };

  const updateLocalEcommerceHistoryRecord = (recordId: string, updater: (record: EcommerceHistoryRecord) => EcommerceHistoryRecord) => {
    setEcommerceHistoryRecords((current) => {
      const nextRecords = current.map((record) => (record.id === recordId ? normalizeEcommerceHistoryRecord(updater(record)) : record));
      writeEcommerceHistoryRecords(nextRecords);
      return nextRecords;
    });
  };

  const buildCurrentEcommerceHistoryTurn = (turnId: string, createdAt: number, turnStatus: EcommerceHistoryStatus = "generating"): EcommerceHistoryTurn => ({
    id: turnId,
    createdAt,
    status: turnStatus,
    output: cloneOutput,
    modeLabel: undefined,
    settingLabel: undefined,
    generationKind: cloneOutput === "video" ? "video" : cloneOutput === "set" ? "imageSet" : "singleImage",
    platform,
    market,
    language,
    ratio,
    requirement,
    productImages,
    results: [],
    setResultImages: [],
    setCounts: cloneSetCounts,
    detailModules: selectedCloneDetailModules,
    modelScenes: selectedCloneModelScenes,
    referenceImages: cloneReferenceImages,
    replicateLevel: cloneReplicateLevel,
  });

  const syncRecordSummaryWithTurn = (record: EcommerceHistoryRecord, turn: EcommerceHistoryTurn): EcommerceHistoryRecord => ({
    ...record,
    status: turn.status,
    errorMessage: turn.status === "failed" ? turn.errorMessage : undefined,
    output: turn.output,
    modeLabel: turn.modeLabel,
    settingLabel: turn.settingLabel,
    generationKind: turn.generationKind,
    platform: turn.platform,
    market: turn.market,
    language: turn.language,
    ratio: turn.ratio,
    requirement: turn.requirement,
    productImages: turn.productImages,
    results: turn.results,
    setResultImages: turn.setResultImages,
    setCounts: turn.setCounts,
    detailModules: turn.detailModules,
    modelScenes: turn.modelScenes,
    referenceImages: turn.referenceImages,
    replicateLevel: turn.replicateLevel,
  });

  const updateLocalEcommerceHistoryTurn = (
    recordId: string,
    turnId: string,
    updater: (turn: EcommerceHistoryTurn) => EcommerceHistoryTurn,
  ) => {
    updateLocalEcommerceHistoryRecord(recordId, (record) => {
      const turns = record.turns?.length ? record.turns : [buildHistoryTurnFromRecord(record)];
      let updatedTurn: EcommerceHistoryTurn | null = null;
      const nextTurns = turns.map((turn) => {
        if (turn.id !== turnId) return turn;
        updatedTurn = normalizeEcommerceHistoryTurn(updater(turn), record, turns.indexOf(turn));
        return updatedTurn;
      });
      return updatedTurn ? syncRecordSummaryWithTurn({ ...record, turns: nextTurns }, updatedTurn) : record;
    });
  };

  const beginEcommerceHistoryTurn = () => {
    const createdAt = Date.now();
    const turn = buildCurrentEcommerceHistoryTurn(crypto.randomUUID(), createdAt);
    const existingRecord = activeHistoryRecordId
      ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId)
      : null;
    const recordId = existingRecord?.id ?? crypto.randomUUID();
    const baseRecord: EcommerceHistoryRecord = existingRecord ?? {
      id: recordId,
      title: buildEcommerceHistoryTitle(cloneOutput, requirement, createdAt),
      createdAt,
      status: turn.status,
      output: turn.output,
      modeLabel: turn.modeLabel,
      settingLabel: turn.settingLabel,
      generationKind: turn.generationKind,
      platform: turn.platform,
      market: turn.market,
      language: turn.language,
      ratio: turn.ratio,
      requirement: turn.requirement,
      productImages: turn.productImages,
      results: turn.results,
      setResultImages: turn.setResultImages,
      setCounts: turn.setCounts,
      detailModules: turn.detailModules,
      modelScenes: turn.modelScenes,
      referenceImages: turn.referenceImages,
      replicateLevel: turn.replicateLevel,
      turns: [],
    };
    const previousTurns = baseRecord.turns?.length ? baseRecord.turns : existingRecord ? [buildHistoryTurnFromRecord(baseRecord)] : [];
    const record = normalizeEcommerceHistoryRecord(syncRecordSummaryWithTurn({
      ...baseRecord,
      turns: [...previousTurns, turn],
    }, turn));
    setEcommerceHistoryRecords((current) => {
      const nextRecords = [record, ...current.filter((item) => item.id !== record.id)].slice(0, 30);
      writeEcommerceHistoryRecords(nextRecords);
      return nextRecords;
    });
    setActiveHistoryRecordId(record.id);
    activeHistoryTurnIdRef.current = turn.id;
    return { record, turn };
  };

  const saveCurrentEcommerceHistory = () => {
    const activeRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null;
    const historyResults = activeRecord?.turns?.length ? getHistoryRecordResults(activeRecord) : getCurrentHistoryResults();
    if (!historyResults.length) return null;
    const signature = activeRecord?.turns?.length
      ? buildHistorySignature(activeRecord.output, activeRecord.requirement, historyResults, activeRecord.productImages)
      : buildHistorySignature(cloneOutput, requirement, historyResults, productImages);
    if (lastSavedHistorySignatureRef.current === signature && activeHistoryRecordId) return activeHistoryRecordId;

    const createdAt = Date.now();
    const record: EcommerceHistoryRecord = activeRecord?.turns?.length
      ? normalizeEcommerceHistoryRecord(activeRecord)
      : normalizeEcommerceHistoryRecord({
          id: activeRecord?.id ?? crypto.randomUUID(),
          title: activeRecord?.title ?? buildEcommerceHistoryTitle(cloneOutput, requirement, createdAt),
          createdAt: activeRecord?.createdAt ?? createdAt,
          status: "done",
          errorMessage: undefined,
          output: cloneOutput,
          platform,
          market,
          language,
          ratio,
          requirement,
          productImages,
          results: historyResults,
          setResultImages: cloneOutput === "set" ? historyResults.map((item) => item.src) : [],
          setCounts: cloneSetCounts,
          detailModules: selectedCloneDetailModules,
          modelScenes: selectedCloneModelScenes,
          referenceImages: cloneReferenceImages,
          replicateLevel: cloneReplicateLevel,
        });
    lastSavedHistorySignatureRef.current = signature;
    persistEcommerceHistoryRecord(record, historyResults);
    setEcommerceHistoryRecords((current) => {
      const nextRecords = [record, ...current.filter((item) => item.id !== record.id)].slice(0, 30);
      writeEcommerceHistoryRecords(nextRecords);
      return nextRecords;
    });
    setActiveHistoryRecordId(record.id);
    return record.id;
  };

  const openEcommerceHistoryRecord = (record: EcommerceHistoryRecord) => {
    setActiveTool("clone");
    setCloneOutput(record.output);
    setPlatform(record.platform);
    setMarket(record.market);
    setLanguage(record.language);
    setRatio(record.ratio);
    setRequirement(record.requirement);
    setProductImages(record.productImages);
    setCloneSetCounts(record.setCounts);
    setSelectedCloneDetailModules(record.detailModules.slice(0, maxDetailModuleSelection));
    setSelectedCloneModelScenes(record.modelScenes);
    setCloneReferenceImages(record.referenceImages);
    setCloneReplicateLevel(record.replicateLevel);
    setProductSetResultImages(record.setResultImages);
    setResults(record.output === "set" ? [] : record.results);
    setStatus((record.status ?? "done") as ProductCloneStatus);
    setPreviewZoom(1);
    setComposerMenu(null);
    setActiveHistoryRecordId(record.id);
    activeHistoryTurnIdRef.current = record.status === "generating"
      ? record.turns?.find((turn) => turn.status === "generating")?.id ?? null
      : null;
    const recordResults = getHistoryRecordResults(record);
    lastSavedHistorySignatureRef.current = buildHistorySignature(record.output, record.requirement, recordResults, record.productImages);
    setIsCommandComposerCompact(true);

    const turns = record.turns?.length ? record.turns : [buildHistoryTurnFromRecord(record)];
    const nodes = turns.reduce<CanvasNode[]>((items, turn) => {
      const turnResults = getTurnResults(turn);
      if (!turnResults.length) return items;
      const index = items.length;
      items.push({
        id: turn.id,
        mode: turn.output,
        sourceImage: turn.productImages[0]?.src?.startsWith("blob:") ? undefined : turn.productImages[0]?.src,
        results: turnResults,
        createdAt: turn.createdAt,
        x: index * 420,
        y: index % 2 === 0 ? 0 : 160,
      });
      return items;
    }, []);
    setCanvasNodes(nodes);

    setPreviewOffset({ x: 0, y: 0 });
    previewOffsetRef.current = { x: 0, y: 0 };
  };

  const handleNewEcommerceConversation = () => {
    saveCurrentEcommerceHistory();
    resetTask();
    setCanvasNodes([]);
    setPreviewZoom(1);
    setPreviewOffset({ x: 0, y: 0 });
    setComposerMenu(null);
    setIsCommandComposerCompact(false);
    setActiveHistoryRecordId(null);
    activeHistoryTurnIdRef.current = null;
    lastSavedHistorySignatureRef.current = "";
  };

  const refreshEcommerceHistory = () => {
    if (historyRefreshLockRef.current) return;
    historyRefreshLockRef.current = true;
    setIsHistoryRefreshing(true);
    setHistoryRefreshMessage("刷新中...");
    setHistoryRefreshStamp(Date.now());

    window.setTimeout(() => {
      const storedRecords = readEcommerceHistoryRecords();
      const mergedRecords = [...ecommerceHistoryRecords, ...storedRecords]
        .reduce<EcommerceHistoryRecord[]>((records, record) => {
          if (!records.some((item) => item.id === record.id)) records.push(record);
          return records;
        }, [])
        .sort((a, b) => b.createdAt - a.createdAt)
        .slice(0, 30);
      writeEcommerceHistoryRecords(mergedRecords);
      setHistoryRefreshTick((tick) => tick + 1);
      setEcommerceHistoryRecords(mergedRecords);
        setHistoryRefreshMessage(mergedRecords.length ? "已刷新 " + String(mergedRecords.length) + " 条记录" : "暂无可刷新记录");
      setHistoryRefreshStamp(Date.now());
      setIsHistoryRefreshing(false);
      historyRefreshLockRef.current = false;
    }, 180);

    window.setTimeout(() => setHistoryRefreshMessage(""), 3000);
  };
  const refreshEcommerceHistoryFromServer = async () => {
    if (historyRefreshLockRef.current) return;
    historyRefreshLockRef.current = true;
    setIsHistoryRefreshing(true);
    setHistoryRefreshMessage("Refreshing...");
    setHistoryRefreshStamp(Date.now());

    try {
      const serverRecords = isAuthenticated ? await listEcommerceGenerationHistory(30) : [];
      const mergedRecords = mergeEcommerceHistoryRecords(serverRecords, ecommerceHistoryRecords, readEcommerceHistoryRecords());
      writeEcommerceHistoryRecords(mergedRecords);
      setHistoryRefreshTick((tick) => tick + 1);
      setEcommerceHistoryRecords(mergedRecords);
      setHistoryRefreshMessage(mergedRecords.length ? "Synced " + String(mergedRecords.length) + " records" : "No history records");
      setHistoryRefreshStamp(Date.now());
    } catch {
      const mergedRecords = mergeEcommerceHistoryRecords(ecommerceHistoryRecords, readEcommerceHistoryRecords());
      writeEcommerceHistoryRecords(mergedRecords);
      setHistoryRefreshTick((tick) => tick + 1);
      setEcommerceHistoryRecords(mergedRecords);
      setHistoryRefreshMessage(mergedRecords.length ? "Loaded " + String(mergedRecords.length) + " local records" : "Server history unavailable");
      setHistoryRefreshStamp(Date.now());
    } finally {
      setIsHistoryRefreshing(false);
      historyRefreshLockRef.current = false;
    }

    window.setTimeout(() => setHistoryRefreshMessage(""), 3000);
  };
  const deleteHistoryRecord = (recordId: string, event: ReactMouseEvent) => {
    event.stopPropagation();
    const record = ecommerceHistoryRecords.find((r) => r.id === recordId);
    if (!record) return;
    const next = ecommerceHistoryRecords.filter((r) => r.id !== recordId);
    setEcommerceHistoryRecords(next);
    writeEcommerceHistoryRecords(next);
    if (activeHistoryRecordId === recordId) {
      // 删除的是当前正在查看的记录：回到首页（空闲态），不要停留在已删除任务的预览上。
      resetTask();
      setCanvasNodes([]);
      setPreviewZoom(1);
      setPreviewOffset({ x: 0, y: 0 });
      setComposerMenu(null);
      setIsCommandComposerCompact(false);
      setActiveHistoryRecordId(null);
      activeHistoryTurnIdRef.current = null;
      lastSavedHistorySignatureRef.current = "";
    }
    deleteEcommerceGenerationRecord(recordId).catch(() => {});
  };

  useEffect(() => {
    if (status === "done") saveCurrentEcommerceHistory();
  }, [status, results, productSetResultImages]);

  const detailSourcePreviewImages = detailProductImages.length
    ? detailProductImages.reduce<string[]>((urls, item) => {
        urls.push(item.src);
        return urls;
      }, [])
    : detailProductSamples;
  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 quickDetailBasicSelects: Array<{
    key: CloneBasicSelectKey;
    label: string;
    value: string;
    options: string[];
    onChange: (value: string) => void;
  }> = [
    { key: "platform", label: "平台", value: detailPlatform, options: platformOptions, onChange: handleDetailPlatformChange },
    { key: "market", label: "国家", value: detailMarket, options: marketOptions, onChange: handleDetailMarketChange },
    { key: "language", label: "语种", value: detailLanguage, options: detailLanguageOptions, onChange: setDetailLanguage },
    { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(detailRatio), options: quickSetRatioOptions, onChange: setDetailRatio },
  ];

  const quickHotBasicSelects: Array<{
    key: CloneBasicSelectKey;
    label: string;
    value: string;
    options: string[];
    onChange: (value: string) => void;
  }> = [
    { key: "platform", label: "平台", value: hotPlatform, options: platformOptions, onChange: handleHotPlatformChange },
    { key: "market", label: "国家", value: hotMarket, options: marketOptions, onChange: handleHotMarketChange },
    { key: "language", label: "语种", value: hotLanguage, options: hotLanguageOptions, onChange: setHotLanguage },
    { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(hotRatio), options: quickSetRatioOptions, onChange: setHotRatio },
  ];

  const quickSetBasicSelects: Array<{
    key: CloneBasicSelectKey;
    label: string;
    value: string;
    options: string[];
    onChange: (value: string) => void;
  }> = [
    { key: "platform", label: "平台", value: platform, options: platformOptions, onChange: setPlatform },
    { key: "market", label: "国家", value: market, options: marketOptions, onChange: setMarket },
    { key: "language", label: "语种", value: language, options: cloneLanguageOptions, onChange: setLanguage },
    { key: "ratio", label: "尺寸/比例", value: getQuickSetRatioValue(ratio), options: quickSetRatioOptions, 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 = (
    <EcommerceSetPanel
      setInputRef={setInputRef}
      setImages={setImages}
      isSetUploadDragging={isSetUploadDragging}
      productSetOutputOptions={productSetOutputOptions}
      productSetOutput={productSetOutput}
      platformOptions={platformOptions}
      marketOptions={marketOptions}
      productSetLanguageOptions={productSetLanguageOptions}
      productSetRatioOptions={productSetRatioOptions}
      productSetPlatform={productSetPlatform}
      productSetMarket={productSetMarket}
      productSetLanguage={productSetLanguage}
      productSetRatio={productSetRatio}
      setIsSetUploadDragging={setIsSetUploadDragging}
      handleSetDrop={handleSetDrop}
      handleSetUpload={handleSetUpload}
      removeSetImage={removeSetImage}
      handleProductSetOutputChange={handleProductSetOutputChange}
      handleProductSetPlatformChange={handleProductSetPlatformChange}
      handleProductSetMarketChange={handleProductSetMarketChange}
      setProductSetLanguage={setProductSetLanguage}
      setProductSetRatio={setProductSetRatio}
      formatRatioDisplayValue={formatRatioDisplayValue}
    />
  );

  const clonePanel = (
    <EcommerceClonePanel
      productInputRef={productInputRef}
      cloneReferenceInputRef={cloneReferenceInputRef}
      productImages={productImages}
      isProductUploadDragging={isProductUploadDragging}
      cloneOutput={cloneOutput}
      cloneOutputOptions={cloneOutputOptions}
      cloneBasicSelects={cloneBasicSelects}
      openCloneBasicSelect={openCloneBasicSelect}
      cloneReferenceMode={cloneReferenceMode}
      cloneReferenceImages={cloneReferenceImages}
      maxCloneReferenceImages={maxCloneReferenceImages}
      cloneReplicateLevel={cloneReplicateLevel}
      cloneReplicateLevelOptions={cloneReplicateLevelOptions}
      cloneSetCounts={cloneSetCounts}
      cloneSetCountOptions={cloneSetCountOptions}
      cloneSetTotal={cloneSetTotal}
      minCloneSetTotal={minCloneSetTotal}
      maxCloneSetTotal={maxCloneSetTotal}
      selectedCloneDetailModules={selectedCloneDetailModules}
      cloneDetailModules={cloneDetailModules}
      cloneModelPanelTab={cloneModelPanelTab}
      tryOnScenes={tryOnScenes}
      selectedCloneModelScenes={selectedCloneModelScenes}
      cloneModelCustomScene={cloneModelCustomScene}
      cloneModelSelects={cloneModelSelects}
      openCloneModelSelect={openCloneModelSelect}
      cloneModelSelectDropUp={cloneModelSelectDropUp}
      cloneVideoQuality={cloneVideoQuality}
      cloneVideoQualityOptions={cloneVideoQualityOptions}
      cloneVideoDuration={cloneVideoDuration}
      cloneVideoDurationMin={cloneVideoDurationMin}
      cloneVideoDurationMax={cloneVideoDurationMax}
      cloneVideoDurationStyle={cloneVideoDurationStyle}
      cloneVideoSmart={cloneVideoSmart}
      canGenerate={canGenerate}
      status={status}
      lastFailedActionRef={lastFailedActionRef}
      setIsProductUploadDragging={setIsProductUploadDragging}
      handleProductDrop={handleProductDrop}
      removeProductImage={removeProductImage}
      handleProductUpload={handleProductUpload}
      handleCloneOutputChange={handleCloneOutputChange}
      setOpenCloneBasicSelect={setOpenCloneBasicSelect}
      setCloneReferenceMode={setCloneReferenceMode}
      handleCloneReferenceUpload={handleCloneReferenceUpload}
      isCloneReferenceDragging={isCloneReferenceDragging}
      handleCloneReferenceDragOver={handleCloneReferenceDragOver}
      handleCloneReferenceDragLeave={handleCloneReferenceDragLeave}
      handleCloneReferenceDrop={handleCloneReferenceDrop}
      setCloneReplicateLevel={setCloneReplicateLevel}
      startCloneSetCountHold={startCloneSetCountHold}
      clearCloneSetCountHold={clearCloneSetCountHold}
      toggleCloneDetailModule={toggleCloneDetailModule}
      setCloneModelPanelTab={setCloneModelPanelTab}
      toggleCloneModelScene={toggleCloneModelScene}
      setCloneModelCustomScene={setCloneModelCustomScene}
      setOpenCloneModelSelect={setOpenCloneModelSelect}
      setCloneModelSelectDropUp={setCloneModelSelectDropUp}
      setCloneVideoQuality={setCloneVideoQuality}
      setCloneVideoDuration={setCloneVideoDuration}
      clampCloneVideoDuration={clampCloneVideoDuration}
      setCloneVideoSmart={setCloneVideoSmart}
      handleGenerate={handleGenerate}
      onCancelGenerate={handleCancelGenerate}
      formatRatioDisplayValue={formatRatioDisplayValue}
      onStartVideoPlan={handleStartVideoPlan}
    />
  );

  const detailPanel = (
    <EcommerceDetailPanel
      detailInputRef={detailInputRef}
      detailProductImages={detailProductImages}
      detailPlatform={detailPlatform}
      detailMarket={detailMarket}
      detailLanguage={detailLanguage}
      detailType={detailType}
      detailRequirement={detailRequirement}
      selectedDetailModules={selectedDetailModules}
      detailStatus={detailStatus}
      canGenerateDetail={canGenerateDetail}
      detailPrimaryLabel={detailPrimaryLabel}
      platformOptions={platformOptions}
      marketOptions={marketOptions}
      detailLanguageOptions={detailLanguageOptions}
      detailTypeOptions={detailTypeOptions}
      detailModules={detailModules}
      handleDetailUpload={handleDetailUpload}
      handleDetailPlatformChange={handleDetailPlatformChange}
      handleDetailMarketChange={handleDetailMarketChange}
      setDetailLanguage={setDetailLanguage}
      setDetailType={setDetailType}
      setDetailRequirement={setDetailRequirement}
      handleDetailAiWrite={handleDetailAiWrite}
      toggleDetailModule={toggleDetailModule}
      handleDetailGenerate={handleDetailGenerate}
      onCancelGenerate={handleCancelGenerate}
    />
  );

  const tryOnPanel = (
    <EcommerceTryOnPanel
      garmentInputRef={garmentInputRef}
      garmentImages={garmentImages}
      modelSource={modelSource}
      modelGender={modelGender}
      modelAge={modelAge}
      modelEthnicity={modelEthnicity}
      modelBody={modelBody}
      appearance={appearance}
      selectedScenes={selectedScenes}
      customScene={customScene}
      smartScene={smartScene}
      tryOnRatio={tryOnRatio}
      tryOnStatus={tryOnStatus}
      canGenerateTryOn={canGenerateTryOn}
      tryOnPrimaryLabel={tryOnPrimaryLabel}
      tryOnModelOptions={tryOnModelOptions}
      tryOnAssets={tryOnAssets}
      tryOnScenes={tryOnScenes}
      tryOnRatioOptions={tryOnRatioOptions}
      handleGarmentUpload={handleGarmentUpload}
      setModelSource={setModelSource}
      setModelGender={setModelGender}
      setModelAge={setModelAge}
      setModelEthnicity={setModelEthnicity}
      setModelBody={setModelBody}
      setAppearance={setAppearance}
      handleGenerateModel={handleGenerateModel}
      toggleScene={toggleScene}
      setCustomScene={setCustomScene}
      setSmartScene={setSmartScene}
      setTryOnRatio={setTryOnRatio}
      handleTryOnGenerate={handleTryOnGenerate}
      onCancelGenerate={handleCancelGenerate}
    />
  );

  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商品套图预览" onWheel={handlePreviewWheel}>
      <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(setPreviewCards[0] ?? productSetPreviewCards[0])}
          >
            <img src={setImages[0]?.src ?? (setPreviewCards[0]?.src ?? productSetPreviewCards[0].src)} alt="商品原图" />
          </button>
          <div className="product-set-flow-arrow" aria-hidden="true" />
          <div className="product-set-card-grid result-reveal">
            {setPreviewCards.map((card) => (
              <button key={card.id} type="button" onClick={() => openProductSetPreview(card)}>
                <img src={card.src} alt={card.label} />
              </button>
            ))}
          </div>
        </section>
      ) : (
        <section className="product-set-empty-preview" aria-live="polite">
          {productSetStatus === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
          <strong>{productSetStatus === "generating" ? "正在生成" : "等待生成"}</strong>
          {productSetStatus === "generating" ? <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label="商品套图" /> : null}
          <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>
        {productSetStatus === "generating" ? (
          <button type="button" className="product-set-floating-submit product-set-floating-submit--cancel" onClick={handleCancelGenerate}>
            {"\u53d6\u6d88\u751f\u6210"}
          </button>
        ) : null}
      </section>

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

  const composerSettingLabel =
    cloneOutput === "set"
      ? "套图 " + String(cloneSetTotal) + "张"
      : cloneOutput === "detail"
        ? "详情 " + String(selectedCloneDetailModules.length) + "项"
      : cloneOutput === "model"
        ? cloneModelPanelTab === "scene" ? "场景设置" : "模特设置"
      : cloneOutput === "video"
        ? String(cloneVideoDuration) + "秒 " + (cloneVideoQuality === "standard" ? "720P" : "1080P")
        : "换装素材";

  const composerAssetTabs: Array<{ key: ComposerAssetTabKey; label: string }> = [
    { key: "recent", label: "最近保存" },
    { key: "recipe", label: "套图配方" },
    { key: "model", label: "模特库" },
  ];
  const composerWorkModeOptions: Array<{ key: ComposerWorkModeKey; label: string; desc: string }> = [
    { key: "quick", label: "快捷", desc: "快速整理提示词，适合常规商品图生成。" },
    { key: "think", label: "思考", desc: "更强调卖点拆解、场景规划和图文一致性。" },
  ];

  const applyAiWriteSuggestion = () => {
    const keyword = aiWriteDraft.trim();
    if (!keyword) {
      toast.info("请输入产品关键词或卖点");
      return;
    }
    const modeHint = composerWorkMode === "think" ? "先拆解目标人群、核心卖点和使用场景，" : "";
    const nextValue = `${keyword}。${modeHint}请生成适合${platform}的高转化电商素材，画面干净高级，突出产品主体、核心卖点、使用场景和购买理由。`.slice(0, 500);
    setRequirement(nextValue);
    setComposerMenu(null);
  };

  const renderComposerAssetPanel = () => {
    const renderEmpty = (label: string) => (
      <div className="ecom-command-library-empty">
        <FolderOpenOutlined />
        <strong>暂无数据</strong>
        <span>{label}</span>
      </div>
    );

    let content: ReactNode;
    if (composerAssetTab === "recent") {
      content = ecommerceHistoryRecords.length ? (
        <div className="ecom-command-library-list">
          {ecommerceHistoryRecords.slice(0, 4).map((record) => {
            const outputLabel = cloneOutputOptions.find((option) => option.key === record.output)?.label || "生成记录";
            return (
              <button key={record.id} type="button" onClick={() => { openEcommerceHistoryRecord(record); setComposerMenu(null); }}>
                <strong>{record.title}</strong>
                <span>{outputLabel} · {formatHistoryTime(record.createdAt)}</span>
              </button>
            );
          })}
        </div>
      ) : renderEmpty("生成后保存的素材会沉淀在这里");
    } else if (composerAssetTab === "recipe") {
      content = (
        <div className="ecom-command-library-list">
          {effectiveCommerceScenarioTemplates.slice(0, 4).map((template) => (
            <button key={template.id} type="button" onClick={() => { handleCloneTemplateCardClick(template); setComposerMenu(null); }}>
              <strong>{template.title}</strong>
              <span>{template.badge} · {template.desc}</span>
            </button>
          ))}
        </div>
      );
    } else {
      content = (
        <div className="ecom-command-library-list ecom-command-library-list--model">
          {tryOnScenes.slice(0, 4).map((scene) => (
            <button key={scene} type="button" className={selectedCloneModelScenes.includes(scene) ? "is-active" : ""} onClick={() => toggleCloneModelScene(scene)}>
              <strong>{scene}</strong>
              <span>模特场景</span>
            </button>
          ))}
        </div>
      );
    }

    return (
      <>
        <header className="ecom-command-library-head">
          <strong>资产库</strong>
          <button type="button" className="ecom-command-library-help" onClick={(event) => event.preventDefault()}>
            <QuestionCircleOutlined /> 使用教程
          </button>
        </header>
        <div className="ecom-command-library-tabs" role="tablist" aria-label="资产库分类">
          {composerAssetTabs.map((tab) => (
            <button key={tab.key} type="button" className={composerAssetTab === tab.key ? "is-active" : ""} onClick={() => setComposerAssetTab(tab.key)}>
              {tab.label}
            </button>
          ))}
        </div>
        {content}
      </>
    );
  };

  const renderComposerMenu = () => {
    const composerLanguageOptions = Array.from(new Set(marketLanguageOptions.flatMap((option) => option.languages))).map((item) => ({
      language: item,
      countries: marketLanguageOptions.filter((option) => option.languages.includes(item)).map((option) => option.country),
    }));
    const composerPopoverStyle = {
      "--composer-popover-left": `${composerPopoverLeft}px`,
      "--composer-popover-top": `${composerPopoverTop}px`,
    } as CSSProperties;
    const menuToRender = composerMenu ?? visibleComposerMenu;
    if (!menuToRender) return null;
    const popoverClosingClass = !composerMenu && isComposerMenuClosing ? " is-closing" : "";
    const composerPopoverKey = `${menuToRender}-${cloneOutput}-${popoverClosingClass ? "closing" : "open"}`;
    if (menuToRender === "assetLibrary") {
      return (
        <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--library${popoverClosingClass}`} style={composerPopoverStyle}>
          {renderComposerAssetPanel()}
        </div>
      );
    }
    if (menuToRender === "workMode") {
      return (
        <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--work-mode${popoverClosingClass}`} style={composerPopoverStyle}>
          <header><strong>模式</strong><span>仅调整创作体验，不改变接口</span></header>
          {composerWorkModeOptions.map((option) => (
            <button key={option.key} type="button" className={composerWorkMode === option.key ? "is-active" : ""} onClick={() => { setComposerWorkMode(option.key); setComposerMenu(null); }}>
              <strong>{option.label}</strong>
              <span>{option.desc}</span>
            </button>
          ))}
        </div>
      );
    }
    if (menuToRender === "aiWrite") {
      return (
        <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--ai-write${popoverClosingClass}`} style={composerPopoverStyle}>
          <header><strong>AI 帮写</strong><span>把关键词扩写成商业提示词</span></header>
          <textarea value={aiWriteDraft} onChange={(event) => setAiWriteDraft(event.target.value.slice(0, 120))} placeholder="输入产品名称、卖点或期望风格" />
          <button type="button" className="ecom-command-ai-submit" onClick={applyAiWriteSuggestion}>
            开始智能优化
          </button>
        </div>
      );
    }
    if (menuToRender === "mode") {
      return (
        <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--grid ecom-command-popover--mode${popoverClosingClass}`} style={composerPopoverStyle}>
          {cloneOutputOptions.map((option) => (
            <button key={option.key} type="button" className={cloneOutput === option.key ? "is-active" : ""} onClick={() => { handleCloneOutputChange(option.key); setComposerMenu(null); }}>
              <span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
              <strong>{option.label}</strong>
              <em>{option.desc}</em>
            </button>
          ))}
        </div>
      );
    }
    if (menuToRender === "platform") {
      return (
        <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--platforms${popoverClosingClass}`} style={composerPopoverStyle}>
          {platformOptions.map((option) => (
            <button key={option} type="button" className={platform === option ? "is-active" : ""} onClick={() => { handleClonePlatformChange(option); setComposerMenu(null); }}>
              {option}
            </button>
          ))}
        </div>
      );
    }
    if (menuToRender === "language") {
      return (
        <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--languages${popoverClosingClass}`} style={composerPopoverStyle}>
          {composerLanguageOptions.map((option) => (
            <button key={option.language} type="button" className={language === option.language ? "is-active" : ""} onClick={() => { setLanguage(option.language); setComposerMenu(null); }}>
              {option.language}
            </button>
          ))}
        </div>
      );
    }
    if (menuToRender === "ratio") {
      return (
        <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--ratio-picker${popoverClosingClass}`} style={composerPopoverStyle}>
          {composerRatioOptions.map((option) => {
            const ratioParts = getRatioDisplayParts(option);
            return (
              <button key={option} type="button" className={ratio === option ? "is-active" : ""} onClick={() => { setRatio(option); setComposerMenu(null); }}>
                {ratioParts.aspect}
              </button>
            );
          })}
        </div>
      );
    }
    if (menuToRender === "settings" && activeCommerceScenario === "salesVideo") {
      return (
        <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--list ecom-command-popover--duration${popoverClosingClass}`} style={composerPopoverStyle}>
          {composerDurationOptions.map((option) => (
            <button key={option} type="button" className={cloneVideoDuration === option ? "is-active" : ""} onClick={() => { setCloneVideoDuration(option); setComposerMenu(null); }}>
              {option}秒
            </button>
          ))}
        </div>
      );
    }
    return (
      <div key={composerPopoverKey} className={`ecom-command-popover ecom-command-popover--settings ecom-command-popover--settings-${cloneOutput}${popoverClosingClass}`} style={composerPopoverStyle}>
        {cloneOutput === "set" ? (
          <>
            <header><strong>套图分类设置</strong><span>总数 1-16 张</span></header>
            {cloneSetCountOptions.map((item) => (
              <div key={item.key} className="ecom-command-count-row">
                <span><strong>{item.title}</strong><em>{item.desc}</em></span>
                <div>
                  <button type="button" onClick={() => updateCloneSetCount(item.key, -1)} disabled={cloneSetCounts[item.key] <= 0 || cloneSetTotal <= minCloneSetTotal}>-</button>
                  <b>{cloneSetCounts[item.key]}</b>
                  <button type="button" onClick={() => updateCloneSetCount(item.key, 1)} disabled={cloneSetTotal >= maxCloneSetTotal}>+</button>
                </div>
              </div>
            ))}
          </>
        ) : cloneOutput === "detail" ? (
          <>
            <header><strong>详情模块设置</strong><span>多选</span></header>
            <div className="ecom-command-module-grid ecom-command-module-grid--detail">
              {cloneDetailModules.map((module) => (
                <button key={module.id} type="button" className={selectedCloneDetailModules.includes(module.id) ? "is-active" : ""} onClick={() => toggleCloneDetailModule(module.id)}>
                  <strong>{module.title}</strong><span>{module.desc}</span>
                </button>
              ))}
            </div>
          </>
        ) : cloneOutput === "model" ? (
          <>
            <header><strong>场景设置</strong><span>场景 / 形象</span></header>
            <div className="ecom-command-module-grid ecom-command-module-grid--model">
              {tryOnScenes.map((scene) => (
                <button key={scene} type="button" className={selectedCloneModelScenes.includes(scene) ? "is-active" : ""} onClick={() => toggleCloneModelScene(scene)}>{scene}</button>
              ))}
            </div>
            <div className="ecom-command-model-profile">
              <strong className="ecom-command-model-profile__title">模特形象</strong>
              {cloneModelSelects.map((item) => (
                <section key={item.key}>
                  <strong>{item.label}</strong>
                  <div>
                    {item.options.map((option) => (
                      <button key={option} type="button" className={item.value === option ? "is-active" : ""} onClick={() => item.onChange(option)}>{option}</button>
                    ))}
                  </div>
                </section>
              ))}
            </div>
          </>
        ) : cloneOutput === "video" ? (
          <>
            <header><strong>短视频设置</strong><span>{cloneVideoDuration}秒</span></header>
            <div className="ecom-command-module-grid ecom-command-module-grid--video">
              {cloneVideoQualityOptions.map((option) => (
                <button key={option.key} type="button" className={cloneVideoQuality === option.key ? "is-active" : ""} onClick={() => setCloneVideoQuality(option.key)}>
                  <strong>{option.label}</strong><span>{option.desc}</span>
                </button>
              ))}
            </div>
            <label className="ecom-command-range">
              <span>视频时长 {cloneVideoDuration}秒</span>
              <input type="range" min={cloneVideoDurationMin} max={cloneVideoDurationMax} step={5} value={cloneVideoDuration} onChange={(event) => setCloneVideoDuration(clampCloneVideoDuration(Number(event.target.value)))} />
            </label>
          </>
        ) : (
          <>
            <header><strong>视频换装设置</strong><span>上传视频和服装参考</span></header>
            <p className="ecom-command-popover-note">请在提示词中描述换装目标，并上传参考商品图。</p>
          </>
        )}
      </div>
    );
  };

  const toggleComposerMenu = (menuKey: ComposerMenuKey, event: ReactMouseEvent<HTMLButtonElement>) => {
    const composerRect = event.currentTarget.closest(".clone-ai-input-wrapper.ecom-command-composer")?.getBoundingClientRect();
    const buttonRect = event.currentTarget.getBoundingClientRect();
    const composerLeft = composerRect?.left ?? buttonRect.left;
    const composerTop = composerRect?.top ?? buttonRect.top;
    setComposerPopoverLeft(Math.max(0, buttonRect.left - composerLeft));
    setComposerPopoverTop(Math.max(0, buttonRect.bottom - composerTop + 8));
    setComposerMenu((menu) => (menu === menuKey ? null : menuKey));
  };

  const canPlanVideo = productImages.length > 0 || requirement.trim().length > 0;
  const isDefaultCommandRouting = activeCommerceScenario === null || activeCommerceScenario === "popular";
  const commandGenerateDisabled = isDefaultIntentRouting || (isDefaultCommandRouting ? !canPlanVideo : cloneOutput === "video" ? false : !canGenerate);

  function handleStartVideoPlan() {
    if (!canPlanVideo) {
      toast.info("请先上传商品图或填写短视频需求");
      return;
    }
    if (!isAuthenticated) {
      requestLogin();
      return;
    }
    setIsVideoWorkspaceVisible(true);
    setVideoPlanTrigger((value) => value + 1);
  }

  const showDefaultRoutingGeneratingState = () => {
    setComposerMenu(null);
    setIsCommandComposerCompact(true);
    imageAbortRef.current = { current: false };
    lastFailedActionRef.current = null;
    setGenerationProgress(2);
    setResults([]);
    setProductSetResultImages([]);
    setPreviewZoom(1);
    setPreviewOffset({ x: 0, y: 0 });
    previewOffsetRef.current = { x: 0, y: 0 };
    setStatus("generating");
  };

  const resetDefaultRoutingGeneratingState = () => {
    setStatus("idle");
    setGenerationProgress(0);
    setIsCommandComposerCompact(false);
  };

  const handleCommandGenerate = async () => {
    if (cloneOutput === "video") {
      handleStartVideoPlan();
      return;
    }
    if (isDefaultCommandRouting) {
      if (!canPlanVideo) return;
      if ((appUsage?.balanceCents ?? 0) <= 0) {
        toast.error("积分不足，请充值后继续");
        return;
      }
      setIsDefaultIntentRouting(true);
      showDefaultRoutingGeneratingState();
      try {
        const intent = await classifyDefaultCommerceIntent({
          prompt: requirement,
          referenceCount: productImages.length,
          ratio,
          language,
          platform,
        });
        if (intent.kind === "video") {
          resetDefaultRoutingGeneratingState();
          handleCloneOutputChange("video");
          handleStartVideoPlan();
          return;
        }
        if (!canGenerate) {
          resetDefaultRoutingGeneratingState();
          toast.info("请先上传商品图");
          return;
        }
        handleGenerate(intent);
      } catch (error) {
        resetDefaultRoutingGeneratingState();
        toast.error(error instanceof Error ? error.message : "智能识别失败，请重试");
      } finally {
        setIsDefaultIntentRouting(false);
      }
      return;
    }
    handleGenerate();
  };

  const showMainVideoWorkspace = cloneOutput === "video" && isVideoWorkspaceVisible;

  const scrollInspirationRow = (event: ReactMouseEvent<HTMLButtonElement>, direction: -1 | 1) => {
    const row = event.currentTarget.closest(".ecom-inspiration-row");
    const strip = row?.querySelector<HTMLElement>(".ecom-inspiration-strip");
    if (!strip) return;
    strip.scrollBy({ left: direction * Math.max(280, strip.clientWidth * 0.78), behavior: "smooth" });
  };

  const applyInspirationPrompt = (prompt: string) => {
    const nextValue = prompt.slice(0, 500);
    // 回到主指令栏（关闭可能打开的快捷工具页），把提示词填入并聚焦。
    setActiveQuickTool(null);
    setRequirement(nextValue);
    syncRequirementMentionQuery(nextValue, nextValue.length);
    setInspirationPreview(null);
    requestAnimationFrame(() => {
      const textarea = requirementTextareaRef.current;
      if (textarea) {
        textarea.focus();
        textarea.setSelectionRange(nextValue.length, nextValue.length);
        textarea.scrollIntoView({ behavior: "smooth", block: "center" });
      }
    });
    toast.success("提示词已填入指令栏");
  };

  const applyComposerPrompt = (prompt: string) => {
    const nextValue = prompt.slice(0, 500);
    setActiveQuickTool(null);
    setComposerMenu(null);
    setRequirement(nextValue);
    syncRequirementMentionQuery(nextValue, nextValue.length);
    setInspirationPreview(null);
    requestAnimationFrame(() => {
      const textarea = requirementTextareaRef.current;
      if (textarea) {
        textarea.focus();
        textarea.setSelectionRange(nextValue.length, nextValue.length);
        textarea.scrollIntoView({ behavior: "smooth", block: "center" });
      }
      window.setTimeout(() => {
        const latestTextarea = requirementTextareaRef.current;
        if (!latestTextarea) return;
        latestTextarea.focus();
        latestTextarea.setSelectionRange(nextValue.length, nextValue.length);
      }, 80);
    });
  };

  const addTemplateAssetsToComposer = (card: CloneTemplateAsset) => {
    const sourceAssets = card.sourceAssets?.filter((asset) => asset.url.trim()) || [];
    if (!sourceAssets.length) return;

    const stamp = Date.now();
    const nextImages: CloneImageItem[] = sourceAssets.map((asset, index) => ({
      id: `template-${card.id}-${stamp}-${index}`,
      src: asset.url,
      name: asset.name || `${card.title}-素材${index + 1}`,
      ossKey: asset.ossKey,
      mimeType: asset.mimeType,
      format: getRemoteImageFormat(asset.mimeType || "", asset.url),
    }));

    let insertedImages: CloneImageItem[] = [];
    setProductImages((current) => {
      const userImages = current.filter((image) => !image.id.startsWith("template-"));
      const remainingSlots = maxCloneProductImages - userImages.length;
      if (remainingSlots <= 0) {
        toast.info("模板素材已达上限");
        return userImages;
      }
      insertedImages = nextImages.slice(0, remainingSlots);
      return [...userImages, ...insertedImages];
    });

    insertedImages.forEach((image) => {
      void readImageDimensions(image.src)
        .then(({ width, height }) => {
          setProductImages((current) =>
            current.map((item) => (item.id === image.id ? { ...item, width, height } : item)),
          );
        })
        .catch(() => undefined);
    });
  };

  const handleCloneTemplateCardClick = (card: CommerceScenarioTemplate) => {
    setActiveCommerceScenario(card.scenario);
    if (card.output !== cloneOutput) handleCloneOutputChange(card.output);
    setIsCloneTemplateStripVisible(true);
    setComposerMenu(null);
    addTemplateAssetsToComposer(card);
    applyComposerPrompt(card.prompt);
  };

  const inspirationPreviewOverlay =
    inspirationPreview && typeof document !== "undefined"
      ? createPortal(
          <div
            className="ecom-inspiration-preview"
            onClick={() => setInspirationPreview(null)}
            onWheel={(event) => {
              event.preventDefault();
              event.stopPropagation();
            }}
          >
            <div className="ecom-inspiration-preview__backdrop" />
            <div className="ecom-inspiration-preview__content" onClick={(event) => event.stopPropagation()}>
              {inspirationPreview.mediaType === "video" ? (
                <video src={inspirationPreview.mediaUrl} controls autoPlay loop playsInline className="ecom-inspiration-preview__media" />
              ) : (
                <img src={inspirationPreview.mediaUrl} alt="" className="ecom-inspiration-preview__media" />
              )}
              {inspirationPreview.prompt ? (
                <div className="ecom-inspiration-preview__actions">
                  <button
                    type="button"
                    className="ecom-inspiration-preview__use-prompt"
                    onClick={() => applyInspirationPrompt(inspirationPreview.prompt)}
                  >
                    <EditOutlined />
                    <span>使用此提示词</span>
                  </button>
                </div>
              ) : null}
            </div>
          </div>,
          document.body,
        )
      : null;

  const clonePreview = (
    <main
      className={`product-clone-preview clone-ai-preview${showMainVideoWorkspace ? " has-main-video-workspace" : ""}`}
      data-status={status}
      aria-label="电商 AI 作图预览"
      {...getPreviewSurfaceProps()}
    >
      <header className="clone-ai-preview-header">
        <strong>预览</strong>
        <span>
          上传商品图，AI 即刻生成 <b>符合多电商平台规范</b> 的高转化率商品素材。
        </span>
        <div className="clone-ai-preview-zoom">
          <button type="button" onClick={() => setPreviewZoom((z) => Math.max(0.25, z - 0.1))} disabled={previewZoom <= 0.25} aria-label="缩小">-</button>
          <span>{Math.round(previewZoom * 100)}%</span>
          <button type="button" onClick={() => setPreviewZoom((z) => Math.min(2, z + 0.1))} disabled={previewZoom >= 2} aria-label="放大">+</button>
          {activeHistoryRecordId ? (
            <button type="button" onClick={() => { setPreviewZoom(1); setPreviewOffset({ x: 0, y: 0 }); }} aria-label="重置画布">重置</button>
          ) : null}
        </div>
      </header>

      {cloneOutput === "video" ? (
        showMainVideoWorkspace ? (
          <section className="clone-ai-main-video-workspace" style={previewTransformStyle} aria-label="短视频生成画布">
            <EcommerceVideoWorkspace
              isAuthenticated={isAuthenticated}
              productImageDataUrls={ecommerceVideoImageDataUrls}
              productImageFiles={ecommerceVideoImageFiles}
              requirement={requirement}
              platform={platform}
              aspectRatio={ratio.includes("9:16") ? "9:16" : ratio.includes("16:9") ? "16:9" : ratio.includes("3:4") ? "3:4" : "9:16"}
              durationSeconds={cloneVideoDuration}
              resolution={cloneVideoQuality === "standard" ? "720P" : "1080P"}
              onRequestLogin={() => (isAuthenticated ? undefined : requestLogin())}
              onOpenHistory={() => setVideoHistoryVisible(true)}
              triggerPlan={videoPlanTrigger}
            />
          </section>
        ) : status === "idle" || status === "ready" ? null : (
        <>
          <section className="clone-ai-flow-pipeline" aria-label="生成流程">
            {/* Source Node —原图素材 */}
            <div className="clone-ai-flow-source">
              <div className="clone-ai-flow-node clone-ai-flow-node--source">
                {productImages[0]?.src ? (
                  <img src={productImages[0].src} alt="商品原图" />
                ) : (
                  <div className="clone-ai-flow-node__placeholder">
                    <FileImageOutlined />
                  </div>
                )}
              </div>
              <span className="clone-ai-flow-node__label">附件原图</span>
            </div>

            {/* Connector - branch lines */}
            <div className="clone-ai-flow-connector" aria-hidden="true">
              <div className="clone-ai-flow-connector__trunk" />
              <div className="clone-ai-flow-connector__branches">
                <div className="clone-ai-flow-connector__branch" />
                <div className="clone-ai-flow-connector__branch" />
                <div className="clone-ai-flow-connector__branch" />
              </div>
            </div>

            {/* Branches —生成路径分支 */}
            {status === "done" ? (
              <div className="clone-ai-flow-branches">
                {results[0]?.src ? (
                  <div className="clone-ai-flow-branch">
                    <div className="clone-ai-flow-node clone-ai-flow-node--text">
                      <div className="clone-ai-flow-node__text-content">
                        <span className="clone-ai-flow-node__text-title">{selectedCloneOutput.label}</span>
                        <span className="clone-ai-flow-node__text-desc">{requirement || "AI 智能生成"}</span>
                      </div>
                    </div>
                    <div className="clone-ai-flow-arrow" aria-hidden="true" />
                    <button
                      type="button"
                      className="clone-ai-flow-node clone-ai-flow-node--result"
                      onClick={() => openProductSetPreview(results[0])}
                    >
                      <img src={results[0].src} alt={selectedCloneOutput.label} />
                      <span className="clone-ai-flow-node__tag">{selectedCloneOutput.label}</span>
                    </button>
                    <div className="clone-ai-flow-arrow" aria-hidden="true" />
                    <div className="clone-ai-flow-node clone-ai-flow-node--video">
                      <img src={results[0].src} alt="分镜视频" />
                      <span className="clone-ai-flow-node__tag clone-ai-flow-node__tag--accent">分镜视频</span>
                    </div>
                  </div>
                ) : null}
              </div>
            ) : (
              <div className="clone-ai-flow-branches clone-ai-flow-branches--empty">
                {[1, 2, 3].map((branchIndex) => (
                  <div
                    key={branchIndex}
                    className={`clone-ai-flow-branch${status === "generating" ? " is-generating" : ""}${status === "failed" ? " is-failed" : ""}`}
                  >
                    <div className="clone-ai-flow-node clone-ai-flow-node--text">
                      <div className="clone-ai-flow-node__text-content">
                        <span className="clone-ai-flow-node__text-title">分镜文本{branchIndex}</span>
                        <span className="clone-ai-flow-node__text-desc">
                          {status === "generating" ? "AI 解析中..." : "等待生成"}
                        </span>
                      </div>
                    </div>
                    <div className="clone-ai-flow-arrow" aria-hidden="true" />
                    <div className="clone-ai-flow-node clone-ai-flow-node--result">
                      <div className="clone-ai-flow-node__placeholder">
                        {status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
                      </div>
                      <span className="clone-ai-flow-node__tag">分镜图{branchIndex}</span>
                    </div>
                    <div className="clone-ai-flow-arrow" aria-hidden="true" />
                    <div className="clone-ai-flow-node clone-ai-flow-node--video">
                      <div className="clone-ai-flow-node__placeholder">
                        {status === "generating" ? <LoadingOutlined /> : <FileImageOutlined />}
                      </div>
                      <span className="clone-ai-flow-node__tag">分镜视频{branchIndex}</span>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </section>

          {/* Status Overlay —生成状态覆盖层 */}
          {status === "generating" || status === "failed" ? (
            <section className="clone-ai-flow-status" aria-live="polite">
              {status === "generating" ? (
                <>
                  <LoadingOutlined style={{ fontSize: 28 }} />
                  <strong>正在生成</strong>
                  <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} />
                  <span>AI 正在为 {platform} / {market} 整理{selectedCloneOutput.label}。</span>
                </>
              ) : status === "failed" ? (
                <>
                  <FrownOutlined style={{ fontSize: 28 }} />
                  <strong>生成失败</strong>
                  <span>请检查网络后点击下方重试</span>
                  {lastFailedActionRef.current ? (
                    <button type="button" className="clone-ai-retry-btn" onClick={lastFailedActionRef.current}>
                      <ReloadOutlined /> 重试
                    </button>
                  ) : null}
                </>
              ) : null}
            </section>
          ) : null}
        </>
        )
      ) : (
        <>
          {status === "done" || canvasNodes.length > 0 ? (
            <div className="clone-ai-preview-zoom-wrap" style={previewTransformStyle}>
            <section className="clone-ai-canvas-nodes" aria-label="生成结果">
              {canvasNodes.map((node) => (
                <article
                  key={node.id}
                  className="clone-ai-canvas-node"
                  data-mode={node.mode}
                  data-node-id={node.id}
                  style={{ transform: `translate(${node.x}px, ${node.y}px)` }}
                  onPointerDown={(event) => startCanvasNodeDrag(event, node)}
                  onPointerMove={(event) => moveCanvasNodeDrag(event, node.id)}
                  onPointerUp={(event) => stopCanvasNodeDrag(event, node.id)}
                  onPointerCancel={(event) => stopCanvasNodeDrag(event, node.id)}
                >
                  <div
                    className="clone-ai-node-drag-handle"
                    onPointerDown={(e) => {
                      if (e.button !== 0) return;
                      e.stopPropagation();
                      e.currentTarget.setPointerCapture(e.pointerId);
                      nodeDragRef.current = { active: true, nodeId: node.id, startX: e.clientX, startY: e.clientY, originX: node.x, originY: node.y };
                    }}
                    onPointerMove={(e) => {
                      const drag = nodeDragRef.current;
                      if (!drag.active || drag.nodeId !== node.id) return;
                      const zoom = previewZoomRef.current;
                      const dx = (e.clientX - drag.startX) / zoom;
                      const dy = (e.clientY - drag.startY) / zoom;
                      setCanvasNodes((prev) => prev.map((n) => n.id === node.id ? { ...n, x: drag.originX + dx, y: drag.originY + dy } : n));
                    }}
                    onPointerUp={(e) => {
                      if (nodeDragRef.current.nodeId === node.id) {
                        nodeDragRef.current = { ...nodeDragRef.current, active: false };
                        e.currentTarget.releasePointerCapture(e.pointerId);
                      }
                    }}
                  />
                  <div className="clone-ai-source-stack">
                    <button
                      type="button"
                      className="clone-ai-source-corner-action"
                      onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
                      disabled={!node.sourceImage}
                    >
                      原图素材
                    </button>
                    <button
                      type="button"
                      className="clone-ai-main-result"
                      aria-label="预览原图素材"
                      onClick={node.sourceImage ? () => openProductSetPreview({ src: node.sourceImage!, label: "原图素材" }) : undefined}
                      disabled={!node.sourceImage}
                    >
                      {node.sourceImage ? (
                        <img
                          src={node.sourceImage}
                          alt="原图素材"
                          onError={(event) => {
                            event.currentTarget.style.display = "none";
                            event.currentTarget.parentElement?.classList.add("is-missing-source");
                          }}
                        />
                      ) : null}
                      <span className="clone-ai-source-missing">素材不可用</span>
                    </button>
                  </div>
                  <div className="clone-ai-flow-arrow" aria-hidden="true" />
                  <div className="clone-ai-result-stack">
                    <span className="clone-ai-node-label">{node.mode === "set" ? "套图" : node.mode === "detail" ? "详情图" : node.mode === "model" ? "模特图" : node.mode === "hot" ? "爆款图" : node.mode}</span>
                    <div className="clone-ai-result-grid result-reveal">
                      {node.results.map((card) => (
                        <button key={card.id} type="button" style={{ aspectRatio: parseRatioToAspectCss(ratio) }} onClick={() => openProductSetPreview(card, { nodeId: node.id, removable: true })}>
                          <img src={card.src} alt={card.label} />
                        </button>
                      ))}
                    </div>
                  </div>
                </article>
              ))}
              {status === "generating" ? (
                <article className="clone-ai-canvas-node is-generating" style={{ transform: `translate(${canvasNodes.length * 420}px, 0px)` }}>
                  <LoadingOutlined style={{ fontSize: 24 }} />
                  <span>正在生成{selectedCloneOutput.label}…</span>
                </article>
              ) : null}
            </section>
            </div>
          ) : status === "idle" || status === "ready" ? null : (
            <section className="clone-ai-empty-state" aria-live="polite">
              {status === "generating" ? <LoadingOutlined /> : status === "failed" ? <FrownOutlined /> : <FileImageOutlined />}
              <strong>{status === "generating" ? "正在生成" : status === "failed" ? "生成失败" : "等待生成"}</strong>
              {status === "generating" ? <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${selectedCloneOutput.label}生成`} /> : null}
              <span>
                {status === "generating"
                  ? "AI 正在为 " + platform + " / " + market + " 整理" + selectedCloneOutput.label + "。"
                  : status === "failed"
                  ? "请检查网络后点击下方重试"
                  : "上传商品原图并填写信息后，AI 将在这里展示生成结果。"}
              </span>
              {status === "failed" && lastFailedActionRef.current ? (
                <button type="button" className="clone-ai-retry-btn" onClick={lastFailedActionRef.current}>
                  <ReloadOutlined /> 重试
                </button>
              ) : null}
            </section>
          )}
        </>
      )}

      <section
        ref={commandComposerWrapRef}
        className={`clone-ai-bottom-input ecom-command-composer-wrap${status === "done" || canvasNodes.length > 0 ? " has-generated" : " is-before-generate"}${isCommandComposerCompact && (status === "done" || canvasNodes.length > 0) ? " is-compact" : ""}`}
        aria-label="生成指令"
        onClick={() => {
          if (isCommandComposerCompact) setIsCommandComposerCompact(false);
        }}
      >
        <h1 className={`ecom-command-title${status === "done" || canvasNodes.length > 0 ? " is-after-generate" : ""}`}>
          {typewriterText}
          <span className="typewriter-cursor" aria-hidden="true">|</span>
        </h1>
        <input
          ref={cloneReferenceInputRef}
          type="file"
          accept="image/*"
          multiple
          className="ecom-command-hidden-file"
          onChange={handleCloneReferenceUpload}
          aria-label="上传参考图片"
        />
        <input
          ref={productInputRef}
          type="file"
          accept="image/*"
          multiple
          className="ecom-command-hidden-file"
          onChange={handleComposerAssetUpload}
          aria-label="上传商品素材"
        />
        <input
          ref={smartCutoutInputRef}
          type="file"
          accept="image/*"
          multiple
          className="ecom-command-hidden-file"
          onChange={handleSmartCutoutUpload}
          aria-label="上传智能抠图素材"
        />
        <div className="ecom-command-scenario-shell" data-expanded={isCommerceScenarioMoreOpen ? "true" : "false"}>
          <div className="ecom-command-mode-tabs ecom-command-scenario-tabs" aria-label="电商场景">
            {visibleCommerceScenarioOptions.map((option) => (
              <button
                key={option.key}
                type="button"
                className={`${activeCommerceScenario === option.key ? "is-active" : ""}${activeCommerceScenario === option.key && isCloneTemplateStripVisible ? " is-open" : ""}`}
                onClick={() => handleCommerceScenarioClick(option.key)}
              >
                <span className={`ecom-command-mode-icon ecom-command-mode-icon--${option.key}`} aria-hidden="true">{option.icon}</span>
                <strong>{option.label}</strong>
                {activeCommerceScenario === option.key && isCloneTemplateStripVisible ? (
                  <span className="ecom-command-scenario-close" aria-hidden="true"><CloseOutlined /></span>
                ) : null}
              </button>
            ))}
            <button
              type="button"
              className={`ecom-command-scenario-more${isCommerceScenarioMoreOpen ? " is-open" : ""}`}
              onClick={handleCommerceScenarioMoreToggle}
              aria-expanded={isCommerceScenarioMoreOpen}
            >
              <span className="ecom-command-mode-icon ecom-command-mode-icon--more" aria-hidden="true">
                {isCommerceScenarioMoreOpen ? <CloseOutlined /> : "···"}
              </span>
              <strong>{isCommerceScenarioMoreOpen ? "收起" : "更多"}</strong>
            </button>
          </div>
        </div>
        <div className="clone-ai-input-wrapper ecom-command-composer">
          {productImages.length ? (
            <div className="ecom-command-asset-popover" aria-label={`已上传素材，${productImages.length}/${maxCloneProductImages}张`}>
              <button
                type="button"
                className="ecom-command-asset-add"
                onClick={() => productImages.length < maxCloneProductImages && productInputRef.current?.click()}
                disabled={productImages.length >= maxCloneProductImages}
                aria-label={productImages.length >= maxCloneProductImages ? `最多上传${maxCloneProductImages}张素材` : "继续上传素材"}
                title={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : `继续上传素材 ${productImages.length}/${maxCloneProductImages}`}
              >
                <span aria-hidden="true">+</span>
                <small>{productImages.length >= maxCloneProductImages ? "已满" : "上传"}</small>
              </button>
              {productImages.map((image) => (
                <figure key={image.id} className="ecom-command-asset-thumb">
                  <img src={image.src} alt={image.name || "上传图片"} />
                  <button type="button" onClick={() => removeProductImage(image.id)} aria-label="删除图片">
                    <DeleteOutlined />
                  </button>
                </figure>
              ))}
            </div>
          ) : null}
          {shouldShowScenarioSettings ? (
            <div className="ecom-command-option-row ecom-command-option-row--settings">
              {activeCommerceScenario !== "salesVideo" && activeCommerceScenario !== "poster" ? (
                <button type="button" className={composerMenu === "platform" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("platform", event)}>
                  <span className="ecom-command-option-icon" aria-hidden="true"><GlobalOutlined /></span>
                  <span>平台</span>{platform}
                </button>
              ) : null}
              {activeCommerceScenario !== "salesVideo" ? (
                <button type="button" className={composerMenu === "language" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("language", event)}>
                  <span className="ecom-command-option-icon" aria-hidden="true"><FileImageOutlined /></span>
                  <span>语种</span>{language}
                </button>
              ) : null}
              <button type="button" className={composerMenu === "ratio" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("ratio", event)}>
                <span className="ecom-command-option-icon" aria-hidden="true"><TableOutlined /></span>
                <span>比例</span>{getRatioDisplayParts(ratio).aspect}
              </button>
              {scenarioAdvancedSettingsKeys.includes(activeCommerceScenario) ? (
                <button type="button" className={composerMenu === "settings" ? "is-active" : ""} onClick={(event) => toggleComposerMenu("settings", event)}>
                  <span className="ecom-command-option-icon" aria-hidden="true"><SettingOutlined /></span>
                  <span>{activeCommerceScenario === "salesVideo" ? "时长" : "设置"}</span>
                  {activeCommerceScenario === "salesVideo" ? `${cloneVideoDuration}秒` : composerSettingLabel}
                </button>
              ) : null}
            </div>
          ) : null}
          <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={cloneRequirementPlaceholder}
          />
          {requirementImageMentionQuery !== null && ecommerceMentionImages.length ? (
            <ImageMentionMenu images={ecommerceMentionImages} query={requirementImageMentionQuery} onSelect={insertRequirementImageMention} />
          ) : null}
          <div className="ecom-command-toolbar" aria-label="生成设置">
            <div className="ecom-command-composer-actions">
              <button
                type="button"
                className={`ecom-command-reference ecom-command-reference--bottom ecom-command-tool ecom-command-tool--upload${productImages.length ? " has-images" : ""}${isProductUploadDragging ? " is-dragging" : ""}`}
                onClick={() => {
                  if (productImages.length >= maxCloneProductImages) {
                    toast.info(`最多上传 ${maxCloneProductImages} 张素材`);
                    return;
                  }
                  productInputRef.current?.click();
                }}
                onDragEnter={(event) => {
                  event.preventDefault();
                  setIsProductUploadDragging(true);
                }}
                onDragOver={(event) => event.preventDefault()}
                onDragLeave={() => setIsProductUploadDragging(false)}
                onDrop={(event) => {
                  event.preventDefault();
                  setIsProductUploadDragging(false);
                  const files = Array.from(event.dataTransfer.files);
                  if (files.length) addComposerAssets(files);
                }}
                aria-disabled={productImages.length >= maxCloneProductImages}
                aria-label={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : "上传素材"}
                title={productImages.length >= maxCloneProductImages ? `最多上传 ${maxCloneProductImages} 张素材` : "上传素材"}
              >
                <span aria-hidden="true"><PaperClipOutlined /></span>
                <strong>上传素材</strong>
              </button>
              <button
                type="button"
                className={`ecom-command-tool ecom-command-tool--icon${composerMenu === "assetLibrary" ? " is-active" : ""}`}
                onClick={(event) => toggleComposerMenu("assetLibrary", event)}
                onMouseEnter={(event) => {
                  const rect = event.currentTarget.getBoundingClientRect();
                  setComposerTooltip({ text: "资产库", left: rect.left + rect.width / 2, top: rect.top - 8 });
                }}
                onMouseLeave={() => setComposerTooltip(null)}
                aria-label="资产库"
                title="资产库"
                data-tooltip="资产库"
              >
                <FolderOpenOutlined />
              </button>
              <button
                type="button"
                className={`ecom-command-tool ecom-command-tool--icon${composerMenu === "workMode" ? " is-active" : ""}`}
                onClick={(event) => toggleComposerMenu("workMode", event)}
                onMouseEnter={(event) => {
                  const rect = event.currentTarget.getBoundingClientRect();
                  setComposerTooltip({ text: `模式：${composerWorkMode === "quick" ? "快捷" : "思考"}`, left: rect.left + rect.width / 2, top: rect.top - 8 });
                }}
                onMouseLeave={() => setComposerTooltip(null)}
                aria-label={`模式：${composerWorkMode === "quick" ? "快捷" : "思考"}`}
                title={`模式：${composerWorkMode === "quick" ? "快捷" : "思考"}`}
                data-tooltip={`模式：${composerWorkMode === "quick" ? "快捷" : "思考"}`}
              >
                <ArrowsCounterClockwise size={17} weight="bold" />
              </button>
              <button
                type="button"
                className={`ecom-command-tool ecom-command-tool--icon${composerMenu === "aiWrite" ? " is-active" : ""}`}
                onClick={(event) => toggleComposerMenu("aiWrite", event)}
                onMouseEnter={(event) => {
                  const rect = event.currentTarget.getBoundingClientRect();
                  setComposerTooltip({ text: "AI帮写", left: rect.left + rect.width / 2, top: rect.top - 8 });
                }}
                onMouseLeave={() => setComposerTooltip(null)}
                aria-label="AI帮写"
                title="AI帮写"
                data-tooltip="AI帮写"
              >
                <MagicWand size={17} weight="bold" />
              </button>
            </div>
            <div className="ecom-command-submit-row">
              <button type="button" className="clone-ai-send-button ecom-command-send" disabled={commandGenerateDisabled} onClick={handleCommandGenerate} aria-label={clonePrimaryLabel}>
                {status === "generating" || isDefaultIntentRouting ? <LoadingOutlined /> : <PaperPlaneRight size={18} weight="fill" />}
              </button>
            </div>
          </div>
          {renderComposerMenu()}
          {composerTooltip ? createPortal(
            <span className="ecom-command-tooltip-floating" style={{ left: composerTooltip.left, top: composerTooltip.top }}>
              {composerTooltip.text}
            </span>,
            document.body
          ) : null}
        </div>
        {(status === "idle" || status === "ready") && !showMainVideoWorkspace && activeCommerceScenario !== null && isCloneTemplateStripVisible ? (
          <div className={`ecom-command-template-carousel ecom-command-template-carousel--${activeCommerceScenario}`}>
            <button
              type="button"
              className="ecom-command-template-nav ecom-command-template-nav--prev"
              onClick={() => scrollCommerceTemplateStrip(-1)}
              aria-label="查看上一组模板"
            >
              ‹
            </button>
            <section
              ref={templateStripRef}
              className={`ecom-command-template-strip ecom-command-template-strip--${activeCommerceScenario}`}
              aria-label="模板卡片"
            >
              {activeCommerceScenarioTemplates.map((card) => (
                <button
                  key={card.id}
                  type="button"
                  className="ecom-command-template-card"
                  aria-label={card.title}
                  onClick={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    handleCloneTemplateCardClick(card);
                  }}
                >
                  <span className="ecom-command-template-card__media" aria-hidden="true">
                    {card.mediaType === "video" ? (
                      <video src={card.mediaUrl} muted playsInline loop preload="metadata" />
                    ) : (
                      <img src={card.mediaUrl} alt="" loading="lazy" />
                    )}
                  </span>
                  <span className="ecom-command-template-card__body">
                    <span className="ecom-command-template-card__badge">{card.badge}</span>
                    <strong>{card.title}</strong>
                    <em>{card.desc}</em>
                  </span>
                  <span className="ecom-command-template-card__prompt" aria-hidden="true">
                    {card.prompt}
                  </span>
                </button>
              ))}
            </section>
            <button
              type="button"
              className="ecom-command-template-nav ecom-command-template-nav--next"
              onClick={() => scrollCommerceTemplateStrip(1)}
              aria-label="查看下一组模板"
            >
              ›
            </button>
          </div>
        ) : null}
        {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
          <section className="ecom-command-quick-board" aria-label="快捷功能">
            {[
              { label: "A+/详情页", tone: "detail", icon: <BorderOuterOutlined />, onClick: openQuickDetailPage },
              { label: "爆款复刻", tone: "hot", icon: <FireOutlined />, onClick: openHotClonePage },
              { label: "图片修改", tone: "edit", icon: <HighlightOutlined />, onClick: openImageWorkbenchPage },
              { label: "智能抠图", tone: "cutout", icon: <ScissorOutlined />, onClick: openSmartCutoutUpload },
              { label: "去除水印", tone: "watermark", icon: <ClearOutlined />, onClick: openWatermarkRemovalPage },
              { label: "图片翻译", tone: "translate", icon: <TranslationOutlined />, onClick: openImageTranslatePage },
              { label: "商品套图", tone: "product", icon: <AppstoreAddOutlined />, onClick: openQuickSetPage },
              { label: "一键文案", tone: "copywriting", icon: <FileTextOutlined />, onClick: openCopywritingPage },
              { label: "一键视频", tone: "video", icon: <PlayCircleOutlined />, onClick: openOneClickVideoPage },
              { label: "更多功能", tone: "more", icon: <SettingOutlined />, disabled: true },
            ].map((item) => (
              <button
                key={item.label}
                type="button"
                className={`ecom-command-quick-card ecom-command-quick-card--${item.tone}`}
                disabled={item.disabled}
                onClick={(event) => {
                  event.preventDefault();
                  event.stopPropagation();
                  if (item.disabled) {
                    toast.info("更多功能即将上线，敬请期待！");
                  } else {
                    item.onClick?.();
                  }
                }}
              >
                <span aria-hidden="true">{item.icon}</span>
                <strong>{item.label}</strong>
              </button>
            ))}
          </section>
        ) : null}
        {(status === "idle" || status === "ready") && !showMainVideoWorkspace ? (
          <section className="ecom-inspiration-lab" aria-label="电商灵感案例">
            <div className="ecom-inspiration-rows">
              {ecommerceInspirationRows.map((row) => (
                <section key={row.title} className={`ecom-inspiration-row ecom-inspiration-row--${row.variant}`} aria-label={row.title}>
                  <div className="ecom-inspiration-row__meta">
                    <strong>{row.title}</strong>
                    <span>{row.desc}</span>
                    <div className="ecom-inspiration-row__controls">
                      <button type="button" aria-label={`向左浏览${row.title}`} onClick={(event) => scrollInspirationRow(event, -1)}>‹</button>
                      <button type="button" aria-label={`向右浏览${row.title}`} onClick={(event) => scrollInspirationRow(event, 1)}>›</button>
                    </div>
                  </div>
                  <div className="ecom-inspiration-strip" tabIndex={0}>
                    {row.cards.map((card, index) => (
                      <article key={card.title} className="ecom-inspiration-card" onClick={() => setInspirationPreview({ mediaUrl: card.mediaUrl, mediaType: card.mediaType, prompt: buildInspirationPrompt(card.title, card.meta) })}>
                        <div className="ecom-inspiration-card__visual" aria-hidden="true">
                          {card.mediaType === "video" ? (
                            <video src={card.mediaUrl} muted playsInline loop autoPlay preload="metadata" />
                          ) : (
                            <img src={card.mediaUrl} alt="" loading="lazy" />
                          )}
                        </div>
                        <strong>{card.title}</strong>
                        <p>{card.meta}</p>
                        <em>{String(index + 1).padStart(2, "0")}</em>
                      </article>
                    ))}
                  </div>
                </section>
              ))}
            </div>
          </section>
        ) : null}
      </section>
      {inspirationPreviewOverlay}
    </main>
  );

  const smartCutoutPreview = (
    <main key={`smart-cutout-${smartCutoutImage ? "editor" : "upload"}`} className={`ecom-smart-cutout-page ecom-tool-page-enter${smartCutoutImage ? " is-editor" : " is-upload"}${isSmartCutoutTransitioning ? " is-transitioning" : ""}`} aria-label="智能抠图">
      <input
        ref={smartCutoutInputRef}
        type="file"
        accept="image/*"
        multiple
        className="ecom-command-hidden-file"
        onChange={handleSmartCutoutUpload}
        aria-label="上传智能抠图素材"
      />
      <nav className="ecom-smart-cutout-nav" aria-label="智能抠图导航">
        <button type="button" onClick={closeSmartCutoutTool}>
          首页
        </button>
        <button type="button" onClick={goSmartCutoutPrevious}>
          上一页
        </button>
      </nav>
      {isSmartCutoutTransitioning ? (
        <div className="ecom-smart-cutout-transition" role="status" aria-live="polite">
          <span aria-hidden="true" />
          <strong>{smartCutoutTransitionMessage.title}</strong>
          <em>{smartCutoutTransitionMessage.subtitle}</em>
        </div>
      ) : null}
      {!smartCutoutImage ? (
        <section className="ecom-smart-cutout-upload">
          <div className="ecom-smart-cutout-head">
            <strong>智能抠图</strong>
            <span>3s 一键抠图，快速去除背景</span>
          </div>
          <div className="ecom-smart-cutout-upload__body">
            <div className="ecom-smart-cutout-demo" aria-hidden="true">
              <div className="ecom-smart-cutout-demo__tile ecom-smart-cutout-demo__tile--flower" />
              <div className="ecom-smart-cutout-demo__tile ecom-smart-cutout-demo__tile--product" />
              <div className="ecom-smart-cutout-demo__tile ecom-smart-cutout-demo__tile--poster" />
              <div className="ecom-smart-cutout-demo__tile ecom-smart-cutout-demo__tile--object" />
            </div>
            <div
              className={`ecom-smart-cutout-upload-box${isSmartCutoutDragging ? " is-dragging" : ""}`}
              role="button"
              tabIndex={0}
              onClick={() => smartCutoutInputRef.current?.click()}
              onKeyDown={(event) => {
                if (event.key === "Enter" || event.key === " ") {
                  event.preventDefault();
                  smartCutoutInputRef.current?.click();
                }
              }}
              onDragEnter={(event) => {
                event.preventDefault();
                setIsSmartCutoutDragging(true);
              }}
              onDragOver={(event) => event.preventDefault()}
              onDragLeave={() => setIsSmartCutoutDragging(false)}
              onDrop={handleSmartCutoutDrop}
            >
              <button type="button" className="ecom-smart-cutout-upload__primary">
                <CloudUploadOutlined />
                上传图片
              </button>
              <button type="button" className="ecom-smart-cutout-upload__secondary">
                <FolderOpenOutlined />
                批量上传
              </button>
              <span>上传文件夹 &gt;</span>
            </div>
          </div>
        </section>
      ) : (
        <section className="ecom-smart-editor">
          <div className="ecom-smart-editor__workspace">
            <div className="ecom-smart-editor__canvas">
              <div className={`ecom-smart-editor__checker is-size-${previewSmartCutoutSizeKey}`} style={smartCutoutFrameStyle}>
                <div className="ecom-smart-editor__background-layer" aria-hidden="true" />
                <img src={previewSmartCutoutImageSrc ?? smartCutoutImage.src} alt={smartCutoutImage.name} />
              </div>
              <div className="ecom-smart-editor__canvas-actions">
                <button
                  type="button"
                  onPointerDown={showSmartCutoutOriginalCompare}
                  onPointerUp={hideSmartCutoutOriginalCompare}
                  onPointerCancel={hideSmartCutoutOriginalCompare}
                  onBlur={hideSmartCutoutOriginalCompare}
                  onKeyDown={(event) => {
                    if (event.key === " " || event.key === "Enter") setIsSmartCutoutComparing(true);
                  }}
                  onKeyUp={hideSmartCutoutOriginalCompare}
                >
                  对比
                </button>
              </div>
            </div>
            <div className="ecom-smart-editor__tools-shell">
              <strong className="ecom-smart-editor__tools-title">功能</strong>
              <button type="button" className="ecom-smart-editor__tools-nav" onClick={() => scrollSmartCutoutTools(-1)} aria-label="查看上一组尺寸">
                ‹
              </button>
              <div className="ecom-smart-editor__tools" ref={smartCutoutToolsRef}>
                {smartCutoutSizeOptions.map((item) => (
                  <div className="ecom-smart-editor__tool-item" key={item.key}>
                    <button
                      type="button"
                      className={smartCutoutSizeKey === item.key ? "is-active" : ""}
                      onClick={() => setSmartCutoutSizeKey(item.key)}
                      aria-label={`${item.label}${"sizeLabel" in item ? ` ${item.sizeLabel}` : ""}`}
                      aria-pressed={smartCutoutSizeKey === item.key}
                    >
                      <span className={`ecom-smart-editor__tool-icon ecom-smart-editor__tool-icon--${item.icon}`} aria-hidden="true" />
                    </button>
                    <span className="ecom-smart-editor__tool-text">
                      <span>{item.label}</span>
                      {"sizeLabel" in item ? <span>{item.sizeLabel}</span> : null}
                    </span>
                  </div>
                ))}
              </div>
              <button type="button" className="ecom-smart-editor__tools-nav" onClick={() => scrollSmartCutoutTools(1)} aria-label="查看更多尺寸">
                ›
              </button>
            </div>
            {smartCutoutBatchImages.length > 1 ? (
              <section className="ecom-smart-editor__batch" aria-label="批量图片">
                <header>
                  <strong>批量图片</strong>
                  <span>{smartCutoutBatchImages.length} 张</span>
                </header>
                <div>
                  {smartCutoutBatchImages.map((image, index) => (
                    <button
                      key={`${image.src}-${index}`}
                      type="button"
                      className={smartCutoutImage.src === image.src ? "is-active" : ""}
                      onClick={() => setSmartCutoutImage(image)}
                    >
                      <img src={image.src} alt={image.name || `上传图片 ${index + 1}`} />
                      <span>{index + 1}</span>
                    </button>
                  ))}
                </div>
              </section>
            ) : null}
            <section className="ecom-smart-editor__gallery">
              <header><strong>纯色</strong><button type="button">查看全部 &gt;</button></header>
              <div className="ecom-smart-editor__swatches">
                {["#ffffff", "#eeeae3", "#f2e3cf", "#000000", "#a89682", "#c9c9c9"].map((color) => (
                  <button
                    key={color}
                    type="button"
                    className={smartCutoutBackgroundColor.toLowerCase() === color ? "is-active" : ""}
                    style={{ "--smart-cutout-swatch-bg": color } as CSSProperties}
                    onClick={() => {
                      setSmartCutoutBackgroundColor(color);
                      setSmartCutoutBackgroundAlpha(100);
                    }}
                  >
                    <span className="ecom-smart-editor__swatch-bg" aria-hidden="true" />
                    <img src={smartCutoutImage.src} alt="" />
                  </button>
                ))}
              </div>
              <header><strong>AI换背景</strong><button type="button">查看全部 &gt;</button></header>
              <div className="ecom-smart-editor__scenes">
                <button type="button" className="ecom-smart-editor__generate"><SettingOutlined />立即生成</button>
                {["客厅陈列", "桌面日光", "香氛产品", "绿植窗边", "居家空间"].map((item) => (
                  <button key={item} type="button"><span>{item}</span></button>
                ))}
              </div>
            </section>
          </div>
          <aside className="ecom-smart-editor__side">
            <strong>背景颜色</strong>
            <div className="ecom-smart-editor__color-row">
              <div className="ecom-smart-editor__color-wrap" ref={smartCutoutPaletteRef} style={{ "--smart-cutout-bg": smartCutoutBackgroundValue } as CSSProperties}>
                <button
                  type="button"
                  className={`ecom-smart-editor__custom-color${isSmartCutoutPaletteOpen ? " is-active" : ""}`}
                  style={{ background: smartCutoutBackgroundColor }}
                  onClick={() => setIsSmartCutoutPaletteOpen((open) => !open)}
                  aria-label="打开背景调色盘"
                >
                  <span>色</span>
                </button>
                {isSmartCutoutPaletteOpen ? (
                  <div className="ecom-smart-color-picker" role="dialog" aria-label="背景调色盘">
                    <button
                      type="button"
                      className="ecom-smart-color-picker__plane"
                      style={{ background: `linear-gradient(to top, #000000, transparent), linear-gradient(to right, #ffffff, hsl(${smartCutoutColorHsv.h} 100% 50%))` }}
                      onPointerDown={handleSmartCutoutColorPlanePointer}
                      onPointerMove={handleSmartCutoutColorPlaneMove}
                      aria-label="选择颜色明度和饱和度"
                    >
                      <span style={{ left: `${smartCutoutColorHsv.s}%`, top: `${100 - smartCutoutColorHsv.v}%` }} />
                    </button>
                    <div className="ecom-smart-color-picker__slider ecom-smart-color-picker__slider--hue">
                      <span style={{ background: `hsl(${smartCutoutColorHsv.h} 100% 50%)` }} />
                      <input
                        type="range"
                        min={0}
                        max={360}
                        value={smartCutoutColorHsv.h}
                        onChange={(event) => applySmartCutoutHsv(Number(event.target.value), smartCutoutColorHsv.s, smartCutoutColorHsv.v)}
                        aria-label="色相"
                      />
                    </div>
                    <div className="ecom-smart-color-picker__slider ecom-smart-color-picker__slider--alpha">
                      <span style={{ background: smartCutoutBackgroundValue }} />
                      <input
                        type="range"
                        min={0}
                        max={100}
                        value={smartCutoutBackgroundAlpha}
                        onChange={(event) => setSmartCutoutBackgroundAlpha(Number(event.target.value))}
                        aria-label="透明度"
                      />
                    </div>
                    <div className="ecom-smart-color-picker__fields">
                      <span aria-hidden="true">↙</span>
                      <input
                        value={smartCutoutHexDraft}
                        onChange={(event) => handleSmartCutoutHexChange(event.target.value)}
                        onBlur={() => setSmartCutoutHexDraft(smartCutoutBackgroundColor)}
                        aria-label="HEX 色值"
                      />
                      <input
                        value={Math.round(smartCutoutBackgroundAlpha)}
                        onChange={(event) => setSmartCutoutBackgroundAlpha(clampNumber(Number(event.target.value) || 0, 0, 100))}
                        aria-label="透明度百分比"
                      />
                      <strong>%</strong>
                    </div>
                    <p>纯色预设</p>
                    <div className="ecom-smart-color-picker__presets">
                      {smartCutoutColorPresets.map((color) => (
                        <button
                          key={color}
                          type="button"
                          className={smartCutoutBackgroundColor.toLowerCase() === color ? "is-active" : ""}
                          style={{ background: color }}
                          onClick={() => {
                            setSmartCutoutBackgroundColor(color);
                            setSmartCutoutBackgroundAlpha(100);
                          }}
                          aria-label={`选择颜色 ${color}`}
                        />
                      ))}
                    </div>
                  </div>
                ) : null}
              </div>
              {["#ffffff", "#f8f9fa", "#000000", "#bdbdbd"].map((color) => (
                <button
                  key={color}
                  type="button"
                  className={smartCutoutBackgroundColor.toLowerCase() === color ? "is-active" : ""}
                  style={{ background: color }}
                  onClick={() => {
                    setSmartCutoutBackgroundColor(color);
                    setSmartCutoutBackgroundAlpha(100);
                  }}
                  aria-label={`背景颜色 ${color}`}
                />
              ))}
            </div>
            <div className="ecom-smart-editor__side-actions">
              <button type="button" className="ecom-smart-editor__download" onClick={handleSmartCutoutDownload}>下载图片</button>
              <button type="button" onClick={() => smartCutoutInputRef.current?.click()}>再次上传</button>
            </div>
          </aside>
        </section>
      )}
    </main>
  );

  const imageWorkbenchPreview = (
    <main key="image-workbench" className="ecom-image-workbench-page ecom-tool-page-enter" aria-label="图片修改局部重绘">
      <input
        ref={imageWorkbenchInputRef}
        type="file"
        accept="image/*"
        className="ecom-command-hidden-file"
        onChange={handleImageWorkbenchUpload}
        aria-label="上传图片"
      />
      <aside className="ecom-image-workbench-side">
        <header className="ecom-quick-set-panel-head ecom-image-workbench-panel-head">
          <strong className="ecom-quick-set-page-title">图片修改</strong>
          <button type="button" className="ecom-quick-set-back" onClick={closeImageWorkbenchPage}>首页</button>
          <button type="button" className="ecom-quick-set-back" onClick={closeImageWorkbenchPage}>上一页</button>
        </header>
        <p className="ecom-image-workbench-intro">涂抹需要修改的区域，输入提示词后让 AI 替换局部内容。</p>

        <section className="ecom-image-workbench-panel">
          <header>
            <strong>素材</strong>
            <span>{imageWorkbenchImage ? "已上传" : "待上传"}</span>
          </header>
          <div
            className={`ecom-image-workbench-upload${isImageWorkbenchDragging ? " is-dragging" : ""}${imageWorkbenchImage ? " has-image" : ""}`}
            role="button"
            tabIndex={0}
            onClick={() => imageWorkbenchInputRef.current?.click()}
            onKeyDown={(event) => {
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                imageWorkbenchInputRef.current?.click();
              }
            }}
            onDragEnter={(event) => {
              event.preventDefault();
              setIsImageWorkbenchDragging(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={() => setIsImageWorkbenchDragging(false)}
            onDrop={handleImageWorkbenchDrop}
          >
            {imageWorkbenchImage ? (
              <>
                <button
                  type="button"
                  className="ecom-image-workbench-remove"
                  onClick={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    removeImageWorkbenchImage();
                  }}
                  aria-label="删除素材"
                >
                  ×
                </button>
                <figure>
                  <img src={imageWorkbenchImage.src} alt={imageWorkbenchImage.name} />
                </figure>
                <div>
                  <strong>{imageWorkbenchImage.name}</strong>
                  <span>{imageWorkbenchImage.format || "PNG / JPG / WebP"}</span>
                </div>
              </>
            ) : (
              <>
                <FileImageOutlined />
                <strong>选择图片</strong>
                <span>PNG / JPG / WebP</span>
              </>
            )}
          </div>
          <div className="ecom-image-workbench-url-row">
            <input
              ref={imageWorkbenchUrlInputRef}
              placeholder="粘贴图片 URL"
              aria-label="粘贴图片 URL"
              onKeyDown={(event) => {
                if (event.key === "Enter") void handleImageWorkbenchUrlImport();
              }}
            />
            <button type="button" onClick={() => void handleImageWorkbenchUrlImport()}>添加</button>
          </div>
        </section>

        <section className="ecom-image-workbench-panel">
          <header>
            <strong>笔刷</strong>
            <span>{imageWorkbenchMaskStrokes.length ? `已遮罩 ${imageWorkbenchMaskStrokes.length}` : "未遮罩"}</span>
          </header>
          <label className="ecom-image-workbench-slider">
            <span>大小</span>
            <input
              type="range"
              min={10}
              max={120}
              value={imageWorkbenchBrushSize}
              onChange={(event) => setImageWorkbenchBrushSize(Number(event.target.value))}
            />
            <em>{imageWorkbenchBrushSize}px</em>
          </label>
          <button
            type="button"
            className="ecom-image-workbench-clear"
            onClick={() => {
              setImageWorkbenchMaskStrokes([]);
              setImageWorkbenchBrushCursor(null);
              clearImageWorkbenchMaskCanvas();
              setImageWorkbenchStatus("idle");
              setImageWorkbenchResultUrl(null);
            }}
            disabled={!imageWorkbenchMaskStrokes.length}
          >
            清空遮罩
          </button>
        </section>

        <section className="ecom-image-workbench-panel">
          <strong>参数</strong>
          <div className="ecom-image-workbench-ratios" aria-label="输出分辨率">
            {["9:16", "16:9", "4:3", "3:4", "1:1"].map((item) => (
              <button
                key={item}
                type="button"
                className={imageWorkbenchRatio === item ? "is-active" : ""}
                onClick={() => setImageWorkbenchRatio(item)}
              >
                {item}
              </button>
            ))}
          </div>
        </section>

        <section className="ecom-image-workbench-panel">
          <strong>提示词</strong>
          <textarea
            value={imageWorkbenchPrompt}
            onChange={(event) => setImageWorkbenchPrompt(event.target.value.slice(0, 300))}
            placeholder="描述需要重绘的内容，例如：将背景替换为森林"
          />
        </section>

        <button
          type="button"
          className="ecom-image-workbench-primary"
          onClick={handleImageWorkbenchGenerate}
          disabled={!imageWorkbenchImage || imageWorkbenchStatus === "processing"}
        >
          {imageWorkbenchStatus === "processing" ? <LoadingOutlined /> : <SettingOutlined />}
          {imageWorkbenchStatus === "processing" ? "重绘中" : "开始重绘"}
        </button>
      </aside>

      <section className="ecom-image-workbench-stage">
        {!imageWorkbenchImage ? (
          <div
            className={`ecom-watermark-dropzone${isImageWorkbenchDragging ? " is-dragging" : ""}`}
            role="button"
            tabIndex={0}
            onClick={() => imageWorkbenchInputRef.current?.click()}
            onKeyDown={(event) => {
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                imageWorkbenchInputRef.current?.click();
              }
            }}
            onDragEnter={(event) => {
              event.preventDefault();
              setIsImageWorkbenchDragging(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={() => setIsImageWorkbenchDragging(false)}
            onDrop={handleImageWorkbenchDrop}
          >
            <CloudUploadOutlined />
            <strong>点击或拖拽上传图片</strong>
            <span>支持 PNG / JPG / WebP，上传后使用画笔标记需要重绘的区域</span>
          </div>
        ) : (
          <div className="ecom-watermark-grid">
            <article className="ecom-watermark-preview-card">
              <span>原图 / 涂抹区域</span>
              <div
                className="ecom-image-workbench-image-frame"
                onPointerDown={handleImageWorkbenchMaskPointerDown}
                onPointerMove={handleImageWorkbenchMaskPointerMove}
                onPointerUp={stopImageWorkbenchMaskPainting}
                onPointerCancel={stopImageWorkbenchMaskPainting}
                onPointerLeave={() => {
                  stopImageWorkbenchMaskPainting();
                  setImageWorkbenchBrushCursor(null);
                }}
              >
                <img src={imageWorkbenchImage.src} alt="局部重绘素材" draggable={false} />
                <canvas ref={imageWorkbenchMaskCanvasRef} className="ecom-image-workbench-mask-layer" aria-label="遮罩区域" />
                <span
                  className="ecom-image-workbench-brush"
                  style={{
                    left: `${imageWorkbenchBrushCursor?.x ?? 50}%`,
                    top: `${imageWorkbenchBrushCursor?.y ?? 50}%`,
                    width: imageWorkbenchBrushSize,
                    height: imageWorkbenchBrushSize,
                  }}
                />
              </div>
            </article>

            <article className="ecom-watermark-preview-card">
              <span>重绘结果</span>
              {imageWorkbenchStatus === "processing" ? (
                <div className="ecom-watermark-processing" role="status" aria-live="polite">
                  <LoadingOutlined />
                  <strong>正在重绘</strong>
                  <em>AI 正在根据遮罩和提示词生成局部重绘结果</em>
                  <div className="ecom-quick-set-progress">
                    <div className="ecom-quick-set-progress-bar" style={{ width: `${Math.round(imageWorkbenchProgress)}%` }} />
                  </div>
                  <em className="ecom-quick-set-progress-text">{Math.round(imageWorkbenchProgress)}%</em>
                </div>
              ) : imageWorkbenchStatus === "done" && imageWorkbenchResultUrl ? (
                <>
                  <img src={imageWorkbenchResultUrl} alt="重绘结果" />
                </>
              ) : imageWorkbenchStatus === "failed" ? (
                <div className="ecom-watermark-empty">
                  <FrownOutlined />
                  <strong>重绘失败</strong>
                  <em>请检查网络或重试，如余额不足请先充值</em>
                </div>
              ) : (
                <div className="ecom-watermark-empty">
                  <FileImageOutlined />
                  <strong>等待处理</strong>
                  <em>涂抹需要修改的区域后点击开始重绘</em>
                </div>
              )}
              <div className="ecom-watermark-actions">
                <button type="button" onClick={() => toast.success("已加入资产库")} disabled={imageWorkbenchStatus !== "done"}>
                  <FolderOpenOutlined />
                  加入资产库
                </button>
                <button type="button" onClick={() => {
                  if (!imageWorkbenchResultUrl) return;
                  const link = document.createElement("a");
                  link.href = imageWorkbenchResultUrl;
                  link.download = `inpaint-result-${Date.now()}.png`;
                  document.body.appendChild(link);
                  link.click();
                  link.remove();
                }} disabled={imageWorkbenchStatus !== "done"}>
                  <CloudUploadOutlined />
                  下载图片
                </button>
              </div>
            </article>
          </div>
        )}
      </section>
    </main>
  );

  const watermarkPreview = (
    <WatermarkToolPage
      inputRef={watermarkInputRef}
      urlInputRef={watermarkUrlInputRef}
      image={watermarkImage}
      isDragging={isWatermarkDragging}
      status={watermarkStatus}
      progress={watermarkProgress}
      resultUrl={watermarkResultUrl}
      onUpload={handleWatermarkUpload}
      onDrop={handleWatermarkDrop}
      onDraggingChange={setIsWatermarkDragging}
      onRemoveImage={removeWatermarkImage}
      onUrlImport={handleWatermarkUrlImport}
      onGenerate={handleWatermarkGenerate}
      onDownload={handleWatermarkDownload}
      onClose={closeWatermarkRemovalPage}
    />
  );

  const translateLanguageOptions = [
    { value: "zh", label: "中文" },
    { value: "en", label: "English" },
    { value: "ja", label: "日本語" },
    { value: "ko", label: "한국어" },
    { value: "fr", label: "Français" },
    { value: "de", label: "Deutsch" },
    { value: "es", label: "Español" },
    { value: "pt", label: "Português" },
    { value: "ru", label: "Русский" },
    { value: "ar", label: "العربية" },
  ];

  const translatePreview = (
    <main key="translate" className="ecom-watermark-page ecom-translate-page ecom-tool-page-enter" aria-label="图片翻译">
      <input
        ref={translateInputRef}
        type="file"
        accept="image/*"
        className="ecom-command-hidden-file"
        onChange={handleTranslateUpload}
        aria-label="上传翻译图片"
      />
      <aside className="ecom-watermark-side">
        <header className="ecom-quick-set-panel-head ecom-watermark-panel-head">
          <strong className="ecom-quick-set-page-title">图片翻译</strong>
          <button type="button" className="ecom-quick-set-back" onClick={closeImageTranslatePage}>首页</button>
          <button type="button" className="ecom-quick-set-back" onClick={closeImageTranslatePage}>上一页</button>
        </header>
        <p className="ecom-watermark-intro">上传含文字的图片，AI 自动识别并翻译为目标语言。</p>

        <section className="ecom-watermark-panel ecom-translate-lang-panel">
          <header>
            <strong>目标语言</strong>
          </header>
          <select
            className="ecom-translate-lang-select"
            value={translateLanguage}
            onChange={(event) => setTranslateLanguage(event.target.value)}
            aria-label="选择目标语言"
          >
            {translateLanguageOptions.map((option) => (
              <option key={option.value} value={option.value}>{option.label}</option>
            ))}
          </select>
        </section>

        <section className="ecom-watermark-panel">
          <header>
            <strong>上传素材</strong>
            <span>{translateImage ? "已上传" : "待上传"}</span>
          </header>
          <div
            className={`ecom-watermark-upload-card${isTranslateDragging ? " is-dragging" : ""}${translateImage ? " has-image" : ""}`}
            role="button"
            tabIndex={0}
            onClick={() => translateInputRef.current?.click()}
            onKeyDown={(event) => {
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                translateInputRef.current?.click();
              }
            }}
            onDragEnter={(event) => {
              event.preventDefault();
              setIsTranslateDragging(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={() => setIsTranslateDragging(false)}
            onDrop={handleTranslateDrop}
          >
            {translateImage ? (
              <>
                <button
                  type="button"
                  className="ecom-watermark-remove"
                  onClick={(event) => {
                    event.preventDefault();
                    event.stopPropagation();
                    removeTranslateImage();
                  }}
                  aria-label="删除素材"
                >
                  ×
                </button>
                <figure>
                  <img src={translateImage.src} alt={translateImage.name} />
                </figure>
                <div>
                  <strong>{translateImage.name}</strong>
                  <span>{translateImage.format || "PNG / JPG / WebP"}</span>
                </div>
              </>
            ) : (
              <>
                <CloudUploadOutlined />
                <strong>上传含文字图片</strong>
                <span>支持 PNG / JPG / WebP，拖拽或点击上传</span>
              </>
            )}
          </div>
          <div className="ecom-watermark-url-row">
            <input
              ref={translateUrlInputRef}
              placeholder="粘贴图片 URL"
              aria-label="粘贴图片 URL"
              onKeyDown={(event) => {
                if (event.key === "Enter") void handleTranslateUrlImport();
              }}
            />
            <button type="button" onClick={() => void handleTranslateUrlImport()}>导入</button>
          </div>
        </section>

        <section className="ecom-watermark-panel">
          <strong>处理说明</strong>
          <p>自动识别图片中的文字内容，翻译为目标语言并保持原图排版，适合商品包装、说明书、宣传图翻译。</p>
        </section>

        <button
          type="button"
          className="ecom-watermark-primary"
          onClick={handleTranslateGenerate}
          disabled={!translateImage || translateStatus === "processing"}
        >
          {translateStatus === "processing" ? <LoadingOutlined /> : <GlobalOutlined />}
          {translateStatus === "processing" ? "翻译中" : "开始翻译"}
        </button>
      </aside>

      <section className="ecom-watermark-workspace">
        {!translateImage ? (
          <div
            className={`ecom-watermark-dropzone${isTranslateDragging ? " is-dragging" : ""}`}
            role="button"
            tabIndex={0}
            onClick={() => translateInputRef.current?.click()}
            onKeyDown={(event) => {
              if (event.key === "Enter" || event.key === " ") {
                event.preventDefault();
                translateInputRef.current?.click();
              }
            }}
            onDragEnter={(event) => {
              event.preventDefault();
              setIsTranslateDragging(true);
            }}
            onDragOver={(event) => event.preventDefault()}
            onDragLeave={() => setIsTranslateDragging(false)}
            onDrop={handleTranslateDrop}
          >
            <CloudUploadOutlined />
            <strong>点击或拖拽上传图片</strong>
            <span>支持 PNG / JPG / WebP，上传含文字图片后选择目标语言并点击开始翻译</span>
          </div>
        ) : (
          <div className="ecom-watermark-grid">
            <article className="ecom-watermark-preview-card">
              <span>原图</span>
              <img src={translateImage.src} alt="原图" />
            </article>

            <article className="ecom-watermark-preview-card">
              <span>翻译结果</span>
              {translateStatus === "processing" ? (
                <div className="ecom-watermark-processing" role="status" aria-live="polite">
                  <LoadingOutlined />
                  <strong>正在翻译</strong>
                  <em>AI 正在识别并翻译图片中的文字</em>
                </div>
              ) : translateStatus === "done" && translateResultUrl ? (
                <>
                  <img src={translateResultUrl} alt="翻译结果" />
                  <button type="button" className="ecom-watermark-zoom" aria-label="查看大图">
                    <QuestionCircleOutlined />
                  </button>
                </>
              ) : translateStatus === "failed" ? (
                <div className="ecom-watermark-empty">
                  <GlobalOutlined />
                  <strong>翻译失败</strong>
                  <em>请重试或更换图片</em>
                </div>
              ) : (
                <div className="ecom-watermark-empty">
                  <GlobalOutlined />
                  <strong>等待处理</strong>
                  <em>点击开始翻译后显示结果</em>
                </div>
              )}
              <div className="ecom-watermark-actions">
                <button type="button" onClick={() => toast.success("已加入资产库")} disabled={translateStatus !== "done"}>
                  <FolderOpenOutlined />
                  加入资产库
                </button>
                <button type="button" onClick={handleTranslateDownload} disabled={translateStatus !== "done"}>
                  <CloudUploadOutlined />
                  下载图片
                </button>
              </div>
            </article>
          </div>
        )}
      </section>
    </main>
  );

  const openQuickUploadWithKeyboard = (
    event: ReactKeyboardEvent<HTMLDivElement>,
    inputRef: { current: HTMLInputElement | null },
  ) => {
    if (event.key !== "Enter" && event.key !== " ") return;
    event.preventDefault();
    inputRef.current?.click();
  };
  const renderQuickUploadThumbs = (items: CloneImageItem[], onRemove: (imageId: string) => void) => (
    <div className="ecom-quick-upload-thumbs" aria-label="已上传商品原图">
      {items.map((item) => (
        <figure key={item.id} className="ecom-command-asset-thumb ecom-quick-upload-thumb">
          <img src={item.src} alt={item.name} />
          <span className="ecom-command-asset-zoom" aria-hidden="true">
            <img src={item.src} alt="" />
          </span>
          <button
            type="button"
            aria-label="删除图片"
            onClick={(event) => {
              event.stopPropagation();
              onRemove(item.id);
            }}
          >
            ×
          </button>
        </figure>
      ))}
    </div>
  );

  const quickDetailVisibleSelect = quickDetailBasicSelects.find((item) => item.key === visibleQuickSetSelect) ?? null;
  const quickHotVisibleSelect = quickHotBasicSelects.find((item) => item.key === visibleQuickSetSelect) ?? null;
  const quickSetVisibleSelect = quickSetBasicSelects.find((item) => item.key === visibleQuickSetSelect) ?? null;

  const quickDetailPreview = (
    <main key="quick-detail" className={`ecom-quick-set-page ecom-quick-detail-page ecom-tool-page-enter${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="A+详情页生成">
      <div className="ecom-quick-set-body">
        <aside className="ecom-quick-set-panel" aria-label="A+详情页设置" onWheel={handleQuickPanelWheel}>
          <header className="ecom-quick-set-panel-head">
            <strong className="ecom-quick-set-page-title">A+/详情</strong>
            <button type="button" className="ecom-quick-set-back" onClick={() => setActiveQuickTool(null)}>
              首页
            </button>
            <button type="button" className="ecom-quick-set-back" onClick={() => setActiveQuickTool(null)}>
              上一页
            </button>
          </header>
          <section>
            <strong><CloudUploadOutlined /> 上传商品原图</strong>
            <div
              role="button"
              tabIndex={0}
              className={`ecom-quick-set-upload${detailProductImages.length ? " has-images" : ""}`}
              onClick={() => detailInputRef.current?.click()}
              onKeyDown={(event) => openQuickUploadWithKeyboard(event, detailInputRef)}
              onDragOver={(event) => event.preventDefault()}
              onDrop={handleDetailDrop}
            >
              <FileImageOutlined />
              <span>拖拽或点击上传</span>
              <em>同一产品，最多 3 张</em>
              <b>+ 上传图片</b>
              {detailProductImages.length ? renderQuickUploadThumbs(detailProductImages, removeDetailImage) : null}
            </div>
            <input
              ref={detailInputRef}
              type="file"
              accept="image/*"
              multiple
              className="ecom-command-hidden-file"
              onChange={handleDetailUpload}
              aria-label="上传详情页图片"
            />
          </section>
          <section className="ecom-quick-set-basic-section">
            <span className="ecom-quick-set-label">生成内容</span>
            <div className="ecom-quick-detail-types">
              {detailTypeOptions.map((item) => (
                <button
                  key={item}
                  type="button"
                  className={detailType === item ? "is-active" : ""}
                  onClick={() => setDetailType(item)}
                >
                  {item}
                </button>
              ))}
            </div>
            <span className="ecom-quick-set-label">基础设置</span>
            <div className="ecom-quick-set-select-anchor">
              <div className="ecom-quick-set-selects">
                {quickDetailBasicSelects.map((item) => (
                  <button
                    key={item.key}
                    type="button"
                    className={openQuickSetSelect === item.key ? "is-active" : ""}
                    onClick={() => toggleQuickSetSelect(item.key)}
                  >
                    <span>{item.label}</span><strong>{formatRatioDisplayValue(item.value)}</strong><em>⌄</em>
                  </button>
                ))}
              </div>
              {quickDetailVisibleSelect ? (
                <div
                  className={`ecom-quick-set-dropdown ecom-quick-set-dropdown--${quickDetailVisibleSelect.key}${isQuickSetSelectClosing ? " is-closing" : ""}`}
                  role="listbox"
                  aria-label={quickDetailVisibleSelect.label}
                >
                  {quickDetailVisibleSelect.options.map((option) => (
                    <button
                      key={option}
                      type="button"
                      className={quickDetailVisibleSelect.value === option ? "is-active" : ""}
                      onClick={() => {
                        quickDetailVisibleSelect.onChange(option);
                        closeQuickSetSelect();
                      }}
                    >
                      {formatRatioDisplayValue(option)}
                    </button>
                  ))}
                </div>
              ) : null}
            </div>
          </section>
          <section>
            <strong>包含模块（多选）</strong>
            <div className="ecom-quick-detail-modules">
              {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>
          <button type="button" className="ecom-quick-set-primary" onClick={handleDetailGenerate} disabled={!canGenerateDetail}>
            {detailStatus === "generating" ? <LoadingOutlined /> : "✦"} 开始生成
          </button>
          {detailStatus === "generating" ? (
            <button type="button" className="ecom-quick-set-primary ecom-quick-set-primary--cancel" onClick={handleCancelGenerate}>取消生成</button>
          ) : null}
        </aside>
        <section className="ecom-quick-set-stage">
          <header className="ecom-quick-set-preview-head">
            <h1>预览</h1>
            <p>上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的高转化率详情页素材。</p>
            <div>
              <button type="button" onClick={() => setPreviewZoom((value) => Math.max(0.25, value - 0.1))}>-</button>
              <strong>{Math.round(previewZoom * 100)}%</strong>
              <button type="button" onClick={() => setPreviewZoom((value) => Math.min(2, value + 0.1))}>+</button>
            </div>
          </header>
          <div className="ecom-quick-set-canvas" onWheel={handleQuickPreviewWheel}>
            {detailStatus === "done" && detailResultUrl ? (
              <section className="ecom-quick-detail-result" style={{ transform: `scale(${previewZoom})` }}>
                <img src={detailResultUrl} alt="A+详情页生成结果" />
                <button
                  type="button"
                  className="ecom-quick-detail-download"
                  onClick={() => {
                    const link = document.createElement("a");
                    link.href = detailResultUrl;
                    link.download = `A+详情页-${Date.now()}.png`;
                    document.body.appendChild(link);
                    link.click();
                    link.remove();
                  }}
                >
                  <CloudUploadOutlined />
                  保存本地
                </button>
              </section>
            ) : detailStatus === "generating" ? (
              <section className="ecom-quick-set-generating">
                <LoadingOutlined />
                <strong>正在生成 A+ 详情页</strong>
                <span>AI 正在根据您的商品图和设置生成详情页素材，请稍候...</span>
                <div className="ecom-quick-set-progress">
                  <div className="ecom-quick-set-progress-bar" style={{ width: `${Math.round(detailProgress)}%` }} />
                </div>
                <em className="ecom-quick-set-progress-text">{Math.round(detailProgress)}%</em>
              </section>
            ) : detailStatus === "failed" ? (
              <section className="ecom-quick-set-failed">
                <FrownOutlined />
                <strong>生成失败</strong>
                <span>请检查网络或重试，如余额不足请先充值。</span>
                <button type="button" onClick={handleDetailGenerate} disabled={!canGenerateDetail}>重新生成</button>
              </section>
            ) : detailProductImages.length ? (
              <section className="ecom-quick-detail-preview-card" style={{ transform: `scale(${previewZoom})` }}>
                {detailGridSamples.slice(0, 6).map((src, index) => (
                  <figure key={src}>
                    <img src={src} alt={`详情页模块预览 ${index + 1}`} />
                    <span>{detailModules[index]?.title ?? "详情模块"}</span>
                  </figure>
                ))}
              </section>
            ) : (
              <section className="ecom-quick-set-empty">
                <FileImageOutlined />
                <strong>等待生成</strong>
                <span>上传商品原图并填写信息后，AI 将在这里展示生成结果。</span>
              </section>
            )}
          </div>
          <section className="ecom-quick-set-prompt">
            <textarea
              value={detailRequirement}
              onChange={(event) => setDetailRequirement(event.target.value.slice(0, 500))}
              placeholder="建议包含以下信息，产品名称，核心卖点，期望场景，具体参数"
            />
            <div className="ecom-quick-detail-prompt-actions">
              <button type="button" onClick={handleDetailAiWrite} aria-label="AI帮写">AI</button>
              <button type="button" onClick={handleDetailGenerate} disabled={!canGenerateDetail}>↑</button>
            </div>
            <span>{detailRequirement.length}/500</span>
          </section>
        </section>
      </div>
      <button type="button" className="ecom-quick-set-help" aria-label="帮助" onClick={() => toast.info("上传商品图后，选择平台和详情模块即可生成 A+ 详情页。")}>?</button>
    </main>
  );

  const hotClonePreview = (
    <main key="quick-hot" className={`ecom-quick-set-page ecom-quick-hot-page ecom-tool-page-enter${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="爆款复刻生成">
      <div className="ecom-quick-set-body">
        <aside className="ecom-quick-set-panel" aria-label="爆款复刻设置" onWheel={handleQuickPanelWheel}>
          <header className="ecom-quick-set-panel-head">
            <strong className="ecom-quick-set-page-title">爆款复刻</strong>
            <button type="button" className="ecom-quick-set-back" onClick={closeHotClonePage}>
              首页
            </button>
            <button type="button" className="ecom-quick-set-back" onClick={closeHotClonePage}>
              上一页
            </button>
          </header>
          <section>
            <strong><FileImageOutlined /> 上传素材</strong>
            {productImages.length ? (
              <div
                role="button"
                tabIndex={0}
                className={`ecom-quick-set-upload ecom-quick-hot-material has-images${isHotMaterialDragging ? " is-dragging" : ""}`}
                onClick={() => hotMaterialInputRef.current?.click()}
                onKeyDown={(event) => openQuickUploadWithKeyboard(event, hotMaterialInputRef)}
                onDragOver={(event) => { event.preventDefault(); event.stopPropagation(); if (event.dataTransfer.types.includes("Files")) setIsHotMaterialDragging(true); }}
                onDragLeave={(event) => { event.preventDefault(); event.stopPropagation(); if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) setIsHotMaterialDragging(false); }}
                onDrop={(event) => { event.preventDefault(); event.stopPropagation(); setIsHotMaterialDragging(false); const files = Array.from(event.dataTransfer.files); if (files.length) addProductImages(files); }}
              >
                {renderHotMaterialThumbs(productImages, removeProductImage)}
                <button
                  type="button"
                  className="ecom-quick-hot-add-btn"
                  aria-label="添加更多素材"
                  onClick={(event) => {
                    event.stopPropagation();
                    hotMaterialInputRef.current?.click();
                  }}
                >
                  <PlusOutlined />
                </button>
              </div>
            ) : (
              <div
                role="button"
                tabIndex={0}
                className={`ecom-quick-set-upload ecom-quick-hot-material${isHotMaterialDragging ? " is-dragging" : ""}`}
                onClick={() => hotMaterialInputRef.current?.click()}
                onKeyDown={(event) => openQuickUploadWithKeyboard(event, hotMaterialInputRef)}
                onDragOver={(event) => { event.preventDefault(); event.stopPropagation(); if (event.dataTransfer.types.includes("Files")) setIsHotMaterialDragging(true); }}
                onDragLeave={(event) => { event.preventDefault(); event.stopPropagation(); if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) setIsHotMaterialDragging(false); }}
                onDrop={(event) => { event.preventDefault(); event.stopPropagation(); setIsHotMaterialDragging(false); const files = Array.from(event.dataTransfer.files); if (files.length) addProductImages(files); }}
              >
                <FileImageOutlined />
                <span>拖拽或点击上传</span>
                <em>上传商品素材图，最多 {maxCloneProductImages} 张</em>
                <b>+ 上传图片</b>
              </div>
            )}
            <input
              ref={hotMaterialInputRef}
              type="file"
              accept="image/*"
              multiple
              className="ecom-command-hidden-file"
              onChange={handleProductUpload}
              aria-label="上传爆款复刻素材"
            />
          </section>
          <section>
            <strong><FireOutlined /> 上传参考图片</strong>
            <div
              role="button"
              tabIndex={0}
              className={`ecom-quick-set-upload ecom-quick-hot-material ecom-quick-hot-reference${cloneReferenceImages.length ? " has-images" : ""}${isCloneReferenceDragging ? " is-dragging" : ""}`}
              onClick={() => cloneReferenceInputRef.current?.click()}
              onKeyDown={(event) => openQuickUploadWithKeyboard(event, cloneReferenceInputRef)}
              onDragOver={(event) => { event.preventDefault(); event.stopPropagation(); if (event.dataTransfer.types.includes("Files")) setIsCloneReferenceDragging(true); }}
              onDragLeave={(event) => { event.preventDefault(); event.stopPropagation(); if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) setIsCloneReferenceDragging(false); }}
              onDrop={(event) => { event.preventDefault(); event.stopPropagation(); setIsCloneReferenceDragging(false); const files = Array.from(event.dataTransfer.files); if (files.length) addCloneReferenceImages(files); }}
            >
              <FileImageOutlined />
              <span>拖拽或点击上传</span>
              <em>参考图用于风格迁移，最多 {maxCloneReferenceImages} 张</em>
              <b>+ 上传图片</b>
              {cloneReferenceImages.length ? (
                <>
                  {renderHotMaterialThumbs(cloneReferenceImages, removeCloneReferenceImage)}
                  <button
                    type="button"
                    className="ecom-quick-hot-add-btn"
                    aria-label="添加更多参考图"
                    onClick={(event) => {
                      event.stopPropagation();
                      cloneReferenceInputRef.current?.click();
                    }}
                  >
                    <PlusOutlined />
                  </button>
                </>
              ) : null}
            </div>
            <input
              ref={cloneReferenceInputRef}
              type="file"
              accept="image/*"
              multiple
              className="ecom-command-hidden-file"
              onChange={handleCloneReferenceUpload}
              aria-label="上传爆款复刻参考图"
            />
          </section>
          <section>
            <strong>复刻强度</strong>
            <div className="ecom-quick-detail-modules">
              {cloneReplicateLevelOptions.map((option) => (
                <button
                  key={option.key}
                  type="button"
                  className={cloneReplicateLevel === option.key ? "is-active" : ""}
                  onClick={() => setCloneReplicateLevel(option.key)}
                >
                  <strong>{option.title}</strong>
                  <span>{option.desc}</span>
                </button>
              ))}
            </div>
          </section>
          <section className="ecom-quick-set-basic-section">
            <span className="ecom-quick-set-label">基础设置</span>
            <div className="ecom-quick-set-select-anchor">
              <div className="ecom-quick-set-selects">
                {quickHotBasicSelects.map((item) => (
                  <button
                    key={item.key}
                    type="button"
                    className={openQuickSetSelect === item.key ? "is-active" : ""}
                    onClick={() => toggleQuickSetSelect(item.key)}
                  >
                    <span>{item.label}</span><strong>{formatRatioDisplayValue(item.value)}</strong><em>⌄</em>
                  </button>
                ))}
              </div>
              {quickHotVisibleSelect ? (
                <div
                  className={`ecom-quick-set-dropdown ecom-quick-set-dropdown--${quickHotVisibleSelect.key}${isQuickSetSelectClosing ? " is-closing" : ""}`}
                  role="listbox"
                  aria-label={quickHotVisibleSelect.label}
                >
                  {quickHotVisibleSelect.options.map((option) => (
                    <button
                      key={option}
                      type="button"
                      className={quickHotVisibleSelect.value === option ? "is-active" : ""}
                      onClick={() => {
                        quickHotVisibleSelect.onChange(option);
                        closeQuickSetSelect();
                      }}
                    >
                      {formatRatioDisplayValue(option)}
                    </button>
                  ))}
                </div>
              ) : null}
            </div>
          </section>
          <section className="ecom-quick-hot-requirement">
            <div className="ecom-quick-hot-requirement__head">
              <strong>商品卖点 &amp; 需求</strong>
              <button type="button" className="ecom-quick-hot-requirement__ai" onClick={handleHotAiWrite}>AI 帮写</button>
            </div>
            <div className="ecom-quick-hot-requirement__input">
              <textarea
                value={hotRequirement}
                onChange={(event) => setHotRequirement(event.target.value.slice(0, 500))}
                placeholder="建议包含以下信息：产品名称、核心卖点、参考风格、期望场景、具体参数"
                maxLength={500}
              />
              <span>{hotRequirement.length}/500</span>
            </div>
          </section>
          <div className="ecom-quick-hot-actions">
            <button type="button" className="ecom-quick-set-primary ecom-quick-hot-generate" onClick={handleHotGenerate} disabled={!canGenerateHot}>
              {hotStatus === "generating" ? <LoadingOutlined /> : "✦"} 开始复刻
            </button>
            <button
              type="button"
              className={`ecom-quick-set-primary ecom-quick-set-primary--cancel${hotStatus !== "generating" ? " is-disabled" : ""}`}
              onClick={hotStatus === "generating" ? handleCancelGenerate : undefined}
              disabled={hotStatus !== "generating"}
            >
              取消复刻
            </button>
          </div>
        </aside>
        {hotMaterialHoverZoom && typeof document !== "undefined"
          ? createPortal(
              <div
                className={`ecom-hot-material-zoom-portal is-${hotMaterialHoverZoom.placement}`}
                style={{ left: hotMaterialHoverZoom.x, top: hotMaterialHoverZoom.y }}
              >
                <img src={hotMaterialHoverZoom.src} alt="" />
              </div>,
              document.body,
            )
          : null}
        <section className="ecom-quick-set-stage">
          <header className="ecom-quick-set-preview-head">
            <h1>预览</h1>
            <p>上传参考图，AI 按选定风格强度 <span>复刻同款视觉表现</span>，快速产出高转化素材。</p>
            <div>
              <button type="button" onClick={() => setPreviewZoom((value) => Math.max(0.25, value - 0.1))}>-</button>
              <strong>{Math.round(previewZoom * 100)}%</strong>
              <button type="button" onClick={() => setPreviewZoom((value) => Math.min(2, value + 0.1))}>+</button>
            </div>
          </header>
          <div className="ecom-quick-set-canvas" onWheel={handleQuickPreviewWheel}>
            {hotStatus === "done" && hotResultUrl ? (
              <section className="ecom-quick-detail-result" style={{ transform: `scale(${previewZoom})` }}>
                <img src={hotResultUrl} alt="爆款复刻结果" />
                <button
                  type="button"
                  className="ecom-quick-detail-download"
                  onClick={() => {
                    const link = document.createElement("a");
                    link.href = hotResultUrl;
                    link.download = `爆款复刻-${Date.now()}.png`;
                    document.body.appendChild(link);
                    link.click();
                    link.remove();
                  }}
                >
                  <CloudUploadOutlined />
                  保存本地
                </button>
              </section>
            ) : hotStatus === "generating" ? (
              <section className="ecom-quick-set-generating">
                <LoadingOutlined />
                <strong>正在生成爆款复刻</strong>
                <span>AI 正在根据参考图和复刻强度生成同款素材，请稍候...</span>
                <div className="ecom-quick-set-progress">
                  <div className="ecom-quick-set-progress-bar" style={{ width: `${Math.round(hotProgress)}%` }} />
                </div>
                <em className="ecom-quick-set-progress-text">{Math.round(hotProgress)}%</em>
              </section>
            ) : hotStatus === "failed" ? (
              <section className="ecom-quick-set-failed">
                <FrownOutlined />
                <strong>生成失败</strong>
                <span>请检查网络或重试，如余额不足请先充值。</span>
                <button type="button" onClick={handleHotGenerate} disabled={!canGenerateHot}>重新生成</button>
              </section>
            ) : (
              <section className="ecom-quick-set-empty">
                <FileImageOutlined />
                <strong>等待生成</strong>
                <span>上传参考图片并选择复刻强度后，AI 将在这里展示生成结果。</span>
              </section>
            )}
          </div>
        </section>
      </div>
      <button type="button" className="ecom-quick-set-help" aria-label="帮助" onClick={() => toast.info("上传参考图后，选择复刻强度和平台即可生成爆款同款。")}>?</button>
    </main>
  );

  const quickSetGenPreview = (
    <main key="quick-set" className={`ecom-quick-set-page ecom-quick-hot-page ecom-tool-page-enter${isQuickPanelCollapsed ? " is-panel-collapsed" : ""}`} aria-label="电商套图生成">
      <div className="ecom-quick-set-body">
        <aside className="ecom-quick-set-panel" aria-label="电商套图设置" onWheel={handleQuickPanelWheel}>
          <header className="ecom-quick-set-panel-head">
            <strong className="ecom-quick-set-page-title">电商套图</strong>
            <button type="button" className="ecom-quick-set-back" onClick={closeQuickSetPage}>首页</button>
            <button type="button" className="ecom-quick-set-back" onClick={closeQuickSetPage}>上一页</button>
          </header>
          <section>
            <strong><FileImageOutlined /> 上传商品原图</strong>
            {productImages.length ? (
              <div
                role="button"
                tabIndex={0}
                className={`ecom-quick-set-upload ecom-quick-hot-material has-images${isProductUploadDragging ? " is-dragging" : ""}`}
                onClick={() => productInputRef.current?.click()}
                onKeyDown={(event) => openQuickUploadWithKeyboard(event, productInputRef)}
                onDragOver={(event) => { event.preventDefault(); event.stopPropagation(); if (event.dataTransfer.types.includes("Files")) setIsProductUploadDragging(true); }}
                onDragLeave={(event) => { event.preventDefault(); event.stopPropagation(); if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) setIsProductUploadDragging(false); }}
                onDrop={(event) => { event.preventDefault(); event.stopPropagation(); setIsProductUploadDragging(false); const files = Array.from(event.dataTransfer.files); if (files.length) addProductImages(files); }}
              >
                {renderQuickUploadThumbs(productImages, removeProductImage)}
                <button
                  type="button"
                  className="ecom-quick-hot-add-btn"
                  aria-label="添加更多素材"
                  onClick={(event) => {
                    event.stopPropagation();
                    productInputRef.current?.click();
                  }}
                >
                  <PlusOutlined />
                </button>
              </div>
            ) : (
              <div
                role="button"
                tabIndex={0}
                className={`ecom-quick-set-upload ecom-quick-hot-material${isProductUploadDragging ? " is-dragging" : ""}`}
                onClick={() => productInputRef.current?.click()}
                onKeyDown={(event) => openQuickUploadWithKeyboard(event, productInputRef)}
                onDragOver={(event) => { event.preventDefault(); event.stopPropagation(); if (event.dataTransfer.types.includes("Files")) setIsProductUploadDragging(true); }}
                onDragLeave={(event) => { event.preventDefault(); event.stopPropagation(); if (event.currentTarget === event.target || !event.currentTarget.contains(event.relatedTarget as Node)) setIsProductUploadDragging(false); }}
                onDrop={(event) => { event.preventDefault(); event.stopPropagation(); setIsProductUploadDragging(false); const files = Array.from(event.dataTransfer.files); if (files.length) addProductImages(files); }}
              >
                <FileImageOutlined />
                <span>拖拽或点击上传</span>
                <em>同一产品，最多 7 张</em>
                <b>+ 上传图片</b>
              </div>
            )}
            <input
              ref={productInputRef}
              type="file"
              accept="image/*"
              multiple
              className="ecom-command-hidden-file"
              onChange={handleProductUpload}
              aria-label="上传商品图片"
            />
          </section>
          <section className="ecom-quick-set-basic-section">
            <span className="ecom-quick-set-label">基础设置</span>
            <div className="ecom-quick-set-select-anchor">
              <div className="ecom-quick-set-selects">
                {quickSetBasicSelects.map((item) => (
                  <button
                    key={item.key}
                    type="button"
                    className={openQuickSetSelect === item.key ? "is-active" : ""}
                    onClick={() => toggleQuickSetSelect(item.key)}
                  >
                    <span>{item.label}</span><strong>{formatRatioDisplayValue(item.value)}</strong><em>⌄</em>
                  </button>
                ))}
              </div>
              {quickSetVisibleSelect ? (
                <div
                  className={`ecom-quick-set-dropdown ecom-quick-set-dropdown--${quickSetVisibleSelect.key}${isQuickSetSelectClosing ? " is-closing" : ""}`}
                  role="listbox"
                  aria-label={quickSetVisibleSelect.label}
                >
                  {quickSetVisibleSelect.options.map((option) => (
                    <button
                      key={option}
                      type="button"
                      className={quickSetVisibleSelect.value === option ? "is-active" : ""}
                      onClick={() => {
                        quickSetVisibleSelect.onChange(option);
                        closeQuickSetSelect();
                      }}
                    >
                      {formatRatioDisplayValue(option)}
                    </button>
                  ))}
                </div>
              ) : null}
            </div>
          </section>
          <section className="ecom-quick-set-count-section">
            <span className="ecom-quick-set-label">图片数量</span>
            <p className="ecom-quick-set-hint">可自由调整各类型图片数量，总数 1-16 张</p>
            <div className="ecom-quick-set-counts">
              {cloneSetCountOptions.map((item) => {
                const count = cloneSetCounts[item.key];
                const decrementDisabled = count <= 0 || cloneSetTotal <= minCloneSetTotal;
                const incrementDisabled = cloneSetTotal >= maxCloneSetTotal;
                return (
                  <div key={item.key} className="ecom-quick-set-count-row">
                    <div className="ecom-quick-set-count-info">
                      <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>
          <section className="ecom-quick-hot-requirement">
            <div className="ecom-quick-hot-requirement__head">
              <strong>商品卖点 &amp; 需求</strong>
              <button type="button" className="ecom-quick-hot-requirement__ai" onClick={handleQuickSetAiWrite}>AI 帮写</button>
            </div>
            <div className="ecom-quick-hot-requirement__input">
              <textarea
                value={quickSetRequirement}
                onChange={(event) => setQuickSetRequirement(event.target.value.slice(0, 500))}
                placeholder="建议包含以下信息：产品名称、核心卖点、期望场景、具体参数"
                maxLength={500}
              />
              <span>{quickSetRequirement.length}/500</span>
            </div>
          </section>
          <div className="ecom-quick-hot-actions">
            <button type="button" className="ecom-quick-set-primary ecom-quick-hot-generate" onClick={handleQuickSetGenerate} disabled={!canGenerateQuickSet}>
              {quickSetStatus === "generating" ? <LoadingOutlined /> : "✦"} 开始生成
            </button>
            <button
              type="button"
              className={`ecom-quick-set-primary ecom-quick-set-primary--cancel${quickSetStatus !== "generating" ? " is-disabled" : ""}`}
              onClick={quickSetStatus === "generating" ? handleCancelGenerate : undefined}
              disabled={quickSetStatus !== "generating"}
            >
              取消生成
            </button>
          </div>
        </aside>
        <section className="ecom-quick-set-stage">
          <header className="ecom-quick-set-preview-head">
            <h1>预览</h1>
            <p>上传商品图，AI 即刻生成 <span>符合多电商平台规范</span> 的高转化率商品套图。</p>
            <div>
              <button type="button" onClick={() => setPreviewZoom((value) => Math.max(0.25, value - 0.1))}>-</button>
              <strong>{Math.round(previewZoom * 100)}%</strong>
              <button type="button" onClick={() => setPreviewZoom((value) => Math.min(2, value + 0.1))}>+</button>
            </div>
          </header>
          <div className="ecom-quick-set-canvas" onWheel={handleQuickPreviewWheel}>
            {quickSetStatus === "done" && quickSetResultUrls.length > 0 ? (
              <section className="ecom-quick-detail-result" style={{ transform: `scale(${previewZoom})` }}>
                <div className="ecom-quick-set-result-grid">
                  {quickSetResultUrls.map((url, index) => (
                    <figure key={`quick-set-${index}`}>
                      <img src={url} alt={`套图 ${index + 1}`} />
                      <span>套图 {index + 1}</span>
                    </figure>
                  ))}
                </div>
                <button
                  type="button"
                  className="ecom-quick-detail-download"
                  onClick={() => {
                    quickSetResultUrls.forEach((url, index) => {
                      const link = document.createElement("a");
                      link.href = url;
                      link.download = `电商套图-${index + 1}-${Date.now()}.png`;
                      document.body.appendChild(link);
                      link.click();
                      link.remove();
                    });
                  }}
                >
                  <CloudUploadOutlined />
                  保存本地
                </button>
              </section>
            ) : quickSetStatus === "generating" ? (
              <section className="ecom-quick-set-generating">
                <LoadingOutlined />
                <strong>正在生成电商套图</strong>
                <span>AI 正在根据您的商品图和设置生成套图素材，请稍候...</span>
                <div className="ecom-quick-set-progress">
                  <div className="ecom-quick-set-progress-bar" style={{ width: `${Math.round(quickSetProgress)}%` }} />
                </div>
                <em className="ecom-quick-set-progress-text">{Math.round(quickSetProgress)}%</em>
              </section>
            ) : quickSetStatus === "failed" ? (
              <section className="ecom-quick-set-failed">
                <FrownOutlined />
                <strong>生成失败</strong>
                <span>请检查网络或重试，如余额不足请先充值。</span>
                <button type="button" onClick={handleQuickSetGenerate} disabled={!canGenerateQuickSet}>重新生成</button>
              </section>
            ) : productImages.length ? (
              <section className="ecom-quick-detail-preview-card" style={{ transform: `scale(${previewZoom})` }}>
                {detailGridSamples.slice(0, 6).map((src, index) => (
                  <figure key={src}>
                    <img src={src} alt={`套图预览 ${index + 1}`} />
                    <span>{detailModules[index]?.title ?? "套图模块"}</span>
                  </figure>
                ))}
              </section>
            ) : (
              <section className="ecom-quick-set-empty">
                <FileImageOutlined />
                <strong>等待生成</strong>
                <span>上传商品原图并填写信息后，AI 将在这里展示生成结果。</span>
              </section>
            )}
          </div>
        </section>
      </div>
      <button type="button" className="ecom-quick-set-help" aria-label="帮助" onClick={() => toast.info("上传商品图后，选择平台和套图数量即可生成电商套图。")}>?</button>
    </main>
  );

  const detailPreview = (
    <main className="product-clone-preview product-clone-preview--detail" aria-label="A+详情预览" onWheel={handlePreviewWheel}>
      <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">
          {detailSourcePreviewImages.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={detailResultUrl ?? 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="服饰穿搭预览" onWheel={handlePreviewWheel}>
      <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>
  );

  const copywritingPreview = (
    <div key="copywriting" className="ecom-quick-page-wrap ecom-tool-page-enter">
      <EcommerceCopywritingPanel onClose={closeCopywritingPage} />
    </div>
  );

  const oneClickVideoPreview = (
    <div key="oneClickVideo" className="ecom-quick-page-wrap ecom-tool-page-enter">
      <EcommerceOneClickVideoPanel
        onClose={closeOneClickVideoPage}
        isAuthenticated={isAuthenticated}
        onRequestLogin={requestLogin}
        productImages={productImages}
        productInputRef={productInputRef}
        isProductUploadDragging={isProductUploadDragging}
        setIsProductUploadDragging={setIsProductUploadDragging}
        handleProductDrop={handleProductDrop}
        handleProductUpload={handleProductUpload}
        removeProductImage={removeProductImage}
        maxProductImages={maxCloneProductImages}
        requirement={requirement}
        onRequirementChange={setRequirement}
        platform={platform}
        platformOptions={platformOptions}
        onPlatformChange={handleOneClickVideoPlatformChange}
        ratio={ratio}
        ratioOptions={getPlatformRatioOptions(platform, "video")}
        onRatioChange={setRatio}
        videoQuality={cloneVideoQuality}
        videoQualityOptions={cloneVideoQualityOptions}
        onVideoQualityChange={setCloneVideoQuality}
        videoDuration={cloneVideoDuration}
        videoDurationMin={cloneVideoDurationMin}
        videoDurationMax={cloneVideoDurationMax}
        onVideoDurationChange={setCloneVideoDuration}
        videoSmart={cloneVideoSmart}
        onVideoSmartChange={setCloneVideoSmart}
        onOpenHistory={() => setVideoHistoryVisible(true)}
      />
    </div>
  );

  const activePreview = isSetTool
    ? setPreview
    : isDetail
      ? detailPreview
      : isTryOn
        ? tryOnPreview
        : isCloneTool
          ? isWatermarkTool
            ? watermarkPreview
            : isTranslateTool
              ? translatePreview
              : isImageEditTool
                ? imageWorkbenchPreview
                : isSmartCutoutTool
                  ? smartCutoutPreview
                  : isQuickDetailTool
                    ? (
                      <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
                        {quickDetailPreview}
                      </div>
                    )
                    : isHotCloneTool
                      ? (
                        <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
                          {hotClonePreview}
                        </div>
                      )
                      : isQuickSetTool
                        ? (
                          <div key={`quick-${activeQuickTool}`} className="ecom-quick-page-wrap ecom-tool-page-enter">
                            {quickSetGenPreview}
                          </div>
                        )
                        : isCopywritingTool
                          ? copywritingPreview
                          : isOneClickVideoTool
                            ? oneClickVideoPreview
                            : clonePreview
          : placeholderPreview;
  const isMainCloneWorkspace = isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isQuickSetTool && !isCopywritingTool && !isOneClickVideoTool;
  const isRecordDetailWorkspace = isMainCloneWorkspace && Boolean(activeHistoryRecordId);
  const currentResultCount = canvasNodes.reduce((count, node) => count + node.results.length, 0);
  const activeHistoryRecord = activeHistoryRecordId ? ecommerceHistoryRecords.find((record) => record.id === activeHistoryRecordId) : null;
  const activeConversationTurns = activeHistoryRecord
    ? activeHistoryRecord.turns?.length
      ? activeHistoryRecord.turns
      : [buildHistoryTurnFromRecord(activeHistoryRecord)]
    : [];
  const getHistoryTurnSettingLabel = (turn: EcommerceHistoryTurn) => {
    if (turn.settingLabel) return turn.settingLabel;
    if (turn.output === "set" && turn.results?.length && !turn.setResultImages?.length) {
      return `单图 ${turn.results.length}张`;
    }
    if (turn.output === "set") {
      const total = cloneSetCountKeys.reduce((sum, key) => sum + (turn.setCounts?.[key] ?? 0), 0);
      return `套图 ${total || 1}张`;
    }
    if (turn.output === "detail") return `详情 ${turn.detailModules?.length || 1}项`;
    if (turn.output === "model") return `模特 ${turn.modelScenes?.length || 1}景`;
    return cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label;
  };
  const restoreHistoryTurnInputs = (turn: EcommerceHistoryTurn) => {
    setCloneOutput(turn.output);
    setPlatform(turn.platform);
    setMarket(turn.market);
    setLanguage(turn.language);
    setRatio(turn.ratio);
    setRequirement(turn.requirement);
    setProductImages(turn.productImages);
    setCloneSetCounts(turn.setCounts);
    setSelectedCloneDetailModules(turn.detailModules.slice(0, maxDetailModuleSelection));
    setSelectedCloneModelScenes(turn.modelScenes);
    setCloneReferenceImages(turn.referenceImages);
    setCloneReplicateLevel(turn.replicateLevel);
    toast.info("已恢复该轮参数，可继续发送");
  };

  return (
    <section
      className={`product-clone-page page-motion${isCloneTool && isCloneSettingsCollapsed ? " is-settings-collapsed" : ""}${isCloneTool && isCommandHistoryCollapsed ? " is-history-collapsed" : ""}${isRecordDetailWorkspace && isCloneConversationCollapsed ? " is-conversation-collapsed" : ""}${isRecordDetailWorkspace ? " is-history-detail" : ""}${isSmartCutoutTool ? " is-smart-cutout-page" : ""}${isQuickDetailTool ? " is-quick-set-page" : ""}${isWatermarkTool ? " is-watermark-page" : ""}${isTranslateTool ? " is-translate-page" : ""}${isImageEditTool ? " is-image-workbench-page" : ""}${isHotCloneTool ? " is-hot-clone-page" : ""}${isQuickSetTool ? " is-quick-set-page" : ""}${isCopywritingTool ? " is-copywriting-page" : ""}${isOneClickVideoTool ? " is-one-click-video-page" : ""}`}
      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 tool-panel-enter`}
          key={activeTool}
          aria-label={`${pageLabel}参数`}
          aria-hidden={isCloneTool && isCloneSettingsCollapsed ? true : undefined}
        >
          {isSetTool ? setPanel : isDetail ? detailPanel : isTryOn ? tryOnPanel : isCopywritingTool ? placeholderPanel : isCloneTool ? clonePanel : placeholderPanel}
        </aside>

        {isCloneTool && !isSmartCutoutTool && !isQuickDetailTool && !isWatermarkTool && !isTranslateTool && !isImageEditTool && !isHotCloneTool && !isQuickSetTool && !isCopywritingTool ? (
          <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}

        {isRecordDetailWorkspace ? (
          <>
            <aside className="clone-ai-conversation-panel" aria-label="AI 对话">
              <header className="clone-ai-conversation-head">
                <div>
                  <strong>{activeHistoryRecord?.title || "生成详情"}</strong>
                  <span>{selectedCloneOutput.label} · {platform} · {language}</span>
                </div>
                <button
                  type="button"
                  onClick={() => setIsCloneConversationCollapsed(true)}
                  aria-label="收起对话"
                  title="收起对话"
                >
                  <MenuFoldOutlined />
                </button>
              </header>
              <div className="clone-ai-conversation-body">
                {activeConversationTurns.map((turn, index) => {
                  const turnResults = getTurnResults(turn);
                  const outputLabel = turn.modeLabel || cloneOutputOptions.find((option) => option.key === turn.output)?.label || selectedCloneOutput.label;
                  const turnMeta = [
                    { label: "平台", value: turn.platform },
                    { label: "语种", value: turn.language },
                    { label: "比例", value: formatRatioDisplayValue(turn.ratio) },
                    { label: "设置", value: getHistoryTurnSettingLabel(turn) },
                  ];
                  const isCurrentGeneratingTurn = turn.status === "generating" && turn.id === activeHistoryTurnIdRef.current;
                  return (
                    <Fragment key={turn.id}>
                      <section className={`clone-ai-chat-message clone-ai-chat-message--user${index > 0 ? " clone-ai-chat-message--followup" : ""}`}>
                        <span>{index === 0 ? "需求" : `继续生成 ${index + 1} · ${outputLabel}`}</span>
                        <p>{turn.requirement?.trim() || "上传商品素材，描述你想生成的商品图、详情图、模特图或短视频。"}</p>
                        <div className="clone-ai-chat-meta" aria-label="需求参数">
                          {turnMeta.map((item) => (
                            <em key={item.label}>
                              <span>{item.label}</span>
                              <strong>{item.value}</strong>
                            </em>
                          ))}
                        </div>
                        {turn.productImages.length ? (
                          <div className="clone-ai-chat-assets" aria-label="已上传素材">
                            {turn.productImages.slice(0, 4).map((image) => (
                              <img key={image.id} src={image.src} alt={image.name || "商品素材"} />
                            ))}
                            {turn.productImages.length > 4 ? <em>+{turn.productImages.length - 4}</em> : null}
                          </div>
                        ) : null}
                      </section>
                      <section className={`clone-ai-chat-message clone-ai-chat-message--assistant is-${turn.status}`}>
                        <span>电商图设计师</span>
                        <p>
                          {turn.status === "done" || turnResults.length
                            ? `已生成 ${turnResults.length} 张${outputLabel}，已同步到中间画布，可拖拽、缩放和预览。`
                            : turn.status === "generating"
                              ? `正在为 ${turn.platform} / ${turn.market} 生成${outputLabel}，完成后会自动追加到画布。`
                              : turn.errorMessage || "生成失败，请检查网络或参数后重试。"}
                        </p>
                        {isCurrentGeneratingTurn ? (
                          <EcommerceProgressBar status="generating" progress={generationProgress} onCancel={handleCancelGenerate} label={`${outputLabel}生成`} />
                        ) : null}
                        {turn.status === "failed" ? (
                          <button type="button" className="clone-ai-retry-btn" onClick={() => restoreHistoryTurnInputs(turn)}>
                            <ReloadOutlined /> 恢复参数
                          </button>
                        ) : null}
                        {turnResults.length ? (
                          <div className="clone-ai-chat-results" aria-label="生成结果缩略图">
                            {turnResults.slice(0, 6).map((item) => (
                              <button
                                key={item.id}
                                type="button"
                                onClick={() => openProductSetPreview(item)}
                                aria-label={`预览${item.label}`}
                              >
                                <img src={item.src} alt={item.label} />
                              </button>
                            ))}
                          </div>
                        ) : null}
                      </section>
                    </Fragment>
                  );
                })}
              </div>
            </aside>
            <button
              type="button"
              className="clone-ai-conversation-toggle"
              onClick={() => setIsCloneConversationCollapsed((current) => !current)}
              aria-label={isCloneConversationCollapsed ? "展开对话" : "收起对话"}
              title={isCloneConversationCollapsed ? "展开对话" : "收起对话"}
              aria-expanded={!isCloneConversationCollapsed}
            >
              {isCloneConversationCollapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            </button>
          </>
        ) : null}

        {activePreview}

      </div>

      <CommandHistorySidebar
        collapsed={isCommandHistoryCollapsed}
        showBackdrop={isCloneTool && !isCommandHistoryCollapsed}
        records={ecommerceHistoryRecords}
        activeRecordId={activeHistoryRecordId}
        isRefreshing={isHistoryRefreshing}
        refreshMessage={historyRefreshMessage}
        refreshStamp={historyRefreshStamp}
        refreshTick={historyRefreshTick}
        outputLabels={cloneOutputOptions}
        formatHistoryTime={formatHistoryTime}
        onToggleCollapsed={() => setIsCommandHistoryCollapsed((current) => !current)}
        onCollapse={() => setIsCommandHistoryCollapsed(true)}
        onNewConversation={handleNewEcommerceConversation}
        onRefresh={refreshEcommerceHistoryFromServer}
        onOpenRecord={openEcommerceHistoryRecord}
        onDeleteRecord={deleteHistoryRecord}
      />

      <ProductSetPreviewModal
        preview={selectedProductSetPreview}
        onClose={() => setSelectedProductSetPreview(null)}
        onDownload={(preview) => {
          void handleDownloadCanvasResult(preview);
        }}
        onRemove={removeSelectedProductSetPreview}
      />

      <ProductSetHostingModal visible={showHostingModal} onClose={() => setShowHostingModal(false)} />

      <EcommerceVideoHistoryPanel
        visible={videoHistoryVisible}
        onClose={() => setVideoHistoryVisible(false)}
      />
    </section>
  );
}

export default ProductClonePage;