examjam-frontend/hooks/useExamExitGuard.ts

import { useRouter, usePathname } from "next/navigation";
import { useEffect } from "react";
import { useExamStore } from "@/stores/examStore";
import { useTimerStore } from "@/stores/timerStore";

export function useExamExitGuard(type: string) {
  const { status, setStatus, cancelExam } = useExamStore();
  const router = useRouter();
  const pathname = usePathname();
  const { stopTimer } = useTimerStore();

  // Guard page render: always redirect if status invalid
  useEffect(() => {
    if (status !== "in-progress") {
      router.replace(`/categories/${type}s`);
    }
  }, [status, router, type]);

  // Confirm before leaving page / tab close
  useEffect(() => {
    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
      if (status === "in-progress") {
        e.preventDefault();
        e.returnValue = ""; // shows native browser dialog
      }
    };
    window.addEventListener("beforeunload", handleBeforeUnload);
    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
  }, [status]);

  // Call this to quit exam manually
  const showExitDialog = () => {
    if (window.confirm("Are you sure you want to quit the exam?")) {
      setStatus("finished");
      stopTimer();
      cancelExam();
      router.replace(`/categories/${type}s`);
    }
  };

  return { showExitDialog };
}