"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 ManagementUserVisualization() {
  const [ticket, setTicket] = useState();
  const [isInternational, setIsInternational] = useState(false);
  const levelName = getCookiesDecrypt("ulnae");
  const poldaState = Cookies.get("state");
  const provState = Cookies.get("state-prov");

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

  const view =
    levelName == "MABES POLRI"
      ? isInternational
        ? // "views/2023_04_MediaHUB-Viz_INTL_Rev202/db-user-count?"
          "views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-user-count?"
        : // "views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-user-count?"
          "views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-user-count?"
      : // `views/2023_04_MediaHUB-Viz-POLDA_Rev201/db-user-count-polda?provinsi-polda=${poldaState}&`;
        `views/2025_11_Mediahub-Admin-Mabes-Breadkdown-Rev100/db-user-count?provinsi-polda=${provState}&`;

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

  const t = useTranslations("AnalyticsDashboard");

  const userId = getCookiesDecrypt("uie");
  useEffect(() => {
    const initState = async () => {
      const response = await generateTicket();
      console.log("Data :", response?.data?.data);
      setTicket(response?.data?.data);
      console.log(userId);
    };

    initState();
  }, [isInternational]);

  return (
    <div className="flex flex-col gap-2 bg-white dark:bg-black rounded-lg p-3">
      {isInternational ? (
        <p className="font-semibold">STATISTICS TO THE NUMBER OF USERS</p>
      ) : (
        <p className="font-semibold">STATISTIK JUMLAH PENGGUNA</p>
      )}
      <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={() => setIsInternational(false)}
            className={` hover:text-white rounded-none
                ${
                  isInternational
                    ? "bg-white text-black "
                    : "bg-black text-white "
                }`}
          >
            Indonesia
          </Button>
          <Button
            onClick={() => setIsInternational(true)}
            className={`hover:text-white rounded-none ${
              isInternational ? "bg-black text-white " : "bg-white text-black "
            }
              `}
          >
            {t("international", { defaultValue: "International" })}
          </Button>
        </div>
      </div>

      {ticket == undefined ? (
        <iframe
          src={`${baseUrl + view + param}`}
          width="100%"
          height="750"
          frameBorder="0"
        />
      ) : (
        <iframe
          src={`${`${url + ticket}/${view}${param}`}`}
          width="100%"
          height="750"
          frameBorder="0"
        />
      )}
    </div>
  );
}