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

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

  // Check hunt status at regular intervals
  useEffect(() => {
    const checkHuntStatus = async () => {
      try {
        const timestamp = Date.now();
        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();
          setHuntActive(data.active);

          // If hunt becomes active, redirect to map
          if (data.active) {
            router.push("/map");
          }
        }

        setLoading(false);
      } catch (err) {
        console.error("Failed to check hunt status:", err);
        setLoading(false);
      }
    };

    // Check status immediately
    checkHuntStatus();

    // Set up regular polling
    const intervalId = setInterval(checkHuntStatus, 5000);

    // Clean up on unmount
    return () => clearInterval(intervalId);
  }, [router]);

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

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

  return (
    <div className="waiting-page">
      <div className="waiting-card">
        <div className="waiting-icon">⏳</div>
        <h1>Hunt Not Started Yet</h1>
        <p>The treasure hunt has not been activated by the organizers yet.</p>
        <p>This page will automatically update when the hunt begins.</p>

        <div className="waiting-animation">
          <div className="pulse"></div>
        </div>

        <div className="waiting-buttons">
          <Link
            href={`/${session?.user?.teamId || ""}`}
            className="team-button"
          >
            Back to Team Page
          </Link>
        </div>
      </div>

      <style jsx>{`
        .waiting-page {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          min-height: 100vh;
          background-color: #f4e9dc;
          padding: 1rem;
        }

        .waiting-card {
          background-color: white;
          border-radius: 8px;
          padding: 2rem;
          text-align: center;
          max-width: 500px;
          width: 100%;
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .waiting-icon {
          font-size: 3rem;
          margin-bottom: 1rem;
        }

        h1 {
          color: #68543c;
          margin-bottom: 1rem;
        }

        p {
          color: #555;
          margin-bottom: 1rem;
        }

        .waiting-animation {
          margin: 2rem 0;
          display: flex;
          justify-content: center;
        }

        .pulse {
          width: 60px;
          height: 60px;
          background-color: rgba(104, 84, 60, 0.3);
          border-radius: 50%;
          position: relative;
          animation: pulse 2s infinite;
        }

        @keyframes pulse {
          0% {
            transform: scale(0.8);
            opacity: 0.8;
          }
          50% {
            transform: scale(1.2);
            opacity: 0.4;
          }
          100% {
            transform: scale(0.8);
            opacity: 0.8;
          }
        }

        .waiting-buttons {
          margin-top: 2rem;
        }

        .team-button {
          display: inline-block;
          background-color: #68543c;
          color: white;
          padding: 0.75rem 1.5rem;
          border-radius: 4px;
          text-decoration: none;
          font-weight: bold;
          transition: background-color 0.2s;
        }

        .team-button:hover {
          background-color: #53402d;
        }

        .loading-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: 100vh;
        }

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

        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      `}</style>
    </div>
  );
}