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';

export interface SystemLog {
    id: number;
    timestamp: string;
    env: string;
    level: string;
    message: string;
}

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

const getLevelColor = (level: string) => {
    switch (level.toUpperCase()) {
        case 'EMERGENCY':
        case 'ALERT':
        case 'CRITICAL':
        case 'ERROR':
            return 'destructive';
        case 'WARNING':
            return 'outline'; // Fallback if no warning variant
        case 'NOTICE':
        case 'INFO':
            return 'secondary';
        case 'DEBUG':
            return 'outline';
        default:
            return 'default';
    }
}

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" },
    },
];