"use client";

import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { useLocaleFunction } from "@/hooks/use-localed";
import { toast } from "@/hooks/use-toast";
import { getSiteMaintenance } from "@/lib/api/labs";
import { useQuery } from "@tanstack/react-query";
import { format } from "date-fns";
import dynamic from "next/dynamic";
import { type ReactElement, useEffect } from "react";
import { usePathname } from "next/navigation";
import { isExamContentPage } from "@/lib/utils";

function useSiteMaintenance() {
  const pathname = usePathname();
  
  // Disable maintenance checks when on exam pages
  const isExamPage = isExamContentPage(pathname);
  
  return useQuery({
    queryKey: ["site.maintenance"],
    queryFn: () => getSiteMaintenance(),
    staleTime: 60000,
    enabled: !isExamPage,
  });
}

const keyPrefix = "site.maintenances.read.";

function SiteMaintenanceToastsInner() {
  const { data } = useSiteMaintenance();
  const t = useLocaleFunction();

  useEffect(() => {
    if (data) {
      for (const notice of data) {
        const start = format(notice.start_at, "yyyy-MM-dd HH:mm:ss (O)");
        const end = format(notice.end_at, "yyyy-MM-dd HH:mm:ss (O)");

        if (localStorage.getItem(keyPrefix + notice.id) !== "1") {
          toast({
            title: t("alerts.maintenance.title"),
            description: t(
              "alerts.maintenance.description",
              <time className="whitespace-nowrap font-mono">{start}</time>,
              <time className="whitespace-nowrap font-mono">{end}</time>
            ),
            duration: 2147483647,
            onOpenChange(open: boolean) {
              if (!open) {
                localStorage.setItem(keyPrefix + notice.id, "1");
              }
            },
          });
        }
      }
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

  return <></>;
}

function SiteMaintenanceAlertInner({ children }: { children: ReactElement }) {
  const { data = [] } = useSiteMaintenance();

  const t = useLocaleFunction();

  if (data.length === 0) {
    return null;
  }

  const notice = data[0];

  const start = format(notice.start_at, "yyyy-MM-dd HH:mm:ss (O)");
  const end = format(notice.end_at, "yyyy-MM-dd HH:mm:ss (O)");

  return (
    <Dialog>
      <DialogTrigger asChild>{children}</DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t("alerts.maintenance.title")}</DialogTitle>
          <DialogDescription>
            {t(
              "alerts.maintenance.description",
              <time className="whitespace-nowrap font-mono">{start}</time>,
              <time className="whitespace-nowrap font-mono">{end}</time>
            )}
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose>{t("alerts.maintenance.acknowledge")}</DialogClose>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

export const SiteMaintenanceToasts = dynamic(
  () => Promise.resolve(SiteMaintenanceToastsInner),
  { ssr: false }
);
export const SiteMaintenanceAlert = dynamic(
  () => Promise.resolve(SiteMaintenanceAlertInner),
  { ssr: false }
);