"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 [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 [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://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_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?"
        : "views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue-executive?"
      : safeLevelName.includes("POLDA")
      ? `views/2023_08_MediaHUB-KtnMgt_Rev100/db-emg-issue?provinsi-polda=${provState}&`
      : `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/2025_10_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?"
        : // "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?"
          "/views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?"
      : safeLevelName.includes("POLDA")
      ? // `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`
        `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-executive?provinsi-polda=${provState}&`
      : // `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`;
        `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-top-satker?satker-selected=${state}&`;

  const view3 =
    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?"
        : // "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-executive?"
          "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-executive?"
      : safeLevelName.includes("POLDA")
      ? // `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`
        `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-executive?provinsi-polda=${provState}`
      : // `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-waktu-akses-pengguna-polda-executive?polda-selected=${state}&`;
        `views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-hm-satker?satker-selected=${state}`;

  const view4 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? // "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
          "views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-konten-header?"
        : // "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?"
          "views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-konten-header?"
      : safeLevelName.includes("POLDA")
      ? // `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?polda-selected=${state}&`
        `views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-konten-header?provinsi-polda=${provState}&`
      : // `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polda?polda-selected=${state}&`;
        `views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-konten-header?provinsi-polda=${provState}&`;

  const view5 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? // "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
          "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-konten-header"
        : // "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?"
          "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-konten-header"
      : safeLevelName.includes("POLDA")
      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-polres?provinsi-polda=${state}&`;

  const view6 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? // "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?"
          "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-konten-header"
        : // "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?"
          "views/2025_10_MediaHUB-Viz-POLDA_Rev200/db-konten-header"
      : safeLevelName.includes("POLDA")
      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${state}&`
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-satker?satker-selected=${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);
    }

    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">
        <Card className="rounded-sm p-5 w-full">
          <div className="flex flex-row flex-wrap gap-5 justify-between">
            {/* ===================== POLDA ===================== */}
            {(levelNumber === "1" || levelNumber === "2" || levelNumber === "3") && (
              <div className="flex-1 min-w-[350px]">
                <p className="text-base font-semibold mb-3">
                  Publish Konten
                </p>

                {ticket1 == "" ? (
                  <iframe
                    src={`${baseUrl + view4 + param}`}
                    width="100%"
                    height="750"
                    frameBorder="0"
                    className="rounded-md"
                  />
                ) : (
                  <iframe
                    src={`${url + ticket1}/${view4}${param}`}
                    width="100%"
                    height="750"
                    frameBorder="0"
                    className="rounded-md"
                  />
                )}
              </div>
            )}

            {/* ===================== POLRES ===================== */}
            {/* {(levelNumber === "1" || levelNumber === "2") && (
              <div className="flex-1 min-w-[350px]">
                <p className="text-base font-semibold mb-3">
                  Publish Konten Polres
                </p>

                {ticket3 == "" ? (
                  <iframe
                    src={`${baseUrl + view5 + param}`}
                    width="100%"
                    height="750"
                    frameBorder="0"
                    className="rounded-md"
                  />
                ) : (
                  <iframe
                    src={`${url + ticket3}/${view5}${param}`}
                    width="100%"
                    height="750"
                    frameBorder="0"
                    className="rounded-md"
                  />
                )}
              </div>
            )} */}

            {/* ===================== SATKER ===================== */}
            {/* {(levelNumber === "1" || levelNumber === "3") && (
              <div className="flex-1 min-w-[350px]">
                <p className="text-base font-semibold mb-3">
                  Publish Konten Satker
                </p>

                {ticket2 == "" ? (
                  <iframe
                    src={`${baseUrl + view6 + param}`}
                    width="100%"
                    height="750"
                    frameBorder="0"
                    className="rounded-md"
                  />
                ) : (
                  <iframe
                    src={`${url + ticket2}/${view6}${param}`}
                    width="100%"
                    height="750"
                    frameBorder="0"
                    className="rounded-md"
                  />
                )}
              </div>
            )} */}
          </div>
        </Card>
      </div>

      {/* <div className="mt-3 flex gap-2 flex-row justify-center">
        {(levelNumber === "1" || levelNumber === "2") && (
          <Card
            className={`rounded-sm p-3 ${
              levelNumber === "2" ? "w-6/12" : "w-4/12"
            }`}
          >
            <div className="flex flex-row justify-between">
              <p className="text-base font-semibold">Publish Konten Polda</p>
            </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>
        )}

        {(levelNumber === "1" || levelNumber === "2") && (
          <Card
            className={`rounded-sm p-3 ${
              levelNumber === "2" ? "w-6/12" : "w-4/12"
            }`}
          >
            <div className="flex flex-row justify-between">
              <p className="text-base font-semibold">Publish Konten Polres</p>
            </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>
        )}

        {(levelNumber === "1" || levelNumber === "3") && (
          <Card
            className={`rounded-sm p-3 ${
              levelNumber === "3" ? "w-full" : "w-4/12"
            }`}
          >
            <div className="flex flex-row justify-between">
              <p className="text-base font-semibold">Publish Konten Satker</p>
            </div>
            <div className="my-5">
              {ticket2 == "" ? (
                <iframe
                  src={`${baseUrl + view6 + param}`}
                  width="100%"
                  height="750"
                  frameBorder="0"
                />
              ) : (
                <iframe
                  src={`${url + ticket2}/${view6}${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>
          </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 mx-3">
            <p className="text-base font-semibold">
              Heatmap Konten dan Kategori dengan Interaksi
            </p>
          </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>
          </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>
  );
}
