"use client";
import { useState, useEffect } from "react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import Image from "next/image";
import styles from "@/app/(main)/map/map.module.css";

export default function NavBar({ activeLink, teamData }) {
  const [huntActive, setHuntActive] = useState(null);
  const router = useRouter();

  // Check if hunt is active
  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);
        }
      } catch (err) {
        console.error("Failed to check hunt status:", err);
      }
    };

    checkHuntStatus();
  }, []);

  // Handle map link click
  const handleMapClick = (e) => {
    if (huntActive === false) {
      e.preventDefault();
      router.push("/waiting");
    }
  };

  return (
    <nav className="nav-bar">
      <Link
        href="/map"
        className={`nav-item ${activeLink === "map" ? "active" : ""}`}
        onClick={handleMapClick}
      >
        <div className="nav-icon icon-container">
          <Image
            src="/images/home.svg"
            alt="Map"
            width={40}
            height={40}
            className={`icon-image ${
              activeLink === "map" ? "inverted-icon" : ""
            }`}
          />
        </div>
      </Link>

      <Link
        href="/stats"
        className={`nav-item ${activeLink === "stats" ? "active" : ""}`}
      >
        <div className="nav-icon icon-container">
          <Image
            src="/images/bar-chart.svg"
            alt="Stats"
            width={40}
            height={40}
            className={`icon-image ${
              activeLink === "stats" ? "inverted-icon" : ""
            }`}
          />
        </div>
      </Link>

      <Link
        href={teamData?.id ? `/${teamData.id}` : "/team-selection"}
        className={`nav-item ${activeLink === "team" ? "active" : ""}`}
      >
        <div className="nav-icon icon-container">
          <Image
            src="/images/profile.svg"
            alt="Team"
            width={40}
            height={40}
            className={`icon-image ${
              activeLink === "team" ? "inverted-icon" : ""
            }`}
          />
        </div>
      </Link>

      <Link
        href="/leaderboard"
        className={`nav-item leaderboard-item ${
          activeLink === "leaderboard" ? "active" : ""
        }`}
      >
        <div className="nav-icon leaderboard-icon">
          <Image
            src="/images/leaderboard.svg"
            alt="Leaderboard"
            width={32}
            height={32}
            className={activeLink === "leaderboard" ? "inverted-icon" : ""}
          />
        </div>
      </Link>
    </nav>
  );
}