frontend/src/pages/EmployeeSerials.tsx

import { useEffect, useMemo, useState } from 'react';
import QRCode from 'qrcode';
import {
  Card,
  Table,
  Button,
  Space,
  Input,
  Select,
  Tag,
  Modal,
  Form,
  message,
  Pagination,
} from 'antd';
import {
  UserOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  QrcodeOutlined,
  KeyOutlined,
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { authApi, employeesApi } from '@/services/api';
import type { User, UserRole, CreateUserRequest, UpdateUserRequest, EmployeeSerial } from '@/types';

const ROLE_LABEL: Record<UserRole, string> = {
  admin: '管理员',
  technician: '技术员',
  employee: '员工',
};

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

const BACKEND_ROLES: UserRole[] = ['admin', 'technician'];
const ROLE_OPTIONS = (Object.keys(ROLE_LABEL) as UserRole[]).map((value) => ({
  value,
  label: ROLE_LABEL[value],
}));

const canLoginBackend = (role?: UserRole) => !!role && BACKEND_ROLES.includes(role);

const getDisplaySerial = (serials?: EmployeeSerial[]) => serials?.find((serial) => serial.isActive) || serials?.[0];

function EmployeeSerialsPage() {
  const navigate = useNavigate();
  const currentUser = authApi.getCurrentUser();
  const isAdmin = currentUser?.role === 'admin';

  const [employees, setEmployees] = 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 createRole = Form.useWatch('role', createForm);

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

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

  const [qrCodeVisible, setQrCodeVisible] = useState(false);
  const [qrCodeDataUrl, setQrCodeDataUrl] = useState('');
  const [selectedSerial, setSelectedSerial] = useState('');

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

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

  const openCreate = () => {
    createForm.resetFields();
    createForm.setFieldsValue({ role: 'employee' });
    setCreateVisible(true);
  };

  const handleCreate = async (values: CreateUserRequest) => {
    const payload = { ...values, username: values.employeeNo };
    if (!canLoginBackend(values.role)) {
      delete payload.password;
    }

    setCreateLoading(true);
    try {
      await employeesApi.create(payload);
      message.success('员工创建成功，员工码已自动生成');
      setCreateVisible(false);
      createForm.resetFields();
      loadEmployees();
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '创建失败');
    } finally {
      setCreateLoading(false);
    }
  };

  const openEdit = (employee: User) => {
    setEditingEmployee(employee);
    editForm.setFieldsValue({
      name: employee.name,
      email: employee.email,
      phone: employee.phone,
      employeeNo: employee.employeeNo,
      position: employee.position,
      role: employee.role,
    });
  };

  const handleEdit = async (values: UpdateUserRequest) => {
    if (!editingEmployee) return;
    setEditLoading(true);
    try {
      await employeesApi.update(editingEmployee.id, values);
      message.success('员工资料更新成功');
      setEditingEmployee(null);
      loadEmployees();
    } catch (err: any) {
      message.error(err?.response?.data?.message || err.message || '更新失败');
    } finally {
      setEditLoading(false);
    }
  };

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

  const handleDelete = (employee: User) => {
    Modal.confirm({
      title: '确认删除',
      content: `确定要删除员工 "${employee.name}" 吗？`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          await employeesApi.delete(employee.id);
          message.success('删除成功');
          loadEmployees();
        } catch (err: any) {
          message.error(err?.response?.data?.message || err.message || '删除失败');
        }
      },
    });
  };

  const handleViewQRCode = async (serialNumber: string) => {
    try {
      const queryUrl = `${window.location.origin}/query?serial=${serialNumber}`;
      const qrCode = await QRCode.toDataURL(queryUrl);
      setQrCodeDataUrl(qrCode);
      setSelectedSerial(serialNumber);
      setQrCodeVisible(true);
    } catch (err: any) {
      message.error(err?.message || '生成二维码失败');
    }
  };

  const handleQuerySerial = (serialNumber: string) => {
    setQrCodeVisible(false);
    navigate(`/query?serial=${serialNumber}`);
  };

  const columns = useMemo(
    () => [
      { title: '姓名', dataIndex: 'name', key: 'name', width: 120 },
      { title: '电话', dataIndex: 'phone', key: 'phone', width: 140, render: (v?: string) => v || '-' },
      { title: '工号', dataIndex: 'employeeNo', key: 'employeeNo', width: 130, render: (v?: string) => v || '-' },
      { title: '岗位', dataIndex: 'position', key: 'position', width: 140, render: (v?: string) => v || '-' },
      {
        title: '角色',
        dataIndex: 'role',
        key: 'role',
        width: 110,
        render: (role: UserRole) => <Tag color={ROLE_COLOR[role]}>{ROLE_LABEL[role]}</Tag>,
      },
      {
        title: '员工码',
        dataIndex: 'employeeSerials',
        key: 'employeeSerials',
        width: 180,
        render: (serials?: EmployeeSerial[]) => {
          const serial = getDisplaySerial(serials);
          if (!serial) return '-';

          return (
            <Space direction="vertical" size={0}>
              <span style={{ fontFamily: 'monospace' }}>{serial.serialNumber}</span>
              <Tag color={serial.isActive ? 'green' : 'red'}>
                {serial.isActive ? '有效' : '已吊销'}
              </Tag>
            </Space>
          );
        },
      },
      {
        title: '创建时间',
        dataIndex: 'createdAt',
        key: 'createdAt',
        width: 170,
        render: (v: string) => new Date(v).toLocaleString('zh-CN'),
      },
      {
        title: '操作',
        key: 'actions',
        width: 320,
        render: (_: unknown, record: User) => {
          const serial = getDisplaySerial(record.employeeSerials);

          return (
            <Space wrap>
              {serial && (
                <Button
                  type="link"
                  size="small"
                  icon={<QrcodeOutlined />}
                  onClick={() => handleViewQRCode(serial.serialNumber)}
                >
                  查看二维码
                </Button>
              )}
              <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEdit(record)}>
                编辑
              </Button>
              {canLoginBackend(record.role) && (
                <Button type="link" size="small" icon={<KeyOutlined />} onClick={() => setResetPasswordEmployee(record)}>
                  重置密码
                </Button>
              )}
              {record.id !== currentUser?.id && (
                <Button type="link" size="small" danger icon={<DeleteOutlined />} onClick={() => handleDelete(record)}>
                  删除
                </Button>
              )}
            </Space>
          );
        },
      },
    ],
    [currentUser?.id]
  );

  return (
    <div>
      <Card
        title={
          <Space>
            <UserOutlined />
            <span>权限管理</span>
          </Space>
        }
        extra={
          isAdmin && (
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreate}>
              新建员工
            </Button>
          )
        }
      >
        <Space style={{ marginBottom: 16 }}>
          <Input.Search
            placeholder="搜索姓名/电话/工号/岗位"
            allowClear
            style={{ width: 300 }}
            onSearch={(v) => {
              setPage(1);
              setSearch(v);
            }}
            onChange={(e) => {
              if (!e.target.value) {
                setPage(1);
                setSearch('');
              }
            }}
          />
          <Select
            placeholder="角色筛选"
            allowClear
            style={{ width: 160 }}
            value={roleFilter}
            onChange={(v) => {
              setPage(1);
              setRoleFilter(v);
            }}
            options={ROLE_OPTIONS}
          />
        </Space>

        <Table columns={columns} dataSource={employees} 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>
      </Card>

      <Modal
        title="新建员工"
        open={createVisible}
        onCancel={() => setCreateVisible(false)}
        footer={null}
        width={520}
      >
        <Form form={createForm} layout="vertical" onFinish={handleCreate} initialValues={{ role: 'employee' }}>
          <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="phone" label="电话" rules={[{ required: true, message: '请输入电话' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="employeeNo" label="工号" rules={[{ required: true, message: '请输入工号' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="position" label="岗位" rules={[{ required: true, message: '请输入岗位' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="role" label="角色" rules={[{ required: true, message: '请选择角色' }]}>
            <Select
              options={ROLE_OPTIONS}
              onChange={(role: UserRole) => {
                if (!canLoginBackend(role)) {
                  createForm.setFieldValue('password', undefined);
                }
              }}
            />
          </Form.Item>
          {canLoginBackend(createRole) && (
            <Form.Item
              name="password"
              label="初始密码"
              rules={[
                { required: true, message: '请输入密码' },
                { min: 6, message: '密码至少 6 位' },
              ]}
            >
              <Input.Password />
            </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={editingEmployee ? `编辑员工：${editingEmployee.name}` : '编辑员工'}
        open={!!editingEmployee}
        onCancel={() => setEditingEmployee(null)}
        footer={null}
        width={520}
      >
        <Form form={editForm} layout="vertical" onFinish={handleEdit}>
          <Form.Item name="name" label="姓名" rules={[{ required: true, message: '请输入姓名' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="phone" label="电话" rules={[{ required: true, message: '请输入电话' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="employeeNo" label="工号" rules={[{ required: true, message: '请输入工号' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="position" 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={ROLE_OPTIONS} />
          </Form.Item>
          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button onClick={() => setEditingEmployee(null)}>取消</Button>
              <Button type="primary" htmlType="submit" loading={editLoading}>
                保存
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="员工码二维码"
        open={qrCodeVisible}
        onCancel={() => setQrCodeVisible(false)}
        footer={null}
        width={400}
      >
        <div style={{ textAlign: 'center' }}>
          {qrCodeDataUrl && (
            <>
              <img
                src={qrCodeDataUrl}
                alt="员工码二维码"
                style={{ width: 200, height: 200, cursor: 'pointer' }}
                onClick={() => handleQuerySerial(selectedSerial)}
              />
              <p style={{ marginTop: 12, fontFamily: 'monospace', fontSize: 16, fontWeight: 'bold', color: '#165DFF' }}>
                {selectedSerial}
              </p>
              <p style={{ marginTop: 8, fontSize: 12, color: '#999' }}>点击二维码可打开查询页面</p>
            </>
          )}
        </div>
      </Modal>

      <Modal
        title={resetPasswordEmployee ? `重置密码：${resetPasswordEmployee.name}` : '重置密码'}
        open={!!resetPasswordEmployee}
        onCancel={() => {
          setResetPasswordEmployee(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 />
          </Form.Item>
          <Form.Item>
            <Space style={{ width: '100%', justifyContent: 'flex-end' }}>
              <Button
                onClick={() => {
                  setResetPasswordEmployee(null);
                  resetForm.resetFields();
                }}
              >
                取消
              </Button>
              <Button type="primary" htmlType="submit" loading={resetLoading}>
                确认重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default EmployeeSerialsPage;