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

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

  const fetchTeamData = useCallback(async () => {
    try {
      if (!teamId || isNaN(parseInt(teamId, 10))) {
        throw new Error("Invalid team ID");
      }

      const response = await fetch(`/api/teams/${teamId}`, {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });

      if (!response.ok) {
        const text = await response.text();
        let errorMessage;
        try {
          const errorData = JSON.parse(text);
          errorMessage = errorData.error || "Failed to fetch team data";
        } catch (unused) {
          errorMessage = `Failed to fetch team data: ${
            response.status
          } ${text.slice(0, 100)}`;
        }
        throw new Error(errorMessage);
      }

      const data = await response.json();
      if (!data.team) {
        throw new Error("Team not found");
      }

      setTeam(data.team);
      setTeamMembers(data.members || []);
      setError("");
    } catch (err) {
      console.error("Team page error:", err);
      setError(err.message);
      // If we get a 401 error, redirect to login
      if (err.message.includes("401")) {
        router.push("/login");
      }
    } finally {
      setLoading(false);
    }
  }, [teamId, router]);

  useEffect(() => {
    if (status === "authenticated" && teamId) {
      fetchTeamData();
      const interval = setInterval(fetchTeamData, 5000); // Refresh every 5 seconds
      return () => clearInterval(interval);
    } else if (status === "unauthenticated") {
      router.push("/login");
    }
  }, [teamId, status, fetchTeamData, router]);

  const handleLeaveTeam = async () => {
    try {
      setLoading(true);
      const response = await fetch(`/api/teams/${teamId}/leave`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || "Failed to leave team");
      }

      // Redirect to team selection after leaving
      router.push("/team-selection");
    } catch (err) {
      console.error("Leave team error:", err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleStartHunt = async () => {
    try {
      if (session?.user?.role !== "admin") {
        setError("Only admins can start a hunt");
        return;
      }

      setLoading(true);
      const response = await fetch(`/api/teams/${teamId}/start-hunt`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "include",
      });

      if (!response.ok) {
        const errorData = await response.json();
        throw new Error(errorData.error || "Failed to start hunt");
      }

      // You could redirect to a hunt page or refresh the current page
      // For now, just refresh the team data
      await fetchTeamData();
    } catch (err) {
      console.error("Start hunt error:", err);
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  const handleAddUser = () => {
    // Navigate to add user page or open a modal
    router.push(`/team/${teamId}/add-user`);
  };

  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">
      <div className="header">
        <Link href="/team-selection" className="back-button">
          ←
        </Link>
        <div className="team-name">{team.name}</div>
        <div className="team-code">{team.code}</div>
        <div className="timer">00:00</div>
      </div>

      <div className="content-container">
        <div className="add-users-button" onClick={handleAddUser}>
          Add Users
        </div>

        <div className="users-container">
          {teamMembers.map((member) => (
            <div key={member.id} className="user-card">
              {member.username} {member.id === session?.user?.id && "(You)"}
            </div>
          ))}

          <div className="add-user-icon" onClick={handleAddUser}>
            <div className="plus-icon">+</div>
          </div>
        </div>
      </div>

      <div className="team-footer">
        <button className="leave-button" onClick={handleLeaveTeam}>
          Leave Team
        </button>
        <button
          className="start-hunt-button"
          disabled={session?.user?.role !== "admin"}
          onClick={handleStartHunt}
        >
          Start Hunt
        </button>
      </div>

      <div className="navbar">
        <Link href="/dashboard" className="nav-item">
          <div className="nav-icon">🏠</div>
        </Link>
        <Link href="/leaderboard" className="nav-item">
          <div className="nav-icon">📊</div>
        </Link>
        <Link href="/achievements" className="nav-item">
          <div className="nav-icon">🏆</div>
        </Link>
        <Link href="/profile" className="nav-item">
          <div className="nav-icon">👤</div>
        </Link>
      </div>

      <style jsx>{`
        .team-page {
          display: flex;
          flex-direction: column;
          height: 100vh;
          overflow: hidden;
          font-family: Arial, sans-serif;
        }

        .header {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          padding: 15px 10px;
          background-color: #c8b6a6;
          color: white;
          font-weight: bold;
          position: relative;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .back-button {
          font-size: 24px;
          color: black;
          text-decoration: none;
          display: flex;
          align-items: center;
        }

        .team-name,
        .team-code {
          text-align: center;
          font-weight: 600;
          color: black;
        }

        .timer {
          text-align: right;
          color: black;
        }

        .content-container {
          flex: 1;
          background-color: #8ecae6;
          display: flex;
          flex-direction: column;
          padding: 10px;
          overflow-y: auto;
        }

        .add-users-button {
          background-color: #e9c46a;
          color: black;
          text-align: center;
          padding: 15px;
          margin: 10px 0;
          border-radius: 15px;
          font-weight: bold;
          box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .users-container {
          flex: 1;
          background-color: #f6bd60;
          border-radius: 10px;
          padding: 10px;
          display: flex;
          flex-direction: column;
          gap: 10px;
          overflow-y: auto;
        }

        .user-card {
          background-color: #c8b6a6;
          color: black;
          padding: 15px;
          border-radius: 8px;
          text-align: center;
          font-weight: bold;
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .add-user-icon {
          display: flex;
          justify-content: center;
          margin-top: 10px;
        }

        .plus-icon {
          width: 30px;
          height: 30px;
          background-color: #c8b6a6;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: black;
        }

        .team-footer {
          display: flex;
          justify-content: space-around;
          padding: 15px 0;
          background-color: #c8b6a6;
        }

        .leave-button,
        .start-hunt-button {
          background-color: #e9c46a;
          color: black;
          padding: 10px 20px;
          border: none;
          border-radius: 5px;
          font-weight: bold;
          cursor: pointer;
        }

        .leave-button:disabled,
        .start-hunt-button:disabled {
          background-color: #ccc;
          cursor: not-allowed;
        }

        .navbar {
          display: flex;
          justify-content: space-around;
          padding: 15px 0;
          background-color: #c8b6a6;
        }

        .nav-icon {
          font-size: 24px;
        }
      `}</style>
    </div>
  );
}