'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 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);
                }
            } 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">
                    <Link href="/" className="team-button">
                        Start Hunt
                    </Link>
                </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>
    );
}