peworkshop/app/(main)/team/[teamId]/page.js

"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 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 router = useRouter();
  const { teamId } = params;

  useEffect(() => {
    async function fetchTeamData() {
      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", // Important for auth
        });

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

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

        setTeam(data.team);
        setTeamMembers(data.members || []);
      } catch (err) {
        console.error("Team page error:", err);
        setError(err.message);
      } finally {
        setLoading(false);
      }
    }

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

  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="navbar">
        <div className="team-info">
          <div className="team-name">Team Name: {team.name}</div>
          <div className="team-code">Team Join Code: {team.code}</div>
        </div>
      </div>

      <div className="team-members">
        {teamMembers.map((member) => (
          <div
            key={member.id}
            className={`member-card ${
              member.id === session?.user?.id ? "current-user" : ""
            }`}
          >
            {member.username}
          </div>
        ))}
      </div>

      <style jsx>{`
        .team-page-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 20px;
        }
        .navbar {
          position: sticky;
          top: 0;
          width: 100%;
          background-color: #fff;
          border-bottom: 1px solid #ccc;
          padding: 10px 0;
          text-align: center;
          z-index: 1000;
        }
        .team-info {
          display: flex;
          justify-content: space-between;
          width: 100%;
          max-width: 600px;
          padding: 0 20px;
        }
        .team-name {
          font-size: 24px;
          font-weight: bold;
        }
        .team-code {
          font-size: 18px;
          color: #555;
        }
        .team-members {
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          max-width: 600px;
          margin-top: 20px;
        }
        .member-card {
          width: 100%;
          padding: 10px;
          margin: 5px 0;
          border: 1px solid #ccc;
          border-radius: 4px;
          background-color: #f9f9f9;
          text-align: center;
        }
        .member-card.current-user {
          background-color: #d3d3d3;
        }
      `}</style>
    </div>
  );
}