import { ColumnDef } from '@tanstack/react-table';
import { Character } from '../data/schema';
import { Badge } from '@/components/ui/badge';
import { Checkbox } from '@/components/ui/checkbox';
import { DataTableColumnHeader } from '@/components/data-table';
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { DataTableRowActions } from './data-table-row-actions';

export const columns: ColumnDef<Character>[] = [
    {
        id: 'select',
        header: ({ table }) => (
            <Checkbox
                checked={
                    table.getIsAllPageRowsSelected() ||
                    (table.getIsSomePageRowsSelected() && 'indeterminate')
                }
                onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
                aria-label='全选'
                className='translate-y-[2px]'
            />
        ),
        cell: ({ row }) => (
            <Checkbox
                checked={row.getIsSelected()}
                onCheckedChange={(value) => row.toggleSelected(!!value)}
                aria-label='选择行'
                className='translate-y-[2px]'
            />
        ),
        enableSorting: false,
        enableHiding: false,
    },
    {
        accessorKey: 'avatar_path',
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title='头像' />
        ),
        cell: ({ row }) => {
            const avatarPath = row.getValue('avatar_path') as string;
            return (
                <Avatar className='h-10 w-10'>
                    <AvatarImage src={avatarPath} alt={row.getValue('name')} />
                    <AvatarFallback>{(row.getValue('name') as string)?.substring(0, 2)}</AvatarFallback>
                </Avatar>
            );
        },
        enableSorting: false,
        enableHiding: false,
    },
    {
        accessorKey: 'name',
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title='名称' />
        ),
        cell: ({ row }) => <div className='w-[150px] font-medium'>{row.getValue('name')}</div>,
        enableSorting: false,
        enableHiding: false,
    },

    {
        accessorKey: 'is_active',
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title='是否启用' />
        ),
        cell: ({ row }) => {
            const isActive = row.getValue('is_active') as boolean;
            return (
                <Badge variant={isActive ? 'outline' : 'destructive'}>
                    {isActive ? '启用' : '禁用'}
                </Badge>
            );
        },
    },

    {
        id: 'actions',
        cell: ({ row }) => <DataTableRowActions row={row} />,
    },
];
