'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { cn } from '@/lib/utils';
import { useSidebar } from '@/store/zustand/use-sidebar';
import {
  LayoutDashboard,
  Users,
  Settings,
  Building2,
  FileBarChart,
  ClipboardList,
  ChevronLeft,
  ChevronRight,
  ArrowLeftRight,
  Bot,
  Zap,
  HandCoins,
  FileSpreadsheet,
  SendHorizontal,
  HardDrive,
  Repeat,
  Bell,
} from 'lucide-react';
import { Button } from '@/components/ui/button';

const menuItems = [
  { name: '仪表盘', href: '/dashboard', icon: LayoutDashboard },
  { name: '用户管理', href: '/users', icon: Users },
  { name: '交易管理', href: '/trading', icon: ArrowLeftRight },
  { name: '兑换记录', href: '/exchange-records', icon: Repeat },
  { name: 'P2P划转', href: '/p2p-transfers', icon: SendHorizontal },
  { name: '做市商管理', href: '/market-maker', icon: Bot },
  { name: 'C2C Bot', href: '/c2c-bot', icon: Zap },
  { name: '手工补发', href: '/manual-mining', icon: HandCoins },
  { name: '批量补发', href: '/batch-mining', icon: FileSpreadsheet },
  { name: '通知管理', href: '/notifications', icon: Bell },
  { name: '配置管理', href: '/configs', icon: Settings },
  { name: '系统账户', href: '/system-accounts', icon: Building2 },
  { name: '报表统计', href: '/reports', icon: FileBarChart },
  { name: '审计日志', href: '/audit-logs', icon: ClipboardList },
  { name: '数据快照', href: '/snapshots', icon: HardDrive },
];

export function Sidebar() {
  const pathname = usePathname();
  const { isCollapsed, toggle } = useSidebar();

  return (
    <aside
      className={cn(
        'fixed left-0 top-0 z-40 h-screen border-r bg-card transition-all duration-300',
        isCollapsed ? 'w-16' : 'w-64'
      )}
    >
      <div className="flex h-full flex-col">
        <div className="flex h-16 items-center justify-between border-b px-4">
          {!isCollapsed && <span className="text-lg font-semibold text-primary">挖矿管理后台</span>}
          <Button variant="ghost" size="icon" onClick={toggle} className="h-8 w-8">
            {isCollapsed ? <ChevronRight className="h-4 w-4" /> : <ChevronLeft className="h-4 w-4" />}
          </Button>
        </div>

        <nav className="flex-1 space-y-1 p-2">
          {menuItems.map((item) => {
            const isActive = pathname === item.href || pathname.startsWith(`${item.href}/`);
            return (
              <Link
                key={item.href}
                href={item.href}
                className={cn(
                  'flex items-center gap-3 rounded-lg px-3 py-2 text-sm transition-colors',
                  isActive
                    ? 'bg-primary text-primary-foreground'
                    : 'text-muted-foreground hover:bg-muted hover:text-foreground'
                )}
              >
                <item.icon className="h-5 w-5 shrink-0" />
                {!isCollapsed && <span>{item.name}</span>}
              </Link>
            );
          })}
        </nav>
      </div>
    </aside>
  );
}
