import { renderComponent } from '$lib/components/ui/data-table';
import type { ColumnDef } from '@tanstack/table-core';
import type { AdminUser } from '$lib/core/admin/adminTypes';
import DataTableRoleBadge from './data-table-role-badge.svelte';
import DataTableActions from './data-table-actions.svelte';
import DataTableAvatar from './data-table-avatar.svelte';

export const columns: ColumnDef<AdminUser>[] = [
	{
		id: 'avatar',
		header: '',
		cell: ({ row }) => {
			return renderComponent(DataTableAvatar, {
				photoURL: row.original.photoURL,
				displayName: row.original.displayName
			});
		},
		enableGlobalFilter: false
	},
	{
		accessorKey: 'displayName',
		header: 'Name',
		enableGlobalFilter: true,
		filterFn: 'includesString'
	},
	{
		accessorKey: 'email',
		header: 'Email',
		enableGlobalFilter: true,
		filterFn: 'includesString'
	},
	{
		accessorKey: 'role',
		header: 'Role',
		cell: ({ row }) => {
			return renderComponent(DataTableRoleBadge, { role: row.original.role });
		},
		enableGlobalFilter: true,
		filterFn: 'includesString'
	},
	{
		id: 'permissionCount',
		header: 'Permissions',
		cell: ({ row }) => {
			const count = row.original.permissions?.length || 0;
			return `${count} permissions`;
		},
		enableGlobalFilter: false
	},
	{
		id: 'actions',
		header: '',
		cell: ({ row }) => {
			return renderComponent(DataTableActions, { user: row.original });
		}
	}
];