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

export default function TeamPage({ params }) {
  const { data: session, status } = useSession();
  const [team, setTeam] = useState(null);
  const [teamMembers, setTeamMembers] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState("");
  const [huntActive, setHuntActive] = useState(false);
  const router = useRouter();
  const { teamId } = params;

  // Fetch team data
  useEffect(() => {
    async function fetchTeamData() {
      try {
        if (!teamId) {
          throw new Error("No team ID provided");
        }

        // Fetch team details
        const teamResponse = await fetch(`/api/teams/${teamId}`);
        if (!teamResponse.ok) {
          const errorData = await teamResponse.json();
          throw new Error(errorData.error || "Failed to fetch team data");
        }
        const teamData = await teamResponse.json();
        setTeam(teamData);

        // Fetch team members
        const membersResponse = await fetch(`/api/teams/${teamId}/members`);
        if (!membersResponse.ok) {
          // Don't throw here, just log the error
          console.error("Failed to fetch team members");
        } else {
          const membersData = await membersResponse.json();
          setTeamMembers(membersData);
        }

        // Fetch hunt status
        const huntStatusResponse = await fetch("/api/hunt-status");
        if (huntStatusResponse.ok) {
          const huntStatusData = await huntStatusResponse.json();
          setHuntActive(huntStatusData.active);
        }
      } catch (err) {
        console.error("Team page error:", err);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

    if (status === "authenticated" && teamId) {
      fetchTeamData();
    }
  }, [teamId, status]);

  // Handle authentication
  useEffect(() => {
    if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [status, router]);

  if (status === "loading" || loading) {
    return <div className="loading">Loading...</div>;
  }

  if (error) {
    return <div className="error">Error: {error}</div>;
  }

  if (!team) {
    return <div className="error">Team not found</div>;
  }

  return (
    <div className="team-page-container">
      <div className="page-header">
        <Link href="/team-selection" className="back-button">
          ←
        </Link>
        <div className="page-title">Team Details</div>
        <div className="placeholder"></div>
      </div>

      <div className="team-details-card">
        <h1>{team.name}</h1>

        <div className="team-code-container">
          <h2>Team Code</h2>
          <div className="team-code">{team.code}</div>
          <p>Share this code with others to join your team</p>
        </div>

        <div className="team-members-container">
          <h2>Team Members</h2>
          {teamMembers.length === 0 ? (
            <p>No members have joined yet</p>
          ) : (
            <ul className="team-members-list">
              {teamMembers.map((member) => (
                <li key={member.id} className="team-member">
                  {member.username}
                </li>
              ))}
            </ul>
          )}
        </div>

        <div className="team-actions">
          <button className="team-button" disabled={!huntActive}>
            Start Hunt
          </button>
        </div>
      </div>

      <div className="nav-bar">
        <div className="nav-item">
          <div className="nav-icon">🏠</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">📊</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">🏆</div>
        </div>
        <div className="nav-item">
          <div className="nav-icon">👤</div>
        </div>
      </div>
    </div>
  );
}