import React from 'react';
import {
  Box,
  FormControl,
  FormLabel,
  Select,
  SimpleGrid,
  Text,
  VStack,
  Badge,
  HStack,
  Switch,
  Code,
  Alert,
  AlertIcon,
  Link,
} from '@chakra-ui/react';
import { VECTOR_STYLES } from '../home/VectorMap';
import { ExternalLinkIcon } from '@chakra-ui/icons';

interface VectorMapStyleSelectorProps {
  value: string;
  onChange: (value: string) => void;
  clubPrimaryColor?: string;
  clubSecondaryColor?: string;
  showPreview?: boolean;
  useVectorMaps?: boolean;
  onToggleVectorMaps?: (enabled: boolean) => void;
}

const VectorMapStyleSelector: React.FC<VectorMapStyleSelectorProps> = ({
  value,
  onChange,
  clubPrimaryColor,
  clubSecondaryColor,
  showPreview = true,
  useVectorMaps = false,
  onToggleVectorMaps,
}) => {
  const selectedStyle = VECTOR_STYLES[value as keyof typeof VECTOR_STYLES] || VECTOR_STYLES.positron;

  return (
    <VStack align="stretch" spacing={4}>
      {onToggleVectorMaps && (
        <FormControl display="flex" alignItems="center">
          <FormLabel mb={0} htmlFor="vector-maps-toggle">
            Použít vektorové mapy (MapLibre GL)
          </FormLabel>
          <Switch
            id="vector-maps-toggle"
            isChecked={useVectorMaps}
            onChange={(e) => onToggleVectorMaps(e.target.checked)}
            colorScheme="purple"
          />
          <Badge ml={2} colorScheme="purple">Experimentální</Badge>
        </FormControl>
      )}

      {useVectorMaps && (
        <Alert status="info" borderRadius="md">
          <AlertIcon />
          <Box fontSize="sm">
            <Text fontWeight="bold" mb={1}>Vektorové mapy aktivovány!</Text>
            <Text>
              Využíváte MapLibre GL s OpenMapTiles. Výhody: lepší výkon, ostřejší zobrazení, 
              možnost plné customizace stylů přes JSON.
            </Text>
          </Box>
        </Alert>
      )}

      <FormControl>
        <FormLabel>Styl mapy</FormLabel>
        <Select value={value} onChange={(e) => onChange(e.target.value)}>
          <option value="positron">Positron (Light)</option>
          <option value="dark-matter">Dark Matter</option>
          <option value="osm-bright">OSM Bright</option>
          <option value="klokantech-basic">Basic</option>
        </Select>
        <Text fontSize="sm" color="gray.600" mt={1}>
          {selectedStyle.description}
        </Text>
      </FormControl>

      {showPreview && useVectorMaps && (
        <Box
          p={4}
          borderWidth="1px"
          borderRadius="md"
          bg="gray.50"
        >
          <VStack align="stretch" spacing={3}>
            <HStack justify="space-between">
              <Text fontWeight="semibold">{selectedStyle.name}</Text>
              <Badge colorScheme="purple">Vector Tiles</Badge>
            </HStack>
            <Text fontSize="sm" color="gray.600">
              {selectedStyle.description}
            </Text>
            
            {clubPrimaryColor && (
              <Box>
                <Text fontSize="sm" fontWeight="medium" mb={2}>
                  Barvy klubu (aplikovány dynamicky):
                </Text>
                <HStack>
                  <Box
                    w="40px"
                    h="40px"
                    borderRadius="md"
                    bg={clubPrimaryColor}
                    borderWidth="1px"
                    borderColor="gray.300"
                  />
                  {clubSecondaryColor && (
                    <Box
                      w="40px"
                      h="40px"
                      borderRadius="md"
                      bg={clubSecondaryColor}
                      borderWidth="1px"
                      borderColor="gray.300"
                    />
                  )}
                  <Text fontSize="xs" color="gray.500">
                    Marker + vodní plochy
                  </Text>
                </HStack>
              </Box>
            )}
          </VStack>
        </Box>
      )}

      <Box
        p={3}
        bg="purple.50"
        borderWidth="1px"
        borderColor="purple.200"
        borderRadius="md"
      >
        <Text fontSize="sm" fontWeight="semibold" mb={2}>
          🚀 Výhody vektorových map:
        </Text>
        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>
          <Text fontSize="xs" color="gray.700">
            ✓ <strong>Lepší výkon</strong> - rychlejší načítání
          </Text>
          <Text fontSize="xs" color="gray.700">
            ✓ <strong>Ostrý obraz</strong> - perfektní na Retina
          </Text>
          <Text fontSize="xs" color="gray.700">
            ✓ <strong>Dynamické styly</strong> - změna za běhu
          </Text>
          <Text fontSize="xs" color="gray.700">
            ✓ <strong>Club colors</strong> - automatická integrace
          </Text>
        </SimpleGrid>
      </Box>

      <Box
        p={3}
        bg="blue.50"
        borderWidth="1px"
        borderColor="blue.200"
        borderRadius="md"
      >
        <Text fontSize="sm" fontWeight="semibold" mb={1}>
          📚 Vlastní styly:
        </Text>
        <Text fontSize="xs" color="gray.700" mb={2}>
          Pro pokročilé použití můžete vytvořit vlastní style JSON podle{' '}
          <Link 
            href="https://github.com/openmaptiles/positron-gl-style" 
            isExternal 
            color="blue.600"
          >
            Positron GL Style <ExternalLinkIcon mx="2px" />
          </Link>
        </Text>
        <Code fontSize="xs" p={2} borderRadius="md" display="block">
          customStyleUrl: "https://your-server.com/style.json"
        </Code>
      </Box>

      <Text fontSize="xs" color="gray.500">
        Používáme MapLibre GL JS (open-source) s MapTiler tiles.
        {clubPrimaryColor && ' Barvy klubu jsou aplikovány automaticky na markery a vybrané prvky mapy.'}
      </Text>

      {useVectorMaps && (
        <Alert status="warning" borderRadius="md" fontSize="sm">
          <AlertIcon />
          <Text>
            <strong>API Key:</strong> Nastavte <Code>REACT_APP_MAPTILER_KEY</Code> v <Code>.env</Code> souboru 
            pro produkční použití. Získejte zdarma na{' '}
            <Link href="https://www.maptiler.com/" isExternal color="blue.600">
              maptiler.com <ExternalLinkIcon mx="2px" />
            </Link>
          </Text>
        </Alert>
      )}
    </VStack>
  );
};

export default VectorMapStyleSelector;
