"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { getCookiesDecrypt } from "@/lib/utils";
import { generateTicket } from "@/service/tableau/tableau-service";
import { LucideBoxSelect } from "lucide-react";
import { useEffect, useState } from "react";
import Cookies from "js-cookie";

export default function ExecutiveDashboard() {
  // const downloadReport = async () => {
  //   // const formattedDate = `${reportDate.year}-${String(
  //   //   reportDate.month
  //   // ).padStart(2, "0")}-${String(reportDate.day).padStart(2, "0")}`;
  //   // const resLogin = await tableauSignin();
  //   // const token = resLogin?.data.data?.credentials?.token;
  //   // const resCover = await tableauViewImage(
  //   //   token,
  //   //   "1df3df4a-0457-4483-a8e1-160f70e7834f",
  //   //   formattedDate
  //   // );
  //   // const resTotalLink = await tableauViewImage(
  //   //   token,
  //   //   "8f902032-a6eb-4083-817a-57350f509b75",
  //   //   formattedDate
  //   // );
  //   // const resCount = await tableauViewImage(
  //   //   token,
  //   //   "11b2fe3c-f853-4156-800e-43342bf8e5ce",
  //   //   formattedDate
  //   // );
  //   // const resCoverCommentTwitter = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   2
  //   // );
  //   // const resCoverCommentTiktok = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   3
  //   // );
  //   // const resCoverCommentFacebook = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   4
  //   // );
  //   // const resCoverCommentInstagram = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   5
  //   // );
  //   // const resCoverCommentYoutube = await tableauViewImage(
  //   //   token,
  //   //   "28183e0b-80d0-428d-8684-2cbb572e97b3",
  //   //   formattedDate,
  //   //   6
  //   // );
  //   // const resCommentTwitter = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   2
  //   // );
  //   // const resCommentTiktok = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   3
  //   // );
  //   // const resCommentFacebook = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   4
  //   // );
  //   // const resCommentInstagram = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   5
  //   // );
  //   // const resCommentYoutube = await tableauViewImage(
  //   //   token,
  //   //   "9a6d05ed-dea7-4a93-b709-82d0dab4790d",
  //   //   formattedDate,
  //   //   6
  //   // );
  //   // const blobCover = new Blob([resCover.data], { type: "image/png" });
  //   // const blobTotalLink = new Blob([resTotalLink.data], { type: "image/png" });
  //   // const blobCount = new Blob([resCount.data], { type: "image/png" });
  //   // const blobCoverCommentTwitter = new Blob([resCoverCommentTwitter.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCoverCommentTiktok = new Blob([resCoverCommentTiktok.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCoverCommentFacebook = new Blob([resCoverCommentFacebook.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCoverCommentInstagram = new Blob(
  //   //   [resCoverCommentInstagram.data],
  //   //   { type: "image/png" }
  //   // );
  //   // const blobCoverCommentYoutube = new Blob([resCoverCommentYoutube.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentTwitter = new Blob([resCommentTwitter.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentTiktok = new Blob([resCommentTiktok.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentFacebook = new Blob([resCommentFacebook.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentInstagram = new Blob([resCommentInstagram.data], {
  //   //   type: "image/png",
  //   // });
  //   // const blobCommentYoutube = new Blob([resCommentYoutube.data], {
  //   //   type: "image/png",
  //   // });
  //   // await pdfGenerator([
  //   //   blobCover,
  //   //   blobTotalLink,
  //   //   blobCount,
  //   //   blobCoverCommentTwitter,
  //   //   blobCommentTwitter,
  //   //   blobCoverCommentTiktok,
  //   //   blobCommentTiktok,
  //   //   blobCoverCommentFacebook,
  //   //   blobCommentFacebook,
  //   //   blobCoverCommentInstagram,
  //   //   blobCommentInstagram,
  //   //   blobCoverCommentYoutube,
  //   //   blobCommentYoutube,
  //   // ]);
  // };

  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 poldaState = Cookies.get("state");
  const provState = Cookies.get("state-prov");

  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 [isInternational, setIsInternational] = useState([false, false, false]);

  const baseUrl = "https://analytic.sitani.info/";
  const url = "https://analytic.sitani.info/trusted/";

  const view1 =
    levelName == "MABES POLRI"
      ? isInternational[0]
        ? "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?"
      : `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${provState}&`;

  const view2 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-published-produksi?"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?"
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-konten-publisher-polda-executive?provinsi-polda=${poldaState}&`;

  const view3 =
    levelName == "MABES POLRI"
      ? isInternational[2]
        ? "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-executive?"
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?provinsi-polda=${poldaState}&`;

  const view4 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?provinsi-polda=${poldaState}&`;

  const view5 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${poldaState}&`;

  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);
    }

    initState();
  }, [isInternational]);

  // 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 className="mt-3 flex flex-row gap-3 justify-center">
        <Card className="rounded-sm w-4/12  p-3">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">
              Upload konten hari ini Polda
            </p>
            <LucideBoxSelect />
          </div>
          <div className="my-5">
            {ticket1 == "" ? (
              <iframe
                src={`${baseUrl + view4 + param}`}
                width="100%"
                height="750"
                frameBorder="0"
              />
            ) : (
              <iframe
                src={`${`${url + ticket1}/${view4}${param}`}`}
                width="100%"
                height="750"
                frameBorder="0"
              />
            )}
          </div>
        </Card>
        <Card className="rounded-sm w-4/12 p-3">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">
              Upload konten hari ini Satker
            </p>
            <LucideBoxSelect />
          </div>
          <div className="my-5">
            {ticket2 == "" ? (
              <iframe
                src={`${baseUrl + view4 + param}`}
                width="100%"
                height="750"
                frameBorder="0"
              />
            ) : (
              <iframe
                src={`${`${url + ticket2}/${view4}${param}`}`}
                width="100%"
                height="750"
                frameBorder="0"
              />
            )}
          </div>
        </Card>
        <Card className="rounded-sm w-4/12 p-3">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">
              Upload konten hari ini Polres
            </p>
            <LucideBoxSelect />
          </div>
          <div className="my-5">
            {ticket3 == "" ? (
              <iframe
                src={`${baseUrl + view5 + param}`}
                width="100%"
                height="750"
                frameBorder="0"
              />
            ) : (
              <iframe
                src={`${`${url + ticket3}/${view5}${param}`}`}
                width="100%"
                height="750"
                frameBorder="0"
              />
            )}
          </div>
        </Card>
      </div>
      <div className="w-full mt-3">
        <Card className="rounded-sm p-3 h-[750px]">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">Konten Paling Populer</p>
            <LucideBoxSelect />
          </div>
          <div className="my-5">
            {ticket4 == "" ? (
              <iframe
                src={`${baseUrl + view2 + param}`}
                width="100%"
                height="650"
                frameBorder="0"
              />
            ) : (
              <iframe
                src={`${`${url + ticket4}/${view2}${param}`}`}
                width="100%"
                height="650"
                frameBorder="0"
              />
            )}
          </div>
        </Card>
      </div>
      <div className="w-full mt-3">
        <Card className="rounded-sm p-3 h-[750px]">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">
              Heatmap Konten Dengan Interaksi
            </p>
            <p className="text-base font-semibold">
              Heatmap Kategori Dengan Interaksi
            </p>
            <LucideBoxSelect />
          </div>
          <div className="my-5">
            {ticket5 == "" ? (
              <iframe
                src={`${baseUrl + view3 + param}`}
                width="100%"
                height="600"
                frameBorder="0"
              />
            ) : (
              <iframe
                src={`${`${url + ticket5}/${view3}${param}`}`}
                width="100%"
                height="600"
                frameBorder="0"
              />
            )}
          </div>
        </Card>
      </div>
      <div className="w-full mt-3">
        <Card className="rounded-sm p-3 h-auto">
          <div className="flex flex-row justify-between">
            <p className="text-base font-semibold">Emergency Issue</p>
            <LucideBoxSelect />
          </div>

          <div className="flex flex-col">
            <div className="my-5">
              {ticket6 == "" ? (
                <iframe
                  src={`${baseUrl + view1 + param}`}
                  width="100%"
                  height="750"
                  frameBorder="0"
                />
              ) : (
                <iframe
                  src={`${`${url + ticket6}/${view1}${param}`}`}
                  width="100%"
                  height="750"
                  frameBorder="0"
                />
              )}
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}