import { Head, Link, router } from '@inertiajs/react';
import { Plus, Trash2 } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import AdminLayout from '@/layouts/admin-layout';
import { type Courier } from '@/types';

export default function AdminCouriersIndex({ couriers }: { couriers: Courier[] }) {
    const destroy = (id: number) => {
        if (!confirm('Delete this courier?')) { return; }
        router.delete(`/admin/couriers/${id}`);
    };

    return (
        <AdminLayout title="Couriers">
            <Head title="Couriers" />
            <div className="mb-4 flex items-center justify-between">
                <span className="text-sm text-slate-500">{couriers.length} courier{couriers.length !== 1 ? 's' : ''}</span>
                <Button asChild className="bg-indigo-600 hover:bg-indigo-700">
                    <Link href="/admin/couriers/create"><Plus size={15} className="mr-1" />New Courier</Link>
                </Button>
            </div>

            <Card>
                <CardHeader><CardTitle className="text-base">All Couriers</CardTitle></CardHeader>
                <CardContent className="p-0">
                    <table className="w-full text-sm">
                        <thead className="border-b bg-slate-50 text-xs uppercase text-slate-500">
                            <tr>
                                <th className="px-4 py-3 text-left">Name</th>
                                <th className="px-4 py-3 text-left">Slug</th>
                                <th className="px-4 py-3 text-left">Base URL</th>
                                <th className="px-4 py-3 text-center">Status</th>
                                <th className="px-4 py-3 text-right">Actions</th>
                            </tr>
                        </thead>
                        <tbody className="divide-y">
                            {couriers.map((courier) => (
                                <tr key={courier.id} className="hover:bg-slate-50">
                                    <td className="px-4 py-3 font-medium text-slate-800">{courier.name}</td>
                                    <td className="px-4 py-3 font-mono text-xs text-slate-500">{courier.slug}</td>
                                    <td className="px-4 py-3 text-slate-500 text-xs truncate max-w-[180px]">{courier.base_url ?? '—'}</td>
                                    <td className="px-4 py-3 text-center">
                                        <span className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${courier.status ? 'bg-green-100 text-green-700' : 'bg-slate-100 text-slate-500'}`}>
                                            {courier.status ? 'Active' : 'Inactive'}
                                        </span>
                                    </td>
                                    <td className="px-4 py-3 text-right">
                                        <div className="flex items-center justify-end gap-2">
                                            <Link href={`/admin/couriers/${courier.id}/edit`} className="text-xs text-indigo-600 hover:underline">Edit</Link>
                                            <button onClick={() => destroy(courier.id)} className="text-red-400 hover:text-red-600 transition"><Trash2 size={14} /></button>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                            {!couriers.length && (
                                <tr><td colSpan={5} className="px-4 py-8 text-center text-slate-400">No couriers configured yet.</td></tr>
                            )}
                        </tbody>
                    </table>
                </CardContent>
            </Card>
        </AdminLayout>
    );
}
