import Topbar from "@/components/Topbar";
import Icon from "@/components/Icon";

interface Product {
  name: string;
  cat: string;
  imgs: number;
  tags: string[];
  thumb: string;
}

const PRODUCTS: Product[] = [
  { name: "透真玻尿酸补水面膜", cat: "美妆个护", imgs: 3, tags: ["熬夜党", "敏感肌", "¥39.9/盒"], thumb: "补水面膜 · 1200×800" },
  { name: "南卡 Lite Pro 蓝牙耳机", cat: "数码 3C", imgs: 5, tags: ["通勤", "运动", "¥199"], thumb: "蓝牙耳机 · 1200×800" },
  { name: "滋啦速食牛肉面 · 6 桶装", cat: "食品饮料", imgs: 4, tags: ["加班", "独居", "¥49.9"], thumb: "速食牛肉面 · 1200×800" },
  { name: "透真清透物理防晒霜", cat: "美妆个护", imgs: 4, tags: ["SPF50", "通勤", "¥69"], thumb: "防晒霜 · 1200×800" },
  { name: "三顿半同款冻干咖啡粉", cat: "食品饮料", imgs: 6, tags: ["提神", "早八", "¥89/24 颗"], thumb: "咖啡冻干粉 · 1200×800" },
  { name: "小熊 4L 可视空气炸锅", cat: "家电", imgs: 5, tags: ["小户型", "健康", "¥159"], thumb: "空气炸锅 · 1200×800" },
  { name: "露露同款裸感瑜伽裤", cat: "服饰", imgs: 8, tags: ["健身房", "通勤", "¥119"], thumb: "瑜伽裤 · 1200×800" },
];

const FILTERS = ["全部", "美妆个护", "数码 3C", "食品饮料", "服饰", "家电"];

export default function ProductsPage() {
  return (
    <>
      <Topbar crumbs={[{ label: "工作台", href: "/" }, { label: "商品库" }]} />
      <section className="content">
        <div className="page-head">
          <div>
            <h1>商品库</h1>
            <div className="sub">
              <span>12 个商品</span>
              <span className="mono-sub">· SKU</span>
              <span>· 商品信息会作为脚本和资产生成的素材</span>
            </div>
          </div>
          <div className="actions">
            <button className="btn btn-primary">
              <Icon name="plus" size={14} />
              新建商品
            </button>
          </div>
        </div>

        <div className="toolbar">
          <div className="toolbar-search">
            <Icon name="search" />
            <input className="input" placeholder="搜索商品名称、品牌" />
          </div>
          {FILTERS.map((f, i) => (
            <button key={f} className={`filter-chip${i === 0 ? " active" : ""}`}>
              {f}
              {i === 0 && <span className="count-mini">12</span>}
            </button>
          ))}
          <span className="spacer" />
          <button className="filter-chip">最近添加</button>
        </div>

        <div className="product-grid">
          {PRODUCTS.map((p) => (
            <div className="product-card" key={p.name}>
              <div className="placeholder product-thumb">
                <span className="ph-frame">{p.thumb}</span>
              </div>
              <div className="product-body">
                <div className="product-name">{p.name}</div>
                <div className="product-meta">
                  <span>{p.cat}</span>
                  <span className="dot-sep">·</span>
                  <span>{p.imgs} 张图</span>
                </div>
                <div className="product-tags">
                  {p.tags.map((t) => (
                    <span key={t} className="tag-sm">{t}</span>
                  ))}
                </div>
              </div>
            </div>
          ))}

          <div className="product-card add">
            <div className="plus-circle">
              <Icon name="plus" size={20} />
            </div>
            <div>新建商品</div>
          </div>
        </div>
      </section>
    </>
  );
}