"use client";

import { useEffect, useState } from "react";
import { onCreateBeToken } from "@/services/apis/beToken";
import { CreateBeTokenpRequest } from "@/types/beToken";
import { useTranslations } from "use-intl";

interface ViewContentPageProps {
  params: {
    contentId: string;
  };
}

const ViewContentPage = ({ params }: ViewContentPageProps) => {
  const { contentId } = params;
  const t = useTranslations("ManageContentPage");

  const [isMobile, setIsMobile] = useState(false);
  const [isMobileTablet, setIsMobileTablet] = useState(false);
  const [viewerURL, setViewerURL] = useState("");
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const fetchToken = async () => {
      try {
        setIsLoading(true);

        const tokenRequest: CreateBeTokenpRequest = {
          contentId: contentId,
        };

        const response = await onCreateBeToken(tokenRequest);

        if (response && response.data) {
          const baseUrl =
            "https://resource.keyring.net/689/viewer/pdf/index.html?";
          const url = `${baseUrl}?token=${response?.data?.tokenInfo?.tokenId}`;
          setViewerURL(url);
        }
      } catch (error) {
        console.error("Error fetching token:", error);
      } finally {
        setIsLoading(false);
      }
    };

    fetchToken();
  }, [contentId]);

  useEffect(() => {
    const checkMobile = () => {
      if (typeof window !== "undefined") {
        const userAgent = window.navigator.userAgent;
        setIsMobile(
          /iPhone|Android|iPod|BlackBerry|Opera Mini|IEMobile/i.test(userAgent)
        );
        setIsMobileTablet(/iPad|Android|Tablet/i.test(userAgent));
      }
    };

    checkMobile();
    window.addEventListener("resize", checkMobile);

    return () => {
      window.removeEventListener("resize", checkMobile);
    };
  }, []);

  const getIframeClass = () => {
    if (isMobile || isMobileTablet) {
      return "w-full h-screen overflow-y-auto border-none";
    }
    return "w-full h-[calc(100vh-80px)] border-none";
  };

  return (
    <div className="w-full h-full flex flex-col">
      {isLoading ? (
        <div className="w-full h-[calc(100vh-80px)] flex items-center justify-center">
          <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div>
        </div>
      ) : viewerURL ? (
        <iframe
          id="document-viewer"
          className={getIframeClass()}
          src={viewerURL}
          title={t("documentViewer")}
          allowFullScreen
        ></iframe>
      ) : (
        <div className="w-full h-[calc(100vh-80px)] flex items-center justify-center">
          <p className="text-red-500">{t("notFound")}</p>
        </div>
      )}
    </div>
  );
};

export default ViewContentPage;