import { ColumnDef } from '@tanstack/react-table';
import { Purchase } from '@/types';
import { DataTableColumnHeader } from '@/components/data-table-column-header';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { Button } from '@/components/ui/button';
import { Pencil, Trash2 } from 'lucide-react';
import { Link } from '@inertiajs/react';
import purchaseRoutes from '@/routes/purchase';
import { format } from 'date-fns';
import { id } from 'date-fns/locale';

interface ColumnProps {
    onDelete: (purchase: Purchase) => void;
}

export const getColumns = ({ onDelete }: ColumnProps): ColumnDef<Purchase>[] => [
    {
        accessorKey: "purchase_date",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Tanggal" />
        ),
        cell: ({ row }) => {
            const date = row.original.purchase_date;
            return format(new Date(date), 'dd MMMM yyyy', { locale: id });
        },
        meta: { title: "Tanggal" },
    },
    {
        accessorKey: "note",
        header: "Catatan",
        cell: ({ row }) => (
            <span className="text-muted-foreground text-sm truncate max-w-[200px] block">
                {row.original.note || '-'}
            </span>
        ),
        meta: { title: "Catatan" },
    },
    {
        id: "actions",
        header: "Aksi",
        cell: ({ row }) => {
            const purchase = row.original;
            return (
                <div className="flex items-center gap-2">
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Link href={purchaseRoutes.edit(purchase.id).url}>
                                <Button variant="ghost" size="icon" className='text-yellow-600 hover:text-yellow-700 hover:bg-yellow-50 dark:hover:bg-yellow-950/20'>
                                    <Pencil className="size-4" />
                                </Button>
                            </Link>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>Ubah</p>
                        </TooltipContent>
                    </Tooltip>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button variant="ghost" size="icon" className='text-red-600 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-950/20' onClick={() => onDelete(purchase)}>
                                <Trash2 className="size-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>Hapus</p>
                        </TooltipContent>
                    </Tooltip>
                </div>
            );
        },
        meta: { title: "Aksi" },
    },
];