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 };
    gang: { label: string } | null;
}

export default function Index({ characters }: { characters: CharacterSummary[] }) {
    return (
        <AppLayout>
            <Head title="Characters" />
            <h1 className="mb-6 text-2xl font-bold">Your characters</h1>

            <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}
                            {c.gang ? ` · ${c.gang.label}` : ''}
                        </p>
                        <p className="mt-2 text-sm text-gray-300">
                            ${c.money.cash ?? 0} cash · ${c.money.bank ?? 0} bank
                        </p>
                    </Link>
                ))}

                {characters.length === 0 && (
                    <p className="text-gray-400">No characters linked yet. Use /linkucp in-game.</p>
                )}
            </div>
        </AppLayout>
    );
}
