import { Box, Flex, Heading, Stack, Text } from '@chakra-ui/react'
import { CalledItAvatar, CalledItButton, CalledItCard } from '../components'
import { CompetitionSelector } from '../features/competitions/CompetitionSelector'
import type { CompetitionResponse } from '../features/competitions/competitionApi'
import type { NavigationItem } from '../config/navigation'
import type { AuthSession } from '../types/auth'

type ShellHeaderProps = {
  currentPage: NavigationItem
  session: AuthSession
  sidebarCollapsed: boolean
  avatarMenuOpen: boolean
  selectedCompetitionId: string | null
  competitions: CompetitionResponse[]
  competitionsLoading: boolean
  competitionIdsWithBets: number[]
  onSidebarToggle: () => void
  onAvatarMenuToggle: () => void
  onLogout: () => void
  onCompetitionChange: (id: string | null) => void
}

export function ShellHeader({
  currentPage,
  session,
  sidebarCollapsed,
  avatarMenuOpen,
  selectedCompetitionId,
  competitions,
  competitionsLoading,
  competitionIdsWithBets,
  onSidebarToggle,
  onAvatarMenuToggle,
  onLogout,
  onCompetitionChange,
}: ShellHeaderProps) {
  return (
    <Flex
      as="header"
      align="center"
      justify="space-between"
      gap="4"
      px={{ base: '5', md: '8' }}
      py="4"
      borderBottomWidth="1px"
      borderColor="border"
      bg="panel"
      position="sticky"
      top="0"
      zIndex="1"
    >
      <Flex align="center" gap="3">
        <CalledItButton
          variant="outline"
          borderColor="border"
          aria-label={sidebarCollapsed ? 'Expand sidebar' : 'Collapse sidebar'}
          onClick={onSidebarToggle}
          minW="10"
          px="0"
        >
          <Stack gap="1" aria-hidden="true">
            <Box h="2px" w="18px" bg="currentColor" rounded="full" />
            <Box h="2px" w="18px" bg="currentColor" rounded="full" />
            <Box h="2px" w="18px" bg="currentColor" rounded="full" />
          </Stack>
        </CalledItButton>
        <Heading size="md" color="heading">
          {currentPage.title}
        </Heading>
      </Flex>

      <Flex align="center" gap="4">
        <CompetitionSelector
          competitions={competitions}
          loading={competitionsLoading}
          competitionIdsWithBets={competitionIdsWithBets}
          value={selectedCompetitionId ? [selectedCompetitionId] : []}
          onValueChange={({ value }) => onCompetitionChange(value[0] ?? null)}
        />

        <Box position="relative">
          <Flex align="center" gap="3">
            <Text color="muted" display={{ base: 'none', md: 'block' }}>
              {session.username}
            </Text>
            <button
              type="button"
              onClick={onAvatarMenuToggle}
              aria-label="Open account menu"
              style={{
                background: 'transparent',
                border: 'none',
                padding: 0,
                cursor: 'pointer',
              }}
            >
              <CalledItAvatar name={session.username} />
            </button>
          </Flex>

          {avatarMenuOpen ? (
            <CalledItCard
              position="absolute"
              right="0"
              top="calc(100% + 12px)"
              minW="240px"
              zIndex="2"
              shadow="md"
            >
              <Stack gap="4">
                <Stack gap="0">
                  <Text color="heading" fontWeight="semibold">
                    {session.username}
                  </Text>
                  <Text color="muted" fontSize="sm">
                    {session.expiresAtUtc
                      ? `Token expires at ${session.expiresAtUtc}`
                      : 'Session active'}
                  </Text>
                </Stack>
                <CalledItButton
                  variant="outline"
                  borderColor="border"
                  onClick={onLogout}
                >
                  Logout
                </CalledItButton>
              </Stack>
            </CalledItCard>
          ) : null}
        </Box>
      </Flex>
    </Flex>
  )
}
