import { DataTableColumnHeader } from '@/components/data-table-column-header';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Tooltip,
    TooltipContent,
    TooltipTrigger,
} from '@/components/ui/tooltip';
import { usePermission } from '@/hooks/use-permission';
import roleRoutes from '@/routes/system/role';
import type { Role } from '@/types';
import { Link } from '@inertiajs/react';
import type { ColumnDef } from '@tanstack/react-table';
import { Pencil, Trash2 } from 'lucide-react';

interface ColumnProps {
    onDelete: (role: Role) => void;
}

export const getColumns = ({ onDelete }: ColumnProps): ColumnDef<Role>[] => [
    {
        accessorKey: 'name',
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Nama" />
        ),
        meta: { title: 'Nama' },
    },
    {
        accessorKey: 'permissions',
        header: 'Izin Akses',
        meta: { title: 'Izin Akses' },
        cell: ({ row }) => {
            const permissions = row.original.permissions || [];

            if (permissions.length === 0) {
                return (
                    <span className="text-xs text-muted-foreground italic">
                        Tidak ada izin akses
                    </span>
                );
            }

            return (
                <div className="flex max-w-md flex-wrap gap-1">
                    {permissions.map((p) => (
                        <Badge
                            key={p.id}
                            variant="secondary"
                            className="px-1 py-0 text-[10px] font-normal"
                        >
                            {p.name}
                        </Badge>
                    ))}
                </div>
            );
        },
    },
    {
        accessorKey: 'guard_name',
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title="Guard" />
        ),
        meta: { title: 'Guard' },
    },
    {
        id: 'actions',
        header: 'Aksi',
        cell: ({ row }) => {
            const role = row.original;
            const { hasPermission } = usePermission();

            return (
                <div className="flex items-center gap-2">
                    {hasPermission('Edit:Role') && (
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Link href={roleRoutes.edit(role.id).url}>
                                    <Button
                                        variant="ghost"
                                        size="icon"
                                        className="text-yellow-600 hover:bg-yellow-50 hover:text-yellow-700 dark:hover:bg-yellow-950/20"
                                    >
                                        <Pencil className="size-4" />
                                    </Button>
                                </Link>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>Ubah</p>
                            </TooltipContent>
                        </Tooltip>
                    )}
                    {hasPermission('Delete:Role') && (
                        <Tooltip>
                            <TooltipTrigger asChild>
                                <Button
                                    variant="ghost"
                                    size="icon"
                                    className="text-red-600 hover:bg-red-50 hover:text-red-700 dark:hover:bg-red-950/20"
                                    onClick={() => onDelete(role)}
                                >
                                    <Trash2 className="size-4" />
                                </Button>
                            </TooltipTrigger>
                            <TooltipContent>
                                <p>Hapus</p>
                            </TooltipContent>
                        </Tooltip>
                    )}
                </div>
            );
        },
        meta: { title: 'Aksi' },
    },
];