import type { ColumnDef } from '@tanstack/react-table';
import { Badge } from '@ui/components/ui/badge';
import { Button } from '@ui/components/ui/button';
import {
    Tooltip,
    TooltipContent,
    TooltipProvider,
    TooltipTrigger,
} from '@ui/components/ui/tooltip';
import { Pencil, Trash2 } from 'lucide-react';
import type { SourceAccount } from '@/types/finance';

interface SourceAccountColumnsProps {
    onEdit: (sourceAccount: SourceAccount) => void;
    onDelete: (sourceAccount: SourceAccount) => void;
}

export const createSourceAccountColumns = ({
    onEdit,
    onDelete,
}: SourceAccountColumnsProps): ColumnDef<SourceAccount>[] => [
        {
            accessorKey: 'name',
            header: 'Nama Akun',
            cell: ({ row }) => (
                <div className="max-w-[320px] truncate font-medium" title={row.getValue('name')}>
                    {row.getValue('name')}
                </div>
            ),
        },
        {
            accessorKey: 'is_active',
            header: 'Status Aktif',
            cell: ({ row }) => {
                const isActive = row.getValue('is_active') as boolean;

                return (
                    <Badge variant={isActive ? 'default' : 'destructive'}>
                        {isActive ? 'Aktif' : 'Nonaktif'}
                    </Badge>
                );
            },
        },
        {
            accessorKey: 'created_at',
            header: 'Dibuat Pada',
            cell: ({ row }) => {
                const date = row.getValue('created_at') as string;

                return <div>{new Date(date).toLocaleDateString('id-ID')}</div>;
            },
        },
        {
            id: 'actions',
            header: 'Aksi',
            size: 60,
            enableSorting: false,
            enableGlobalFilter: false,
            cell: ({ row }) => {
                const sourceAccount = row.original;

                return (
                    <div className="flex items-center gap-1">
                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8"
                                        onClick={() => onEdit(sourceAccount)}
                                    >
                                        <Pencil className="h-4 w-4" />
                                        <span className="sr-only">Edit</span>
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>Edit</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>

                        <TooltipProvider>
                            <Tooltip>
                                <TooltipTrigger asChild>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="h-8 w-8 text-destructive hover:text-destructive hover:bg-destructive/10"
                                        onClick={() => onDelete(sourceAccount)}
                                    >
                                        <Trash2 className="h-4 w-4" />
                                        <span className="sr-only">Hapus</span>
                                    </Button>
                                </TooltipTrigger>
                                <TooltipContent>
                                    <p>Hapus</p>
                                </TooltipContent>
                            </Tooltip>
                        </TooltipProvider>
                    </div>
                );
            },
        },
    ];