import { Table, Tag, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import type { UserListItem } from '../../api/users';

interface Props {
  records: UserListItem[];
  loading: boolean;
  total: number;
  page: number;
  size: number;
  onRowClick: (row: UserListItem) => void;
  onPageChange: (page: number, size: number) => void;
}

export default function UsersTable({
  records,
  loading,
  total,
  page,
  size,
  onRowClick,
  onPageChange,
}: Props) {
  const columns: ColumnsType<UserListItem> = [
    {
      title: '序号',
      key: 'index',
      width: 60,
      render: (_: unknown, __: unknown, idx: number) => (page - 1) * size + idx + 1,
    },
    { title: '用户名', dataIndex: 'username', key: 'username', sorter: true },
    { title: '员工名', dataIndex: 'employeeName', key: 'employeeName' },
    { title: '用户号', dataIndex: 'userCode', key: 'userCode', sorter: true },
    { title: '部门', dataIndex: 'departmentName', key: 'departmentName' },
    {
      title: '用户类型',
      dataIndex: 'userType',
      key: 'userType',
      render: (v: string) => (v === 'SUPER_ADMIN' ? '超级管理员' : '普通用户'),
    },
    { title: '语言', dataIndex: 'language', key: 'language' },
    {
      title: '作废',
      dataIndex: 'isDeleted',
      key: 'isDeleted',
      render: (v: boolean) =>
        v ? <Tag color="error">作废</Tag> : <Tag color="success">启用</Tag>,
    },
    { title: '登录日期', dataIndex: 'lastLoginDate', key: 'lastLoginDate', sorter: true },
    { title: '制单人', dataIndex: 'createdBy', key: 'createdBy' },
    { title: '制单日期', dataIndex: 'createdDate', key: 'createdDate', sorter: true },
    {
      title: '操作',
      key: 'action',
      width: 80,
      render: (_: unknown, row: UserListItem) => (
        <Button
          type="link"
          size="small"
          data-testid={`edit-link-${row.userId}`}
          onClick={(e) => {
            e.stopPropagation();
            onRowClick(row);
          }}
        >
          编辑
        </Button>
      ),
    },
  ];

  return (
    <Table<UserListItem>
      rowKey="userId"
      columns={columns}
      dataSource={records}
      loading={loading}
      onRow={(row) => ({
        onClick: () => onRowClick(row),
        onKeyDown: (e: React.KeyboardEvent) => {
          if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onRowClick(row);
          }
        },
        style: { cursor: 'pointer' },
        tabIndex: 0,
        role: 'button',
        'aria-label': `查看用户 ${row.username}`,
        'data-testid': `user-row-${row.userId}`,
      })}
      pagination={{
        current: page,
        pageSize: size,
        total,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100'],
        onChange: onPageChange,
      }}
      data-testid="users-table"
    />
  );
}