import { Avatar, Button, Space, Tag } from 'antd';
import type { ProColumns } from '@ant-design/pro-components';
import type { EmployeeStatus, EmployeeVO, SelectOption } from './types';

export const employeeStatusMeta: Record<EmployeeStatus, { text: string; color: string }> = {
  ACTIVE: { text: '启用', color: 'green' },
  DISABLED: { text: '禁用', color: 'default' },
};

/** 兼容后端返回未知或小写状态，避免直接索引得到 undefined。 */
export const getEmployeeStatusMeta = (status?: string) => {
  const key = String(status ?? '').toUpperCase() as EmployeeStatus;
  return employeeStatusMeta[key] ?? { text: status || '-', color: 'default' };
};

export const createUserColumns = (options: {
  orgOptions: SelectOption[];
  roleOptions: SelectOption[];
  orgNameMap: Map<number, string>;
  roleNameMap: Map<number, string>;
  onDetail: (record: EmployeeVO) => void;
  onEdit: (record: EmployeeVO) => void;
  onDelete: (record: EmployeeVO) => void;
}): ProColumns<EmployeeVO>[] => [
  {
    title: '员工',
    dataIndex: 'name',
    width: 220,
    ellipsis: true,
    fieldProps: { placeholder: '姓名 / 手机号' },
    search: {
      transform: (value) => ({ keyword: value }),
    },
    render: (_value, record) => (
      <div className="user-cell">
        <Avatar className="user-cell__avatar" src={record.avatarUrl} size={36}>
          {record.name?.charAt(0)}
        </Avatar>
        <div className="user-cell__meta">
          <span className="user-cell__name">{record.name}</span>
          <span className="user-cell__username">{record.phone}</span>
        </div>
      </div>
    ),
  },
  {
    title: '所属组织',
    dataIndex: 'orgId',
    width: 170,
    valueType: 'select',
    fieldProps: {
      options: options.orgOptions,
      showSearch: true,
      optionFilterProp: 'label',
      allowClear: true,
      placeholder: '请选择组织',
    },
    render: (_value, record) =>
      options.orgNameMap.get(record.orgId) ?? (record.orgId ? `#${record.orgId}` : '-'),
  },
  {
    title: '角色',
    dataIndex: 'roleId',
    width: 150,
    valueType: 'select',
    fieldProps: {
      options: options.roleOptions,
      showSearch: true,
      optionFilterProp: 'label',
      allowClear: true,
      placeholder: '请选择角色',
    },
    render: (_value, record) =>
      options.roleNameMap.get(record.roleId) ?? (record.roleId ? `#${record.roleId}` : '-'),
  },
  {
    title: '职位',
    dataIndex: 'position',
    width: 120,
    search: false,
    render: (_value, record) => record.position || '-',
  },
  {
    title: '负责区域',
    dataIndex: 'region',
    width: 120,
    search: false,
    render: (_value, record) => record.region || '-',
  },
  {
    title: '客户上限',
    dataIndex: 'holdLimit',
    width: 100,
    search: false,
    render: (_value, record) => record.holdLimit ?? '-',
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
    valueType: 'select',
    valueEnum: {
      ACTIVE: { text: '启用' },
      DISABLED: { text: '禁用' },
    },
    render: (_value, record) => {
      const meta = getEmployeeStatusMeta(record.status);
      return (
        <Tag color={meta.color} bordered={false}>
          {meta.text}
        </Tag>
      );
    },
  },
  {
    title: '入职日期',
    dataIndex: 'hireDate',
    width: 130,
    search: false,
    render: (_value, record) => record.hireDate || '-',
  },
  {
    title: '操作',
    key: 'action',
    valueType: 'option',
    width: 180,
    render: (_value, record) => (
      <Space size={0}>
        <Button type="link" size="small" onClick={() => options.onDetail(record)}>
          详情
        </Button>
        <Button type="link" size="small" onClick={() => options.onEdit(record)}>
          编辑
        </Button>
        <Button type="link" size="small" danger onClick={() => options.onDelete(record)}>
          删除
        </Button>
      </Space>
    ),
  },
];