import {
  Box,
  Divider,
  Flex,
  Heading,
  HStack,
  Image,
  Select,
  SimpleGrid,
  Text,
} from "@chakra-ui/react";
import React, { useState } from "react";
import {
  BsArrowsAngleContract,
  BsBoxArrowDown,
  BsBoxArrowUp,
} from "react-icons/bs";
import { FaRegPenToSquare } from "react-icons/fa6";
import { LuContact } from "react-icons/lu";
import { Link } from "react-router-dom";
import { useGetDashboardMasterQuery } from "../../Services/dashboard.service";
import InvestmentOpportunities from "./InvestmentOpportunities";
import IconOne from '../../Images/dash_icon_1.svg';
import IconTwo from '../../Images/dash_icon_2.svg';
import IconThree from '../../Images/dash_icon_3.svg';
import IconFour from '../../Images/dash_icon_4.svg'
import IconFive from '../../Images/dash_icon_5.svg';
import IconSix from '../../Images/dash_icon_6.svg';
import IconSeven from '../../Images/dash_icon_7.svg'

// const panddingReguest = [
//   {
//     icon: <BsBoxArrowUp />,
//     label: "Pending deposit requests",
//     count: 27,
//   },
//   {
//     icon: <BsBoxArrowDown />,
//     label: "Pending withdrawal requests",
//     count: 27,
//   },
//   {
//     icon: <LuContact />,
//     label: "Pending KYC review request",
//     count: 27,
//   },
//   {
//     icon: <FaRegPenToSquare />,
//     label: "Pending Acc modification request",
//     count: 27,
//   },
// ];

const Dashbaord = ({ showSearch = false }) => {
  const [filter, setFilter] = useState("today");
  const { data, error, isLoading } = useGetDashboardMasterQuery();
  console.log(data);

  const panddingReguest = [
    {
      icon: IconOne,
      label: "Pending deposit requests",
      count: parseFloat(
        data?.data?.pendingRequests?.pendingDepositReq?.totalDepositReq || 0
      ).toLocaleString(),
    },
    {
      icon: IconTwo,
      label: "Pending withdrawal requests",
      count: parseFloat(
        data?.data?.pendingRequests?.pendingWithdrawalReq || 0
      ).toLocaleString(),
    },
    {
      icon: IconThree,
      label: "Pending KYC review request",
      count: parseFloat(
        data?.data?.pendingRequests?.pendingKYCReviewReq || 0
      ).toLocaleString(),
    },
    {
      icon: IconFour,
      label: "Pending Acc modification request",
      count: parseFloat(
        data?.data?.pendingRequests?.pendingAccModReq?.totalAccModReq || 0
      ).toLocaleString(),
    },
  ];

  const userActivity = [
    {
      icon: IconFive,
      label: "Total number of users",
      count: data?.data?.userActivity?.totalCount, //totalCount
    },
    {
      icon: IconSix,
      label: "Total number of users with completed KYC (%)",
      count: data?.data?.userActivity?.KYCCompletedCount, //KYCCompletedCount
      percentage: data?.data?.userActivity?.completedKYCPer, //completedKYCPer
    },
    {
      icon: IconSeven,
      label: "Total number of Active users",
      count: data?.data?.userActivity?.ActiveUsers, //ActiveUsers
    },
  ];

  const closedOpportunities = [
    {
      icon: IconOne,
      label: "Closed Opportunities",
      count: parseFloat(
        data?.data?.investmentOpportunity?.closedOpportunityDetails
          ?.numberOfClosedOpportunities || 0
      ).toLocaleString(),
    },
    {
      icon: IconOne,
      label: "Total assets under managemnet",
      count: `$ ${parseFloat(
        data?.data?.investmentOpportunity?.closedOpportunityDetails?.totalAUM ||
          0
      ).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}`,
    },
    {
      icon: IconOne,
      label: "Total number of investors",
      count: parseFloat(
        data?.data?.investmentOpportunity?.closedOpportunityDetails
          ?.totalNumberOfInvestors || 0
      ).toLocaleString(),
    },
    {
      icon: IconOne,
      label: "Total number of unique investors",
      count: parseFloat(
        data?.data?.investmentOpportunity?.closedOpportunityDetails
          ?.numberOfUniqueInvestors || 0
      ).toLocaleString(),
    },
  ];

  const walletCase = [
    {
      amount: `$ ${parseFloat(
        data?.data?.walletBalance?.usersWalletCashInUSD || 0
      ).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}`,
      currency: "USD",
    },
    {
      amount: ` د. ب. ${parseFloat(
        data?.data?.walletBalance?.usersWalletCashInBHD || 0
      ).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}`,
      currency: "BHD",
    },
    {
      amount: ` ﷼. ${parseFloat(
        data?.data?.walletBalance?.usersWalletCashInSAR || 0
      ).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}`,
      currency: "SAR",
    },
    {
      amount: ` د.ك ${parseFloat(
        data?.data?.walletBalance?.usersWalletCashInKWD || 0
      ).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}`,
      currency: "KWD",
    },
    {
      amount: ` د.إ ${parseFloat(
        data?.data?.walletBalance?.usersWalletCashInAED || 0
      ).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}`,
      currency: "AED",
    },
    {
      amount: ` ﷼. ${parseFloat(
        data?.data?.walletBalance?.usersWalletCashInOMR || 0
      ).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}`,
      currency: "OMR",
    },
    {
      amount: ` ر. ق. ${parseFloat(
        data?.data?.walletBalance?.usersWalletCashInQAR || 0
      ).toLocaleString(undefined, {
        minimumFractionDigits: 2,
        maximumFractionDigits: 2,
      })}`,
      currency: "QAR",
    },
  ];

  return (
    <Box
      height={"100vh"}
      bg={"#fff"}
      roundedTop={0}
      pt={5}
      pr={4}
      overflowX={"hidden"}
      mb={5}
    >
      <Box display={"flex"} gap={5} mb={5}>
        <Box w={"40%"} bg={"#0047170F"} p={4} rounded={5}>
          <Heading fontSize={"md"} fontWeight={500}>
            Pending Request
          </Heading>
          <Divider />
          <SimpleGrid columns={2} spacing={3}>
            {panddingReguest.map((item, index) => (
              <Box key={index} bg="white" p={4} pb={2} rounded={10} border={'1px solid #0047171f'}>
                <Text fontSize={"18px"} mb={2}>
                  <Image src={item.icon} /> 
                </Text>
                <Text mb={0} mt={0} fontSize={"11px"} fontWeight={500}>
                  {item.label}
                </Text>
                <Text as="span" fontSize={"md"} fontWeight={700} mb={0}>
                  {item.count}
                </Text>
              </Box>
            ))}
          </SimpleGrid>
        </Box>
        <Box bg={"#0047170F"} w={"65%"} p={4} rounded={5}>
          <Heading fontSize={"md"} fontWeight={500}>
            User Activity
          </Heading>
          <Divider />
          <SimpleGrid columns={3} spacing={3}>
            {userActivity.map((item, index) => (
              <Box key={index} bg="white" p={4} rounded={10} border={'1px solid #0047171f'}>
                <Flex alignContent={"center"}>
                  <Text fontSize={"18px"}><Image w={'25px'} src={item.icon} /></Text>
                  <Text
                    fontSize={"11px"}
                    fontWeight={500}
                    mb={2}
                    minH={"38px"}
                    ml={1}
                    mt={0}
                  >
                    {item.label}
                  </Text>
                </Flex>
                <Text as="span" fontSize={"md"} fontWeight={700} mb={0}>
                  {item?.count}
                  {item?.percentage && (
                    <Text
                      as={"span"}
                      fontSize={"12px"}
                      color={"#666"}
                      fontWeight={400}
                    >
                      {` (${item?.percentage}) %`}
                    </Text>
                  )}
                </Text>
              </Box>
            ))}
          </SimpleGrid>
          <Box display={"flex"} gap={3} mt={4}>
            <Box w={"50%"} bg={"#fff"} p={4} rounded={10} border={'1px solid #0047171f'}>
              <Box h={"25px"}></Box>
              <HStack justifyContent={"space-between"}>
                <Box textAlign={"center"}>
                  <Text
                    as={"span"}
                    color={"#066123"}
                    fontSize={"md"}
                    fontWeight={500}
                  >
                    {data?.data?.userActivity?.openedAppToday?.percentage} %
                  </Text>
                  <Text fontSize={"11px"} fontWeight={500}>
                    Users that opened the app today
                  </Text>
                </Box>
                <Divider orientation="vertical" />
                <Box textAlign={"center"}>
                  <Text
                    as={"span"}
                    color={"#066123"}
                    fontSize={"md"}
                    fontWeight={500}
                  >
                    {parseFloat(
                      data?.data?.userActivity?.loggedInWithInLastMonth
                        ?.number || 0
                    ).toLocaleString()}
                  </Text>
                  <Text fontSize={"11px"} fontWeight={500}>
                    Users who logged in during the last month
                  </Text>
                </Box>
              </HStack>
            </Box>
            <Box
              w={"50%"}
              bg={"#fff"}
              p={4}
              rounded={10}
              alignItems={"inherit"}
              border={'1px solid #0047171f'}
            >
              <Box display={"flex"} justifyContent={"end"}>
                <Select
                  bg={"#0047170F"}
                  w={"110px"}
                  display={"flex"}
                  alignItems={"center"}
                  // placeholder="Select"
                  size="xs"
                  rounded={5}
                  onChange={(e) => setFilter(e.target.value)}
                >
                  <option value="today" selected>
                    Today
                  </option>
                  <option value="last7days">Last 7 day's</option>
                  <option value="last30days">Last 30 day's</option>
                </Select>
              </Box>
              <HStack justifyContent={"space-between"}>
                <Box textAlign={"center"}>
                  <Text
                    as={"span"}
                    color={"#066123"}
                    fontSize={"md"}
                    fontWeight={500}
                  >
                    {filter === "today"
                      ? data?.data?.userActivity?.newSignUps?.today
                      : filter === "last7days"
                      ? data?.data?.userActivity?.newSignUps?.last7days
                      : data?.data?.userActivity?.newSignUps?.last30days}
                  </Text>
                  <Text fontSize={"11px"} fontWeight={500}>
                    New sign-ups{" "}
                  </Text>
                </Box>
                <Divider orientation="vertical" />
                <Box textAlign={"center"}>
                  <Text
                    as={"span"}
                    color={"#066123"}
                    fontSize={"md"}
                    fontWeight={500}
                  >
                    {filter === "today"
                      ? data?.data?.userActivity?.newKYCVerifications?.today
                      : filter === "last7days"
                      ? data?.data?.userActivity?.newKYCVerifications?.last7days
                      : data?.data?.userActivity?.newKYCVerifications
                          ?.last30days}
                  </Text>
                  <Text fontSize={"11px"} fontWeight={500}>
                    New KYC verification
                  </Text>
                </Box>
              </HStack>
            </Box>
          </Box>
        </Box>
      </Box>
      <Box display={"flex"} gap={5}>
        <Box w={"50%"} bg={"#0047170F"} p={4} rounded={5}>
          <Heading fontSize={"md"} fontWeight={500}>
            Investment Opportunities
          </Heading>
          <Divider />
          <Box mb={5} bg={"#fff"} py={2} rounded={4} border={'1px solid #0047171f'}>
            <HStack
              justifyContent={"space-between"}
              px={3}
              alignItems={"center"}
              mb={1}
            >
              <Heading fontSize={"sm"} fontWeight={500} py={1} mb={0}>
                Open Opportunities
              </Heading>
              <Link to={"/investment-opportunities"}>
                <BsArrowsAngleContract fontSize={"18px"} />
              </Link>
            </HStack>
            <Box h={"150px"} overflowY={"scroll"} position={"relative"}>
              <InvestmentOpportunities
                showSearch={false}
                selectStyle={{
                  right: "5px",
                  marginBottom: "5px",
                  bg:'#e6f3e9'
                }}
              />
            </Box>
          </Box>
          <SimpleGrid columns={2} spacing={4}>
            {closedOpportunities.map((item, index) => (
              <Box key={index} bg="white" p={4} rounded={10} border={'1px solid #0047171f'}>
                <HStack alignItems={"center"}>
                  <Text fontSize={"17px"} mb={0}>
                  <Image src={item.icon} />
                  </Text>
                  <Text mb={0} mt={0} fontSize={"11px"} fontWeight={500}>
                    {item.label}
                  </Text>
                </HStack>
                <Text as="span" fontSize={"md"} fontWeight={700} mb={0}>
                  {/* {parseFloat(item?.count || 0).toLocaleString(undefined, {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2,
                  })} */}
                  {item.count}
                </Text>
              </Box>
            ))}
          </SimpleGrid>
        </Box>
        <Box w={"50%"} bg={"#0047170F"} p={4} rounded={5}>
          <Heading fontSize={"md"} fontWeight={500}>
            Wallet Balances
          </Heading>
          <Divider />
          <Box bg={"#fff"} p={4} rounded={4} mb={5} border={'1px solid #0047171f'}>
            <Text fontSize={"xxl"} fontWeight={600} mb={2}>
              ${" "}
              {parseFloat(
                data?.data?.walletBalance?.totalCashAvailAcrossAllUSD || 0
              ).toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2,
              })}
              {/* {data?.data?.walletBalance?.totalCashAvailAcrossAllUSD} */}
            </Text>
            <Text fontSize={"md"} mb={0}>
              TOTAL CASH AVAILABLE ACROSS ALL WALLETS USD
            </Text>
          </Box>
          <Text fontSize={"sm"} mb={2}>
            Sum of users available wallet cash in
          </Text>
          <SimpleGrid columns={2} spacing={2} mb={4}>
            {walletCase.slice(0, 4).map((item, index) => (
              <Box key={index} bg={"#fff"} p={3} rounded={4} border={'1px solid #0047171f'}>
                <Text mb={1} fontSize={"md"} fontWeight={500}>
                  {item.amount}
                </Text>
                <Text mb={0} fontSize={"md"} color={"#00000075"}>
                  {item.currency}
                </Text>
              </Box>
            ))}
          </SimpleGrid>

          <SimpleGrid columns={3} spacing={2}>
            {walletCase.slice(4).map((item, index) => (
              <Box key={index} bg={"#fff"} p={3} rounded={4} border={'1px solid #0047171f'}>
                <Text mb={1} fontSize={"md"} fontWeight={500}>
                  {item.amount}
                </Text>
                <Text mb={0} fontSize={"md"} color={"#00000075"}>
                  {item.currency}
                </Text>
              </Box>
            ))}
          </SimpleGrid>
        </Box>
      </Box>
    </Box>
  );
};

export default Dashbaord;
