"use client";

import {
  CircleAlert,
  ImagePlus,
  Images,
  LayoutTemplate,
  Loader2,
  Plus,
  RefreshCw,
  Trash2,
  Upload,
} from "lucide-react";
import type React from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { toast } from "sonner";
import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Progress } from "@/components/ui/progress";
import { Textarea } from "@/components/ui/textarea";
import { buildImageProxyUrl } from "@/lib/image-delivery";
import { cn } from "@/lib/utils";
import {
  getAvailableCanvasLayoutReplaceSources,
  getLayoutReplaceSourceIdentity,
  getReadyCanvasLayoutReplaceSource,
  type LayoutReplaceSource,
  mergeUniqueLayoutReplaceSources,
} from "@/lib/canvas/layout-replace-source-selection";
import {
  imageGenerationService,
  type CanvasLayoutReplaceBatchItemSnapshot,
  type CanvasLayoutReplaceBatchSnapshot,
} from "@/services/canvas";
import { useCanvasStore } from "@/store/canvas";
import type { CanvasNode, Size } from "@/types/canvas";

const MAX_BATCH_SOURCES = 5;
const ACTIVE_BATCH_STATUSES = new Set(["pending", "running"]);

type CanvasLayoutReplaceBatchDialogProps = {
  costLabel?: string | null;
  onOpenChange: (open: boolean) => void;
  open: boolean;
  primaryNode: CanvasNode;
};

function isHttpImageUrl(value: unknown) {
  return /^https?:\/\//i.test(String(value || "").trim());
}

function buildInitialSources(
  primaryNode: CanvasNode,
  nodes: CanvasNode[],
  selectedNodeIds: string[]
) {
  const selectedById = new Map(nodes.map((node) => [node.id, node]));
  const orderedIds = [primaryNode.id, ...selectedNodeIds.filter((id) => id !== primaryNode.id)];
  const sources: LayoutReplaceSource[] = [];
  const seen = new Set<string>();
  for (const id of orderedIds) {
    const node = id === primaryNode.id ? primaryNode : selectedById.get(id);
    if (!node) continue;
    const source = getReadyCanvasLayoutReplaceSource(node);
    if (!source) continue;
    const identity = getLayoutReplaceSourceIdentity(source);
    if (seen.has(identity)) continue;
    seen.add(identity);
    sources.push(source);
    if (sources.length >= MAX_BATCH_SOURCES) break;
  }
  return sources;
}

function sourcesFromBatch(batch: CanvasLayoutReplaceBatchSnapshot) {
  return batch.items.map((item) => ({
    id: item.sourceNodeId ? `canvas:${item.sourceNodeId}` : `upload:${item.id}`,
    imageUrl: item.sourceImageUrl,
    kind: item.sourceKind === "upload" ? ("upload" as const) : ("canvas" as const),
    nodeId: item.sourceNodeId || undefined,
    title: item.sourceTitle || `图片 ${item.position}`,
  }));
}

function getBatchStatusLabel(status: string) {
  if (status === "succeeded") return "全部完成";
  if (status === "partial_failed") return "部分失败";
  if (status === "failed") return "处理失败";
  if (status === "running") return "处理中";
  return "排队中";
}

function getItemStatusLabel(item: CanvasLayoutReplaceBatchItemSnapshot) {
  if (item.status === "succeeded") return item.addedToCanvas ? "已加入画布" : "生成完成";
  if (item.status === "failed") return "生成失败";
  if (item.status === "running") return "正在生成";
  return "排队中";
}

async function resolveImageSize(url: string, fallback: Size) {
  if (typeof window === "undefined") return fallback;
  return new Promise<Size>((resolve) => {
    const image = new window.Image();
    const timeout = window.setTimeout(() => resolve(fallback), 6000);
    image.onload = () => {
      window.clearTimeout(timeout);
      const naturalWidth = image.naturalWidth || fallback.width;
      const naturalHeight = image.naturalHeight || fallback.height;
      const width = Math.max(180, Math.min(720, fallback.width || 360));
      resolve({
        width,
        height: Math.max(120, Math.min(1000, Math.round((width * naturalHeight) / naturalWidth))),
      });
    };
    image.onerror = () => {
      window.clearTimeout(timeout);
      resolve(fallback);
    };
    image.src = buildImageProxyUrl(url, { delivery: "proxy" });
  });
}

export function CanvasLayoutReplaceBatchDialog({
  costLabel,
  onOpenChange,
  open,
  primaryNode,
}: CanvasLayoutReplaceBatchDialogProps) {
  const allNodes = useCanvasStore((state) => state.nodes);
  const selectedNodeIds = useCanvasStore((state) => state.selectedNodeIds);
  const projectId = useCanvasStore((state) => state.projectId);
  const addNode = useCanvasStore((state) => state.addNode);
  const selectNodes = useCanvasStore((state) => state.selectNodes);
  const canvasImageSelectionSession = useCanvasStore(
    (state) => state.canvasImageSelectionSession
  );
  const startCanvasImageSelection = useCanvasStore(
    (state) => state.startCanvasImageSelection
  );
  const endCanvasImageSelection = useCanvasStore(
    (state) => state.endCanvasImageSelection
  );
  const sourceUploadInputRef = useRef<HTMLInputElement>(null);
  const referenceUploadInputRef = useRef<HTMLInputElement>(null);
  const seenSucceededItemIdsRef = useRef(new Set<string>());
  const [sources, setSources] = useState<LayoutReplaceSource[]>(() =>
    buildInitialSources(primaryNode, allNodes, selectedNodeIds)
  );
  const [referenceImageUrl, setReferenceImageUrl] = useState("");
  const [supplementalPrompt, setSupplementalPrompt] = useState("");
  const [batch, setBatch] = useState<CanvasLayoutReplaceBatchSnapshot | null>(null);
  const [selectedResultIds, setSelectedResultIds] = useState<Set<string>>(new Set());
  const [isLoadingBatch, setIsLoadingBatch] = useState(false);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isUploadingSources, setIsUploadingSources] = useState(false);
  const [isUploadingReference, setIsUploadingReference] = useState(false);
  const [isAddingResults, setIsAddingResults] = useState(false);
  const [retryingItemId, setRetryingItemId] = useState<string | null>(null);

  const readyCanvasSources = useMemo(
    () =>
      allNodes
        .map(getReadyCanvasLayoutReplaceSource)
        .filter(Boolean) as LayoutReplaceSource[],
    [allNodes]
  );
  const activeCanvasImageSelectionSession =
    canvasImageSelectionSession?.ownerNodeId === primaryNode.id
      ? canvasImageSelectionSession
      : null;
  const successfulItems = useMemo(
    () => batch?.items.filter((item) => item.status === "succeeded" && item.resultImageUrl) || [],
    [batch]
  );
  const batchIsActive = Boolean(batch && ACTIVE_BATCH_STATUSES.has(batch.status));
  const terminalItemCount = batch
    ? batch.items.filter((item) => item.status === "succeeded" || item.status === "failed").length
    : 0;
  const batchProgress = batch
    ? Math.round((terminalItemCount / Math.max(1, batch.totalCount)) * 100)
    : 0;

  const applyBatchSnapshot = useCallback((nextBatch: CanvasLayoutReplaceBatchSnapshot) => {
    setBatch(nextBatch);
    setSources(sourcesFromBatch(nextBatch));
    setReferenceImageUrl(nextBatch.referenceImageUrl);
    setSupplementalPrompt(nextBatch.supplementalPrompt || "");
    const newlySucceeded = nextBatch.items
      .filter(
        (item) =>
          item.status === "succeeded" &&
          !item.addedToCanvas &&
          !seenSucceededItemIdsRef.current.has(item.id)
      )
      .map((item) => item.id);
    if (newlySucceeded.length > 0) {
      setSelectedResultIds((current) => new Set([...current, ...newlySucceeded]));
    }
    nextBatch.items
      .filter((item) => item.status === "succeeded")
      .forEach((item) => seenSucceededItemIdsRef.current.add(item.id));
  }, []);

  const loadBatch = useCallback(
    async (batchId: string) => {
      const result = await imageGenerationService.getLayoutReplaceBatch(batchId);
      if (result.success && result.data?.batch) {
        applyBatchSnapshot(result.data.batch);
        return result.data.batch;
      }
      return null;
    },
    [applyBatchSnapshot]
  );

  useEffect(() => {
    if (!open) return;
    const currentCanvas = useCanvasStore.getState();
    const currentPrimaryNode =
      currentCanvas.nodes.find((node) => node.id === primaryNode.id) || primaryNode;
    const initialSources = buildInitialSources(
      currentPrimaryNode,
      currentCanvas.nodes,
      currentCanvas.selectedNodeIds
    );
    setSources(initialSources);
    setSelectedResultIds(new Set());
    seenSucceededItemIdsRef.current = new Set();
    if (!projectId) {
      setBatch(null);
      return;
    }

    let cancelled = false;
    setIsLoadingBatch(true);
    void imageGenerationService
      .getLatestLayoutReplaceBatch({ projectId, sourceNodeId: primaryNode.id })
      .then((result) => {
        if (cancelled) return;
        if (result.success && result.data?.batch) {
          applyBatchSnapshot(result.data.batch);
        } else {
          setBatch(null);
        }
      })
      .finally(() => {
        if (!cancelled) setIsLoadingBatch(false);
      });
    return () => {
      cancelled = true;
    };
  }, [applyBatchSnapshot, open, primaryNode.id, projectId]);

  useEffect(
    () => () => {
      endCanvasImageSelection(primaryNode.id);
    },
    [endCanvasImageSelection, primaryNode.id]
  );

  useEffect(() => {
    if (!activeCanvasImageSelectionSession) return;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key !== "Escape") return;
      event.preventDefault();
      endCanvasImageSelection(primaryNode.id);
    };
    window.addEventListener("keydown", handleKeyDown, true);
    return () => window.removeEventListener("keydown", handleKeyDown, true);
  }, [activeCanvasImageSelectionSession, endCanvasImageSelection, primaryNode.id]);

  useEffect(() => {
    if (!open || !batch?.id || !batchIsActive) return;
    const interval = window.setInterval(() => {
      void loadBatch(batch.id);
    }, 2500);
    return () => window.clearInterval(interval);
  }, [batch?.id, batchIsActive, loadBatch, open]);

  const startNewBatchDraft = useCallback(() => {
    setBatch(null);
    setSelectedResultIds(new Set());
    seenSucceededItemIdsRef.current = new Set();
    setSources(buildInitialSources(primaryNode, allNodes, selectedNodeIds));
  }, [allNodes, primaryNode, selectedNodeIds]);

  const removeSource = useCallback((sourceId: string) => {
    setSources((current) => current.filter((source) => source.id !== sourceId));
  }, []);

  const startCanvasSourceSelection = useCallback(() => {
    if (canvasImageSelectionSession) return;
    const remainingCount = MAX_BATCH_SOURCES - sources.length;
    if (remainingCount <= 0) {
      toast.info(`最多添加 ${MAX_BATCH_SOURCES} 张图片`);
      return;
    }
    const availableSources = getAvailableCanvasLayoutReplaceSources(
      readyCanvasSources,
      sources
    );
    if (availableSources.length === 0) {
      toast.info("画布中暂无其他可添加的图片");
      return;
    }
    startCanvasImageSelection({
      ownerNodeId: primaryNode.id,
      allowedNodeIds: availableSources.flatMap((source) =>
        source.nodeId ? [source.nodeId] : []
      ),
      maxCount: remainingCount,
    });
  }, [
    canvasImageSelectionSession,
    primaryNode.id,
    readyCanvasSources,
    sources,
    startCanvasImageSelection,
  ]);

  const cancelCanvasSourceSelection = useCallback(() => {
    endCanvasImageSelection(primaryNode.id);
  }, [endCanvasImageSelection, primaryNode.id]);

  const confirmCanvasSourceSelection = useCallback(() => {
    if (!activeCanvasImageSelectionSession) return;
    const selectedIds = new Set(activeCanvasImageSelectionSession.selectedNodeIds);
    const selectedSources = readyCanvasSources.filter(
      (source) => source.nodeId && selectedIds.has(source.nodeId)
    );
    if (selectedSources.length === 0) return;
    setSources((current) => {
      return mergeUniqueLayoutReplaceSources(
        current,
        selectedSources,
        MAX_BATCH_SOURCES
      );
    });
    endCanvasImageSelection(primaryNode.id);
    toast.success(`已从画布添加 ${selectedSources.length} 张图片`);
  }, [
    activeCanvasImageSelectionSession,
    endCanvasImageSelection,
    primaryNode.id,
    readyCanvasSources,
  ]);

  const handleSourceUpload = useCallback(
    async (event: React.ChangeEvent<HTMLInputElement>) => {
      const files = Array.from(event.currentTarget.files || []).filter((file) =>
        file.type.startsWith("image/")
      );
      event.currentTarget.value = "";
      const remaining = Math.max(0, MAX_BATCH_SOURCES - sources.length);
      if (remaining === 0 || files.length === 0) return;
      const selectedFiles = files.slice(0, remaining);
      if (selectedFiles.length < files.length) {
        toast.info(`最多添加 ${MAX_BATCH_SOURCES} 张图片`);
      }

      setIsUploadingSources(true);
      try {
        const uploaded: LayoutReplaceSource[] = [];
        for (const file of selectedFiles) {
          const result = await imageGenerationService.uploadImage(file);
          if (!result.success || !result.data?.url) {
            throw new Error(result.error || `${file.name} 上传失败`);
          }
          uploaded.push({
            id: `upload:${crypto.randomUUID()}`,
            imageUrl: result.data.url,
            kind: "upload",
            title: file.name.replace(/\.[^.]+$/, "") || "上传图片",
          });
        }
        setSources((current) => {
          return mergeUniqueLayoutReplaceSources(
            current,
            uploaded,
            MAX_BATCH_SOURCES
          );
        });
        toast.success(`已上传 ${uploaded.length} 张图片`);
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "图片上传失败");
      } finally {
        setIsUploadingSources(false);
      }
    },
    [sources.length]
  );

  const handleReferenceUpload = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.currentTarget.files?.[0];
    event.currentTarget.value = "";
    if (!file || !file.type.startsWith("image/")) return;
    setIsUploadingReference(true);
    try {
      const result = await imageGenerationService.uploadImage(file);
      if (!result.success || !result.data?.url) {
        throw new Error(result.error || "目标模版图上传失败");
      }
      setReferenceImageUrl(result.data.url);
      toast.success("目标模版图已上传");
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "目标模版图上传失败");
    } finally {
      setIsUploadingReference(false);
    }
  }, []);

  const handleSubmit = useCallback(async () => {
    if (!projectId) {
      toast.error("当前画布尚未保存，无法创建批次");
      return;
    }
    if (sources.length === 0) {
      toast.error("请至少添加一张待处理图片");
      return;
    }
    if (!isHttpImageUrl(referenceImageUrl)) {
      toast.error("请上传目标模版图");
      return;
    }
    if (isSubmitting || isUploadingSources || isUploadingReference) return;

    setIsSubmitting(true);
    try {
      const result = await imageGenerationService.createLayoutReplaceBatch({
        projectId,
        sources: sources.map((source) => ({
          sourceImageUrl: source.imageUrl,
          sourceKind: source.kind,
          sourceNodeId: source.nodeId,
          sourceTitle: source.title,
        })),
        referenceImageUrl,
        supplementalPrompt,
        imageSize: "2K",
      });
      if (!result.success || !result.data?.batchId) {
        throw new Error(result.error || "创建批次失败");
      }
      const nextBatch = await loadBatch(result.data.batchId);
      if (!nextBatch) throw new Error("批次已创建，但状态读取失败");
      toast.success(`已提交 ${sources.length} 张图片，正在顺序处理`);
    } catch (error) {
      toast.error(error instanceof Error ? error.message : "创建批次失败");
    } finally {
      setIsSubmitting(false);
    }
  }, [
    isSubmitting,
    isUploadingReference,
    isUploadingSources,
    loadBatch,
    projectId,
    referenceImageUrl,
    sources,
    supplementalPrompt,
  ]);

  const addItemsToCanvas = useCallback(
    async (items: CanvasLayoutReplaceBatchItemSnapshot[]) => {
      if (!batch || items.length === 0 || isAddingResults) return;
      setIsAddingResults(true);
      try {
        const created: Array<{ itemId: string; canvasNodeId: string }> = [];
        for (const [index, item] of items.entries()) {
          if (!item.resultImageUrl || item.addedToCanvas) continue;
          const sourceNode = allNodes.find((candidate) => candidate.id === item.sourceNodeId);
          const anchor = sourceNode || primaryNode;
          const resultSize = await resolveImageSize(item.resultImageUrl, anchor.size);
          const canvasNodeId = addNode({
            type: "image",
            position: {
              x: anchor.position.x + anchor.size.width + 20,
              y: anchor.position.y + index * 24,
            },
            size: resultSize,
            data: {
              src: item.resultImageUrl,
              thumbnailUrl: item.resultThumbnailUrl || item.resultImageUrl,
              status: "completed",
              prompt: "批量排版替换结果",
              title: `${item.sourceTitle || `图片 ${item.position}`}-排版替换`,
              originalSrc: item.sourceImageUrl,
              model: item.resultModelId || undefined,
              metadata: {
                editMode: "layout-replace",
                batchId: batch.id,
                batchItemId: item.id,
                taskId: item.taskId,
                sourceNodeId: item.sourceNodeId,
                layoutReferenceUrl: batch.referenceImageUrl,
                layoutReplaceCompletedAt: new Date().toISOString(),
              },
            },
            connections: item.sourceNodeId ? [item.sourceNodeId] : [],
          });
          created.push({ itemId: item.id, canvasNodeId });
        }
        if (created.length === 0) return;
        selectNodes(created.map((item) => item.canvasNodeId));
        const marked = await imageGenerationService.markLayoutReplaceBatchItemsAdded({
          batchId: batch.id,
          items: created,
        });
        if (!marked.success) {
          toast.warning("结果已加入画布，但同步批次状态失败");
        }
        await loadBatch(batch.id);
        setSelectedResultIds((current) => {
          const next = new Set(current);
          created.forEach((item) => next.delete(item.itemId));
          return next;
        });
        toast.success(`已将 ${created.length} 张结果加入画布`);
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "添加到画布失败");
      } finally {
        setIsAddingResults(false);
      }
    },
    [addNode, allNodes, batch, isAddingResults, loadBatch, primaryNode, selectNodes]
  );

  const selectedSuccessfulItems = successfulItems.filter(
    (item) => selectedResultIds.has(item.id) && !item.addedToCanvas
  );

  const retryItem = useCallback(
    async (item: CanvasLayoutReplaceBatchItemSnapshot) => {
      if (!batch || batchIsActive || retryingItemId) return;
      setRetryingItemId(item.id);
      try {
        const result = await imageGenerationService.retryLayoutReplaceBatchItem({
          batchId: batch.id,
          itemId: item.id,
        });
        if (!result.success) throw new Error(result.error || "重试失败");
        await loadBatch(batch.id);
        toast.success("已重新加入生成队列");
      } catch (error) {
        toast.error(error instanceof Error ? error.message : "重试失败");
      } finally {
        setRetryingItemId(null);
      }
    },
    [batch, batchIsActive, loadBatch, retryingItemId]
  );

  return (
    <>
      <Dialog
        onOpenChange={(nextOpen) => {
          if (!activeCanvasImageSelectionSession) onOpenChange(nextOpen);
        }}
        open={open && !activeCanvasImageSelectionSession}
      >
        <DialogContent className="flex max-h-[calc(100dvh-1rem)] w-[calc(100vw-1rem)] max-w-[1180px] flex-col gap-0 overflow-hidden p-0 sm:max-h-[calc(100dvh-2rem)] sm:w-[calc(100vw-2rem)]">
        <DialogHeader className="shrink-0 border-b px-4 py-3 pr-12 text-left sm:px-6 sm:py-4">
          <div className="flex flex-wrap items-center justify-between gap-3">
            <DialogTitle className="flex items-center gap-2 text-base">
              <LayoutTemplate className="h-4 w-4" />
              AI 模版替换
            </DialogTitle>
            {batch ? (
              <div className="flex items-center gap-2 text-xs text-muted-foreground">
                <span>{getBatchStatusLabel(batch.status)}</span>
                <span>{terminalItemCount}/{batch.totalCount}</span>
              </div>
            ) : null}
          </div>
          <DialogDescription className="sr-only">
            最多选择五张图片，按照目标模版顺序生成并添加到画布
          </DialogDescription>
        </DialogHeader>

        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-4 sm:px-6">
          {isLoadingBatch ? (
            <div className="flex min-h-[360px] items-center justify-center">
              <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
            </div>
          ) : (
            <div className="space-y-5">
              <div className="grid gap-5 xl:grid-cols-[minmax(0,1fr)_360px]">
                <section className="min-w-0 space-y-3">
                  <div className="flex flex-wrap items-center justify-between gap-2">
                    <Label>待处理图片 {sources.length}/{MAX_BATCH_SOURCES}</Label>
                    {!batch ? (
                      <div className="flex items-center gap-2">
                        <Button
                          disabled={
                            sources.length >= MAX_BATCH_SOURCES ||
                            Boolean(canvasImageSelectionSession)
                          }
                          onClick={startCanvasSourceSelection}
                          size="sm"
                          type="button"
                          variant="outline"
                        >
                          <Images className="mr-1.5 h-4 w-4" />
                          从画布中添加
                        </Button>
                        <input
                          accept="image/*"
                          className="hidden"
                          multiple
                          onChange={(event) => void handleSourceUpload(event)}
                          ref={sourceUploadInputRef}
                          type="file"
                        />
                        <Button
                          disabled={isUploadingSources || sources.length >= MAX_BATCH_SOURCES}
                          onClick={() => sourceUploadInputRef.current?.click()}
                          size="sm"
                          type="button"
                          variant="outline"
                        >
                          {isUploadingSources ? (
                            <Loader2 className="mr-1.5 h-4 w-4 animate-spin" />
                          ) : (
                            <Upload className="mr-1.5 h-4 w-4" />
                          )}
                          上传图片
                        </Button>
                      </div>
                    ) : null}
                  </div>

                  <div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-5">
                    {Array.from({ length: MAX_BATCH_SOURCES }, (_, index) => {
                      const source = sources[index];
                      return (
                        <div
                          className="relative aspect-square min-w-0 overflow-hidden rounded-md border bg-muted/25"
                          key={source?.id || `empty-${index}`}
                        >
                          <span className="absolute left-1.5 top-1.5 z-10 flex h-5 min-w-5 items-center justify-center rounded bg-black/65 px-1 text-[10px] text-white">
                            {index + 1}
                          </span>
                          {source ? (
                            <>
                              <img
                                alt={source.title}
                                className="h-full w-full object-cover"
                                src={buildImageProxyUrl(source.imageUrl, { width: 240 })}
                              />
                              {!batch && index > 0 ? (
                                <button
                                  aria-label={`移除第 ${index + 1} 张图片`}
                                  className="absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center rounded-md bg-black/65 text-white hover:bg-black/80"
                                  onClick={() => removeSource(source.id)}
                                  type="button"
                                >
                                  <Trash2 className="h-3.5 w-3.5" />
                                </button>
                              ) : null}
                              <div className="absolute inset-x-0 bottom-0 truncate bg-black/65 px-2 py-1.5 text-[11px] text-white">
                                {source.title}
                              </div>
                            </>
                          ) : (
                            <button
                              aria-label={`添加第 ${index + 1} 张图片`}
                              className="flex h-full w-full items-center justify-center text-muted-foreground hover:bg-muted/50"
                              disabled={Boolean(batch)}
                              onClick={() => sourceUploadInputRef.current?.click()}
                              type="button"
                            >
                              <Plus className="h-5 w-5" />
                            </button>
                          )}
                        </div>
                      );
                    })}
                  </div>

                  <div className="space-y-2">
                    <Label htmlFor={`layout-batch-prompt-${primaryNode.id}`}>补充要求</Label>
                    <Textarea
                      className="min-h-[88px] max-h-[180px]"
                      disabled={Boolean(batch)}
                      id={`layout-batch-prompt-${primaryNode.id}`}
                      onChange={(event) => setSupplementalPrompt(event.currentTarget.value)}
                      placeholder="可选，只写产品替换细节"
                      value={supplementalPrompt}
                    />
                  </div>
                </section>

                <section className="min-w-0 space-y-2">
                  <Label htmlFor={`layout-batch-reference-${primaryNode.id}`}>目标模版图</Label>
                  <Input
                    disabled={Boolean(batch)}
                    id={`layout-batch-reference-${primaryNode.id}`}
                    onChange={(event) => setReferenceImageUrl(event.currentTarget.value)}
                    placeholder="https://..."
                    value={referenceImageUrl}
                  />
                  <input
                    accept="image/*"
                    className="hidden"
                    onChange={(event) => void handleReferenceUpload(event)}
                    ref={referenceUploadInputRef}
                    type="file"
                  />
                  <button
                    className="flex h-[clamp(180px,34dvh,360px)] w-full items-center justify-center overflow-hidden rounded-md border border-dashed bg-muted/20"
                    disabled={Boolean(batch) || isUploadingReference}
                    onClick={() => referenceUploadInputRef.current?.click()}
                    type="button"
                  >
                    {isUploadingReference ? (
                      <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
                    ) : isHttpImageUrl(referenceImageUrl) ? (
                      <img
                        alt="目标模版图"
                        className="h-full w-full object-contain"
                        src={buildImageProxyUrl(referenceImageUrl, { width: 720 })}
                      />
                    ) : (
                      <div className="flex flex-col items-center gap-2 text-muted-foreground">
                        <ImagePlus className="h-6 w-6" />
                        <span className="text-xs">上传目标模版图</span>
                      </div>
                    )}
                  </button>
                </section>
              </div>

              {batch ? (
                <section className="space-y-3 border-t pt-5">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div className="space-y-1">
                      <Label>生成结果</Label>
                      <div className="text-xs text-muted-foreground">
                        {getBatchStatusLabel(batch.status)} · {terminalItemCount}/{batch.totalCount}
                      </div>
                    </div>
                    {!batchIsActive ? (
                      <Button onClick={startNewBatchDraft} size="sm" type="button" variant="outline">
                        <Plus className="mr-1.5 h-4 w-4" />
                        新建批次
                      </Button>
                    ) : null}
                  </div>
                  <Progress className="h-1.5" value={batchProgress} />
                  <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
                    {batch.items.map((item) => {
                      const canAdd = item.status === "succeeded" && Boolean(item.resultImageUrl) && !item.addedToCanvas;
                      const checked = selectedResultIds.has(item.id);
                      return (
                        <div className="overflow-hidden rounded-md border" key={item.id}>
                          <div className="grid grid-cols-2 gap-px bg-border">
                            <div className="aspect-square bg-muted">
                              <img
                                alt={item.sourceTitle || `图片 ${item.position}`}
                                className="h-full w-full object-cover"
                                src={buildImageProxyUrl(item.sourceImageUrl, { width: 280 })}
                              />
                            </div>
                            <div className="relative flex aspect-square items-center justify-center bg-muted/40">
                              {item.resultImageUrl ? (
                                <img
                                  alt={`结果 ${item.position}`}
                                  className="h-full w-full object-cover"
                                  src={buildImageProxyUrl(item.resultThumbnailUrl || item.resultImageUrl, { width: 280 })}
                                />
                              ) : item.status === "failed" ? (
                                <CircleAlert className="h-6 w-6 text-destructive" />
                              ) : item.status === "running" ? (
                                <Loader2 className="h-6 w-6 animate-spin text-primary" />
                              ) : (
                                <Loader2 className="h-5 w-5 text-muted-foreground" />
                              )}
                              {canAdd ? (
                                <label className="absolute right-2 top-2 flex h-6 w-6 items-center justify-center rounded bg-background/90 shadow-sm">
                                  <input
                                    checked={checked}
                                    className="h-4 w-4"
                                    onChange={(event) => {
                                      setSelectedResultIds((current) => {
                                        const next = new Set(current);
                                        if (event.currentTarget.checked) next.add(item.id);
                                        else next.delete(item.id);
                                        return next;
                                      });
                                    }}
                                    type="checkbox"
                                  />
                                </label>
                              ) : null}
                            </div>
                          </div>
                          <div className="flex min-h-12 items-center justify-between gap-2 px-3 py-2">
                            <div className="min-w-0">
                              <div className="truncate text-xs font-medium">
                                {item.sourceTitle || `图片 ${item.position}`}
                              </div>
                              <div
                                className={cn(
                                  "text-[11px] text-muted-foreground",
                                  item.status === "failed" && "text-destructive"
                                )}
                              >
                                {getItemStatusLabel(item)}
                              </div>
                            </div>
                            {canAdd ? (
                              <Button
                                disabled={isAddingResults}
                                onClick={() => void addItemsToCanvas([item])}
                                size="sm"
                                type="button"
                                variant="outline"
                              >
                                加入画布
                              </Button>
                            ) : item.status === "failed" && !batchIsActive ? (
                              <Button
                                disabled={Boolean(retryingItemId)}
                                onClick={() => void retryItem(item)}
                                size="sm"
                                type="button"
                                variant="outline"
                              >
                                {retryingItemId === item.id ? (
                                  <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
                                ) : (
                                  <RefreshCw className="mr-1.5 h-3.5 w-3.5" />
                                )}
                                重试
                              </Button>
                            ) : null}
                          </div>
                          {item.error ? (
                            <div className="border-t px-3 py-2 text-xs text-destructive">
                              {item.error}
                            </div>
                          ) : null}
                        </div>
                      );
                    })}
                  </div>
                </section>
              ) : null}
            </div>
          )}
        </div>

        <DialogFooter className="shrink-0 gap-2 border-t bg-background px-4 py-3 sm:px-6">
          <Button onClick={() => onOpenChange(false)} type="button" variant="outline">
            关闭
          </Button>
          {batch ? (
            <Button
              disabled={selectedSuccessfulItems.length === 0 || isAddingResults}
              onClick={() => void addItemsToCanvas(selectedSuccessfulItems)}
              type="button"
            >
              {isAddingResults ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <Images className="mr-2 h-4 w-4" />
              )}
              添加所选到画布 ({selectedSuccessfulItems.length})
            </Button>
          ) : (
            <Button
              disabled={
                sources.length === 0 ||
                !isHttpImageUrl(referenceImageUrl) ||
                isSubmitting ||
                isUploadingReference ||
                isUploadingSources
              }
              onClick={() => void handleSubmit()}
              type="button"
            >
              {isSubmitting ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : (
                <LayoutTemplate className="mr-2 h-4 w-4" />
              )}
              批量处理 {sources.length} 张
              {costLabel ? (
                <span className="ml-1 rounded-full bg-white/18 px-1.5 py-0.5 text-[10px] text-white">
                  {sources.length} × {costLabel}
                </span>
              ) : null}
            </Button>
          )}
        </DialogFooter>
        </DialogContent>
      </Dialog>
      {activeCanvasImageSelectionSession && typeof document !== "undefined"
        ? createPortal(
            <div
              className="pointer-events-none fixed inset-x-0 bottom-4 z-[10020] flex justify-center px-3 sm:bottom-6"
              data-canvas-layout-replace-picker="true"
            >
              <div
                className="pointer-events-auto flex w-full max-w-[720px] flex-wrap items-center gap-2 rounded-lg border border-border bg-background px-3 py-2.5 shadow-2xl sm:flex-nowrap sm:px-4"
                data-canvas-overlay="true"
              >
                <div className="flex min-w-0 flex-1 items-center gap-2">
                  <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-[#168cff] text-white">
                    <Images className="h-4 w-4" />
                  </span>
                  <div className="min-w-0">
                    <div className="truncate text-sm font-medium">选择画布图片</div>
                    <div className="truncate text-xs text-muted-foreground">
                      已选 {activeCanvasImageSelectionSession.selectedNodeIds.length}/
                      {activeCanvasImageSelectionSession.maxCount}
                    </div>
                  </div>
                </div>
                <Button
                  onClick={cancelCanvasSourceSelection}
                  size="sm"
                  type="button"
                  variant="outline"
                >
                  取消
                </Button>
                <Button
                  disabled={activeCanvasImageSelectionSession.selectedNodeIds.length === 0}
                  onClick={confirmCanvasSourceSelection}
                  size="sm"
                  type="button"
                >
                  确认添加到图片卡槽
                </Button>
              </div>
            </div>,
            document.body
          )
        : null}
    </>
  );
}