import React from 'react';
import {
  VStack,
  HStack,
  FormControl,
  FormLabel,
  Input,
  Select,
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
  Text,
  Box,
  Divider,
  Button,
  IconButton,
  Popover,
  PopoverTrigger,
  PopoverContent,
  PopoverBody,
  PopoverArrow,
  SimpleGrid,
  useColorModeValue,
} from '@chakra-ui/react';
import { FiRefreshCw } from 'react-icons/fi';

interface AdvancedStyleControlsProps {
  elementName: string;
  settings?: Record<string, any>;
  onChange?: (settings: Record<string, any>) => void;
}

const AdvancedStyleControls: React.FC<AdvancedStyleControlsProps> = ({
  elementName,
  settings = {},
  onChange,
}) => {
  const updateSetting = (key: string, value: any) => {
    if (onChange) {
      onChange({ ...settings, [key]: value });
    }
  };

  const presetColors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8',
    '#F7DC6F', '#BB8FCE', '#85C1E2', '#F8B739', '#52B788',
  ];

  return (
    <VStack align="stretch" spacing={4}>
      {/* Spacing Controls */}
      <Box>
        <Text fontWeight="bold" fontSize="sm" mb={2}>Spacing</Text>
        <VStack spacing={3}>
          <FormControl>
            <HStack justify="space-between">
              <FormLabel fontSize="xs" mb={0}>Margin Top</FormLabel>
              <Text fontSize="xs" color="gray.500">{settings.marginTop || 0}px</Text>
            </HStack>
            <Slider
              value={settings.marginTop || 0}
              min={0}
              max={100}
              step={4}
              onChange={(val) => updateSetting('marginTop', val)}
            >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb />
            </Slider>
          </FormControl>

          <FormControl>
            <HStack justify="space-between">
              <FormLabel fontSize="xs" mb={0}>Margin Bottom</FormLabel>
              <Text fontSize="xs" color="gray.500">{settings.marginBottom || 0}px</Text>
            </HStack>
            <Slider
              value={settings.marginBottom || 0}
              min={0}
              max={100}
              step={4}
              onChange={(val) => updateSetting('marginBottom', val)}
            >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb />
            </Slider>
          </FormControl>

          <FormControl>
            <HStack justify="space-between">
              <FormLabel fontSize="xs" mb={0}>Padding</FormLabel>
              <Text fontSize="xs" color="gray.500">{settings.padding || 0}px</Text>
            </HStack>
            <Slider
              value={settings.padding || 0}
              min={0}
              max={100}
              step={4}
              onChange={(val) => updateSetting('padding', val)}
            >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb />
            </Slider>
          </FormControl>
        </VStack>
      </Box>

      <Divider />

      {/* Background Controls */}
      <Box>
        <Text fontWeight="bold" fontSize="sm" mb={2}>Background</Text>
        <VStack spacing={3}>
          <FormControl>
            <FormLabel fontSize="xs">Background Color</FormLabel>
            <HStack>
              <Input
                type="color"
                value={settings.backgroundColor || '#ffffff'}
                onChange={(e) => updateSetting('backgroundColor', e.target.value)}
                size="sm"
                w="60px"
                h="40px"
                p={1}
                cursor="pointer"
              />
              <Input
                value={settings.backgroundColor || '#ffffff'}
                onChange={(e) => updateSetting('backgroundColor', e.target.value)}
                size="sm"
                placeholder="#ffffff"
                flex={1}
              />
            </HStack>
          </FormControl>

          {/* Color Presets */}
          <SimpleGrid columns={5} spacing={2}>
            {presetColors.map((color) => (
              <Box
                key={color}
                w="100%"
                h="30px"
                bg={color}
                borderRadius="md"
                cursor="pointer"
                border="2px"
                borderColor={settings.backgroundColor === color ? 'blue.500' : 'transparent'}
                _hover={{ transform: 'scale(1.1)' }}
                transition="all 0.2s"
                onClick={() => updateSetting('backgroundColor', color)}
              />
            ))}
          </SimpleGrid>

          <FormControl>
            <HStack justify="space-between">
              <FormLabel fontSize="xs" mb={0}>Background Opacity</FormLabel>
              <Text fontSize="xs" color="gray.500">{settings.backgroundOpacity || 100}%</Text>
            </HStack>
            <Slider
              value={settings.backgroundOpacity || 100}
              min={0}
              max={100}
              onChange={(val) => updateSetting('backgroundOpacity', val)}
            >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb />
            </Slider>
          </FormControl>
        </VStack>
      </Box>

      <Divider />

      {/* Border Controls */}
      <Box>
        <Text fontWeight="bold" fontSize="sm" mb={2}>Border</Text>
        <VStack spacing={3}>
          <FormControl>
            <HStack justify="space-between">
              <FormLabel fontSize="xs" mb={0}>Border Width</FormLabel>
              <Text fontSize="xs" color="gray.500">{settings.borderWidth || 0}px</Text>
            </HStack>
            <Slider
              value={settings.borderWidth || 0}
              min={0}
              max={10}
              onChange={(val) => updateSetting('borderWidth', val)}
            >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb />
            </Slider>
          </FormControl>

          <FormControl>
            <FormLabel fontSize="xs">Border Color</FormLabel>
            <HStack>
              <Input
                type="color"
                value={settings.borderColor || '#000000'}
                onChange={(e) => updateSetting('borderColor', e.target.value)}
                size="sm"
                w="60px"
                h="40px"
                p={1}
                cursor="pointer"
              />
              <Input
                value={settings.borderColor || '#000000'}
                onChange={(e) => updateSetting('borderColor', e.target.value)}
                size="sm"
                placeholder="#000000"
                flex={1}
              />
            </HStack>
          </FormControl>

          <FormControl>
            <HStack justify="space-between">
              <FormLabel fontSize="xs" mb={0}>Border Radius</FormLabel>
              <Text fontSize="xs" color="gray.500">{settings.borderRadius || 0}px</Text>
            </HStack>
            <Slider
              value={settings.borderRadius || 0}
              min={0}
              max={50}
              onChange={(val) => updateSetting('borderRadius', val)}
            >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb />
            </Slider>
          </FormControl>
        </VStack>
      </Box>

      <Divider />

      {/* Shadow Controls */}
      <Box>
        <Text fontWeight="bold" fontSize="sm" mb={2}>Shadow</Text>
        <VStack spacing={3}>
          <FormControl>
            <FormLabel fontSize="xs">Shadow Type</FormLabel>
            <Select
              value={settings.boxShadow || 'none'}
              onChange={(e) => updateSetting('boxShadow', e.target.value)}
              size="sm"
            >
              <option value="none">None</option>
              <option value="sm">Small</option>
              <option value="md">Medium</option>
              <option value="lg">Large</option>
              <option value="xl">Extra Large</option>
            </Select>
          </FormControl>
        </VStack>
      </Box>

      <Divider />

      {/* Animation Controls */}
      <Box>
        <Text fontWeight="bold" fontSize="sm" mb={2}>Animation</Text>
        <VStack spacing={3}>
          <FormControl>
            <FormLabel fontSize="xs">Entrance Animation</FormLabel>
            <Select
              value={settings.animation || 'none'}
              onChange={(e) => updateSetting('animation', e.target.value)}
              size="sm"
            >
              <option value="none">None</option>
              <option value="fadeIn">Fade In</option>
              <option value="slideInUp">Slide In Up</option>
              <option value="slideInDown">Slide In Down</option>
              <option value="slideInLeft">Slide In Left</option>
              <option value="slideInRight">Slide In Right</option>
              <option value="zoomIn">Zoom In</option>
              <option value="bounceIn">Bounce In</option>
            </Select>
          </FormControl>

          <FormControl>
            <HStack justify="space-between">
              <FormLabel fontSize="xs" mb={0}>Animation Duration</FormLabel>
              <Text fontSize="xs" color="gray.500">{settings.animationDuration || 1000}ms</Text>
            </HStack>
            <Slider
              value={settings.animationDuration || 1000}
              min={200}
              max={3000}
              step={100}
              onChange={(val) => updateSetting('animationDuration', val)}
            >
              <SliderTrack>
                <SliderFilledTrack />
              </SliderTrack>
              <SliderThumb />
            </Slider>
          </FormControl>
        </VStack>
      </Box>

      <Divider />

      {/* Reset Button */}
      <Button
        size="sm"
        leftIcon={<FiRefreshCw />}
        variant="outline"
        onClick={() => onChange && onChange({})}
      >
        Reset to Default
      </Button>
    </VStack>
  );
};

export default AdvancedStyleControls;
