import { useState } from 'react';
import { 
  Box, 
  Container, 
  Heading, 
  Text, 
  SimpleGrid, 
  VStack, 
  HStack,
  Button,
  Image,
  Badge,
  useColorModeValue,
  Icon,
  Divider,
  AspectRatio,
} from '@chakra-ui/react';
import { FiCheck, FiExternalLink } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom';

interface StyleOption {
  id: 'unified' | 'magazine' | 'pro' | 'edge';
  name: string;
  description: string;
  features: string[];
  recommended: boolean;
  imageUrl: string; // Will be a placeholder path that user will fill
}

const STYLE_OPTIONS: StyleOption[] = [
  {
    id: 'unified',
    name: 'Unified',
    description: 'Klasický a univerzální styl s grid layoutem, ideální pro většinu klubů',
    features: [
      'Grid layout pro články',
      'Panel nejbližšího zápasu',
      'Tři sloupce obsahu',
      'Sekce sponzorů',
    ],
    recommended: true,
    imageUrl: '/dist/img/style-preview-unified.jpg', // Placeholder - user will create
  },
  {
    id: 'magazine',
    name: 'Magazine',
    description: 'Moderní magazínový styl s barevnými pruhy a dynamickým layoutem',
    features: [
      'Barevné klubové pruhy',
      'Magazínový header',
      'Různé velikosti karet',
      'Moderní navigace',
    ],
    recommended: false,
    imageUrl: '/dist/img/style-preview-magazine.jpg', // Placeholder - user will create
  },
  {
    id: 'pro',
    name: 'Pro',
    description: 'Prémiový styl s fullscreen hero obrazem pro maximální dojem',
    features: [
      'Fullscreen hero slideshow',
      'Premium vzhled',
      'Horizontální scrollery',
      'Velké vizuální prvky',
    ],
    recommended: false,
    imageUrl: '/dist/img/style-preview-pro.jpg', // Placeholder - user will create
  },
  {
    id: 'edge',
    name: 'Edge',
    description: 'Minimalistický a moderní full-width design',
    features: [
      'Full-width layout',
      'Minimalistický design',
      'Moderní dlaždice',
      'Sticky navigace',
    ],
    recommended: false,
    imageUrl: '/dist/img/style-preview-edge.jpg', // Placeholder - user will create
  },
];

// Mock data for Bizoni UH club
const MOCK_CLUB_DATA = {
  clubId: '441d3783-06aa-436a-b438-359300ee0371',
  clubName: 'FC Bizoni UH',
  clubLogo: '/dist/img/logo-club-empty.svg', // You can add actual logo
  primaryColor: '#1e40af',
  secondaryColor: '#dc2626',
  youtube: 'https://www.youtube.com/@FCBizoniUH',
  instagram: 'https://www.instagram.com/fcbizoni_uh/',
  facebook: 'https://www.facebook.com/bizoniuh/?locale=cs_CZ',
  gallery: 'https://eu.zonerama.com/Fcbizoni/1419417',
  maps: 'https://www.google.com/maps/place/Sportovi%C5%A1t%C4%9B+m%C4%9Bsta+Uhersk%C3%A9+Hradi%C5%A1t%C4%9B/@49.066982,17.4702993,19.5z/data=!4m6!3m5!1s0x4713144f4e888bd3:0xf6b552dcecd165df!8m2!3d49.0669271!4d17.4708283!16s%2Fg%2F1tdvc9kh?entry=ttu&g_ep=EgoyMDI1MTAwOC4wIKXMDSoASAFQAw%3D%3D',
  articles: [
    { title: 'Velké vítězství v derby', date: '15. března 2024', category: 'Zápasy' },
    { title: 'Nová posila v týmu', date: '12. března 2024', category: 'Aktuality' },
    { title: 'Pozvánka na trénink mládeže', date: '10. března 2024', category: 'Mládež' },
  ],
  nextMatch: {
    opponent: 'TJ Slovácko B',
    date: '2024-03-20',
    time: '17:00',
    location: 'Sportovište města Uherské Hradiště',
  },
};

const StylePreviewPage: React.FC = () => {
  const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
  const navigate = useNavigate();
  const bg = useColorModeValue('white', 'gray.800');
  const borderCol = useColorModeValue('gray.200', 'gray.600');

  const handleSelectStyle = (styleId: string) => {
    setSelectedStyle(styleId);
  };

  const handleContinue = () => {
    if (selectedStyle) {
      // Navigate back to setup with selected style
      navigate(`/setup?style=${selectedStyle}`);
    }
  };

  return (
    <Box minH="100vh" bg="gray.50" py={8}>
      <Container maxW="7xl">
        <VStack spacing={8} align="stretch">
          {/* Header */}
          <Box textAlign="center">
            <Heading size="2xl" mb={3}>Vyberte styl webu</Heading>
            <Text fontSize="lg" color="gray.600">
              Zvolte vzhled, který nejlépe reprezentuje váš klub. Můžete kdykoliv změnit v administraci.
            </Text>
          </Box>

          {/* Style Options Grid */}
          <SimpleGrid columns={[1, 1, 2]} spacing={8}>
            {STYLE_OPTIONS.map((style) => (
              <Box
                key={style.id}
                borderWidth={selectedStyle === style.id ? '3px' : '1px'}
                borderColor={selectedStyle === style.id ? 'blue.500' : borderCol}
                borderRadius="xl"
                overflow="hidden"
                bg={bg}
                cursor="pointer"
                onClick={() => handleSelectStyle(style.id)}
                transition="all 0.3s"
                _hover={{
                  transform: 'translateY(-4px)',
                  boxShadow: 'xl',
                  borderColor: 'blue.400',
                }}
                position="relative"
              >
                {/* Recommended Badge */}
                {style.recommended && (
                  <Badge
                    colorScheme="green"
                    position="absolute"
                    top={4}
                    right={4}
                    zIndex={2}
                    fontSize="sm"
                    px={3}
                    py={1}
                  >
                    Doporučeno
                  </Badge>
                )}

                {/* Selected Check */}
                {selectedStyle === style.id && (
                  <Box
                    position="absolute"
                    top={4}
                    left={4}
                    zIndex={2}
                    bg="blue.500"
                    color="white"
                    borderRadius="full"
                    p={2}
                  >
                    <Icon as={FiCheck} boxSize={5} />
                  </Box>
                )}

                {/* Preview Image */}
                <AspectRatio ratio={16 / 9}>
                  <Image
                    src={style.imageUrl}
                    alt={`${style.name} style preview`}
                    objectFit="cover"
                    fallback={
                      <Box bg="gray.200" w="100%" h="100%" display="flex" alignItems="center" justifyContent="center">
                        <VStack spacing={2}>
                          <Text fontWeight="bold" fontSize="2xl" color="gray.500">
                            {style.name}
                          </Text>
                          <Text fontSize="sm" color="gray.500">
                            Náhled bude přidán
                          </Text>
                        </VStack>
                      </Box>
                    }
                  />
                </AspectRatio>

                {/* Style Info */}
                <VStack align="stretch" p={6} spacing={4}>
                  <HStack justify="space-between" align="flex-start">
                    <VStack align="stretch" spacing={1} flex={1}>
                      <Heading size="lg">{style.name}</Heading>
                      <Text fontSize="sm" color="gray.600">
                        {style.description}
                      </Text>
                    </VStack>
                  </HStack>

                  <Divider />

                  {/* Features */}
                  <VStack align="stretch" spacing={2}>
                    <Text fontWeight="semibold" fontSize="sm" color="gray.700">
                      Klíčové vlastnosti:
                    </Text>
                    {style.features.map((feature, idx) => (
                      <HStack key={idx} spacing={2}>
                        <Icon as={FiCheck} color="green.500" />
                        <Text fontSize="sm">{feature}</Text>
                      </HStack>
                    ))}
                  </VStack>

                  {/* Live Preview Button */}
                  <Button
                    variant="outline"
                    leftIcon={<FiExternalLink />}
                    onClick={(e) => {
                      e.stopPropagation();
                      // Open live preview in new window
                      window.open(`/?style=${style.id}&preview=1`, '_blank');
                    }}
                    size="sm"
                  >
                    Živý náhled
                  </Button>
                </VStack>
              </Box>
            ))}
          </SimpleGrid>

          {/* Mock Preview Section */}
          <Box bg={bg} borderRadius="xl" borderWidth="1px" borderColor={borderCol} p={8}>
            <Heading size="lg" mb={4}>Náhled s vašimi daty</Heading>
            <Text fontSize="sm" color="gray.600" mb={6}>
              Ukázka stylu {selectedStyle ? STYLE_OPTIONS.find(s => s.id === selectedStyle)?.name : 'vyberte styl výše'} s ukázkovými daty klubu FC Bizoni UH
            </Text>

            {selectedStyle && (
              <Box>
                {/* Mock club header */}
                <HStack spacing={4} mb={6} p={4} bg="gray.50" borderRadius="lg">
                  <Image 
                    src={MOCK_CLUB_DATA.clubLogo} 
                    alt={MOCK_CLUB_DATA.clubName}
                    boxSize="64px"
                    borderRadius="md"
                  />
                  <VStack align="stretch" spacing={1}>
                    <Heading size="md">{MOCK_CLUB_DATA.clubName}</Heading>
                    <HStack spacing={3}>
                      <Badge colorScheme="blue">Fotbal</Badge>
                      <Badge colorScheme="green">Aktivní</Badge>
                    </HStack>
                  </VStack>
                </HStack>

                {/* Mock articles preview */}
                <SimpleGrid columns={[1, 2, 3]} spacing={4}>
                  {MOCK_CLUB_DATA.articles.map((article, idx) => (
                    <Box
                      key={idx}
                      p={4}
                      borderWidth="1px"
                      borderRadius="lg"
                      borderColor={borderCol}
                      _hover={{ boxShadow: 'md' }}
                    >
                      <Badge colorScheme="blue" mb={2}>{article.category}</Badge>
                      <Heading size="sm" mb={1} noOfLines={2}>
                        {article.title}
                      </Heading>
                      <Text fontSize="xs" color="gray.500">{article.date}</Text>
                    </Box>
                  ))}
                </SimpleGrid>

                {/* Next match preview */}
                <Box mt={6} p={6} bg="blue.50" borderRadius="lg" borderWidth="1px" borderColor="blue.200">
                  <Text fontSize="sm" fontWeight="semibold" color="blue.700" mb={2}>
                    NEJBLIŽŠÍ ZÁPAS
                  </Text>
                  <Heading size="lg" mb={2}>{MOCK_CLUB_DATA.nextMatch.opponent}</Heading>
                  <HStack spacing={4} fontSize="sm" color="gray.700">
                    <Text>{new Date(MOCK_CLUB_DATA.nextMatch.date).toLocaleDateString('cs-CZ')}</Text>
                    <Text>•</Text>
                    <Text>{MOCK_CLUB_DATA.nextMatch.time}</Text>
                  </HStack>
                  <Text fontSize="sm" color="gray.600" mt={2}>
                    {MOCK_CLUB_DATA.nextMatch.location}
                  </Text>
                </Box>

                {/* Social links preview */}
                <HStack spacing={4} mt={6} justify="center">
                  <Button size="sm" colorScheme="facebook" leftIcon={<FiExternalLink />}>
                    Facebook
                  </Button>
                  <Button size="sm" colorScheme="pink" leftIcon={<FiExternalLink />}>
                    Instagram
                  </Button>
                  <Button size="sm" colorScheme="red" leftIcon={<FiExternalLink />}>
                    YouTube
                  </Button>
                </HStack>
              </Box>
            )}
          </Box>

          {/* Action Buttons */}
          <HStack justify="space-between">
            <Button
              variant="ghost"
              onClick={() => navigate('/setup')}
            >
              Zpět na nastavení
            </Button>
            <Button
              colorScheme="blue"
              size="lg"
              isDisabled={!selectedStyle}
              onClick={handleContinue}
              rightIcon={<Icon as={FiCheck} />}
            >
              Pokračovat s {selectedStyle ? STYLE_OPTIONS.find(s => s.id === selectedStyle)?.name : 'vybraným stylem'}
            </Button>
          </HStack>
        </VStack>
      </Container>
    </Box>
  );
};

export default StylePreviewPage;
