"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useSession } from "next-auth/react";
import styles from "./waiting.module.css";

export default function WaitingPage() {
  const router = useRouter();
  const { status } = useSession();
  const [huntActive, setHuntActive] = useState(false);
  const [loading, setLoading] = useState(true);

  // Check hunt status
  useEffect(() => {
    // Function to check hunt status
    async function checkHuntStatus() {
      try {
        const response = await fetch("/api/hunt-status", {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "Cache-Control": "no-store, no-store, must-revalidate",
          },
          credentials: "include",
        });

        if (response.ok) {
          const data = await response.json();
          console.log("Hunt status from waiting page:", data);

          // If hunt is active, redirect to map page
          if (data.active) {
            console.log("Hunt is active! Redirecting to map page");
            router.push("/map");
          }

          // Update local state
          setHuntActive(data.active);
        }

        setLoading(false);
      } catch (err) {
        console.error("Error checking hunt status:", err);
        setLoading(false);
      }
    }

    // Check on load and every 5 seconds
    checkHuntStatus();
    const intervalId = setInterval(checkHuntStatus, 5000);

    return () => clearInterval(intervalId);
  }, [router]);

  // Redirect to login if not authenticated
  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [status, router]);

  if (loading) {
    return (
      <div className={styles.container}>
        <div className={styles.spinner}></div>
        <h2>Loading...</h2>
      </div>
    );
  }

  return (
    <div className={styles.container}>
      <h1>Waiting for Hunt to Start</h1>
      <p>
        The treasure hunt has not started yet. Please wait for the administrator
        to start the hunt.
      </p>
      <div className={styles.waitingAnimation}>⏳</div>
      {huntActive && (
        <div className={styles.startedMessage}>
          <p>The hunt has started!</p>
          <button onClick={() => router.push("/map")}>Go to Map</button>
        </div>
      )}
    </div>
  );
}