fixed a bit

app/(main)/team-selection/page.js

@@ -1,40 +1,81 @@
 'use client'; // Mark as a Client Component
 import { useState } from 'react';
+import { useSession } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
-import { query } from '../../../lib/db';
+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();
 
+    // Redirect if not authenticated
+    if (status === 'unauthenticated') {
+        router.push('/login');
+        return null;
+    }
+
+    // Redirect if user is admin
+    if (status === 'authenticated' && session?.user?.role === 'admin') {
+        router.push('/admin');
+        return null;
+    }
+
     const handleJoinTeam = async (e) => {
         e.preventDefault();
-        const team = await query('SELECT * FROM teams WHERE code = ?', [teamCode]);
-        if (team) {
-            router.push(`/stats/${team.id}`);
-        } else {
-            setError('Team not found');
+        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>;
+    }
+
     return (
-        <div>
-            <h1>Team Selection</h1>
-            <form onSubmit={handleJoinTeam}>
-                <input
-                    type="text"
-                    placeholder="Team Code"
-                    value={teamCode}
-                    onChange={(e) => setTeamCode(e.target.value)}
-                    required
-                />
-                <button type="submit">Join Team</button>
-            </form>
-            {error && <p style={{ color: 'red' }}>{error}</p>}
-            <p>
-                <a href="/create-team">Create a new team</a>
-            </p>
+        <div className="team-selection-container">
+            <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">
+                    <a href="/create-team" className="create-team-link">Create a new team</a>
+                </div>
+            </div>
         </div>
     );
 }