import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { 
  Box, 
  Button, 
  Container, 
  Heading, 
  Text, 
  useToast,
  VStack,
  Spinner
} from '@chakra-ui/react';
import { unsubscribeFromNewsletter } from '../services/contact';
import { trackEvent } from '../utils/umami';

export default function NewsletterUnsubscribePage() {
  const { email: encodedEmail } = useParams<{ email: string }>();
  const [isLoading, setIsLoading] = useState(true);
  const [isSuccess, setIsSuccess] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const toast = useToast();
  const navigate = useNavigate();

  useEffect(() => {
    const processUnsubscribe = async () => {
      if (!encodedEmail) {
        setError('Neplatný odhlašovací odkaz');
        setIsLoading(false);
        return;
      }

      try {
        const email = decodeURIComponent(encodedEmail);
        await unsubscribeFromNewsletter(email);
        setIsSuccess(true);
        
        // Track successful unsubscribe
        trackEvent('Newsletter Unsubscribe', { 
          success: true,
          source: 'email_link' 
        });
      } catch (err) {
        const errorMessage = err instanceof Error ? err.message : 'Při odhlašování z newsletteru došlo k chybě';
        setError(errorMessage);
        toast({
          title: 'Chyba',
          description: errorMessage,
          status: 'error',
          duration: 5000,
          isClosable: true,
        });
      } finally {
        setIsLoading(false);
      }
    };

    processUnsubscribe();
  }, [encodedEmail, toast]);

  const handleBackToHome = () => {
    navigate('/');
  };

  if (isLoading) {
    return (
      <Container maxW="container.md" py={10}>
        <VStack spacing={6} textAlign="center">
          <Spinner size="xl" />
          <Text>Zpracovávám vaši žádost o odhlášení...</Text>
        </VStack>
      </Container>
    );
  }

  if (error) {
    return (
      <Container maxW="container.md" py={10}>
        <VStack spacing={6} textAlign="center">
          <Heading as="h1" size="xl" color="red.500">Chyba při odhlašování</Heading>
          <Text fontSize="lg">{error}</Text>
          <Button colorScheme="blue" onClick={handleBackToHome}>
            Zpět na úvodní stránku
          </Button>
        </VStack>
      </Container>
    );
  }

  if (isSuccess) {
    return (
      <Container maxW="container.md" py={10}>
        <VStack spacing={6} textAlign="center">
          <Box>
            <Heading as="h1" size="xl" color="green.500" mb={4}>
              Byl jste úspěšně odhlášen
            </Heading>
            <Text fontSize="lg">
              Je nám líto, že odcházíte. Vaše e-mailová adresa byla odebrána z našeho seznamu odběratelů.
            </Text>
          </Box>
          
          <Text color="gray.600">
            Pokud jste se odhlásili omylem, můžete se znovu přihlásit k odběru na našich webových stránkách.
          </Text>
          
          <Button 
            colorScheme="blue" 
            onClick={handleBackToHome}
            data-umami-event="Back to Home"
            data-umami-event-from="unsubscribe"
          >
            Zpět na úvodní stránku
          </Button>
        </VStack>
      </Container>
    );
  }

  return null;
}