import React, { useState, useEffect } from "react";
import { Box, Image, Text, VStack } from "@chakra-ui/react";
import logoAnimation1 from "~/assets/icons/logo-animation/1.svg";
import logoAnimation2 from "~/assets/icons/logo-animation/2.svg";
import logoAnimation3 from "~/assets/icons/logo-animation/3.svg";
import logoAnimation4 from "~/assets/icons/logo-animation/4.svg";
import { createNameSentence } from "~/utils/helpers";
import { useChatContext } from "@/providers/chat/chat-context";
interface WelcomeScreenProps {
  isFadingOut: boolean;
}

const WelcomeScreen: React.FC<WelcomeScreenProps> = ({ isFadingOut }) => {
  const [currentLogoIndex, setCurrentLogoIndex] = useState(0);
  const logos = [
    logoAnimation1,
    logoAnimation2,
    logoAnimation3,
    logoAnimation4
  ];
  const { botData } = useChatContext();

  useEffect(() => {
    if (isFadingOut) return;
    const interval = setInterval(() => {
      setCurrentLogoIndex((prev) => (prev + 1) % logos.length);
    }, 1000);

    return () => clearInterval(interval);
  }, [isFadingOut, logos.length]);

  return (
    <VStack gap={6} align="center" flex={1} justify="center">
      <Box
        w="200px"
        h="200px"
        borderRadius="full"
        position="relative"
        boxShadow="inset 10px 10px 20px 0px rgba(255, 255, 255, 0.8)"
        opacity={isFadingOut ? 0 : 1}
        overflow="hidden"
      >
        {logos.map((logo, index) => (
          <Image
            key={index}
            src={logo}
            alt={`Logo Animation ${index + 1}`}
            position="absolute"
            top="50%"
            left="50%"
            transform="translate(-50%, -50%)"
            w="262px"
            h="262px"
            opacity={currentLogoIndex === index ? 1 : 0}
            transition="opacity 1s linear"
            zIndex={currentLogoIndex === index ? 2 : 1}
          />
        ))}
      </Box>

      <Text
        fontWeight={600}
        fontStyle="normal"
        fontSize="24px"
        letterSpacing="0"
        textAlign="center"
        transition="opacity 0.5s ease"
        opacity={isFadingOut ? 0 : 1}
        fontFamily="Estedad-FD, system-ui, sans-serif"
        css={{
          background: "linear-gradient(to right, #FF7E90, #A939FF, #0020FF)",
          WebkitBackgroundClip: "text",
          WebkitTextFillColor: "transparent",
          backgroundClip: "text"
        }}
      >
        {createNameSentence(botData?.agent_name)}
      </Text>
    </VStack>
  );
};

export default WelcomeScreen;