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

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

interface Props {
    topCash: CharacterSummary[];
    topBank: CharacterSummary[];
}

export default function Index({ topCash, topBank }: Props) {
    const { data, setData, post, processing, errors, reset } = useForm({
        citizen_id: '',
        account: 'bank',
        delta: '',
    });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('admin.economy.adjust'), { onSuccess: () => reset('delta') });
    };

    return (
        <AdminLayout>
            <Head title="Economy Manager" />
            <h1 className="mb-6 text-2xl font-bold">Economy Manager</h1>

            <form onSubmit={submit} className="mb-8 grid gap-3 rounded-lg bg-gray-900 p-5 ring-1 ring-white/10 sm:grid-cols-4">
                <input
                    placeholder="Citizen ID"
                    value={data.citizen_id}
                    onChange={(e) => setData('citizen_id', e.target.value)}
                    className="rounded-md border-gray-700 bg-gray-800 text-white"
                />
                <select
                    value={data.account}
                    onChange={(e) => setData('account', e.target.value)}
                    className="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 (+/-)"
                    value={data.delta}
                    onChange={(e) => setData('delta', e.target.value)}
                    className="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>
                {Object.values(errors).map((err, i) => (
                    <p key={i} className="sm:col-span-4 text-sm text-red-400">{err}</p>
                ))}
            </form>

            <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">Top cash</h2>
                    {topCash.map((c) => (
                        <div key={c.citizen_id} className="flex justify-between py-1 text-sm">
                            <span>{c.name}</span>
                            <span className="text-brand-400">${(c.money.cash ?? 0).toLocaleString()}</span>
                        </div>
                    ))}
                </div>
                <div className="rounded-lg bg-gray-900 p-5 ring-1 ring-white/10">
                    <h2 className="mb-3 font-semibold">Top bank balances</h2>
                    {topBank.map((c) => (
                        <div key={c.citizen_id} className="flex justify-between py-1 text-sm">
                            <span>{c.name}</span>
                            <span className="text-brand-400">${(c.money.bank ?? 0).toLocaleString()}</span>
                        </div>
                    ))}
                </div>
            </div>
        </AdminLayout>
    );
}
