frontend/src/components/EmployeeAccountsPanel.tsx

import { useEffect, useState } from 'react';
import {
  Card,
  Table,
  Button,
  Space,
  Input,
  Select,
  Tag,
  Modal,
  Form,
  message,
  Pagination,
} from 'antd';
import {
  UsergroupAddOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  KeyOutlined,
} from '@ant-design/icons';
import { usersApi, authApi } from '@/services/api';
import type { User, UserRole, CreateUserRequest, UpdateUserRequest } from '@/types';

const ROLE_LABEL: Record<UserRole, string> = {
  admin: '管理员',
  technician: '技术员',
  employee: '员工（不可登录后台）',
  user: '普通用户',
};

const ROLE_COLOR: Record<UserRole, string> = {
  admin: 'red',
  technician: 'blue',
  employee: 'green',
  user: 'default',
};

function EmployeeAccountsPanel() {
  const currentUser = authApi.getCurrentUser();

  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);
  const [page, setPage] = useState(1);
  const [limit, setLimit] = useState(10);
  const [total, setTotal] = useState(0);
  const [search, setSearch] = useState('');
  const [roleFilter, setRoleFilter] = useState<UserRole | undefined>();

  const [createVisible, setCreateVisible] = useState(false);
  const [createLoading, setCreateLoading] = useState(false);
  const [createForm] = Form.useForm<CreateUserRequest>();

  const [editingUser, setEditingUser] = useState<User | null>(null);
  const [editLoading, setEditLoading] = useState(false);
  const [editForm] = Form.useForm<UpdateUserRequest>();

  const [resetPasswordUser, setResetPasswordUser] = useState<User | null>(null);
  const [resetLoading, setResetLoading] = useState(false);
  const [resetForm] = Form.useForm<{ newPassword: string }>();

  const loadUsers = async () => {
    setLoading(true);
    try {
      const result = await usersApi.list({
        page,
        limit,
        search: search || undefined,
        role: roleFilter,
      });
      setUsers(result.data || []);
      setTotal(result.pagination?.total || 0);
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '加载员工账号列表失败');
      setUsers([]);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    loadUsers();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [page, limit, search, roleFilter]);

  const handleCreate = async (values: CreateUserRequest) => {
    setCreateLoading(true);
    try {
      await usersApi.create(values);
      message.success('员工账号创建成功');
      setCreateVisible(false);
      createForm.resetFields();
      loadUsers();
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '创建失败');
    } finally {
      setCreateLoading(false);
    }
  };

  const openEdit = (user: User) => {
    setEditingUser(user);
    editForm.setFieldsValue({
      name: user.name,
      email: user.email,
      role: user.role,
    });
  };

  const handleEdit = async (values: UpdateUserRequest) => {
    if (!editingUser) return;
    setEditLoading(true);
    try {
      await usersApi.update(editingUser.id, values);
      message.success('员工账号更新成功');
      setEditingUser(null);
      loadUsers();
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '更新失败');
    } finally {
      setEditLoading(false);
    }
  };

  const handleResetPassword = async (values: { newPassword: string }) => {
    if (!resetPasswordUser) return;
    setResetLoading(true);
    try {
      await usersApi.resetPassword(resetPasswordUser.id, values.newPassword);
      message.success('密码重置成功');
      setResetPasswordUser(null);
      resetForm.resetFields();
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '重置失败');
    } finally {
      setResetLoading(false);
    }
  };

  const handleDelete = (user: User) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除员工账号 "${user.username}" 吗？此操作不可恢复！`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          await usersApi.delete(user.id);
          message.success('删除成功');
          loadUsers();
        } catch (err: any) {
          message.error(err?.response?.data?.message || err.message || '删除失败');
        }
      },
    });
  };

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
      render: (text: string) => <span style={{ fontFamily: 'monospace' }}>{text}</span>,
    },
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
      render: (text?: string) => text || '-',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      width: 100,
      render: (role: UserRole) => <Tag color={ROLE_COLOR[role]}>{ROLE_LABEL[role]}</Tag>,
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      width: 170,
      render: (date: string) => new Date(date).toLocaleString('zh-CN'),
    },
    {
      title: '操作',
      key: 'actions',
      width: 260,
      render: (_: any, record: User) => (
        <Space>
          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(record)}>
            编辑
          </Button>
          <Button
            type="link"
            size="small"
            icon={<KeyOutlined />}
            onClick={() => setResetPasswordUser(record)}
          >
            重置密码
          </Button>
          {record.id !== currentUser?.id && (
            <Button
              type="link"
              size="small"
              danger
              icon={<DeleteOutlined />}
              onClick={() => handleDelete(record)}
            >
              删除
            </Button>
          )}
        </Space>
      ),
    },
  ];

  return (
    <Card
      title={
        <Space>
          <UsergroupAddOutlined />
          <span>员工账号管理</span>
        </Space>
      }
      extra={
        <Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateVisible(true)}>
          新建员工账号
        </Button>
      }
    >
      <Space style={{ marginBottom: 16 }}>
        <Input.Search
          placeholder="搜索用户名/姓名/邮箱"
          allowClear
          style={{ width: 260 }}
          onSearch={(v) => {
            setPage(1);
            setSearch(v);
          }}
          onChange={(e) => {
            if (!e.target.value) {
              setPage(1);
              setSearch('');
            }
          }}
        />
        <Select
          placeholder="角色筛选"
          allowClear
          style={{ width: 140 }}
          value={roleFilter}
          onChange={(v) => {
            setPage(1);
            setRoleFilter(v);
          }}
          options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
            value: k,
            label: ROLE_LABEL[k],
          }))}
        />
      </Space>

      <Table columns={columns} dataSource={users} rowKey="id" loading={loading} pagination={false} />
      <div style={{ marginTop: 16 }}>
        <Pagination
          current={page}
          pageSize={limit}
          total={total}
          onChange={(newPage, newLimit) => {
            setPage(newPage);
            setLimit(newLimit);
          }}
          showSizeChanger
          showTotal={(t) => `共计 ${t} 条记录`}
        />
      </div>

      <Modal
        title="新建员工账号"
        open={createVisible}
        onCancel={() => {
          setCreateVisible(false);
          createForm.resetFields();
        }}
        footer={null}
        width={480}
      >
        <Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ role: 'technician' }}>
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              { required: true, message: '请输入用户名' },
              { min: 3, max: 50, message: '用户名长度 3-50' },
            ]}
          >
            <Input placeholder="登录用用户名" />
          </Form.Item>
          <Form.Item
            name="password"
            label="初始密码"
            rules={[
              { required: true, message: '请输入密码' },
              { min: 6, message: '密码至少 6 位' },
            ]}
          >
            <Input.Password placeholder="至少 6 位" />
          </Form.Item>
          <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
            <Select
              options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
                value: k,
                label: ROLE_LABEL[k],
              }))}
            />
          </Form.Item>
          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => setCreateVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit" loading={createLoading}>
                创建
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={editingUser ? `编辑员工账号：${editingUser.username}` : '编辑员工账号'}
        open={!!editingUser}
        onCancel={() => setEditingUser(null)}
        footer={null}
        width={480}
      >
        <Form form={editForm} layout="vertical" onFinish={handleEdit}>
          <Form.Item name="name" label="姓名">
            <Input />
          </Form.Item>
          <Form.Item name="email" label="邮箱" rules={[{ type: 'email', message: '请输入有效邮箱' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="role" label="角色">
            <Select
              options={(Object.keys(ROLE_LABEL) as UserRole[]).map((k) => ({
                value: k,
                label: ROLE_LABEL[k],
              }))}
            />
          </Form.Item>
          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => setEditingUser(null)}>取消</Button>
              <Button type="primary" htmlType="submit" loading={editLoading}>
                保存
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title={resetPasswordUser ? `重置密码：${resetPasswordUser.username}` : '重置密码'}
        open={!!resetPasswordUser}
        onCancel={() => {
          setResetPasswordUser(null);
          resetForm.resetFields();
        }}
        footer={null}
        width={420}
      >
        <Form form={resetForm} layout="vertical" onFinish={handleResetPassword}>
          <Form.Item
            name="newPassword"
            label="新密码"
            rules={[
              { required: true, message: '请输入新密码' },
              { min: 6, message: '密码至少 6 位' },
            ]}
          >
            <Input.Password placeholder="至少 6 位" />
          </Form.Item>
          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button
                onClick={() => {
                  setResetPasswordUser(null);
                  resetForm.resetFields();
                }}
              >
                取消
              </Button>
              <Button type="primary" htmlType="submit" loading={resetLoading}>
                确认重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </Card>
  );
}

export default EmployeeAccountsPanel;