"use client";
import {
  DashboardCommentIcon,
  DashboardConnectIcon,
  DashboardShareIcon,
  DashboardSpeecIcon,
  DashboardTopLeftPointIcon,
  DashboardUserIcon,
} from "@/components/icons/dashboard-icon";
import { Submenu1Icon } from "@/components/icons/sidebar-icon";
import {
  Accordion,
  AccordionItem,
  Button,
  Calendar,
  Checkbox,
  CheckboxGroup,
  CheckboxIcon,
  DateRangePicker,
  Image,
  Modal,
  ModalBody,
  ModalContent,
  ModalHeader,
  Pagination,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Select,
  SelectItem,
  SelectSection,
  Skeleton,
  useDisclosure,
} from "@heroui/react";
import ApexChartColumn from "./chart/column-chart";
import ApexChartDonut from "./chart/donut-chart";
import ApexChartLineArea from "./chart/line-area-chart";
import Cookies from "js-cookie";
import Link from "next/link";
import { Fragment, useEffect, useState } from "react";
import {
  getListArticle,
  getListArticleAdminPage,
  getRecapArticleData,
  getStatisticSummary,
  getTopArticles,
  getUserLevelDataStat,
} from "@/services/article";
import { Article } from "@/types/globals";
import {
  convertDateFormat,
  convertDateFormatNoTime,
  convertDateFormatNoTimeV2,
  textEllipsis,
} from "@/utils/global";
import {
  parseDate,
  getLocalTimeZone,
  parseZonedDateTime,
  parseAbsoluteToLocal,
} from "@internationalized/date";
import { Input } from "@heroui/input";
import {
  ChevronLeftIcon,
  ChevronRightIcon,
  EyeIconMdi,
  SearchIcons,
} from "@/components/icons";
import { format } from "date-fns";
import ApexChartColumnVisitors from "./chart/visitor-chart";
import { IndonesiaMap } from "@/components/ui/maps-charts";

type ArticleData = Article & {
  no: number;
  createdAt: string;
};

interface TopPages {
  id: number;
  no: number;
  title: string;
  viewCount: number;
}

const colors = [
  "#38bdf8",
  "#155e75",
  "#0e7490",
  "#0284c7",
  "#0ea5e9",
  "#38bdf8",
  "#7dd3fc",
];

interface PostCount {
  userLevelId: number;
  no: number;
  userLevelName: string;
  totalArticle: number;
}

const months = [
  "Jan",
  "Feb",
  "Mar",
  "Apr",
  "May",
  "Jun",
  "Jul",
  "Aug",
  "Sep",
  "Oct",
  "Nov",
  "Dec",
];

const dummyData = [
  { name: "DI. ACEH", value: 10, id: 1 },
  { name: "SUMATERA UTARA", value: 20, id: 2 },
  { name: "DKI JAKARTA", value: 100, id: 3 },
  { name: "JAWA BARAT", value: 30, id: 4 },
  { name: "IRIAN JAYA TIMUR", value: 20, id: 5 },
];

const getTotalData: number[] = [];
dummyData.map((list) => {
  getTotalData.push(list.value);
});

export default function DashboardContainer() {
  const { isOpen, onOpen, onOpenChange } = useDisclosure();

  const username = Cookies.get("username");
  const fullname = Cookies.get("ufne");
  const [page, setPage] = useState(1);
  const [totalPage, setTotalPage] = useState(1);
  const [topPagespage, setTopPagesPage] = useState(1);
  const [topPagesTotalPage, setTopPagesTotalPage] = useState(1);
  const [article, setArticle] = useState<ArticleData[]>([]);
  const [selectedCategory, setSelectedCategory] = useState("polda");
  const [analyticsView, setAnalyticView] = useState<string[]>([
    "comment",
    "view",
    "share",
  ]);
  const [startDateValue, setStartDateValue] = useState(
    parseDate(convertDateFormatNoTimeV2(new Date()))
  );

  const [postContentDate, setPostContentDate] = useState({
    start: parseZonedDateTime(
      `${convertDateFormatNoTimeV2(
        new Date(new Date().setDate(new Date().getDate() - 7))
      )}T00:00[Asia/Jakarta]`
    ),
    end: parseZonedDateTime(
      `${convertDateFormatNoTimeV2(new Date())}T23:59[Asia/Jakarta]`
    ),
  });

  const [topContentDate, setTopContentDate] = useState({
    startDate: parseDate(
      convertDateFormatNoTimeV2(
        new Date(new Date().setDate(new Date().getDate() - 7))
      )
    ),
    endDate: parseDate(convertDateFormatNoTimeV2(new Date())),
  });

  const [summary, setSummary] = useState<any>();

  const [topPages, setTopPages] = useState<TopPages[]>([]);
  const [postCount, setPostCount] = useState<PostCount[]>([]);
  const [polresData, setPolresData] = useState<any>({});
  const [selectedAccordion, setSelectedAccordion] = useState<any>(new Set([]));
  const [recapArticleList, setRecapArticleList] = useState<any>([]);
  const [selectedUnit, setSelectedUnit] = useState<{
    id: number;
    name: string;
  }>();
  const roleId = Cookies.get("urie");
  const today = new Date();

  const [recapArticlePage, setRecapArticlePage] = useState(1);
  const [recapArticleTotalPage, setRecapArticleTotalPage] = useState(1);

  const [typeDate, setTypeDate] = useState("daily");
  const [year, setYear] = useState(today.getFullYear());
  const [selectedMonth, setSelectedMonth] = useState<Date | null>(today);
  const [viewsDailyDate, setViewsDailyDate] = useState({
    start: parseDate(convertDateFormatNoTimeV2(today)),
    end: parseDate(convertDateFormatNoTimeV2(today)),
  });

  const [typeDateVisitor, setTypeDateVisitor] = useState("daily");
  const [visitorYear, setVisitorYear] = useState(today.getFullYear());
  const [visitorSelectedMonth, setVisitorSelectedMonth] = useState<Date | null>(
    today
  );
  const [visitorDailyDate, setVisitorDailyDate] = useState({
    start: parseDate(convertDateFormatNoTimeV2(today)),
    end: parseDate(convertDateFormatNoTimeV2(today)),
  });

  const handleMonthClick = (monthIndex: number) => {
    setSelectedMonth(new Date(year, monthIndex, 1));
  };

  const handleMonthClickVisitor = (monthIndex: number) => {
    setVisitorSelectedMonth(new Date(year, monthIndex, 1));
  };

  useEffect(() => {
    fetchSummary();
  }, []);

  useEffect(() => {
    initState();
  }, [page]);

  async function initState() {
    const req = {
      limit: "4",
      page: page,
      search: "",
      sort: "desc",
    };
    const res = await getListArticleAdminPage(req);
    setArticle(res.data?.data);
    setTotalPage(res?.data?.meta?.totalPage);
  }

  async function fetchSummary() {
    const res = await getStatisticSummary();
    setSummary(res?.data?.data);
  }

  useEffect(() => {
    fetchTopPages();
  }, [topPagespage, topContentDate]);

  const getDate = (data: any) => {
    if (data === null) {
      return "";
    } else {
      return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
        data.day < 10 ? `0${data.day}` : data.day
      }`;
    }
  };

  async function fetchTopPages() {
    const req = {
      limit: "10",
      page: topPagespage,
      search: "",
      sort: "desc",
      startDate: getDate(topContentDate.startDate),
      endDate: getDate(topContentDate.endDate),
    };
    const res = await getTopArticles(req);
    setTopPages(getTableNumber(10, res.data?.data, "topPages"));
    setTopPagesTotalPage(res?.data?.meta?.totalPage);
  }

  useEffect(() => {
    fetchPostCount();
  }, [selectedCategory]);

  async function fetchPostCount() {
    const getDate = (data: any) => {
      return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
        data.day < 10 ? `0${data.day}` : data.day
      }`;
    };
    const res = await getUserLevelDataStat(
      getDate(postContentDate.start),
      getDate(postContentDate.end),
      `${getTime(postContentDate.start.hour)}:${getTime(
        postContentDate.start.minute
      )}:00`,
      `${getTime(postContentDate.end.hour)}:${getTime(
        postContentDate.end.minute
      )}:00`,
      selectedCategory === "polda" ? "" : selectedCategory
    );
    setPostCount(getTableNumberStats(res?.data?.data));
  }

  const getTableNumber = (limit: number, data: any, type: string) => {
    if (data) {
      const startIndex =
        limit * (type == "topPages" ? topPagespage - 1 : recapArticlePage - 1);
      let iterate = 0;
      const newData = data.map((value: any) => {
        iterate++;
        value.no = startIndex + iterate;
        return value;
      });
      return newData;
    }
  };

  const getTableNumberStats = (data: any) => {
    if (data) {
      let iterate = 0;
      const newData = data
        .filter(
          (value: any) =>
            value.userLevelName !== "SATWIL" && value.userLevelName !== "SATKER"
        )
        .map((value: any) => {
          iterate++;
          value.no = iterate;
          return value;
        });
      return newData;
    }
  };

  useEffect(() => {
    const temp = Array.from(selectedAccordion);
    console.log("selecette", temp);
    if (temp.length > 0) {
      for (const element of temp) {
        getPolresData(Number(element));
      }
    }
  }, [postContentDate]);

  const getTime = (time: number) => {
    return time < 10 ? `0${time}` : String(time);
  };

  const getPolresData = async (id: number) => {
    const getDate = (data: any) => {
      return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
        data.day < 10 ? `0${data.day}` : data.day
      }`;
    };

    const res = await getUserLevelDataStat(
      getDate(postContentDate.start),
      getDate(postContentDate.end),
      `${getTime(postContentDate.start.hour)}:${getTime(
        postContentDate.start.minute
      )}:00`,
      `${getTime(postContentDate.end.hour)}:${getTime(
        postContentDate.end.minute
      )}:00`,
      "",
      id
    );
    const polresNowData = getTableNumberStats(res?.data?.data);

    setPolresData((prev: any) => ({
      ...prev,
      [id]: polresNowData,
    }));
  };

  const handleSelectionChange = (e: any) => {
    const prev = selectedAccordion;
    const current = e;

    const currentArray = Array.from(current);

    const added = Number(currentArray.filter((item) => !prev.has(item))[0]);

    setSelectedAccordion(current);

    if (added) {
      getPolresData(added);
    }
  };

  useEffect(() => {
    getRecapArticle();
  }, [recapArticlePage]);

  const getRecapArticle = async (userLevelId?: number) => {
    const req = {
      id: userLevelId || selectedUnit?.id,
      page: recapArticlePage,
      startDate: getDate(postContentDate.start),
      endDate: getDate(postContentDate.end),
      startTime: `${getTime(postContentDate.start.hour)}:${getTime(
        postContentDate.start.minute
      )}:00`,
      endTime: `${getTime(postContentDate.end.hour)}:${getTime(
        postContentDate.end.minute
      )}:00`,
    };
    const res = await getRecapArticleData(req);
    setRecapArticleList(getTableNumber(10, res.data?.data, "recapArticle"));
    setRecapArticleTotalPage(res?.data?.meta?.totalPage);
  };

  const openModalArticle = async (userLevelId: number) => {
    setRecapArticlePage(1);
    getRecapArticle(userLevelId);
    onOpen();
  };

  return (
    <div className="px-2 lg:p-8 flex justify-center">
      <div className="w-full flex flex-col gap-6">
        <div className="w-full flex flex-col lg:flex-row gap-6 justify-center">
          <div className="px-4 lg:px-8 py-4 justify-between w-full lg:w-[37%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col rounded-lg">
            <div className="flex justify-between w-full  items-center">
              <div className="flex flex-col gap-2">
                <p className="font-bold text-xl ">{fullname}</p>
                <p>{username}</p>
              </div>
              <DashboardUserIcon size={78} />
            </div>
            <div className="flex flex-row gap-5">
              <p className="text-lg font-semibold">
                {summary?.totalToday} Post{" "}
                <span className="text-sm font-normal">Hari ini</span>
              </p>
              <p className="text-lg font-semibold">
                {summary?.totalThisWeek} Post{" "}
                <span className="text-sm font-normal">Minggu ini</span>
              </p>
            </div>
          </div>

          <div className="lg:w-[20%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardSpeecIcon />
            </div>
            <div className="">Total post</div>
            <div className="font-semibold text-lg">{summary?.totalAll}</div>
          </div>
          <div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardConnectIcon />
            </div>
            <div className="">Total views</div>
            <div className="font-semibold text-lg">{summary?.totalViews}</div>
          </div>
          <div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardShareIcon />
            </div>
            <div className="">Total share</div>
            <div className="font-semibold text-lg">{summary?.totalShares}</div>
          </div>
          <div className="w-full lg:w-[15%] h-[160px] shadow-md bg-white dark:bg-[#18181b] flex flex-col justify-center items-center rounded-lg">
            <div className="h-1/2 flex items-center justify-center">
              <DashboardCommentIcon size={50} />
            </div>
            <div className="">Total comment</div>
            <div className="font-semibold text-lg">
              {summary?.totalComments}
            </div>
          </div>
        </div>
        <div className="w-full flex flex-col lg:flex-row gap-6 justify-center ">
          <div className="border-1 shadow-sm w-screen rounded-lg lg:w-[55%] p-6 flex flex-col text-xs lg:text-sm">
            <div className="flex flex-col md:flex-row md:justify-between mb-4 items-center gap-2 md:gap-0">
              <p className="font-semibold self-start">
                Rekapitulasi Post Berita Polda/Polres Pada Website
              </p>
              <DateRangePicker
                hideTimeZone
                selectorButtonPlacement="start"
                value={postContentDate}
                onChange={(e) => {
                  e && setPostContentDate(e);
                }}
                label="Tanggal dan Waktu"
                visibleMonths={2}
                hourCycle={24}
                className="w-fit text-sm self-end"
                classNames={{
                  timeInputLabel: "text-xs",
                  innerWrapper: "text-xs",
                  inputWrapper: "border-1",
                }}
                size="sm"
                variant="bordered"
                endContent={
                  <a
                    className="cursor-pointer hover:text-black"
                    onClick={() => fetchPostCount()}
                  >
                    <SearchIcons />
                  </a>
                }
              />
            </div>
            <div className="flex flex-row border-b-1 gap-1 py-1 items-center">
              <div className="w-[5%]">NO</div>
              <div className="w-[50%] lg:w-[70%]">
                {Number(roleId) < 3 ? (
                  <Select
                    variant="underlined"
                    className="max-w-xs border-none"
                    label=""
                    selectedKeys={[selectedCategory]}
                    classNames={{
                      innerWrapper: "!border-none",
                      mainWrapper: "!border-none",
                      trigger: "border-none",
                    }}
                    onChange={(e) =>
                      e.target.value !== ""
                        ? setSelectedCategory(e.target.value)
                        : ""
                    }
                  >
                    <SelectItem key="polda">POLDA</SelectItem>
                    <SelectItem key="polres">POLRES</SelectItem>
                    <SelectItem key="satker">SATKER MABES</SelectItem>
                  </Select>
                ) : (
                  "POLDA/POLRES"
                )}
              </div>
              <div className="w-[45%] lg:w-[25%] text-right">
                JUMLAH POST BERITA
              </div>
            </div>
            <div className="flex flex-col gap-1 lg:h-[500px] overflow-y-auto">
              {roleId && Number(roleId) < 3 && selectedCategory == "polda" ? (
                <Accordion
                  selectedKeys={selectedAccordion}
                  onSelectionChange={(e) => handleSelectionChange(e)}
                  selectionMode="multiple"
                  className="w-full"
                >
                  {postCount?.map((list) => (
                    <AccordionItem
                      key={list.userLevelId}
                      aria-label={list.userLevelName}
                      title={
                        <div
                          key={list.userLevelId}
                          className="flex flex-row gap-1 py-1"
                        >
                          <div className="w-[5%]">{list?.no}</div>
                          <div className="w-[85%]">{list?.userLevelName}</div>
                          <div
                            className={`w-[10%] text-center  ${
                              list?.totalArticle === 0 &&
                              "bg-red-600 text-white "
                            }`}
                          >
                            {list?.totalArticle}
                          </div>
                        </div>
                      }
                    >
                      {polresData[list?.userLevelId] ? (
                        polresData[list?.userLevelId]?.map(
                          (child: any, index: number) => (
                            <div
                              key={child.userLevelId}
                              className={`flex flex-row gap-1 py-1 ${
                                index ===
                                polresData[list?.userLevelId].length - 1
                                  ? ""
                                  : "border-b-1"
                              }`}
                            >
                              <div className="w-[5%]"></div>
                              <div className="w-[85%]">
                                {child?.userLevelName}
                              </div>
                              <a
                                onClick={() => {
                                  if (list?.totalArticle !== 0) {
                                    setSelectedUnit({
                                      name: child?.userLevelName,
                                      id: child.userLevelId,
                                    });
                                    openModalArticle(child.userLevelId);
                                  }
                                }}
                                className={`w-[10%] text-start cursor-pointer flex flex-row gap-1 items-center justify-end ${
                                  list?.totalArticle === 0 &&
                                  "bg-red-600 text-white cursor-default "
                                }`}
                              >
                                {child?.totalArticle}
                                <EyeIconMdi size={12} />
                              </a>
                            </div>
                          )
                        )
                      ) : (
                        <Skeleton className="h-3 w-full rounded-lg" />
                      )}
                    </AccordionItem>
                  ))}
                </Accordion>
              ) : (
                postCount?.map((list) => (
                  <div
                    key={list.userLevelId}
                    className="flex flex-row border-b-1 gap-1 py-1"
                  >
                    <div className="w-[5%]">{list?.no}</div>
                    <div className="w-[85%]">{list?.userLevelName}</div>
                    <div
                      className={`w-[10%] text-center ${
                        list?.totalArticle === 0 && "bg-red-600 text-white"
                      }`}
                    >
                      <a
                        onClick={() => {
                          if (list?.totalArticle !== 0) {
                            setSelectedUnit({
                              name: list?.userLevelName,
                              id: list.userLevelId,
                            });
                            openModalArticle(list.userLevelId);
                          }
                        }}
                        className={`w-[10%] text-start cursor-pointer flex flex-row gap-1 items-center justify-end ${
                          list?.totalArticle === 0 &&
                          "bg-red-600 text-white cursor-default "
                        }`}
                      >
                        {list?.totalArticle}
                        <EyeIconMdi />
                      </a>
                    </div>
                  </div>
                ))
              )}
            </div>
          </div>
          <div className="flex flex-col w-full lg:w-[45%] gap-6 shadow-md bg-white dark:bg-[#18181b] rounded-lg p-8 text-xs lg:text-sm">
            <div className="flex justify-between font-semibold">
              <p>Top Pages</p>
              <div className="w-[220px] flex flex-row gap-2 justify-between font-semibold">
                <Popover
                  placement="bottom"
                  classNames={{ content: ["!bg-transparent", "p-0"] }}
                >
                  <PopoverTrigger>
                    <a className="cursor-pointer">
                      {convertDateFormatNoTime(topContentDate.startDate)}
                    </a>
                  </PopoverTrigger>
                  <PopoverContent className="bg-transparent">
                    <Calendar
                      value={topContentDate.startDate}
                      onChange={(e) =>
                        setTopContentDate({
                          startDate: e,
                          endDate: topContentDate.endDate,
                        })
                      }
                      maxValue={topContentDate.endDate}
                    />
                  </PopoverContent>
                </Popover>
                -
                <Popover
                  placement="bottom"
                  classNames={{ content: ["!bg-transparent", "p-0"] }}
                >
                  <PopoverTrigger>
                    <a className="cursor-pointer ">
                      {convertDateFormatNoTime(topContentDate.endDate)}
                    </a>
                  </PopoverTrigger>
                  <PopoverContent className="bg-transparent">
                    <Calendar
                      value={topContentDate.endDate}
                      onChange={(e) =>
                        setTopContentDate({
                          startDate: topContentDate.startDate,
                          endDate: e,
                        })
                      }
                      minValue={topContentDate.startDate}
                    />
                  </PopoverContent>
                </Popover>
              </div>
            </div>
            <div className="flex flex-row border-b-1">
              <div className="w-[5%]">No</div>
              <div className="w-[85%]">Title</div>
              <div className="w-[10%] text-center">Visits</div>
            </div>
            {(!topPages || topPages?.length < 1) && (
              <div className="flex justify-center items-center">
                Tidak ada Data
              </div>
            )}
            {topPages?.map((list) => (
              <div key={list.id} className="flex flex-row border-b-1">
                <div className="w-[5%]">{list?.no}</div>
                <div className="w-[85%]">{list?.title}</div>
                <div className="w-[10%] text-center">{list?.viewCount}</div>
              </div>
            ))}
            {topPages?.length > 0 && (
              <div className="my-2 w-full flex justify-center">
                <Pagination
                  isCompact
                  showControls
                  showShadow
                  color="primary"
                  classNames={{
                    base: "bg-transparent",
                    wrapper: "bg-transparent",
                    item: "w-fit px-3",
                    cursor: "w-fit px-3",
                  }}
                  page={topPagespage}
                  total={topPagesTotalPage}
                  onChange={(page) => setTopPagesPage(page)}
                />
              </div>
            )}
          </div>
        </div>
        <div className="w-full flex flex-col lg:flex-row gap-6 justify-center min-h-[480px]">
          <div className="border-1 shadow-sm w-screen rounded-lg lg:w-[50%] p-6 flex flex-col">
            <div className="flex justify-between mb-3">
              <div className="font-semibold flex flex-col">
                Engagement Analytics
                <div className="font-normal text-xs text-gray-600 flex flex-row gap-2">
                  <CheckboxGroup
                    label=""
                    value={analyticsView}
                    orientation="vertical"
                    onValueChange={setAnalyticView}
                    className="lg:hidden"
                  >
                    <Checkbox size="sm" value="comment">
                      Comment
                    </Checkbox>
                    <Checkbox size="sm" value="view" color="success">
                      View
                    </Checkbox>
                    <Checkbox size="sm" value="share" color="warning">
                      Share
                    </Checkbox>
                  </CheckboxGroup>
                  <CheckboxGroup
                    label=""
                    value={analyticsView}
                    orientation="horizontal"
                    onValueChange={setAnalyticView}
                    className="hidden lg:block"
                  >
                    <Checkbox size="sm" value="comment">
                      Comment
                    </Checkbox>
                    <Checkbox size="sm" value="view" color="success">
                      View
                    </Checkbox>
                    <Checkbox size="sm" value="share" color="warning">
                      Share
                    </Checkbox>
                  </CheckboxGroup>
                </div>
              </div>
              <div className="flex flex-col lg:flex-row gap-2">
                <Select
                  className="w-full md:w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px]"
                  label=""
                  labelPlacement="outside"
                  selectedKeys={[typeDate]}
                  onChange={(e) =>
                    e.target.value !== "" && setTypeDate(e.target.value)
                  }
                >
                  <SelectItem key="monthly">Bulanan</SelectItem>
                  <SelectItem key="daily">Harian</SelectItem>
                </Select>

                {typeDate === "monthly" ? (
                  <Popover
                    placement="bottom"
                    showArrow={true}
                    className="w-full"
                  >
                    <PopoverTrigger>
                      <Button className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg">
                        {" "}
                        {selectedMonth
                          ? format(selectedMonth, "MMMM yyyy")
                          : "Pilih Bulan"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="p-4 w-[200px]">
                      <div className="flex items-center justify-between mb-2 px-1 w-full">
                        <button
                          className="text-gray-500 hover:text-black"
                          onClick={() => setYear((prev) => prev - 1)}
                        >
                          <ChevronLeftIcon />
                        </button>
                        <span className="font-semibold text-center">
                          {year}
                        </span>
                        <button
                          className="text-gray-500 hover:text-black"
                          onClick={() => setYear((prev) => prev + 1)}
                        >
                          <ChevronRightIcon />
                        </button>
                      </div>

                      <div className="grid grid-cols-3 gap-2 w-full">
                        {months.map((month, idx) => (
                          <button
                            key={idx}
                            onClick={() => handleMonthClick(idx)}
                            className={`py-1 rounded-md text-sm transition-colors ${
                              selectedMonth &&
                              selectedMonth.getMonth() === idx &&
                              selectedMonth.getFullYear() === year
                                ? "bg-blue-500 text-white"
                                : "hover:bg-gray-200 text-gray-700"
                            }`}
                          >
                            {month}
                          </button>
                        ))}
                      </div>
                    </PopoverContent>
                  </Popover>
                ) : (
                  <div className="w-[220px]">
                    <DateRangePicker
                      className="h-[40px]"
                      value={viewsDailyDate}
                      onChange={(e) => e !== null && setViewsDailyDate(e)}
                      label=""
                    />
                  </div>
                )}
              </div>
            </div>
            <div className="flex flex-row w-full h-full">
              <div className="w-full h-[30vh] lg:h-full text-black">
                <ApexChartColumn
                  type={typeDate}
                  date={`${
                    convertDateFormatNoTimeV2(String(selectedMonth)).split(
                      "-"
                    )[1]
                  } ${
                    convertDateFormatNoTimeV2(String(selectedMonth)).split(
                      "-"
                    )[0]
                  }`}
                  view={analyticsView}
                  range={viewsDailyDate}
                />
              </div>
            </div>
          </div>
          <div className="border-1 shadow-sm w-screen rounded-lg md:w-[50%] p-6 flex flex-col">
            <div className="flex justify-between mb-3">
              <div className="font-semibold flex flex-col">
                Visitor Analytics
              </div>
              <div className="flex flex-col lg:flex-row gap-2">
                <Select
                  className="w-full md:w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px]"
                  label=""
                  labelPlacement="outside"
                  selectedKeys={[typeDateVisitor]}
                  onChange={(e) =>
                    e.target.value !== "" && setTypeDateVisitor(e.target.value)
                  }
                >
                  <SelectItem key="monthly">Bulanan</SelectItem>
                  <SelectItem key="daily">Harian</SelectItem>
                </Select>

                {typeDateVisitor === "monthly" ? (
                  <Popover
                    placement="bottom"
                    showArrow={true}
                    className="w-full"
                  >
                    <PopoverTrigger>
                      <Button className="w-[140px] text-xs lg:text-sm h-[30px] lg:h-[40px] rounded-sm lg:rounded-lg">
                        {" "}
                        {visitorSelectedMonth
                          ? format(visitorSelectedMonth, "MMMM yyyy")
                          : "Pilih Bulan"}
                      </Button>
                    </PopoverTrigger>
                    <PopoverContent className="p-4 w-[200px]">
                      <div className="flex items-center justify-between mb-2 px-1 w-full">
                        <button
                          className="text-gray-500 hover:text-black"
                          onClick={() => setVisitorYear((prev) => prev - 1)}
                        >
                          <ChevronLeftIcon />
                        </button>
                        <span className="font-semibold text-center">
                          {year}
                        </span>
                        <button
                          className="text-gray-500 hover:text-black"
                          onClick={() => setVisitorYear((prev) => prev + 1)}
                        >
                          <ChevronRightIcon />
                        </button>
                      </div>

                      <div className="grid grid-cols-3 gap-2 w-full">
                        {months.map((month, idx) => (
                          <button
                            key={idx}
                            onClick={() => handleMonthClickVisitor(idx)}
                            className={`py-1 rounded-md text-sm transition-colors ${
                              visitorSelectedMonth &&
                              visitorSelectedMonth.getMonth() === idx &&
                              visitorSelectedMonth.getFullYear() === year
                                ? "bg-blue-500 text-white"
                                : "hover:bg-gray-200 text-gray-700"
                            }`}
                          >
                            {month}
                          </button>
                        ))}
                      </div>
                    </PopoverContent>
                  </Popover>
                ) : (
                  <div className="w-[220px]">
                    <DateRangePicker
                      className="h-[40px]"
                      value={visitorDailyDate}
                      onChange={(e) => e !== null && setViewsDailyDate(e)}
                      label=""
                    />
                  </div>
                )}
              </div>
            </div>
            <div className="flex flex-row w-full h-full">
              <div className="w-full h-[30vh] lg:h-full text-black">
                <ApexChartColumnVisitors
                  type={typeDateVisitor}
                  date={`${
                    convertDateFormatNoTimeV2(
                      String(visitorSelectedMonth)
                    ).split("-")[1]
                  } ${
                    convertDateFormatNoTimeV2(
                      String(visitorSelectedMonth)
                    ).split("-")[0]
                  }`}
                  view={["visitor"]}
                  range={visitorDailyDate}
                />
              </div>
            </div>
          </div>
        </div>
        {roleId && Number(roleId) < 3 && (
          <div className="flex flex-row gap-6 w-full">
            <div className="w-screen md:w-[80%] h-[360px] lg:h-[600px]">
              <IndonesiaMap />
            </div>
            <div className="w-screen md:w-[300px] h-[360px] lg:h-[600px] overflow-auto gap-2 flex flex-col">
              {dummyData.map((list) => (
                <div key={list.id} className="w-full flex flex-row gap-2">
                  <p className="w-1/2">{list.name}</p>{" "}
                  <p className="w-1/2 bg-[#0e7490] text-white border-white ">
                    {list.value}
                  </p>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
      <Modal isOpen={isOpen} onOpenChange={onOpenChange} size="3xl">
        <ModalContent>
          {(onClose) => (
            <>
              <ModalHeader className="flex flex-col gap-1">
                {selectedUnit?.name} List Content
              </ModalHeader>
              <ModalBody className="flex flex-col gap-2">
                <div className="grid grid-cols-12 text-xs ">
                  <div className="col-span-1 font-bold">No</div>
                  <div className="col-span-9 text-center font-bold">Judul</div>
                  <div className="col-span-2 font-bold ">Dibuat</div>
                  <div className="col-span-12 grid grid-cols-12 max-h-[480px] overflow-auto">
                    {recapArticleList?.length > 0 &&
                      recapArticleList?.map((list: any) => (
                        <Fragment key={list.id}>
                          <div className="col-span-1 my-2">{list.no}</div>
                          <div className="col-span-9 my-2">
                            <Link
                              href={`/news/detail/${list.id}-${list.slug}`}
                              target="_blank"
                              className="hover:underline hover:text-primary"
                            >
                              {textEllipsis(list.title, 80)}
                            </Link>
                          </div>
                          <div className="my-2 col-span-2">
                            {convertDateFormat(list?.createdAt)}
                          </div>
                        </Fragment>
                      ))}
                  </div>
                </div>
                {recapArticleList?.length > 0 && (
                  <div className="my-2 w-full flex justify-center">
                    <Pagination
                      isCompact
                      showControls
                      showShadow
                      color="primary"
                      classNames={{
                        base: "bg-transparent",
                        wrapper: "bg-transparent",
                        item: "w-fit px-3",
                        cursor: "w-fit px-3",
                      }}
                      page={recapArticlePage}
                      total={recapArticleTotalPage}
                      onChange={(page) => setRecapArticlePage(page)}
                    />
                  </div>
                )}
              </ModalBody>
            </>
          )}
        </ModalContent>
      </Modal>
    </div>
  );
}