import { useEffect, useMemo, useRef, useState } from "react";
import {
  ArrowLeft,
  Box,
  ChevronRight,
  FolderOpen,
  History,
  Image as ImageIcon,
  LoaderCircle,
  Play,
  Plus,
  Sparkles,
  Trash2,
  Upload,
  UserRound,
  Users,
  Video,
  WandSparkles,
  X,
} from "lucide-react";
import { api, ApiError } from "../api";
import { findCatalogModel } from "../components/omni-param-bar";
import { modelResolutions } from "../components/free-create/constants";
import { ConfirmModal } from "../components/overlays";
import type { CreationConversation, CreationRef, ModelConfig } from "../types";
import type { NavigateFn } from "./route-config";

type OutputMode = "video" | "image";

type PresetItem = {
  name: string;
  category: string;
  mode: OutputMode;
  title: string;
  desc?: string;
  starter?: string;
  cover: string;
  previewVideo?: string;
};

const VIDEO_PRESETS: PresetItem[] = [
  { name: "痛点解决演示", category: "commerce", mode: "video", title: "痛点解决演示", desc: "从真实痛点到正常使用，再用看得见的过程证明商品价值。", starter: "基于商品的真实用途创作一条痛点解决演示：先让人看见困扰，再拍清使用步骤和真实结果，不夸张、不出现不合理的测试。", cover: "/assets/video-presets/pain-point-demo.jpg", previewVideo: "/assets/video-presets/pain-point-demo.mp4" },
  { name: "剧情反转带货", category: "story", mode: "video", title: "剧情反转带货", desc: "用人物冲突与意外反转建立记忆点，商品承担剧情中的关键作用。", starter: "创作一条有前后反转的剧情带货视频，让商品自然成为解决问题的关键。", cover: "/assets/video-presets/plot-twist-commerce.jpg", previewVideo: "/assets/video-presets/plot-twist-commerce.mp4" },
  { name: "达人口播种草", category: "speaker", mode: "video", title: "达人口播种草", desc: "用真实体验与生活化表达建立信任，适合电商和本地生活内容。", starter: "创作一条真实自然的达人口播种草视频，重点讲清使用场景和核心卖点。", cover: "/assets/video-presets/creator-recommendation.jpg", previewVideo: "/assets/video-presets/creator-recommendation.mp4" },
  { name: "鱼眼换装", category: "visual", mode: "video", title: "鱼眼换装", desc: "强调近距离透视与连续变装节奏，适合服饰和人物视觉内容。", starter: "创作一条鱼眼镜头风格的连续换装视频，人物和服装需要保持稳定。", cover: "/assets/video-presets/rhythm-outfit-change.jpg", previewVideo: "/assets/video-presets/rhythm-outfit-change.mp4" },
  { name: "多色商品换款", category: "visual", mode: "video", title: "多色商品换款", desc: "统一商品比例与机位，用动作连续展示不同颜色和款式。", starter: "创作一条多色商品换款视频：统一构图展示不同颜色或款式，用明确动作触发切换，最后给出全款总览。", cover: "/assets/video-presets/multi-sku-switch.jpg", previewVideo: "/assets/video-presets/multi-sku-switch.mp4" },
  { name: "AI 宠物拟人", category: "story", mode: "video", title: "AI 宠物拟人", desc: "让宠物角色参与有趣小剧情，同时保留商品真实结构与用途。", starter: "创作一条 AI 宠物拟人短片：宠物有明确性格和动作，商品以真实结构和正常用法自然参与剧情。", cover: "/assets/video-presets/ai-pet-personification.jpg", previewVideo: "/assets/video-presets/ai-pet-personification.mp4" },
];

const IMAGE_PRESETS: PresetItem[] = [
  { name: "电影感", category: "style", mode: "image", title: "电影感", cover: "/assets/image-presets/cinematic.png" },
  { name: "日式清新", category: "style", mode: "image", title: "日式清新", cover: "/assets/image-presets/japanese-fresh.png" },
  { name: "复古胶片", category: "style", mode: "image", title: "复古胶片", cover: "/assets/image-presets/film-vintage.png" },
  { name: "暖调生活感", category: "style", mode: "image", title: "暖调生活感", cover: "/assets/image-presets/warm-lifestyle.png" },
  { name: "高质感杂志", category: "style", mode: "image", title: "高质感杂志", cover: "/assets/image-presets/editorial.png" },
  { name: "梦幻柔光", category: "style", mode: "image", title: "梦幻柔光", cover: "/assets/image-presets/dreamy-soft.png" },
  { name: "黑金高级", category: "style", mode: "image", title: "黑金高级", cover: "/assets/image-presets/black-gold.png" },
  { name: "冷峻科技", category: "style", mode: "image", title: "冷峻科技", cover: "/assets/image-presets/tech-cool.png" },
  { name: "赛博朋克", category: "style", mode: "image", title: "赛博朋克", cover: "/assets/image-presets/cyberpunk.png" },
  { name: "日系手绘动画", category: "style", mode: "image", title: "日系手绘动画", cover: "/assets/image-presets/japanese-hand-drawn-anime.png" },
  { name: "国风水墨", category: "style", mode: "image", title: "国风水墨", cover: "/assets/image-presets/chinese-ink-wash.png" },
  { name: "新中式", category: "style", mode: "image", title: "新中式", cover: "/assets/image-presets/neo-chinese.png" },
];

const MENTION_REF_LIMIT = 5;

const MENTION_TABS: Array<{ type: CreationRef["type"]; label: string; Icon: typeof ImageIcon }> = [
  { type: "asset", label: "素材", Icon: ImageIcon },
  { type: "character", label: "角色", Icon: UserRound },
  { type: "model", label: "模特", Icon: Users },
  { type: "product", label: "商品", Icon: Box },
  { type: "scene", label: "场景", Icon: FolderOpen },
];

function mergeSessionUploads(results: CreationRef[], uploads: CreationRef[], query: string, type: CreationRef["type"]) {
  if (type !== "asset") return results;
  const q = query.trim().toLowerCase();
  const extras = uploads.filter((item) => !q || item.name.toLowerCase().includes(q));
  const seen = new Set(extras.map((item) => item.id));
  return [...extras, ...results.filter((item) => !seen.has(item.id))];
}

function formatRelativeTime(iso: string) {
  const then = new Date(iso).getTime();
  if (Number.isNaN(then)) return "";
  const minutes = Math.floor((Date.now() - then) / 60000);
  if (minutes < 1) return "刚刚";
  if (minutes < 60) return `${minutes} 分钟前`;
  const hours = Math.floor(minutes / 60);
  if (hours < 24) return `${hours} 小时前`;
  const days = Math.floor(hours / 24);
  return days < 30 ? `${days} 天前` : new Date(then).toLocaleDateString("zh-CN");
}

export function OmniCreatePage({
  modelConfigs,
  navigate,
  onNotify,
}: {
  modelConfigs?: ModelConfig[];
  navigate: NavigateFn;
  onNotify?: (type: "success" | "error" | "info", text: string) => void;
}) {
  const [outputMode, setOutputMode] = useState<OutputMode>("video");
  const [selectedCase, setSelectedCase] = useState<PresetItem | null>(null);
  const [prompt, setPrompt] = useState("");
  const [sessionUploads, setSessionUploads] = useState<CreationRef[]>([]);
  const [uploading, setUploading] = useState(false);
  const [uploadProgress, setUploadProgress] = useState<{ current: number; total: number } | null>(null);
  const [model, setModel] = useState("Seedance 2.5");
  const [resolution, setResolution] = useState("1080p");
  const [ratio, setRatio] = useState("9:16");
  const [duration, setDuration] = useState("智能时长");
  const [uploadMenuOpen, setUploadMenuOpen] = useState(false);
  const [mentionMenuOpen, setMentionMenuOpen] = useState(false);
  const [mentionTab, setMentionTab] = useState<CreationRef["type"]>("asset");
  const [mentionLoading, setMentionLoading] = useState(false);
  const [mentionResults, setMentionResults] = useState<CreationRef[]>([]);
  const [typeLabels, setTypeLabels] = useState<Record<string, string>>({});
  const [pendingRefs, setPendingRefs] = useState<CreationRef[]>([]);
  const [previewCase, setPreviewCase] = useState<PresetItem | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const toolsRef = useRef<HTMLDivElement>(null);
  const [starting, setStarting] = useState(false);

  useEffect(() => {
    if (outputMode === "image") {
      const img = findCatalogModel(modelConfigs, "", "image");
      setModel(img ? (img.display_name || img.name) : "Seedream5.0");
      setResolution("模型默认");
      setRatio("1:1");
      setDuration("1 张");
    } else {
      const vid = findCatalogModel(modelConfigs, "", "video");
      const label = vid ? (vid.display_name || vid.name) : "Seedance 2.5";
      const resList = modelResolutions(vid);
      setModel(label);
      setResolution(resList.includes("720p") ? "720p" : (resList[0] || "1080p"));
      setRatio("9:16");
      setDuration("智能时长");
    }
    setSelectedCase((prev) => (prev && prev.mode !== outputMode ? null : prev));
  }, [outputMode, modelConfigs]);

  useEffect(() => {
    const onDown = (event: MouseEvent) => {
      const target = event.target as Node;
      if (toolsRef.current?.contains(target)) return;
      setUploadMenuOpen(false);
      setMentionMenuOpen(false);
      };
    document.addEventListener("mousedown", onDown);
    return () => document.removeEventListener("mousedown", onDown);
  }, []);

  const presets = useMemo(() => {
    return outputMode === "video" ? VIDEO_PRESETS : IMAGE_PRESETS;
  }, [outputMode]);

  const applyPreset = (preset: PresetItem) => {
    setSelectedCase(preset);
    // 预设只作为后台的创作方向。无论图片还是视频，都不把内部生成指令塞进用户输入区。
    setPreviewCase(null);
    onNotify?.("info", `已选择预设：${preset.name}`);
  };

  const openMentions = async (query = "", type: CreationRef["type"] = mentionTab) => {
    setMentionTab(type);
    setMentionMenuOpen(true);
    setUploadMenuOpen(false);
    setMentionLoading(true);
    setMentionResults([]);
    try {
      const res = await api.searchMentions({ q: query, types: [type], limit: 12 });
      setMentionResults(mergeSessionUploads(res.results, sessionUploads, query, type));
      setTypeLabels(res.type_labels);
    } catch (error) {
      onNotify?.("error", (error as Error).message);
    } finally {
      setMentionLoading(false);
    }
  };

  const insertMention = (ref: CreationRef) => {
    if (pendingRefs.some((r) => r.id === ref.id)) {
      setMentionMenuOpen(false);
      return;
    }
    if (pendingRefs.length >= MENTION_REF_LIMIT) {
      onNotify?.("info", `最多引用 ${MENTION_REF_LIMIT} 个`);
      setMentionMenuOpen(false);
      return;
    }
    setPendingRefs((prev) => [...prev, ref]);
    setPrompt((prev) => prev.replace(/@\S*$/, "").replace(/\s+$/, " "));
    setMentionMenuOpen(false);
  };

  const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = Array.from(event.target.files || []);
    event.target.value = "";
    setUploadMenuOpen(false);
    if (!files.length) return;
    const images = files.filter((file) => file.type.startsWith("image/"));
    if (images.length !== files.length) {
      onNotify?.("info", "全能创作仅支持上传图片");
    }
    if (!images.length) return;
    setUploading(true);
    setUploadProgress({ current: 1, total: images.length });
    try {
      for (const [index, file] of images.entries()) {
        setUploadProgress({ current: index + 1, total: images.length });
        const form = new FormData();
        form.append("file", file);
        const data = await api.uploadFreeVideoRef(form);
        const ref: CreationRef = {
          type: "asset",
          id: data.asset_id,
          name: data.name || file.name,
          cover: data.thumb_url || data.url,
        };
        setSessionUploads((prev) => (prev.some((item) => item.id === ref.id) ? prev : [...prev, ref]));
        setPendingRefs((prev) => {
          if (prev.some((item) => item.id === ref.id) || prev.length >= MENTION_REF_LIMIT) return prev;
          return [...prev, ref];
        });
      }
    } catch (error) {
      onNotify?.("error", (error as Error).message);
    } finally {
      setUploading(false);
      setUploadProgress(null);
    }
  };

  return (
    <section className="page-view omni-create-page omni-home-page">
      <div className="omni-home-shell">
        <header className="omni-home-hero">
          <button type="button" className="omni-home-history" onClick={() => navigate("omniHistory")}>
            <History />
            创作历史
          </button>
          <span className="omni-home-kicker">
            <Sparkles /> YINGQING CREATIVE AGENT
          </span>
          <h1>和全能创作聊聊你的想法</h1>
          <p>选择一种创作方法，或直接描述你想生成的画面。</p>
          <div className="omni-output-switch" aria-label="输出类型">
            <button type="button" className={outputMode === "video" ? "active" : ""} onClick={() => setOutputMode("video")}>视频创作</button>
            <button type="button" className={outputMode === "image" ? "active" : ""} onClick={() => setOutputMode("image")}>图片创作</button>
          </div>
        </header>

        <section className="omni-start-composer" aria-label="全能创作输入区">
          <div className="omni-start-context" hidden={!selectedCase && pendingRefs.length === 0}>
            <div className="omni-selected-case" hidden={!selectedCase}>
              <span>
                <WandSparkles />
                <strong>{selectedCase?.title}</strong>
              </span>
              <button type="button" aria-label="取消预设" onClick={() => setSelectedCase(null)}>
                <X />
              </button>
            </div>
            <div className="omni-start-attachments" aria-live="polite">{pendingRefs.map((ref) => (
              <span className="omni-attachment-chip" key={ref.id}>
                {ref.cover ? <img src={ref.cover} alt="" /> : <ImageIcon />}
                <span>{ref.name.split(" · ")[0]}</span>
                <button
                  type="button"
                  className="omni-attachment-remove"
                  aria-label={`删除 ${ref.name}`}
                  onClick={() => setPendingRefs((prev) => prev.filter((item) => item.id !== ref.id))}
                >
                  <X />
                </button>
              </span>
            ))}</div>
          </div>
          <textarea
            id="omniStartPrompt"
            rows={3}
            placeholder="描述你想制作的内容，@ 可引用商品、模特、场景、素材或刚上传的图片……"
            value={prompt}
            onChange={(event) => {
              const value = event.target.value;
              setPrompt(value);
              const caret = event.target.selectionStart ?? 0;
              if (caret > 0 && value.charAt(caret - 1) === "@") void openMentions();
            }}
          />
          <div className="omni-start-toolbar">
            <div className="omni-start-tools" ref={toolsRef}>
              <div className="omni-upload-wrap">
                <button
                  type="button"
                  className={`omni-icon-tool${uploading ? " is-uploading" : ""}`}
                  aria-label={uploading ? "正在上传参考素材" : "添加参考素材"}
                  aria-busy={uploading}
                  disabled={uploading}
                  onClick={() => {
                    setUploadMenuOpen((open) => !open);
                    setMentionMenuOpen(false);
                  }}
                >
                  {uploading ? <LoaderCircle /> : <Plus />}
                </button>
                <div className="omni-upload-menu" hidden={!uploadMenuOpen}>
                  <strong>添加参考素材</strong>
                  <button
                    type="button"
                    onClick={() => {
                      setUploadMenuOpen(false);
                      void openMentions();
                    }}
                  >
                    <FolderOpen />
                    <span>从资产库选择<small>使用平台已有商品、人物或场景</small></span>
                  </button>
                  <button type="button" onClick={() => fileInputRef.current?.click()}>
                    <Upload />
                    <span>本地上传<small>添加电脑中的图片</small></span>
                  </button>
                </div>
              </div>
              {uploading ? (
                <span className="omni-upload-status" role="status" aria-live="polite">
                  <LoaderCircle aria-hidden="true" />
                  上传中 {uploadProgress?.current || 1}/{uploadProgress?.total || 1}
                </span>
              ) : null}
              <input
                ref={fileInputRef}
                type="file"
                accept="image/*"
                multiple
                hidden
                onChange={handleFileChange}
              />
              <div className="omni-mention-wrap">
                <button
                  type="button"
                  className="omni-icon-tool"
                  aria-label="引用素材"
                  onClick={() => {
                    if (mentionMenuOpen) setMentionMenuOpen(false);
                    else void openMentions("", mentionTab);
                    setUploadMenuOpen(false);
                  }}
                >
                  @
                </button>
                <div className="omni-session-mention-menu" hidden={!mentionMenuOpen} role="dialog" aria-label="引用素材">
                  <div className="omni-at-cats" role="tablist">
                    {MENTION_TABS.map((tab) => (
                      <button
                        type="button"
                        key={tab.type}
                        role="tab"
                        aria-selected={mentionTab === tab.type}
                        className={mentionTab === tab.type ? "is-on" : ""}
                        onClick={() => { if (mentionTab !== tab.type) void openMentions("", tab.type); }}
                      >
                        <tab.Icon size={14} />
                        {tab.label}
                      </button>
                    ))}
                  </div>
                  <div className="omni-at-list">
                    {mentionLoading ? (
                      <div className="omni-at-loading" aria-live="polite">
                        <span className="omni-send-spinner" />
                        加载中
                      </div>
                    ) : mentionResults.length === 0 ? (
                      <strong>这类还没有可引用的内容</strong>
                    ) : (
                      mentionResults.map((ref) => (
                        <button type="button" key={ref.id} onClick={() => insertMention(ref)}>
                          {ref.cover ? <img src={ref.cover} alt="" /> : <Play />}
                          <span>
                            {ref.name.split(" · ")[0]}
                            <small>{typeLabels[ref.type] || MENTION_TABS.find((tab) => tab.type === ref.type)?.label}</small>
                          </span>
                        </button>
                      ))
                    )}
                  </div>
                </div>
              </div>

            </div>
            <button
              type="button"
              className="omni-start-generate"
              disabled={starting || uploading}
              onClick={() => {
                const text = prompt.trim();
                if (!text && !selectedCase && pendingRefs.length === 0) {
                  onNotify?.("info", "请先输入你想制作的内容，或选择一个创作预设");
                  return;
                }
                if (starting) return;
                setStarting(true);
                // 会话 mode 与顶栏参数在这里定死,进对话页后不再改(契约 §0)
                void api
                  .createCreation({
                    title: (text || selectedCase?.title || "未命名创作").slice(0, 20),
                    mode: outputMode,
                    preset: selectedCase?.name || "",
                    params: {
                      model,
                      ratio,
                      ...(outputMode === "video"
                        ? { resolution, duration }
                        : { count: duration }),
                    },
                  })
                  .then((conversation) => {
                    // 首条消息交给对话页发,避免这里再复制一份 SSE 消费逻辑
                    navigate("omniSession", { conversationId: conversation.id, firstMessage: text, firstRefs: pendingRefs, firstUploads: sessionUploads });
                  })
                  .catch((error) => {
                    const status = (error as { status?: number }).status;
                    onNotify?.(
                      status === 409 ? "info" : "error",
                      (error as Error).message || "创建失败",
                    );
                    setStarting(false);
                  });
              }}
            >
              {uploading ? "图片上传中…" : starting ? "正在创建…" : "开始创作"}
            </button>
          </div>
        </section>

        <section
          className={`omni-case-library${outputMode === "image" ? " is-image-presets" : ""}`}
          aria-label={outputMode === "image" ? "图片风格预设" : "视频创作预设"}
        >
          <div className="omni-preset-intro">
            <strong>{outputMode === "video" ? "从一个视频方向开始" : "从一个风格开始"}</strong>
            <span>{outputMode === "video" ? "可选，也可以直接描述你想拍的视频。" : "可选，也可以直接描述你想要的画面。"}</span>
          </div>
          <div className="omni-case-grid">
            {presets.map((card) => (
              <button
                type="button"
                className={`omni-case-card${selectedCase?.name === card.name ? " active" : ""}`}
                data-mode={card.mode}
                key={card.name}
                onMouseEnter={(event) => {
                  const video = event.currentTarget.querySelector<HTMLVideoElement>("video");
                  void video?.play().catch(() => undefined);
                }}
                onMouseLeave={(event) => {
                  const video = event.currentTarget.querySelector<HTMLVideoElement>("video");
                  if (!video) return;
                  video.pause();
                  video.currentTime = 0;
                }}
                onFocus={(event) => {
                  const video = event.currentTarget.querySelector<HTMLVideoElement>("video");
                  void video?.play().catch(() => undefined);
                }}
                onBlur={(event) => {
                  const video = event.currentTarget.querySelector<HTMLVideoElement>("video");
                  if (!video) return;
                  video.pause();
                  video.currentTime = 0;
                }}
                onClick={() => {
                  if (card.mode === "image") applyPreset(card);
                  else setPreviewCase(card);
                }}
              >
                <span className="omni-case-visual">
                  {card.previewVideo ? (
                    <video muted loop playsInline preload="metadata" poster={card.cover} aria-label={`${card.title} 样片预览`}>
                      <source src={card.previewVideo} type="video/mp4" />
                    </video>
                  ) : (
                    <img src={card.cover} alt="" />
                  )}
                </span>
                <span className="omni-case-copy">
                  <strong>{card.title}</strong>
                  {card.desc ? <small>{card.desc}</small> : null}
                </span>
                <span
                  className="omni-card-use"
                  onClick={(event) => {
                    event.stopPropagation();
                    applyPreset(card);
                  }}
                >
                  使用
                </span>
              </button>
            ))}
          </div>
        </section>

        <div className="omni-preset-modal" hidden={!previewCase}>
          <button type="button" className="omni-preset-scrim" aria-label="关闭预设详情" onClick={() => setPreviewCase(null)} />
          {previewCase && (
            <section className="omni-preset-dialog" role="dialog" aria-modal="true" aria-labelledby="omniPresetDialogTitle">
              <button type="button" className="omni-preset-close" aria-label="关闭" onClick={() => setPreviewCase(null)}>
                <X />
              </button>
              <div className="omni-preset-media-frame">
                {previewCase.previewVideo ? (
                  <video controls playsInline preload="metadata" poster={previewCase.cover}>
                    <source src={previewCase.previewVideo} type="video/mp4" />
                    当前浏览器不支持播放该示例视频。
                  </video>
                ) : (
                  <img src={previewCase.cover} alt="预设示例" />
                )}
                {previewCase.mode === "video" && !previewCase.previewVideo && (
                  <span className="omni-preset-video-mark">
                    <Play />
                  </span>
                )}
              </div>
              <div className="omni-preset-detail">
                <span className="omni-preset-kind">{previewCase.mode === "video" ? "视频预设" : "图片预设"}</span>
                <h2 id="omniPresetDialogTitle">{previewCase.title}</h2>
                {previewCase.desc ? <p>{previewCase.desc}</p> : null}
                {previewCase.starter ? (
                  <div className="omni-preset-default">
                    <span>默认创作方向</span>
                    <p>{previewCase.starter}</p>
                  </div>
                ) : null}
                <div className="omni-preset-actions">
                  <button type="button" onClick={() => setPreviewCase(null)}>取消</button>
                  <button type="button" className="primary" onClick={() => applyPreset(previewCase)}>使用此预设</button>
                </div>
              </div>
            </section>
          )}
        </div>
      </div>
    </section>
  );
}

export function OmniHistoryPage({
  navigate,
  onNotify,
}: {
  navigate: NavigateFn;
  onNotify?: (type: "success" | "error" | "info", text: string) => void;
}) {
  const [modeFilter, setModeFilter] = useState<"all" | "video" | "image">("all");
  const [items, setItems] = useState<CreationConversation[] | null>(null);
  const [deleteTarget, setDeleteTarget] = useState<CreationConversation | null>(null);
  // 同会话页:onNotify 是内联箭头,进依赖会让列表每次 App 重渲染都重拉一遍
  const notifyRef = useRef(onNotify);
  notifyRef.current = onNotify;

  useEffect(() => {
    let cancelled = false;
    setItems(null);
    api
      .listCreations(modeFilter === "all" ? {} : { mode: modeFilter })
      .then((page) => {
        if (!cancelled) setItems(page.results || []);
      })
      .catch((error) => {
        if (cancelled) return;
        setItems([]);
        notifyRef.current?.("error", (error as Error).message);
      });
    return () => {
      cancelled = true;
    };
  }, [modeFilter]);

  const remove = async (id: string) => {
    // 软删:会话没了,已生成的图和视频仍留在资产库里
    setItems((prev) => (prev || []).filter((item) => item.id !== id));
    try {
      await api.deleteCreation(id);
    } catch (error) {
      notifyRef.current?.("error", (error as Error).message);
    }
  };

  return (
    <section className="page-view omni-history-page">
      <header className="omni-history-header">
        <div className="omni-history-heading">
          <span>ALL-IN-ONE CREATION</span>
          <div className="omni-history-title">
            <button type="button" className="omni-history-back" aria-label="返回" onClick={() => navigate("omniCreate")}>
              <ArrowLeft />
            </button>
            <h1>创作历史</h1>
          </div>
          <p>按视频创作或图片创作查看，并继续每一次独立会话。</p>
        </div>
        <div className="omni-history-tools">
          <div className="omni-history-toolbar">
            {([
              ["all", "全部"],
              ["video", "视频创作"],
              ["image", "图片创作"],
            ] as const).map(([key, label]) => (
              <button
                type="button"
                key={key}
                className={modeFilter === key ? "active" : ""}
                onClick={() => setModeFilter(key)}
              >
                {label}
              </button>
            ))}
          </div>
          <button type="button" className="omni-history-new" onClick={() => navigate("omniCreate")}>
            <Plus />
            新建会话
          </button>
        </div>
      </header>
      <div className="omni-history-list">
        {items === null ? (
          <div className="omni-history-empty">
            <p>正在加载创作记录……</p>
          </div>
        ) : items.length === 0 ? (
          <div className="omni-history-empty">
            <p>
              {modeFilter === "video"
                ? "还没有视频创作记录，从全能创作开始。"
                : modeFilter === "image"
                  ? "还没有图片创作记录，从全能创作开始。"
                  : "还没有创作记录，从全能创作开始。"}
            </p>
            <button type="button" onClick={() => navigate("omniCreate")}>
              去全能创作
              <ChevronRight size={14} />
            </button>
          </div>
        ) : (
          items.map((item) => (
            <article
              className="omni-history-item"
              key={item.id}
              data-status={item.agent_status === "planning" ? "generating" : item.status}
              onClick={() => navigate("omniSession", { conversationId: item.id })}
            >
              {item.cover_url ? (
                <img src={item.cover_url} alt={item.title} />
              ) : (
                <span className="omni-history-placeholder">
                  {item.mode === "video" ? <Video /> : <ImageIcon />}
                </span>
              )}
              <div>
                <span
                  className={`omni-history-status${
                    item.agent_status === "planning"
                      ? " generating"
                      : item.status === "completed"
                        ? " completed"
                        : ""
                  }`}
                >
                  {item.agent_status === "planning"
                    ? "生成中"
                    : item.status === "completed"
                      ? "已完成"
                      : "进行中"}
                </span>
                <h2>{item.title}</h2>
                <p>
                  {[
                    item.preset || "自由创作",
                    item.mode === "video" ? "视频" : "图片",
                    item.params?.model,
                    item.params?.ratio,
                  ]
                    .filter(Boolean)
                    .join(" · ")}
                </p>
                <small>{formatRelativeTime(item.last_active_at)}</small>
              </div>
              <div className="omni-history-actions">
                <button
                  type="button"
                  aria-label="删除项目"
                  onClick={(event) => {
                    event.stopPropagation();
                    setDeleteTarget(item);
                  }}
                >
                  <Trash2 />
                </button>
                <ChevronRight />
              </div>
            </article>
          ))
        )}
      </div>
      <ConfirmModal
        open={Boolean(deleteTarget)}
        title="删除会话"
        icon={<Trash2 size={16} />}
        detail={`确定删除「${deleteTarget?.title || "未命名创作"}」？会话会从创作历史中移除，已生成的图和视频仍留在资产库里。`}
        confirmText="删除"
        onCancel={() => setDeleteTarget(null)}
        onConfirm={() => {
          const id = deleteTarget?.id;
          setDeleteTarget(null);
          if (id) void remove(id);
        }}
      />
    </section>
  );
}