// 提炼提示词 · 上传参考视频 → 拆解接口 → 可编辑提示词。对照影擎 remix-page。
import { useEffect, useMemo, useRef, useState } from "react";
import {
  AlertCircle,
  ArrowLeft,
  ArrowRight,
  BadgeCheck,
  Clock3,
  Copy,
  FileText,
  FileVideo,
  FileVideo2,
  PanelsTopLeft,
  Play,
  RectangleVertical,
  RefreshCw,
  Save,
  ScanLine,
  ScanSearch,
  TextCursorInput,
  X,
} from "lucide-react";
import { api, ApiError } from "../api";
import { ConfirmModal, MediaLightbox } from "../components/overlays";
import { useFileDrop } from "../components/use-file-drop";
import type { ModelConfig, VideoDigestHistory, VideoDigestJob } from "../types";
import type { NavigateFn } from "./route-config";

export const REMIX_PROMPT_KEY = "fc-remix-prompt";
const REMIX_DRAFT_KEY = "vr-digest-draft";
const JOB_KEY = "airshelf:video-remix-job";
/** 未挂牌时的回落价(与后端 VIDEO_DIGEST_POINTS 一致)。 */
const VIDEO_DIGEST_POINTS_FALLBACK = 30;

type ProgressStage = "upload" | "analyze" | "prompt";

const VIDEO_DIGEST_MAX_BYTES = 200 * 1024 * 1024;

function shotCount(text: string, frames: number) {
  const marks = text.match(/【第\s*\d+\s*镜】/g);
  return marks?.length || frames || 0;
}

function isGemini31(model: ModelConfig) {
  const blob = `${model.name} ${model.display_name}`.toLowerCase();
  return blob.includes("gemini-3.1") || blob.includes("gemini 3.1") || model.name === "gemini-3.1-pro-preview";
}

function pickDigestModel(models: ModelConfig[]) {
  const active = models.filter((model) => model.status === "active" && isGemini31(model));
  return (
    active.find((model) => /官转/.test(model.display_name))
    || active.find((model) => model.name === "gemini-3.1-pro-preview")
    || active[0]
    || null
  );
}

function fileKind(file: File | null, name: string) {
  if (file?.type === "video/quicktime" || /\.mov$/i.test(file?.name || name)) return "MOV";
  if (/\.webm$/i.test(file?.name || name)) return "WEBM";
  return "MP4";
}

function ratioLabel(width: number, height: number) {
  if (!width || !height) return "—";
  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";
  return width > height ? "横屏" : "竖屏";
}

function readVideoMeta(file: File): Promise<{ duration: number; width: number; height: number }> {
  return new Promise((resolve) => {
    const url = URL.createObjectURL(file);
    const video = document.createElement("video");
    video.preload = "metadata";
    video.onloadedmetadata = () => {
      const meta = { duration: video.duration || 0, width: video.videoWidth || 0, height: video.videoHeight || 0 };
      URL.revokeObjectURL(url);
      resolve(meta);
    };
    video.onerror = () => {
      URL.revokeObjectURL(url);
      resolve({ duration: 0, width: 0, height: 0 });
    };
    video.src = url;
  });
}

function fileMetaCopy(kind: string, size: number, width: number, height: number) {
  if (width && height) return `${kind} · ${width} × ${height}`;
  if (size > 0) return `${kind} · ${(size / (1024 * 1024)).toFixed(1)} MB`;
  return kind;
}

function progressClass(step: ProgressStage, stage: ProgressStage) {
  const order: ProgressStage[] = ["upload", "analyze", "prompt"];
  const active = order.indexOf(stage);
  const index = order.indexOf(step);
  if (index < active) return "remix-progress-step done";
  if (index === active) return "remix-progress-step active";
  return "remix-progress-step";
}

function sameMediaUrl(a: string, b: string) {
  if (!a || !b) return false;
  return a.split("?")[0] === b.split("?")[0];
}

function historySummary(item: VideoDigestHistory) {
  const bits = [item.ratio || "—", item.shots ? `${item.shots} 个镜头` : "—", item.file_name || "参考视频.mp4"];
  return bits.join(" · ");
}

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 jobIdOf(job: Pick<VideoDigestJob, "id" | "task_id">) {
  return job.task_id || job.id || "";
}

export function VideoRemixPage({ textModels = [], onNotify, onBack, navigate }: {
  textModels?: ModelConfig[];
  onNotify: (type: "success" | "error" | "info", text: string) => void;
  onBack: () => void;
  navigate: NavigateFn;
}) {
  const [file, setFile] = useState<File | null>(null);
  const [jobId, setJobId] = useState("");
  const [watchId, setWatchId] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [prompt, setPrompt] = useState("");
  const [duration, setDuration] = useState(0);
  const [shots, setShots] = useState(0);
  const [ratio, setRatio] = useState("");
  const [fileName, setFileName] = useState("");
  const [fileSize, setFileSize] = useState(0);
  const [kind, setKind] = useState("MP4");
  const [width, setWidth] = useState(0);
  const [height, setHeight] = useState(0);
  const [taskId, setTaskId] = useState("");
  const [hasResult, setHasResult] = useState(false);
  const [remoteVideoUrl, setRemoteVideoUrl] = useState("");
  const [coverUrl, setCoverUrl] = useState("");
  const [sourceTaskId, setSourceTaskId] = useState("");
  const [history, setHistory] = useState<VideoDigestHistory[]>([]);
  const [openHistoryId, setOpenHistoryId] = useState("");
  const [playing, setPlaying] = useState<VideoDigestHistory | null>(null);
  const [confirmCancel, setConfirmCancel] = useState(false);
  // 进页面先向后端确认有没有在跑的提炼,确认完再决定显示表单还是进度
  const [restoring, setRestoring] = useState(true);
  const promptRef = useRef<HTMLTextAreaElement>(null);
  const completedNoticeRef = useRef("");
  const abortRef = useRef<AbortController | null>(null);
  const userCancelledRef = useRef(false);
  const blobPreviewUrl = useMemo(() => (file ? URL.createObjectURL(file) : ""), [file]);
  const previewUrl = blobPreviewUrl || remoteVideoUrl;
  const analyzing = submitting || Boolean(jobId);
  const canAnalyze = Boolean(file || remoteVideoUrl || sourceTaskId);
  const pollId = jobId || watchId;

  const digestModels = useMemo(
    () => textModels.filter((model) => model.status === "active" && isGemini31(model)),
    [textModels]
  );
  const activeModel = useMemo(() => pickDigestModel(digestModels), [digestModels]);
  const [priceMultiplier, setPriceMultiplier] = useState(1);
  useEffect(() => {
    void api.billingConfig().then((cfg) => setPriceMultiplier(Number(cfg.team_price_multiplier) || 1)).catch(() => undefined);
  }, []);
  // 与后端一致:只认挂牌 points_per_call,不吃 unit_price;未挂牌回落 30
  const hangpaiCall = (() => {
    const raw = (activeModel?.metadata?.points_pricing as { points_per_call?: unknown } | undefined)?.points_per_call;
    if (raw == null) return null;
    const n = Number(raw);
    return Number.isFinite(n) && n > 0 ? n : null;
  })();
  const listedPoints = hangpaiCall ?? VIDEO_DIGEST_POINTS_FALLBACK;
  const estimatedPoints = priceMultiplier === 1
    ? listedPoints
    : Math.max(1, Math.round(Number((listedPoints * priceMultiplier).toFixed(6))));

  const loadHistory = async () => {
    try {
      const data = await api.listVideoDigests();
      setHistory(data.results || []);
      return data;
    } catch {
      return null;
    }
  };

  const applyJobMeta = (job: VideoDigestJob) => {
    if (job.duration) setDuration(job.duration);
    if (job.file_name) {
      setFileName(job.file_name);
      setKind(fileKind(null, job.file_name));
    }
    if (job.ratio) setRatio(job.ratio);
    if (job.width) setWidth(job.width);
    if (job.height) setHeight(job.height);
    if (job.video_url) {
      setRemoteVideoUrl((current) => (current && sameMediaUrl(current, job.video_url) ? current : job.video_url));
    }
    if (job.cover_url) {
      setCoverUrl((current) => (current && sameMediaUrl(current, job.cover_url) ? current : job.cover_url));
    }
    const id = jobIdOf(job);
    if (id) setSourceTaskId(id);
  };

  const applySucceededJob = (job: VideoDigestJob) => {
    const text = (job.text || job.prompt || "").trim();
    applyJobMeta(job);
    setPrompt(text);
    setShots(job.shots || shotCount(text, 0));
    setTaskId(jobIdOf(job));
    setHasResult(Boolean(text));
  };

  useEffect(() => {
    try {
      localStorage.removeItem(REMIX_DRAFT_KEY);
    } catch {
      /* 无痕模式忽略 */
    }
    let cancelled = false;
    void (async () => {
      const listed = await loadHistory();
      if (cancelled) return;
      // 优先信服务端:列表接口会回本团队在跑的那条。localStorage 可能被清、
      // 也可能换了浏览器/标签页,只认它会让「退出再进来任务就没了」。
      const inflight = listed?.inflight || null;
      const stored = readJobId();
      const restoreId = (inflight ? jobIdOf(inflight) : "") || stored;
      if (!restoreId) {
        forgetJob();
        setRestoring(false);
        return;
      }
      try {
        const job = inflight && jobIdOf(inflight) === restoreId
          ? inflight
          : await api.getVideoDigest(restoreId);
        if (cancelled) return;
        if (job.status === "processing") {
          // 之前这里在「拿不到封面/原片直链」时把任务取消掉 —— 那是拿渲染缩略图的
          // 能力去判活,TOS 慢一点或签名失败就误杀正在跑的任务。一律恢复并续上轮询,
          // 真死掉的由后端 expire_stale_team_digests(15 分钟)回收。
          applyJobMeta(job);
          setJobId(restoreId);
          rememberJob(restoreId);
          setRestoring(false);
          return;
        }
        if (job.status === "succeeded") {
          applySucceededJob(job);
        }
      } catch {
        /* 过期 / 已取消 / 不存在:当没任务 */
      }
      forgetJob();
    })().finally(() => {
      if (!cancelled) setRestoring(false);
    });
    return () => {
      cancelled = true;
    };
  }, []);

  useEffect(() => () => {
    if (blobPreviewUrl) URL.revokeObjectURL(blobPreviewUrl);
  }, [blobPreviewUrl]);


  useEffect(() => {
    if (!pollId) return;
    let cancelled = false;
    let timer = 0;
    const poll = async () => {
      try {
        const job = await api.getVideoDigest(pollId);
        if (cancelled) return;
        if (job.status === "processing") {
          timer = window.setTimeout(poll, 2500);
          return;
        }
        if (job.status === "succeeded") {
          applySucceededJob(job);
          if (completedNoticeRef.current !== jobIdOf(job)) {
            completedNoticeRef.current = jobIdOf(job);
            onNotify("success", "视频拆解完成，已生成提示词");
          }
          void loadHistory();
        } else if (job.status === "cancelled" || userCancelledRef.current) {
          if (!userCancelledRef.current) onNotify("info", job.error_message || "拆解已取消");
        } else {
          onNotify("error", job.error_message || "视频拆解失败，请重试");
        }
        setJobId("");
        setWatchId("");
        forgetJob();
      } catch (error) {
        if (cancelled) return;
        if (error instanceof ApiError && error.status === 404) {
          setJobId("");
          setWatchId("");
          forgetJob();
          return;
        }
        timer = window.setTimeout(poll, 8000);
      }
    };
    void poll();
    return () => {
      cancelled = true;
      window.clearTimeout(timer);
    };
  }, [pollId, onNotify]);

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

  const pickFile = async (next: File | null) => {
    if (!next || analyzing) return;
    if (!/\.(mp4|mov|m4v|webm)$/i.test(next.name)) {
      onNotify("error", "只支持 mp4 / mov / m4v / webm 四种视频格式");
      return;
    }
    if (next.size > VIDEO_DIGEST_MAX_BYTES) {
      onNotify("error", "视频不能超过 200MB,请压缩后再传");
      return;
    }
    const meta = await readVideoMeta(next);
    setFile(next);
    setFileName(next.name);
    setFileSize(next.size);
    setKind(fileKind(next, next.name));
    setWidth(meta.width);
    setHeight(meta.height);
    setRatio(ratioLabel(meta.width, meta.height));
    if (meta.duration) setDuration(Math.round(meta.duration));
    setHasResult(false);
    setTaskId("");
    setRemoteVideoUrl("");
    setCoverUrl("");
    setSourceTaskId("");
    setPrompt("");
  };

  const analyze = async () => {
    if (analyzing || (!file && !sourceTaskId)) return;
    userCancelledRef.current = false;
    abortRef.current?.abort();
    const previous = watchId || (!jobId ? readJobId() : "");
    if (previous && previous !== sourceTaskId) {
      setWatchId("");
      void api.cancelVideoDigest(previous).catch(() => undefined);
    }
    const controller = new AbortController();
    abortRef.current = controller;
    setSubmitting(true);
    setHasResult(false);
    setPrompt("");
    try {
      let job;
      if (file) {
        const fd = new FormData();
        fd.append("file", file);
        if (activeModel?.id) fd.append("model_config_id", activeModel.id);
        job = await api.extractVideoDigest(fd, controller.signal);
      } else {
        job = await api.extractVideoDigestFromTask(sourceTaskId, activeModel?.id, controller.signal);
      }
      if (userCancelledRef.current) return;
      const id = jobIdOf(job);
      applyJobMeta(job);
      if (job.status === "succeeded") {
        applySucceededJob(job);
        onNotify("success", "视频拆解完成，已生成提示词");
        void loadHistory();
        return;
      }
      if (!id) {
        onNotify("error", "视频拆解失败，请重试");
        return;
      }
      rememberJob(id);
      setWatchId("");
      setJobId(id);
    } catch (error) {
      if (userCancelledRef.current || (error instanceof DOMException && error.name === "AbortError")) return;
      if (error instanceof ApiError && error.status === 409) {
        // 后端单飞闸:已有提炼在跑。直接接上它,别让用户对着报错干瞪眼。
        const running = (error.payload as { inflight?: VideoDigestJob } | undefined)?.inflight;
        if (running) {
          const id = jobIdOf(running);
          applyJobMeta(running);
          rememberJob(id);
          setWatchId("");
          setJobId(id);
        }
        onNotify("info", error.message || "已有一个视频正在提炼中");
        return;
      }
      onNotify("error", error instanceof Error && error.message ? error.message : "视频拆解失败，请重试");
    } finally {
      setSubmitting(false);
    }
  };

  const cancelAnalyze = async () => {
    userCancelledRef.current = true;
    abortRef.current?.abort();
    const id = jobId || watchId || readJobId();
    setConfirmCancel(false);
    setSubmitting(false);
    setJobId("");
    setWatchId("");
    forgetJob();
    if (id) {
      try {
        await api.cancelVideoDigest(id);
      } catch {
        /* 已经停掉界面即可 */
      }
    }
    onNotify("info", "已取消拆解");
  };

  const savePrompt = async () => {
    const text = prompt.trim();
    if (!text) return;
    sessionStorage.setItem(REMIX_PROMPT_KEY, text);
    if (taskId) {
      try {
        const saved = await api.saveVideoDigest(taskId, text);
        setHistory((items) => items.map((item) => (item.id === saved.id ? saved : item)));
      } catch {
        onNotify("error", "提示词保存失败，请重试");
        return;
      }
    }
    try {
      await navigator.clipboard.writeText(text);
      onNotify("success", "提示词已保存，可继续生成或直接粘贴");
    } catch {
      onNotify("success", "提示词已保存，可继续生成视频");
    }
  };

  const continueGenerate = (text = prompt) => {
    const next = text.trim();
    if (!next) return;
    sessionStorage.setItem(REMIX_PROMPT_KEY, next);
    navigate("freeCreate");
  };

  const copyHistoryPrompt = async (text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      onNotify("success", "提示词已复制");
    } catch {
      onNotify("error", "复制失败，请手动选择文本");
    }
  };

  const analyzeLabel = analyzing
    ? "正在拆解…"
    : `生成这个需要 ${estimatedPoints} 积分`;

  const stage: ProgressStage = analyzing ? "analyze" : hasResult ? "prompt" : file || remoteVideoUrl ? "analyze" : "upload";
  const panelClass = [
    "video-result-panel remix-information-panel",
    restoring ? "is-restoring" : "",
    hasResult ? "has-result" : "",
    analyzing ? "is-analyzing" : "",
  ].filter(Boolean).join(" ");

  return (
    <div className="vr-page">
      <div className="vr-inner">
        <section className="video-tool-page remix-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="remix-progress-strip" aria-label="提示词提炼进度">
            <div className={progressClass("upload", stage)} data-remix-progress="upload">
              <span className="remix-progress-dot">1</span>
              <span>上传视频</span>
            </div>
            <div className={progressClass("analyze", stage)} data-remix-progress="analyze">
              <span className="remix-progress-dot">2</span>
              <span>智能拆解</span>
            </div>
            <div className={progressClass("prompt", stage)} data-remix-progress="prompt">
              <span className="remix-progress-dot">3</span>
              <span>生成提示词</span>
            </div>
          </div>

          <div className="video-flow-grid remix-flow-grid">
            <section
              className={`video-flow-panel video-remix-upload-panel${restoring ? " is-locked" : ""}`}
              aria-busy={restoring}
              inert={restoring}
            >
              <h2>上传参考视频</h2>
              <div className="video-flow-step">
                <div className="video-flow-step-head">
                  <strong>参考视频</strong>
                  <span>MP4 / MOV · 最长 30 秒 · ≤200MB</span>
                </div>
                {previewUrl ? (
                  <div
                    className={`video-upload-field has-file has-preview${videoDrop.dragging ? " is-dragover" : ""}`}
                    {...videoDrop.dropProps}
                  >
                    <div className="video-upload-preview">
                      <video src={previewUrl} poster={coverUrl || undefined} controls playsInline preload="metadata" />
                      <div className="video-upload-preview-meta">
                        <strong>{fileName || file?.name || "参考视频"}</strong>
                        <small>
                          {analyzing
                            ? "正在提炼分镜稿…"
                            : [duration ? `${duration} 秒` : "", ratio, fileMetaCopy(kind, fileSize, width, height)]
                              .filter(Boolean).join(" · ")}
                        </small>
                      </div>
                      <label className={`video-upload-change${analyzing ? " is-disabled" : ""}`}>
                        <input
                          type="file"
                          accept="video/mp4,video/quicktime,video/webm"
                          hidden
                          disabled={analyzing}
                          onChange={(event) => {
                            void pickFile(event.target.files?.[0] || null);
                            event.target.value = "";
                          }}
                        />
                        <RefreshCw />
                        更换视频
                      </label>
                    </div>
                  </div>
                ) : (
                  <label
                    className={`video-upload-field${videoDrop.dragging ? " is-dragover" : ""}`}
                    {...videoDrop.dropProps}
                  >
                    <input
                      type="file"
                      accept="video/mp4,video/quicktime,video/webm"
                      hidden
                      disabled={analyzing}
                      onChange={(event) => {
                        void pickFile(event.target.files?.[0] || null);
                        event.target.value = "";
                      }}
                    />
                    <span>
                      <FileVideo />
                      <strong>{videoDrop.dragging ? "松开即可上传" : "点击或拖拽上传参考视频"}</strong>
                      <small>上传后自动识别镜头结构与内容节奏</small>
                    </span>
                  </label>
                )}
              </div>
              <div className="video-flow-actions remix-analyze-actions">
                <button
                  type="button"
                  className="primary-action"
                  disabled={restoring || analyzing || !canAnalyze}
                  onClick={() => void analyze()}
                >
                  <ScanSearch />
                  <span>{analyzeLabel}</span>
                </button>
              </div>
            </section>

            <aside className={panelClass} aria-live="polite">
              <div className="remix-restoring-state" role="status" aria-live="polite">
                <div className="remix-restoring-content">
                  <span className="remix-restoring-spinner" aria-hidden="true" />
                  <strong>正在读取任务状态</strong>
                  <span>确认有没有正在进行的提炼，稍候</span>
                </div>
              </div>
              <div className="video-result-placeholder">
                <div>
                  <span className="remix-placeholder-icon"><ScanLine /></span>
                  <strong>等待视频解析</strong>
                </div>
              </div>
              <div className="remix-generating-state" role="status">
                <div className="remix-generating-content">
                  <div className="remix-generating-visual">
                    <span className="remix-generating-frame"><ScanSearch /></span>
                    <span className="remix-generating-badge"><FileVideo2 /></span>
                  </div>
                  <strong>正在提炼提示词</strong>
                  <span>离开页面也不会中断，稍后回来即可查看结果</span>
                  <div className="remix-generating-bar" aria-hidden="true"><span /></div>
                  <button type="button" className="secondary-action remix-cancel-analyze" onClick={() => setConfirmCancel(true)}>
                    <X />
                    取消
                  </button>
                </div>
              </div>
              <div className="video-analysis-result">
                <div className="remix-info-heading">
                  <span className="remix-status-icon"><BadgeCheck /></span>
                  <div>
                    <span className="remix-eyebrow">Analysis complete</span>
                    <h2>参考视频信息</h2>
                  </div>
                </div>
                <div className="remix-info-list">
                  <div className="remix-info-item">
                    <span><Clock3 />视频时长</span>
                    <strong>{duration ? `${duration} 秒` : "—"}</strong>
                  </div>
                  <div className="remix-info-item">
                    <span><RectangleVertical />画面比例</span>
                    <strong>{ratio || "—"}</strong>
                  </div>
                  <div className="remix-info-item">
                    <span><PanelsTopLeft />镜头数量</span>
                    <strong>{shots ? `${shots} 个镜头` : "—"}</strong>
                  </div>
                  <div className="remix-info-item remix-info-file">
                    <span><FileVideo2 />已解析文件</span>
                    <strong>{fileName || "参考视频.mp4"}</strong>
                    <small>{fileMetaCopy(kind, fileSize, width, height)}</small>
                  </div>
                </div>
              </div>
            </aside>
          </div>

          <section className={`remix-prompt-panel${hasResult ? " has-result" : ""}`} aria-live="polite">
            <div className="remix-prompt-placeholder">
              <span><TextCursorInput /></span>
              <div><strong>{analyzing ? "正在生成提示词" : "等待生成提示词"}</strong></div>
            </div>
            <div className="remix-prompt-result">
              <div className="remix-prompt-head">
                <div className="remix-prompt-title">
                  <div><h2>提示词内容</h2></div>
                </div>
                <div className="remix-prompt-head-actions">
                  <button type="button" className="primary-action remix-prompt-head-btn" onClick={() => continueGenerate()}>
                    <span>生成视频</span>
                    <ArrowRight />
                  </button>
                  <button type="button" className="secondary-action remix-prompt-head-btn" onClick={() => void savePrompt()}>
                    <Save />
                    保存提示词
                  </button>
                </div>
              </div>
              <textarea
                ref={promptRef}
                className="analysis-prompt"
                aria-label="复刻提示词"
                value={prompt}
                onChange={(event) => setPrompt(event.target.value)}
              />
            </div>
          </section>

          <section className="remix-history-section" aria-labelledby="remixHistoryTitle">
            <div className="remix-history-head">
              <h2 id="remixHistoryTitle">提取过的项目</h2>
              <span className="remix-history-count">{history.length} 个项目</span>
            </div>
            {history.length === 0 ? (
              <div className="remix-history-empty">还没有提取过的项目</div>
            ) : (
              <div className="remix-history-list">
                {history.map((item) => {
                  const open = openHistoryId === item.id;
                  const promptId = `remix-history-prompt-${item.id}`;
                  return (
                    <article className="remix-history-card" key={item.id}>
                      <div
                        className="remix-history-cover is-playable"
                        onClick={() => {
                          if (item.video_url) {
                            setPlaying(item);
                            return;
                          }
                          onNotify("info", "这条没有保存原片，重新上传拆一次就能播放");
                        }}
                        onKeyDown={(event) => {
                          if (event.key !== "Enter" && event.key !== " ") return;
                          event.preventDefault();
                          event.currentTarget.click();
                        }}
                        role="button"
                        tabIndex={0}
                        aria-label={`播放 ${item.title}`}
                      >
                        {item.cover_url ? (
                          <img src={item.cover_url} alt={`${item.title}封面`} />
                        ) : null}
                        <span className="remix-history-play" aria-hidden="true"><Play /></span>
                        <span className="remix-history-duration">{item.duration_label || "00:00"}</span>
                      </div>
                      <div className="remix-history-content">
                        <div className="remix-history-copy">
                          <span className="remix-history-status">{item.status || "已完成"}</span>
                          <h3>{item.title}</h3>
                          <p>{historySummary(item)}</p>
                        </div>
                        <div className="remix-history-actions">
                          <time dateTime={item.created_date}>{item.created_date}</time>
                          <button
                            type="button"
                            className="remix-history-open"
                            aria-expanded={open}
                            aria-controls={promptId}
                            onClick={() => setOpenHistoryId(open ? "" : item.id)}
                          >
                            <FileText />
                            <span>{open ? "收起提示词" : "查看提示词"}</span>
                          </button>
                        </div>
                      </div>
                      <div className="remix-history-prompt" id={promptId} hidden={!open}>
                        <div className="remix-history-prompt-head">
                          <strong>提示词</strong>
                          <div className="remix-history-prompt-actions">
                            <button
                              type="button"
                              className="remix-history-copy-button"
                              onClick={() => continueGenerate(item.prompt)}
                            >
                              <ArrowRight />
                              去生成视频
                            </button>
                            <button
                              type="button"
                              className="remix-history-copy-button"
                              onClick={() => void copyHistoryPrompt(item.prompt)}
                            >
                              <Copy />
                              复制提示词
                            </button>
                          </div>
                        </div>
                        <textarea readOnly value={item.prompt} />
                      </div>
                    </article>
                  );
                })}
              </div>
            )}
          </section>
        </section>
      </div>
      <ConfirmModal
        open={confirmCancel}
        title="确认取消拆解？"
        subtitle="当前任务将停止"
        detail="取消后本次提炼会停止，已预扣的积分会退回。"
        confirmText="确认取消"
        icon={<AlertCircle size={16} />}
        onCancel={() => setConfirmCancel(false)}
        onConfirm={() => void cancelAnalyze()}
      />
      <MediaLightbox
        open={Boolean(playing?.video_url)}
        src={playing?.video_url || ""}
        kind="video"
        name={playing?.title}
        close={() => setPlaying(null)}
      />
    </div>
  );
}