import { useState } from 'react';
import { 
  Box, 
  Button, 
  Flex, 
  FormControl, 
  FormErrorMessage, 
  Input, 
  Text, 
  useToast,
  VStack,
  useColorModeValue
} from '@chakra-ui/react';
import { useForm } from 'react-hook-form';
import { subscribeToNewsletter } from '../../services/public';
import { trackNewsletterSubscribe, trackFormSubmit } from '../../utils/umami';

type FormData = {
  email: string;
};

export default function NewsletterSubscribe() {
  const [isLoading, setIsLoading] = useState(false);
  const toast = useToast();
  const {
    register,
    handleSubmit,
    reset,
    formState: { errors },
  } = useForm<FormData>();

  const onSubmit = async (data: FormData) => {
    setIsLoading(true);
    try {
      await subscribeToNewsletter(data.email);
      
      // Track successful newsletter subscription
      trackNewsletterSubscribe(window.location.pathname);
      trackFormSubmit('Newsletter Subscribe', true);
      
      toast({
        title: 'Přihlášení k odběru proběhlo úspěšně',
        description: 'Děkujeme za přihlášení k odběru našeho newsletteru!',
        status: 'success',
        duration: 5000,
        isClosable: true,
      });
      reset();
    } catch (error) {
      const errorMessage = error instanceof Error ? error.message : 'Nastala chyba při přihlašování k odběru';
      
      // Track failed subscription
      trackFormSubmit('Newsletter Subscribe', false);
      
      toast({
        title: 'Chyba',
        description: errorMessage,
        status: 'error',
        duration: 5000,
        isClosable: true,
      });
    } finally {
      setIsLoading(false);
    }
  };

  const cardBg = useColorModeValue('white', 'transparent');
  const cardBorder = useColorModeValue('gray.200', 'gray.600');
  const headingColor = useColorModeValue('gray.800', 'white');
  const textColor = useColorModeValue('gray.600', 'gray.300');
  const disclaimerColor = useColorModeValue('gray.500', 'gray.400');

  return (
    <Box w="100%" maxW="xl" mx="auto" p={4} bg={cardBg} borderRadius="md" boxShadow="sm" borderWidth="1px" borderColor={cardBorder}>
      <VStack spacing={3} align="stretch">
        <Text fontSize="xl" fontWeight="bold" textAlign="center" color={headingColor}>
          Přihlaste se k odběru novinek
        </Text>
        <Text textAlign="center" color={textColor} mb={2}>
          Budeme vás informovat o novinkách, zápasech a akcích našeho klubu.
        </Text>
        
        <form onSubmit={handleSubmit(onSubmit)}>
          <VStack spacing={3}>
            <FormControl isInvalid={!!errors.email}>
              <Input
                id="email"
                type="email"
                placeholder="Váš e-mail"
                {...register('email', {
                  required: 'E-mail je povinný',
                  pattern: {
                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                    message: 'Neplatná e-mailová adresa',
                  },
                })}
                size="md"
                disabled={isLoading}
              />
              <FormErrorMessage>
                {errors.email && errors.email.message}
              </FormErrorMessage>
            </FormControl>
            
            <Button
              type="submit"
              colorScheme="blue"
              size="md"
              width="100%"
              isLoading={isLoading}
              loadingText="Odesílám..."
              data-umami-event="Newsletter Submit"
              data-umami-event-location={window.location.pathname}
            >
              Odeslat
            </Button>
          </VStack>
        </form>
        
        <Text fontSize="xs" color={disclaimerColor} textAlign="center" mt={2}>
          Odesláním formuláře souhlasíte se zpracováním osobních údajů.
          Vaši e-mailovou adresu budeme používat pouze pro zasílání novinek.
        </Text>
      </VStack>
    </Box>
  );
}
