import {
  AspectRatio,
  Box,
  Heading,
  HStack,
  Icon,
  Image,
  Skeleton,
  Text,
  VStack,
} from "@chakra-ui/react";
import { FaBolt } from "react-icons/fa";
import ChatTypingLoader from "../loading/ChatTypingLoader";
import {
  IoDocumentTextOutline,
  IoImageOutline,
  IoVideocamOutline,
} from "react-icons/io5";
import ReactMarkdown from "react-markdown";
import remarkBreaks from "remark-breaks";

const iconsDic = {
  llm: IoDocumentTextOutline,
  image: IoImageOutline,
  video: IoVideocamOutline,
};

function ResultBox({
  type = "llm",
  loading = false,
  resultData = "",
  imgWidth = 500,
  imgHeight = 500,
}) {
  return (
    <Box
      w={"100%"}
      minHeight={"200px"}
      p={4}
      bg="#f5effd"
      boxShadow="sm"
      marginBottom={"4px"}
      border={"1px"}
      borderColor={"purple.100"}
      borderRadius={"10px"}
    >
      <Box
        width={"100%"}
        backgroundColor={"white"}
        padding={"5px"}
        borderRadius={"5px"}
        as={HStack}
        justifyContent={"space-between"}
        id="question"
      >
        <HStack alignItems={"center"} justifyContent={"start"}>
          <Icon as={iconsDic[type]} fontSize={"20px"} />
          <Text fontWeight="bold" fontSize={"18px"}>
            نتیجه
          </Text>
        </HStack>
        <FaBolt color="purple" />
      </Box>
      <Box
        mt={4}
        mr={2}
        w="100%"
        display={type === "image" ? "flex" : "block"}
        flexDirection="column"
        justifyContent={type === "image" ? "center" : undefined}
        whiteSpace={type === "llm" ? "pre-line" : "normal"}
      >
        {loading && type === "llm" && (
          <HStack
            w="100%"
            alignItems="center"
            justifyContent="flex-start"
            mt={2}
          >
            <ChatTypingLoader size="16px" />
          </HStack>
        )}

        {type === "llm" && !loading && (
          <ReactMarkdown
            remarkPlugins={[remarkBreaks]}
            components={{
              h1: (props) => <Heading as="h1" size="xl" my={2} {...props} />,
              h2: (props) => <Heading as="h2" size="lg" my={2} {...props} />,
              h3: (props) => <Heading as="h3" size="md" my={2} {...props} />,
              p: (props) => <Text fontSize="16px" my={1} {...props} />,
            }}
          >
            {resultData}
          </ReactMarkdown>
        )}

        {(type === "image" || type === "video") && loading && (
          <Box w="100%" display="flex" justifyContent="center">
            <VStack spacing={3} w="100%" maxW="600px">
              <Text fontSize="sm" color="gray.600" textAlign="center">
                در حال تولید {type === "image" ? "تصویر" : "ویدئو"}...
              </Text>

              <AspectRatio
                ratio={imgWidth / imgHeight}
                w="100%"
                borderRadius="md"
                overflow="hidden"
              >
                <Skeleton borderRadius="md" />
              </AspectRatio>
            </VStack>
          </Box>
        )}

        {type === "image" && !loading && resultData?.[0] && (
          <Box w="100%" display="flex" justifyContent="center">
            <AspectRatio
              ratio={imgWidth / imgHeight}
              w="100%"
              maxW="600px"
              borderRadius="md"
              overflow="hidden"
            >
              <Image
                src={resultData?.[0]}
                objectFit="contain"
                w="100%"
                h="100%"
                style={{ transform: "translateZ(0)" }}
              />
            </AspectRatio>
          </Box>
        )}

        {type === "video" && !loading && resultData?.[0] && (
          <Box w={"100%"} display={"flex"} justifyContent={"center"}>
            <Box h="auto" transformOrigin="center center">
              <video
                src={resultData?.[0]}
                width="720px"
                height="480px"
                controls={true}
              />
            </Box>
          </Box>
        )}
      </Box>
    </Box>
  );
}

export default ResultBox;