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

interface Recent {
  name: string;
  meta: string;
  prog: ("done" | "cur" | "fail" | "")[];
  pill: { kind: "info" | "ok" | "err"; label: string };
  action: { label: string; href: string };
}

const RECENT: Recent[] = [
  {
    name: "补水面膜 · 痛点种草",
    meta: "补水面膜 / AI 全生 / 6 镜",
    prog: ["done", "done", "cur", "", ""],
    pill: { kind: "info", label: "故事板 待确认" },
    action: { label: "继续", href: "/pipeline?stage=3" },
  },
  {
    name: "蓝牙耳机 · 开箱测评",
    meta: "南卡 Lite Pro / 自带脚本 / 5 镜",
    prog: ["done", "done", "done", "done", "done"],
    pill: { kind: "ok", label: "已完成" },
    action: { label: "打开", href: "/pipeline?stage=5" },
  },
  {
    name: "速食牛肉面 · 一句话主题",
    meta: "滋啦速食 / 一句话 / 4 镜",
    prog: ["done", "cur", "", "", ""],
    pill: { kind: "info", label: "资产生成中" },
    action: { label: "继续", href: "/pipeline?stage=2" },
  },
  {
    name: "防晒霜 · 对比展示",
    meta: "透真防晒 / AI 全生 / 6 镜",
    prog: ["done", "done", "done", "cur", ""],
    pill: { kind: "info", label: "视频生成 4/6" },
    action: { label: "继续", href: "/pipeline?stage=4" },
  },
  {
    name: "咖啡冻干粉 · 剧情带货",
    meta: "三顿半同款 / 一句话 / 5 镜",
    prog: ["done", "done", "fail", "", ""],
    pill: { kind: "err", label: "故事板失败" },
    action: { label: "查看", href: "/pipeline?stage=3" },
  },
];

export default function WorkspacePage() {
  return (
    <>
      <Topbar />
      <section className="content">
        <div className="welcome page-head">
          <div>
            <h1>欢迎回来，小李</h1>
            <div className="sub">
              <span className="mono-sub">// 05.13 · 周三</span>
              <span>·</span>
              你有 <b style={{ color: "var(--ink)" }}>3 个项目</b> 正在进行中
            </div>
          </div>
          <div className="actions">
            <Link className="btn" href="/products">
              <Icon name="plus" size={14} />
              新建商品
            </Link>
            <Link className="btn btn-primary" href="/projects/new">
              <Icon name="plus" size={14} />
              新建项目
            </Link>
          </div>
        </div>

        <div className="stats has-corners" style={{ marginBottom: 36 }}>
          <span className="corner-tr" aria-hidden />
          <span className="corner-bl" aria-hidden />
          <div className="stat">
            <div className="lbl">总项目 <span className="badge">ALL</span></div>
            <div className="v">12</div>
            <div className="delta up">↑ 本月 +3</div>
          </div>
          <div className="stat">
            <div className="lbl">进行中 <span className="badge">WIP</span></div>
            <div className="v">3</div>
            <div className="delta">2 个待审核</div>
          </div>
          <div className="stat">
            <div className="lbl">本月成片 <span className="badge">DONE</span></div>
            <div className="v">8</div>
            <div className="delta up">↑ 较上月 +33%</div>
          </div>
          <div className="stat">
            <div className="lbl">余额 <span className="badge">¥</span></div>
            <div className="v">¥327<small>.40</small></div>
            <div className="usage-bar"><span /></div>
            <div className="sub-mono">已用 ¥162.60 / ¥500</div>
          </div>
        </div>

        <div className="grid2">
          <div>
            <div className="section-h">
              <h2>最近项目</h2>
              <Link className="more" href="/projects">[ ALL · 12 ] →</Link>
            </div>
            <div className="list-card">
              {RECENT.map((r) => (
                <div className="recent-row" key={r.name}>
                  <div className="thumb">9:16</div>
                  <div className="r-meta">
                    <div className="name">{r.name}</div>
                    <div className="sub">{r.meta}</div>
                  </div>
                  <div className="prog">
                    {r.prog.map((p, i) => <span key={i} className={p || undefined} />)}
                  </div>
                  <span className={`pill pill-${r.pill.kind}`}><span className="dot" />{r.pill.label}</span>
                  <Link className="btn btn-sm" href={r.action.href}>{r.action.label}</Link>
                </div>
              ))}
            </div>
          </div>

          <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
            <div>
              <div className="section-h">
                <h2>快捷入口</h2>
                <span className="more">[ /shortcuts ]</span>
              </div>
              <div className="shortcuts">
                <Link className="shortcut" href="/products">
                  <div className="ic">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}>
                      <path d="m3 7 9-4 9 4-9 4-9-4z" />
                      <path d="m3 12 9 4 9-4M3 17l9 4 9-4" />
                    </svg>
                  </div>
                  <div>
                    <div className="t">商品库</div>
                    <div className="d">12 SKU</div>
                  </div>
                </Link>
                <Link className="shortcut" href="/library">
                  <div className="ic"><Icon name="bars" /></div>
                  <div>
                    <div className="t">资产库</div>
                    <div className="d">人 8 · 景 14 · 片 8</div>
                  </div>
                </Link>
                <Link className="shortcut" href="/account">
                  <div className="ic">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}>
                      <circle cx="12" cy="12" r="9" />
                      <path d="M12 7v10M9 10h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4" />
                    </svg>
                  </div>
                  <div>
                    <div className="t">充值</div>
                    <div className="d">¥327.40</div>
                  </div>
                </Link>
                <Link className="shortcut" href="/projects">
                  <div className="ic">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8}>
                      <rect x="3" y="4" width="18" height="16" rx="2" />
                      <path d="M7 4v16M16 4v16M3 9h18M3 15h18" />
                    </svg>
                  </div>
                  <div>
                    <div className="t">所有项目</div>
                    <div className="d">12 个</div>
                  </div>
                </Link>
              </div>
            </div>

            <div>
              <div className="section-h">
                <h2>提示</h2>
                <span className="more">[ FAQ ]</span>
              </div>
              <div className="tip">
                <strong>扣费规则</strong>
                生成失败、超时、用户重跑 — 均不扣费。仅在你点{" "}
                <span className="mono-pill">[ 确认通过 ]</span> 时按 token 实际结算。
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}