import React from 'react';
import { Box, Flex, HStack, Image, Text, Container, useColorModeValue } from '@chakra-ui/react';
import { Link as RouterLink } from 'react-router-dom';

interface HeaderVariantsProps {
  variant: 'unified' | 'edge' | 'minimal' | 'modern';
  clubName?: string;
  clubLogo?: string;
  clubId?: string;
}

const HeaderVariants: React.FC<HeaderVariantsProps> = ({
  variant = 'unified',
  clubName,
  clubLogo,
  clubId,
}) => {
  const displayLogo = clubId 
    ? `http://logoapi.sportcreative.eu/logos/${clubId}?format=svg`
    : clubLogo || '/images/club-logo.png';

  // Unified variant - classic header
  if (variant === 'unified') {
    return (
      <Box
        bg={useColorModeValue('white', 'gray.800')}
        borderBottom="1px"
        borderColor={useColorModeValue('gray.200', 'gray.700')}
        py={4}
      >
        <Container maxW="7xl">
          <Flex align="center" justify="space-between">
            <HStack as={RouterLink} to="/" spacing={4}>
              {displayLogo && (
                <Image
                  src={displayLogo}
                  alt={clubName || 'Club'}
                  boxSize="48px"
                  objectFit="contain"
                  borderRadius="full"
                  borderWidth="2px"
                  borderColor="brand.primary"
                  style={{
                    padding: displayLogo.includes('logoapi.sportcreative.eu') ? '4px' : '0px',
                    boxSizing: 'border-box'
                  }}
                />
              )}
              <Box>
                <Text fontSize="2xl" fontWeight="bold" color={useColorModeValue('gray.800', 'white')}>
                  {clubName || 'MyClub'}
                </Text>
                <Text fontSize="xs" color="gray.500">Official Website</Text>
              </Box>
            </HStack>
          </Flex>
        </Container>
      </Box>
    );
  }

  // Edge variant - modern with gradient
  if (variant === 'edge') {
    return (
      <Box
        bgGradient="linear(to-r, brand.primary, brand.secondary)"
        position="relative"
        overflow="hidden"
      >
        <Box
          position="absolute"
          top={0}
          left={0}
          right={0}
          bottom={0}
          bg="blackAlpha.300"
          backdropFilter="blur(8px)"
        />
        <Container maxW="7xl" position="relative" py={6}>
          <Flex align="center" justify="center" direction="column">
            {displayLogo && (
              <Image
                src={displayLogo}
                alt={clubName || 'Club'}
                boxSize="80px"
                objectFit="contain"
                mb={3}
                filter="drop-shadow(0 4px 6px rgba(0,0,0,0.3))"
                style={{
                  padding: displayLogo.includes('logoapi.sportcreative.eu') ? '8px' : '0px',
                  boxSizing: 'border-box'
                }}
              />
            )}
            <Text fontSize="3xl" fontWeight="bold" color="white" textShadow="0 2px 4px rgba(0,0,0,0.3)">
              {clubName || 'Football Club'}
            </Text>
            <Text fontSize="sm" color="whiteAlpha.900" mt={1}>
              Official Website
            </Text>
          </Flex>
        </Container>
      </Box>
    );
  }

  // Minimal variant - clean and simple
  if (variant === 'minimal') {
    return (
      <Box bg={useColorModeValue('gray.50', 'gray.900')} py={3}>
        <Container maxW="7xl">
          <Flex align="center" justify="center">
            <HStack as={RouterLink} to="/" spacing={3}>
              {displayLogo && (
                <Image
                  src={displayLogo}
                  alt={clubName || 'Club'}
                  boxSize="36px"
                  objectFit="contain"
                  style={{
                    padding: displayLogo.includes('logoapi.sportcreative.eu') ? '3px' : '0px',
                    boxSizing: 'border-box'
                  }}
                />
              )}
              <Text fontSize="lg" fontWeight="600" color={useColorModeValue('gray.700', 'gray.200')}>
                {clubName || 'FC'}
              </Text>
            </HStack>
          </Flex>
        </Container>
      </Box>
    );
  }

  // Modern variant - bold with accent
  if (variant === 'modern') {
    return (
      <Box
        bg={useColorModeValue('white', 'gray.800')}
        borderBottom="4px"
        borderColor="brand.primary"
        boxShadow="sm"
      >
        <Container maxW="7xl" py={5}>
          <Flex align="center" justify="space-between">
            <HStack as={RouterLink} to="/" spacing={4}>
              {displayLogo && (
                <Box
                  position="relative"
                  _before={{
                    content: '""',
                    position: 'absolute',
                    top: '-4px',
                    left: '-4px',
                    right: '-4px',
                    bottom: '-4px',
                    bg: 'brand.primary',
                    opacity: 0.1,
                    borderRadius: 'full',
                  }}
                >
                  <Image
                    src={displayLogo}
                    alt={clubName || 'Club'}
                    boxSize="56px"
                    objectFit="contain"
                    borderRadius="full"
                    style={{
                      padding: displayLogo.includes('logoapi.sportcreative.eu') ? '6px' : '0px',
                      boxSizing: 'border-box'
                    }}
                  />
                </Box>
              )}
              <Box>
                <Text
                  fontSize="2xl"
                  fontWeight="900"
                  color="brand.primary"
                  letterSpacing="tight"
                >
                  {clubName || 'FOOTBALL CLUB'}
                </Text>
                <Text fontSize="xs" color="gray.500" fontWeight="600" letterSpacing="wider" textTransform="uppercase">
                  Official Website
                </Text>
              </Box>
            </HStack>
          </Flex>
        </Container>
      </Box>
    );
  }

  return null;
};

export default HeaderVariants;
