fixed a bit

app/(main)/admin/page.js

@@ -1,26 +1,99 @@
 'use client'; // Mark as a Client Component
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useSession } from 'next-auth/react';
+import { useRouter } from 'next/navigation';
+import { startHuntTimer, getHuntStatus } from '../actions/auth';
 
 export default function Admin() {
-    const { data: session } = useSession();
-    const [timerStarted, setTimerStarted] = useState(false);
+    const { data: session, status } = useSession();
+    const [timerActive, setTimerActive] = useState(false);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const router = useRouter();
 
-    if (session?.user?.role !== 'admin') {
-        return <p>Access denied</p>;
+    // Load timer status on page load
+    useEffect(() => {
+        async function loadTimerStatus() {
+            try {
+                const status = await getHuntStatus();
+                setTimerActive(status.active);
+            } catch (err) {
+                console.error('Failed to load timer status:', err);
+                setError('Failed to load timer status');
+            } finally {
+                setLoading(false);
+            }
+        }
+
+        if (status === 'authenticated') {
+            loadTimerStatus();
+        }
+    }, [status]);
+
+    // Check if user is admin
+    useEffect(() => {
+        if (status === 'authenticated' && session?.user?.role !== 'admin') {
+            router.push('/');
+        }
+    }, [session, status, router]);
+
+    // Handle access denied and loading states
+    if (status === 'loading' || loading) {
+        return <div className="admin-page loading">Loading...</div>;
     }
 
-    const startTimer = async () => {
-        // Implement timer logic (e.g., update database or state)
-        setTimerStarted(true);
+    if (status === 'unauthenticated') {
+        router.push('/login');
+        return null;
+    }
+
+    if (session?.user?.role !== 'admin') {
+        return null; // Already redirecting via useEffect
+    }
+
+    const toggleTimer = async () => {
+        setLoading(true);
+        try {
+            const newStatus = !timerActive;
+            const result = await startHuntTimer(newStatus);
+
+            if (result.success) {
+                setTimerActive(newStatus);
+            } else {
+                setError('Failed to update timer status');
+            }
+        } catch (err) {
+            console.error('Failed to toggle timer:', err);
+            setError('Failed to toggle timer');
+        } finally {
+            setLoading(false);
+        }
     };
 
     return (
-        <div>
-            <h1>Admin Console</h1>
-            <button onClick={startTimer} disabled={timerStarted}>
-                Start Timer
-            </button>
+        <div className="admin-page">
+            <div className="admin-card">
+                <h1>Admin Controls</h1>
+
+                <div className="timer-section">
+                    <h2>Hunt Timer</h2>
+                    <p>Status: <span className={timerActive ? 'active' : 'inactive'}>
+                        {timerActive ? 'Active' : 'Inactive'}
+                    </span></p>
+
+                    <div className="control-buttons">
+                        <button
+                            onClick={toggleTimer}
+                            className={timerActive ? 'stop-button' : 'start-button'}
+                            disabled={loading}
+                        >
+                            {loading ? 'Updating...' : timerActive ? 'Stop Timer' : 'Start Timer'}
+                        </button>
+                    </div>
+                </div>
+
+                {error && <p className="error">{error}</p>}
+            </div>
         </div>
     );
 }