import { Box, Flex, Image, Separator, Stack, Text } from '@chakra-ui/react'
import { CalledItButton } from '../components'
import { navigationItems, type PageId } from '../config/navigation'

type ShellSidebarProps = {
  activePage: PageId
  collapsed: boolean
  isAdmin: boolean
  onNavigate: (path: string) => void
}

export function ShellSidebar({
  activePage,
  collapsed,
  isAdmin,
  onNavigate,
}: ShellSidebarProps) {
  const regularItems = navigationItems.filter((item) => !item.adminOnly)
  const adminItems = navigationItems.filter((item) => item.adminOnly)

  const renderItem = (item: (typeof navigationItems)[number]) => {
    const isActive = item.id === activePage
    const Icon = item.icon

    return (
      <CalledItButton
        key={item.id}
        justifyContent={collapsed ? 'center' : 'flex-start'}
        variant={isActive ? 'subtle' : 'ghost'}
        colorPalette={isActive ? 'brand' : undefined}
        onClick={() => onNavigate(item.path)}
        width="full"
        px={collapsed ? '0' : undefined}
        minW={collapsed ? '0' : undefined}
      >
        <Icon size={18} />
        {!collapsed && item.label}
      </CalledItButton>
    )
  }

  return (
    <Box
      as="aside"
      width={collapsed ? '72px' : '280px'}
      minW={collapsed ? '72px' : '280px'}
      borderRightWidth="1px"
      borderColor="border"
      bg="subtle"
      transition="width 0.2s ease"
      position="sticky"
      top="0"
      h="100vh"
      overflowY="auto"
    >
      <Stack h="full" gap="6" px={collapsed ? '3' : '4'} py="5">
        <Flex
          as="button"
          onClick={() => onNavigate('/')}
          align="center"
          gap={collapsed ? '0' : '3'}
          justify="center"
          px="2"
          bg="transparent"
          border="none"
          cursor="pointer"
        >
          <Image
            src="/CalledIt.png"
            alt="Called It logo"
            h="10"
            w="10"
            rounded="xl"
            objectFit="cover"
            flexShrink="0"
          />
          {!collapsed && (
            <Text
              color="accent"
              fontSize="lg"
              fontWeight="700"
              letterSpacing="0.04em"
            >
              CalledIt
            </Text>
          )}
        </Flex>

        <Stack gap="2">
          {regularItems.map(renderItem)}
        </Stack>

        {isAdmin && (
          <Stack gap="2" mt="auto">
            <Separator borderColor="border" />
            {!collapsed && (
              <Text fontSize="xs" fontWeight="600" color="muted" px="3" textTransform="uppercase" letterSpacing="0.08em">
                Admin
              </Text>
            )}
            {adminItems.map(renderItem)}
          </Stack>
        )}
      </Stack>
    </Box>
  )
}
