import React, { useState } from 'react';
import {
  Box,
  FormControl,
  FormLabel,
  Select,
  SimpleGrid,
  Text,
  VStack,
  Badge,
  Image,
  HStack,
  useColorModeValue,
} from '@chakra-ui/react';
import { MAP_STYLES } from '../home/ContactMap';
import ContactMap from '../home/ContactMap';

interface MapStyleSelectorProps {
  value: string;
  onChange: (value: string) => void;
  clubPrimaryColor?: string;
  clubSecondaryColor?: string;
  showPreview?: boolean;
}

const MapStyleSelector: React.FC<MapStyleSelectorProps> = ({
  value,
  onChange,
  clubPrimaryColor,
  clubSecondaryColor,
  showPreview = true,
}) => {
  const previewBg = useColorModeValue('gray.50', 'gray.700');
  const tipsBg = useColorModeValue('blue.50', 'blue.900');
  const tipsBorder = useColorModeValue('blue.200', 'blue.700');
  const textColor = useColorModeValue('gray.700', 'gray.300');
  const secondaryText = useColorModeValue('gray.600', 'gray.400');
  const selectBg = useColorModeValue('white', 'gray.700');
  const styleCategories = {
    'Light & Minimal': ['positron', 'positron-no-labels', 'default'],
    'Dark Themes': ['dark', 'dark-no-labels'],
    'Black & White': ['toner', 'toner-lite'],
    'Colorful': ['voyager', 'terrain', 'watercolor'],
    'Satellite': ['satellite'],
  };

  const selectedStyle = MAP_STYLES[value as keyof typeof MAP_STYLES] || MAP_STYLES.default;

  return (
    <VStack align="stretch" spacing={4}>
      <FormControl>
        <FormLabel>Styl mapy</FormLabel>
        <Select value={value} onChange={(e) => onChange(e.target.value)} bg={selectBg}>
          {Object.entries(styleCategories).map(([category, styles]) => (
            <optgroup key={category} label={category}>
              {styles.map((styleKey) => {
                const style = MAP_STYLES[styleKey as keyof typeof MAP_STYLES];
                return (
                  <option key={styleKey} value={styleKey}>
                    {style.name}
                  </option>
                );
              })}
            </optgroup>
          ))}
        </Select>
      </FormControl>

      {showPreview && (
        <VStack align="stretch" spacing={3}>
          <Box
            p={4}
            borderWidth="1px"
            borderRadius="md"
            bg={previewBg}
          >
            <VStack align="stretch" spacing={3}>
              <HStack justify="space-between">
                <Text fontWeight="semibold">{selectedStyle.name}</Text>
                <Badge colorScheme="blue">Náhled stylu</Badge>
              </HStack>
              <Text fontSize="sm" color={secondaryText}>
                {selectedStyle.description}
              </Text>
              
              {clubPrimaryColor && (
                <Box>
                  <Text fontSize="sm" fontWeight="medium" mb={2}>
                    Barvy klubu:
                  </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={secondaryText}>
                      Použity pro marker a overlay
                    </Text>
                  </HStack>
                </Box>
              )}
            </VStack>
          </Box>
          
          {/* Interactive Map Preview */}
          <Box
            borderWidth="1px"
            borderRadius="md"
            overflow="hidden"
            boxShadow="sm"
          >
            <ContactMap
              latitude={50.0755}
              longitude={14.4378}
              zoom={13}
              address="Praha, Česká republika"
              clubName="Náhled mapy"
              mapStyle={value}
              clubPrimaryColor={clubPrimaryColor}
              clubSecondaryColor={clubSecondaryColor}
              height={300}
            />
          </Box>
          <Text fontSize="xs" color={secondaryText} textAlign="center">
            Náhled interaktivní mapy se zvoleným stylem
          </Text>
        </VStack>
      )}

      <Box
        p={3}
        bg={tipsBg}
        borderWidth="1px"
        borderColor={tipsBorder}
        borderRadius="md"
      >
        <Text fontSize="sm" fontWeight="semibold" mb={1}>
          💡 Tipy pro výběr stylu:
        </Text>
        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>
          <Text fontSize="xs" color={textColor}>
            • <strong>Positron/Toner Lite</strong> - nejlepší pro barevné markery
          </Text>
          <Text fontSize="xs" color={textColor}>
            • <strong>Dark Matter</strong> - skvělé pro tmavý design
          </Text>
          <Text fontSize="xs" color={textColor}>
            • <strong>Toner B&W</strong> - vysoký kontrast, elegantní
          </Text>
          <Text fontSize="xs" color={textColor}>
            • <strong>Voyager</strong> - vyváženě pro všechny případy
          </Text>
        </SimpleGrid>
      </Box>

      <Text fontSize="xs" color={secondaryText}>
        Všechny mapy jsou open-source a bezplatné.
        {clubPrimaryColor && ' Mapa bude automaticky obarvena barvami klubu.'}
      </Text>
    </VStack>
  );
};

export default MapStyleSelector;
