import React, { useContext, useEffect, useState } from "react";
import { CgProfile } from "react-icons/cg";
import logoMiniDark from "../assets/favicon.png";
import logoMini from "../assets/logo-min.png";
import logoDark from "../assets/logo.png";
import logo from "../assets/logo2.png";

import {
  ArrowBackIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  AtSignIcon,
} from "@chakra-ui/icons";
import {
  Accordion,
  AccordionButton,
  AccordionIcon,
  AccordionItem,
  AccordionPanel,
  Alert,
  AlertIcon,
  Box,
  Button,
  Image,
  Text,
  Tooltip,
} from "@chakra-ui/react";
import Cookies from "js-cookie"; // Import the Cookies library
import { GrManual } from "react-icons/gr";
import { HiOutlineChartSquareBar } from "react-icons/hi";
import { HiOutlineBanknotes } from "react-icons/hi2";
import { LuContact } from "react-icons/lu";
import { MdNotificationsNone, MdOutlineAddChart } from "react-icons/md";
import {
  RiAccountBoxLine,
  RiBankLine,
  RiExchangeBoxLine,
  RiFileUserLine,
  RiMoneyDollarBoxLine,
} from "react-icons/ri";
import {
  TbLayoutDashboard,
  TbListDetails,
  TbReportMoney,
  TbTransactionDollar,
} from "react-icons/tb";
import { VscSymbolClass } from "react-icons/vsc";
import {
  Link,
  NavLink,
  Route,
  Routes,
  useLocation,
  useNavigate,
} from "react-router-dom";
import HeaderMain from "../Components/HeaderMain";
import { isMaker } from "../Constants/Constants";
import GlobalStateContext from "../Contexts/GlobalStateContext";
import CreateRequest from "../Pages/Fawateer/CreateRequest";
import ApproveHistory from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryChecker";
import ApproveHistoryMaker from "../Pages/FawateerChecker/ApproveHistory/ApproveHistoryMaker";
import ApproveRequest from "../Pages/FawateerChecker/ApproveRequest/ApproveRequest";
import NotFound from "../Pages/NotFound";
import SplashScreen from "../Pages/SplashScreen";
import { nav } from "../Routes/Nav";
import { RouteLink } from "../Routes/Routes";
import { useProfileQuery } from "../Services/io.service";
import { useLogoutMutation } from "../Services/token.serivce";

const DashboardLayout = ({ isOnline }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const path = location.pathname;
  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
  const [openDrawerClick, setOpenDrawerClick] = useState(true);
  const {
    setIsAuthenticate,
    colorMode,
    toggleColorMode,
    setSlideFormRight,
    slideFromRight,
  } = useContext(GlobalStateContext);
  const [isSplashVisible, setSplashVisible] = useState(true);
  const [openIndex, setOpenIndex] = useState(null);

  const { data, refetch } = useProfileQuery();

  // useEffect(() => {
  //   if (
  //     !localStorage.getItem("accessToken") &&
  //     !localStorage.getItem("refreshToken")
  //   ) {
  //     logOutHandler();
  //     return navigate("/login");
  //   }
  // }, []);

  useEffect(() => {
    const savedIndex = localStorage.getItem("openAccordionIndex");
    if (savedIndex !== null) {
      setOpenIndex(parseInt(savedIndex));
    }
  }, []);

  const handleAccordionChange = (index) => {
    const newIndex = openIndex === index ? null : index;
    setOpenIndex(newIndex);
    localStorage.setItem("openAccordionIndex", newIndex);
  };

  useEffect(() => {
    // Set a timer to hide the splash screen after 3 seconds
    const timer = setTimeout(() => {
      setSplashVisible(false);
    }, 1000); // 3000ms = 3 seconds
    refetch();
    // Cleanup the timer
    return () => clearTimeout(timer);
  }, []);

  const openDrawerOnClick = () => {
    setOpenDrawerClick(!openDrawerClick);
  };

  const [logout] = useLogoutMutation();

  const logOutHandler = async () => {
    // dispach(loginUser(false));
    setIsAuthenticate(false);
    Cookies.remove("isAuthenticated");
    try {
      await logout();
      localStorage.clear();
      navigate("/login");
    } catch (error) {
      console.log(error);
    }
  };

  // // Function to get the title based on the route
  const getTitle = () => {
    switch (true) {
      case "/":
        return "👋🏻 Hi, Admin";

      // case path.startsWith("/"):
      //   return (z
      //     <span className="d-flex align-items-end gap-2">
      //       <TbLayoutDashboard className="h4 m-0" />Dashboard
      //     </span>
      //   );

      case path.startsWith("/investment-opportunities"):
        return (
          <span className="d-flex align-items-end gap-2">
            <TbLayoutDashboard className="h4 m-0" />
            dashboard / Open Opportunities
          </span>
        );
      case path.startsWith("/sponser"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0" /> Sponsor
          </span>
        );
      case path.startsWith("/email"):
        return (
          <span className="d-flex align-items-end gap-2">
            <AtSignIcon className="h4 m-0" /> Email Notification
          </span>
        );
      case path.startsWith("/investment-type"):
        return (
          <span className="d-flex align-items-end gap-2">
            <VscSymbolClass className="h4 m-0" /> Investment Type
          </span>
        );
      case path.startsWith("/profile"):
        return (
          <span className="d-flex align-items-end gap-2">
            <CgProfile className="h4 m-0" /> Profile
          </span>
        );
      case path.startsWith("/exchange-rate"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Exchange rate
          </span>
        );
      case path.startsWith("/create-io"):
        if (/^\/create-io\/[A-Za-z0-9_-]+$/.test(path)) {
          return (
            <span className="d-flex align-items-end gap-2">
              <MdOutlineAddChart className="h4 m-0 fw-normal" />
              Edit IO
            </span>
          );
        }
        return (
          <span className="d-flex align-items-end gap-2">
            <MdOutlineAddChart className="h4 m-0 fw-normal" />
            Create IO
          </span>
        );
      case path.startsWith("/view-io"):
        return (
          <span className="d-flex align-items-end gap-2">
            <HiOutlineChartSquareBar className="h4 m-0 fw-normal" />
            View IO
          </span>
        );
      case path.startsWith("/investor-details"):
        return (
          <span className="d-flex align-items-end gap-2">
            <TbListDetails className="h4 m-0 fw-normal" />
            Investor Details
          </span>
        );
      case path.startsWith("/investor-transactions"):
        return (
          <span className="d-flex align-items-end gap-2">
            <TbTransactionDollar className="h4 m-0 fw-normal" />
            Investor Transactions
          </span>
        );

      case path.startsWith("/deposit-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Deposit Pending Request
          </span>
        );
      case path.startsWith("/deposit-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Deposit Request
          </span>
        );

      case path.startsWith("/fawateer"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Fawateer Deposit
          </span>
        );
      case path.startsWith("/fawateer-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Fawateer Deposit
          </span>
        );

      case path.startsWith("/withdraw-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Withdrawal pending request
          </span>
        );
      case path.startsWith("/withdraw-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Withdrawal request
          </span>
        );
      case path.startsWith("/investor-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Investor pending request
          </span>
        );
      case path.startsWith("/investor-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Investor request
          </span>
        );
      case path.startsWith("/deletion-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Deletion pending request
          </span>
        );
      case path.startsWith("/deletion-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Deletion request
          </span>
        );

      case path.startsWith("/bank-deposit-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiBankLine className="h4 m-0 fw-normal" />
            Bank Deposit Request
          </span>
        );
      case path.startsWith("/reversal-fawateer-deposit"):
        return (
          <span className="d-flex align-items-end gap-2">
            <HiOutlineBanknotes className="h4 m-0 fw-normal" />
            Fawateer Deposit
          </span>
        );
      case path.startsWith("/account-deletion-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiAccountBoxLine className="h4 m-0 fw-normal" />
            Account Deletion Request
          </span>
        );

      case path.startsWith("/bank-investor"):
        return (
          <span className="d-flex align-items-end gap-2">
            <TbReportMoney className="h4 m-0 fw-normal" />
            Ban / Unban Investor
          </span>
        );
      case path.startsWith("/academy"):
        return (
          <span className="d-flex align-items-end gap-2">
            <GrManual className="h4 m-0 fw-normal" />
            Academy
          </span>
        );
      case path.startsWith("/notification"):
        return (
          <span className="d-flex align-items-end gap-2">
            <MdNotificationsNone className="h4 m-0 fw-normal" />
            Push Notification
          </span>
        );
      case path.startsWith("/contact"):
        return (
          <span className="d-flex align-items-end gap-2">
            <LuContact className="h4 m-0 fw-normal" />
            Contact Details
          </span>
        );
      case path.startsWith("/users"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiFileUserLine className="h4 m-0 fw-normal" />
            Users
          </span>
        );
      case path.startsWith("/bank-details"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiBankLine className="h4 m-0 fw-normal" />
            Bank Details
          </span>
        );
      case path.startsWith("/deletion-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Deletion pending request
          </span>
        );
      case path.startsWith("/deletion-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Deletion request
          </span>
        );
      case path.startsWith("/deletion-request"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Deletion pending request
          </span>
        );
      case path.startsWith("/deletion-history"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiExchangeBoxLine className="h4 m-0 fw-normal" />
            Deletion request
          </span>
        );
      case path.startsWith("/subadmin"):
        return (
          <span className="d-flex align-items-end gap-2">
            <RiMoneyDollarBoxLine className="h4 m-0 fw-normal" />
            Manage SubAdmin
          </span>
        );

      default:
        if (path.startsWith("/community/view/")) {
          return (
            <span className="d-flex align-items-center">
              <Link to={"/community/"}>
                <ArrowBackIcon className="me-2  fs-3 link p-1 rounded-1" />
              </Link>
              Community
            </span>
          );
        } else if (path.startsWith("/community/edit/")) {
          return (
            <span className="d-flex align-items-center">
              <Link to={"/community/"}>
                <ArrowBackIcon className="me-2 fs-3 link p-1 rounded-1" />
              </Link>
              Community
            </span>
          );
        }
        return "Tanami";
    }
  };

  if (isSplashVisible) {
    return <SplashScreen />;
  }

  const _filteredNav = isMaker()
    ? nav.filter(
        (item) =>
          item.title !== "REVERSAL TRANSACTION" &&
          item.path !== "/bank-deposit-request" &&
          item.path !== "/reversal-fawateer-deposit" &&
          item.path !== "/account-deletion-request"
      )
    : nav;

  const filteredNav = _filteredNav.map((item) => {
    if (item.submenu) {
      return {
        ...item,
        submenu: item.submenu.filter(
          (submenuItem) =>
            !(!data?.data?.superAdmin && submenuItem.title === "Sub Admin")
        ),
      };
    }
    // if (item.title === "REVERSAL TRANSACTION" && item.type === "title") {
    // }

    return item;
  });

  return (
    <Box
      style={{
        height: "100vh",
        width: "100vw",
        position: "relative",
        overflow: "hidden",
      }}
      className="d-flex"
      pe={0.5}
    >
      <Alert
        transition={"0.5s"}
        h={53}
        transform={isOnline ? "translateY(-100px)" : "translateY(0px)"}
        position={"absolute"}
        zIndex={999}
        status="info"
        variant="solid"
        bgGradient="linear(to-r, red.500, yellow.500, red.500)"
        // bgGradient='linear(to-r, #1EBCA3, #22CAB3)'
        color={"white"}
        fontWeight={600}
        fontSize={"md"}
      >
        <AlertIcon color={"white"} />
        No Internet !
      </Alert>

      {/* <Box
        bottom={4}
        right={!slideFromRight ? 4 : "auto"}
        left={slideFromRight ? 4 : "auto"}
        backgroundColor={"#000"}
        rounded={"full"}
        p={2}
        w={8}
        h={8}
        display={"flex"}
        justifyContent={"center"}
        alignItems={"center"}
        color={"#004118"}
        fontWeight={"800"}
        cursor={"pointer"}
        position={"absolute"}
        transition={"0.5s"}
        boxShadow={"md"}
        onClick={() => setSlideFormRight(!slideFromRight)}
        _hover={{
          opacity: 1,
        }}
        zIndex={999}
      >
        <IoMdSwap />
      </Box> */}

      {slideFromRight ? null : (
        <aside
          className="h-100  position-relative sideBar"
          // onMouseOver={() => setIsDrawerOpen(true)}
          // onMouseLeave={() => setIsDrawerOpen(false)}
          style={{
            width: isDrawerOpen || openDrawerClick ? 230 : 74,
            transition: "width 0.3s ease-in-out", // Smooth transition for width change
            // overflow: "hidden",
            backgroundColor: "#0041180A",
            position: "relative",
            // backgroundColor: "#002F0F",
          }}
        >
          <div
            className={`d-flex  ${
              isDrawerOpen || openDrawerClick
                ? "justify-content-start"
                : "justify-content-center"
            }  p-3 pt-3 pb-3 position-relative `}
            height={"10%"}
          >
            {isDrawerOpen || openDrawerClick ? (
              <Image
                style={{
                  width: 110,
                }}
                src={colorMode === "light" ? logo : logoDark}
                alt="Logo"
                onClick={() => navigate("/")}
                cursor={"pointer"}
              />
            ) : (
              <Image
                style={{
                  width: 30,
                }}
                src={colorMode === "light" ? logoMini : logoMiniDark}
                alt="Logo"
                onClick={() => navigate("/")}
                cursor={"pointer"}
              />
            )}
          </div>

          <Box
            className="ps-2 scroll-bar pe-1 pt-3"
            style={{
              height: "90%",
              overflowY: "scroll",
              overflowX: "hidden",
              paddingBottom: "5rem",
            }}
          >
            <Accordion
              m={0}
              allowToggle
              defaultIndex={[0]}
              index={openIndex}
              onChange={handleAccordionChange}
            >
              {filteredNav.map(
                ({ title, type, Icon, submenu, path }, index) => {
                  if (type === "accordion") {
                    return (
                      <AccordionItem key={index} border={"none"}>
                        <Tooltip
                          isDisabled={isDrawerOpen || openDrawerClick}
                          hasArrow
                          bg={"#fff"}
                          fontSize={"xs"}
                          label={title}
                          placement="top-start"
                          color={"blue.800"}
                        >
                          <AccordionButton
                            style={{ height: "auto" }}
                            className={`${
                              isDrawerOpen || openDrawerClick
                                ? "p-2 web-text-medium ps-3 justify-content-between"
                                : "p-2 ps-1 web-text-xlarge justify-content-center"
                            } rounded-1 link d-flex align-items-center gap-2 w-100 mb-1`}
                          >
                            <Box
                              as="span"
                              display={"flex"}
                              gap={2}
                              alignItems={"center"}
                            >
                              {/* {Icon && title === "Admin" ? <Image w={15} src={shield} /> : <Icon className={`web-text-large`} />} */}
                              {Icon && (
                                <Icon
                                  fontSize={title === "Admin" ? "18px" : "15px"}
                                />
                              )}

                              <Text
                                as={"span"}
                                display={
                                  isDrawerOpen || openDrawerClick
                                    ? "flex"
                                    : "none"
                                }
                                alignItems="center"
                                overflow="hidden"
                                textAlign={"left"}
                              >
                                {title}
                              </Text>
                            </Box>
                            <AccordionIcon />
                          </AccordionButton>
                        </Tooltip>
                        <AccordionPanel
                          p={0}
                          pb={1}
                          display={"flex"}
                          flexDirection={"column"}
                          gap={1}
                        >
                          {submenu?.map(
                            (
                              {
                                title: subMenuTitle,
                                path: link,
                                icon: SubIcon,
                              },
                              i
                            ) => (
                              <Tooltip
                                isDisabled={isDrawerOpen || openDrawerClick}
                                hasArrow
                                bg={"#fff"}
                                fontSize={"xs"}
                                label={subMenuTitle}
                                placement="right"
                                color={"blue.800"}
                              >
                                <Box
                                  key={i}
                                  style={{
                                    height: "auto",
                                    position: "relative",
                                  }}
                                  className={`${
                                    isDrawerOpen || openDrawerClick
                                      ? " web-text-medium ps-4"
                                      : " web-text-xlarge  justify-content-center"
                                  }  d-flex align-items-center  p-0`}
                                >
                                  <Box
                                    backgroundColor={"gray.300"}
                                    style={{
                                      position: "absolute",
                                      top: 0,
                                      width: 2,
                                      left: 22,
                                      height:
                                        i === submenu?.length - 1
                                          ? "55%"
                                          : "120%",
                                      borderRadius: "0 0 10px 10px",
                                    }}
                                  />
                                  <Box
                                    backgroundColor={"gray.300"}
                                    style={{
                                      position: "absolute",
                                      width: 10,
                                      left: 22,
                                      height: 2,
                                    }}
                                  />

                                  <NavLink
                                    className={`${
                                      isDrawerOpen || openDrawerClick
                                        ? "p-2 ps-1 ms-2 web-text-medium "
                                        : "p-2 ps-0 ms-0 zindex-3 ms-4 web-text-xlarge justify-content-center"
                                    } rounded-1 link d-flex align-items-center gap-2 w-100 `}
                                    to={link}
                                  >
                                    {SubIcon && (
                                      <SubIcon
                                        className="web-text-large ms-2"
                                        style={{ zIndex: 111 }}
                                      />
                                    )}
                                    <Text
                                      as={"span"}
                                      display={
                                        isDrawerOpen || openDrawerClick
                                          ? "flex"
                                          : "none"
                                      }
                                      alignItems="center"
                                      overflow="hidden"
                                    >
                                      {subMenuTitle === "Aprover Request"
                                        ? data?.data?.role === "Maker"
                                          ? "Create Request"
                                          : "Aprover Request"
                                        : subMenuTitle}
                                    </Text>
                                  </NavLink>
                                </Box>
                              </Tooltip>
                            )
                          )}
                        </AccordionPanel>
                      </AccordionItem>
                    );
                  } else if (type === "title") {
                    return (
                      <Text
                        as={"span"}
                        key={index}
                        className="web-text-xxsmall fw-600  text-secondary fw-bold"
                      >
                        {title}
                      </Text>
                    );
                  } else if (type === "single") {
                    return (
                      <Tooltip
                        hasArrow
                        bg={"#fff"}
                        fontSize={"xs"}
                        label={title}
                        placement="top-start"
                        color={"blue.800"}
                      >
                        <NavLink
                          key={index}
                          style={{ height: "auto", position: "relative" }}
                          className={`${
                            isDrawerOpen || openDrawerClick
                              ? "p-2 web-text-medium"
                              : "p-2 ps-0 web-text-xlarge justify-content-start"
                          } rounded-1 link d-flex align-items-center gap-2 w-100 mb-2`}
                          to={path}
                        >
                          {Icon && <Icon className="web-text-large ms-2" />}
                          <Text
                            as={"span"}
                            display={
                              isDrawerOpen || openDrawerClick ? "flex" : "none"
                            }
                            alignItems="center"
                            overflow="hidden"
                          >
                            {title}
                          </Text>
                        </NavLink>
                      </Tooltip>
                    );
                  } else {
                    return null;
                  }
                }
              )}
            </Accordion>
          </Box>

          <Button
            colorScheme={"forestGreen"}
            rounded={"lg"}
            // onMouseOver={() => setIsDrawerOpen(true)}
            // onMouseLeave={() => setIsDrawerOpen(false)}
            onClick={openDrawerOnClick}
            style={{
              width: 18,
              height: 26,
              position: "absolute",
              right: -19,
              bottom: 28,
              zIndex: 99,
            }}
          >
            {isDrawerOpen || openDrawerClick ? (
              <ArrowLeftIcon className="web-text-small" />
            ) : (
              <ArrowRightIcon className="web-text-small " />
            )}
          </Button>
          {/* <Text textAlign={'center'} fontWeight={500} fontSize={'xs'} color={"gray.600"}>{getCountdownTimer(localStorage.getItem('accessTokenExp'))}</Text> */}
        </aside>
      )}

      <main
        className={`h-100   ${
          slideFromRight ? "pe-3" : "ps-3"
        } d-flex flex-column gap-0`}
        style={{
          width: `calc(100% - ${isDrawerOpen || openDrawerClick ? 230 : 74}px)`,
          transition: "width 0.3s ease-in-out",
        }}
      >
        {/* <header className="p-2 ps-0 pt-3 fw-400  border-bottom">
          <span className="fs-5">{getTitle()}</span>
        </header> */}

        <HeaderMain
          data={data}
          slideDirecttion={slideFromRight}
          logOutHandler={logOutHandler}
          icon
          title={getTitle()}
        />

        {/* <CustomBreadcrumb /> */}

        <AppContent data={data} />
      </main>
    </Box>
  );
};

export default DashboardLayout;

const AppContent = ({ data }) => {
  return (
    <Routes>
      {RouteLink.map(({ path, Component }, index) => (
        <Route key={index} path={path} element={<Component />} />
      ))}

      <Route
        path="/fawateer"
        element={
          data?.data?.role === "Maker" ? <CreateRequest /> : <ApproveRequest />
        }
      />
      <Route
        path="/fawateer-history"
        element={
          data?.data?.role === "Maker" ? (
            <ApproveHistoryMaker />
          ) : (
            <ApproveHistory />
          )
        }
      />

      <Route path="*" element={<NotFound />} />
    </Routes>
  );
};