import React, { useState } from 'react';
import { useIntl } from 'umi';
import { Button, Table, Space, Modal, message } from 'antd';
import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

interface UserType {
  key: string;
  username: string;
  email: string;
  role: string;
  lastLoginTime: string;
  status: 'active' | 'inactive';
}

const UserManage: React.FC = () => {
  const intl = useIntl();
  const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  // 模拟数据
  const data: UserType[] = [
    {
      key: '1',
      username: 'admin',
      email: 'admin@example.com',
      role: '超级管理员',
      lastLoginTime: '2023-06-01 10:00:00',
      status: 'active',
    },
    {
      key: '2',
      username: 'editor',
      email: 'editor@example.com',
      role: '内容编辑',
      lastLoginTime: '2023-05-28 15:30:00',
      status: 'active',
    },
    {
      key: '3',
      username: 'operator',
      email: 'operator@example.com',
      role: '运营人员',
      lastLoginTime: '2023-05-25 09:15:00',
      status: 'inactive',
    },
  ];

  // 处理编辑用户
  const handleEdit = (record: UserType) => {
    message.success(`编辑用户: ${record.username}`);
  };

  // 处理删除单个用户
  const showDeleteConfirm = (record: UserType) => {
    Modal.confirm({
      title: '确定要删除该用户吗?',
      icon: <ExclamationCircleOutlined />,
      content: `用户名: ${record.username}`,
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        // 在这里处理删除逻辑
        message.success(`删除用户: ${record.username}`);
      },
    });
  };

  const columns = [
    {
      title: '用户名',
      dataIndex: 'username',
      key: 'username',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '所属角色',
      dataIndex: 'role',
      key: 'role',
    },
    {
      title: '最后登录时间',
      dataIndex: 'lastLoginTime',
      key: 'lastLoginTime',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: string) => (status === 'active' ? '启用' : '禁用'),
    },
    {
      title: '操作',
      key: 'action',
      align: 'center' as const,
      render: (_: any, record: UserType) => (
        <Space size="middle" className="action-space">
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" onClick={() => showDeleteConfirm(record)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
    setSelectedRowKeys(newSelectedRowKeys);
  };

  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };

  const hasSelected = selectedRowKeys.length > 0;

  // 处理添加用户
  const handleAdd = () => {
    // 添加用户逻辑
    message.success('点击了添加按钮');
  };

  // 处理批量删除
  const handleBatchDelete = () => {
    Modal.confirm({
      title: '确定要删除选中的用户吗?',
      icon: <ExclamationCircleOutlined />,
      content: '删除后无法恢复',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        setLoading(true);
        // 在这里处理批量删除逻辑
        setTimeout(() => {
          setSelectedRowKeys([]);
          setLoading(false);
          message.success('删除成功');
        }, 1000);
      },
    });
  };

  return (
    <div className="user-manage-container common-container">
      <div className="filter-action-row">
        <div className="right-buttons">
          <Button
            type="primary"
            ghost
            icon={<PlusOutlined />}
            onClick={handleAdd}
          >
            新增
          </Button>
          <Button
            danger
            icon={<DeleteOutlined />}
            onClick={handleBatchDelete}
            disabled={!hasSelected}
            loading={loading}
          >
            删除
          </Button>
          {hasSelected && (
            <span className="selected-count">
              已选择 {selectedRowKeys.length} 项
            </span>
          )}
        </div>
      </div>
      <div className="content-area">
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={data}
          pagination={{ pageSize: 10 }}
        />
      </div>
    </div>
  );
};

export default UserManage;
