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

interface Character {
    citizen_id: string;
    license: string;
    name: string;
    money: Record<string, number>;
    job: { label: string };
    gang: { label: string } | null;
}

interface Props {
    character: Character;
    vehicles: { id: number | string; model: string; plate: string }[];
    houses: { id: number | string; label: string }[];
}

export default function Show({ character, vehicles, houses }: Props) {
    const { data, setData, patch, processing, reset } = useForm({ account: 'cash', delta: '' });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        patch(route('admin.players.update', character.citizen_id), { onSuccess: () => reset('delta') });
    };

    return (
        <AdminLayout>
            <Head title={character.name} />
            <h1 className="mb-1 text-2xl font-bold">{character.name}</h1>
            <p className="mb-6 text-sm text-gray-500">{character.citizen_id} · {character.license}</p>

            <div className="grid gap-6 lg:grid-cols-2">
                <div className="rounded-lg bg-gray-900 p-5 ring-1 ring-white/10">
                    <h2 className="mb-3 font-semibold">Overview</h2>
                    <p className="text-sm text-gray-300">Job: {character.job.label}</p>
                    <p className="text-sm text-gray-300">Gang: {character.gang?.label ?? 'None'}</p>
                    <p className="text-sm text-gray-300">Cash: ${character.money.cash ?? 0}</p>
                    <p className="text-sm text-gray-300">Bank: ${character.money.bank ?? 0}</p>

                    <h3 className="mb-2 mt-4 text-sm font-semibold text-gray-400">Vehicles</h3>
                    {vehicles.map((v) => (
                        <p key={v.id} className="text-sm text-gray-300">{v.model} ({v.plate})</p>
                    ))}

                    <h3 className="mb-2 mt-4 text-sm font-semibold text-gray-400">Houses</h3>
                    {houses.map((h) => (
                        <p key={h.id} className="text-sm text-gray-300">{h.label}</p>
                    ))}
                </div>

                <form onSubmit={submit} className="space-y-3 rounded-lg bg-gray-900 p-5 ring-1 ring-white/10">
                    <h2 className="font-semibold">Adjust balance</h2>
                    <select
                        value={data.account}
                        onChange={(e) => setData('account', e.target.value)}
                        className="w-full rounded-md border-gray-700 bg-gray-800 text-white"
                    >
                        <option value="cash">Cash</option>
                        <option value="bank">Bank</option>
                        <option value="crypto">Crypto</option>
                    </select>
                    <input
                        type="number"
                        placeholder="Amount (negative to remove)"
                        value={data.delta}
                        onChange={(e) => setData('delta', e.target.value)}
                        className="w-full rounded-md border-gray-700 bg-gray-800 text-white"
                    />
                    <button
                        disabled={processing}
                        className="rounded-md bg-brand-600 px-4 py-2 text-sm font-medium text-white hover:bg-brand-700 disabled:opacity-50"
                    >
                        Apply
                    </button>
                </form>
            </div>
        </AdminLayout>
    );
}
