"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");

  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>
  );
}