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

interface BanItem {
    id: number;
    citizenid: string | null;
    license: string;
    reason: string;
    banned_by: string;
    expires_at: string | null;
    created_at: string;
}

export default function Index({ bans }: { bans: { data: BanItem[] } }) {
    const { data, setData, post, processing, errors, reset } = useForm({
        citizenid: '',
        license: '',
        reason: '',
        expires_at: '',
    });

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

    return (
        <AdminLayout>
            <Head title="Ban Manager" />
            <h1 className="mb-6 text-2xl font-bold">Ban 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-2">
                <input
                    placeholder="License (required)"
                    value={data.license}
                    onChange={(e) => setData('license', e.target.value)}
                    className="rounded-md border-gray-700 bg-gray-800 text-white"
                />
                <input
                    placeholder="Citizen ID (optional)"
                    value={data.citizenid}
                    onChange={(e) => setData('citizenid', e.target.value)}
                    className="rounded-md border-gray-700 bg-gray-800 text-white"
                />
                <input
                    placeholder="Reason"
                    value={data.reason}
                    onChange={(e) => setData('reason', e.target.value)}
                    className="sm:col-span-2 rounded-md border-gray-700 bg-gray-800 text-white"
                />
                <input
                    type="datetime-local"
                    value={data.expires_at}
                    onChange={(e) => setData('expires_at', e.target.value)}
                    className="rounded-md border-gray-700 bg-gray-800 text-white"
                />
                {Object.values(errors).map((err, i) => (
                    <p key={i} className="sm:col-span-2 text-sm text-red-400">{err}</p>
                ))}
                <button
                    disabled={processing}
                    className="rounded-md bg-red-700 px-4 py-2 text-sm font-medium text-white hover:bg-red-600 disabled:opacity-50"
                >
                    Ban
                </button>
            </form>

            <div className="divide-y divide-white/10 rounded-lg bg-gray-900 ring-1 ring-white/10">
                {bans.data.map((ban) => (
                    <div key={ban.id} className="flex items-center justify-between px-5 py-3">
                        <div>
                            <p className="font-medium">{ban.license}{ban.citizenid ? ` (${ban.citizenid})` : ''}</p>
                            <p className="text-xs text-gray-500">{ban.reason} · by {ban.banned_by}</p>
                            <p className="text-xs text-gray-600">
                                {ban.expires_at ? `Expires ${new Date(ban.expires_at).toLocaleString()}` : 'Permanent'}
                            </p>
                        </div>
                        <button
                            onClick={() => confirm('Lift this ban?') && router.delete(route('admin.bans.destroy', ban.id))}
                            className="text-sm text-brand-400 hover:text-brand-300"
                        >
                            Lift ban
                        </button>
                    </div>
                ))}
                {bans.data.length === 0 && <p className="px-5 py-4 text-gray-400">No active bans.</p>}
            </div>
        </AdminLayout>
    );
}
