import { Box, Container, Grid, Image,GridItem, Heading, HStack, Icon, Link, Select, Text, useColorMode, useToast, VStack } from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import Pagination from "../components/Pagination";
import { MdContentCopy, MdOutlineErrorOutline } from "react-icons/md";
import ToastBox from "../components/ToastBox";
import bannerImage from "../assets/images/bannerImg.png";
import { useNavigate, useParams } from "react-router-dom";
import { useGetSubnetByIdQuery } from "../Services/api.service";
import rbtLogoOutline from "../assets/images/rubix-filled.svg";
import { HiOutlineRefresh } from "react-icons/hi";
import { rotate } from "../components/LatestTransactions/LatestTransactions";
import Search from '../assets/images/search.png'
import { formatUTCToDDMMYYHHMMSS } from "../Constants/Constants";

const SubnetInner = () => {

  const { overview } = useContext(GlobalStateContext);
  const { colorMode} = useColorMode();
  const navigate = useNavigate()
  const params = useParams()

  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 toast = useToast()
  useEffect(() => {
    window.scrollTo({ top: 0, behavior: "smooth" }); // Scroll to top smoothly when params change
  }, []);
 
  function copyToClipboard(text) {
    navigator.clipboard
      .writeText(text)
      .then(() => {
        // console.log('Text copied to clipboard');
        // alert('Text copied to clipboard');
        toast({
          render: () => (
            <ToastBox status={"warn"} message={"Text copied to clipboard"} />
          ),
        });
      })
      .catch((err) => {
        console.error("Failed to copy text: ", err); 
      });
  }

  const {
    data,
    isLoading,
    refetch
  } = useGetSubnetByIdQuery({
    id:params?.id,
    pageNumber: currentPage,
    pageSize: pageSize,
  })

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

  const handleRefreshClick = () => {
    setIsRotating(true); // Start rotation
    refetch();
    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 (
    <Box minH={"100vh"} p={"6rem 0 4rem 0"} backgroundImage={colorMode !== "light" ? `url(${bannerImage})` : "none"} position={"relative"} backgroundSize="contain" backgroundRepeat="no-repeat">
      <Container
        maxW="6xl"
        color="white"
        display={{base :"block",md : "flex"}}
        justifyContent={"space-between"}
        mb={10}
      >
        <Heading fontSize={"md"} fontWeight={400} color={colorMode === "light" ? "#000" : "#fff"} mb={{base :"10px" ,md : "0px"}}>
        Subnet ID  - {params?.id}
        </Heading>
        <HStack to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
          <Text as={"span"}>Total Value Locked (TVL)</Text> <Text as={"span"}>{Number(data?.data?.tvl).toFixed(3)} RBT</Text>
        </HStack>
        {/* <Text to="" style={{ fontSize: "14px" }} color={colorMode === "light" ? "#000" : "#fff"} display={"flex"} gap={"3"}>
          View total number of records
          <Select width={"70px"} rounded="md" size="xs">
            <option value='option1'>10</option>
            <option value='option2'>20</option>
            <option value='option3'>30</option>
          </Select>
        </Text> */}
      </Container>
      <Box>
        {data?.data?.items?.length===0 || isLoading?<HStack h={'35vh'} justifyContent={"center"} mt={10}>
            <Image w={"40px"} src={Search}/>
            <Text as={"span"} color={"#787878"}>{"No records found"}</Text>
          </HStack>:<Container maxW="6xl">
          <Grid position={'relative'}
            templateColumns={{ base: "100% 0%", md: "10% 90%" }}
            gap={0}
            bg={colorMode === "light" ? "#230A79" : "#232127"}
            // bg={"#232127"}
            borderTopRightRadius={4}
            borderTopLeftRadius={4}
          >
            <GridItem  display={{ base: "none", md: "grid" }} p={2}>
              <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 || isLoading
                ? `${rotate} 1s linear infinite`
                : "none"
            }
          />
        </Box>
          </Grid>
          <Box boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;"}>
          {data?.data?.items?.map(
          (
            {
              transactionId,
              smartContract,
              sender,
              receiver,
              contract,
              timestamp,
              amount,
              transactionType,
              subNetworkId,
            },
            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>

                <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>
                <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" }}
                    isTruncated
                  >
                    <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>
                <HStack
                  flexDirection={{ base: "column", md: "row" }}
                  justifyContent={{ base: "", md: "flex-start" }}
                  gap={{base:4,md:44}}
                  alignItems={{ base: "flex-start", md: "" }}
                  // flexWrap={'wrap'}

                  // w={"80%"}
                  w={{ base: "100%", md: "80%" }}
                  fontSize={{ base: "xs", md: "sm" }}
                  mb={3}
                >
                  {smartContract && (
                    <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">{smartContract}</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>
                  <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={rbtLogoOutline} />
                      {amount}
                    </Text>
                  </Box>
                </HStack>

                <HStack
                  fontSize={"sm"}
                  alignItems={"flex-start"}
                  position={"relative"}
                >
                  <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"}
                      >
                        <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={isLoading}
        setCurrentPage={setCurrentPage}
        currentPage={currentPage}
      />
        </Container>}
      </Box>
    </Box>
  );
};

export default SubnetInner;