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

"use client";
import { useState, useEffect } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import { formatElapsedTime, getHuntTimer } from "@/utils/timerService";

export default function CluePage({ params }) {
  const [clue, setClue] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [foundNow, setFoundNow] = useState(false);
  const [elapsedTime, setElapsedTime] = useState("00:00:00");
  const router = useRouter();
  const { status } = useSession();
  const { clueId } = params;

  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
      return;
    }

    if (status === "loading") {
      return;
    }

    // Fetch clue data
    async function fetchClue() {
      try {
        setLoading(true);
        const response = await fetch(`/api/clues/${clueId}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "Cache-Control": "no-cache, no-store, must-revalidate",
          },
          credentials: "include",
        });

        if (!response.ok) {
          if (response.status === 404) {
            throw new Error("Clue not found");
          } else {
            const data = await response.json();
            throw new Error(data.error || "Failed to fetch clue");
          }
        }

        const data = await response.json();
        setClue(data);
        setFoundNow(data.foundNow);
        setLoading(false);
      } catch (err) {
        console.error("Error fetching clue:", err);
        setError(err.message);
        setLoading(false);
      }
    }

    fetchClue();
  }, [clueId, router, status]);

  // Update timer display
  useEffect(() => {
    // Set up timer display updates
    const timerData = getHuntTimer();
    if (!timerData || !timerData.isActive) {
      return;
    }

    const timer = setInterval(() => {
      setElapsedTime(formatElapsedTime(timerData.startTime));
    }, 1000);

    // Initial set
    setElapsedTime(formatElapsedTime(timerData.startTime));

    return () => clearInterval(timer);
  }, []);

  if (loading) {
    return (
      <div className="clue-container">
        <div className="loading">
          <div className="loading-spinner"></div>
          <p>Loading clue...</p>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div className="clue-container">
        <div className="error">Error: {error}</div>
        <div className="nav-buttons">
          <button onClick={() => router.push("/map")} className="map-button">
            Back to Map
          </button>
          <button onClick={() => router.push("/")} className="home-button">
            Back to Home
          </button>
        </div>
      </div>
    );
  }

  if (!clue) {
    return (
      <div className="clue-container">
        <div className="not-found">Clue not found</div>
        <div className="nav-buttons">
          <button onClick={() => router.push("/map")} className="map-button">
            Back to Map
          </button>
          <button onClick={() => router.push("/")} className="home-button">
            Back to Home
          </button>
        </div>
      </div>
    );
  }

  return (
    <div className="clue-container">
      <div className="clue-scroll">
        {foundNow && (
          <div className="new-discovery">
            <div className="discovery-icon">🎉</div>
            <div className="discovery-text">New Clue Discovered!</div>
          </div>
        )}

        <div className="timer-display">{elapsedTime}</div>

        <h1 className="clue-title">{clue.title}</h1>

        <div className="clue-content">
          <h2>Description</h2>
          <p className="clue-description">{clue.description}</p>

          {clue.location && (
            <div className="clue-location">
              <h2>Location Hint</h2>
              <p>{clue.location}</p>
            </div>
          )}
        </div>

        <div className="nav-buttons">
          <button onClick={() => router.push("/map")} className="map-button">
            Back to Map
          </button>
          <button onClick={() => router.push("/")} className="home-button">
            Back to Home
          </button>
        </div>
      </div>

      <style jsx>{`
        .clue-container {
          display: flex;
          justify-content: center;
          align-items: center;
          min-height: 100vh;
          background-color: #f4f1ea;
          padding: 20px;
        }

        .clue-scroll {
          background-color: #f8f3e3;
          border-radius: 10px;
          padding: 30px;
          width: 100%;
          max-width: 600px;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
          position: relative;
          margin-bottom: 20px;
          border: 1px dashed #9c6b30;
        }

        h2 {
          color: #9c6b30;
          font-size: 1.5rem;
          margin-top: 10px;
          margin-bottom: 15px;
        }

        .clue-description {
          font-size: 1.2rem;
          line-height: 1.6;
          color: #5d4037;
          margin-bottom: 20px;
        }

        .clue-location {
          margin-top: 20px;
          padding-top: 15px;
          border-top: 1px dashed #9c6b30;
        }

        .nav-buttons {
          display: flex;
          justify-content: space-between;
          margin-top: 30px;
        }

        .map-button,
        .home-button {
          padding: 10px 20px;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-weight: bold;
          transition: all 0.2s;
        }

        .map-button {
          background-color: #68543c;
          color: white;
        }

        .home-button {
          background-color: #a98467;
          color: white;
        }

        .map-button:hover,
        .home-button:hover {
          transform: scale(1.05);
        }

        .loading,
        .error,
        .not-found {
          text-align: center;
          padding: 30px;
        }

        .loading-spinner {
          border: 4px solid #f3f3f3;
          border-top: 4px solid #9c6b30;
          border-radius: 50%;
          width: 40px;
          height: 40px;
          animation: spin 1s linear infinite;
          margin: 0 auto 20px;
        }

        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }

        .error {
          color: #d32f2f;
        }

        .clue-title {
          color: #68543c;
          font-size: 2rem;
          text-align: center;
          margin-bottom: 20px;
          border-bottom: 2px solid #9c6b30;
          padding-bottom: 10px;
        }

        .timer-display {
          position: absolute;
          top: 15px;
          right: 15px;
          background-color: rgba(0, 0, 0, 0.1);
          padding: 5px 10px;
          border-radius: 5px;
          font-family: monospace;
          font-weight: bold;
          font-size: 1rem;
        }

        .new-discovery {
          background-color: #feefb3;
          border: 1px solid #9f6000;
          color: #9f6000;
          padding: 15px;
          border-radius: 5px;
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          animation: pulse 2s infinite;
        }

        @keyframes pulse {
          0% {
            opacity: 1;
          }
          50% {
            opacity: 0.7;
          }
          100% {
            opacity: 1;
          }
        }

        .discovery-icon {
          font-size: 1.5rem;
          margin-right: 10px;
        }

        .discovery-text {
          font-weight: bold;
        }
      `}</style>
    </div>
  );
}