import { 
  Box, 
  Flex, 
  IconButton, 
  useColorMode, 
  Text, 
  Menu, 
  MenuButton, 
  MenuList, 
  MenuItem, 
  Avatar, 
  useColorModeValue,
  HStack,
  BoxProps,
  Tooltip,
  Link as ChakraLink
} from '@chakra-ui/react';
import { FaBars, FaMoon, FaSun, FaSignOutAlt, FaUserCog, FaBook } from 'react-icons/fa';
import { useAuth } from '../../contexts/AuthContext';
import { User } from '../../types';
import { ReactNode } from 'react';
import { Link as RouterLink } from 'react-router-dom';

interface AdminHeaderProps extends BoxProps {
  onMenuToggle: () => void;
  rightContent?: ReactNode;
}

const AdminHeader = ({ onMenuToggle, rightContent, ...rest }: AdminHeaderProps) => {
  const { colorMode, toggleColorMode } = useColorMode();
  const { user, logout } = useAuth();
  const bg = useColorModeValue('white', '#1a1d29');
  const borderColor = useColorModeValue('gray.200', 'rgba(255, 255, 255, 0.12)');
  const textColor = useColorModeValue('gray.800', '#e2e8f0');
  const userData = user as User | null;
  const headerShadow = useColorModeValue('sm', 'none');

  return (
    <Box
      as="header"
      position="sticky"
      top={0}
      left={0}
      right={0}
      bg={bg}
      borderBottomWidth="1px"
      borderColor={borderColor}
      zIndex={20}
      height="60px"
      px={{ base: 3, md: 6 }}
      boxShadow={headerShadow}
      transition="all 0.2s"
      {...rest}
    >
      <Flex h="100%" alignItems="center" justifyContent="space-between">
        <Flex alignItems="center">
          <IconButton
            display={{ base: 'flex', md: 'none' }}
            aria-label="Otevřít menu"
            icon={<FaBars />}
            variant="ghost"
            onClick={onMenuToggle}
            mr={2}
          />
          <Text fontSize="xl" fontWeight="bold" display={{ base: 'none', md: 'block' }}>
            Fotbal Admin
          </Text>
        </Flex>

        <HStack spacing={4}>
          {rightContent || (
            <>
              <Tooltip label="Dokumentace" hasArrow>
                <ChakraLink as={RouterLink} to="/admin/docs">
                  <IconButton
                    aria-label="Dokumentace"
                    icon={<FaBook />}
                    variant="ghost"
                    size="sm"
                    mr={1}
                  />
                </ChakraLink>
              </Tooltip>
              <IconButton
                aria-label="Přepnout barevné schéma"
                icon={colorMode === 'light' ? <FaMoon /> : <FaSun />}
                variant="ghost"
                onClick={toggleColorMode}
                size="sm"
              />
              
              <Menu>
                <MenuButton>
                  <Avatar 
                    size="sm" 
                    name={userData?.name || 'Uživatel'} 
                    src={userData?.avatar}
                    cursor="pointer"
                    border="2px solid"
                    borderColor={useColorModeValue('gray.200', 'gray.600')}
                    _hover={{
                      transform: 'scale(1.05)',
                      transition: 'transform 0.2s'
                    }}
                  />
                </MenuButton>
                <MenuList zIndex={30}>
                  {userData?.name && (
                    <Box px={3} py={2} borderBottomWidth="1px" borderColor={borderColor}>
                      <Text fontWeight="medium">{userData.name}</Text>
                      <Text fontSize="sm" color="gray.500">{userData.email}</Text>
                    </Box>
                  )}
                  <MenuItem 
                    icon={<FaUserCog />}
                    _hover={{
                      bg: useColorModeValue('gray.100', 'gray.700')
                    }}
                  >
                    Můj účet
                  </MenuItem>
                  <MenuItem 
                    icon={<FaSignOutAlt />}
                    color="red.500"
                    _hover={{
                      bg: useColorModeValue('red.50', 'red.900')
                    }}
                    onClick={logout}
                  >
                    Odhlásit se
                  </MenuItem>
                </MenuList>
              </Menu>
            </>
          )}
        </HStack>
      </Flex>
    </Box>
  );
};

export default AdminHeader;
