feat(zustand): add zustand stores for exam, timer and auth

app/exam/[id]/page.tsx

@@ -1,14 +1,12 @@
 "use client";
 
-import React, { useEffect, useCallback, useMemo } from "react";
+import React, { useEffect, useCallback } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { useTimer } from "@/context/TimerContext";
-import { useExam } from "@/context/ExamContext";
 import Header from "@/components/Header";
-import { useModal } from "@/context/ModalContext";
-import Modal from "@/components/ExamModal";
 import QuestionItem from "@/components/QuestionItem";
 import BackgroundWrapper from "@/components/BackgroundWrapper";
+import { useExamStore } from "@/stores/examStore";
+import { useTimerStore } from "@/stores/timerStore";
 
 export default function ExamPage() {
   const router = useRouter();
@@ -16,21 +14,25 @@ export default function ExamPage() {
   const test_id = searchParams.get("test_id") || "";
   const type = searchParams.get("type") || "";
 
-  // const { isOpen, close, open } = useModal();
-  const { timeRemaining, setInitialTime, stopTimer } = useTimer();
   const { test, answers, startExam, setAnswer, submitExam, cancelExam } =
-    useExam();
+    useExamStore();
+  const { resetTimer, stopTimer } = useTimerStore();
 
-  // Start exam + timer
+  // Start exam + timer automatically
   useEffect(() => {
     if (type && test_id) {
-      startExam(type, test_id).then(() => {
-        if (test?.metadata.time_limit_minutes) {
-          setInitialTime(test.metadata.time_limit_minutes * 60); // convert to seconds
+      startExam(type, test_id).then((fetchedTest) => {
+        if (fetchedTest?.metadata.time_limit_minutes) {
+          resetTimer(fetchedTest.metadata.time_limit_minutes * 60, () => {
+            // Timer ended → auto-submit exam
+            submitExam(type);
+            router.push(`/categories/${type}s`);
+            alert("Time's up! Your exam has been submitted.");
+          });
         }
       });
     }
-  }, [type, test_id, startExam, setInitialTime]);
+  }, [type, test_id, startExam, resetTimer, submitExam, router]);
 
   const showExitDialog = useCallback(() => {
     if (window.confirm("Are you sure you want to quit the exam?")) {
@@ -38,7 +40,7 @@ export default function ExamPage() {
       cancelExam();
       router.push(`/categories/${type}s`);
     }
-  }, [stopTimer, cancelExam, router]);
+  }, [stopTimer, cancelExam, router, type]);
 
   if (!test) {
     return (
@@ -51,75 +53,16 @@ export default function ExamPage() {
     );
   }
 
-  // answered set for modal overview
-  // const answeredSet = useMemo(
-  //   () =>
-  //     new Set(
-  //       answers
-  //         .map((a, idx) =>
-  //           a !== null && a !== undefined ? idx.toString() : null
-  //         )
-  //         .filter(Boolean) as string[]
-  //     ),
-  //   [answers]
-  // );
+  const handleSubmitExam = (type: string) => {
+    submitExam(type);
+    router.push(`/categories/${type}s`);
+  };
 
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Header with live timer */}
       <Header />
 
-      {/* Modal: Question overview */}
-      {/* <Modal open={isOpen} onClose={close} title="Exam Overview">
-        <div>
-          <div className="flex gap-6 mb-4">
-            <p className="font-medium">Questions: {test.questions.length}</p>
-            <p className="font-medium">
-              Answered:{" "}
-              <span className="text-blue-900 font-bold">
-                {answeredSet.size}
-              </span>
-            </p>
-            <p className="font-medium">
-              Skipped:{" "}
-              <span className="text-yellow-600 font-bold">
-                {test.questions.length - answeredSet.size}
-              </span>
-            </p>
-          </div>
-
-          <div className="h-[0.5px] border-[0.5px] border-black/10 w-full my-3"></div>
-
-          <section className="flex flex-wrap gap-4">
-            {test.questions.map((q, idx) => {
-              const answered = answeredSet.has(String(idx));
-              return (
-                <div
-                  key={q.question_id}
-                  className={`h-12 w-12 rounded-full flex items-center justify-center cursor-pointer
-                  ${
-                    answered
-                      ? "bg-blue-900 text-white"
-                      : "bg-gray-200 text-gray-900"
-                  }
-                  hover:opacity-80 transition`}
-                  onClick={() => {
-                    // optional: scroll to question
-                    const el = document.getElementById(`question-${idx}`);
-                    if (el) {
-                      el.scrollIntoView({ behavior: "smooth" });
-                      close();
-                    }
-                  }}
-                >
-                  {idx + 1}
-                </div>
-              );
-            })}
-          </section>
-        </div>
-      </Modal> */}
-
       {/* Questions */}
       <BackgroundWrapper>
         <div className="container mx-auto px-6 py-8 mb-20">
@@ -137,7 +80,7 @@ export default function ExamPage() {
           {/* Bottom submit bar */}
           <div className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex">
             <button
-              onClick={submitExam}
+              onClick={() => handleSubmitExam(type)}
               className="flex-1 bg-blue-900 text-white p-6 font-bold text-lg hover:bg-blue-800 transition-colors"
             >
               Submit