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

interface CharacterSummary {
    citizen_id: string;
    name: string;
    job: { label: string };
    gang: { label: string } | null;
}

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

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

            <input
                defaultValue={search}
                placeholder="Search characters…"
                onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                        router.get(route('admin.characters.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"
            />

            <table className="w-full overflow-hidden rounded-lg bg-gray-900 text-sm ring-1 ring-white/10">
                <thead className="bg-gray-800 text-left text-gray-400">
                    <tr>
                        <th className="px-4 py-2">Name</th>
                        <th className="px-4 py-2">Citizen ID</th>
                        <th className="px-4 py-2">Job</th>
                        <th className="px-4 py-2">Gang</th>
                    </tr>
                </thead>
                <tbody className="divide-y divide-white/10">
                    {characters.data.map((c) => (
                        <tr key={c.citizen_id}>
                            <td className="px-4 py-2">{c.name}</td>
                            <td className="px-4 py-2 text-gray-400">{c.citizen_id}</td>
                            <td className="px-4 py-2">{c.job.label}</td>
                            <td className="px-4 py-2">{c.gang?.label ?? '—'}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </AdminLayout>
    );
}
