import { ColumnDef } from '@tanstack/react-table';
import { DataTableColumnHeader } from '@/components/data-table-column-header';
import { Badge } from '@/components/ui/badge';
import { Eye } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { SystemLog } from '@/types';
import { getLevelColor } from '@/lib/log-helpers';

interface ColumnProps {
    onView: (log: SystemLog) => void;
}

export const getColumns = ({ onView }: ColumnProps): ColumnDef<SystemLog>[] => [
    {
        accessorKey: "timestamp",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Waktu" />
        ),
        cell: ({ row }) => <span className="font-mono text-xs text-nowrap">{row.original.timestamp}</span>,
        meta: { title: "Waktu" },
    },
    {
        accessorKey: "level",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Level" />
        ),
        cell: ({ row }) => {
            const level = row.original.level;
            return (
                <Badge variant={getLevelColor(level) as any}>
                    {level}
                </Badge>
            );
        },
        meta: { title: "Level" },
    },
    {
        accessorKey: "message",
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Pesan" />
        ),
        cell: ({ row }) => {
            const message = row.original.message;
            return (
                <div className="max-w-[400px] lg:max-w-[600px] truncate font-sans text-xs" title={message}>
                    {message}
                </div>
            );
        },
        meta: { title: "Pesan" },
    },
    {
        id: "actions",
        header: "Aksi",
        cell: ({ row }) => {
            const log = row.original;
            return (
                <div className="flex items-center gap-2">
                    <Tooltip>
                        <TooltipTrigger asChild>
                            <Button
                                variant="ghost"
                                size="icon"
                                onClick={() => onView(log)}
                            >
                                <Eye className="size-4" />
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <p>Detail</p>
                        </TooltipContent>
                    </Tooltip>
                </div>
            );
        },
        meta: { title: "Aksi" },
    },
];