import { PlusOutlined } from '@ant-design/icons';
import { ActionType, ProColumns, ProTable, ModalForm, ProFormText, ProFormSelect } from '@ant-design/pro-components';
import { Button, message, Popconfirm, Switch } from 'antd';
import { useRef, useState } from 'react';
import { listUsers, createUser, updateUser, deleteUser, updateUserStatus, listRoles } from '@/services/api';

const UsersPage: React.FC = () => {
  const actionRef = useRef<ActionType>();
  const [createOpen, setCreateOpen] = useState(false);
  const [editOpen, setEditOpen] = useState(false);
  const [currentRow, setCurrentRow] = useState<any>(null);
  const [roles, setRoles] = useState<any[]>([]);

  const fetchRoles = async () => {
    const res = await listRoles({ page: 1, pageSize: 100 });
    if (res?.code === 0) {
      setRoles(res.data?.list?.map((r: any) => ({ label: r.roleName, value: r.roleId })) || []);
    }
  };

  const columns: ProColumns[] = [
    { title: '用户名', dataIndex: 'username' },
    { title: '真实姓名', dataIndex: 'realName' },
    { title: '手机号', dataIndex: 'phone', search: false },
    { title: '邮箱', dataIndex: 'email', search: false },
    { title: '角色', dataIndex: 'roleName', search: false },
    {
      title: '状态', dataIndex: 'status', search: false,
      render: (_, record) => (
        <Switch
          checked={record.status === 1}
          onChange={async (checked) => {
            const res = await updateUserStatus(record.userId, checked ? 1 : 0);
            if (res?.code === 0) { message.success('状态更新成功'); actionRef.current?.reload(); }
          }}
        />
      ),
    },
    { title: '最后登录', dataIndex: 'lastLoginTime', valueType: 'dateTime', search: false },
    {
      title: '操作', valueType: 'option',
      render: (_, record) => [
        <a key="edit" onClick={() => { setCurrentRow(record); setEditOpen(true); fetchRoles(); }}>编辑</a>,
        <Popconfirm key="del" title="确认删除？" onConfirm={async () => {
          const res = await deleteUser(record.userId);
          if (res?.code === 0) { message.success('删除成功'); actionRef.current?.reload(); }
        }}>
          <a style={{ color: '#ff4d4f' }}>删除</a>
        </Popconfirm>,
      ],
    },
  ];

  return (
    <>
      <ProTable
        headerTitle="用户管理"
        actionRef={actionRef}
        rowKey="userId"
        columns={columns}
        request={async (params) => {
          const res = await listUsers({ page: params.current, pageSize: params.pageSize, username: params.username, realName: params.realName });
          return { data: res?.data?.list || [], total: res?.data?.total || 0, success: res?.code === 0 };
        }}
        toolBarRender={() => [
          <Button key="add" type="primary" icon={<PlusOutlined />} onClick={() => { setCreateOpen(true); fetchRoles(); }}>
            新增用户
          </Button>,
        ]}
      />

      <ModalForm
        title="新增用户"
        open={createOpen}
        onOpenChange={setCreateOpen}
        onFinish={async (values) => {
          const res = await createUser(values);
          if (res?.code === 0) {
            message.success('创建成功');
            actionRef.current?.reload();
            return true;
          }
          message.error(res?.msg || '创建失败');
          return false;
        }}
      >
        <ProFormText name="username" label="用户名" rules={[{ required: true }]} />
        <ProFormText.Password name="password" label="密码" rules={[{ required: true, min: 6, message: '密码至少6位' }]} />
        <ProFormText name="realName" label="真实姓名" rules={[{ required: true }]} />
        <ProFormText name="phone" label="手机号" />
        <ProFormText name="email" label="邮箱" />
        <ProFormSelect name="roleId" label="角色" options={roles} rules={[{ required: true }]} />
      </ModalForm>

      <ModalForm
        title="编辑用户"
        open={editOpen}
        onOpenChange={setEditOpen}
        initialValues={currentRow}
        onFinish={async (values) => {
          const res = await updateUser(currentRow.userId, values);
          if (res?.code === 0) {
            message.success('更新成功');
            actionRef.current?.reload();
            return true;
          }
          message.error(res?.msg || '更新失败');
          return false;
        }}
      >
        <ProFormText name="realName" label="真实姓名" />
        <ProFormText name="phone" label="手机号" />
        <ProFormText name="email" label="邮箱" />
        <ProFormSelect name="roleId" label="角色" options={roles} />
      </ModalForm>
    </>
  );
};

export default UsersPage;