import { Head, router } from '@inertiajs/react';
import AppLayout from '@/Layouts/AppLayout';

interface CharacterSummary {
    citizen_id: string;
    name: string;
    money: Record<string, number>;
    job: { label: string };
}

interface Props {
    account: string;
    characters: CharacterSummary[];
}

export default function Leaderboard({ account, characters }: Props) {
    return (
        <AppLayout>
            <Head title="Leaderboard" />

            <div className="mb-6 flex items-center justify-between">
                <h1 className="text-2xl font-bold">Leaderboard</h1>
                <select
                    value={account}
                    onChange={(e) => router.get(route('leaderboard.index'), { account: e.target.value })}
                    className="rounded-md border-gray-700 bg-gray-800 text-sm text-white"
                >
                    <option value="bank">Bank balance</option>
                    <option value="cash">Cash</option>
                </select>
            </div>

            <div className="divide-y divide-white/10 rounded-lg bg-gray-900 ring-1 ring-white/10">
                {characters.map((c, i) => (
                    <div key={c.citizen_id} className="flex items-center justify-between px-5 py-3">
                        <div className="flex items-center gap-3">
                            <span className="w-6 text-right font-mono text-gray-500">#{i + 1}</span>
                            <div>
                                <p className="font-medium">{c.name}</p>
                                <p className="text-xs text-gray-500">{c.job.label}</p>
                            </div>
                        </div>
                        <span className="font-semibold text-brand-400">${(c.money[account] ?? 0).toLocaleString()}</span>
                    </div>
                ))}
            </div>
        </AppLayout>
    );
}
