import { ColumnDef } from '@tanstack/react-table';
import { Expense } 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, ImagePlus } from 'lucide-react';

interface ColumnProps {
    onEdit: (expense: Expense) => void;
    onDelete: (expense: Expense) => void;
    onPreviewImage: (url: string) => void;
}

const formatCurrency = (amount: number) => {
    return new Intl.NumberFormat('id-ID', {
        style: 'currency',
        currency: 'IDR',
        minimumFractionDigits: 0,
    }).format(amount);
};

export const getColumns = ({ onEdit, onDelete, onPreviewImage }: ColumnProps): ColumnDef<Expense>[] => [
    {
        accessorKey: "proof_url",
        header: "Bukti",
        cell: ({ row }) => {
            const url = row.original.proof_url;
            return url ? (
                <button onClick={() => onPreviewImage(url)} className="block w-fit">
                    <img src={url} alt="Proof" className="h-10 w-10 object-cover rounded-md border hover:opacity-80 transition-opacity" />
                </button>
            ) : (
                <div className="h-10 w-10 flex items-center justify-center bg-muted rounded-md border">
                    <ImagePlus className="h-4 w-4 text-muted-foreground" />
                </div>
            );
        },
        meta: { title: "Bukti" },
    },
    {
        accessorKey: "user.name",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Pegawai" />
        ),
        cell: ({ row }) => row.original.user?.name,
        meta: { title: "Pegawai" },
    },
    {
        accessorKey: "name",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Nama" />
        ),
        meta: { title: "Nama" },
    },
    {
        accessorKey: "amount",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Nominal" />
        ),
        cell: ({ row }) => formatCurrency(row.original.amount),
        meta: { title: "Nominal" },
    },
    {
        accessorKey: "created_at",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Tanggal" />
        ),
        cell: ({ row }) => new Date(row.original.created_at).toLocaleDateString('id-ID', {
            day: '2-digit',
            month: 'long',
            year: 'numeric'
        }),
        meta: { title: "Tanggal" },
    },
    {
        id: "actions",
        header: "Aksi",
        cell: ({ row }) => {
            const expense = row.original;
            return (
                <div className="flex items-center gap-2">
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button variant="ghost" size="icon" className='text-yellow-600' onClick={() => onEdit(expense)}>
                                <Pencil className="size-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>Ubah</p>
                        </TooltipContent>
                    </Tooltip>
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button variant="ghost" size="icon" className='text-red-600' onClick={() => onDelete(expense)}>
                                <Trash2 className="size-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>Hapus</p>
                        </TooltipContent>
                    </Tooltip>
                </div>
            );
        },
        meta: { title: "Aksi" },
    },
];