import { Head, Link } from '@inertiajs/react';

type ShippingMethod = { id: number; name: string; code: string; provider: string | null; type: string; price: string; free_from: string | null; is_active: boolean };
type Pagination<T> = { data: T[]; links: { url: string | null; label: string; active: boolean }[] };

export default function ShippingMethodsIndex({ shippingMethods }: { shippingMethods: Pagination<ShippingMethod> }) {
    return (
        <>
            <Head title="Shipping Methods" />
            <main className="min-h-screen bg-slate-50 px-4 py-6 text-slate-900 sm:px-6 lg:px-8">
                <div className="mx-auto max-w-5xl">
                    <div className="flex items-end justify-between gap-3 border-b border-slate-200 pb-5">
                        <div><p className="text-sm font-medium text-cyan-700">Admin</p><h1 className="text-2xl font-semibold">Shipping methods</h1></div>
                        <Link href="/admin/shipping-methods/create" className="rounded-md bg-cyan-700 px-4 py-2 text-sm font-semibold text-white">Add method</Link>
                    </div>
                    <div className="mt-5 divide-y divide-slate-200 overflow-hidden rounded-lg border border-slate-200 bg-white">
                        {shippingMethods.data.map((method) => (
                            <div key={method.id} className="grid gap-3 p-4 sm:grid-cols-[1fr_auto] sm:items-center">
                                <div>
                                    <h2 className="font-semibold">{method.name}</h2>
                                    <p className="text-sm text-slate-500">{method.code} · {method.provider ?? 'No provider'} · {method.type.replace('_', ' ')} · {method.price} · {method.is_active ? 'active' : 'inactive'}</p>
                                </div>
                                <Link href={`/admin/shipping-methods/${method.id}/edit`} className="text-sm font-semibold text-cyan-700">Edit</Link>
                            </div>
                        ))}
                    </div>
                    <nav className="mt-5 flex flex-wrap gap-2">{shippingMethods.links.map((link) => <Link key={link.label} href={link.url ?? '#'} className={`rounded-md border px-3 py-2 text-sm ${link.active ? 'border-cyan-700 bg-cyan-700 text-white' : 'border-slate-300 bg-white text-slate-700'} ${link.url ? '' : 'pointer-events-none opacity-50'}`} dangerouslySetInnerHTML={{ __html: link.label }} />)}</nav>
                </div>
            </main>
        </>
    );
}
