import Link from "next/link";
import Topbar from "@/components/Topbar";
import Icon from "@/components/Icon";

interface Project {
  name: string;
  sub: string;
  product: string;
  source: string;
  prog: ("done" | "cur" | "fail" | "")[];
  step: string;
  pill: { kind: "info" | "ok" | "err" | "neutral"; label: string };
  updated: string;
}

const PROJECTS: Project[] = [
  {
    name: "补水面膜 · 痛点种草 · v3",
    sub: "6 镜 · 0-15s",
    product: "透真补水面膜",
    source: "AI 全生",
    prog: ["done", "done", "cur", "", ""],
    step: "3/5",
    pill: { kind: "info", label: "故事板 待确认" },
    updated: "12 分钟前",
  },
  {
    name: "速食牛肉面 · 加班治愈",
    sub: "4 镜 · 0-12s",
    product: "滋啦速食 · 6 桶装",
    source: "一句话主题",
    prog: ["done", "cur", "", "", ""],
    step: "2/5",
    pill: { kind: "info", label: "资产生成中" },
    updated: "37 分钟前",
  },
  {
    name: "透真防晒 · 通勤对比",
    sub: "6 镜 · 0-18s",
    product: "透真清透防晒霜",
    source: "AI 全生",
    prog: ["done", "done", "done", "cur", ""],
    step: "4/5",
    pill: { kind: "info", label: "视频生成 4/6" },
    updated: "2 小时前",
  },
  {
    name: "咖啡冻干 · 早八剧情",
    sub: "5 镜 · 0-15s",
    product: "三顿半同款冻干",
    source: "一句话主题",
    prog: ["done", "done", "fail", "", ""],
    step: "3/5",
    pill: { kind: "err", label: "故事板生成失败" },
    updated: "昨天 18:42",
  },
  {
    name: "蓝牙耳机 · 开箱测评",
    sub: "5 镜 · 0-15s",
    product: "南卡 Lite Pro",
    source: "自带脚本",
    prog: ["done", "done", "done", "done", "done"],
    step: "5/5",
    pill: { kind: "ok", label: "已完成" },
    updated: "5 月 7 日",
  },
  {
    name: "瑜伽裤 · 通勤穿搭",
    sub: "5 镜 · 0-15s",
    product: "露露同款瑜伽裤",
    source: "AI 全生",
    prog: ["done", "done", "done", "done", "done"],
    step: "5/5",
    pill: { kind: "ok", label: "已完成" },
    updated: "5 月 6 日",
  },
  {
    name: "空气炸锅 · 小户型",
    sub: "4 镜 · 0-12s",
    product: "小熊 4L 空气炸锅",
    source: "一句话主题",
    prog: ["done", "done", "done", "done", "done"],
    step: "5/5",
    pill: { kind: "ok", label: "已完成" },
    updated: "5 月 4 日",
  },
  {
    name: "补水面膜 · 痛点种草 · v1",
    sub: "6 镜 · 0-15s",
    product: "透真补水面膜",
    source: "AI 全生",
    prog: ["done", "done", "done", "done", "done"],
    step: "5/5",
    pill: { kind: "neutral", label: "已归档" },
    updated: "4 月 28 日",
  },
];

const TABS = [
  { label: "全部", count: 12, active: true },
  { label: "进行中", count: 3 },
  { label: "待审核", count: 2 },
  { label: "已完成", count: 8 },
  { label: "失败", count: 1 },
];

export default function ProjectsPage() {
  return (
    <>
      <Topbar crumbs={[{ label: "工作台", href: "/" }, { label: "视频项目" }]} />
      <section className="content">
        <div className="page-head">
          <div>
            <h1>视频项目</h1>
            <div className="sub">
              <span>12 个项目</span>
              <span>·</span>
              <span>3 个进行中</span>
              <span>·</span>
              <span>8 个已完成</span>
            </div>
          </div>
          <div className="actions">
            <Link className="btn btn-primary btn-lg" href="/projects/new">
              <Icon name="plus" size={14} />
              新建项目
            </Link>
          </div>
        </div>

        <div className="tabs">
          {TABS.map((t) => (
            <div key={t.label} className={`tab${t.active ? " active" : ""}`}>
              {t.label}
              <span className="count">{t.count}</span>
            </div>
          ))}
        </div>

        <div className="toolbar">
          <div className="toolbar-search">
            <Icon name="search" />
            <input className="input" placeholder="搜索项目名称、商品" />
          </div>
          <button className="filter-chip">
            商品
            <Icon name="chev-down" size={12} />
          </button>
          <button className="filter-chip">
            脚本来源
            <Icon name="chev-down" size={12} />
          </button>
          <button className="filter-chip">
            创建时间
            <Icon name="chev-down" size={12} />
          </button>
          <span className="spacer" />
          <div className="view-toggle">
            <button>网格</button>
            <button className="active">列表</button>
          </div>
        </div>

        <table className="proj-table">
          <thead>
            <tr>
              <th style={{ width: "32%" }}>项目</th>
              <th>商品</th>
              <th>脚本来源</th>
              <th style={{ width: 200 }}>进度</th>
              <th>状态</th>
              <th style={{ width: 120 }}>更新于</th>
              <th style={{ width: 60 }} />
            </tr>
          </thead>
          <tbody>
            {PROJECTS.map((p) => (
              <tr key={p.name}>
                <td>
                  <div className="proj-row-cell">
                    <div className="placeholder proj-thumb">
                      <span className="ph-frame">9:16</span>
                    </div>
                    <div>
                      <div className="proj-name">{p.name}</div>
                      <div className="proj-sub">{p.sub}</div>
                    </div>
                  </div>
                </td>
                <td>{p.product}</td>
                <td><span className="muted">{p.source}</span></td>
                <td>
                  <div className="hstack" style={{ gap: 8 }}>
                    <div className="prog">
                      {p.prog.map((s, i) => <span key={i} className={s || undefined} />)}
                    </div>
                    <span className="muted-2 mono" style={{ fontSize: 11 }}>{p.step}</span>
                  </div>
                </td>
                <td>
                  <span className={`pill pill-${p.pill.kind}`}>
                    <span className="dot" />
                    {p.pill.label}
                  </span>
                </td>
                <td className="muted-2">{p.updated}</td>
                <td>
                  <div className="row-actions">
                    <Link className="icon-btn-sm" href="/pipeline?stage=3" title="继续">
                      <Icon name="play-tri" size={12} />
                    </Link>
                    <button className="icon-btn-sm" title="更多">
                      <Icon name="more" size={14} />
                    </button>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </section>
    </>
  );
}