import { Avatar, AvatarFallback, AvatarImage } from '@admin/components/ui/avatar';
import { formatAction } from '@admin/lib/format-action';
import { ColumnDef } from '@tanstack/react-table';

export type ActivityLog = {
    id: number;
    user: { id: number; name: string; email: string };
    module: { id: number; name: string };
    action: string;
    description: string;
    ip_address: string;
    properties: Record<string, any>;
    created_at: string | null;
};

export const activityTableColumns = (): ColumnDef<ActivityLog>[] => [
    {
        accessorKey: 'user',
        header: 'User',
        cell: ({ row }) => {            
            const u = row.original?.actor;
            if (!u) return null;
            return (
                <div className="flex items-center gap-3">
                    <Avatar className="h-9 w-9">
                        <AvatarImage src={(u as any).avatar} />
                        <AvatarFallback>{u.name?.charAt(0)}</AvatarFallback>
                    </Avatar>
                    <div className="leading-tight">
                        <div className="text-sm font-semibold sm:text-[15px]">{u.name}</div>
                        <div className="max-w-[180px] text-xs break-all text-muted-foreground sm:max-w-[240px]">{u.email}</div>
                    </div>
                </div>
            );
        },
    },
    {
        accessorKey: 'action',
        header: 'Action',
        cell: ({ row }) => formatAction(row.original.action),
    },
    {
        accessorKey: 'description',
        header: 'Description',
        cell: ({ row }) => {
            const desc = row.original.description ?? '';
            return desc.length > 30 ? desc.slice(0, 30) + '...' : desc;
        },
    },
    {
        accessorKey: 'ip_address',
        header: 'IP Address',
        cell: ({ row }) => row.original.ip_address,
    },
];