mediahub-fe/components/visualization/content-production.tsx

"use client";
import Cookies from "js-cookie";
import { useEffect, useState } from "react";
import { getCookiesDecrypt } from "@/lib/utils";
import { generateTicket } from "@/service/tableau/tableau-service";
import { Button } from "../ui/button";
import { useTranslations } from "next-intl";

export default function ContentProductionVisualization() {
  const [hasMounted, setHasMounted] = useState(false);
  const t = useTranslations("AnalyticsDashboard");
  const levelName = getCookiesDecrypt("ulnae");
  const state = Cookies.get("state");
  const provState = Cookies.get("state-prov");

  const [ticket1, setTicket1] = useState("");
  const [ticket2, setTicket2] = useState("");
  const [ticket3, setTicket3] = 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_INTL_Rev202/db-published-produksi?"
          "views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-published-produksi?"
        : // "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi?"
          "views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-published-produksi?"
      : safeLevelName.includes("POLDA")
      ? // `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi-polda?provinsi-polda=${provState}&`
        `views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-published-produksi?provinsi-polda=${provState}&`
      : // `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-published-produksi-polda?provinsi-polda=${provState}`;
        `views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-published-produksi?provinsi-polda=${provState}&`;

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

  const view3 =
    levelName == "MABES POLRI"
      ? isInternational[2]
        ? // "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-waktu-akses-pengguna?"
          "views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-heatmap-bd?"
        : // "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna?"
          "views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-heatmap-bd?"
      : safeLevelName.includes("POLDA")
      ? // `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna-polda?provinsi-polda=${provState}`
        `views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-heatmap-bd?provinsi-polda=${provState}`
      : // `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-waktu-akses-pengguna-polda?provinsi-polda=${provState}&`;
        `views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-heatmap-bd?provinsi-polda=${provState}`;

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

    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 className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3">
      <p className="text-lg">
        <b>
          {isInternational[0]
            ? "CREATORS WITH THE MOST PUBLISHED CONTENT"
            : "KREATOR DENGAN PUBLISH KONTEN TERBANYAK"}
        </b>
      </p>
      {levelName === "MABES POLRI" ? (
        <div className="flex flex-col gap-1">
          <p>{t("choose_category", { defaultValue: "Choose Category" })}</p>
          <div className="flex flex-row gap-1 border-2 w-fit">
            <Button
              onClick={() => handleInternational(0, false)}
              className={` hover:text-white rounded-none
                ${
                  isInternational[0]
                    ? "bg-white text-black "
                    : "bg-black text-white "
                }`}
            >
              Indonesia
            </Button>
            <Button
              onClick={() => handleInternational(0, true)}
              className={`hover:text-white rounded-none ${
                isInternational[0]
                  ? "bg-black text-white "
                  : "bg-white text-black "
              }
              `}
            >
              {t("international", { defaultValue: "International" })}
            </Button>
          </div>
        </div>
      ) : (
        ""
      )}
      <div className="my-5">
        {ticket1 == "" ? (
          <iframe
            src={`${baseUrl + view1 + param}`}
            width="100%"
            height="750"
            frameBorder="0"
          />
        ) : (
          <iframe
            src={`${`${url + ticket1}/${view1}${param}`}`}
            width="100%"
            height="750"
            frameBorder="0"
          />
        )}
      </div>
      <p className="text-lg">
        <b>
          {isInternational[1]
            ? "CREATORS WITH THE MOST INTERACTION OF CONTENT"
            : "KREATOR DENGAN INTERAKSI KONTEN TERBANYAK"}
        </b>
      </p>
      {levelName === "MABES POLRI" ? (
        <div className="flex flex-col gap-1">
          <p>{t("choose_category", { defaultValue: "Choose Category" })}</p>
          <div className="flex flex-row gap-1 border-2 w-fit">
            <Button
              onClick={() => handleInternational(1, false)}
              className={` hover:text-white rounded-none
                ${
                  isInternational[1]
                    ? "bg-white text-black "
                    : "bg-black text-white "
                }`}
            >
              Indonesia
            </Button>
            <Button
              onClick={() => handleInternational(1, true)}
              className={`hover:text-white rounded-none ${
                isInternational[1]
                  ? "bg-black text-white "
                  : "bg-white text-black "
              }
              `}
            >
              {t("international", { defaultValue: "International" })}
            </Button>
          </div>
        </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>
      <p className="text-lg">
        <b>
          {isInternational[2]
            ? "ACCESS TIME PER CONTENT / CATEGORY"
            : "WAKTU AKSES PER KONTEN / KATEGORI"}
        </b>
      </p>
      {levelName === "MABES POLRI" ? (
        <div className="flex flex-col gap-1">
          <p>{t("choose_category", { defaultValue: "Choose Category" })}</p>
          <div className="flex flex-row gap-1 border-2 w-fit">
            <Button
              onClick={() => handleInternational(2, false)}
              className={` hover:text-white rounded-none
                ${
                  isInternational[2]
                    ? "bg-white text-black "
                    : "bg-black text-white "
                }`}
            >
              Indonesia
            </Button>
            <Button
              onClick={() => handleInternational(2, true)}
              className={`hover:text-white rounded-none ${
                isInternational[1]
                  ? "bg-black text-white "
                  : "bg-white text-black "
              }
              `}
            >
              {t("international", { defaultValue: "International" })}
            </Button>
          </div>
        </div>
      ) : (
        ""
      )}
      <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>
    </div>
  );
}