import { useEffect, useMemo, useRef, useState } from "react";
import {
  ArrowLeft,
  Check,
  ChevronDown,
  ChevronRight,
  Clapperboard,
  Download,
  FileVideo2,
  ImagePlus,
  LibraryBig,
  Package,
  RefreshCw,
  Replace,
  ScanLine,
  ShieldCheck,
  Upload,
  UserRound,
  X,
} from "lucide-react";
import { api, ApiError } from "../api";
import { OverlayPortal, useBodyScrollLock } from "../components/overlays";
import { useFileDrop } from "../components/use-file-drop";
import {
  DEFAULT_BILLING_RATES,
  IMAGE_TYPES,
  MAX_IMAGES,
  checkRefFile,
  estimateCost,
  isInFlight,
  type BillingRates,
} from "../components/free-create/constants";
import type { FreeVideoRef, FreeVideoTask, ModelConfig, ModelEntity, Product } from "../types";
import type { NavigateFn } from "./route-config";

const JOB_KEY = "airshelf:video-replace-job";
const MODE_KEY = "airshelf:video-replace-mode";
const CHARACTER_MARK = "[视频复刻·角色]";
const VIDEO_ACCEPT = "video/mp4,video/quicktime";
// 复刻固定 Seedance 2.5:参考视频只用来提炼分镜稿,成片最长 30 秒。
const REPLACE_SEEDANCE_MODEL = "doubao-seedance-2-5-260628";
/** 与后端 DIGEST_VISION_MODEL_NAME 一致:商品复刻拆镜用 Gemini。 */
const DIGEST_GEMINI_MODEL = "gemini-3.1-pro-preview";
const DIGEST_POINTS_FALLBACK = 30;
const PRODUCT_SOURCE_PURPOSE = "video_replace_product";
const REF_SECONDS_MAX = { product: 30, character: 30 } as const;
const REF_BYTES_MAX = { product: 200 * 1024 * 1024, character: 200 * 1024 * 1024 } as const;
const SEEDANCE_MAX_OUTPUT_SECONDS = 30;
// 第 3 步补充信息上限,与后端 MAX_SUBJECT_BRIEF 保持一致
const SUBJECT_BRIEF_MAX = 500;
type ProductSource = "library" | "temporary" | "";
type ReplaceMode = "product" | "character";

const REPLACE_MODE_COPY = {
  product: {
    modeLabel: "商品复刻",
    targetLabel: "商品",
    targetStep: "2. 选择自己的商品",
    videoEmpty: "系统会先把参考视频拆成分镜稿，再照着它换成你的商品",
    videoReady: "视频已就绪，将先提炼分镜稿再出片",
    libraryTitle: "从商品库选择",
    libraryEmpty: "选择已创建的商品",
    temporaryTitle: "临时上传素材",
    temporaryEmpty: "仅用于本次任务 · 最多 9 张",
    temporaryNoun: "商品图",
    temporaryFallback: "临时商品素材",
    generatingTitle: "正在进行商品复刻",
    generatingCopy: "正在按分镜稿出片，并换上你的商品",
    reviewingTitle: "正在审核参考素材",
    reviewingCopy: "参考图需先通过合规审核，通过后自动开始复刻",
    digestingTitle: "正在提炼参考视频",
    digestingCopy: "逐镜拆解景别、运镜、节奏与口播，拆完自动开始复刻",
    resultTitle: "商品复刻已完成",
    resultPreview: "商品复刻预览",
    consistency: "商品一致性检查通过",
    drawerTitle: "选择商品",
    drawerDescription: "从已经创建的商品中选择一个用于本次视频复刻。",
    drawerEmpty: "还没有商品，先去商品库创建一个",
    historyKind: "商品",
    pickToast: "已选择商品",
    briefStep: "3. 商品信息",
    briefOptional: "选填 · 填了更准",
    briefPlaceholder: "例：素颜霜，膏体按压泵，主打提亮和保湿，适合日常通勤",
    briefHint: "填写商品名称、品类和卖点后，口播和使用动作会按真实用途来写；不填则只按参考图的外观拍。",
  },
  character: {
    modeLabel: "角色复刻",
    targetLabel: "角色",
    targetStep: "2. 选择自己的角色",
    videoEmpty: "系统会先把参考视频拆成分镜稿，再照着它换成你的角色",
    videoReady: "视频已就绪，将先提炼分镜稿再出片",
    libraryTitle: "从人物库选择",
    libraryEmpty: "选择已创建的人物",
    temporaryTitle: "临时上传角色",
    temporaryEmpty: "仅用于本次任务 · 最多 9 张参考图",
    temporaryNoun: "角色参考图",
    temporaryFallback: "临时角色素材",
    generatingTitle: "正在进行角色复刻",
    generatingCopy: "正在按分镜稿出片，并换上你的角色",
    reviewingTitle: "正在审核参考素材",
    reviewingCopy: "参考图需先通过合规审核，通过后自动开始复刻",
    digestingTitle: "正在提炼参考视频",
    digestingCopy: "逐镜拆解景别、运镜、节奏与口播，拆完自动开始复刻",
    resultTitle: "角色复刻已完成",
    resultPreview: "角色复刻预览",
    consistency: "角色一致性检查通过",
    drawerTitle: "选择模特",
    drawerDescription: "从人物库中选择一个角色用于本次视频复刻。",
    drawerEmpty: "还没有人物，先去模特库添加",
    historyKind: "角色",
    pickToast: "已选择角色",
  },
} as const;

function readJobId() {
  try {
    return localStorage.getItem(JOB_KEY) || "";
  } catch {
    return "";
  }
}

function rememberJob(id: string) {
  try {
    localStorage.setItem(JOB_KEY, id);
  } catch {
    /* 无痕模式忽略 */
  }
}

function forgetJob() {
  try {
    localStorage.removeItem(JOB_KEY);
  } catch {
    /* 无痕模式忽略 */
  }
}

function readReplaceMode(): ReplaceMode {
  try {
    const stored = localStorage.getItem(MODE_KEY);
    if (stored === "character" || stored === "product") return stored;
  } catch {
    /* 无痕模式忽略 */
  }
  return "product";
}

function rememberReplaceMode(mode: ReplaceMode) {
  try {
    localStorage.setItem(MODE_KEY, mode);
  } catch {
    /* 无痕模式忽略 */
  }
}

function fileKey(file: File) {
  return `${file.name}:${file.size}:${file.lastModified}`;
}

function ratioFromSize(width: number, height: number) {
  if (!width || !height) return "9:16";
  const r = width / height;
  if (Math.abs(r - 9 / 16) < 0.08) return "9:16";
  if (Math.abs(r - 16 / 9) < 0.08) return "16:9";
  if (Math.abs(r - 1) < 0.08) return "1:1";
  if (Math.abs(r - 3 / 4) < 0.08) return "3:4";
  if (Math.abs(r - 4 / 3) < 0.08) return "4:3";
  if (Math.abs(r - 21 / 9) < 0.12) return "21:9";
  return width > height ? "16:9" : "9:16";
}

function ratioCopy(ratio: string) {
  if (ratio === "9:16") return "竖屏 9:16";
  if (ratio === "16:9") return "横屏 16:9";
  return ratio;
}

function formatClock(seconds: number) {
  const total = Math.max(0, Math.round(Number(seconds) || 0));
  const minutes = Math.floor(total / 60);
  const rest = total % 60;
  return `${String(minutes).padStart(2, "0")}:${String(rest).padStart(2, "0")}`;
}

function clampDuration(seconds: number) {
  const rounded = Math.round(Number(seconds) || SEEDANCE_MAX_OUTPUT_SECONDS);
  return Math.min(SEEDANCE_MAX_OUTPUT_SECONDS, Math.max(4, rounded || SEEDANCE_MAX_OUTPUT_SECONDS));
}

function isCharacterRemix(task?: Partial<FreeVideoTask> | null) {
  if (task?.replace_mode === "character") return true;
  if (task?.replace_mode === "product") return false;
  return (task?.prompt || "").startsWith(CHARACTER_MARK);
}

function modeFromTask(task?: Partial<FreeVideoTask> | null): ReplaceMode {
  return isCharacterRemix(task) ? "character" : "product";
}

function subjectNameFromTask(task?: Partial<FreeVideoTask> | null) {
  const named = (task?.subject_name || "").trim();
  if (named) return named;
  const match = (task?.prompt || "").match(/(?:商品|角色)：([^\n。]+)/);
  return (match?.[1] || "").trim();
}

function remixTitle(task?: Partial<FreeVideoTask> | null) {
  const copy = REPLACE_MODE_COPY[modeFromTask(task)];
  const name = subjectNameFromTask(task);
  if (name) return `${name}${copy.modeLabel}`;
  return copy.resultPreview;
}

function remixSourceLabel(task?: Partial<FreeVideoTask> | null) {
  const prompt = task?.prompt || "";
  const name = subjectNameFromTask(task);
  const source = task?.subject_source;
  if (modeFromTask(task) === "character") {
    if ((source === "library" || /人物库/.test(prompt)) && name) return `人物库：${name}`;
    return "临时角色素材";
  }
  if ((source === "library" || /商品库/.test(prompt)) && name) return `商品库：${name}`;
  return "临时商品素材";
}

function videoRefFromTask(task?: Partial<FreeVideoTask> | null) {
  // 商品复刻的参考视频只用来提炼分镜稿，不进 references，引用快照存在 digest_source。
  return (task?.references || []).find((item) => item.type === "video") || task?.digest_source || null;
}

function isDigesting(task?: Partial<FreeVideoTask> | null) {
  return task?.digest_stage === "digesting";
}

function imageRefsFromTask(task?: Partial<FreeVideoTask> | null) {
  return (task?.references || []).filter((item) => item.type === "image" && (item.url || item.asset_id));
}

function sizeFromRatio(ratio: string) {
  if (ratio === "16:9") return { width: 1280, height: 720 };
  if (ratio === "1:1") return { width: 1080, height: 1080 };
  if (ratio === "3:4") return { width: 834, height: 1112 };
  if (ratio === "4:3") return { width: 1112, height: 834 };
  if (ratio === "21:9") return { width: 1470, height: 630 };
  return { width: 720, height: 1280 };
}

function productCover(product: Product) {
  return product.cover_preview_url || product.images?.find((image) => image.is_primary)?.preview_url || product.images?.[0]?.preview_url || "";
}

function productImageCount(product: Product) {
  return product.images?.filter((image) => image.asset || image.preview_url).length || 0;
}

/** 选中后这次实际会带给模型的参考图。三视图是 standalone 资产,不在 images 里,单独点名。 */
function librarySelectionDetail(mode: ReplaceMode, product: Product | null, model: ModelEntity | null) {
  if (mode === "character") {
    if (!model) return "";
    const parts = [model.portrait ? "定妆照" : "", model.triview ? "三视图" : ""].filter(Boolean);
    return parts.length ? `将带上 ${parts.join(" + ")}` : "";
  }
  if (!product) return "";
  const count = productImageCount(product) || (product.cover_preview_url ? 1 : 0);
  const parts = [count ? `${count} 张商品图` : ""];
  parts.push(product.triview_preview_url ? "三视图" : "");
  const kept = parts.filter(Boolean);
  if (!kept.length) return "";
  return product.triview_preview_url
    ? `将带上 ${kept.join(" + ")}`
    : `将带上 ${kept.join("")} · 该商品还没有三视图`;
}

function modelCover(model: ModelEntity) {
  return model.portrait || model.triview || "";
}

function modelImageCount(model: ModelEntity) {
  return [model.portrait, model.triview].filter(Boolean).length;
}

interface ModeFormState {
  videoFile: File | null;
  videoPreview: string;
  videoRef: FreeVideoRef | null;
  videoUploading: boolean;
  videoMeta: { duration: number; width: number; height: number };
  source: ProductSource;
  selectedProduct: Product | null;
  selectedModel: ModelEntity | null;
  tempFiles: File[];
  tempAssetRefs: FreeVideoRef[];
  filledSubjectName: string;
  subjectBrief: string;
  job: FreeVideoTask | null;
  jobId: string;
}

const createInitialModeState = (): ModeFormState => ({
  videoFile: null,
  videoPreview: "",
  videoRef: null,
  videoUploading: false,
  videoMeta: { duration: 0, width: 0, height: 0 },
  source: "",
  selectedProduct: null,
  selectedModel: null,
  tempFiles: [],
  tempAssetRefs: [],
  filledSubjectName: "",
  subjectBrief: "",
  job: null,
  jobId: "",
});

export function VideoReplacePage({
  products: initialProducts = [],
  modelConfigs = [],
  onNotify,
  onBack,
  onTaskSettled,
}: {
  products?: Product[];
  modelConfigs?: ModelConfig[];
  onNotify: (type: "success" | "error" | "info", text: string) => void;
  onBack: () => void;
  onTaskSettled?: () => void;
  navigate?: NavigateFn;
}) {
  const [products, setProducts] = useState(initialProducts);
  const [models, setModels] = useState<ModelEntity[]>([]);
  const [replaceMode, setReplaceMode] = useState<ReplaceMode>(readReplaceMode);
  // 商品复刻与角色复刻分别拥有独立表单缓存，切换模式互不干扰
  const [forms, setForms] = useState<Record<ReplaceMode, ModeFormState>>({
    product: createInitialModeState(),
    character: createInitialModeState(),
  });
  // 进页面先向后端确认有没有在跑的任务,确认完再决定显示表单还是进度
  const [restoring, setRestoring] = useState(true);
  const [tempPreviews, setTempPreviews] = useState<string[]>([]);
  const [libraryOpen, setLibraryOpen] = useState(false);
  const [pendingProductId, setPendingProductId] = useState("");
  const [pendingModelId, setPendingModelId] = useState("");
  const [history, setHistory] = useState<FreeVideoTask[]>([]);
  const [expandedHistoryId, setExpandedHistoryId] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [billingRates, setBillingRates] = useState<BillingRates>(DEFAULT_BILLING_RATES);
  const videoInputRef = useRef<HTMLInputElement>(null);
  const tempInputRef = useRef<HTMLInputElement>(null);
  const completedNoticeRef = useRef("");
  const wasReviewingRef = useRef(false);
  const wasDigestingRef = useRef(false);
  const formsRef = useRef(forms);
  formsRef.current = forms;

  const currentForm = forms[replaceMode];
  const {
    videoFile,
    videoPreview,
    videoRef,
    videoUploading,
    videoMeta,
    source,
    selectedProduct,
    selectedModel,
    tempFiles,
    tempAssetRefs,
    filledSubjectName,
    subjectBrief,
    job,
    jobId,
  } = currentForm;

  const updateCurrentForm = (updater: Partial<ModeFormState> | ((prev: ModeFormState) => Partial<ModeFormState>)) => {
    setForms((prev) => {
      const cur = prev[replaceMode];
      const patch = typeof updater === "function" ? updater(cur) : updater;
      return {
        ...prev,
        [replaceMode]: { ...cur, ...patch },
      };
    });
  };

  const updateModeForm = (mode: ReplaceMode, updater: Partial<ModeFormState> | ((prev: ModeFormState) => Partial<ModeFormState>)) => {
    setForms((prev) => {
      const cur = prev[mode];
      const patch = typeof updater === "function" ? updater(cur) : updater;
      return {
        ...prev,
        [mode]: { ...cur, ...patch },
      };
    });
  };

  const videoConfigs = useMemo(
    () => modelConfigs.filter((config) => config.capability === "video" && config.status === "active"),
    [modelConfigs],
  );
  const preferredModel = useMemo(
    () => videoConfigs.find((config) => config.name === REPLACE_SEEDANCE_MODEL) || videoConfigs[0],
    [videoConfigs],
  );
  const digestModel = useMemo(() => {
    const texts = modelConfigs.filter((c) => c.capability === "text" && c.status === "active");
    return (
      texts.find((c) => c.name === DIGEST_GEMINI_MODEL)
      || texts.find((c) => c.name.includes("gemini-3.1") || (c.display_name || "").includes("Gemini 3.1"))
      || null
    );
  }, [modelConfigs]);

  const copy = REPLACE_MODE_COPY[replaceMode];
  const videoReady = Boolean(videoRef?.asset_id);
  const productName = source === "library"
    ? (replaceMode === "character" ? (selectedModel?.name || "") : (selectedProduct?.title || ""))
    : source === "temporary"
      ? (tempFiles[0]
        ? (tempFiles.length > 1
          ? `${tempFiles[0].name.replace(/\\.[^.]+$/, "") || copy.temporaryFallback}（${tempFiles.length}张参考图）`
          : (tempFiles[0].name.replace(/\\.[^.]+$/, "") || copy.temporaryFallback))
        : (filledSubjectName || copy.temporaryFallback))
      : "";
  const productReady = source === "library"
    ? (replaceMode === "character" ? Boolean(selectedModel) : Boolean(selectedProduct))
    : (tempFiles.length > 0 || tempAssetRefs.length > 0);
  const librarySelected = source === "library" && Boolean(replaceMode === "character" ? selectedModel : selectedProduct);
  const libraryPreview = replaceMode === "character"
    ? (selectedModel ? modelCover(selectedModel) : "")
    : (selectedProduct ? productCover(selectedProduct) : "");
  const libraryImageCount = replaceMode === "character"
    ? (selectedModel ? modelImageCount(selectedModel) : 0)
    : (selectedProduct ? productImageCount(selectedProduct) : 0);
  const tempDisplay = tempFiles.length
    ? tempFiles.map((file, index) => ({ key: fileKey(file), src: tempPreviews[index], name: file.name }))
    : tempAssetRefs.map((item, index) => ({
      key: item.asset_id || `${item.url}-${index}`,
      src: item.url || item.thumb_url || "",
      name: item.label || `${copy.temporaryNoun}${index + 1}`,
    }));
  const aspectRatio = ratioFromSize(videoMeta.width, videoMeta.height);
  const outputDuration = clampDuration(videoMeta.duration || SEEDANCE_MAX_OUTPUT_SECONDS);
  // 上传前不显示积分;上传后 = Gemini 提炼挂牌(仅商品复刻) + Seedance 2.5 720P × 时长
  // 商品复刻:原片只提炼、不进 Seedance → 普通秒价;角色复刻:原片作引用视频 → 含引用秒价
  const digestHangpai = (() => {
    if (replaceMode !== "product") return 0;
    const pricing = (digestModel?.metadata?.points_pricing as { points_per_call?: unknown } | undefined)?.points_per_call;
    if (pricing != null) {
      const n = Number(pricing);
      if (Number.isFinite(n) && n > 0) return n;
    }
    return DIGEST_POINTS_FALLBACK;
  })();
  const imageRefCount = source === "library"
    ? Math.max(1, libraryImageCount)
    : Math.max(0, (tempFiles.length ? tempFiles : tempAssetRefs).length);
  const seedanceRefs: { type: string }[] = [
    ...(replaceMode === "character" && videoReady ? [{ type: "video" as const }] : []),
    ...Array.from({ length: imageRefCount }, () => ({ type: "image" as const })),
  ];
  const estimated = estimateCost(preferredModel, {
    ratio: aspectRatio,
    resolution: "720p",
    duration: outputDuration,
    refs: seedanceRefs,
  }, billingRates);
  const points = videoReady
    ? (estimated.points + (replaceMode === "product" ? digestHangpai : 0))
    : 0;
  // 上传参考视频不算「正在复刻」:右侧面板要保持待命,只在上传区自己显示进度。
  // 生成按钮不会因此被误点 —— videoReady 要等 asset_id 回来才为真。
  const generating = Boolean(job && isInFlight(job.status)) || submitting;
  const digesting = Boolean((job && isDigesting(job)) || (submitting && !job));
  const reviewing = !digesting && Boolean(job && (job.review_stage === "reviewing" || job.status === "created"));
  const hasResult = Boolean(job && job.status === "succeeded" && job.video_url);
  const shotTotal = Number(job?.shot_total || 0);
  const shotIndex = Number(job?.shot_index || 0);
  const generatingCopy = shotTotal > 1 && shotIndex > 0
    ? `正在生成第 ${shotIndex}/${shotTotal} 镜，逐镜还原后再拼成完整片子`
    : copy.generatingCopy;
  const resultCopy = hasResult && job ? REPLACE_MODE_COPY[modeFromTask(job)] : copy;
  const panelClass = [
    "video-result-panel replace-result-panel",
    restoring ? "is-restoring" : "",
    generating ? "is-generating" : "",
    reviewing || digesting ? "is-reviewing" : "",
    hasResult ? "has-result" : "",
  ].filter(Boolean).join(" ");
  const generateLabel = generating
    ? (digesting ? "正在提炼参考视频…" : reviewing ? "正在审核素材…" : (shotTotal > 1 && shotIndex > 0 ? `正在复刻 ${shotIndex}/${shotTotal} 镜…` : "正在复刻…"))
    : hasResult
      ? (points > 0 ? `再次${copy.modeLabel} · 消耗 ${points} 积分` : `再次${copy.modeLabel}`)
      : (points > 0 ? `开始${copy.modeLabel} · 消耗 ${points} 积分` : `开始${copy.modeLabel}`);

  const loadHistory = async () => {
    try {
      const data = await api.videoReplaceTasks(0, 50);
      setHistory((data.results || []).filter((item) => item.status === "succeeded"));
      return data;
    } catch {
      /* 历史失败不挡当前复刻 */
      return null;
    }
  };

  // 恢复在跑的任务。拉到之前一律显示「读取中」——否则用户以为没任务,又传一次。
  const restoreInflight = async () => {
    const data = await loadHistory();
    const running = data?.inflight || null;
    if (running) {
      // 静默恢复:只把进度接上。不要走 fillFormFromTask —— 它会弹 toast、滚动页面,
      // 还依赖商品/模特列表加载完,拿来做刷新恢复会又吵又不稳。
      const mode = modeFromTask(running);
      setReplaceMode(mode);
      rememberReplaceMode(mode);
      const video = videoRefFromTask(running);
      updateModeForm(mode, {
        job: running,
        jobId: running.id,
        videoPreview: video?.url || "",
        videoRef: video ? { ...video, type: "video", role: "reference_video", label: video.label || "参考视频" } : null,
        filledSubjectName: subjectNameFromTask(running),
        videoMeta: {
          duration: Number(video?.duration || running.duration || 0),
          ...sizeFromRatio(running.aspect_ratio || "9:16"),
        },
      });
      rememberJob(running.id);
    } else {
      forgetJob();
    }
    setRestoring(false);
  };

  useEffect(() => {
    void api.products(100).then((payload) => setProducts(payload.results || [])).catch(() => undefined);
    void api.listModels({ pageSize: 200 }).then((payload) => setModels((payload.results || []).filter((item) => !item.is_deleted))).catch(() => undefined);
    void api.billingConfig()
      .then((config) => setBillingRates({
        margin: Number(config.video_margin_multiplier) || DEFAULT_BILLING_RATES.margin,
        rate: Number(config.points_per_yuan) || DEFAULT_BILLING_RATES.rate,
        multiplier: Number(config.team_price_multiplier) || 1,
      }))
      .catch(() => undefined);
    void restoreInflight();

    return () => {
      Object.values(formsRef.current).forEach((f) => {
        if (f.videoPreview.startsWith("blob:")) {
          try { URL.revokeObjectURL(f.videoPreview); } catch { /* ignore */ }
        }
      });
    };
  }, []);

  useEffect(() => {
    if (!initialProducts.length) return;
    setProducts((current) => (current.length ? current : initialProducts));
  }, [initialProducts]);

  useEffect(() => {
    const urls = tempFiles.map((file) => URL.createObjectURL(file));
    setTempPreviews(urls);
    return () => urls.forEach((url) => URL.revokeObjectURL(url));
  }, [tempFiles]);

  useBodyScrollLock(libraryOpen);

  const productJobId = forms.product.jobId;
  const characterJobId = forms.character.jobId;

  useEffect(() => {
    if (!productJobId) return;
    let cancelled = false;
    let timer = 0;
    const poll = async () => {
      try {
        const data = await api.pollVideoReplace(productJobId);
        if (cancelled) return;
        updateModeForm("product", { job: data.task });
        const stillDigesting = isDigesting(data.task);
        const stillReviewing = data.task.review_stage === "reviewing" || data.task.status === "created";
        if (stillReviewing) wasDigestingRef.current = stillDigesting || wasDigestingRef.current;
        if (stillReviewing) wasReviewingRef.current = true;
        else if (wasReviewingRef.current && isInFlight(data.task.status)) {
          wasReviewingRef.current = false;
          onNotify("success", wasDigestingRef.current ? "分镜稿已提炼完成，正在复刻" : "素材审核已通过，正在复刻");
          wasDigestingRef.current = false;
        }
        if (isInFlight(data.task.status)) {
          timer = window.setTimeout(poll, stillReviewing ? 2000 : 2500);
          return;
        }
        if (data.task.status === "succeeded") {
          if (completedNoticeRef.current !== data.task.id) {
            completedNoticeRef.current = data.task.id;
            onNotify("success", "商品复刻成片已生成");
            onTaskSettled?.();
          }
          void loadHistory();
        } else if (data.task.status === "failed") {
          onNotify("error", data.task.error_message || "商品复刻未完成，请重试");
          onTaskSettled?.();
        }
        updateModeForm("product", { jobId: "" });
        forgetJob();
      } catch (error) {
        if (cancelled) return;
        if (error instanceof ApiError && error.status === 404) {
          updateModeForm("product", { job: null, jobId: "" });
          forgetJob();
          return;
        }
        timer = window.setTimeout(poll, 8000);
      }
    };
    void poll();
    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [productJobId, onNotify, onTaskSettled]);

  useEffect(() => {
    if (!characterJobId) return;
    let cancelled = false;
    let timer = 0;
    const poll = async () => {
      try {
        const data = await api.pollVideoReplace(characterJobId);
        if (cancelled) return;
        updateModeForm("character", { job: data.task });
        const stillDigesting = isDigesting(data.task);
        const stillReviewing = data.task.review_stage === "reviewing" || data.task.status === "created";
        if (stillReviewing) wasDigestingRef.current = stillDigesting || wasDigestingRef.current;
        if (stillReviewing) wasReviewingRef.current = true;
        else if (wasReviewingRef.current && isInFlight(data.task.status)) {
          wasReviewingRef.current = false;
          onNotify("success", wasDigestingRef.current ? "分镜稿已提炼完成，正在复刻" : "素材审核已通过，正在复刻");
          wasDigestingRef.current = false;
        }
        if (isInFlight(data.task.status)) {
          timer = window.setTimeout(poll, stillReviewing ? 2000 : 2500);
          return;
        }
        if (data.task.status === "succeeded") {
          if (completedNoticeRef.current !== data.task.id) {
            completedNoticeRef.current = data.task.id;
            onNotify("success", "角色复刻成片已生成");
            onTaskSettled?.();
          }
          void loadHistory();
        } else if (data.task.status === "failed") {
          onNotify("error", data.task.error_message || "角色复刻未完成，请重试");
          onTaskSettled?.();
        }
        updateModeForm("character", { jobId: "" });
        forgetJob();
      } catch (error) {
        if (cancelled) return;
        if (error instanceof ApiError && error.status === 404) {
          updateModeForm("character", { job: null, jobId: "" });
          forgetJob();
          return;
        }
        timer = window.setTimeout(poll, 8000);
      }
    };
    void poll();
    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [characterJobId, onNotify, onTaskSettled]);

  const pickVideo = async (file: File | null) => {
    if (!file) return;
    const check = await checkRefFile(file, {
      maxSeconds: REF_SECONDS_MAX[replaceMode],
      maxVideoBytes: REF_BYTES_MAX[replaceMode],
    });
    if (!check.ok) {
      onNotify("error", check.error);
      return;
    }
    if (check.type !== "video") {
      onNotify("error", "只支持 mp4 / mov 视频");
      return;
    }
    const previewUrl = URL.createObjectURL(file);
    updateCurrentForm((cur) => {
      if (cur.videoPreview.startsWith("blob:")) {
        try { URL.revokeObjectURL(cur.videoPreview); } catch { /* ignore */ }
      }
      return {
        videoFile: file,
        videoPreview: previewUrl,
        videoUploading: true,
        job: cur.job && isInFlight(cur.job.status) ? cur.job : null,
      };
    });
    const form = new FormData();
    form.append("file", file);
    form.append("purpose", PRODUCT_SOURCE_PURPOSE);
    try {
      const uploaded = await api.uploadFreeVideoRef(form);
      updateCurrentForm({
        videoRef: {
          url: uploaded.url,
          type: "video",
          role: "reference_video",
          label: "参考视频",
          thumb_url: uploaded.thumb_url,
          duration: uploaded.duration || check.duration,
          asset_id: uploaded.asset_id,
          source: "upload",
        },
        videoMeta: {
          duration: uploaded.duration || check.duration || 0,
          width: uploaded.width || 0,
          height: uploaded.height || 0,
        },
      });
    } catch (error) {
      updateCurrentForm({
        videoFile: null,
        videoRef: null,
        videoPreview: "",
      });
      onNotify("error", error instanceof Error ? error.message : "参考视频上传失败");
    } finally {
      updateCurrentForm({ videoUploading: false });
    }
  };

  const addTempImages = (files: FileList | File[] | null) => {
    const incoming = [...(files || [])].filter((file) => IMAGE_TYPES.includes(file.type));
    if (!incoming.length) {
      onNotify("error", "请选择 JPG、PNG 或 WebP 图片");
      return;
    }
    updateCurrentForm((cur) => {
      const existing = new Set(cur.tempFiles.map(fileKey));
      const unique = incoming.filter((file) => {
        const key = fileKey(file);
        if (existing.has(key)) return false;
        existing.add(key);
        return true;
      });
      const room = Math.max(0, MAX_IMAGES - cur.tempFiles.length);
      if (room === 0) {
        onNotify("info", `最多上传9张${copy.temporaryNoun}`);
        return {};
      }
      if (!unique.length) {
        onNotify("info", "所选图片已在九宫格中");
        return {};
      }
      if (unique.length > room) onNotify("info", `最多上传9张图片，已保留前${room}张`);
      return {
        tempFiles: [...cur.tempFiles, ...unique.slice(0, room)],
        source: "temporary",
        selectedProduct: null,
        selectedModel: null,
        tempAssetRefs: [],
        filledSubjectName: "",
        job: cur.job && !isInFlight(cur.job.status) ? null : cur.job,
      };
    });
  };

  const switchReplaceMode = (next: ReplaceMode) => {
    if (next === replaceMode || generating) return;
    setReplaceMode(next);
    rememberReplaceMode(next);
    setLibraryOpen(false);
    onNotify("info", `已切换为${REPLACE_MODE_COPY[next].modeLabel}`);
  };

  const confirmLibrarySelection = () => {
    if (replaceMode === "character") {
      const model = models.find((item) => item.id === pendingModelId);
      if (!model) {
        onNotify("info", "请先选择一个角色");
        return;
      }
      if (!modelCover(model)) {
        onNotify("error", "这个角色还没有可用图片");
        return;
      }
      updateModeForm("character", (cur) => ({
        selectedModel: model,
        selectedProduct: null,
        source: "library",
        tempFiles: [],
        tempAssetRefs: [],
        filledSubjectName: "",
        job: cur.job && isInFlight(cur.job.status) ? cur.job : null,
      }));
      setLibraryOpen(false);
      setPendingModelId("");
      onNotify("success", `${copy.pickToast}：${model.name}`);
      return;
    }
    const product = products.find((item) => item.id === pendingProductId);
    if (!product) {
      onNotify("info", "请先选择或上传商品素材");
      return;
    }
    updateModeForm("product", (cur) => ({
      selectedProduct: product,
      selectedModel: null,
      source: "library",
      tempFiles: [],
      tempAssetRefs: [],
      filledSubjectName: "",
      job: cur.job && isInFlight(cur.job.status) ? cur.job : null,
    }));
    setLibraryOpen(false);
    setPendingProductId("");
    onNotify("success", `${copy.pickToast}：${product.title}`);
  };

  const startGeneration = async () => {
    const current = forms[replaceMode];
    if (!videoReady || !productReady || generating) return;
    if (!preferredModel) {
      onNotify("error", "暂无可用视频模型");
      return;
    }
    if (!current.videoRef?.asset_id) {
      onNotify("error", "请先上传参考视频");
      return;
    }
    setSubmitting(true);
    try {
      let imageAssetIds: string[] = [];
      if (current.source === "temporary") {
        if (current.tempFiles.length) {
          for (const file of current.tempFiles.slice(0, MAX_IMAGES)) {
            const form = new FormData();
            form.append("file", file);
            const data = await api.uploadFreeVideoRef(form);
            if (data.asset_id) imageAssetIds.push(data.asset_id);
          }
        } else {
          imageAssetIds = current.tempAssetRefs.map((item) => item.asset_id || "").filter(Boolean);
        }
        if (!imageAssetIds.length) {
          onNotify("error", replaceMode === "character" ? "请上传角色参考图" : "请上传商品参考图");
          return;
        }
      }
      const data = await api.submitVideoReplace({
        replace_mode: replaceMode,
        video_asset_id: current.videoRef.asset_id,
        product_id: current.source === "library" && replaceMode === "product" ? current.selectedProduct?.id : undefined,
        model_id: current.source === "library" && replaceMode === "character" ? current.selectedModel?.id : undefined,
        image_asset_ids: current.source === "temporary" ? imageAssetIds : undefined,
        subject_brief: current.subjectBrief.trim() || undefined,
        model: preferredModel.name,
        aspect_ratio: aspectRatio,
        resolution: "720p",
        duration: outputDuration,
      });
      const taskMode = modeFromTask(data.task) || replaceMode;
      updateModeForm(taskMode, {
        job: data.task,
        jobId: data.task.id,
      });
      rememberJob(data.task.id);
      rememberReplaceMode(taskMode);
      completedNoticeRef.current = "";
      wasReviewingRef.current = data.task.review_stage === "reviewing" || data.task.status === "created";
      wasDigestingRef.current = isDigesting(data.task);
      if (wasDigestingRef.current) {
        onNotify("success", "已开始提炼参考视频，拆完自动进入复刻");
      } else if (wasReviewingRef.current) {
        onNotify("success", "已提交素材审核，通过后自动开始复刻");
      } else {
        onNotify("success", "视频复刻任务已开始");
      }
      if (!isInFlight(data.task.status) && data.task.status === "succeeded") {
        onNotify("success", "视频复刻成片已生成");
        void loadHistory();
        forgetJob();
      }
    } catch (error) {
      if (error instanceof ApiError && error.status === 409) {
        // 后端单飞闸:已有复刻在跑。直接接上它,别让用户对着报错干瞪眼。
        const running = (error.payload as { inflight?: FreeVideoTask } | undefined)?.inflight;
        if (running) {
          const taskMode = modeFromTask(running);
          updateModeForm(taskMode, {
            job: running,
            jobId: running.id,
          });
          rememberJob(running.id);
        }
        onNotify("info", error.message || "已有一个视频正在复刻中");
        return;
      }
      onNotify("error", error instanceof Error ? error.message : "视频复刻提交失败");
    } finally {
      setSubmitting(false);
    }
  };

  const fillFormFromTask = (task: FreeVideoTask) => {
    const mode = modeFromTask(task);
    if (forms[mode].job && isInFlight(forms[mode].job.status)) return;
    const video = videoRefFromTask(task);
    if (!video?.asset_id) {
      onNotify("error", "这条记录没有可用的参考视频，请重新上传");
      return;
    }
    const images = imageRefsFromTask(task);
    const subject = subjectNameFromTask(task);
    setReplaceMode(mode);
    rememberReplaceMode(mode);

    if (mode === "character") {
      const model = models.find((item) => item.id === task.model_id)
        || models.find((item) => item.name === subject);
      updateModeForm("character", {
        videoFile: null,
        videoPreview: video.url || "",
        videoRef: {
          ...video,
          type: "video",
          role: "reference_video",
          label: video.label || "参考视频",
        },
        videoMeta: {
          duration: Number(video.duration || task.duration || 0),
          ...sizeFromRatio(task.aspect_ratio || "9:16"),
        },
        filledSubjectName: subject,
        subjectBrief: task.subject_brief || "",
        selectedModel: model || null,
        selectedProduct: null,
        source: model ? "library" : (images.length ? "temporary" : ""),
        tempFiles: [],
        tempAssetRefs: model ? [] : images,
      });
      if (!model && task.subject_source === "library") onNotify("info", "原角色已不在人物库，请重新选择");
    } else {
      const product = products.find((item) => item.id === task.product_id)
        || products.find((item) => item.title === subject);
      updateModeForm("product", {
        videoFile: null,
        videoPreview: video.url || "",
        videoRef: {
          ...video,
          type: "video",
          role: "reference_video",
          label: video.label || "参考视频",
        },
        videoMeta: {
          duration: Number(video.duration || task.duration || 0),
          ...sizeFromRatio(task.aspect_ratio || "9:16"),
        },
        filledSubjectName: subject,
        subjectBrief: task.subject_brief || "",
        selectedProduct: product || null,
        selectedModel: null,
        source: product ? "library" : (images.length ? "temporary" : ""),
        tempFiles: [],
        tempAssetRefs: product ? [] : images,
      });
      if (!product && task.subject_source === "library") onNotify("info", "原商品已不在商品库，请重新选择");
    }
    onNotify("success", "已填入上次素材，确认后可再次生成");
    document.querySelector(".replace-flow-panel")?.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const downloadVideo = (url: string, title: string) => {
    if (!url) return;
    const link = document.createElement("a");
    link.href = url;
    link.download = `${title || "视频复刻"}.mp4`;
    link.rel = "noopener";
    document.body.appendChild(link);
    link.click();
    link.remove();
    onNotify("success", "已开始下载视频复刻成片");
  };

  const toggleHistory = (id: string) => {
    setExpandedHistoryId((current) => (current === id ? "" : id));
  };

  const tempDrop = useFileDrop(
    (files) => addTempImages(files),
    { disabled: generating }
  );

  const videoDrop = useFileDrop(
    (files) => { void pickVideo(files[0] || null); },
    { disabled: generating || videoUploading }
  );

  const cells = Array.from({ length: 9 }, (_, index) => tempDisplay[index] || null);

  return (
    <div className="vrep-page">
      <div className="vrep-inner">
        <section className="video-tool-page replace-page">
          <header className="page-header">
            <div className="image-title-row">
              <button type="button" className="image-back-button" aria-label="返回上一入口页面" onClick={onBack}>
                <ArrowLeft />
              </button>
              <div className="page-heading">
                <h1>视频复刻</h1>
              </div>
            </div>
          </header>

          <div className="video-flow-grid">
            <section
              className={`video-flow-panel replace-flow-panel${restoring ? " is-locked" : ""}`}
              aria-busy={restoring}
              inert={restoring}
            >
              <h2>准备复刻素材</h2>
              <div className="replace-mode-switch" role="tablist" aria-label="选择视频复刻功能">
                <button
                  type="button"
                  className={`replace-mode-button${replaceMode === "product" ? " active" : ""}`}
                  data-replace-mode="product"
                  role="tab"
                  aria-selected={replaceMode === "product"}
                  disabled={generating}
                  onClick={() => switchReplaceMode("product")}
                >
                  <Package />
                  <span>替换商品</span>
                </button>
                <button
                  type="button"
                  className={`replace-mode-button${replaceMode === "character" ? " active" : ""}`}
                  data-replace-mode="character"
                  role="tab"
                  aria-selected={replaceMode === "character"}
                  disabled={generating}
                  onClick={() => switchReplaceMode("character")}
                >
                  <UserRound />
                  <span>替换角色</span>
                </button>
              </div>
              <div className="video-flow-step">
                <div className="video-flow-step-head">
                  <strong>1. 参考视频</strong>
                  <span>MP4 / MOV · 最长 {REF_SECONDS_MAX[replaceMode]} 秒</span>
                </div>
                <div
                  className={[
                    "video-upload-field",
                    videoReady ? "has-file" : "",
                    videoPreview ? "has-preview" : "",
                    videoDrop.dragging ? "is-dragover" : "",
                  ].filter(Boolean).join(" ")}
                  {...videoDrop.dropProps}
                >
                  <input
                    ref={videoInputRef}
                    type="file"
                    accept={VIDEO_ACCEPT}
                    hidden
                    onChange={(event) => {
                      void pickVideo(event.target.files?.[0] || null);
                      event.target.value = "";
                    }}
                  />
                  {videoPreview ? (
                    <div className="video-upload-preview">
                      <video src={videoPreview} controls playsInline preload="metadata" />
                      <div className="video-upload-preview-meta">
                        <strong>{videoFile?.name || filledSubjectName || "参考视频"}</strong>
                        <small>
                          {videoUploading
                            ? "正在上传参考视频…"
                            : `${formatClock(videoMeta.duration)} · ${ratioCopy(aspectRatio)} · ${copy.videoReady}`}
                        </small>
                      </div>
                      <button
                        type="button"
                        className="video-upload-change"
                        disabled={generating || videoUploading}
                        onClick={() => videoInputRef.current?.click()}
                      >
                        <RefreshCw />
                        更换视频
                      </button>
                    </div>
                  ) : (
                    <button
                      type="button"
                      className="video-upload-trigger"
                      disabled={generating}
                      onClick={() => videoInputRef.current?.click()}
                    >
                      <FileVideo2 />
                      <strong>{videoDrop.dragging ? "松开即可上传" : "点击或拖拽上传参考视频"}</strong>
                      <small>{copy.videoEmpty}</small>
                    </button>
                  )}
                </div>
              </div>

              <div className="video-flow-step">
                <div className="video-flow-step-head">
                  <strong>{copy.targetStep}</strong>
                  <span>请选择一种方式</span>
                </div>
                <div className="product-replace-options">
                  <button
                    type="button"
                    className={`replace-product-method${source === "library" ? " active" : ""}${librarySelected ? " has-product-preview" : ""}${generating ? " is-disabled" : ""}`}
                    disabled={generating}
                    aria-disabled={generating}
                    onClick={() => {
                      if (generating) return;
                      if (replaceMode === "character") setPendingModelId(selectedModel?.id || "");
                      else setPendingProductId(selectedProduct?.id || "");
                      setLibraryOpen(true);
                    }}
                  >
                    <span className="replace-product-method-icon">
                      {librarySelected && libraryPreview
                        ? <img src={libraryPreview} alt="" aria-hidden="true" />
                        : <LibraryBig />}
                    </span>
                    <span className="replace-product-method-copy">
                      <strong>
                        {librarySelected
                          ? (replaceMode === "character" ? selectedModel?.name : selectedProduct?.title)
                          : copy.libraryTitle}
                      </strong>
                      <small>{librarySelected ? librarySelectionDetail(replaceMode, selectedProduct, selectedModel) || copy.libraryTitle : copy.libraryEmpty}</small>
                    </span>
                    <ChevronRight />
                  </button>

                  <div
                    className={`replace-product-method replace-temporary-method${source === "temporary" ? " active" : ""}${tempDisplay.length ? " has-images" : ""}${tempDrop.dragging ? " is-dragover" : ""}${generating ? " is-disabled" : ""}`}
                    role="button"
                    tabIndex={generating ? -1 : 0}
                    aria-disabled={generating}
                    {...(!generating ? tempDrop.dropProps : {})}
                    onClick={() => {
                      if (generating) return;
                      tempInputRef.current?.click();
                    }}
                    onKeyDown={(event) => {
                      if (generating) return;
                      if (event.key === "Enter" || event.key === " ") {
                        event.preventDefault();
                        tempInputRef.current?.click();
                      }
                    }}
                  >
                    <img className="replace-product-method-background" alt="" aria-hidden="true" />
                    <span className="replace-product-method-icon"><Upload /></span>
                    <span className="replace-product-method-copy">
                      <strong>{copy.temporaryTitle}</strong>
                      <small>
                        {tempDrop.dragging
                          ? "松开即可添加"
                          : tempDisplay.length
                            ? `已上传 ${tempDisplay.length} 张${copy.temporaryNoun}`
                            : copy.temporaryEmpty}
                      </small>
                    </span>
                    <ImagePlus />
                    {tempDisplay.length ? (
                    <span className="replace-temporary-preview">
                      <span className="replace-temporary-grid" aria-label={`临时上传的${copy.temporaryNoun}`}>
                        {cells.map((item, index) => (
                          <span className={`replace-temporary-cell${item ? "" : " empty"}`} key={item?.key || `temp-${index}`}>
                            {item ? (
                              <>
                                <img src={item.src} alt={item.name} />
                                <button
                                  type="button"
                                  className="replace-temporary-remove"
                                  aria-label={`删除第${index + 1}张临时${copy.temporaryNoun}`}
                                  disabled={generating}
                                  onClick={(event) => {
                                    event.preventDefault();
                                    event.stopPropagation();
                                    if (generating) return;
                                    updateCurrentForm((cur) => {
                                      const nextFiles = cur.tempFiles.filter((_, itemIndex) => itemIndex !== index);
                                      const nextAssetRefs = cur.tempAssetRefs.filter((_, itemIndex) => itemIndex !== index);
                                      const nextSource = (nextFiles.length > 0 || nextAssetRefs.length > 0) ? cur.source : "";
                                      return {
                                        tempFiles: nextFiles,
                                        tempAssetRefs: nextAssetRefs,
                                        source: nextSource,
                                        job: cur.job && !isInFlight(cur.job.status) ? null : cur.job,
                                      };
                                    });
                                    onNotify("info", `已删除临时${copy.temporaryNoun}`);
                                  }}
                                >
                                  ×
                                </button>
                              </>
                            ) : null}
                          </span>
                        ))}
                      </span>
                      <span className="replace-temporary-more">
                        <span><ImagePlus /></span>
                        <strong>继续上传</strong>
                        <span className="replace-temporary-count">已上传 {tempDisplay.length} / 9</span>
                        <button
                          type="button"
                          className="replace-temporary-clear"
                          disabled={generating}
                          onClick={(event) => {
                            event.preventDefault();
                            event.stopPropagation();
                            if (generating) return;
                            const cur = forms[replaceMode];
                            if (!cur.tempFiles.length && !cur.tempAssetRefs.length) return;
                            updateCurrentForm((c) => ({
                              tempFiles: [],
                              tempAssetRefs: [],
                              filledSubjectName: "",
                              source: c.source === "temporary" ? "" : c.source,
                              job: c.job && !isInFlight(c.job.status) ? null : c.job,
                            }));
                            onNotify("info", `已清空临时${copy.temporaryNoun}`);
                          }}
                        >
                          清空全部
                        </button>
                      </span>
                    </span>
                    ) : null}
                    <input
                      ref={tempInputRef}
                      type="file"
                      accept="image/jpeg,image/png,image/webp"
                      multiple
                      hidden
                      disabled={generating}
                      onClick={(event) => event.stopPropagation()}
                      onChange={(event) => {
                        if (generating) return;
                        addTempImages(event.target.files);
                        event.target.value = "";
                      }}
                    />
                  </div>
                </div>
              </div>

              {replaceMode === "product" ? (
                <div className="video-flow-step">
                  <div className="video-flow-step-head">
                    <strong>{REPLACE_MODE_COPY.product.briefStep}</strong>
                    <span>{REPLACE_MODE_COPY.product.briefOptional}</span>
                  </div>
                  <textarea
                    className="textarea replace-brief-input"
                    value={subjectBrief}
                    maxLength={SUBJECT_BRIEF_MAX}
                    placeholder={REPLACE_MODE_COPY.product.briefPlaceholder}
                    disabled={generating}
                    aria-label={REPLACE_MODE_COPY.product.briefStep}
                    onChange={(event) => updateCurrentForm({ subjectBrief: event.target.value })}
                  />
                  <p className="field-hint replace-brief-hint">{REPLACE_MODE_COPY.product.briefHint}</p>
                </div>
              ) : (
                <div className="tip replace-limit-tip" role="note">
                  <strong>请替换为同性别的角色</strong>
                  女性角色请换成女性、男性换成男性。成片会保留参考视频的原声，
                  所以跨性别替换会出现「画面是男生、声音还是女生」的情况。
                </div>
              )}

              <div className="video-flow-actions replace-generate-action">
                <button
                  type="button"
                  className="primary-action"
                  disabled={restoring || !videoReady || !productReady || generating}
                  onClick={() => void startGeneration()}
                >
                  <Replace />
                  <span>{generateLabel}</span>
                </button>
              </div>
            </section>

            <aside className={panelClass} aria-live="polite">
              <div className="replace-restoring-state" role="status" aria-live="polite">
                <div className="replace-restoring-content">
                  <span className="replace-restoring-spinner" aria-hidden="true" />
                  <strong>正在读取任务状态</strong>
                  <span>确认有没有正在进行的复刻，稍候</span>
                </div>
              </div>
              <div className="video-result-placeholder">
                <div>
                  <div className="replace-placeholder-visual">
                    <span><Replace /></span>
                  </div>
                  <strong>等待素材上传</strong>
                </div>
              </div>
              <div className="replace-generating-state" role="status" aria-live="polite">
                <div className="replace-generating-content">
                  <div className="replace-generating-visual">
                    <span className="replace-generating-frame">{digesting ? <ScanLine /> : reviewing ? <ShieldCheck /> : <Clapperboard />}</span>
                    <span className="replace-generating-product">{replaceMode === "character" ? <UserRound /> : <Package />}</span>
                  </div>
                  <strong>{digesting ? copy.digestingTitle : reviewing ? copy.reviewingTitle : copy.generatingTitle}</strong>
                  <span>{digesting ? copy.digestingCopy : reviewing ? copy.reviewingCopy : generatingCopy}</span>
                  <div className="replace-generating-bar" aria-hidden="true"><span /></div>
                </div>
              </div>
              <div className="video-analysis-result">
                <h2>{resultCopy.resultTitle}</h2>
                <div className="replace-preview">
                  {job?.video_url ? (
                    <video src={job.video_url} poster={job.thumbnail_url || undefined} controls playsInline />
                  ) : null}
                </div>
                <div className="replace-preview-meta">
                  <strong>{productName ? `${productName}${resultCopy.modeLabel}` : remixTitle(job)}</strong>
                  <span>{(job?.duration || outputDuration)} 秒 · {ratioCopy(job?.aspect_ratio || aspectRatio)} · {job?.resolution || "720p"}</span>
                </div>
                <div className="video-flow-actions replace-result-actions">
                  <button type="button" className="secondary-action" onClick={() => job && fillFormFromTask(job)}>
                    <RefreshCw />
                    重新生成
                  </button>
                  <button type="button" className="primary-action" onClick={() => downloadVideo(job?.video_url || "", productName || remixTitle(job) || "视频复刻")}>
                    <Download />
                    下载视频
                  </button>
                </div>
              </div>
            </aside>
          </div>

          <section className="replace-history-section" aria-labelledby="replaceHistoryTitle">
            <div className="replace-history-head">
              <h2 id="replaceHistoryTitle">已完成的视频复刻项目</h2>
              <span>{history.length} 个项目</span>
            </div>
            {history.length === 0 ? (
              <div className="replace-history-empty">还没有完成的视频复刻项目</div>
            ) : (
              <div className="replace-history-list">
                {history.map((item) => {
                  const open = expandedHistoryId === item.id;
                  const sourceVideo = videoRefFromTask(item);
                  return (
                    <article className={`replace-history-card${open ? " is-open" : ""}`} key={item.id}>
                      <button
                        type="button"
                        className="replace-history-summary"
                        aria-expanded={open}
                        onClick={() => toggleHistory(item.id)}
                      >
                        <span className="replace-history-cover">
                          {item.thumbnail_url ? <img src={item.thumbnail_url} alt="" /> : null}
                          <span>{formatClock(item.duration)}</span>
                        </span>
                        <span className="replace-history-copy">
                          <span>已完成 · {REPLACE_MODE_COPY[modeFromTask(item)].historyKind}</span>
                          <strong>{remixTitle(item)}</strong>
                          <small>参考视频 {item.duration} 秒 · {remixSourceLabel(item)} · {item.resolution}</small>
                        </span>
                        <span className="replace-history-toggle">
                          <ChevronDown />
                          {open ? "收起" : "展开对比"}
                        </span>
                      </button>
                      <div className="replace-history-compare" hidden={!open}>
                        <div className="replace-history-compare-pane">
                          <span>原视频</span>
                          {sourceVideo?.url ? (
                            <video src={sourceVideo.url} poster={sourceVideo.thumb_url || undefined} controls playsInline preload="metadata" />
                          ) : (
                            <div className="replace-history-compare-empty">原视频暂不可用</div>
                          )}
                        </div>
                        <div className="replace-history-compare-pane">
                          <span>生成后</span>
                          {item.video_url ? (
                            <video src={item.video_url} poster={item.thumbnail_url || undefined} controls playsInline preload="metadata" />
                          ) : (
                            <div className="replace-history-compare-empty">成片暂不可用</div>
                          )}
                        </div>
                      </div>
                    </article>
                  );
                })}
              </div>
            )}
          </section>
        </section>
      </div>

      <OverlayPortal>
      <div className={`asset-library-layer${libraryOpen ? " open" : ""}`} aria-hidden={!libraryOpen}>
        <button type="button" className="asset-library-scrim" aria-label="关闭资产库" onClick={() => setLibraryOpen(false)} />
        <aside className="asset-library-drawer" role="dialog" aria-modal="true" aria-labelledby="assetLibraryTitle">
          <header className="asset-library-head">
            <div>
              <h2 id="assetLibraryTitle">{copy.drawerTitle}</h2>
              <p>{copy.drawerDescription}</p>
            </div>
            <button type="button" className="product-drawer-close" aria-label="关闭" onClick={() => setLibraryOpen(false)}>
              <X />
            </button>
          </header>
          <div className="asset-library-grid">
            {replaceMode === "character" ? (
              models.length === 0 ? (
                <div className="asset-library-empty">{copy.drawerEmpty}</div>
              ) : models.map((model) => (
                <button
                  type="button"
                  className={`asset-library-choice${pendingModelId === model.id ? " selected" : ""}`}
                  key={model.id}
                  onClick={() => setPendingModelId(model.id)}
                >
                  <span className="asset-choice-check"><Check /></span>
                  {modelCover(model) ? <img src={modelCover(model)} alt={model.name} /> : <img alt={model.name} />}
                  <span>
                    <strong>{model.name}</strong>
                    <small>{model.is_official ? "官方模板" : "我的模特"} · {modelImageCount(model)} 张素材</small>
                  </span>
                </button>
              ))
            ) : products.length === 0 ? (
              <div className="asset-library-empty">{copy.drawerEmpty}</div>
            ) : products.map((product) => (
              <button
                type="button"
                className={`asset-library-choice${pendingProductId === product.id ? " selected" : ""}`}
                key={product.id}
                onClick={() => setPendingProductId(product.id)}
              >
                <span className="asset-choice-check"><Check /></span>
                {productCover(product) ? <img src={productCover(product)} alt={product.title} /> : <img alt={product.title} />}
                <span>
                  <strong>{product.title}</strong>
                  <small>{product.category || "未分类"} · {productImageCount(product)} 张素材</small>
                </span>
              </button>
            ))}
          </div>
          <footer className="asset-library-footer">
            <button type="button" className="secondary-action" onClick={() => setLibraryOpen(false)}>取消</button>
            <button type="button" className="primary-action" onClick={confirmLibrarySelection}>
              <Check />
              <span>确定使用</span>
            </button>
          </footer>
        </aside>
      </div>
      </OverlayPortal>
    </div>
  );
}