"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import {
  BookOpenCheck,
  CalendarDays,
  ClipboardCheck,
  DatabaseZap,
  Gauge,
  Library,
  ListChecks,
  Settings,
  ShieldAlert
} from "lucide-react";

const navItems = [
  { href: "/dashboard", label: "仪表盘", icon: Gauge },
  { href: "/sessions", label: "答疑场次", icon: CalendarDays },
  { href: "/review", label: "待审核", icon: ClipboardCheck },
  { href: "/high-risk", label: "高风险", icon: ShieldAlert },
  { href: "/standard-qa", label: "标准库", icon: Library },
  { href: "/callable-qa", label: "可调用库", icon: DatabaseZap },
  { href: "/logs", label: "运行日志", icon: ListChecks },
  { href: "/settings", label: "系统设置", icon: Settings }
];

export default function Sidebar() {
  const pathname = usePathname();

  return (
    <aside className="z-20 flex w-full flex-col border-b border-line bg-white md:fixed md:inset-y-0 md:left-0 md:w-64 md:border-b-0 md:border-r">
      <div className="flex h-16 shrink-0 items-center gap-3 border-b border-line px-5">
        <BookOpenCheck className="h-6 w-6 text-jade" aria-hidden />
        <div>
          <div className="text-sm font-semibold text-ink">大本营答疑资产</div>
          <div className="text-xs text-slate-500">后台系统 MVP</div>
        </div>
      </div>
      <nav className="flex gap-1 overflow-x-auto px-3 py-3 md:block md:flex-1 md:space-y-1 md:overflow-visible md:py-4">
        {navItems.map((item) => {
          const Icon = item.icon;
          const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
          return (
            <Link
              key={item.href}
              href={item.href}
              className={`flex h-10 shrink-0 items-center gap-3 rounded-md px-3 text-sm transition ${
                active ? "bg-teal-50 text-jade" : "text-slate-600 hover:bg-slate-100 hover:text-ink"
              }`}
            >
              <Icon className="h-4 w-4" aria-hidden />
              <span>{item.label}</span>
            </Link>
          );
        })}
      </nav>
    </aside>
  );
}