import {
  Box,
  Button,
  Container,
  Grid,
  GridItem,
  HStack,
  Icon,
  Image,
  Spinner,
  Text,
  Tooltip,
  VStack,
  keyframes,
  useColorMode,
  useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import Pagination from "../Pagination";
import GlobalStateContext from "../../Contexts/GlobalStateContext";
import { Link, useLocation, useNavigate } from "react-router-dom";
import ToastBox from "../ToastBox";
import { formatRelativeDate, formatUTCToDDMMYYHHMMSS } from "../../Constants/Constants";
import {
  useGetTransAllQuery,
  useGetTransCountQuery,
} from "../../Services/api.service";
import rbtLogoOutline from "../../assets/images/rubix-filled.svg";
import rbtLogoDark from "../../assets/images/RBTLogo.svg";
import { HiOutlineRefresh } from "react-icons/hi";
import FullScreenLoaader from "../FullScreenLoaader/FullScreenLoaader";

// Define the keyframes
export const rotate = keyframes`
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
`;

const LatestTransactions = () => {
  const toast = useToast();
  const navigate = useNavigate();
  const location = useLocation();
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
  }, [location]);

  const { colorMode } = useColorMode();
  const [isRotating, setIsRotating] = useState(false);
  const [currentPage, setCurrentPage] = useState(1); // Tracks the current page
  const [pageSize, setPageSize] = useState(10); // Number of items per page
  const [totalItems, setTotalItems] = useState(null); // Total items in the dataset
  const [lastRefreshedTime, setLastRefreshedTime] = useState(new Date()); // Store the last refresh time
  const [relativeRefreshTime, setRelativeRefreshTime] = useState("Just now");

  const {
    data: transCount,
    isLoading: isTransCountLoading,
    refetch: transCountRefetch,
    errors: transCountErrors,
  } = useGetTransCountQuery();

  // Fetch transactions based on the current page and page size
  const {
    data: transAll,
    isLoading: isTransAllLoading,
    refetch: transAllRefetch,
  } = useGetTransAllQuery({
    pageNumber: currentPage,
    pageSize: pageSize,
  });

  // Set interval to refetch data every 30 seconds
  // useEffect(() => {
  //   const intervalId = setInterval(() => {
  //     transCountRefetch();  // Refetch transaction count
  //     transAllRefetch();    // Refetch transactions
  //   }, 30000);  // 30000 ms = 30 seconds

  //   return () => clearInterval(intervalId);  // Clear interval on component unmount
  // }, [transCountRefetch, transAllRefetch]);

  useEffect(() => {
    setTotalItems(transCount?.data?.transactionCount);
  }, [transCount]);

  // function copyToClipboard(text) {
  //   navigator.clipboard
  //     .writeText(text)
  //     .then(() => {
  //       toast({
  //         render: () => (
  //           <ToastBox status={"warn"} message={"Text copied to clipboard"} />
  //         ),
  //       });
  //     })
  //     .catch((err) => {
  //       console.error("Failed to copy text: ", err);
  //     });
  // }



  function copyToClipboard(text) {
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard
        .writeText(text)
        .then(() => {
          toast({
            render: () => (
              <ToastBox status={"warn"} message={"Text copied to clipboard"} />
            ),
          });
        })
        .catch((err) => {
          console.error("Failed to copy text: ", err);
        });
    } else {
      // Fallback method for unsupported browsers
      const textArea = document.createElement("textarea");
      textArea.value = text;
      document.body.appendChild(textArea);
      textArea.select();
      try {
        document.execCommand("copy");
        toast({
          render: () => (
            <ToastBox status={"warn"} message={"Text copied to clipboard"} />
          ),
        });
      } catch (err) {
        console.error("Fallback: Failed to copy text: ", err);
      }
      document.body.removeChild(textArea);
    }
  }

  const handleRefreshClick = () => {
    setIsRotating(true); // Start rotation
    transAllRefetch();
    setTimeout(() => {
      setIsRotating(false); // Stop rotation after 500ms
    }, 500);
    setLastRefreshedTime(new Date()); // Set the new refresh time
    setRelativeRefreshTime("Just now"); // Reset relative time to "Just now"
  };

  useEffect(() => {
    // Update relative time every minute
    const intervalId = setInterval(() => {
      updateRelativeTime();
    }, 60000); // 60 seconds = 60000ms

    return () => clearInterval(intervalId); // Cleanup the interval on unmount
  }, [lastRefreshedTime]);

  const updateRelativeTime = () => {
    const now = new Date();
    const timeDiff = Math.floor((now - lastRefreshedTime) / 60000); // Difference in minutes

    if (timeDiff < 1) {
      setRelativeRefreshTime("Just now");
    } else if (timeDiff === 1) {
      setRelativeRefreshTime("1 minute ago");
    } else {
      setRelativeRefreshTime(`${timeDiff} minutes ago`);
    }
  };
  return (
    isTransCountLoading? <HStack w={'100%'} justifyContent={'center'} > <Spinner color="purple.700" /></HStack>:<Container
      mt={location?.pathname === "/view-all-transaction" ? 24 : 0}
      mb={location?.pathname === "/view-all-transaction" ? 15 : 0}
      maxW="6xl"
    >
      <Grid
        position={"relative"}
        templateColumns={{ base: "100% 0%", md: "10% 90%" }}
        gap={0}
        bg={colorMode === "light" ? "#230A79" : "#232127"}
        // bg={"#232127"}
        roundedTop={"lg"}
      >
        <GridItem display={{ base: "none", md: "grid" }} p={2} ps={3}>
          <Text color={"#fff"}>Sr. no</Text>
        </GridItem>
        <GridItem p={2}>
          <Text color={"#fff"}>Transactions</Text>
        </GridItem>

        <Box
          as="span"
          cursor={"pointer"}
          position={"absolute"}
          right={0}
          m={1.5}
          display={"flex"}
          alignItems={"center"}
          gap={2}
          onClick={handleRefreshClick} // Trigger the rotation when clicked
        >
          <Text
            as={"span"}
            fontSize={"xs"}
            color={colorMode === "light" ? "#fff" : "#ccc"}
          >
            Last refresh {relativeRefreshTime}
          </Text>
          <Icon
            bg={colorMode === "light" ? "#fff" : "#434147"}
            p={1.5}
            boxSize={7}
            rounded={"full"}
            as={HiOutlineRefresh}
            animation={
              isRotating || isTransAllLoading
                ? `${rotate} 1s linear infinite`
                : "none"
            }
          />
        </Box>
      </Grid>
      <Box
        roundedBottom={"lg"}
        overflow={"hidden"}
        boxShadow={
          colorMode === "light"
            ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"
            : "none"
        }
      >
        {transAll?.data?.items?.map(
          (
            {
              transactionId,
              smartContract,
              sender,
              receiver,
              contract,
              timestamp,
              amount,
              transactionType,
              subNetworkId,



              executor,
              deployer,
              creator,
              pledgeAmount,
              scTokenHash
            },
            index
          ) => (
            <Grid
              bg={
                index % 2 === 0
                  ? colorMode === "light"
                    ? "#F2EFFF"
                    : "#312F35"
                  : colorMode === "light"
                  ? "#fff"
                  : "#232127"
              }
              key={transactionId}
              templateColumns={{ base: "100% 0%", md: "10% 90%" }}
              gap={0}
            >
              <GridItem
                display={{ base: "none", md: "grid" }}
                p={4}
                color={colorMode === "light" ? "#000" : "#fff"}
              >
                {index + 1}.
              </GridItem>
              <GridItem p={4}>
                {/* <Box> */}
                <Text // This ensures the text is truncated with ellipsis when it overflows ss__298
                  display={"flex"}
                  fontSize={{ base: "xs", md: "sm" }}
                  mb={2}
                  color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                >
                  <Text
                    maxW={{ base: "100%", md: "100%" }} // Set a max-width to control when the truncation happens
                    // overflow={'hidden'} // Ensure overflow is hidden
                    whiteSpace={"nowrap"} // Prevent the text from wrapping
                    textOverflow={"ellipsis"}
                    isTruncated
                    cursor={"pointer"}
                    onClick={() => navigate(`/transaction/${transactionId}`)}
                  >
                    {transactionId}
                  </Text>

                  <Text
                    _hover={{ bg: "gray.50" }}
                    transition={"0.5s"}
                    rounded={"sm"}
                    p={1}
                    as={"span"}
                    ml={1}
                    cursor={"pointer"}
                  >
                    <MdContentCopy
                      onClick={() => copyToClipboard(transactionId)}
                    />
                  </Text>
                </Text>

                {sender&&<HStack
                  fontSize={{ base: "xs", md: "sm" }}
                  gap={{ base: 2, md: 4 }}
                  mb={2}
                >
                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Sender:
                  </Text>

                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    w={"84%"}
                    // justifyContent={'space-between'}
                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "90%", md: "100%" }} // Set a max-width to control when the truncation happens
                      // overflow={'hidden'} // Ensure overflow is hidden
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${sender}`)}
                    >
                      {sender}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy onClick={() => copyToClipboard(sender)} />
                    </Text>
                  </HStack>
                </HStack>}
                {receiver&&<HStack
                  fontSize={{ base: "xs", md: "sm" }}
                  cursor={"pointer"}
                  gap={{ base: 2, md: 4 }}
                  mb={3}
                >
                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Receiver:
                  </Text>
                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${receiver}`)}
                    >
                      {receiver}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(receiver)}
                      />
                    </Text>
                  </HStack>
                </HStack>}



                {creator&&<HStack
                  fontSize={{ base: "xs", md: "sm" }}
                  cursor={"pointer"}
                  gap={{ base: 2, md: 4 }}
                  mb={3}
                >
                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Creator:
                  </Text>
                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${creator}`)}
                    >
                      {creator}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(creator)}
                      />
                    </Text>
                  </HStack>
                </HStack>}

                {executor&&<HStack
                  fontSize={{ base: "xs", md: "sm" }}
                  cursor={"pointer"}
                  gap={{ base: 2, md: 4 }}
                  mb={3}
                >
                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Executor:
                  </Text>
                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${executor}`)}
                    >
                      {executor}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(executor)}
                      />
                    </Text>
                  </HStack>
                </HStack>}


                {deployer&&<HStack
                  fontSize={{ base: "xs", md: "sm" }}
                  cursor={"pointer"}
                  gap={{ base: 2, md: 4 }}
                  mb={3}
                >
                  <Text color={colorMode === "light" ? "#0F0F0F" : "#E8E8E8"}>
                    Deployer:
                  </Text>
                  <HStack
                    color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    textDecoration={"underline"}
                    fontSize={{ base: "xs", md: "sm" }}
                  >
                    <Text
                      cursor={"pointer"}
                      maxW={{ base: "55%", md: "100%" }}
                      whiteSpace={"nowrap"} // Prevent the text from wrapping
                      textOverflow={"ellipsis"}
                      isTruncated
                      onClick={() => navigate(`/did-info/${deployer}`)}
                    >
                      {deployer}
                    </Text>
                    <Text
                      _hover={{ bg: "gray.50" }}
                      transition={"0.5s"}
                      rounded={"sm"}
                      p={1}
                      as={"span"}
                      ml={1}
                      cursor={"pointer"}
                    >
                      <MdContentCopy
                        onClick={() => copyToClipboard(deployer)}
                      />
                    </Text>
                  </HStack>
                </HStack>}




                <HStack
                  flexDirection={{ base: "column", md: "row" }}
                  justifyContent={{ base: "", md: scTokenHash?"space-between" :"flex-start" }}
                  gap={{base:4,md:scTokenHash ? 4:44}}
                  alignItems={{ base: "flex-start", md: "" }}
                  // flexWrap={'wrap'}

                  // w={"80%"}
                  w={{ base: "100%", md:scTokenHash?"90%": "80%" }}
                  fontSize={{ base: "xs", md: "sm" }}
                  mb={3}
                >
                  {scTokenHash && (
                    <Box>
                      <Text
                        mb={2}
                        // fontSize={{base:"xs", md:"sm" }}
                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                      >
                        Smart contract ID :
                      </Text>
                      <Text
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      >
                        <Link to="/smart-contract">{scTokenHash}</Link>
                      </Text>
                    </Box>
                  )}

                  <Box>
                    <Text
                      mb={2}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Date and Time Stamp :
                    </Text>
                    <Text color={colorMode === "light" ? "#230A79" : "#B09AFF"}>
                      {formatUTCToDDMMYYHHMMSS(timestamp)}
                    </Text>
                  </Box>



                  {amount&&<Box>
                    <Text
                      mb={2}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Amount:
                    </Text>
                    <Text
                      display={"flex"}
                      gap={2}
                      alignItems={"center"}
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    >
                      <Image w={4} src={colorMode === "light" ? rbtLogoDark :rbtLogoOutline} />
                      {amount}
                    </Text>
                  </Box>}

                  
                  {pledgeAmount&&<Box>
                    <Text
                      mb={2}
                      color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                    >
                      Pledge Amount:
                    </Text>
                    <Text
                      display={"flex"}
                      gap={2}
                      alignItems={"center"}
                      color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                    >
                      <Image w={4} src={rbtLogoOutline} />
                      {pledgeAmount}
                    </Text>
                  </Box>}


                </HStack>

                <HStack
                  fontSize={"sm"}
                  alignItems={"flex-start"}
                  position={"relative"}
                >
                  <Tooltip 
                  p={2}
                   fontWeight={400}
                   lineHeight={"18px"}
                   boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
                  color={colorMode === "light" ? "#230A79" : "#230A79"}
                    fontStyle={"xs"}
                    rounded={"5px"}
                    bg={colorMode === "light" ? "#fff" : "#fff"}
                    label={transactionType === "RBT" ? "Native RBT transactions which is peer-to-peer." : "SC or Smart Contract are codes that executes the actions multiple parties or entities agree to."}
                    placement='top-start'>
                    <Text p={0} display={{ base: "none", md: "block" }} position={"absolute"} top={"2px"} left={"-24px"}>
                      <Icon
                        cursor={"pointer"}
                        as={MdOutlineErrorOutline}
                        fontSize={"18px"}
                        color="#7B7B7B"
                      />
                    </Text>
                  </Tooltip>
                  {/* <Icon
                    as={MdOutlineErrorOutline}
                    fontSize={"18px"}
                    display={{ base: "none", md: "block" }}
                    style={{
                      marginTop: "1px",
                      position: "absolute",
                      top: "2px",
                      left: "-24px",
                    }}
                    color="#7B7B7B"
                  /> */}

                  <VStack fontSize={{ base: "xs", md: "sm" }}>
                    <HStack w={"100%"} justifyContent={"flex-start"}>
                      <Text
                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                      >
                        Transaction type :
                      </Text>
                      <Text
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      >
                        <Text>{transactionType}</Text>
                      </Text>
                    </HStack>

                    <HStack w={"100%"} justifyContent={"flex-start"}>
                      <Text
                        color={colorMode === "light" ? "#7B7B7B" : "#E8E8E8"}
                      >
                        {subNetworkId === "MainNet" ? "Main net" : "Subnet ID"}:
                      </Text>
                      <Text
                        color={colorMode === "light" ? "#230A79" : "#B09AFF"}
                      >
                        {subNetworkId === "MainNet" ?<Text>{subNetworkId}</Text>:<Link
                          to={`/subnet-id-overview/${subNetworkId}`}
                          style={{ fontWeight: "inherit" }}
                        >
                          {subNetworkId}
                        </Link>}
                      </Text>
                    </HStack>
                  </VStack>
                </HStack>
                {/* </Box> */}
              </GridItem>
            </Grid>
          )
        )}
      </Box>
      <Pagination
        pageSize={pageSize}
        setPageSize={setPageSize}
        totalItems={totalItems}
        isLoading={isTransCountLoading}
        setCurrentPage={setCurrentPage}
        currentPage={currentPage}
      />
    </Container>
  );
};

export default LatestTransactions;