"use client";
import SiteBreadcrumb from "@/components/site-breadcrumb";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } 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, UploadIcon } from "lucide-react";
import { useEffect, useState } from "react";
import Cookies from "js-cookie";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useTranslations } from "next-intl";
import DashboardDropdown from "@/components/dashboard-dropdown";
import RecentActivity from "../routine-task/components/recent-activity";
import ContentTable from "../routine-task/components/content-table";
import { Link } from "@/i18n/routing";
import TaskTable from "../../contributor/task/components/task-table";
import PressConferenceTable from "../../contributor/schedule/press-conference/components/presscon-table";

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://analytic.sitani.info/";
  const url = "https://analytic.sitani.info/trusted/";

  const safeLevelName = levelNumber ?? "";

  const view1 =
    levelName == "MABES POLRI"
      ? isInternational[0]
        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=ALL"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=ALL"
      : safeLevelName.includes("POLDA")
      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-selected=${state}&`
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-polda-new?polda-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/db-content-interaction-per-satker?polda-selected=ALL"
      : safeLevelName.includes("POLDA")
      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-interaction-per-satker?polda-selected=SATKER POLRI&`
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/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?polda-selected=ALL"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=ALL"
      : safeLevelName.includes("POLDA")
      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=${state}&`
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-polda-new?polda-selected=${state}&`;

  const view4 =
    levelName == "MABES POLRI"
      ? isInternational[1]
        ? "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=ALL"
        : "views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=ALL"
      : safeLevelName.includes("POLDA")
      ? `views/2023_04_MediaHUB-Viz-POLDA_Rev200/db-content-category-per-satker?polda-selected=SATKER POLRI&`
      : `views/2023_04_MediaHUB-Viz-POLDA_Rev200/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/2023_04_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/2023_04_MediaHUB-Viz-POLDA_Rev200/db-published-produksi-polda-executive?polda-selected=${state}&`;

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

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

  const param = ":embed=yes&:toolbar=no&: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") && (
                  <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") && (
                <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>
  );
}