'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';
import { joinTeam } from '../../actions/auth';

export default function TeamSelection() {
    const { data: session, status } = useSession();
    const [teamCode, setTeamCode] = useState('');
    const [error, setError] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const router = useRouter();

    // Use useEffect for navigation instead of doing it in render
    useEffect(() => {
        // Redirect if not authenticated
        if (status === 'unauthenticated') {
            router.push('/login');
        }

        // Redirect if user is admin
        if (status === 'authenticated' && session?.user?.role === 'admin') {
            router.push('/admin');
        }
    }, [status, session, router]);

    const handleJoinTeam = async (e) => {
        e.preventDefault();
        setIsLoading(true);
        setError('');

        try {
            const result = await joinTeam(session.user.id, teamCode);

            if (result.success) {
                router.push(`/team/${result.teamId}`);
            } else {
                setError(result.error || 'Team not found');
            }
        } catch (err) {
            setError('An unexpected error occurred');
            console.error(err);
        } finally {
            setIsLoading(false);
        }
    };

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

    // Don't render anything if redirecting
    if (status === 'unauthenticated' || (status === 'authenticated' && session?.user?.role === 'admin')) {
        return null;
    }

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

            <div className="team-selection-card">
                <h1>Team Selection</h1>
                <form onSubmit={handleJoinTeam}>
                    <div className="form-group">
                        <input
                            type="text"
                            placeholder="Team Code"
                            value={teamCode}
                            onChange={(e) => setTeamCode(e.target.value)}
                            required
                            className="team-input"
                        />
                    </div>
                    <button
                        type="submit"
                        className="team-button"
                        disabled={isLoading}
                    >
                        {isLoading ? 'Joining...' : 'Join Team'}
                    </button>
                </form>
                {error && <p className="error">{error}</p>}
                <div className="team-options">
                    <Link href="/create-team" className="create-team-link">Create a new team</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>
    );
}