import { Box, Heading, Text, HStack, Button, ButtonProps, useColorModeValue, VStack, Icon, Flex, Badge } from '@chakra-ui/react';
import { ReactElement, ReactNode } from 'react';

interface PageHeaderProps {
  title: string;
  description?: string;
  icon?: any; // Icon component
  badge?: {
    label: string;
    colorScheme?: string;
  };
  action?: {
    label: string;
    icon?: ReactElement;
    onClick: () => void;
    colorScheme?: ButtonProps['colorScheme'];
    isLoading?: boolean;
    isDisabled?: boolean;
  };
  children?: ReactNode;
}

export const PageHeader = ({
  title,
  description,
  icon,
  badge,
  action,
  children,
}: PageHeaderProps) => {
  const borderColor = useColorModeValue('gray.200', 'gray.700');
  const iconBg = useColorModeValue('blue.50', 'blue.900');
  const iconColor = useColorModeValue('blue.600', 'blue.300');
  
  return (
    <Box 
      mb={8} 
      pb={6} 
      borderBottomWidth="1px" 
      borderColor={borderColor}
    >
      <Flex justify="space-between" align="flex-start" wrap="wrap" gap={4}>
        <HStack spacing={4} align="flex-start" flex={1}>
          {icon && (
            <Box 
              p={3} 
              bg={iconBg} 
              borderRadius="xl"
              display={{ base: 'none', md: 'block' }}
            >
              <Icon as={icon} boxSize={6} color={iconColor} />
            </Box>
          )}
          <VStack align="flex-start" spacing={2} flex={1}>
            <HStack spacing={3} wrap="wrap">
              <Heading 
                size="xl" 
                fontWeight="extrabold"
                bgGradient={useColorModeValue(
                  'linear(to-r, gray.800, gray.600)',
                  'linear(to-r, white, gray.300)'
                )}
                bgClip="text"
              >
                {title}
              </Heading>
              {badge && (
                <Badge 
                  colorScheme={badge.colorScheme || 'blue'} 
                  fontSize="sm" 
                  px={3} 
                  py={1} 
                  borderRadius="full"
                >
                  {badge.label}
                </Badge>
              )}
            </HStack>
            {description && (
              <Text 
                color={useColorModeValue('gray.600', 'gray.400')}
                fontSize="md"
                maxW="2xl"
              >
                {description}
              </Text>
            )}
          </VStack>
        </HStack>
        
        {action && (
          <Button
            leftIcon={action.icon}
            onClick={action.onClick}
            colorScheme={action.colorScheme || 'blue'}
            isLoading={action.isLoading}
            isDisabled={action.isDisabled}
            size="lg"
            shadow="sm"
            _hover={{ shadow: 'md', transform: 'translateY(-1px)' }}
            transition="all 0.2s"
          >
            {action.label}
          </Button>
        )}
      </Flex>
      
      {children}
    </Box>
  );
};
