'use client';

import { BrandMark } from '@/ui/BrandMark';
import { NavLink } from '@/ui/NavLink';
import { routes } from '@/lib/routing/RouteConfig';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { 
  LayoutGrid, 
  Trophy, 
  Users, 
  Calendar, 
  Flag, 
  Home,
  ChevronLeft,
  ChevronRight
} from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useSidebar } from '@/components/layout/SidebarContext';
import { ShellSidebar } from '@/ui/shell/Shell';
import { Button } from '@/ui/Button';

export function AppSidebar() {
  const pathname = usePathname();
  const { isCollapsed, toggleCollapse } = useSidebar();

  const mainItems = [
    { label: 'Home', href: routes.public.home, icon: Home },
    { label: 'Leagues', href: routes.public.leagues, icon: Trophy },
    { label: 'Drivers', href: routes.public.drivers, icon: Users },
    { label: 'Teams', href: routes.public.teams, icon: Flag },
  ];

  const competitionItems = [
    { label: 'Races', href: routes.public.races, icon: Calendar },
    { label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
  ];

  return (
    <ShellSidebar
      collapsed={isCollapsed}
      header={<BrandMark collapsed={isCollapsed} />}
      footer={
        <Button
          icon={isCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
          onClick={toggleCollapse}
          variant="ghost"
          fullWidth
          justifyContent={isCollapsed ? 'center' : 'start'}
        >
          {!isCollapsed && "Collapse"}
        </Button>
      }
    >
      <Stack gap={8}>
        <Stack gap={3}>
          {!isCollapsed && (
            <Text size="xs" variant="low" weight="bold" uppercase>
              Platform
            </Text>
          )}
          <Stack gap={3}>
            {mainItems.map((item) => (
              <NavLink
                key={item.href}
                href={item.href}
                label={item.label}
                icon={item.icon}
                isActive={pathname === item.href}
                variant="sidebar"
                collapsed={isCollapsed}
              />
            ))}
          </Stack>
        </Stack>

        <Stack gap={3}>
          {!isCollapsed && (
            <Text size="xs" variant="low" weight="bold" uppercase>
              Competition
            </Text>
          )}
          <Stack gap={3}>
            {competitionItems.map((item) => (
              <NavLink
                key={item.href}
                href={item.href}
                label={item.label}
                icon={item.icon}
                isActive={pathname === item.href}
                variant="sidebar"
                collapsed={isCollapsed}
              />
            ))}
          </Stack>
        </Stack>
      </Stack>
    </ShellSidebar>
  );
}
