import {
  Avatar,
  Badge,
  Box,
  Button,
  HStack,
  Icon,
  Input,
  Menu,
  MenuButton,
  MenuItem,
  MenuList,
  Portal,
  Select,
  Switch,
  Table,
  Tag,
  Tbody,
  Text,
  Th,
  Thead,
  Tooltip,
  Tr,
  keyframes,
  useToast,
} from "@chakra-ui/react";
import React, { useContext, useEffect, useState } from "react";
import { OPACITY_ON_LOAD } from "../../../Layout/animations";
import NormalTable from "../../../Components/DataTable/NormalTable";
import { HiDotsVertical } from "react-icons/hi";
import { Link, Link as RouterLink, useParams } from "react-router-dom";
import Pagination from "../../../Components/Pagination";
import GlobalStateContext from "../../../Contexts/GlobalStateContext";
import CustomAlertDialog from "../../../Components/CustomAlertDialog";
import ToastBox from "../../../Components/ToastBox";
import { debounce } from "../../Master/Sponser/AddSponser";
import { formatCurrency } from "../../../Components/CurrencyInput";
import { FiRefreshCw } from "react-icons/fi";
import { useGetIOByIdQuery } from "../../../Services/io.service";
import { RepeatIcon } from "@chakra-ui/icons";
import { exportToExcel, exportToExcelNew } from "../../../Constants/Constants";
import { LuFileSpreadsheet } from "react-icons/lu";

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

const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter

const Investors = ({ data }) => {
  const params = useParams();
  const id = params?.id;
  const toast = useToast();
  const { investors, setInvestors, slideFromRight, IODetails } =
    useContext(GlobalStateContext);

  const [isRefetchLoading, setIsRefetchLoading] = useState(false);

  const { isLoading: IObyIDisLoading, refetch } = useGetIOByIdQuery(id, {
    skip: !id,
  });

  const [searchTerm, setSearchTerm] = useState("");
  const [isLoading, setIsLoading] = useState(true);
  const [deleteAlert, setDeleteAlert] = useState(false);
  const [actionId, setActionId] = useState(false);
  const [mouseEntered, setMouseEntered] = useState(false);
  const [mouseEnteredId, setMouseEnteredId] = useState("");

  useEffect(() => {
    // Simulate loading
    const timer = setTimeout(() => {
      setIsLoading(false);
    }, 1500);

    // Cleanup the timer on component unmount
    return () => clearTimeout(timer);
  }, []);

  // Calculate totals
  const totalInvestedAmount = investors.reduce(
    (acc, investor) => acc + investor.investedAmount,
    0
  );
  const totalMarketValue = investors.reduce(
    (acc, investor) => acc + investor.marketValue,
    0
  );
  const totalDistribution = investors.reduce(
    (acc, investor) => acc + investor.distribution,
    0
  );
  const totalTotalReturn = investors.reduce(
    (acc, investor) => acc + investor.totalReturn,
    0
  );

  // Table setup
  const tableHeadRow = [
    "Client ID",
    "First name",
    "Last name",
    "Investment amount",
    "Percentage",
    "Market Value",
    "Return on Investment",
    "Distribution",
    "Distribution Percent",
    "Total Return",
    "Total return on Investment",
  ];

  const handleUpdateStatus = debounce((id) => {
    setInvestors((prevSponser) =>
      prevSponser.map((sponsor) =>
        sponsor.id === id ? { ...sponsor, status: !sponsor.status } : sponsor
      )
    );
    toast({
      render: () => <ToastBox message={"Status changed succesfully.!"} />,
    });
  }, 300);



  // Table filter
  const filteredData = IODetails?.investors?.filter((item) => {
    const clientId = item?.clientReference_id;
    const name = item.firstName;
    const lastName = item?.lastName
    const searchLower = searchTerm.toLowerCase();
    const nameMatches = name.toLowerCase().includes(searchLower) || lastName.toLowerCase().includes(searchLower) || clientId.toLowerCase().includes(searchLower);
    return nameMatches;
  });


  const customHeaders = [
    { label: "Client ID", key: "clientReference_id" },
    { label: "First Name", key: "firstName" },  // Nested property
    { label: "Last Name", key: "lastName" },    // Nested property
    { label: "Investment amount", key: "InvestedAmount_USD" },     // Nested property
    { label: "Percentage", key: "Investor_Holidings" }, // Nested property
    { label: "Market Value", key: "Market_Value" },    // Nested property
    { label: "Return on Investment", key: "Return_On_Investment" }, // Nested property
    { label: "Distribution", key: "Distribution_Amt" },                     // Simple property
    { label: "Distribution Percent", key: "Distribution_Per" },                // Simple property        // Simple property
    { label: "Total Return", key: "Total_Return" },            // Simple property
    { label: "Total return on Investment", key: "Total_Return_On_Investment" },    
  ];
  
  const exportInvestorDetails = IODetails?.investors?.map((item, index) => ({
    "Client ID": item?.clientReference_id, // Keep as string
    "First Name": item?.firstName,
    "Last Name": item?.lastName,
    "Investment Amount": parseFloat(item?.InvestedAmount_USD) || 0, // Convert to float
    "Percentage": parseFloat(item?.Investor_Holidings) || 0, // Convert to float
    "Market Value": parseFloat(item?.Market_Value) || 0, // Convert to float
    "Return on Investment": parseFloat(item?.Return_On_Investment) || 0, // Convert to float
    "Distribution": parseFloat(item?.Distribution_Amt) || 0, // Convert to float
    "Distribution Percent": parseFloat(item?.Distribution_Per) || 0, // Convert to float
    "Total Return": parseFloat(item?.Total_Return) || 0, // Convert to float
    "Total return on Investment": parseFloat(item?.Total_Return_On_Investment) || 0, // Convert to float
  }));

  console.log(exportInvestorDetails);

  const extractedArray = filteredData?.map((item, index) => ({
    id: item?.id,
    "Client ID": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item?.clientReference_id}
      </Text>
    ),
    "First name": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item.firstName}
      </Text>
    ),
    "Last name": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item.lastName}
      </Text>
    ),
    "Investment amount": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        <Badge ms={1} colorScheme="green" me={1}>
          $
        </Badge>
        {/* {`$${formatCurrency(item.InvestedAmount_USD)}`} */}
        {`${parseFloat(item.InvestedAmount_USD || 0).toLocaleString(undefined, {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        })}`}
      </Text>
    ),
    Percentage: (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item.Investor_Holidings} %
      </Text>
    ),
    "Market Value": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        <Badge ms={1} colorScheme="green" me={1}>
          $
        </Badge>
        {`${parseFloat(item.Market_Value || 0).toLocaleString(undefined, {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        })}`}
      </Text>
    ),
    "Return on Investment": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        h={6}
        className="d-flex align-items-center web-text-small"
      >
        {item.Return_On_Investment || 0} %
      </Text>
    ),
    Distribution: (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        <Badge ms={1} colorScheme="green" me={1}>
          $
        </Badge>
        {/* {`$${item.Distribution_Amt}`} */}
        {`${parseFloat(item.Distribution_Amt || 0).toLocaleString(undefined, {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        })}`}
      </Text>
    ),
    "Distribution Percent": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {/* {`$${item.Distribution_Amt}`} */}
        {`${parseFloat(item.Distribution_Per || 0).toLocaleString(undefined, {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        })} %`}
      </Text>
    ),
    "Total Return": (
      <Text
        justifyContent={slideFromRight ? "right" : "left"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        <Badge ms={1} colorScheme="green" me={1}>
          $
        </Badge>
        {/* {`$${formatCurrency(item.Total_Return) || 0}`} */}
        {`${parseFloat(item.Total_Return || 0).toLocaleString(undefined, {
          minimumFractionDigits: 2,
          maximumFractionDigits: 2,
        })}`}
      </Text>
    ),
    "Total return on Investment": (
      <Text
        justifyContent={slideFromRight ? "right" : "center"}
        as={"span"}
        color={"teal.900"}
        fontWeight={"500"}
        className="d-flex align-items-center web-text-small"
      >
        {item.Total_Return_On_Investment || 0} %
      </Text>
    ),
  }));

  const handleDelete = () => {
    const updatedSponsors = sponser.filter(
      (sponsor) => sponsor.id !== actionId
    );

    setTimeout(() => {
      setInvestors(updatedSponsors);
      setDeleteAlert(false);
      setIsLoading(false);
    }, 100);
    setIsLoading(true);
  };

  const Total = () => {
    return (
      <Table size="sm">
        <Tbody backgroundColor="gray.50">
          <Tr>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              Total
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {`$${totalInvestedAmount}`}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {`$${totalMarketValue}`}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {`$${totalDistribution}`}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {`$${totalTotalReturn}`}
            </Th>
            <Th
              textAlign={"center"}
              p={3}
              width="100px"
              color={"#004118"}
              whiteSpace="normal"
              wordBreak="normal"
              overflowWrap="normal"
            >
              {" "}
            </Th>
          </Tr>
        </Tbody>
      </Table>
    );
  };

  const handleRefresh = async () => {
    setIsRefetchLoading(true);

    await refetch();
    setIsRefetchLoading(false);
  };


console.log(IODetails?.investors);


  return (
    <Box {...OPACITY_ON_LOAD} pb={0}>
      <Box bg="white.500">
        <HStack
          display={"flex"}
          justifyContent={"space-between"}
          pb={3}
          spacing="24px"
        >
          <Box  display={'flex'} gap={3}>
            <Input
              type="search"
              width={300}
              placeholder="Search..."
              size="sm"
              rounded="sm"
              focusBorderColor="green.500"
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
            />

          <Button
              onClick={() =>
                exportToExcelNew(exportInvestorDetails, "IO Investors Details")
              }
              leftIcon={<LuFileSpreadsheet />}
              colorScheme="forestGreen"
              size={"sm"}
              variant={"outline"}
              rounded={"sm"}
              fontSize={"xs"}
              w={100}
              me={2}
              isDisabled={exportInvestorDetails?.length === 0}
            > 
              Export xls
            </Button>
            <Box as="span">
              <Icon
                ms={0}
                animation={
                  isRefetchLoading ? `${rotate} 1s linear infinite` : "none"
                }
                bg={"gray.50"}
                onClick={handleRefresh}
                fontWeight={600}
                as={RepeatIcon}
                boxSize={8}
                p={2}
                rounded={"full"}
                _hover={{ bg: "gray.100" }}
                cursor={"pointer"}
              />
            </Box>
          </Box>

          <HStack
            bg={"#C6F6D5"}
            ps={4}
            pe={4}
            pt={1.5}
            pb={1.5}
            rounded={"md"}
            boxShadow={"sm"}
            display={"flex"}
            // alignItems={"end"}
            // flexDirection={"column"}
            alignItems={"center"}
          >
            <Text
              fontWeight={600}
              color={"gray.500"}
              fontSize={"xs"}
              as={"span"}
            >
              Total Investment Amount ( USD )
            </Text>
            
            <Text display={'flex'} alignItems={'center'} fontWeight={600} fontSize={"sm"} as={"span"} pt={"2px"}>
            <Badge p={1} ms={2} fontSize={'md'} colorScheme="green" me={0}>
              $
            </Badge>
              {parseFloat(IODetails?.totalAmtInvestmentInUSD).toLocaleString()}
            </Text>
          </HStack>
        </HStack>
      </Box>

      <NormalTable
        centered={true}
        emptyMessage={`We don't have any Sponers `}
        tableHeadRow={tableHeadRow}
        data={extractedArray}
        isLoading={isLoading}
        viewActionId={actionId}
        setViewActionId={setActionId}
        caption={<Total />}
        setMouseEnteredId={setMouseEnteredId}
        setMouseEntered={setMouseEntered}
      />

      <CustomAlertDialog
        onClose={() => setDeleteAlert(false)}
        isOpen={deleteAlert}
        message={"Are you sure you want to delete sponers?"}
        alertHandler={handleDelete}
        isLoading={isLoading}
      />
    </Box>
  );
};

export default Investors;
