'use client';

import { BrandMark } from '@/ui/BrandMark';
import { NavLink } from '@/ui/NavLink';
import { routes } from '@/lib/routing/RouteConfig';
import { Box } from '@/ui/Box';
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';

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 (
    <Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-white/10 relative transition-all duration-300 ease-in-out">
      {/* Brand Header */}
      <Box p={6} pb={8} display="flex" alignItems="center" justifyContent={isCollapsed ? 'center' : 'start'}>
        <BrandMark collapsed={isCollapsed} />
      </Box>

      {/* Navigation */}
      <Box flex={1} px={isCollapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300">
        <Stack gap={8}>
          <Box>
            {!isCollapsed && (
              <Text size="xs" className="px-1 mb-3 text-text-low/40 font-mono uppercase tracking-widest text-[10px] font-bold transition-opacity duration-300">
                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>
          </Box>

          <Box>
            {!isCollapsed && (
              <Text size="xs" className="px-1 mb-3 text-text-low/40 font-mono uppercase tracking-widest text-[10px] font-bold transition-opacity duration-300">
                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>
          </Box>
        </Stack>
      </Box>

      {/* Bottom Actions */}
      <Box className="h-14 flex items-center px-4 border-t border-white/10">
        <button 
          onClick={toggleCollapse}
          className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-start'} gap-2 text-text-low hover:text-text-high transition-colors px-2 py-2 rounded-md hover:bg-white/5 w-full group`}
          title={isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
        >
          {isCollapsed ? (
            <ChevronRight size={16} className="group-hover:translate-x-1 transition-transform" />
          ) : (
            <>
              <ChevronLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
              <Text size="xs" className="font-medium">Collapse</Text>
            </>
          )}
        </button>
      </Box>
    </Box>
  );
}
