import { Head } from '@inertiajs/react';
import AdminLayout from '@/Layouts/AdminLayout';

interface Server {
    id: number;
    name: string;
    is_active: boolean;
    online: boolean;
    player_count: number;
    max_players: number;
    resources: string[];
    recorded_at: string | null;
}

export default function Dashboard({ servers }: { servers: Server[] }) {
    return (
        <AdminLayout>
            <Head title="Server Status" />
            <h1 className="mb-6 text-2xl font-bold">Live Server Status</h1>

            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                {servers.map((server) => (
                    <div key={server.id} className="rounded-lg bg-gray-900 p-5 ring-1 ring-white/10">
                        <div className="mb-2 flex items-center justify-between">
                            <p className="font-semibold">{server.name}</p>
                            <span
                                className={`h-2.5 w-2.5 rounded-full ${server.online ? 'bg-emerald-500' : 'bg-red-500'}`}
                                title={server.online ? 'Online' : 'Offline'}
                            />
                        </div>
                        <p className="text-2xl font-bold">
                            {server.player_count}
                            <span className="text-base font-normal text-gray-500"> / {server.max_players}</span>
                        </p>
                        <p className="mt-1 text-xs text-gray-500">
                            {server.recorded_at ? `Updated ${new Date(server.recorded_at).toLocaleTimeString()}` : 'No heartbeat received yet'}
                        </p>
                    </div>
                ))}
                {servers.length === 0 && (
                    <p className="text-gray-400">No FiveM servers registered yet. Issue an API token from Settings.</p>
                )}
            </div>
        </AdminLayout>
    );
}
