import type { ReactNode } from 'react';
import { router } from '@inertiajs/react';
import { Inbox } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';

export function TableShell({ children, className = '' }: { children: ReactNode; className?: string }) {
    return <div className={`overflow-hidden rounded-xl border bg-card shadow-sm ${className}`}><div className="overflow-x-auto">{children}</div></div>;
}

export function EmptyState({ title = 'Belum ada data', description = 'Data yang sesuai belum tersedia.' }: { title?: string; description?: string }) {
    return <div className="flex flex-col items-center justify-center gap-2 px-6 py-14 text-center"><div className="rounded-full bg-muted p-3"><Inbox className="size-5 text-muted-foreground" /></div><div className="font-medium">{title}</div><div className="max-w-md text-sm text-muted-foreground">{description}</div></div>;
}

export function Pagination({ links = [] }: { links?: Array<{ url: string | null; label: string; active: boolean }> }) {
    if (!links.length) return null;
    return <div className="flex flex-wrap items-center justify-between gap-3 border-t bg-muted/20 px-4 py-3"><p className="text-xs text-muted-foreground">Navigasi halaman</p><div className="flex flex-wrap gap-1">{links.map((link, i) => <Button key={`${link.label}-${i}`} type="button" size="sm" variant={link.active ? 'default' : 'outline'} disabled={!link.url} onClick={() => link.url && router.get(link.url, {}, { preserveState: true, preserveScroll: true })} dangerouslySetInnerHTML={{ __html: link.label }} />)}</div></div>;
}

const labels: Record<string, string> = { active: 'Aktif', inactive: 'Tidak Aktif', draft: 'Draft', submitted: 'Diajukan', approved: 'Disetujui', rejected: 'Ditolak', shipped: 'Dikirim', lunas: 'Lunas', cancelled: 'Dibatalkan', unpaid: 'Belum Bayar', partial: 'Sebagian', paid: 'Lunas', overdue: 'Jatuh Tempo', void: 'Void', planned: 'Terjadwal', done: 'Selesai', skipped: 'Dilewati', in_progress: 'Berlangsung', pending: 'Menunggu', assigned: 'Ditugaskan', picked_up: 'Diambil', in_transit: 'Dalam Pengiriman', delivered: 'Terkirim', failed: 'Gagal Kirim' };
export function StatusBadge({ status }: { status?: string | null }) {
    const value = status || '-';
    const variant = ['active', 'approved', 'paid', 'lunas', 'done'].includes(value) ? 'default' : ['rejected', 'cancelled', 'overdue', 'failed'].includes(value) ? 'destructive' : 'secondary';
    return <Badge variant={variant as any}>{labels[value] || value.replaceAll('_', ' ')}</Badge>;
}