"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { getCookiesDecrypt } from "@/lib/utils";
import { generateTicket } from "@/service/tableau/tableau-service";
import { useEffect, useState } from "react";
import Cookies from "js-cookie";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useTranslations } from "next-intl";

export default function ExecutiveDataDashboard() {
  const [startDate, setStartDate] = useState<any>(new Date());
  const [endDate, setEndDate] = useState<any>(new Date());
  const [hasMounted, setHasMounted] = useState(false);
  // const t = useTranslations("AnalyticsDashboard");
  const levelName = getCookiesDecrypt("ulnae");
  const levelNumber = getCookiesDecrypt("ulne");
  const state = Cookies.get("state");
  const provState = Cookies.get("state-prov");
  const t = useTranslations("AnalyticsDashboard");
  const [refreshTicket, setRefreshTicket] = useState(true);

  const [ticket1, setTicket1] = useState("");
  const [ticket2, setTicket2] = useState("");
  const [ticket3, setTicket3] = useState("");
  const [ticket4, setTicket4] = useState("");
  const [ticket5, setTicket5] = useState("");
  const [ticket6, setTicket6] = useState("");
  const [ticket7, setTicket7] = useState("");
  const [isInternational, setIsInternational] = useState([false, false, false]);

  const baseUrl = "https://db-mediahub.polri.go.id/";
  const url = "https://db-mediahub.polri.go.id/trusted/";

  const safeLevelName = levelName ?? "";

  // const view1 =
  //   levelName == "MABES POLRI"
  //     ? isInternational[0]
  //       ? // "views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-interaction-per-polda-new?polda-selected=ALL"
  //         "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-konten-header-detail?provinsi-polda=ALL"
  //       : // "views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-interaction-per-polda-new?polda-selected=ALL"
  //         "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-konten-header-detail?provinsi-polda=ALL"
  //     : safeLevelName.includes("POLDA")
  //     ? // `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-interaction-per-polda-new?polda-selected=${state}&`
  //       `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-by-polda-publish-konten?provinsi-polda=${provState}&`
  //       : // `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-interaction-per-polda-new?polda-selected=${state}&`;
  //       `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-by-polda-publish-konten?provinsi-polda=${provState}&`;

  const view1 =
    levelNumber === "1"
      ? "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-konten-header-detail?provinsi-polda=ALL"
      : levelNumber === "2"
      ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-by-polda-publish-konten?provinsi-polda=${provState}&`
      : levelNumber === "3"
      ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-satker?satker-selected=${state}&`
      : "";

  const view2 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-interaction-per-satker?polda-selected=ALL"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-interaction-per-satker?polda-selected=ALL"
      : safeLevelName.includes("POLDA")
      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-interaction-per-satker?polda-selected=SATKER POLRI&`
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-interaction-per-satker?polda-selected=SATKER POLRI&`;

  // const view3 =
  //   levelName == "MABES POLRI"
  //     ? isInternational[2]
  //       ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-content-category-per-polda-new?provinsi-polda=ALL"
  //       : // "views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-category-per-polda-new?polda-selected=ALL"
  //         "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-by-polda-kategori-konten?provinsi-polda=ALL"
  //     : safeLevelName.includes("POLDA")
  //     ? // `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-category-per-polda-new?polda-selected=${state}&`
  //       `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-by-polda-cat?provinsi-polda=${provState}&`
  //     : // `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-category-per-polda-new?polda-selected=${state}&`;
  //       `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-by-polda-cat?provinsi-polda=${provState}&`;

  const view3 =
    levelNumber === "1"
      ? "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-by-polda-kategori-konten?provinsi-polda=ALL"
      : levelNumber === "2"
      ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-by-polda-cat?provinsi-polda=${provState}&`
      : levelNumber === "3"
      ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-satker-kategori?satker-selected=${state}&`
      : "";

  const view4 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-category-per-satker?polda-selected=ALL"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-category-per-satker?polda-selected=ALL"
      : safeLevelName.includes("POLDA")
      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-category-per-satker?polda-selected=SATKER POLRI&`
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-content-category-per-satker?polda-selected=SATKER POLRI&`;

  // const view5 =
  //   levelName == "MABES POLRI"
  //     ? isInternational[1]
  //       ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
  //       : "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-top-konten-polda?"
  //     : safeLevelName.includes("POLDA")
  //     ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?provinsi-polda=${provState}&`
  //     : `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?provinsi-polda=${provState}&`;

  const view5 =
    levelNumber === "1"
      ? "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-top-konten-polda?"
      : levelNumber === "2"
      ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?provinsi-polda=${provState}&`
      : levelNumber === "3"
      ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-top-satker?satker-selected=${state}&`
      : "";

  // const view6 =
  //   levelName == "MABES POLRI"
  //     ? isInternational[2]
  //       ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
  //       : "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-executive?"
  //     : safeLevelName.includes("POLDA")
  //     ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200_17529837622230/db-waktu-akses-pengguna-polda-executive?provinsi-polda=${provState}&`
  //     : `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-heatmap-polda?provinsi-polda=${provState}&`;

  const view6 =
    levelNumber === "1"
      ? "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-executive?"
      : levelNumber === "2"
      ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-heatmap-polda?provinsi-polda=${provState}&`
      : levelNumber === "3"
      ? `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-hm-satker?satker-selected=${state}&`
      : "";

  // const view7 =
  //   levelName == "MABES POLRI"
  //     ? isInternational[2]
  //       ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-penugasan-vertical-bar?"
  //       : "views/2025_11_db-penugasan_rev100/db-penugasan-mabes?"
  //     : safeLevelName.includes("POLDA")
  //     ? `views/2023_09_db-penugasan_rev200_17635638922590/db-penugasan-vertical-bar?polda-selected=${provState}&`
  //     : `views/2025_11_db-penugasan_rev100/db-penugasan-mabes?provinsi-polda=${provState}&`;

  const view7 =
    levelNumber === "1"
      ? "views/2025_11_db-penugasan_rev100/db-penugasan-mabes?"
      : levelNumber === "2"
      ? `views/2025_11_db-penugasan_rev100/db-penugasan-polda?provinsi-polda=${state}&`
      : levelNumber === "3"
      ? `views/2025_11_db-penugasan_rev100/db-penugasan-satker?provinsi-polda=${state}&`
      : "";

  const param = ":embed=yes&:toolbar=yes&:iframeSizedToWindow=true";

  useEffect(() => {
    async function initState() {
      const response1 = await generateTicket();
      setTicket1(response1?.data?.data);

      const response2 = await generateTicket();
      setTicket2(response2?.data?.data);

      const response3 = await generateTicket();
      setTicket3(response3?.data?.data);

      const response4 = await generateTicket();
      setTicket4(response4?.data?.data);

      const response5 = await generateTicket();
      setTicket5(response5?.data?.data);

      const response6 = await generateTicket();
      setTicket6(response6?.data?.data);

      const response7 = await generateTicket();
      setTicket7(response7?.data?.data);
    }

    initState();
  }, [isInternational, refreshTicket]);

  // Hooks
  useEffect(() => {
    setHasMounted(true);
  }, []);

  // Render
  if (!hasMounted) return null;

  const handleInternational = (index: number, val: boolean) => {
    const updatedIsInternational = [...isInternational];

    updatedIsInternational[index] = val;
    setIsInternational(updatedIsInternational);
  };

  return (
    <div>
      <SiteBreadcrumb />
      <div>
        <div className="my-3">
          <Tabs
            defaultValue="content-publish"
            className="w-full"
            onValueChange={() => setRefreshTicket(!refreshTicket)}
          >
            <TabsList className="flex-wrap bg-black">
              <TabsTrigger
                value="content-publish"
                className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Publish Konten
              </TabsTrigger>
              <TabsTrigger
                value="content-category"
                className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Kategori Konten
              </TabsTrigger>
              <TabsTrigger
                value="popular-content"
                className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Konten Terpopuler
              </TabsTrigger>
              <TabsTrigger
                value="heatmap"
                className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Heatmap
              </TabsTrigger>
              <TabsTrigger
                value="task"
                className="data-[state=active]:bg-black data-[state=active]:text-primary-foreground rounded-md px-6"
              >
                Penugasan
              </TabsTrigger>
            </TabsList>

            <TabsContent value="content-publish">
              <div className="mt-3 flex gap-2 flex-col justify-center">
                {/* Polda */}
                {(levelNumber === "1" ||
                  levelNumber === "2" ||
                  levelNumber === "3") && (
                  <Card className={`rounded-sm p-3 w-full`}>
                    {/* <div className="flex flex-row justify-between">
                      <p className="text-base font-semibold">
                        Upload konten hari ini Polda
                      </p>
                    </div> */}
                    <div className="my-5">
                      {ticket1 == "w-full" ? (
                        <iframe
                          src={`${baseUrl + view1 + param}`}
                          width="100%"
                          height="750"
                          className="w-full"
                          frameBorder="0"
                        />
                      ) : (
                        <iframe
                          src={`${url + ticket1}/${view1}${param}`}
                          width="100%"
                          height="750"
                          frameBorder="0"
                        />
                      )}
                    </div>
                  </Card>
                )}

                {/* Satker */}
                {/* {levelNumber === "1" && (
                  <Card className={`rounded-sm p-3 w-full`}> */}
                {/* <div className="flex flex-row justify-between">
                      <p className="text-base font-semibold">
                        Upload konten hari ini Satker
                      </p>
                    </div> */}
                {/* <div className="my-5">
                      {ticket2 == "" ? (
                        <iframe
                          src={`${baseUrl + view2 + param}`}
                          width="100%"
                          height="750"
                          frameBorder="0"
                        />
                      ) : (
                        <iframe
                          src={`${url + ticket2}/${view2}${param}`}
                          width="100%"
                          height="750"
                          frameBorder="0"
                        />
                      )}
                    </div>
                  </Card>
                )} */}
              </div>
            </TabsContent>
            <TabsContent value="content-category">
              {(levelNumber === "1" ||
                levelNumber === "2" ||
                levelNumber === "3") && (
                <Card className="px-3 py-3">
                  <div className="my-5">
                    {ticket3 == "" ? (
                      <iframe
                        src={`${baseUrl + view3 + param}`}
                        width="100%"
                        height="750"
                        frameBorder="0"
                      />
                    ) : (
                      <iframe
                        src={`${`${url + ticket3}/${view3}${param}`}`}
                        width="100%"
                        height="750"
                        frameBorder="0"
                      />
                    )}
                  </div>
                </Card>
              )}

              {/* {levelNumber === "1" && (
                <Card className="px-3 py-3">
                  <div className="my-5">
                    {ticket4 == "" ? (
                      <iframe
                        src={`${baseUrl + view4 + param}`}
                        width="100%"
                        height="750"
                        frameBorder="0"
                      />
                    ) : (
                      <iframe
                        src={`${`${url + ticket4}/${view4}${param}`}`}
                        width="100%"
                        height="750"
                        frameBorder="0"
                      />
                    )}
                  </div>
                </Card>
              )} */}
            </TabsContent>
            <TabsContent value="popular-content">
              <Card className="rounded-sm p-3 h-[750px]">
                <div className="my-5">
                  {ticket5 == "" ? (
                    <iframe
                      src={`${baseUrl + view5 + param}`}
                      width="100%"
                      height="650"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket5}/${view5}${param}`}`}
                      width="100%"
                      height="650"
                      frameBorder="0"
                    />
                  )}
                </div>
              </Card>
            </TabsContent>

            <TabsContent value="heatmap">
              <Card className="rounded-sm p-3 h-[750px]">
                <div className="my-5">
                  {ticket6 == "" ? (
                    <iframe
                      src={`${baseUrl + view6 + param}`}
                      width="100%"
                      height="600"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket6}/${view6}${param}`}`}
                      width="100%"
                      height="600"
                      frameBorder="0"
                    />
                  )}
                </div>
              </Card>
            </TabsContent>
            <TabsContent value="task">
              <Card className="rounded-sm p-3 h-[750px]">
                <div className="my-5">
                  {ticket7 == "" ? (
                    <iframe
                      src={`${baseUrl + view7 + param}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  ) : (
                    <iframe
                      src={`${`${url + ticket7}/${view7}${param}`}`}
                      width="100%"
                      height="750"
                      frameBorder="0"
                    />
                  )}
                </div>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </div>
    </div>
  );
}