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

interface VehicleItem {
    id: number | string;
    citizen_id: string;
    model: string;
    plate: string;
    garage: string | null;
}

interface Props {
    vehicles: { data: VehicleItem[] };
    search: string;
}

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

            <input
                defaultValue={search}
                placeholder="Search by plate, model or citizen ID…"
                onKeyDown={(e) => {
                    if (e.key === 'Enter') {
                        router.get(route('admin.vehicles.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">
                {vehicles.data.map((v) => (
                    <div key={v.id} className="flex items-center justify-between px-5 py-3">
                        <div>
                            <p className="font-medium">{v.model}</p>
                            <p className="text-xs text-gray-500">{v.plate} · owner {v.citizen_id}</p>
                        </div>
                        <button
                            onClick={() => confirm('Delete this vehicle?') && router.delete(route('admin.vehicles.destroy', v.id))}
                            className="text-sm text-red-400 hover:text-red-300"
                        >
                            Delete
                        </button>
                    </div>
                ))}
                {vehicles.data.length === 0 && <p className="px-5 py-4 text-gray-400">No vehicles found.</p>}
            </div>
        </AdminLayout>
    );
}
