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

"use client";

import { useState, useEffect } from "react";
import { useSession } from "next-auth/react";
import { useRouter } from "next/navigation";
import { useHuntStatusCheck } from "@/hooks/useHuntStatusCheck";
import Link from "next/link";
import { use } from "react"; // Add this import for React.use()

export default function CluePage({ params }) {
  const { data: session, status } = useSession();
  // Unwrap the params Promise using React.use()
  const unwrappedParams = use(params);
  const { clueId } = unwrappedParams;

  const [clue, setClue] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const router = useRouter();

  // Add this line to use the hunt status hook
  const huntActive = useHuntStatusCheck();

  useEffect(() => {
    async function fetchClueDetails() {
      try {
        // Try to check hunt status first with robust error handling
        try {
          const statusResponse = await fetch("/api/hunt-status", {
            credentials: "include",
            headers: { Accept: "application/json" },
          });

          // Read as text first
          const statusText = await statusResponse.text();

          try {
            const statusData = JSON.parse(statusText);
            if (!statusData.active && statusData.authenticated) {
              router.push("/");
              return;
            }
          } catch (parseError) {
            console.error("Failed to parse hunt status response:", parseError);
            // Continue anyway to try fetching clue details
          }
        } catch (statusErr) {
          console.error("Error checking hunt status:", statusErr);
          // Continue anyway to try fetching clue details
        }

        // Now fetch clue details with robust error handling
        const response = await fetch(`/api/clues/${clueId}`, {
          credentials: "include",
          headers: { Accept: "application/json" },
        });

        // Read as text first
        const responseText = await response.text();

        // Try to parse as JSON
        let data;
        try {
          data = JSON.parse(responseText);
        } catch (parseError) {
          console.error("Failed to parse clue details response:", parseError);
          console.log("Response received:", responseText.slice(0, 200));
          throw new Error("Invalid response from server. Please try again.");
        }

        // Check for error in the response
        if (data.error) {
          throw new Error(data.error);
        }

        setClue(data.clue);
      } catch (err) {
        console.error("Error fetching clue details:", err);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    if (clueId) {
      fetchClueDetails();
    }
  }, [clueId, router]);

  if (loading) {
    return (
      <div className="clue-container">
        <div className="loading">Loading clue details...</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">
        <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: #f5e6ca;
          border: 2px solid #9c6b30;
          border-radius: 10px;
          padding: 30px;
          max-width: 800px;
          width: 100%;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
          position: relative;
        }

        .clue-scroll::before,
        .clue-scroll::after {
          content: "";
          position: absolute;
          height: 30px;
          width: 100%;
          left: 0;
        }

        .clue-scroll::before {
          top: 0;
          background: linear-gradient(
            180deg,
            rgba(156, 107, 48, 0.2) 0%,
            rgba(156, 107, 48, 0) 100%
          );
          border-radius: 8px 8px 0 0;
        }

        .clue-scroll::after {
          bottom: 0;
          background: linear-gradient(
            0deg,
            rgba(156, 107, 48, 0.2) 0%,
            rgba(156, 107, 48, 0) 100%
          );
          border-radius: 0 0 8px 8px;
        }

        .clue-title {
          color: #5d4037;
          font-size: 2rem;
          text-align: center;
          margin-bottom: 20px;
          font-family: "Pirates", cursive, serif;
          border-bottom: 2px dashed #9c6b30;
          padding-bottom: 15px;
        }

        .clue-content {
          padding: 20px;
          background-color: #f9f3e3;
          border-radius: 8px;
          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;
          font-size: 1rem;
          cursor: pointer;
          transition: background-color 0.3s, transform 0.2s;
        }

        .map-button {
          background-color: #9c6b30;
          color: white;
        }

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

        .map-button:hover,
        .home-button:hover {
          transform: translateY(-3px);
        }

        .map-button:hover {
          background-color: #7d562a;
        }

        .home-button:hover {
          background-color: #4a332e;
        }

        .loading,
        .error,
        .not-found {
          padding: 50px;
          text-align: center;
          border: 2px dashed #9c6b30;
          border-radius: 8px;
          margin: 30px 0;
          color: #5d4037;
          background: #f5e6ca;
          font-size: 1.2rem;
        }

        .error {
          border-color: #d32f2f;
          color: #d32f2f;
        }
      `}</style>
    </div>
  );
}