import React, { useEffect, useMemo, useState } from 'react';
import { Avatar, Button, Form, Input, Modal, Popconfirm, Select, Space, Switch, Table, Tag, Typography, message } from 'antd';
import { AppstoreOutlined, EditOutlined, LockOutlined, PlusOutlined, ReloadOutlined, SyncOutlined, DeleteOutlined, SafetyCertificateOutlined, UserOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { SycmCard } from '../../components/Common';
import {
  createUser,
  deleteUser,
  getDepartments,
  getUserPagePermissions,
  getUsers,
  resetPassword,
  syncDingTalkUsers,
  updateUser,
  updateUserAdminRole,
  updateUserPagePermissions,
} from '../../api/admin';

const { Text } = Typography;
const { Search } = Input;

const ROLE_LABELS = {
  admin: '管理员',
  analyst: '分析师',
  user: '用户',
  guest: '访客',
};

const SOURCE_META = {
  local: { color: 'default', text: '本地账号' },
  dingtalk: { color: 'blue', text: '钉钉' },
  google: { color: 'red', text: 'Google' },
};

const UserManagement = () => {
  const [users, setUsers] = useState([]);
  const [departments, setDepartments] = useState([]);
  const [loading, setLoading] = useState(false);
  const [saving, setSaving] = useState(false);
  const [syncing, setSyncing] = useState(false);
  const [switchingAdminId, setSwitchingAdminId] = useState(null);
  const [modalVisible, setModalVisible] = useState(false);
  const [resetVisible, setResetVisible] = useState(false);
  const [permissionVisible, setPermissionVisible] = useState(false);
  const [editingUser, setEditingUser] = useState(null);
  const [resetUser, setResetUser] = useState(null);
  const [permissionUser, setPermissionUser] = useState(null);
  const [pagePermissions, setPagePermissions] = useState([]);
  const [permissionSaving, setPermissionSaving] = useState(false);
  const [keyword, setKeyword] = useState('');
  const [pagination, setPagination] = useState({ current: 1, pageSize: 10, total: 0 });
  const [form] = Form.useForm();
  const [resetForm] = Form.useForm();

  const departmentOptions = useMemo(
    () =>
      departments
        .filter((item) => item.status === 'active')
        .map((item) => ({
          label: item.name,
          value: item.id,
        })),
    [departments]
  );

  const fetchDepartments = async () => {
    try {
      const data = await getDepartments();
      setDepartments(Array.isArray(data) ? data : []);
    } catch (error) {
      message.error(error.response?.data?.error || '获取部门列表失败');
    }
  };

  const fetchUsers = async (page = pagination.current, pageSize = pagination.pageSize, nextKeyword = keyword) => {
    try {
      setLoading(true);
      const res = await getUsers({
        page,
        size: pageSize,
        keyword: nextKeyword,
      });
      setUsers(res.data || []);
      setPagination({
        current: res.page || page,
        pageSize: res.size || pageSize,
        total: res.total || 0,
      });
    } catch (error) {
      message.error(error.response?.data?.error || '获取用户列表失败');
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    fetchDepartments();
    fetchUsers(1, 10, '');
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const openCreateModal = () => {
    setEditingUser(null);
    form.resetFields();
    form.setFieldsValue({
      role: 'user',
      status: 'active',
    });
    setModalVisible(true);
  };

  const openEditModal = (record) => {
    setEditingUser(record);
    form.setFieldsValue({
      username: record.username,
      name: record.name,
      email: record.email,
      mobile: record.mobile,
      jobTitle: record.jobTitle,
      role: record.role,
      departmentId: record.department_id || undefined,
      status: record.status,
    });
    setModalVisible(true);
  };

  const handleSave = async () => {
    try {
      const values = await form.validateFields();
      setSaving(true);
      if (editingUser) {
        await updateUser(editingUser.id, values);
        message.success('用户信息已更新');
      } else {
        await createUser(values);
        message.success('用户已创建');
      }
      setModalVisible(false);
      fetchUsers();
    } catch (error) {
      if (!error?.errorFields) {
        message.error(error.response?.data?.error || '保存用户失败');
      }
    } finally {
      setSaving(false);
    }
  };

  const handleDelete = async (id) => {
    try {
      await deleteUser(id);
      message.success('用户已删除');
      fetchUsers();
    } catch (error) {
      message.error(error.response?.data?.error || '删除用户失败');
    }
  };

  const handleToggleAdminRole = async (record) => {
    const nextIsAdmin = record.role !== 'admin';

    try {
      setSwitchingAdminId(record.id);
      const res = await updateUserAdminRole(record.id, { isAdmin: nextIsAdmin });
      message.success(res.message || (nextIsAdmin ? '已授予管理员权限' : '已取消管理员权限'));
      fetchUsers(pagination.current, pagination.pageSize, keyword);
    } catch (error) {
      message.error(error.response?.data?.error || '更新管理员权限失败');
    } finally {
      setSwitchingAdminId(null);
    }
  };

  const openPagePermissionModal = async (record) => {
    try {
      setPermissionUser(record);
      const data = await getUserPagePermissions(record.id);
      setPagePermissions(Array.isArray(data.permissions) ? data.permissions : []);
      setPermissionVisible(true);
    } catch (error) {
      message.error(error.response?.data?.error || '获取用户可见页面失败');
    }
  };

  const handlePagePermissionToggle = (pageKey, userAllowed) => {
    setPagePermissions((prev) =>
      prev.map((item) => (item.pageKey === pageKey ? { ...item, userAllowed, effectiveAllowed: Boolean(item.baseAllowed) || userAllowed } : item))
    );
  };

  const handleSavePagePermissions = async () => {
    if (!permissionUser) {
      return;
    }

    try {
      setPermissionSaving(true);
      const res = await updateUserPagePermissions(permissionUser.id, {
        permissions: pagePermissions.map((item) => ({
          pageKey: item.pageKey,
          allowed: Boolean(item.userAllowed),
        })),
      });
      setPagePermissions(Array.isArray(res.permissions) ? res.permissions : []);
      message.success(res.message || '用户可见页面已更新');
      setPermissionVisible(false);
    } catch (error) {
      message.error(error.response?.data?.error || '更新用户可见页面失败');
    } finally {
      setPermissionSaving(false);
    }
  };

  const openResetModal = (record) => {
    setResetUser(record);
    resetForm.resetFields();
    setResetVisible(true);
  };

  const handleResetPassword = async () => {
    try {
      const values = await resetForm.validateFields();
      setSaving(true);
      await resetPassword(resetUser.id, { newPassword: values.newPassword });
      message.success('密码已重置');
      setResetVisible(false);
    } catch (error) {
      if (!error?.errorFields) {
        message.error(error.response?.data?.error || '重置密码失败');
      }
    } finally {
      setSaving(false);
    }
  };

  const handleSync = async () => {
    try {
      setSyncing(true);
      const res = await syncDingTalkUsers();
      message.success(`同步完成，共处理 ${res.total || 0} 位钉钉用户`);
      await Promise.all([fetchUsers(1, pagination.pageSize, keyword), fetchDepartments()]);
    } catch (error) {
      message.error(error.response?.data?.error || '同步钉钉用户失败');
    } finally {
      setSyncing(false);
    }
  };

  const columns = [
    {
      title: '用户',
      key: 'user',
      width: 280,
      render: (_, record) => (
        <Space align="start">
          <Avatar src={record.avatarUrl} icon={<UserOutlined />} size={42} />
          <div>
            <div style={{ fontWeight: 600, color: 'var(--sycm-text-strong)' }}>{record.name || record.username}</div>
            <div style={{ color: 'var(--sycm-text-tertiary)', fontSize: 13 }}>{record.username}</div>
            <div style={{ color: 'var(--sycm-text-tertiary)', fontSize: 13 }}>{record.email}</div>
          </div>
        </Space>
      ),
    },
    {
      title: '来源',
      dataIndex: 'authSource',
      width: 110,
      render: (value) => {
        const meta = SOURCE_META[value] || { color: 'default', text: value || '未知' };
        return <Tag color={meta.color}>{meta.text}</Tag>;
      },
    },
    {
      title: '部门信息',
      key: 'department',
      width: 220,
      render: (_, record) => (
        <div>
          <div>{record.departmentNames || record.departmentName || '-'}</div>
          {record.jobTitle && <Text type="secondary">{record.jobTitle}</Text>}
        </div>
      ),
    },
    {
      title: '角色 / 状态',
      key: 'roleStatus',
      width: 160,
      render: (_, record) => (
        <Space direction="vertical" size={4}>
          <Tag color={record.role === 'admin' ? 'gold' : 'default'}>{ROLE_LABELS[record.role] || record.role}</Tag>
          <Tag color={record.status === 'active' ? 'success' : 'default'}>{record.status === 'active' ? '启用' : '停用'}</Tag>
        </Space>
      ),
    },
    {
      title: '联系信息',
      key: 'contact',
      width: 180,
      render: (_, record) => (
        <div>
          <div>{record.mobile || '-'}</div>
          {(record.dingtalkUserId || record.googleSub) && (
            <Text type="secondary" style={{ fontSize: 12 }}>
              {record.dingtalkUserId ? `钉钉ID: ${record.dingtalkUserId}` : `Google: ${record.googleSub}`}
            </Text>
          )}
        </div>
      ),
    },
    {
      title: '最后登录',
      dataIndex: 'lastLoginAt',
      width: 170,
      render: (value) => (value ? dayjs(value).format('YYYY-MM-DD HH:mm') : '-'),
    },
    {
      title: '操作',
      key: 'actions',
      width: 320,
      fixed: 'right',
      render: (_, record) => (
        <Space wrap>
          <Button type="link" size="small" icon={<EditOutlined />} onClick={() => openEditModal(record)}>
            编辑
          </Button>
          <Button type="link" size="small" icon={<AppstoreOutlined />} onClick={() => openPagePermissionModal(record)}>
            页面权限
          </Button>
          <Popconfirm
            title={record.role === 'admin' ? '确认取消该用户的管理员权限？' : '确认授予该用户管理员权限？'}
            description={record.role === 'admin' ? '取消后该用户将变为普通用户。' : '授予后该用户将拥有系统管理权限。'}
            onConfirm={() => handleToggleAdminRole(record)}
          >
            <Button
              type="link"
              size="small"
              icon={<SafetyCertificateOutlined />}
              loading={switchingAdminId === record.id}
            >
              {record.role === 'admin' ? '取消管理员' : '设为管理员'}
            </Button>
          </Popconfirm>
          <Button type="link" size="small" icon={<LockOutlined />} onClick={() => openResetModal(record)}>
            重置密码
          </Button>
          <Popconfirm title="确定删除该用户吗？" onConfirm={() => handleDelete(record.id)}>
            <Button type="link" size="small" danger icon={<DeleteOutlined />}>
              删除
            </Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  return (
    <div className="settings-tab-page">
      <SycmCard bodyStyle={{ padding: 16 }}>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'space-between', marginBottom: 16, flexWrap: 'wrap' }}>
          <Search
            placeholder="搜索账号、姓名、邮箱、手机号、部门"
            allowClear
            onSearch={(value) => {
              setKeyword(value);
              fetchUsers(1, pagination.pageSize, value);
            }}
            style={{ width: 320 }}
          />
          <Space wrap>
            <Button icon={<ReloadOutlined />} onClick={() => fetchUsers()}>
              刷新
            </Button>
            <Button icon={<SyncOutlined />} loading={syncing} onClick={handleSync}>
              同步钉钉用户
            </Button>
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreateModal}>
              新增用户
            </Button>
          </Space>
        </div>

        <Table
          rowKey="id"
          columns={columns}
          dataSource={users}
          loading={loading}
          scroll={{ x: 1420 }}
          pagination={{
            current: pagination.current,
            pageSize: pagination.pageSize,
            total: pagination.total,
            onChange: (page, pageSize) => fetchUsers(page, pageSize),
          }}
        />
      </SycmCard>

      <Modal
        title={editingUser ? '编辑用户' : '新增用户'}
        open={modalVisible}
        onCancel={() => setModalVisible(false)}
        onOk={handleSave}
        confirmLoading={saving}
        width={560}
      >
        <Form form={form} layout="vertical" style={{ marginTop: 20 }}>
          <Form.Item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
            <Input disabled={Boolean(editingUser)} />
          </Form.Item>
          {!editingUser && (
            <Form.Item label="初始密码" name="password" rules={[{ required: true, message: '请输入初始密码' }]}>
              <Input.Password />
            </Form.Item>
          )}
          <Form.Item label="姓名" name="name" rules={[{ required: true, message: '请输入姓名' }]}>
            <Input />
          </Form.Item>
          <Form.Item label="邮箱" name="email" rules={[{ required: true, message: '请输入邮箱' }, { type: 'email', message: '邮箱格式不正确' }]}>
            <Input />
          </Form.Item>
          <Form.Item label="手机号" name="mobile">
            <Input />
          </Form.Item>
          <Form.Item label="职位" name="jobTitle">
            <Input />
          </Form.Item>
          <Form.Item label="所属部门" name="departmentId">
            <Select allowClear options={departmentOptions} placeholder="请选择部门" />
          </Form.Item>
          <Space style={{ width: '100%' }} size={16}>
            <Form.Item label="角色" name="role" style={{ flex: 1 }} rules={[{ required: true, message: '请选择角色' }]}>
              <Select
                options={Object.entries(ROLE_LABELS).map(([value, label]) => ({
                  value,
                  label,
                }))}
              />
            </Form.Item>
            <Form.Item label="状态" name="status" style={{ flex: 1 }} rules={[{ required: true, message: '请选择状态' }]}>
              <Select
                options={[
                  { value: 'active', label: '启用' },
                  { value: 'inactive', label: '停用' },
                ]}
              />
            </Form.Item>
          </Space>
        </Form>
      </Modal>

      <Modal
        title={permissionUser ? `页面权限 - ${permissionUser.name || permissionUser.username}` : '页面权限'}
        open={permissionVisible}
        onCancel={() => setPermissionVisible(false)}
        onOk={handleSavePagePermissions}
        confirmLoading={permissionSaving}
        width={680}
      >
        <div style={{ marginTop: 12 }}>
          <Text type="secondary">
            这里配置用户级额外可见页面。即使所属部门关闭了某个页面，只要在这里单独开通，该用户仍会在侧边栏看到该页面。
          </Text>
          <div style={{ marginTop: 20, display: 'grid', gap: 12 }}>
            {pagePermissions.map((item) => (
              <div
                key={item.pageKey}
                style={{
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'space-between',
                  gap: 16,
                  padding: '12px 14px',
                  borderRadius: 8,
                  background: 'var(--sycm-bg-subtle)',
                }}
              >
                <div>
                  <Space size={8} wrap>
                    <span style={{ fontWeight: 600 }}>{item.pageName}</span>
                    {item.baseAllowed ? <Tag color="green">默认可见</Tag> : <Tag>默认不可见</Tag>}
                    {item.userAllowed ? <Tag color="blue">单独开通</Tag> : null}
                  </Space>
                  <div>
                    <Text type="secondary">{item.path}</Text>
                  </div>
                </div>
                <Switch
                  checked={Boolean(item.userAllowed)}
                  checkedChildren="开通"
                  unCheckedChildren="未开通"
                  onChange={(value) => handlePagePermissionToggle(item.pageKey, value)}
                />
              </div>
            ))}
          </div>
        </div>
      </Modal>

      <Modal
        title={resetUser ? `重置密码 - ${resetUser.name || resetUser.username}` : '重置密码'}
        open={resetVisible}
        onCancel={() => setResetVisible(false)}
        onOk={handleResetPassword}
        confirmLoading={saving}
      >
        <Form form={resetForm} layout="vertical" style={{ marginTop: 16 }}>
          <Form.Item label="新密码" name="newPassword" rules={[{ required: true, message: '请输入新密码' }, { min: 6, message: '密码至少 6 位' }]}>
            <Input.Password />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default UserManagement;