fixed elapsed timer on clue page cannot fix it on admin page. I am done. now to move on to the styling to match UI

app/(main)/clue/[clueId]/page.js

@@ -47,6 +47,7 @@ export default function CluePage({ params }) {
   const notificationTimeoutRef = useRef(null);
   const navErrorTimeoutRef = useRef(null);
   const timerIdRef = useRef(null);
+  const timerInitializedRef = useRef(false); // Add this ref to track if timer is already initialized
 
   // Check if user is admin
   const isAdmin = session?.user?.role === "admin";
@@ -194,7 +195,7 @@ export default function CluePage({ params }) {
     };
   }, [router, previousHuntState]);
 
-  // Function to ensure we have timer data from the server
+  // Function to ensure we have timer data from the server - only if needed
   async function fetchTeamHuntStartTime() {
     try {
       // First try to get any existing timer data
@@ -204,6 +205,7 @@ export default function CluePage({ params }) {
       }
 
       // If no timer data exists, sync with server
+      console.log("No timer data found, syncing with server...");
       const result = await syncTimerWithServer();
       return result.success;
     } catch (err) {
@@ -212,44 +214,53 @@ export default function CluePage({ params }) {
     }
   }
 
-  // Updated timer effect that follows the same pattern as the map page
+  // Updated timer effect with protection against multiple initializations
   useEffect(() => {
+    // Prevent multiple initializations of the timer
+    if (timerInitializedRef.current) {
+      return;
+    }
+
     // Initialize timer
     async function initializeTimer() {
       // First ensure we have timer data
       await fetchTeamHuntStartTime();
 
-      // Set up timer updates
-      const updateTimer = () => {
-        const timerData = getHuntTimer();
-        if (timerData && timerData.startTime) {
-          setElapsedTime(formatElapsedTime(timerData.startTime));
+      // Set up timer updates if not already set
+      if (!timerIdRef.current) {
+        const updateTimer = () => {
+          const timerData = getHuntTimer();
+          if (timerData && timerData.startTime) {
+            setElapsedTime(formatElapsedTime(timerData.startTime));
 
-          // Check if timer has ended (if there's an endTime)
-          if (timerData.endTime) {
-            const now = Date.now();
-            const endTime = new Date(timerData.endTime).getTime();
+            // Check if timer has ended (if there's an endTime)
+            if (timerData.endTime) {
+              const now = Date.now();
+              const endTime = new Date(timerData.endTime).getTime();
 
-            // If current time is past the end time, hunt has ended
-            if (now >= endTime) {
-              setHuntActive(false);
-              clearInterval(timerIdRef.current);
+              // If current time is past the end time, hunt has ended
+              if (now >= endTime) {
+                setHuntActive(false);
+                clearInterval(timerIdRef.current);
+                timerIdRef.current = null;
 
-              // Redirect to leaderboard with huntEnded flag
-              console.log(
-                "Hunt end time reached! Redirecting to leaderboard..."
-              );
-              router.push("/leaderboard?huntEnded=true");
+                // Redirect to leaderboard with huntEnded flag
+                console.log(
+                  "Hunt end time reached! Redirecting to leaderboard..."
+                );
+                router.push("/leaderboard?huntEnded=true");
+              }
             }
           }
-        }
-      };
+        };
 
-      // Initial update
-      updateTimer();
+        // Initial update
+        updateTimer();
 
-      // Update every second
-      timerIdRef.current = setInterval(updateTimer, 1000);
+        // Update every second
+        timerIdRef.current = setInterval(updateTimer, 1000);
+        timerInitializedRef.current = true;
+      }
     }
 
     initializeTimer();
@@ -259,9 +270,52 @@ export default function CluePage({ params }) {
       if (timerIdRef.current) {
         clearInterval(timerIdRef.current);
         timerIdRef.current = null;
+        timerInitializedRef.current = false;
       }
     };
-  }, [router]);
+  }, [router]); // Only depend on router
+
+  // Make sure hunt status check doesn't interfere with the timer
+  useEffect(() => {
+    // This function should NOT reset the timer or recreate it
+    async function checkHuntStatus() {
+      try {
+        const response = await fetch("/api/hunt-status", {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            "Cache-Control": "no-cache, no-store, must-revalidate",
+          },
+          credentials: "include",
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+
+          // Only update hunt state, don't touch the timer
+          const newHuntState = !!data.active;
+
+          // If hunt was active but is now inactive, redirect to leaderboard
+          if (previousHuntState === true && newHuntState === false) {
+            console.log("Hunt has ended! Redirecting to leaderboard...");
+            router.push("/leaderboard?huntEnded=true");
+            return;
+          }
+
+          // Update the previous hunt state for next comparison
+          setPreviousHuntState(newHuntState);
+        }
+      } catch (err) {
+        console.error("Failed to check hunt status:", err);
+      }
+    }
+
+    const intervalId = setInterval(checkHuntStatus, 5000);
+
+    return () => {
+      clearInterval(intervalId);
+    };
+  }, [router, previousHuntState]);
 
   // Fetch team data on component mount
   useEffect(() => {