"use client";
import { useState, useEffect } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";

export default function HuntNotStarted() {
  const [countdown, setCountdown] = useState(10);
  const router = useRouter();
  const searchParams = useSearchParams();
  const teamId = searchParams.get("teamId");

  // Add aggressive hunt status checking
  useEffect(() => {
    let redirectAttempted = false;

    // Function to check hunt status
    async function checkHuntStatus() {
      if (redirectAttempted) return;

      try {
        const timestamp = new Date().getTime();
        const response = await fetch(`/api/hunt-status?t=${timestamp}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "Cache-Control": "no-store, no-cache, must-revalidate",
            Pragma: "no-cache",
          },
          credentials: "include",
        });

        if (response.ok) {
          const data = await response.json();

          // If hunt becomes active while on this page, immediately redirect to map
          if (data.active) {
            console.log("Hunt now active! Redirecting to map page");
            redirectAttempted = true;
            window.location.replace("/map");
          }
        }
      } catch (err) {
        console.error("Error checking hunt status:", err);
      }
    }

    // Check immediately and every 500ms
    checkHuntStatus();
    const intervalId = setInterval(checkHuntStatus, 500);

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

  // Existing countdown effect
  useEffect(() => {
    // Countdown timer
    if (countdown > 0) {
      const timer = setTimeout(() => {
        setCountdown(countdown - 1);
      }, 1000);
      return () => clearTimeout(timer);
    } else {
      // Redirect back to team page when countdown reaches 0
      if (teamId) {
        router.push(`/${teamId}`);
      } else {
        router.push("/team-selection");
      }
    }
  }, [countdown, router, teamId]);

  return (
    <div className="hunt-not-started">
      <div className="message-container">
        <div className="message-icon">⏳</div>
        <h1 className="message-title">Hunt Not Started Yet</h1>
        <p className="message-text">
          The treasure hunt has not been activated by an administrator yet.
          Please check back later or contact an admin to start the hunt.
        </p>
        <p className="countdown">Redirecting back in {countdown} seconds...</p>
        <Link href={teamId ? `/${teamId}` : "/team-selection"}>
          <button className="back-button">Return Now</button>
        </Link>
      </div>

      <style jsx>{`
        .hunt-not-started {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          background-color: #f4f4f4;
          padding: 20px;
        }

        .message-container {
          background-color: white;
          border-radius: 8px;
          padding: 30px;
          text-align: center;
          max-width: 500px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .message-icon {
          font-size: 48px;
          margin-bottom: 20px;
        }

        .message-title {
          color: #68543c;
          margin-bottom: 20px;
        }

        .message-text {
          color: #555;
          margin-bottom: 30px;
          line-height: 1.5;
        }

        .countdown {
          font-weight: bold;
          color: #68543c;
          margin-bottom: 20px;
        }

        .back-button {
          background-color: #68543c;
          color: white;
          border: none;
          border-radius: 4px;
          padding: 12px 30px; /* Increased padding */
          font-size: 16px;
          cursor: pointer;
          min-width: 150px; /* Ensure minimum width */
          display: inline-block; /* Proper box model */
          text-align: center; /* Center text */
        }

        .back-button:hover {
          background-color: #53402d;
        }
      `}</style>
    </div>
  );
}