import {
  Box,
  createListCollection,
  Heading,
  HStack,
  Status,
  Tabs,
  Text,
} from "@chakra-ui/react";
import BarChart from "../../components/Charts/BarChart";
import CircularApp from "../../components/Charts/CircularProgress";
import SemiDoughnutChart from "../../components/Charts/SemiDoughnutChart";
import MainFrame from "../../components/MainFrame";
import {
  AccordionItem,
  AccordionItemContent,
  AccordionItemTrigger,
  AccordionRoot,
} from "../../components/ui/accordion";
import { Button } from "../../components/ui/button";
import {
  SelectContent,
  SelectItem,
  SelectRoot,
  SelectTrigger,
  SelectValueText
} from "../../components/ui/select";
import AgencyName from "./AgencyName";
import { useGetAgencyListQuery, useGetFaqListQuery, useGetNewUserQuery, useGetPastUserQuery, useGetTotalUserQuery } from "../../Redux/Service/dashBoard";
import { useEffect, useState } from "react";
import { Link } from "react-router-dom";

const Dashboard = () => {
  const { data: totalUsers } = useGetTotalUserQuery()
  const { data: pastUsers } = useGetPastUserQuery()
  const { data: newUsers } = useGetNewUserQuery()
  const {data: agencyList} = useGetAgencyListQuery()
  const { data: faqList } = useGetFaqListQuery()
  const [activeTab, setActiveTab] = useState("tab-1");
  const [totalUser, setTotalUser] = useState<any>(null);

  console.log("data", totalUser)

  useEffect(() => {
    if (activeTab === "tab-1") {
      setTotalUser( pastUsers?.data)
    } else if (activeTab === "tab-2") {
      setTotalUser(totalUsers?.data)
    } else if (activeTab === "tab-3") {
      setTotalUser(newUsers?.data)
    }
  }, [totalUsers?.data, pastUsers?.data, newUsers?.data, activeTab]);

  const frameworks = createListCollection({
    items: [
      { label: "Today", value: "Today" },
      { label: "Week", value: "Week" },
      { label: "Month", value: "Month" },
      { label: "Year", value: "Year" },
    ],
  });

  // const accItems = [
  //   {
  //     value: "1",
  //     title: "How to create new account?",
  //     text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
  //   },
  //   {
  //     value: "2",
  //     title: "How to create new account?",
  //     text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
  //   },
  //   {
  //     value: "3",
  //     title: "How to create new account?",
  //     text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
  //   },
  //   {
  //     value: "4",
  //     title: "How to create new account?",
  //     text: "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since. Lorem Ipsum has been the industry's standard dummy text ever since.",
  //   },
  // ];

  return (
    <MainFrame>
      <Box display={"flex"} p={"20px"} pe={'20px'} gap={5}>
        <Box rounded={'lg'} w={"30%"} boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}>
          <Heading fontSize={"sm"} p={2}>
            Total Users : {totalUsers?.data?.totalUserCount ?? 0}
          </Heading>
          <Tabs.Root
            size={"sm"}
            w={"80%"}
            m={"auto"}
            variant="enclosed"
            fitted
            defaultValue={"tab-1"}
            value={activeTab}
            onValueChange={(details) => setActiveTab(details.value)}
            mb={6}
          >
            <Tabs.List>
              <Tabs.Trigger fontSize={"xs"} value="tab-1">
                Past 24 hrs
              </Tabs.Trigger>
              <Tabs.Trigger fontSize={"xs"} value="tab-2">
                Total Users
              </Tabs.Trigger>
              <Tabs.Trigger fontSize={"xs"} value="tab-3">
                New Signups
              </Tabs.Trigger>
            </Tabs.List>
          </Tabs.Root>
          <Box>
            {totalUser && <SemiDoughnutChart totalUser={totalUser} />}
          </Box>

          <Box
            w={"80%"}
            m={"auto"}
            display={"flex"}
            justifyContent={"space-between"}
            mt={8}
          >
            <Status.Root colorPalette="blue">
              <Status.Indicator />
              Recruiter <Text fontWeight={500}>{totalUser?.past24hourRecruiterCount ?? totalUser?.totalRecruiterCount ?? totalUser?.newRecuiterCount }</Text>
            </Status.Root>
            <Status.Root colorPalette="blue">
              <Status.Indicator />
              Customer <Text fontWeight={500}>{totalUser?.past24hourCustomercount ?? totalUser?.totalCustomerCount ?? totalUser?.newCustomerCount}</Text>
            </Status.Root>
          </Box>
        </Box>
        <Box
          p={"20px"}
          w={"49%"}
          rounded={'lg'}
          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
        >
          <HStack alignItems={"center"} mb={4}>
            <Text fontSize={"sm"}>Item approvals in</Text>
            <SelectRoot collection={frameworks} size="xs" width="200px">
              <SelectTrigger>
                <SelectValueText p={2} placeholder="Select movie" />
              </SelectTrigger>
              <SelectContent p={2}>
                {frameworks.items.map((movie) => (
                  <SelectItem item={movie} key={movie.value}>
                    {movie.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </SelectRoot>
          </HStack>
          <BarChart />
        </Box>
        <Box
          w={"20%"}
          boxShadow={"rgba(99, 99, 99, 0.2) 0px 2px 8px 0px"}
          p={'10px'}
          rounded={'lg'}
        >
          <Text fontSize={"sm"} fontWeight={500} pt={3}>Number Of Groups created</Text>
          <CircularApp />
        </Box>
      </Box>
      <Box p={"20px"} pt={0} display={"flex"} gap={5}>
        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} h={'100%'} p={"10px"} overflowY={'scroll'} height={'292px'}>
          <HStack justifyContent={"space-between"} mb={5}>
            <Text fontSize={"xs"} fontWeight={500}>Faqs</Text>
            <Button
              bg={"#fff"}
              color={"#222222CC"}
              px={3}
              fontSize={"12px"}
              h={"28px"}
            >
              <Link to="/manage-cms/faq">View ALL</Link>
            </Button>
          </HStack>
          <AccordionRoot collapsible defaultValue={["b"]}>
            {faqList?.data.map((item) => (
              <AccordionItem
                boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
                key={item.id}
                value={item.faqs_xid.toString()}
                bg={"#fff"}
                mb={2}
                p={"12px"}
                rounded={5}
                borderBottom={0}
              >
                <AccordionItemTrigger fontSize={"sm"} >
                  {item.question}
                </AccordionItemTrigger>
                <AccordionItemContent fontSize={"xs"} color={'#222222CC'} pt={2}>
                  {item.answer}
                </AccordionItemContent>
              </AccordionItem>
            ))}
          </AccordionRoot>
        </Box>
        <Box w={"50%"} rounded={'lg'} bg={"#f2f2f2"} alignItems={'flex-start'} overflowY={'scroll'} height={'292px'}>
          {agencyList && <AgencyName agencyList={agencyList}/>}
        </Box>
      </Box>
    </MainFrame>
  );
};

export default Dashboard;
