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

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

interface Props {
    characters: CharacterSummary[];
    donateBalance: number;
}

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

            <div className="mb-8 flex items-center justify-between">
                <h1 className="text-2xl font-bold">Dashboard</h1>
                <div className="rounded-md bg-gray-900 px-4 py-2 text-sm ring-1 ring-white/10">
                    Donate balance: <span className="font-semibold text-brand-400">{donateBalance}</span>
                </div>
            </div>

            <h2 className="mb-3 text-lg font-semibold">Your characters</h2>

            {characters.length === 0 ? (
                <p className="rounded-md bg-gray-900 p-6 text-sm text-gray-400 ring-1 ring-white/10">
                    No characters are linked to your account yet. Use <code>/linkucp</code> in-game to connect your
                    FiveM character to this dashboard.
                </p>
            ) : (
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
                    {characters.map((c) => (
                        <Link
                            key={c.citizen_id}
                            href={route('characters.show', c.citizen_id)}
                            className="rounded-lg bg-gray-900 p-4 ring-1 ring-white/10 hover:ring-brand-500"
                        >
                            <p className="font-semibold">{c.name}</p>
                            <p className="text-sm text-gray-400">{c.job.label}</p>
                            <p className="mt-2 text-sm text-gray-300">
                                ${c.money.cash ?? 0} cash · ${c.money.bank ?? 0} bank
                            </p>
                        </Link>
                    ))}
                </div>
            )}
        </AppLayout>
    );
}
