import type { ColumnDef } from '@tanstack/react-table';
import { Eye } from 'lucide-react';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';

export type FormHistory = {
    id: number;
    causer_id: number;
    module: string;
    event: string;
    description: string;
    attribute_changes: {
        new?: Record<string, unknown>;
        old?: Record<string, unknown>;
    } | null;
    created_at: string;
    formatted_created_at: string;
    causer: {
        id: number;
        username: string;
        full_name: string;
    };
};

const eventBadgeVariant: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
    created: 'default',
    updated: 'secondary',
    deleted: 'destructive',
};

const eventLabel: Record<string, string> = {
    created: 'Ditambahkan',
    updated: 'Diperbarui',
    deleted: 'Dihapus',
};

type CreateColumnsParams = {
    handleDetail: (item: FormHistory) => void;
};

export function createFormHistoryColumns({ handleDetail }: CreateColumnsParams): ColumnDef<FormHistory>[] {
    return [
        {
            accessorKey: 'formatted_created_at',
            header: () => <span>Waktu</span>,
            cell: ({ row }) => (
                <span className="text-sm text-muted-foreground">
                    {row.original.formatted_created_at}
                </span>
            ),
        },
        {
            accessorKey: 'causer',
            header: () => <span>User</span>,
            cell: ({ row }) => (
                <span className="font-medium">
                    {row.original.causer?.full_name ?? row.original.causer?.username ?? '-'}
                </span>
            ),
        },
        {
            accessorKey: 'module',
            header: () => <span>Module</span>,
            cell: ({ row }) => (
                <span>{row.getValue('module') as string}</span>
            ),
        },
        {
            accessorKey: 'event',
            header: () => <span>Aksi</span>,
            cell: ({ row }) => {
                const event = row.getValue('event') as string;

                return (
                    <Badge variant={eventBadgeVariant[event] ?? 'outline'}>
                        {eventLabel[event] ?? event}
                    </Badge>
                );
            },
        },
        {
            accessorKey: 'description',
            header: () => <span>Deskripsi</span>,
            cell: ({ row }) => (
                <span>{row.getValue('description') as string}</span>
            ),
        },
        {
            id: 'actions',
            header: () => <span className="block text-center">Aksi</span>,
            meta: {
                className: 'w-[80px] text-center',
                headerClassName: 'w-[80px] text-center',
            },
            cell: ({ row }) => (
                <Button
                    variant="ghost"
                    size="icon"
                    onClick={() => handleDetail(row.original)}
                >
                    <Eye className="h-4 w-4" />
                </Button>
            ),
        },
    ];
}