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

interface Application {
    id: number;
    user: { name: string };
    answers: Record<string, string>;
    status: string;
    created_at: string;
}

export default function Index({ applications }: { applications: { data: Application[] } }) {
    return (
        <AdminLayout>
            <Head title="Whitelist" />
            <h1 className="mb-6 text-2xl font-bold">Whitelist Applications</h1>

            <div className="space-y-4">
                {applications.data.map((app) => (
                    <div key={app.id} className="rounded-lg bg-gray-900 p-5 ring-1 ring-white/10">
                        <div className="mb-3 flex items-center justify-between">
                            <p className="font-medium">{app.user.name}</p>
                            <span
                                className={`rounded-full px-3 py-1 text-xs font-medium ${
                                    app.status === 'approved'
                                        ? 'bg-emerald-900/60 text-emerald-300'
                                        : app.status === 'rejected'
                                          ? 'bg-red-900/60 text-red-300'
                                          : 'bg-amber-900/60 text-amber-300'
                                }`}
                            >
                                {app.status}
                            </span>
                        </div>
                        <dl className="mb-3 space-y-1 text-sm text-gray-300">
                            {Object.entries(app.answers).map(([q, a]) => (
                                <div key={q}>
                                    <dt className="text-gray-500">{q}</dt>
                                    <dd>{a}</dd>
                                </div>
                            ))}
                        </dl>
                        {app.status === 'pending' && (
                            <div className="flex gap-2">
                                <button
                                    onClick={() => router.patch(route('admin.whitelist.update', app.id), { status: 'approved' })}
                                    className="rounded-md bg-emerald-700 px-3 py-1.5 text-sm text-white hover:bg-emerald-600"
                                >
                                    Approve
                                </button>
                                <button
                                    onClick={() => router.patch(route('admin.whitelist.update', app.id), { status: 'rejected' })}
                                    className="rounded-md bg-red-700 px-3 py-1.5 text-sm text-white hover:bg-red-600"
                                >
                                    Reject
                                </button>
                            </div>
                        )}
                    </div>
                ))}
                {applications.data.length === 0 && <p className="text-gray-400">No applications submitted.</p>}
            </div>
        </AdminLayout>
    );
}
