import { useState } from "react";
import type { CSSProperties, FormEvent } from "react";
import { ArrowLeft, Upload } from "lucide-react";
import type { Product, Project } from "../types";
import type { Page } from "./route-config";
import { Drawer } from "../components/overlays";

type ProductPayload = {
  title?: string;
  brand?: string;
  category?: string;
  target_audience?: string;
  description?: string;
  specs?: Record<string, unknown>;
  selling_points?: Array<{ title: string; detail: string; sort_order: number }>;
};

// 复刻 mock-media productFor:按商品名关键词映射商品图
function productCover(name: string): string {
  const t = name.replace(/\s+/g, "");
  if (/蓝牙|耳机|南卡/.test(t)) return "product-earbuds.png";
  if (/速食|牛肉面|泡面|面条/.test(t)) return "product-noodle.png";
  if (/防晒/.test(t)) return "product-sunscreen.png";
  if (/咖啡|冻干/.test(t)) return "product-coffee.png";
  if (/空气炸锅|小熊/.test(t)) return "product-air-fryer.png";
  if (/瑜伽裤|露露/.test(t)) return "product-yoga-pants.png";
  if (/收纳|北欧/.test(t)) return "product-storage.png";
  if (/面膜|补水|玻尿酸|透真/.test(t)) return "product-mask.png";
  return "";
}
const prodMock = (file: string): CSSProperties => ({ ["--mock-media-url"]: `url(/exact/assets/mock/${file})` } as CSSProperties);

export function ProductsPage({ products, navigate, openProduct, onCreate }: {
  products: Product[];
  navigate: (page: Page) => void;
  openProduct: (productId: string) => void;
  onCreate: (payload: ProductPayload) => Promise<unknown> | void;
}) {
  const [query, setQuery] = useState("");
  const [drawer, setDrawer] = useState(false);
  const [title, setTitle] = useState("");
  const [brand, setBrand] = useState("");
  const [point, setPoint] = useState("");

  const filtered = products.filter((product) => `${product.title} ${product.brand}`.toLowerCase().includes(query.toLowerCase()));

  function submit(event: FormEvent) {
    event.preventDefault();
    onCreate({
      title,
      brand,
      category: "电商商品",
      target_audience: "泛人群",
      description: point,
      selling_points: [{ title: point || "核心卖点", detail: point || "待补充", sort_order: 0 }]
    });
    setDrawer(false);
    setTitle("");
    setBrand("");
    setPoint("");
  }

  return (
    <section className="products-page">
      <div className="page-head">
        <div>
          <h1>商品库</h1>
          <div className="sub"><span className="mono">// <span id="sku-count">{products.length}</span> SKU</span> · 商品信息会作为脚本和资产生成的素材</div>
        </div>
        <div className="actions">
          <button className="btn btn-edit-toggle" type="button" id="edit-toggle-btn">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d="m3 7 2 2 4-4" /><path d="m3 17 2 2 4-4" /><path d="M13 6h8" /><path d="M13 12h8" /><path d="M13 18h8" /></svg>
            <span className="btn-edit-label">管理商品</span>
          </button>
          <button className="btn btn-primary btn-create" type="button" id="open-new-product" onClick={() => setDrawer(true)}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 22V12" /><path d="M16 17h6" /><path d="M19 14v6" /><path d="M21 10.5V8a2 2 0 0 0-1-1.7l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.7l7 4a2 2 0 0 0 2 0l1.7-1" /><path d="m3.3 7 8.7 5 8.7-5" /><path d="m7.5 4.3 9 5.1" /></svg>
            新建商品
          </button>
        </div>
      </div>

      <div className="products-main">
        <div className="toolbar">
          <div className="search-inline">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
            <input className="input" id="search-input" placeholder="搜索商品名称、品牌" value={query} onChange={(event) => setQuery(event.target.value)} />
          </div>
          <div className="chip-wrap" data-key="cat"><button className="chip" type="button"><span className="chip-label">商品分类</span> <svg className="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg></button></div>
          <div className="chip-wrap" data-key="date"><button className="chip" type="button"><span className="chip-label">创建时间</span> <svg className="caret" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg></button></div>
        </div>

        <div className="result-meta" id="result-meta">
          <span>// 显示 <span className="count">{filtered.length}</span> / {products.length} 个商品</span>
        </div>

        <div className="product-grid-wrap">
          <div className="product-grid" id="product-grid">
            {filtered.map((product) => <ProductCard key={product.id} product={product} onOpen={() => openProduct(product.id)} />)}
          </div>
        </div>
      </div>

      <Drawer title="新建商品" open={drawer} close={() => setDrawer(false)}>
        <form onSubmit={submit}>
          <div className="field"><label className="field-label">商品名称<span className="req">*</span></label><input className="input" value={title} onChange={(event) => setTitle(event.target.value)} required /></div>
          <div className="field"><label className="field-label">品牌</label><input className="input" value={brand} onChange={(event) => setBrand(event.target.value)} /></div>
          <div className="field"><label className="field-label">核心卖点<span className="req">*</span></label><textarea className="textarea" value={point} onChange={(event) => setPoint(event.target.value)} /></div>
          <div className="drawer-actions"><button className="btn btn-ghost" type="button" onClick={() => setDrawer(false)}>取消</button><button className="btn btn-primary" type="submit">创建商品</button></div>
        </form>
      </Drawer>
    </section>
  );
}

export function ProductCard({ product, onOpen }: { product: Product; onOpen: () => void }) {
  const cover = productCover(product.title);
  const assetCount = product.images?.length || 0;
  return (
    <div className="product-card" data-cat={product.category} data-name={product.title} role="button" tabIndex={0} onClick={onOpen} onKeyDown={(event) => event.key === "Enter" && onOpen()}>
      <span className="card-check" aria-hidden="true"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.5"><polyline points="3 8 7 12 13 4" /></svg></span>
      <button className="card-del-btn" type="button" title="删除商品" onClick={(event) => event.stopPropagation()}><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 6h18" /><path d="M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2" /><path d="M19 6l-1.5 14a2 2 0 01-2 1.8H8.5a2 2 0 01-2-1.8L5 6" /></svg></button>
      <div className={`placeholder product-thumb${cover ? " has-mock-media" : ""}`} style={cover ? prodMock(cover) : undefined}><span className="ph-frame">{product.title} · 1200×800</span></div>
      <div className="product-body">
        <div className="product-name">{product.title}</div>
        <div className="product-cat">{product.category || "未分类"}</div>
        <div className="product-date">{(product.created_at || "").slice(0, 10)} 创建</div>
      </div>
      <div className="product-footer">
        <span className="stat">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><circle cx="9" cy="10" r="2" /><path d="M21 17l-5-5-9 9" /></svg>
          素材 <b>{assetCount}</b>
        </span>
        <span className="sep">·</span>
        <span className="stat">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="6" width="14" height="12" rx="2" /><path d="M16 10l6-3v10l-6-3z" /></svg>
          视频 <b>0</b>
        </span>
      </div>
    </div>
  );
}

export function ProductCreateUploadPage({ onCreate, onBack }: { onCreate: (payload: ProductPayload) => Promise<unknown> | void; onBack: () => void }) {
  const [title, setTitle] = useState("补水保湿精华液");
  const [brand, setBrand] = useState("透真");
  const [category, setCategory] = useState("美妆个护");
  const [audience, setAudience] = useState("熬夜党 / 学生党 / 通勤白领");
  const [description, setDescription] = useState("主打补水、舒缓、快速上脸，适合短视频痛点种草。");
  const [points, setPoints] = useState("透明质酸 + B5\n30g 大容量精华\n0 香精 0 酒精");

  function submit(event: FormEvent) {
    event.preventDefault();
    onCreate({ title, brand, category, target_audience: audience, description, specs: { source: "product-create-upload" }, selling_points: points.split("\n").filter(Boolean).map((item, index) => ({ title: item, detail: item, sort_order: index })) });
  }

  return (
    <>
      <div className="page-head"><div><h1>上传创建商品</h1><div className="sub"><span className="mono">// product-create-upload</span> · 图片 / 文案 / 卖点一次补齐</div></div><div className="actions"><button className="btn btn-ghost" type="button" onClick={onBack}><ArrowLeft size={13} />返回商品库</button></div></div>
      <form className="create-product-layout" onSubmit={submit}>
        <section className="card-hard create-upload-zone with-corners"><span className="corner-tr">+</span><span className="corner-bl">+</span><div className="mono muted-2">[ PRODUCT IMAGES ]</div><div className="upload-stage"><Upload size={28} /><strong>拖入商品图片或点击上传</strong><span>// 文件后续走资产库 TOS 上传接口</span></div></section>
        <section className="pane create-form-pane"><div className="pane-h"><strong>商品信息</strong><span className="spacer" /><span className="mono muted-2">AUTO SAVE READY</span></div><div className="field"><label className="field-label">商品名称<span className="req">*</span></label><input className="input" value={title} onChange={(event) => setTitle(event.target.value)} required /></div><div className="two-col"><div className="field"><label className="field-label">品牌</label><input className="input" value={brand} onChange={(event) => setBrand(event.target.value)} /></div><div className="field"><label className="field-label">类目</label><input className="input" value={category} onChange={(event) => setCategory(event.target.value)} /></div></div><div className="field"><label className="field-label">目标人群</label><input className="input" value={audience} onChange={(event) => setAudience(event.target.value)} /></div><div className="field"><label className="field-label">商品描述</label><textarea className="textarea" value={description} onChange={(event) => setDescription(event.target.value)} /></div><div className="field"><label className="field-label">核心卖点<span className="req">*</span></label><textarea className="textarea" value={points} onChange={(event) => setPoints(event.target.value)} /></div><div className="drawer-actions"><button className="btn" type="button" onClick={onBack}>取消</button><button className="btn btn-primary" type="submit">创建商品并查看详情</button></div></section>
        <aside className="wiz-preview"><div className="pv-h"><span>资料完整度</span><span className="live">LIVE</span></div><div className="pv-title">{title}</div><div className="pv-section"><div className="lbl">下一步</div><ul className="pv-list"><li>进入商品详情页</li><li>生成模特图 / 平台套图</li><li>创建视频项目</li></ul></div></aside>
      </form>
    </>
  );
}

// 商品详情页 · 从 public/exact/product-detail.html 忠实转写。
// 真实数据仅注入 api-bridge renderProductDetail 实际 hydrate 的 4 个字段
// (名称 / 品类 / 目标人群 / 卖点),其余 图片/素材/项目 网格沿用设计稿镜像的
// 静态占位(api-bridge 在 ?product_id 加载时同样保留 mock,故像素对齐)。
const PD_ASSETS: Array<{ type: string; status: "pass" | "fail" | "archive" }> = [
  { type: "模特上身图", status: "pass" },
  { type: "模特上身图", status: "pass" },
  { type: "模特上身图", status: "fail" },
  { type: "模特上身图", status: "pass" },
  { type: "模特上身图", status: "archive" },
  { type: "平台套图", status: "pass" },
  { type: "平台套图", status: "pass" },
  { type: "平台套图", status: "fail" },
  { type: "平台套图", status: "archive" },
  { type: "平台套图", status: "pass" },
  { type: "三视图", status: "pass" },
  { type: "三视图", status: "archive" }
];
const PD_ASSET_STATUS_LABEL: Record<"pass" | "fail" | "archive", string> = { pass: "通过", fail: "不通过", archive: "归档" };

const PD_VIDEOS: Array<{ proj: string; pill: string; ver: string; label: string; date: string }> = [
  { proj: "done", pill: "ok", ver: "补水面膜 · v3", label: "已完成", date: "2026-05-20 12:08" },
  { proj: "wip", pill: "info", ver: "补水面膜 · v2", label: "视频生成 4/6", date: "2026-05-19 10:24" },
  { proj: "archived", pill: "neutral", ver: "熬夜急救 · v1", label: "已归档", date: "2026-05-18 21:42" },
  { proj: "fail", pill: "err", ver: "补水面膜 · v1", label: "故事板失败", date: "2026-05-17 16:00" }
];

const PD_CAT_OPTIONS = ["美妆个护 / 精华液", "美妆个护", "服饰内衣", "食品饮料", "家居家电", "数码 3C", "个护清洁", "运动户外", "母婴亲子"];

export function ProductDetailPage({ product, navigate, onUpdate }: {
  product: Product;
  projects: Project[];
  navigate: (page: Page) => void;
  onUpdate: (payload: Partial<Product>) => Promise<unknown> | void;
}) {
  const [tab, setTab] = useState<"assets" | "videos">("assets");
  const [editing, setEditing] = useState(false);
  const [triOpen, setTriOpen] = useState(false);
  // 素材状态筛选 · 镜像默认即「通过」(api-bridge ALWAYS_APPLY status),只显示通过卡
  const [assetStatus] = useState<"pass" | "fail" | "archive">("pass");
  const assetCount = PD_ASSETS.filter((asset) => asset.status === assetStatus).length;

  // 真实字段 · 缺省时回退到设计稿镜像默认值(对齐 api-bridge setField 行为)
  const realName = product.title || "补水保湿精华液";
  const realCat = product.category || "美妆个护 / 精华液";
  const realTarget = product.target_audience || "22-32 岁女性、敏感肌、办公室通勤";
  const realBullets = product.selling_points.length
    ? product.selling_points.map((point) => point.title)
    : ["透明质酸 + B5,敷完不黏不闷", "30g 大容量精华液", "0 香精 0 酒精,敏感肌可用"];

  const [name, setName] = useState(realName);
  const [cat, setCat] = useState(realCat);
  const [target, setTarget] = useState(realTarget);

  function save() {
    void onUpdate({ title: name, category: cat, target_audience: target });
    setEditing(false);
  }
  function cancel() {
    setName(realName);
    setCat(realCat);
    setTarget(realTarget);
    setEditing(false);
  }

  return (
    <section className="product-detail-page">

      {/* 顶部 标题 + 状态 */}
      <div className="pd-title">
        <h1 id="pd-name">{realName}</h1>
      </div>

      {/* 商品信息(含图片) + 快速操作 · 主辅两栏 */}
      <div className="pd-overview">

        <div className={`ov-card ov-main${editing ? " editing" : ""}`} id="ov-main-card">
          <div className="ov-h">
            <span className="ti">商品信息</span>
            {/* AI 生成三视图 · 按钮 + 弹出 panel(view 模式可见) */}
            <div className="ov-tri-wrap">
              <button className={`ov-edit ov-tri-trigger${triOpen ? " is-open" : ""}`} type="button" id="ov-tri-btn" title="AI 生成商品三视图" aria-haspopup="dialog" aria-expanded={triOpen} onClick={() => setTriOpen((value) => !value)}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3z" /><path d="M19 14l.9 2.1L22 17l-2.1.9L19 20l-.9-2.1L16 17l2.1-.9L19 14z" /></svg>
                AI 生成三视图
              </button>
              <div className={`ov-tri-pop${triOpen ? " show" : ""}`} id="ov-tri-pop" role="dialog" aria-label="AI 生成三视图">
                <button className="ov-tri-close" type="button" id="ov-tri-close" aria-label="关闭" onClick={() => setTriOpen(false)}>
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg>
                </button>
                <div className="prod-preview-h">// 三视图预览 · <span id="ov-tri-status">待生成</span></div>
                <div className="placeholder prod-preview-img" id="ov-tri-img"><span className="ph-frame">// 尚未生成 · 点击下方按钮开始</span></div>
                <div className="prod-preview-foot" id="ov-tri-foot">
                  <button className="ov-edit primary" type="button" id="ov-tri-start" style={{ height: "28px" }}>
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3l1.8 4.2L18 9l-4.2 1.8L12 15l-1.8-4.2L6 9l4.2-1.8L12 3z" /></svg>
                    生成
                  </button>
                  <span style={{ flex: 1 }}></span>
                  <span className="mono" style={{ fontSize: "11px", color: "var(--black-alpha-56)" }}>~¥0.30 / 次</span>
                </div>
                <div className="prod-preview-history" id="ov-tri-history">
                  <div className="h-lbl">// 历史版本 · <span className="ct" id="ov-tri-history-count">0</span> 版</div>
                  <div className="h-row" id="ov-tri-history-row"></div>
                </div>
              </div>
            </div>
            {/* view 模式: 单个 [编辑信息] */}
            <button className="ov-edit ov-edit-single" type="button" id="ov-edit-btn" title="编辑商品信息" onClick={() => setEditing(true)}>
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.12 2.12 0 013 3L7 19l-4 1 1-4L16.5 3.5z" /></svg>
              编辑信息
            </button>
            {/* edit 模式: [重置] [取消] [保存] */}
            <div className="ov-edit-group">
              <button className="ov-edit" type="button" id="ov-reset-btn" title="重置为修改前" onClick={cancel}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M3 12a9 9 0 1 0 3-6.7" /><path d="M3 4v5h5" /></svg>
                重置
              </button>
              <button className="ov-edit" type="button" id="ov-cancel-btn" onClick={cancel}>取消</button>
              <button className="ov-edit primary" type="button" id="ov-save-btn" onClick={save}>
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5L20 6" /></svg>
                保存
              </button>
            </div>
          </div>

          <div className="ov-main-grid">

            <div className="ov-info">
              <div className="row" data-field="name">
                <div className="k">商品名称</div>
                <div className="v">
                  <span className="v-static">{realName}</span>
                  <input className="v-edit v-input" type="text" value={name} maxLength={100} onChange={(event) => setName(event.target.value)} />
                </div>
              </div>
              <div className="row" data-field="cat">
                <div className="k">品类</div>
                <div className="v">
                  <span className="v-static">{realCat}</span>
                  <select className="v-edit v-select" value={cat} onChange={(event) => setCat(event.target.value)}>
                    {PD_CAT_OPTIONS.map((option) => <option key={option}>{option}</option>)}
                  </select>
                </div>
              </div>
              <div className="row" data-field="target">
                <div className="k">目标人群</div>
                <div className="v">
                  <span className="v-static">{realTarget}</span>
                  <input className="v-edit v-input" type="text" value={target} onChange={(event) => setTarget(event.target.value)} />
                </div>
              </div>
              <div className="row" data-field="bullets">
                <div className="k">核心卖点</div>
                <div className="v">
                  <div className="v-static">
                    {realBullets.map((bullet, index) => <span className="bullet" key={index}>{bullet}</span>)}
                  </div>
                  <ul className="v-edit v-bullet-list" id="v-bullets-list">
                    {realBullets.map((bullet, index) => (
                      <li className="bl-item" key={index}><span className="num">{index + 1}</span><span className="bl-text">{bullet}</span></li>
                    ))}
                  </ul>
                </div>
              </div>
            </div>

            <div className="ov-images-sub">
              <div className="sub-h">
                <span className="ti">商品图片</span>
                <span className="ct">(6)</span>
              </div>
              <div className="grid" id="ov-images-grid">
                <div className="thumb placeholder"><span className="ph-frame">1:1</span></div>
                <div className="thumb placeholder"><span className="ph-frame">1:1</span></div>
                <div className="thumb placeholder"><span className="ph-frame">1:1</span></div>
                <div className="thumb placeholder"><span className="ph-frame">1:1</span></div>
                <div className="thumb placeholder"><span className="ph-frame">1:1</span></div>
                <div className="thumb placeholder"><span className="ph-frame">1:1</span></div>
                <div className="img-upload" id="ov-img-add" title="上传图片">
                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg>
                </div>
              </div>
            </div>

          </div>
        </div>

        <div className="ov-card ov-actions">
          <div className="ov-h"><span className="ti">快速操作</span></div>
          <div className="qa-section">
            <div className="qa-section-h">// 图片生成</div>
            <div className="qa-row-3">
              <div className="qa-item" data-go="model-photo" role="button" tabIndex={0} onClick={() => navigate("modelPhoto")}>
                <span className="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="8" r="4" /><path d="M4 21v-2a4 4 0 014-4h8a4 4 0 014 4v2" /></svg></span>
                模特上身图
              </div>
              <div className="qa-item" data-go="platform-cover" role="button" tabIndex={0} onClick={() => navigate("platformCover")}>
                <span className="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M3 9h18M9 3v18" /></svg></span>
                平台套图
              </div>
              <div className="qa-item" data-go="image-optimize" role="button" tabIndex={0} onClick={() => navigate("imageOptimize")}>
                <span className="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v18M3 12h18M5 5l14 14M5 19l14-14" /></svg></span>
                图片创作
              </div>
            </div>
          </div>
          <div className="qa-section">
            <div className="qa-section-h">// 视频生成</div>
            <div className="qa-row-1">
              <div className="qa-item primary" data-go="projects-new" role="button" tabIndex={0} onClick={() => navigate("projectWizard")}>
                <span className="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="6" width="14" height="12" rx="2" /><path d="M16 10l6-3v10l-6-3z" /></svg></span>
                生成视频
              </div>
            </div>
          </div>
        </div>

      </div>

      {/* Tabs */}
      <div className="pd-tabs">
        <button className={`tab${tab === "assets" ? " active" : ""}`} type="button" data-tab="assets" onClick={() => setTab("assets")}>AI 生成素材</button>
        <button className={`tab${tab === "videos" ? " active" : ""}`} type="button" data-tab="videos" onClick={() => setTab("videos")}>视频项目</button>
        <button className="tab" type="button" data-tab="tasks" hidden>任务记录</button>
      </div>

      {/* ===== AI 生成素材 ===== */}
      <div className={`tab-pane${tab === "assets" ? " active" : ""}`} data-pane="assets">

        <div className="pd-toolbar">
          <div className="total">全部 AI 素材 <span className="ct">({assetCount})</span></div>
          <button className="filter" type="button" data-key="type">
            全部类型
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg>
          </button>
          <button className="filter" type="button" data-key="status">
            通过
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg>
          </button>
          <div className="right">
            <div className="view-tog">
              <button type="button" className="active" title="网格视图">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="7" height="7" /><rect x="14" y="3" width="7" height="7" /><rect x="3" y="14" width="7" height="7" /><rect x="14" y="14" width="7" height="7" /></svg>
              </button>
              <button type="button" title="列表视图">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M3 6h18M3 12h18M3 18h18" /></svg>
              </button>
            </div>
            <button className="filter" type="button" data-key="sort">
              最新生成
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg>
            </button>
          </div>
        </div>

        <div className="asset-grid">
          {PD_ASSETS.map((asset, index) => {
            // 镜像 mock-media:平台套图 占位匹配 scene → scene-tabletop.png
            const hasMock = asset.type === "平台套图";
            return (
              <div className="asset-card" key={index} style={asset.status === assetStatus ? undefined : { display: "none" }}>
                <div className={`thumb placeholder${hasMock ? " has-mock-media" : ""}`} style={hasMock ? ({ "--mock-media-url": "url(/exact/assets/mock/scene-tabletop.png)" } as CSSProperties) : undefined}><span className="type-pill">{asset.type}</span><span className="ph-frame">3:4</span></div>
                <div className="meta"><span className={`pill ${asset.status}`} data-status={asset.status} title="点击切换状态">{PD_ASSET_STATUS_LABEL[asset.status]}</span><span className="date">2026-05-19 15:30</span></div>
              </div>
            );
          })}
        </div>

        <div className="pd-more"><button type="button">加载更多</button></div>
      </div>

      {/* ===== 视频项目 ===== */}
      <div className={`tab-pane${tab === "videos" ? " active" : ""}`} data-pane="videos">
        <div className="pd-toolbar">
          <div className="total">该商品视频项目 <span className="ct">(4)</span></div>
          <div className="right">
            <button className="filter" type="button" data-key="sort">
              最新导出
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5"><path d="M4 6l4 4 4-4" /></svg>
            </button>
          </div>
        </div>

        <div className="asset-grid">
          {PD_VIDEOS.map((video, index) => (
            <div className="asset-card" data-proj-status={video.proj} key={index}>
              <div className="thumb placeholder" style={{ aspectRatio: "9/16" }}><span className="type-pill">视频 · 9:16</span><span className="ph-frame">{video.ver}</span></div>
              <div className="meta"><span className={`pill ${video.pill}`}><span className="dot"></span>{video.label}</span><span className="date">{video.date}</span></div>
            </div>
          ))}
        </div>

        <div className="pd-more"><button type="button">加载更多</button></div>
      </div>

    </section>
  );
}
