'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import {
  LayoutDashboard,
  Users,
  FolderKanban,
  ListTodo,
  Settings,
  ArrowLeft,
  Key,
  Cpu,
  Database,
  FileText,
} from 'lucide-react';

interface NavItem {
  label: string;
  href: string;
  icon: React.ElementType;
}

const navItems: NavItem[] = [
  { label: '概览', href: '/admin/dashboard', icon: LayoutDashboard },
  { label: '用户管理', href: '/admin/users', icon: Users },
  { label: '密钥管理', href: '/admin/api-keys', icon: Key },
  { label: '项目管理', href: '/admin/projects', icon: FolderKanban },
  { label: '任务管理', href: '/admin/tasks', icon: ListTodo },
  { label: '模型配置', href: '/admin/models', icon: Cpu },
  { label: '存储管理', href: '/admin/storage', icon: Database },
  { label: '审计日志', href: '/admin/audit-logs', icon: FileText },
  { label: '系统设置', href: '/admin/settings', icon: Settings },
];

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

  return (
    <aside className="w-64 bg-card border-r border-border flex flex-col shrink-0 overflow-hidden">
      {/* Navigation - 可滚动 */}
      <nav className="flex-1 overflow-y-auto py-4 px-3">
        <ul className="space-y-1">
          {navItems.map((item) => {
            const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
            const Icon = item.icon;

            return (
              <li key={item.href}>
                <Link
                  href={item.href}
                  className={cn(
                    'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                    isActive
                      ? 'bg-primary/10 text-primary'
                      : 'text-muted-foreground hover:bg-accent hover:text-foreground'
                  )}
                >
                  <Icon className="h-4 w-4" />
                  {item.label}
                </Link>
              </li>
            );
          })}
        </ul>
      </nav>

      {/* Back to App - 固定在底部 */}
      <div className="p-3 border-t border-border shrink-0">
        <Link
          href="/"
          className="flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground transition-colors"
        >
          <ArrowLeft className="h-4 w-4" />
          返回应用
        </Link>
      </div>
    </aside>
  );
}

export default AdminSidebar;
