'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { User, FileText } from 'lucide-react';

// 侧边栏菜单项
const sidebarItems = [
  {
    title: '个人中心',
    href: '/dashboard',
    icon: User,
  },
  {
    title: '适配申请',
    href: '/dashboard/applications',
    icon: FileText,
    activePattern: /^\/dashboard\/applications(\/.*)?$/, // 匹配所有适配申请相关路径
  },
];

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

  // 检查菜单项是否应该高亮
  const isActive = (item: (typeof sidebarItems)[0]) => {
    // 如果有自定义匹配模式，使用它
    if (item.activePattern) {
      return item.activePattern.test(pathname);
    }

    // 否则使用默认的前缀匹配
    return pathname === item.href;
  };

  return (
    <aside className="w-[200px] border-r">
      <nav className="flex flex-col gap-2 p-4">
        {sidebarItems.map((item) => (
          <Link
            key={item.href}
            href={item.href}
            className={cn(
              'flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors',
              isActive(item) ? 'bg-blue-600 text-white' : 'hover:bg-gray-100'
            )}
          >
            <item.icon className="h-5 w-5" />
            {item.title}
          </Link>
        ))}
      </nav>
    </aside>
  );
}