'use client';

import { Box } from '@/ui/Box';
import { DashboardRail } from '@/ui/DashboardRail';
import { Stack } from '@/ui/Stack';
import { Text } from '@/ui/Text';
import { Calendar, Home, Layout, Settings, Trophy, Users } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

export interface GlobalSidebarViewData {}

export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
  const pathname = usePathname();

  const navItems = [
    { label: 'Dashboard', href: '/', icon: Home },
    { label: 'Leagues', href: '/leagues', icon: Trophy },
    { label: 'Teams', href: '/teams', icon: Users },
    { label: 'Races', href: '/races', icon: Calendar },
    { label: 'Leaderboards', href: '/leaderboards', icon: Layout },
    { label: 'Settings', href: '/settings', icon: Settings },
  ];

  return (
    <DashboardRail>
      <Box py={6}>
        <Box px={6} mb={8}>
          <Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
            NAVIGATION
          </Text>
        </Box>
        <Stack as="nav" flexGrow={1} px={3} direction="col" gap={1}>
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            const Icon = item.icon;
            return (
              <Box
                key={item.href}
                as={Link}
                href={item.href}
                display="flex"
                alignItems="center"
                gap={3}
                px={3}
                py={2}
                rounded="md"
                transition
                bg={isActive ? 'primary-accent/10' : 'transparent'}
                color={isActive ? 'primary-accent' : 'text-gray-400'}
                hoverBg={isActive ? 'primary-accent/10' : 'white/5'}
                hoverTextColor={isActive ? 'primary-accent' : 'white'}
                group
              >
                <Icon size={20} color={isActive ? '#198CFF' : '#6B7280'} />
                <Text weight="medium">{item.label}</Text>
                {isActive && (
                  <Box ml="auto" w="4px" h="16px" bg="primary-accent" rounded="full" shadow="[0_0_8px_rgba(25,140,255,0.5)]" />
                )}
              </Box>
            );
          })}
        </Stack>
      </Box>
    </DashboardRail>
  );
}