import React, { useEffect, useState } from 'react';
import { 
  Box, 
  Container, 
  Heading, 
  SimpleGrid, 
  Text, 
  Image, 
  Badge, 
  VStack, 
  HStack,
  Link as ChakraLink,
  useColorModeValue,
  Spinner,
  Center
} from '@chakra-ui/react';
import MainLayout from '../components/layout/MainLayout';
import { getClothing, ClothingItem } from '../services/clothing';
import { FiExternalLink } from 'react-icons/fi';
import { Helmet } from 'react-helmet-async';

const ClothingPage: React.FC = () => {
  const [items, setItems] = useState<ClothingItem[]>([]);
  const [loading, setLoading] = useState(true);
  const cardBg = useColorModeValue('white', 'gray.800');
  const borderColor = useColorModeValue('gray.200', 'gray.700');

  useEffect(() => {
    const fetchItems = async () => {
      try {
        const data = await getClothing();
        setItems(data);
      } catch (e) {
        console.error('Failed to fetch clothing items:', e);
      } finally {
        setLoading(false);
      }
    };

    fetchItems();
  }, []);

  if (loading) {
    return (
      <MainLayout>
        <Container maxW="7xl" py={8}>
          <Center minH="50vh">
            <Spinner size="xl" color="blue.500" />
          </Center>
        </Container>
      </MainLayout>
    );
  }

  return (
    <MainLayout>
      <Helmet>
        <title>Oblečení a Fan Shop</title>
        <meta name="description" content="Podpořte svůj tým! Oblečení, dresy a merchandise našeho klubu." />
      </Helmet>
      
      <Container maxW="7xl" py={8}>
        <VStack spacing={6} align="stretch">
          <Box>
            <Heading as="h1" size="xl" mb={3}>
              Oblečení a Fan Shop
            </Heading>
            <Text fontSize="lg" color="gray.600">
              Podpořte svůj tým! Prohlédněte si naši nabídku dresů, triček a dalšího merchandisingu.
            </Text>
          </Box>

          {items.length === 0 ? (
            <Center minH="40vh">
              <VStack spacing={3}>
                <Text fontSize="lg" color="gray.500">
                  Zatím zde nejsou žádné položky.
                </Text>
                <Text fontSize="sm" color="gray.400">
                  Brzy zde najdete naše oblečení a merchandise.
                </Text>
              </VStack>
            </Center>
          ) : (
            <SimpleGrid columns={{ base: 1, sm: 2, md: 3, lg: 4 }} spacing={6}>
              {items.map((item) => (
                <ChakraLink
                  key={item.id}
                  href={item.url || '#'}
                  isExternal={!!item.url}
                  _hover={{ textDecoration: 'none' }}
                  role="group"
                >
                  <Box
                    bg={cardBg}
                    borderWidth="1px"
                    borderColor={borderColor}
                    borderRadius="xl"
                    overflow="hidden"
                    transition="all 0.3s"
                    _groupHover={{
                      transform: 'translateY(-4px)',
                      boxShadow: 'lg',
                    }}
                  >
                    {/* Image */}
                    <Box position="relative" paddingTop="100%" overflow="hidden">
                      <Image
                        src={item.image_url}
                        alt={item.title}
                        position="absolute"
                        top={0}
                        left={0}
                        width="100%"
                        height="100%"
                        objectFit="cover"
                        fallbackSrc="/images/placeholder-clothing.jpg"
                      />
                      {item.url && (
                        <Box
                          position="absolute"
                          top={2}
                          right={2}
                          bg="white"
                          borderRadius="full"
                          p={2}
                          opacity={0}
                          _groupHover={{ opacity: 1 }}
                          transition="opacity 0.2s"
                        >
                          <FiExternalLink size={16} />
                        </Box>
                      )}
                    </Box>

                    {/* Content */}
                    <VStack align="stretch" p={4} spacing={2}>
                      <Heading as="h3" size="sm" noOfLines={2}>
                        {item.title}
                      </Heading>

                      {item.description && (
                        <Text fontSize="sm" color="gray.600" noOfLines={2}>
                          {item.description}
                        </Text>
                      )}

                      <HStack justify="space-between" mt={2}>
                        {item.price && item.price > 0 ? (
                          <Badge colorScheme="blue" fontSize="md" px={2} py={1}>
                            {item.price} {item.currency || 'Kč'}
                          </Badge>
                        ) : (
                          <Box />
                        )}
                        {item.url && (
                          <Text fontSize="xs" color="blue.500">
                            Zobrazit →
                          </Text>
                        )}
                      </HStack>
                    </VStack>
                  </Box>
                </ChakraLink>
              ))}
            </SimpleGrid>
          )}
        </VStack>
      </Container>
    </MainLayout>
  );
};

export default ClothingPage;
