peworkshop/app/(main)/admin/page.js

'use client'; // Mark as a Client Component
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, status } = useSession();
    const [timerActive, setTimerActive] = useState(false);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState('');
    const router = useRouter();

    // 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>;
    }

    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 className="admin-page">
            <div className="page-header">
                <div className="back-button">←</div>
                <div className="page-title">Admin Controls</div>
                <div className="placeholder"></div>
            </div>

            <div className="admin-controls">
                <div className="admin-input-container">
                    <label>Username</label>
                    <input type="text" className="admin-input" />
                </div>

                <div className="admin-input-container">
                    <label>Password</label>
                    <input type="password" className="admin-input" />
                </div>

                <div className="admin-input-container">
                    <label>Email</label>
                    <input type="email" className="admin-input" />
                </div>

                <button
                    onClick={toggleTimer}
                    className={`admin-button ${timerActive ? 'red-button' : 'green-button'}`}
                    disabled={loading}
                >
                    {loading ? 'Updating...' : timerActive ? 'Stop' : 'Start'}
                </button>

                {error && <p className="error-message">{error}</p>}
            </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>
    );
}