import { ColumnDef } from '@tanstack/react-table';
import { Badge } from '@/components/ui/badge';
import { Activity } from '@/types';

export function getColumns(): ColumnDef<Activity>[] {
    return [
        {
            accessorKey: 'date',
            header: 'Waktu',
            cell: ({ row }) => (
                <div className="flex flex-col">
                    <span className="font-medium text-sm">{row.original.date}</span>
                    <span className="text-[10px] text-muted-foreground">{row.original.created_at}</span>
                </div>
            )
        },
        {
            accessorKey: 'description',
            header: 'Aksi',
            cell: ({ row }) => {
                const label = row.original.description;

                if (label === 'TAMBAH') {
                    return (
                        <Badge className="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300 uppercase text-[10px]">
                            {label}
                        </Badge>
                    );
                }

                if (label === 'UBAH') {
                    return (
                        <Badge className="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300 uppercase text-[10px]">
                            {label}
                        </Badge>
                    );
                }

                if (label === 'HAPUS') {
                    return (
                        <Badge className="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300 uppercase text-[10px]">
                            {label}
                        </Badge>
                    );
                }

                return (
                    <Badge variant="outline" className="uppercase text-[10px]">
                        {label}
                    </Badge>
                );
            }
        },
        {
            accessorKey: 'module',
            header: 'Modul',
        },
        {
            accessorKey: 'causer',
            header: 'Oleh',
        },
        {
            accessorKey: 'properties',
            header: 'Detail Perubahan',
            cell: ({ row }) => {
                const attributes = row.original.properties?.attributes;
                const old = row.original.properties?.old;

                if (!attributes) return <span className="text-muted-foreground text-xs italic">-</span>;

                return (
                    <div className="flex flex-col gap-1 py-1 max-w-[400px]">
                        {Object.entries(attributes).map(([key, value]) => {
                            return (
                                <div key={key} className="text-[11px] leading-tight flex flex-wrap items-center gap-1">
                                    <span className="font-semibold text-indigo-600 dark:text-indigo-400">{key}: </span>
                                    {old && old[key] !== undefined && String(old[key]) !== String(value) && (
                                        <span className="text-red-500 line-through opacity-60 italic">
                                            {String(old[key])}
                                        </span>
                                    )}
                                    {old && old[key] !== undefined && String(old[key]) !== String(value) && <span>→</span>}
                                    <span className="text-green-600 dark:text-green-400 font-medium">{String(value)}</span>
                                </div>
                            );
                        })}
                    </div>
                );
            }
        },
    ];
}