fixed skip clue implimentation

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

@@ -32,6 +32,7 @@ export default function CluePage({ params }) {
   const [scanMessage, setScanMessage] = useState(null);
   const [lastRefresh, setLastRefresh] = useState(0);
   const [clueFound, setClueFound] = useState(false);
+  const [clueSkipped, setClueSkipped] = useState(false); // Add state for skipped status
   const [allClues, setAllClues] = useState([]);
   const [nextClueId, setNextClueId] = useState(null);
   const [nextClueAvailable, setNextClueAvailable] = useState(false);
@@ -126,6 +127,7 @@ export default function CluePage({ params }) {
         if (isMounted) {
           setClue(data);
           setClueFound(data.found);
+          setClueSkipped(data.skipped); // Set skipped status from API response
           setLoading(false);
           setLastRefresh(Date.now());
         }
@@ -398,6 +400,56 @@ export default function CluePage({ params }) {
     };
   }, []);
 
+  // Replace the previous clue function with skip clue functionality
+  const handleSkipClue = async () => {
+    // Show confirmation dialog
+    if (
+      !confirm(
+        "Are you sure you want to skip this clue? You can come back to it later."
+      )
+    ) {
+      return;
+    }
+
+    try {
+      // Make an API call to mark this clue as skipped
+      const response = await fetch("/api/mark-clue", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          clueId: parseInt(clueId),
+          skipped: true,
+        }),
+      });
+
+      // Get the response data to handle errors better
+      const data = await response.json();
+
+      if (response.ok) {
+        setScanMessage("Clue skipped. You can return to it later.");
+
+        // Make next clue available immediately
+        setNextClueAvailable(true);
+
+        // Navigate to the next clue if available, otherwise go to map
+        if (nextClueId) {
+          router.push(`/clue/${nextClueId}`);
+        } else {
+          router.push("/map");
+        }
+      } else {
+        console.error(
+          "Failed to skip clue:",
+          data.error || response.statusText
+        );
+        setScanMessage(`Error: ${data.error || "Could not skip clue"}`);
+      }
+    } catch (err) {
+      console.error("Error skipping clue:", err);
+      setScanMessage("Error: Could not connect to server");
+    }
+  };
+
   // Navigate to the next clue
   const handleNextClue = () => {
     if (nextClueId) {
@@ -423,20 +475,6 @@ export default function CluePage({ params }) {
     }
   };
 
-  // Navigate to the previous clue
-  const handlePrevClue = () => {
-    if (allClues.length > 0) {
-      const currentIndex = allClues.findIndex((c) => c.id === parseInt(clueId));
-      if (currentIndex > 0) {
-        router.push(`/clue/${allClues[currentIndex - 1].id}`);
-      } else {
-        router.push("/map");
-      }
-    } else {
-      router.push("/map");
-    }
-  };
-
   // Function for manual refresh - for admins to test without waiting
   const handleManualRefresh = () => {
     setLastRefresh(0);
@@ -541,7 +579,7 @@ export default function CluePage({ params }) {
       )}
 
       <div className="clue-content-wrapper">
-        {/* Show a notification when the clue is already found */}
+        {/* Show notification based on found OR skipped status */}
         {clueFound && (
           <div className="clue-found-notification">
             <div className="clue-found-icon">✓</div>
@@ -550,6 +588,15 @@ export default function CluePage({ params }) {
             </div>
           </div>
         )}
+        
+        {clueSkipped && !clueFound && (
+          <div className="clue-skipped-notification">
+            <div className="clue-skipped-icon">↷</div>
+            <div className="clue-skipped-text">
+              You skipped this clue earlier. Try to solve it now!
+            </div>
+          </div>
+        )}
 
         {/* Admin tools section - only visible to admins */}
         {isAdmin && (
@@ -598,8 +645,8 @@ export default function CluePage({ params }) {
 
         {/* Navigation Buttons */}
         <div className="navigation-buttons">
-          <button onClick={handlePrevClue} className="nav-button prev-button">
-            Previous Clue
+          <button onClick={handleSkipClue} className="nav-button prev-button">
+            Skip Clue
           </button>
           <button
             onClick={() => router.push("/map")}
@@ -741,6 +788,28 @@ export default function CluePage({ params }) {
           font-weight: bold;
         }
 
+        .clue-skipped-notification {
+          display: flex;
+          align-items: center;
+          background-color: #e3f2fd;
+          border-radius: 8px;
+          padding: 12px 16px;
+          margin-bottom: 15px;
+          width: 100%;
+          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        .clue-skipped-icon {
+          font-size: 1.5rem;
+          color: #1976d2;
+          margin-right: 12px;
+        }
+
+        .clue-skipped-text {
+          color: #1976d2;
+          font-weight: bold;
+        }
+
         @keyframes slide-down {
           0% {
             transform: translateY(-100%);
@@ -1055,13 +1124,13 @@ export default function CluePage({ params }) {
           background-color: rgba(104, 84, 60, 0.1);
           border-radius: 5px;
         }
-        
+
         .timer-label {
           font-weight: bold;
           margin-right: 8px;
           color: #68543c;
         }
-        
+
         .timer-value {
           font-family: monospace;
           font-size: 1.1em;