"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import Icon from "./Icon";

const NAV = [
  { id: "workspace", label: "工作台", icon: "home" as const, href: "/" },
  { id: "play", label: "试拍台", icon: "play" as const, href: "/play" },
  {
    id: "projects",
    label: "项目",
    icon: "clapperboard" as const,
    href: "/projects",
    chev: true,
  },
  { id: "products", label: "商品库", icon: "package" as const, href: "/products" },
  { id: "library", label: "资产库", icon: "images" as const, href: "/library" },
  { id: "usage", label: "用量", icon: "bars2" as const, href: "/usage" },
  { id: "api", label: "API Keys", icon: "key" as const, href: "/api-keys" },
  { id: "settings", label: "设置", icon: "cog" as const, href: "/settings" },
];

function isActive(pathname: string, href: string): boolean {
  if (href === "/") return pathname === "/";
  return pathname === href || pathname.startsWith(href + "/");
}

export default function Sidebar() {
  const pathname = usePathname();
  // /account is reached via the user pill in the topbar — not in nav.
  return (
    <aside className="sidebar">
      <div className="brand">
        <div className="brand-mark">
          <Icon name="airshelf" size={22} />
        </div>
        <div className="brand-name">Airshelf</div>
        <div className="brand-ver">v1</div>
      </div>

      <div className="search-box">
        <Icon name="search" />
        <span>搜索</span>
        <span className="kbd">⌘K</span>
      </div>

      <nav className="sidebar-nav">
        {NAV.map((n) => {
          const active = isActive(pathname, n.href);
          return (
            <Link key={n.id} href={n.href} className={active ? "active" : ""}>
              <Icon name={n.icon} />
              <span className="label">{n.label}</span>
              {n.chev && <Icon name="chev-down" className="chev" />}
            </Link>
          );
        })}
        <div className="nav-section">协作</div>
        <div className="nav-item disabled" title="V1.5 上线 · 敬请期待">
          <Icon name="team" />
          <span className="label">团队</span>
          <span className="badge-mini">V1.5</span>
        </div>
      </nav>

      <div className="aside-foot">
        <Link href="/account" className="aside-user">
          <div className="av">李</div>
          <div className="em">li.dao@studio.cn</div>
        </Link>
        <div className="aside-collapse">
          <Icon name="chev-right" size={12} style={{ transform: "rotate(180deg)" }} />
          收起
        </div>
      </div>
    </aside>
  );
}