import { useMemo, useState } from 'react';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import {
  App as AntdApp,
  Avatar,
  Button,
  Card,
  Form,
  Input,
  Modal,
  Select,
  Space,
  Table,
  Tag,
} from 'antd';
import type { TableProps } from 'antd';
import dayjs from 'dayjs';
import './Users.scss';

type UserStatus = 'active' | 'disabled';

interface UserRecord {
  key: number;
  username: string;
  nickname: string;
  role: string;
  status: UserStatus;
  createdAt: string;
}

interface UserFormValues {
  username: string;
  nickname: string;
  role: string;
  status: UserStatus;
}

const roleOptions = [
  { value: '超级管理员', label: '超级管理员' },
  { value: '运营管理员', label: '运营管理员' },
  { value: '销售专员', label: '销售专员' },
  { value: '访客', label: '访客' },
];

const roleColor: Record<string, string> = {
  超级管理员: 'purple',
  运营管理员: 'blue',
  销售专员: 'cyan',
  访客: 'default',
};

const statusMeta: Record<UserStatus, { label: string; color: string }> = {
  active: { label: '启用', color: 'green' },
  disabled: { label: '禁用', color: 'default' },
};

const initialUsers: UserRecord[] = [
  {
    key: 1,
    username: 'admin',
    nickname: '陈一鸣',
    role: '超级管理员',
    status: 'active',
    createdAt: '2026-01-08 09:30',
  },
  {
    key: 2,
    username: 'lin.xia',
    nickname: '林夏',
    role: '运营管理员',
    status: 'active',
    createdAt: '2026-03-12 14:20',
  },
  {
    key: 3,
    username: 'zhou.yang',
    nickname: '周洋',
    role: '销售专员',
    status: 'active',
    createdAt: '2026-04-02 10:05',
  },
  {
    key: 4,
    username: 'su.wen',
    nickname: '苏雯',
    role: '销售专员',
    status: 'active',
    createdAt: '2026-05-18 16:42',
  },
  {
    key: 5,
    username: 'he.jun',
    nickname: '何俊',
    role: '运营管理员',
    status: 'disabled',
    createdAt: '2026-06-09 11:18',
  },
  {
    key: 6,
    username: 'yang.li',
    nickname: '杨莉',
    role: '销售专员',
    status: 'active',
    createdAt: '2026-07-21 15:54',
  },
  {
    key: 7,
    username: 'wang.qi',
    nickname: '王琪',
    role: '访客',
    status: 'disabled',
    createdAt: '2026-08-03 09:12',
  },
  {
    key: 8,
    username: 'zhao.min',
    nickname: '赵敏',
    role: '销售专员',
    status: 'active',
    createdAt: '2026-09-15 13:26',
  },
];

const Users = () => {
  const [users, setUsers] = useState<UserRecord[]>(initialUsers);
  const [keyword, setKeyword] = useState('');
  const [status, setStatus] = useState<UserStatus | 'all'>('all');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [editingUser, setEditingUser] = useState<UserRecord | null>(null);
  const [form] = Form.useForm<UserFormValues>();
  const { message, modal } = AntdApp.useApp();

  const filteredUsers = useMemo(() => {
    const normalizedKeyword = keyword.trim().toLowerCase();
    return users.filter((user) => {
      const matchesKeyword =
        !normalizedKeyword ||
        user.username.toLowerCase().includes(normalizedKeyword) ||
        user.nickname.toLowerCase().includes(normalizedKeyword);
      const matchesStatus = status === 'all' || user.status === status;
      return matchesKeyword && matchesStatus;
    });
  }, [users, keyword, status]);

  const openCreateModal = () => {
    setEditingUser(null);
    form.resetFields();
    form.setFieldsValue({ status: 'active', role: '销售专员' });
    setIsModalOpen(true);
  };

  const openEditModal = (record: UserRecord) => {
    setEditingUser(record);
    form.setFieldsValue({
      username: record.username,
      nickname: record.nickname,
      role: record.role,
      status: record.status,
    });
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    form.resetFields();
  };

  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const duplicate = users.some(
        (user) => user.username === values.username && user.key !== editingUser?.key,
      );
      if (duplicate) {
        message.error('用户名已存在，请更换一个');
        return;
      }

      if (editingUser) {
        setUsers((prev) =>
          prev.map((user) =>
            user.key === editingUser.key ? { ...user, ...values } : user,
          ),
        );
        message.success('用户信息已更新');
      } else {
        setUsers((prev) => [
          {
            key: Date.now(),
            ...values,
            createdAt: dayjs().format('YYYY-MM-DD HH:mm'),
          },
          ...prev,
        ]);
        message.success('用户创建成功');
      }
      closeModal();
    } catch {
      // 表单校验失败时由 antd 自动展示错误信息
    }
  };

  const handleDelete = (record: UserRecord) => {
    modal.confirm({
      title: '删除用户',
      content: `确定要删除用户「${record.nickname}」吗？删除后不可恢复。`,
      okText: '删除',
      cancelText: '取消',
      okButtonProps: { danger: true },
      onOk: () => {
        setUsers((prev) => prev.filter((user) => user.key !== record.key));
        message.success('用户已删除');
      },
    });
  };

  const columns: TableProps<UserRecord>['columns'] = [
    {
      title: '用户',
      dataIndex: 'nickname',
      width: 220,
      render: (_value, record) => (
        <div className="user-cell">
          <Avatar className="user-cell__avatar">{record.nickname.charAt(0)}</Avatar>
          <div className="user-cell__meta">
            <span className="user-cell__name">{record.nickname}</span>
            <span className="user-cell__username">@{record.username}</span>
          </div>
        </div>
      ),
    },
    {
      title: '角色',
      dataIndex: 'role',
      width: 140,
      render: (value: string) => (
        <Tag color={roleColor[value] ?? 'blue'} bordered={false}>
          {value}
        </Tag>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 100,
      render: (value: UserStatus) => (
        <Tag color={statusMeta[value].color} bordered={false}>
          {statusMeta[value].label}
        </Tag>
      ),
    },
    { title: '创建时间', dataIndex: 'createdAt', width: 170 },
    {
      title: '操作',
      key: 'action',
      width: 150,
      render: (_value, record) => (
        <Space size={0}>
          <Button type="link" size="small" onClick={() => openEditModal(record)}>
            编辑
          </Button>
          <Button type="link" size="small" danger onClick={() => handleDelete(record)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  return (
    <div className="users-page">
      <div className="page-header">
        <div>
          <h1 className="page-header__title">用户管理</h1>
          <p className="page-header__desc">
            维护平台账号、角色与启用状态。
          </p>
        </div>
        <div className="page-header__actions">
          <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
            新增用户
          </Button>
        </div>
      </div>

      <Card className="filter-card" variant="borderless">
        <div className="page-toolbar">
          <Input
            allowClear
            prefix={<SearchOutlined />}
            placeholder="搜索用户名 / 昵称"
            value={keyword}
            onChange={(event) => setKeyword(event.target.value)}
            style={{ width: 260 }}
          />
          <Select<UserStatus | 'all'>
            value={status}
            onChange={setStatus}
            style={{ width: 150 }}
            options={[
              { value: 'all', label: '全部状态' },
              { value: 'active', label: '启用' },
              { value: 'disabled', label: '禁用' },
            ]}
          />
          <span className="text-muted">共 {filteredUsers.length} 条记录</span>
        </div>
      </Card>

      <Card className="table-card" variant="borderless">
        <Table<UserRecord>
          rowKey="key"
          columns={columns}
          dataSource={filteredUsers}
          scroll={{ x: 820 }}
          pagination={{
            pageSize: 8,
            showSizeChanger: false,
            showTotal: (total) => `共 ${total} 条`,
          }}
        />
      </Card>

      <Modal
        title={editingUser ? '编辑用户' : '新增用户'}
        open={isModalOpen}
        onOk={handleSubmit}
        onCancel={closeModal}
        okText={editingUser ? '保存' : '创建'}
        cancelText="取消"
        forceRender
      >
        <Form form={form} layout="vertical" preserve={false}>
          <Form.Item
            name="username"
            label="用户名"
            rules={[
              { required: true, message: '请输入用户名' },
              { pattern: /^[a-zA-Z][a-zA-Z0-9._-]{2,19}$/, message: '3-20 位，字母开头' },
            ]}
          >
            <Input placeholder="请输入登录用户名" disabled={Boolean(editingUser)} />
          </Form.Item>
          <Form.Item
            name="nickname"
            label="姓名"
            rules={[{ required: true, message: '请输入姓名' }]}
          >
            <Input placeholder="请输入用户姓名" />
          </Form.Item>
          <Form.Item
            name="role"
            label="角色"
            rules={[{ required: true, message: '请选择角色' }]}
          >
            <Select placeholder="请选择角色" options={roleOptions} />
          </Form.Item>
          <Form.Item
            name="status"
            label="状态"
            rules={[{ required: true, message: '请选择状态' }]}
          >
            <Select
              options={[
                { value: 'active', label: '启用' },
                { value: 'disabled', label: '禁用' },
              ]}
            />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default Users;