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

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

interface Props {
    characters: { data: CharacterSummary[] };
    search: string;
}

export default function Index({ characters, search }: Props) {
    return (
        <AdminLayout>
            <Head title="Player Manager" />
            <h1 className="mb-6 text-2xl font-bold">Player Manager</h1>

            <input
                defaultValue={search}
                placeholder="Search by name, citizen ID or license…"
                onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                        router.get(route('admin.players.index'), { search: (e.target as HTMLInputElement).value });
                    }
                }}
                className="mb-4 w-full max-w-md rounded-md border-gray-700 bg-gray-800 text-white"
            />

            <div className="divide-y divide-white/10 rounded-lg bg-gray-900 ring-1 ring-white/10">
                {characters.data.map((c) => (
                    <Link
                        key={c.citizen_id}
                        href={route('admin.players.show', c.citizen_id)}
                        className="flex items-center justify-between px-5 py-3 hover:bg-gray-800"
                    >
                        <div>
                            <p className="font-medium">{c.name}</p>
                            <p className="text-xs text-gray-500">{c.citizen_id} · {c.job.label}</p>
                        </div>
                        <span className="text-sm text-gray-300">
                            ${c.money.cash ?? 0} / ${c.money.bank ?? 0}
                        </span>
                    </Link>
                ))}
                {characters.data.length === 0 && <p className="px-5 py-4 text-gray-400">No players found.</p>}
            </div>
        </AdminLayout>
    );
}
