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 { 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: 'name',
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title='名称' />
        ),
        cell: ({ row }) => <div className='w-[150px] font-medium'>{row.getValue('name')}</div>,
        enableSorting: false,
        enableHiding: false,
    },
    {
        accessorKey: 'status',
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title='状态' />
        ),
        cell: ({ row }) => {
            const status = row.getValue('status') as string;
            const statusMap: Record<string, string> = {
                online: '在线',
                busy: '忙碌',
                offline: '离线',
            };
            return (
                <div className='flex w-[100px] items-center'>
                    <Badge variant={status === 'online' ? 'default' : 'secondary'}>
                        {statusMap[status] || status}
                    </Badge>
                </div>
            );
        },
        filterFn: (row, id, value) => {
            return value.includes(row.getValue(id));
        },
    },
    {
        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>
            );
        },
    },
    {
        accessorKey: 'compatibility',
        header: ({ column }) => (
            <DataTableColumnHeader column={column} title='契合度' />
        ),
        cell: ({ row }) => {
            return (
                <div className='flex items-center'>
                    <span>{row.getValue('compatibility')}%</span>
                </div>
            );
        },
    },
    {
        id: 'actions',
        cell: ({ row }) => <DataTableRowActions row={row} />,
    },
];
