"use client";

import {
  Download,
  Eraser,
  Image as ImageIcon,
  Layers,
  Loader2,
  Plus,
  RefreshCw,
  Sparkles,
  Trash2,
  Upload,
  Wand2,
  X,
} from "lucide-react";
import type React from "react";
import { useEffect, useMemo, useRef, useState } from "react";
import { toast } from "sonner";
import useSWR from "swr";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { ScrollArea } from "@/components/ui/scroll-area";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
} from "@/components/ui/select";
import { requestLongTaskResult } from "@/lib/client/long-task";
import {
  SCENE_FUSION_ASPECT_RATIO_OPTIONS,
  SCENE_FUSION_IMAGE_SIZE_OPTIONS,
  type SceneFusionCapabilitySummary,
} from "@/lib/scene-fusion/output-capabilities";
import { cn } from "@/lib/utils";

const fetcher = (url: string) => fetch(url).then((res) => res.json());
const MAX_BATCH_ITEMS = 10;
const BATCH_REQUEST_STAGGER_MS = 700;
const BATCH_SERIAL_WORKER_COUNT = 1;
const MULTI_PRODUCT_FAILOVER_MAX_ROUNDS = 5;
const MULTI_PRODUCT_FAILOVER_RETRY_DELAY_MS = 1500;

const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

type BatchMode =
  | "scene-fission"
  | "multi-product-scene"
  | "random-bg"
  | "rmbg"
  | "enhance"
  | "watermark";
type ItemStatus = "pending" | "processing" | "completed" | "failed";

interface ProcessItem {
  id: string;
  image: string;
  status: ItemStatus;
  result?: string;
  originalUrl?: string;
  error?: string;
  targetName?: string;
  customPrompt?: string;
}

interface SceneFusionViewProps {
  initialProductImage?: string | null;
  initialProductName?: string;
  onBatchAddToCanvas?: (imageUrls: string[]) => void | Promise<void>;
  onBack?: () => void;
}

const randomBackgroundStyles = [
  "现代简约客厅",
  "北欧卧室",
  "轻奢会客厅",
  "咖啡馆窗边",
  "自然森林步道",
  "城市夜景街道",
  "艺术展厅空间",
  "暖色书房环境",
  "阳光厨房空间",
  "高端商业橱窗",
];

const modeOptions: Array<{
  id: BatchMode;
  label: string;
  description: string;
  icon: React.ComponentType<{ className?: string }>;
}> = [
  {
    id: "scene-fission",
    label: "裂变场景",
    description: "1张产品图 + 多张参考图",
    icon: Layers,
  },
  {
    id: "multi-product-scene",
    label: "多产品替换",
    description: "10张产品图 + 1张参考图",
    icon: ImageIcon,
  },
  {
    id: "random-bg",
    label: "随机换背景",
    description: "1张图随机生成多种背景",
    icon: Wand2,
  },
  {
    id: "rmbg",
    label: "批量抠图",
    description: "多图同步去背景",
    icon: Eraser,
  },
  {
    id: "enhance",
    label: "批量变清晰",
    description: "多图同步增强画质",
    icon: Sparkles,
  },
  {
    id: "watermark",
    label: "批量去水印",
    description: "多图同步去除水印",
    icon: RefreshCw,
  },
];

function getModeActionLabel(mode: BatchMode, count: number) {
  switch (mode) {
    case "scene-fission":
      return `开始裂变 (${count} 张)`;
    case "multi-product-scene":
      return `开始多产品替换 (${count} 张)`;
    case "random-bg":
      return `开始换背景 (${count} 张)`;
    case "rmbg":
      return `批量抠图 (${count} 张)`;
    case "enhance":
      return `批量变清晰 (${count} 张)`;
    case "watermark":
      return `批量去水印 (${count} 张)`;
  }
}

function getModePrompt(mode: BatchMode) {
  switch (mode) {
    case "rmbg":
      return "批量处理-抠图";
    case "enhance":
      return "批量处理-变清晰";
    case "watermark":
      return "批量处理-去水印";
    default:
      return "批量处理";
  }
}

export function SceneFusionView({
  initialProductImage,
  initialProductName,
  onBatchAddToCanvas,
}: SceneFusionViewProps) {
  const { data: configData } = useSWR("/api/scene-fusion/config", fetcher);
  const config = configData as
    | {
        enabled?: boolean;
        defaultPrompt?: string;
        maxScenes?: number;
        outputCapabilities?: SceneFusionCapabilitySummary;
      }
    | undefined;

  const maxScenes = Math.min(
    config?.maxScenes ?? MAX_BATCH_ITEMS,
    MAX_BATCH_ITEMS
  );
  const outputCapabilities = config?.outputCapabilities;
  const availableAspectRatioOptions = useMemo(
    () =>
      SCENE_FUSION_ASPECT_RATIO_OPTIONS.filter((option) =>
        outputCapabilities?.aspectRatio?.enabled === false
          ? false
          : !outputCapabilities?.aspectRatio?.options?.length ||
            outputCapabilities.aspectRatio.options.includes(option.value)
      ),
    [
      outputCapabilities?.aspectRatio?.enabled,
      outputCapabilities?.aspectRatio?.options,
    ]
  );
  const availableImageSizeOptions = useMemo(
    () =>
      SCENE_FUSION_IMAGE_SIZE_OPTIONS.filter((option) =>
        outputCapabilities?.imageSize?.enabled === false
          ? false
          : !outputCapabilities?.imageSize?.options?.length ||
            outputCapabilities.imageSize.options.includes(option.value)
      ),
    [
      outputCapabilities?.imageSize?.enabled,
      outputCapabilities?.imageSize?.options,
    ]
  );
  const showAspectRatioSetting = availableAspectRatioOptions.length > 0;
  const showImageSizeSetting = availableImageSizeOptions.length > 0;

  const [mode, setMode] = useState<BatchMode>("scene-fission");
  const [isProcessing, setIsProcessing] = useState(false);
  const [aspectRatio, setAspectRatio] = useState("auto");
  const [imageSize, setImageSize] = useState("2K");
  const showOutputSettings =
    mode === "scene-fission" ||
    mode === "random-bg" ||
    mode === "multi-product-scene";

  const [productImage, setProductImage] = useState<string | null>(null);
  const [productImagePreview, setProductImagePreview] = useState<string | null>(
    null
  );
  const [productName, setProductName] = useState(initialProductName || "");

  const [sceneItems, setSceneItems] = useState<ProcessItem[]>([]);
  const [multiProductItems, setMultiProductItems] = useState<ProcessItem[]>([]);
  const [referenceSceneImage, setReferenceSceneImage] = useState<string | null>(
    null
  );
  const [referenceTargetName, setReferenceTargetName] = useState("");
  const [referenceCustomPrompt, setReferenceCustomPrompt] = useState("");
  const [randomItems, setRandomItems] = useState<ProcessItem[]>([]);
  const [randomCount, setRandomCount] = useState<number>(4);
  const [randomPrompt, setRandomPrompt] = useState("");

  const [batchItems, setBatchItems] = useState<ProcessItem[]>([]);
  const [previewImageUrl, setPreviewImageUrl] = useState<string | null>(null);
  const [previewImageTitle, setPreviewImageTitle] =
    useState<string>("处理结果预览");

  const productInputRef = useRef<HTMLInputElement>(null);
  const sceneInputRef = useRef<HTMLInputElement>(null);
  const multiProductInputRef = useRef<HTMLInputElement>(null);
  const referenceSceneInputRef = useRef<HTMLInputElement>(null);
  const batchInputRef = useRef<HTMLInputElement>(null);
  const productPreviewObjectUrlRef = useRef<string | null>(null);

  const resultItems = useMemo(() => {
    if (mode === "scene-fission") return sceneItems;
    if (mode === "multi-product-scene") return multiProductItems;
    if (mode === "random-bg") return randomItems;
    return batchItems;
  }, [batchItems, mode, multiProductItems, randomItems, sceneItems]);

  const modeCanStart = useMemo(() => {
    if (mode === "scene-fission")
      return Boolean(productImage) && sceneItems.length > 0;
    if (mode === "multi-product-scene")
      return multiProductItems.length > 0 && Boolean(referenceSceneImage);
    if (mode === "random-bg") return Boolean(productImage) && randomCount > 0;
    return batchItems.length > 0;
  }, [
    batchItems.length,
    mode,
    multiProductItems.length,
    productImage,
    randomCount,
    referenceSceneImage,
    sceneItems.length,
  ]);

  const selectedModeOption = useMemo(
    () => modeOptions.find((option) => option.id === mode),
    [mode]
  );
  const completedResultItems = useMemo(
    () =>
      resultItems.filter(
        (item) =>
          item.status === "completed" && (item.originalUrl || item.result)
      ),
    [resultItems]
  );
  const resultAllFinished = useMemo(
    () =>
      resultItems.length > 0 &&
      resultItems.every(
        (item) => item.status !== "processing" && item.status !== "pending"
      ),
    [resultItems]
  );
  const sceneFusionOutputPayload = useMemo(
    () => ({
      aspectRatio: showAspectRatioSetting ? aspectRatio : undefined,
      imageSize: showImageSizeSetting ? imageSize : undefined,
    }),
    [aspectRatio, imageSize, showAspectRatioSetting, showImageSizeSetting]
  );

  const updateProductPreview = (
    previewUrl: string | null,
    isObjectUrl = false
  ) => {
    if (productPreviewObjectUrlRef.current) {
      URL.revokeObjectURL(productPreviewObjectUrlRef.current);
      productPreviewObjectUrlRef.current = null;
    }
    setProductImagePreview(previewUrl);
    if (isObjectUrl && previewUrl) {
      productPreviewObjectUrlRef.current = previewUrl;
    }
  };

  const clearProductImage = () => {
    setProductImage(null);
    updateProductPreview(null);
  };

  useEffect(() => {
    if (initialProductImage) {
      setProductImage(initialProductImage);
      updateProductPreview(initialProductImage);
    }
  }, [initialProductImage]);

  useEffect(() => {
    return () => {
      if (productPreviewObjectUrlRef.current) {
        URL.revokeObjectURL(productPreviewObjectUrlRef.current);
      }
    };
  }, []);

  useEffect(() => {
    if (showAspectRatioSetting) {
      const nextAspectRatio =
        availableAspectRatioOptions.find(
          (option) => option.value === aspectRatio
        )?.value ||
        outputCapabilities?.aspectRatio?.defaultValue ||
        availableAspectRatioOptions[0]?.value ||
        "auto";
      if (nextAspectRatio !== aspectRatio) {
        setAspectRatio(nextAspectRatio);
      }
      return;
    }

    if (aspectRatio !== "auto") {
      setAspectRatio("auto");
    }
  }, [
    aspectRatio,
    availableAspectRatioOptions,
    outputCapabilities?.aspectRatio?.defaultValue,
    showAspectRatioSetting,
  ]);

  useEffect(() => {
    if (showImageSizeSetting) {
      const nextImageSize =
        availableImageSizeOptions.find((option) => option.value === imageSize)
          ?.value ||
        outputCapabilities?.imageSize?.defaultValue ||
        availableImageSizeOptions[0]?.value ||
        "2K";
      if (nextImageSize !== imageSize) {
        setImageSize(nextImageSize);
      }
      return;
    }

    if (imageSize !== "2K") {
      setImageSize("2K");
    }
  }, [
    availableImageSizeOptions,
    imageSize,
    outputCapabilities?.imageSize?.defaultValue,
    showImageSizeSetting,
  ]);

  const handleProductUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 50 * 1024 * 1024) {
      toast.error("图片大小不能超过 50MB");
      return;
    }

    setProductImage(null);
    const previewUrl = URL.createObjectURL(file);
    updateProductPreview(previewUrl, true);

    const reader = new FileReader();
    reader.onload = (event) => {
      const result = event.target?.result;
      if (typeof result === "string") {
        setProductImage(result);
      } else {
        toast.error("图片读取失败，请重试");
      }
    };
    reader.onerror = () => toast.error("图片读取失败，请重试");
    reader.readAsDataURL(file);
    e.target.value = "";
  };

  const handleSceneUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (files.length === 0) return;
    if (sceneItems.length + files.length > maxScenes) {
      toast.error(`单次最多上传 ${maxScenes} 张参考图`);
      return;
    }

    files.forEach((file) => {
      if (file.size > 50 * 1024 * 1024) {
        toast.error(`图片 ${file.name} 大小不能超过 50MB`);
        return;
      }
      const reader = new FileReader();
      reader.onload = (event) => {
        const image = event.target?.result as string;
        setSceneItems((prev) => [
          ...prev,
          {
            id: Math.random().toString(36).slice(2, 10),
            image,
            targetName: "",
            customPrompt: "",
            status: "pending",
          },
        ]);
      };
      reader.readAsDataURL(file);
    });

    e.target.value = "";
  };

  const handleMultiProductUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (files.length === 0) return;
    if (multiProductItems.length + files.length > MAX_BATCH_ITEMS) {
      toast.error(`单次最多上传 ${MAX_BATCH_ITEMS} 张产品图`);
      return;
    }

    files.forEach((file) => {
      if (file.size > 50 * 1024 * 1024) {
        toast.error(`图片 ${file.name} 大小不能超过 50MB`);
        return;
      }
      const reader = new FileReader();
      reader.onload = (event) => {
        const image = event.target?.result as string;
        setMultiProductItems((prev) => [
          ...prev,
          {
            id: Math.random().toString(36).slice(2, 10),
            image,
            status: "pending",
          },
        ]);
      };
      reader.readAsDataURL(file);
    });

    e.target.value = "";
  };

  const handleReferenceSceneUpload = (
    e: React.ChangeEvent<HTMLInputElement>
  ) => {
    const file = e.target.files?.[0];
    if (!file) return;
    if (file.size > 50 * 1024 * 1024) {
      toast.error("图片大小不能超过 50MB");
      return;
    }

    const reader = new FileReader();
    reader.onload = (event) => {
      const image = event.target?.result as string;
      setReferenceSceneImage(image);
    };
    reader.readAsDataURL(file);
    e.target.value = "";
  };

  const handleBatchUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(e.target.files || []);
    if (files.length === 0) return;
    if (batchItems.length + files.length > MAX_BATCH_ITEMS) {
      toast.error(`单次最多上传 ${MAX_BATCH_ITEMS} 张图片`);
      return;
    }

    files.forEach((file) => {
      if (file.size > 50 * 1024 * 1024) {
        toast.error(`图片 ${file.name} 大小不能超过 50MB`);
        return;
      }
      const reader = new FileReader();
      reader.onload = (event) => {
        const image = event.target?.result as string;
        setBatchItems((prev) => [
          ...prev,
          {
            id: Math.random().toString(36).slice(2, 10),
            image,
            status: "pending",
          },
        ]);
      };
      reader.readAsDataURL(file);
    });

    e.target.value = "";
  };

  const updateSceneItem = (id: string, patch: Partial<ProcessItem>) => {
    setSceneItems((prev) =>
      prev.map((item) => (item.id === id ? { ...item, ...patch } : item))
    );
  };

  const removeSceneItem = (id: string) => {
    setSceneItems((prev) => prev.filter((item) => item.id !== id));
  };

  const removeMultiProductItem = (id: string) => {
    setMultiProductItems((prev) => prev.filter((item) => item.id !== id));
  };

  const removeBatchItem = (id: string) => {
    setBatchItems((prev) => prev.filter((item) => item.id !== id));
  };

  const updateBatchItemsStatus = (ids: string[], status: ItemStatus) => {
    setBatchItems((prev) =>
      prev.map((item) =>
        ids.includes(item.id)
          ? {
              ...item,
              status,
              error: status === "processing" ? undefined : item.error,
            }
          : item
      )
    );
  };

  const updateFusionItemsStatus = (
    setter: React.Dispatch<React.SetStateAction<ProcessItem[]>>,
    ids: string[],
    status: ItemStatus
  ) => {
    setter((prev) =>
      prev.map((item) =>
        ids.includes(item.id)
          ? {
              ...item,
              status,
              error: status === "processing" ? undefined : item.error,
            }
          : item
      )
    );
  };

  const runSceneFusion = async (
    scenesPayload: Array<{
      id: string;
      image: string;
      targetName?: string;
      customPrompt?: string;
    }>,
    setter: React.Dispatch<React.SetStateAction<ProcessItem[]>>
  ) => {
    if (!productImage) return;
    if (scenesPayload.length === 0) return;
    if (config?.enabled === false) {
      toast.error("批量处理功能已被管理员禁用");
      return;
    }

    setIsProcessing(true);
    updateFusionItemsStatus(
      setter,
      scenesPayload.map((item) => item.id),
      "processing"
    );

    try {
      const response = await fetch("/api/scene-fusion", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          productImage,
          productName: productName || undefined,
          sceneMode: mode,
          ...sceneFusionOutputPayload,
          scenes: scenesPayload,
        }),
      });

      if (!response.ok) {
        const errorData = await response.json().catch(() => null);
        throw new Error(errorData?.error || "处理失败");
      }

      const reader = response.body?.getReader();
      if (!reader) {
        throw new Error("读取流式响应失败");
      }

      const decoder = new TextDecoder();
      let buffer = "";
      let success = 0;
      let failed = 0;
      let streamErrorMessage: string | null = null;

      const handleParsedMessage = (msg: {
        type: string;
        data?: {
          id: string;
          status: "completed" | "failed";
          result?: string;
          originalUrl?: string;
          error?: string;
          productName?: string;
          productSource?: "user" | "agent" | "none";
          sceneTargets?: Array<{
            id: string;
            targetName?: string;
            source?: "user" | "agent";
            confidence?: number;
            model?: string;
          }>;
        };
        error?: string;
      }) => {
        if (msg.type === "agent_meta" && msg.data) {
          const detectedProductName =
            typeof msg.data.productName === "string"
              ? msg.data.productName.trim()
              : "";
          if (!productName.trim() && detectedProductName) {
            setProductName(detectedProductName);
          }
          if (
            Array.isArray(msg.data.sceneTargets) &&
            msg.data.sceneTargets.length > 0
          ) {
            setter((prev) =>
              prev.map((item) => {
                const detected = msg.data?.sceneTargets?.find(
                  (entry) => entry.id === item.id
                );
                if (!detected?.targetName) return item;
                const currentTargetName = (item.targetName || "").trim();
                if (currentTargetName) return item;
                return {
                  ...item,
                  targetName: detected.targetName,
                };
              })
            );
          }
          return;
        }

        if (msg.type === "result" && msg.data) {
          const data = msg.data;
          if (data.status === "completed") {
            success += 1;
            setter((prev) =>
              prev.map((item) =>
                item.id === data.id
                  ? {
                      ...item,
                      status: "completed",
                      result: data.result,
                      originalUrl: data.originalUrl,
                      error: undefined,
                    }
                  : item
              )
            );
            return;
          }

          failed += 1;
          setter((prev) =>
            prev.map((item) =>
              item.id === data.id
                ? {
                    ...item,
                    status: "failed",
                    error: data.error || "生成失败",
                  }
                : item
            )
          );
          return;
        }

        if (msg.type === "error") {
          streamErrorMessage = msg.error || "处理失败";
        }
      };

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split("\n");
        buffer = lines.pop() || "";

        for (const line of lines) {
          if (!line.trim()) continue;
          try {
            const msg = JSON.parse(line) as {
              type: string;
              data?: {
                id: string;
                status: "completed" | "failed";
                result?: string;
                originalUrl?: string;
                error?: string;
                productName?: string;
                productSource?: "user" | "agent" | "none";
                sceneTargets?: Array<{
                  id: string;
                  targetName?: string;
                  source?: "user" | "agent";
                  confidence?: number;
                  model?: string;
                }>;
              };
              error?: string;
            };
            handleParsedMessage(msg);
          } catch (parseError) {
            console.warn(
              "[SceneFusionView] Ignore invalid stream line:",
              parseError
            );
          }
        }
      }

      if (buffer.trim()) {
        try {
          const msg = JSON.parse(buffer.trim()) as {
            type: string;
            data?: {
              id: string;
              status: "completed" | "failed";
              result?: string;
              originalUrl?: string;
              error?: string;
              productName?: string;
              productSource?: "user" | "agent" | "none";
              sceneTargets?: Array<{
                id: string;
                targetName?: string;
                source?: "user" | "agent";
                confidence?: number;
                model?: string;
              }>;
            };
            error?: string;
          };
          handleParsedMessage(msg);
        } catch (parseError) {
          console.warn(
            "[SceneFusionView] Ignore trailing stream buffer:",
            parseError
          );
        }
      }

      if (streamErrorMessage) {
        setter((prev) =>
          prev.map((item) =>
            scenesPayload.some((scene) => scene.id === item.id) &&
            item.status === "processing"
              ? {
                  ...item,
                  status: "failed",
                  error: streamErrorMessage || "处理失败",
                }
              : item
          )
        );
        toast.warning(streamErrorMessage);
      }

      if (success > 0 && failed === 0) {
        toast.success(`批量处理完成：${success} 张`);
      } else if (success > 0 || failed > 0) {
        toast.warning(`批量处理完成：${success} 成功，${failed} 失败`);
      }
    } catch (error) {
      const message = error instanceof Error ? error.message : "处理失败";
      toast.error(message);
      setter((prev) =>
        prev.map((item) =>
          scenesPayload.some((scene) => scene.id === item.id) &&
          item.status === "processing"
            ? { ...item, status: "failed", error: message }
            : item
        )
      );
    } finally {
      setIsProcessing(false);
    }
  };

  const runSingleSceneFusionAttempt = async (params: {
    productImageInput: string;
    sceneImageInput: string;
    requestId: string;
    targetName?: string;
    customPrompt?: string;
  }) => {
    const response = await fetch("/api/scene-fusion", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        productImage: params.productImageInput,
        productName: productName || undefined,
        sceneMode: mode,
        ...sceneFusionOutputPayload,
        scenes: [
          {
            id: params.requestId,
            image: params.sceneImageInput,
            targetName: params.targetName || undefined,
            customPrompt: params.customPrompt || undefined,
          },
        ],
      }),
    });

    if (!response.ok) {
      const errorData = await response.json().catch(() => null);
      throw new Error(errorData?.error || "处理失败");
    }

    const reader = response.body?.getReader();
    if (!reader) {
      throw new Error("读取流式响应失败");
    }

    const decoder = new TextDecoder();
    let buffer = "";

    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      buffer += decoder.decode(value, { stream: true });
      const lines = buffer.split("\n");
      buffer = lines.pop() || "";

      for (const line of lines) {
        if (!line.trim()) continue;
        const msg = JSON.parse(line) as {
          type: string;
          data?: {
            id: string;
            status: "completed" | "failed";
            result?: string;
            originalUrl?: string;
            error?: string;
          };
          error?: string;
        };

        if (msg.type === "result" && msg.data?.id === params.requestId) {
          if (msg.data.status === "completed") {
            return {
              result: msg.data.result || params.sceneImageInput,
              originalUrl:
                msg.data.originalUrl ||
                msg.data.result ||
                params.sceneImageInput,
            };
          }
          throw new Error(msg.data.error || "生成失败");
        }

        if (msg.type === "error") {
          throw new Error(msg.error || "处理失败");
        }
      }
    }

    throw new Error("未收到生成结果");
  };

  const runSingleSceneFusionRequest = async (params: {
    productImageInput: string;
    sceneImageInput: string;
    requestId: string;
    targetName?: string;
    customPrompt?: string;
  }) => {
    let lastError: Error | null = null;

    for (
      let round = 1;
      round <= MULTI_PRODUCT_FAILOVER_MAX_ROUNDS;
      round += 1
    ) {
      try {
        return await runSingleSceneFusionAttempt({
          ...params,
          requestId: `${params.requestId}-r${round}`,
        });
      } catch (error) {
        lastError = error instanceof Error ? error : new Error("处理失败");
        const isLastRound = round === MULTI_PRODUCT_FAILOVER_MAX_ROUNDS;
        console.warn(
          `[SceneFusionView] 多产品替换第 ${round}/${MULTI_PRODUCT_FAILOVER_MAX_ROUNDS} 轮失败，准备故障迁移`,
          lastError.message
        );
        if (!isLastRound) {
          await sleep(MULTI_PRODUCT_FAILOVER_RETRY_DELAY_MS);
        }
      }
    }

    throw new Error(
      `故障迁移已重试 ${MULTI_PRODUCT_FAILOVER_MAX_ROUNDS} 轮仍失败：${lastError?.message || "处理失败"}`
    );
  };

  const runMultiProductSceneMode = async () => {
    if (multiProductItems.length === 0) {
      toast.error("请先上传产品图");
      return;
    }
    if (!referenceSceneImage) {
      toast.error("请先上传参考图");
      return;
    }
    if (config?.enabled === false) {
      toast.error("批量处理功能已被管理员禁用");
      return;
    }

    let itemsToProcess = multiProductItems.filter(
      (item) => item.status === "pending" || item.status === "failed"
    );
    if (itemsToProcess.length === 0) {
      itemsToProcess = multiProductItems;
    }

    if (itemsToProcess.length > MAX_BATCH_ITEMS) {
      toast.error(`单次最多处理 ${MAX_BATCH_ITEMS} 张产品图`);
      return;
    }

    setIsProcessing(true);
    setMultiProductItems((prev) =>
      prev.map((item) =>
        itemsToProcess.some((target) => target.id === item.id)
          ? { ...item, status: "processing", error: undefined }
          : item
      )
    );

    const queue = [...itemsToProcess];
    const workerCount = Math.max(
      1,
      Math.min(BATCH_SERIAL_WORKER_COUNT, queue.length)
    );
    let successCount = 0;
    let failedCount = 0;

    const workers = Array.from({ length: workerCount }, async () => {
      while (queue.length > 0) {
        const current = queue.shift();
        if (!current) break;
        const requestId = `multi-product-${current.id}-${Date.now()}`;

        try {
          const result = await runSingleSceneFusionRequest({
            productImageInput: current.image,
            sceneImageInput: referenceSceneImage,
            requestId,
            targetName: referenceTargetName || undefined,
            customPrompt: referenceCustomPrompt || undefined,
          });
          successCount += 1;
          setMultiProductItems((prev) =>
            prev.map((item) =>
              item.id === current.id
                ? {
                    ...item,
                    status: "completed",
                    result: result.result,
                    originalUrl: result.originalUrl,
                    error: undefined,
                  }
                : item
            )
          );
        } catch (error) {
          const message = error instanceof Error ? error.message : "处理失败";
          failedCount += 1;
          setMultiProductItems((prev) =>
            prev.map((item) =>
              item.id === current.id
                ? {
                    ...item,
                    status: "failed",
                    error: message,
                  }
                : item
            )
          );
        }

        if (queue.length > 0) {
          await sleep(BATCH_REQUEST_STAGGER_MS);
        }
      }
    });

    await Promise.all(workers);
    setIsProcessing(false);

    if (successCount > 0 && failedCount === 0) {
      toast.success(`多产品替换完成：${successCount} 张`);
    } else {
      toast.warning(
        `多产品替换完成：${successCount} 成功，${failedCount} 失败`
      );
    }
  };

  const buildRandomItems = () => {
    const count = Math.max(1, Math.min(MAX_BATCH_ITEMS, randomCount));
    const stylePool = [...randomBackgroundStyles].sort(
      () => Math.random() - 0.5
    );
    return Array.from({ length: count }).map((_, index) => {
      const style = stylePool[index % stylePool.length];
      const customPrompt = `请保持产品主体清晰完整，背景必须明显变化为“${style}”风格（不得与原背景相似），光影自然。${randomPrompt ? `补充要求：${randomPrompt}` : ""}`;
      return {
        id: `rand-${Date.now()}-${index}-${Math.random().toString(36).slice(2, 6)}`,
        image: productImage || "",
        customPrompt,
        status: "pending" as ItemStatus,
      };
    });
  };

  const processBatchImageItem = async (item: ProcessItem) => {
    if (mode === "rmbg") {
      const response = await fetch("/api/rmbg", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          imageUrl: item.image,
          prompt: getModePrompt(mode),
          skipGallerySave: false,
        }),
      });
      const payload = await response.json();
      if (!response.ok || !payload?.success) {
        throw new Error(payload?.error || payload?.detail || "抠图失败");
      }
      return {
        result: payload.thumbnail_url || payload.original_url || item.image,
        originalUrl:
          payload.original_url || payload.thumbnail_url || item.image,
      };
    }

    if (mode === "enhance") {
      const payload = await requestLongTaskResult({
        endpoint: "/api/enhance",
        payload: {
          imageUrl: item.image,
          prompt: getModePrompt(mode),
        },
        pollingParams: {
          prompt: getModePrompt(mode),
        },
      });
      if (!payload?.success) {
        throw new Error(payload?.error || payload?.detail || "变清晰失败");
      }
      return {
        result: payload.thumbnail_url || payload.original_url || item.image,
        originalUrl:
          payload.original_url || payload.thumbnail_url || item.image,
      };
    }

    if (mode === "watermark") {
      const payload = await requestLongTaskResult({
        endpoint: "/api/watermark-remove",
        payload: {
          image_url: item.image,
        },
      });
      if (!payload?.success) {
        throw new Error(payload?.error || payload?.detail || "去水印失败");
      }
      return {
        result: payload.thumbnail_url || payload.original_url || item.image,
        originalUrl:
          payload.original_url || payload.thumbnail_url || item.image,
      };
    }

    throw new Error("当前模式不支持此操作");
  };

  const runBatchImageMode = async () => {
    if (batchItems.length === 0) {
      toast.error("请先上传图片");
      return;
    }

    let itemsToProcess = batchItems.filter(
      (item) => item.status === "pending" || item.status === "failed"
    );
    if (itemsToProcess.length === 0) {
      itemsToProcess = batchItems;
    }

    if (itemsToProcess.length > MAX_BATCH_ITEMS) {
      toast.error(`单次最多处理 ${MAX_BATCH_ITEMS} 张图片`);
      return;
    }

    setIsProcessing(true);
    updateBatchItemsStatus(
      itemsToProcess.map((item) => item.id),
      "processing"
    );

    const queue = [...itemsToProcess];
    const workerCount = Math.max(
      1,
      Math.min(BATCH_SERIAL_WORKER_COUNT, queue.length)
    );
    let successCount = 0;
    let failedCount = 0;

    const workers = Array.from({ length: workerCount }, async () => {
      while (queue.length > 0) {
        const current = queue.shift();
        if (!current) break;
        try {
          const result = await processBatchImageItem(current);
          successCount += 1;
          setBatchItems((prev) =>
            prev.map((item) =>
              item.id === current.id
                ? {
                    ...item,
                    status: "completed",
                    result: result.result,
                    originalUrl: result.originalUrl,
                    error: undefined,
                  }
                : item
            )
          );
        } catch (error) {
          const message = error instanceof Error ? error.message : "处理失败";
          failedCount += 1;
          setBatchItems((prev) =>
            prev.map((item) =>
              item.id === current.id
                ? {
                    ...item,
                    status: "failed",
                    error: message,
                  }
                : item
            )
          );
        }

        if (queue.length > 0) {
          await sleep(BATCH_REQUEST_STAGGER_MS);
        }
      }
    });

    await Promise.all(workers);
    setIsProcessing(false);

    if (successCount > 0 && failedCount === 0) {
      toast.success(`批量处理完成：${successCount} 张`);
    } else {
      toast.warning(`批量处理完成：${successCount} 成功，${failedCount} 失败`);
    }
  };

  const startProcessing = async () => {
    if (mode === "scene-fission") {
      if (!productImage) {
        toast.error("请先上传产品图");
        return;
      }
      if (sceneItems.length === 0) {
        toast.error("请至少上传一张场景参考图");
        return;
      }

      let scenesToProcess = sceneItems.filter(
        (item) => item.status === "pending" || item.status === "failed"
      );
      if (scenesToProcess.length === 0) {
        scenesToProcess = sceneItems;
      }

      await runSceneFusion(
        scenesToProcess.map((item) => ({
          id: item.id,
          image: item.image,
          targetName: item.targetName || undefined,
          customPrompt: item.customPrompt || undefined,
        })),
        setSceneItems
      );
      return;
    }

    if (mode === "random-bg") {
      if (!productImage) {
        toast.error("请先上传主图");
        return;
      }
      const items = buildRandomItems();
      setRandomItems(items);
      await runSceneFusion(
        items.map((item) => ({
          id: item.id,
          image: item.image,
          customPrompt: item.customPrompt || undefined,
        })),
        setRandomItems
      );
      return;
    }

    if (mode === "multi-product-scene") {
      await runMultiProductSceneMode();
      return;
    }

    await runBatchImageMode();
  };

  const retrySingleItem = async (item: ProcessItem) => {
    if (isProcessing) return;
    if (mode === "scene-fission") {
      await runSceneFusion(
        [
          {
            id: item.id,
            image: item.image,
            targetName: item.targetName || undefined,
            customPrompt: item.customPrompt || undefined,
          },
        ],
        setSceneItems
      );
      return;
    }
    if (mode === "random-bg") {
      await runSceneFusion(
        [
          {
            id: item.id,
            image: item.image,
            customPrompt: item.customPrompt || undefined,
          },
        ],
        setRandomItems
      );
      return;
    }

    if (mode === "multi-product-scene") {
      if (!referenceSceneImage) {
        toast.error("请先上传参考图");
        return;
      }
      setMultiProductItems((prev) =>
        prev.map((productItem) =>
          productItem.id === item.id
            ? { ...productItem, status: "pending", error: undefined }
            : productItem
        )
      );
      await runMultiProductSceneMode();
      return;
    }

    setBatchItems((prev) =>
      prev.map((batchItem) =>
        batchItem.id === item.id
          ? { ...batchItem, status: "pending", error: undefined }
          : batchItem
      )
    );
    await runBatchImageMode();
  };

  const downloadImage = async (url: string, filename: string) => {
    try {
      const response = await fetch(url);
      const blob = await response.blob();
      const blobUrl = URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = blobUrl;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      setTimeout(() => URL.revokeObjectURL(blobUrl), 100);
    } catch {
      window.open(url, "_blank");
    }
  };

  const downloadAll = async () => {
    const completed = resultItems.filter(
      (item) => item.status === "completed" && (item.originalUrl || item.result)
    );
    if (completed.length === 0) {
      toast.error("没有可下载的图片");
      return;
    }
    for (let i = 0; i < completed.length; i += 1) {
      const item = completed[i]!;
      await downloadImage(
        item.originalUrl || item.result!,
        `batch-result-${i + 1}.png`
      );
      await new Promise((resolve) => setTimeout(resolve, 400));
    }
    toast.success(`已下载 ${completed.length} 张图片`);
  };

  const handleBatchAddToCanvas = async () => {
    if (!onBatchAddToCanvas) return;
    const imageUrls = completedResultItems
      .map((item) => item.originalUrl || item.result)
      .filter((url): url is string => Boolean(url));
    if (imageUrls.length === 0) {
      toast.error("没有可添加到画布的图片");
      return;
    }
    try {
      await onBatchAddToCanvas(imageUrls);
      toast.success(`已批量添加 ${imageUrls.length} 张到画布`);
    } catch (error) {
      const message = error instanceof Error ? error.message : "添加到画布失败";
      toast.error(message);
    }
  };

  const openResultPreview = (imageUrl: string, title: string) => {
    setPreviewImageUrl(imageUrl);
    setPreviewImageTitle(title);
  };

  const closeResultPreview = () => {
    setPreviewImageUrl(null);
  };

  return (
    <div className="flex h-full min-h-0 w-full flex-col bg-background">
      <div className="flex min-h-0 flex-1 flex-col overflow-hidden md:flex-row">
        <div className="flex min-h-0 w-full shrink-0 flex-col border-r bg-background md:w-[420px]">
          <div className="flex h-16 shrink-0 items-center border-b bg-background px-4">
            <div className="flex items-center gap-2">
              <Layers className="h-4 w-4 text-primary" />
              <span className="font-medium">批量处理</span>
            </div>
          </div>

          <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4">
            <div className="space-y-6">
              <div className="space-y-2">
                <Label className="font-medium text-base">处理模式</Label>
                <Select
                  disabled={isProcessing}
                  onValueChange={(value) => setMode(value as BatchMode)}
                  value={mode}
                >
                  <SelectTrigger className="h-10 bg-background">
                    <span className="truncate">
                      {selectedModeOption?.label || "请选择处理模式"}
                    </span>
                  </SelectTrigger>
                  <SelectContent className="z-[30000] !bg-white dark:!bg-zinc-950">
                    {modeOptions.map((option) => (
                      <SelectItem
                        className="items-start py-2"
                        key={option.id}
                        value={option.id}
                      >
                        <div className="flex flex-col">
                          <span className="text-sm">{option.label}</span>
                          <span className="text-muted-foreground text-xs">
                            {option.description}
                          </span>
                        </div>
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                <p className="text-muted-foreground text-xs">
                  单次处理硬限制：最多 {MAX_BATCH_ITEMS} 张图片。
                </p>
              </div>

              {(mode === "scene-fission" || mode === "random-bg") && (
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="font-medium text-base">
                      主图 A (必须)
                    </Label>
                    {(productImagePreview || productImage) && (
                      <Button
                        className="h-6 text-muted-foreground text-xs hover:text-destructive"
                        onClick={clearProductImage}
                        size="sm"
                        variant="ghost"
                      >
                        清除
                      </Button>
                    )}
                  </div>

                  <div
                    className={cn(
                      "group relative cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors",
                      productImagePreview || productImage
                        ? "border-primary/50 bg-primary/5"
                        : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
                    )}
                    onClick={() =>
                      !(productImagePreview || productImage) &&
                      productInputRef.current?.click()
                    }
                  >
                    <input
                      accept="image/png,image/jpeg,image/webp"
                      className="hidden"
                      onChange={handleProductUpload}
                      ref={productInputRef}
                      type="file"
                    />
                    {productImagePreview || productImage ? (
                      <div className="relative mx-auto aspect-square w-full max-w-[200px]">
                        <img
                          alt="主图"
                          className="h-full w-full rounded-md object-contain"
                          src={productImagePreview || productImage || ""}
                        />
                      </div>
                    ) : (
                      <div className="flex flex-col items-center gap-2 py-8 text-muted-foreground">
                        <Upload className="h-8 w-8 opacity-50" />
                        <span className="text-sm">点击上传主图</span>
                      </div>
                    )}
                  </div>

                  {(productImagePreview || productImage) && (
                    <Input
                      className="h-9 text-sm"
                      disabled={isProcessing}
                      onChange={(e) => setProductName(e.target.value)}
                      placeholder="主图名称（如：沙发、椅子）"
                      value={productName}
                    />
                  )}
                </div>
              )}

              {showOutputSettings && (
                <div className="space-y-3">
                  <div className="space-y-1">
                    <Label className="font-medium text-base">输出设置</Label>
                    {outputCapabilities?.strategyLabel ? (
                      <p className="text-muted-foreground text-xs">
                        {outputCapabilities.strategyLabel}
                      </p>
                    ) : null}
                    {outputCapabilities?.note ? (
                      <p className="text-muted-foreground text-xs">
                        {outputCapabilities.note}
                      </p>
                    ) : null}
                  </div>

                  {showAspectRatioSetting ? (
                    <div className="space-y-1.5">
                      <label className="text-muted-foreground text-xs">
                        图片比例
                      </label>
                      <div className="flex flex-wrap gap-1.5">
                        {availableAspectRatioOptions.map((option) => (
                          <button
                            className={cn(
                              "rounded-md border px-2.5 py-1 text-xs transition-colors",
                              aspectRatio === option.value
                                ? "border-primary bg-primary text-primary-foreground"
                                : "border-input bg-background hover:bg-muted"
                            )}
                            disabled={isProcessing}
                            key={option.value}
                            onClick={() => setAspectRatio(option.value)}
                          >
                            {option.label}
                          </button>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-1">
                      <label className="text-muted-foreground text-xs">
                        图片比例
                      </label>
                      <p className="text-muted-foreground text-xs">
                        当前模型链路不支持自定义图片比例，将按模型默认比例生成。
                      </p>
                    </div>
                  )}

                  {showImageSizeSetting ? (
                    <div className="space-y-1.5">
                      <label className="text-muted-foreground text-xs">
                        输出分辨率
                      </label>
                      <div className="flex flex-wrap gap-1.5">
                        {availableImageSizeOptions.map((option) => (
                          <button
                            className={cn(
                              "rounded-md border px-2.5 py-1 text-xs transition-colors",
                              imageSize === option.value
                                ? "border-primary bg-primary text-primary-foreground"
                                : "border-input bg-background hover:bg-muted"
                            )}
                            disabled={isProcessing}
                            key={option.value}
                            onClick={() => setImageSize(option.value)}
                          >
                            {option.label}
                          </button>
                        ))}
                      </div>
                    </div>
                  ) : (
                    <div className="space-y-1">
                      <label className="text-muted-foreground text-xs">
                        输出分辨率
                      </label>
                      <p className="text-muted-foreground text-xs">
                        当前模型链路不支持自定义分辨率，将按模型默认清晰度生成。
                      </p>
                    </div>
                  )}
                </div>
              )}

              {mode === "scene-fission" && (
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="font-medium text-base">
                      场景参考图 ({sceneItems.length}/{maxScenes})
                    </Label>
                    <Button
                      className="h-7 gap-1 text-xs"
                      disabled={sceneItems.length >= maxScenes || isProcessing}
                      onClick={() => sceneInputRef.current?.click()}
                      size="sm"
                      variant="outline"
                    >
                      <Plus className="h-3 w-3" /> 批量添加
                    </Button>
                    <input
                      accept="image/png,image/jpeg,image/webp"
                      className="hidden"
                      multiple
                      onChange={handleSceneUpload}
                      ref={sceneInputRef}
                      type="file"
                    />
                  </div>

                  <div className="space-y-3">
                    {sceneItems.length === 0 && (
                      <div
                        className="cursor-pointer rounded-lg border-2 border-muted-foreground/25 border-dashed p-8 text-center transition-colors hover:bg-muted/50"
                        onClick={() => sceneInputRef.current?.click()}
                      >
                        <ImageIcon className="mx-auto mb-2 h-8 w-8 opacity-20" />
                        <p className="text-muted-foreground text-sm">
                          点击添加场景参考图
                        </p>
                        <p className="mt-1 text-muted-foreground/60 text-xs">
                          最多 {maxScenes} 张
                        </p>
                      </div>
                    )}
                    {sceneItems.map((item, index) => (
                      <div
                        className="group relative rounded-lg border bg-background p-3"
                        key={item.id}
                      >
                        <div className="flex gap-3">
                          <div className="h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted">
                            <img
                              alt={`场景 ${index + 1}`}
                              className="h-full w-full object-cover"
                              src={item.image}
                            />
                          </div>
                          <div className="flex-1 space-y-1.5">
                            <div className="flex items-center justify-between">
                              <span className="font-medium text-muted-foreground text-xs">
                                场景 {index + 1}
                              </span>
                              {!isProcessing && (
                                <Button
                                  className="h-6 w-6 text-muted-foreground hover:text-destructive"
                                  onClick={() => removeSceneItem(item.id)}
                                  size="icon"
                                  variant="ghost"
                                >
                                  <Trash2 className="h-3.5 w-3.5" />
                                </Button>
                              )}
                            </div>
                            <Input
                              className="h-7 text-xs"
                              disabled={isProcessing}
                              onChange={(e) =>
                                updateSceneItem(item.id, {
                                  targetName: e.target.value,
                                })
                              }
                              placeholder="被替换物体（如：椅子、桌子）"
                              value={item.targetName || ""}
                            />
                            <Input
                              className="h-7 text-xs"
                              disabled={isProcessing}
                              onChange={(e) =>
                                updateSceneItem(item.id, {
                                  customPrompt: e.target.value,
                                })
                              }
                              placeholder="修改要求（可选）"
                              value={item.customPrompt || ""}
                            />
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

              {mode === "multi-product-scene" && (
                <div className="space-y-4">
                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="font-medium text-base">
                        产品图列表 ({multiProductItems.length}/{MAX_BATCH_ITEMS}
                        )
                      </Label>
                      <Button
                        className="h-7 gap-1 text-xs"
                        disabled={
                          multiProductItems.length >= MAX_BATCH_ITEMS ||
                          isProcessing
                        }
                        onClick={() => multiProductInputRef.current?.click()}
                        size="sm"
                        variant="outline"
                      >
                        <Plus className="h-3 w-3" /> 批量添加
                      </Button>
                      <input
                        accept="image/png,image/jpeg,image/webp"
                        className="hidden"
                        multiple
                        onChange={handleMultiProductUpload}
                        ref={multiProductInputRef}
                        type="file"
                      />
                    </div>
                    {multiProductItems.length === 0 ? (
                      <div
                        className="cursor-pointer rounded-lg border-2 border-muted-foreground/25 border-dashed p-8 text-center transition-colors hover:bg-muted/50"
                        onClick={() => multiProductInputRef.current?.click()}
                      >
                        <ImageIcon className="mx-auto mb-2 h-8 w-8 opacity-20" />
                        <p className="text-muted-foreground text-sm">
                          点击上传产品图（可多张）
                        </p>
                        <p className="mt-1 text-muted-foreground/60 text-xs">
                          最多 {MAX_BATCH_ITEMS} 张
                        </p>
                      </div>
                    ) : (
                      <div className="space-y-3">
                        {multiProductItems.map((item, index) => (
                          <div
                            className="group relative rounded-lg border bg-background p-3"
                            key={item.id}
                          >
                            <div className="flex items-center gap-3">
                              <div className="h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted">
                                <img
                                  alt={`产品 ${index + 1}`}
                                  className="h-full w-full object-cover"
                                  src={item.image}
                                />
                              </div>
                              <div className="flex-1">
                                <div className="font-medium text-muted-foreground text-xs">
                                  产品 {index + 1}
                                </div>
                                <div className="mt-1 text-muted-foreground text-xs">
                                  状态：
                                  {item.status === "pending"
                                    ? "等待"
                                    : item.status === "processing"
                                      ? "处理中"
                                      : item.status === "completed"
                                        ? "完成"
                                        : "失败"}
                                </div>
                                {item.error && (
                                  <div className="mt-1 line-clamp-2 text-destructive text-xs">
                                    {item.error}
                                  </div>
                                )}
                              </div>
                              {!isProcessing && (
                                <Button
                                  className="h-7 w-7 text-muted-foreground hover:text-destructive"
                                  onClick={() =>
                                    removeMultiProductItem(item.id)
                                  }
                                  size="icon"
                                  variant="ghost"
                                >
                                  <Trash2 className="h-3.5 w-3.5" />
                                </Button>
                              )}
                            </div>
                          </div>
                        ))}
                      </div>
                    )}
                  </div>

                  <div className="space-y-2">
                    <div className="flex items-center justify-between">
                      <Label className="font-medium text-base">
                        参考图 B（统一替换目标）
                      </Label>
                      {referenceSceneImage && (
                        <Button
                          className="h-6 text-muted-foreground text-xs hover:text-destructive"
                          onClick={() => setReferenceSceneImage(null)}
                          size="sm"
                          variant="ghost"
                        >
                          清除
                        </Button>
                      )}
                    </div>
                    <div
                      className={cn(
                        "group relative cursor-pointer rounded-lg border-2 border-dashed p-4 text-center transition-colors",
                        referenceSceneImage
                          ? "border-primary/50 bg-primary/5"
                          : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
                      )}
                      onClick={() =>
                        !referenceSceneImage &&
                        referenceSceneInputRef.current?.click()
                      }
                    >
                      <input
                        accept="image/png,image/jpeg,image/webp"
                        className="hidden"
                        onChange={handleReferenceSceneUpload}
                        ref={referenceSceneInputRef}
                        type="file"
                      />
                      {referenceSceneImage ? (
                        <div className="relative mx-auto aspect-square w-full max-w-[220px]">
                          <img
                            alt="参考图"
                            className="h-full w-full rounded-md object-cover"
                            src={referenceSceneImage}
                          />
                        </div>
                      ) : (
                        <div className="flex flex-col items-center gap-2 py-8 text-muted-foreground">
                          <Upload className="h-8 w-8 opacity-50" />
                          <span className="text-sm">点击上传参考图</span>
                        </div>
                      )}
                    </div>

                    <Input
                      className="h-8 text-xs"
                      disabled={isProcessing}
                      onChange={(e) => setReferenceTargetName(e.target.value)}
                      placeholder="被替换物体（可选，如：椅子、花瓶）"
                      value={referenceTargetName}
                    />
                    <Input
                      className="h-8 text-xs"
                      disabled={isProcessing}
                      onChange={(e) => setReferenceCustomPrompt(e.target.value)}
                      placeholder="补充要求（可选）"
                      value={referenceCustomPrompt}
                    />
                  </div>
                </div>
              )}

              {mode === "random-bg" && (
                <div className="space-y-3">
                  <Label className="font-medium text-base">随机背景参数</Label>
                  <div className="space-y-1.5">
                    <label className="text-muted-foreground text-xs">
                      生成张数（最多10）
                    </label>
                    <Input
                      className="h-9 text-sm"
                      disabled={isProcessing}
                      max={MAX_BATCH_ITEMS}
                      min={1}
                      onChange={(e) =>
                        setRandomCount(
                          Math.max(
                            1,
                            Math.min(
                              MAX_BATCH_ITEMS,
                              Number(e.target.value) || 1
                            )
                          )
                        )
                      }
                      type="number"
                      value={randomCount}
                    />
                  </div>
                  <div className="space-y-1.5">
                    <label className="text-muted-foreground text-xs">
                      补充要求（可选）
                    </label>
                    <Input
                      className="h-9 text-sm"
                      disabled={isProcessing}
                      onChange={(e) => setRandomPrompt(e.target.value)}
                      placeholder="例如：暖色调、真实摄影感、商业海报风"
                      value={randomPrompt}
                    />
                  </div>
                  <p className="text-muted-foreground text-xs">
                    使用与“裂变场景”同一套生图模型池，自动随机背景风格生成。
                  </p>
                </div>
              )}

              {(mode === "rmbg" ||
                mode === "enhance" ||
                mode === "watermark") && (
                <div className="space-y-2">
                  <div className="flex items-center justify-between">
                    <Label className="font-medium text-base">
                      待处理图片 ({batchItems.length}/{MAX_BATCH_ITEMS})
                    </Label>
                    <Button
                      className="h-7 gap-1 text-xs"
                      disabled={
                        batchItems.length >= MAX_BATCH_ITEMS || isProcessing
                      }
                      onClick={() => batchInputRef.current?.click()}
                      size="sm"
                      variant="outline"
                    >
                      <Plus className="h-3 w-3" /> 批量添加
                    </Button>
                    <input
                      accept="image/png,image/jpeg,image/webp"
                      className="hidden"
                      multiple
                      onChange={handleBatchUpload}
                      ref={batchInputRef}
                      type="file"
                    />
                  </div>

                  <div className="space-y-3">
                    {batchItems.length === 0 && (
                      <div
                        className="cursor-pointer rounded-lg border-2 border-muted-foreground/25 border-dashed p-8 text-center transition-colors hover:bg-muted/50"
                        onClick={() => batchInputRef.current?.click()}
                      >
                        <ImageIcon className="mx-auto mb-2 h-8 w-8 opacity-20" />
                        <p className="text-muted-foreground text-sm">
                          点击上传待处理图片
                        </p>
                        <p className="mt-1 text-muted-foreground/60 text-xs">
                          最多 {MAX_BATCH_ITEMS} 张
                        </p>
                      </div>
                    )}

                    {batchItems.map((item, index) => (
                      <div
                        className="group relative rounded-lg border bg-background p-3"
                        key={item.id}
                      >
                        <div className="flex items-center gap-3">
                          <div className="h-20 w-20 shrink-0 overflow-hidden rounded-md border bg-muted">
                            <img
                              alt={`图片 ${index + 1}`}
                              className="h-full w-full object-cover"
                              src={item.image}
                            />
                          </div>
                          <div className="flex-1">
                            <div className="font-medium text-muted-foreground text-xs">
                              图片 {index + 1}
                            </div>
                            <div className="mt-1 text-muted-foreground text-xs">
                              状态：
                              {item.status === "pending"
                                ? "等待"
                                : item.status === "processing"
                                  ? "处理中"
                                  : item.status === "completed"
                                    ? "完成"
                                    : "失败"}
                            </div>
                            {item.error && (
                              <div className="mt-1 line-clamp-2 text-destructive text-xs">
                                {item.error}
                              </div>
                            )}
                          </div>
                          {!isProcessing && (
                            <Button
                              className="h-7 w-7 text-muted-foreground hover:text-destructive"
                              onClick={() => removeBatchItem(item.id)}
                              size="icon"
                              variant="ghost"
                            >
                              <Trash2 className="h-3.5 w-3.5" />
                            </Button>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
            </div>
          </div>

          <div className="shrink-0 border-t bg-background p-4">
            <Button
              className="h-12 w-full bg-primary font-semibold text-base text-primary-foreground shadow-sm hover:bg-primary/90 disabled:bg-muted disabled:text-muted-foreground disabled:opacity-100"
              disabled={isProcessing || !modeCanStart}
              onClick={startProcessing}
              size="lg"
            >
              {isProcessing ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  处理中...
                </>
              ) : (
                <>
                  <Sparkles className="mr-2 h-4 w-4" />
                  {getModeActionLabel(
                    mode,
                    mode === "random-bg" ? randomCount : resultItems.length
                  )}
                </>
              )}
            </Button>
          </div>
        </div>

        <div className="flex h-full min-h-0 flex-1 flex-col bg-background">
          <div className="flex h-16 shrink-0 items-center justify-between border-b bg-background px-4 pr-14">
            <h3 className="font-medium">处理结果</h3>
            {(completedResultItems.length > 0 || onBatchAddToCanvas) && (
              <div className="flex items-center gap-2">
                {onBatchAddToCanvas && completedResultItems.length > 0 && (
                  <Button
                    disabled={!resultAllFinished}
                    onClick={handleBatchAddToCanvas}
                    size="sm"
                    title={
                      resultAllFinished
                        ? "将处理结果批量添加到画布"
                        : "请等待所有任务处理完成"
                    }
                    variant="outline"
                  >
                    <Plus className="mr-2 h-4 w-4" />
                    批量添加到画布
                  </Button>
                )}
                {completedResultItems.length > 0 && (
                  <Button onClick={downloadAll} size="sm" variant="outline">
                    <Download className="mr-2 h-4 w-4" />
                    全部下载
                  </Button>
                )}
              </div>
            )}
          </div>

          <ScrollArea className="min-h-0 flex-1">
            <div className="p-4">
              {resultItems.length === 0 ? (
                <div className="flex h-full min-h-[300px] flex-col items-center justify-center text-muted-foreground opacity-50">
                  <Wand2 className="mb-4 h-16 w-16" />
                  <p>选择模式并上传图片后，结果会显示在这里</p>
                </div>
              ) : (
                <div className="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-4">
                  {resultItems.map((item, index) => (
                    <div
                      className="flex flex-col overflow-hidden rounded-lg border bg-background shadow-sm"
                      key={item.id}
                    >
                      <div className="flex items-center justify-between border-b bg-muted/30 p-2 text-muted-foreground text-xs">
                        <span>任务 {index + 1}</span>
                        <span
                          className={cn(
                            "rounded px-1.5 py-0.5 text-[10px] capitalize",
                            item.status === "completed" &&
                              "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
                            item.status === "failed" &&
                              "bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400",
                            item.status === "processing" &&
                              "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
                            item.status === "pending" &&
                              "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400"
                          )}
                        >
                          {item.status === "completed"
                            ? "完成"
                            : item.status === "failed"
                              ? "失败"
                              : item.status === "processing"
                                ? "处理中"
                                : "等待"}
                        </span>
                      </div>

                      <div
                        className={cn(
                          "group relative aspect-[3/4] bg-muted/20",
                          item.status === "completed" &&
                            (item.result || item.originalUrl) &&
                            "cursor-zoom-in"
                        )}
                        onClick={() => {
                          const previewUrl = item.originalUrl || item.result;
                          if (item.status === "completed" && previewUrl) {
                            openResultPreview(
                              previewUrl,
                              `任务 ${index + 1} 预览`
                            );
                          }
                        }}
                        onKeyDown={(event) => {
                          if (event.key !== "Enter" && event.key !== " ")
                            return;
                          const previewUrl = item.originalUrl || item.result;
                          if (item.status === "completed" && previewUrl) {
                            event.preventDefault();
                            openResultPreview(
                              previewUrl,
                              `任务 ${index + 1} 预览`
                            );
                          }
                        }}
                        role="button"
                        tabIndex={
                          item.status === "completed" &&
                          (item.result || item.originalUrl)
                            ? 0
                            : -1
                        }
                      >
                        {item.result ? (
                          <img
                            alt="处理结果"
                            className="h-full w-full object-cover"
                            src={item.result}
                          />
                        ) : (
                          <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden p-0">
                            <img
                              alt="原图"
                              className="absolute inset-0 h-full w-full object-cover opacity-35"
                              src={item.image}
                            />
                            {item.status === "processing" ? (
                              <div className="relative z-10 flex flex-col items-center gap-2">
                                <Loader2 className="h-7 w-7 animate-spin text-primary" />
                                <span className="rounded bg-black/50 px-2 py-1 text-white/95 text-xs">
                                  处理中...
                                </span>
                              </div>
                            ) : item.status === "failed" ? (
                              <div className="relative z-10 px-3 text-center">
                                <p className="line-clamp-2 rounded bg-black/55 px-2 py-1 text-white text-xs">
                                  {item.error || "处理失败"}
                                </p>
                              </div>
                            ) : (
                              <span className="relative z-10 rounded bg-black/50 px-2 py-1 font-medium text-white text-xs">
                                等待处理
                              </span>
                            )}
                          </div>
                        )}

                        {item.status === "completed" && (
                          <div className="absolute inset-0 flex items-center justify-center gap-2 bg-black/60 opacity-0 transition-opacity group-hover:opacity-100">
                            <Button
                              onClick={(event) => {
                                event.stopPropagation();
                                downloadImage(
                                  item.originalUrl || item.result!,
                                  `batch-${index + 1}.png`
                                );
                              }}
                              size="icon"
                              variant="secondary"
                            >
                              <Download className="h-4 w-4" />
                            </Button>
                            <Button
                              onClick={(event) => {
                                event.stopPropagation();
                                retrySingleItem(item);
                              }}
                              size="icon"
                              variant="secondary"
                            >
                              <RefreshCw className="h-4 w-4" />
                            </Button>
                          </div>
                        )}
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </ScrollArea>
        </div>
      </div>
      {previewImageUrl && (
        <div
          className="fixed inset-0 z-[31000] flex items-center justify-center bg-black/80 p-4 backdrop-blur-sm"
          onClick={closeResultPreview}
        >
          <div
            className="relative max-h-[90vh] w-full max-w-6xl overflow-hidden rounded-lg border bg-background shadow-xl"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="flex h-12 items-center justify-between border-b px-4">
              <span className="font-medium text-sm">{previewImageTitle}</span>
              <Button onClick={closeResultPreview} size="icon" variant="ghost">
                <X className="h-4 w-4" />
              </Button>
            </div>
            <div className="flex items-center justify-center bg-black/5 p-3">
              <img
                alt={previewImageTitle}
                className="max-h-[calc(90vh-72px)] w-auto max-w-full rounded object-contain"
                src={previewImageUrl}
              />
            </div>
          </div>
        </div>
      )}
    </div>
  );
}