import { useState, useMemo, useEffect, useCallback, CSSProperties } from 'react';
import { Table, Button, Input, Modal, Form, Drawer, Typography, Tabs, message } from 'antd';
import { PlusOutlined, SettingOutlined } from '@ant-design/icons';
import { request } from '../api/client';
import { useNavigate } from 'react-router-dom';
import { useAppContext } from '../store/AppContext';

interface UsersResponse {
  submenu_id: number;
  username: string | null;
  email: string | null;
  notes: string | null;
  metadata: Record<string, unknown> | null;
  id: number;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface RolesResponse {
  submenu_id: number;
  role_name: string | null;
  notes: string | null;
  metadata: Record<string, unknown> | null;
  id: number;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface PermissionsResponse {
  submenu_id: number;
  permission_name: string | null;
  notes: string | null;
  metadata: Record<string, unknown> | null;
  id: number;
  version: number;
  deleted_at: string | null;
  created_at: string;
  updated_at: string;
}

interface RoleshistoryResponse {
  submenu_id: number;
  roles_id: number;
  change_type: string;
  change_details: Record<string, unknown>;
  changed_by: number | null;
  change_date: string;
  ip_address: string | null;
  id: number;
  created_at: string;
  updated_at: string;
}

interface PermissionshistoryResponse {
  submenu_id: number;
  permissions_id: number;
  change_type: string;
  change_details: Record<string, unknown>;
  changed_by: number | null;
  change_date: string;
  ip_address: string | null;
  id: number;
  created_at: string;
  updated_at: string;
}

export default function UserManagementPage() {
  const [messageApi, contextHolder] = message.useMessage();
  const navigate = useNavigate();
  const { currentUser } = useAppContext();

  const [activeTab, setActiveTab] = useState<string>('users');
  const [users, setUsers] = useState<UsersResponse[]>([]);
  const [roles, setRoles] = useState<RolesResponse[]>([]);
  const [permissions, setPermissions] = useState<PermissionsResponse[]>([]);
  const [usersSearch, setUsersSearch] = useState<string>('');
  const [rolesSearch, setRolesSearch] = useState<string>('');
  const [permissionsSearch, setPermissionsSearch] = useState<string>('');
  const [usersOffset, setUsersOffset] = useState<number>(0);
  const [rolesOffset, setRolesOffset] = useState<number>(0);
  const [permissionsOffset, setPermissionsOffset] = useState<number>(0);
  const [createUserModalVisible, setCreateUserModalVisible] = useState<boolean>(false);
  const [editUserModalVisible, setEditUserModalVisible] = useState<boolean>(false);
  const [createRoleModalVisible, setCreateRoleModalVisible] = useState<boolean>(false);
  const [editRoleModalVisible, setEditRoleModalVisible] = useState<boolean>(false);
  const [createPermissionModalVisible, setCreatePermissionModalVisible] = useState<boolean>(false);
  const [editPermissionModalVisible, setEditPermissionModalVisible] = useState<boolean>(false);
  const [roleHistoryDrawerVisible, setRoleHistoryDrawerVisible] = useState<boolean>(false);
  const [permissionHistoryDrawerVisible, setPermissionHistoryDrawerVisible] = useState<boolean>(false);
  const [selectedUserId, setSelectedUserId] = useState<number | null>(null);
  const [selectedRoleId, setSelectedRoleId] = useState<number | null>(null);
  const [selectedPermissionId, setSelectedPermissionId] = useState<number | null>(null);
  const [roleHistory, setRoleHistory] = useState<RoleshistoryResponse[]>([]);
  const [permissionHistory, setPermissionHistory] = useState<PermissionshistoryResponse[]>([]);
  const [loading, setLoading] = useState<boolean>(false);

  const [createUserForm] = Form.useForm();
  const [editUserForm] = Form.useForm();
  const [createRoleForm] = Form.useForm();
  const [editRoleForm] = Form.useForm();
  const [createPermissionForm] = Form.useForm();
  const [editPermissionForm] = Form.useForm();

  const fetchUsers = useCallback(async () => {
    setLoading(true);
    try {
      const result = await request<UsersResponse[]>({
        method: 'GET',
        path: '/user-management/users',
        query: {
          limit: 20,
          offset: usersOffset,
          search: usersSearch
        }
      });
      setUsers(result.data);
    } catch (error) {
      messageApi.error('Failed to load users');
    } finally {
      setLoading(false);
    }
  }, [usersOffset, usersSearch, messageApi]);

  const fetchRoles = useCallback(async () => {
    setLoading(true);
    try {
      const result = await request<RolesResponse[]>({
        method: 'GET',
        path: '/user-management/roles',
        query: {
          limit: 20,
          offset: rolesOffset,
          search: rolesSearch
        }
      });
      setRoles(result.data);
    } catch (error) {
      messageApi.error('Failed to load roles');
    } finally {
      setLoading(false);
    }
  }, [rolesOffset, rolesSearch, messageApi]);

  const fetchPermissions = useCallback(async () => {
    setLoading(true);
    try {
      const result = await request<PermissionsResponse[]>({
        method: 'GET',
        path: '/user-management/permissions',
        query: {
          limit: 20,
          offset: permissionsOffset,
          search: permissionsSearch
        }
      });
      setPermissions(result.data);
    } catch (error) {
      messageApi.error('Failed to load permissions');
    } finally {
      setLoading(false);
    }
  }, [permissionsOffset, permissionsSearch, messageApi]);

  useEffect(() => {
    fetchUsers();
  }, [fetchUsers]);

  useEffect(() => {
    fetchRoles();
  }, [fetchRoles]);

  useEffect(() => {
    fetchPermissions();
  }, [fetchPermissions]);

  const onTabChange = (key: string) => {
    setActiveTab(key);
  };

  const onUsersSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUsersSearch(e.target.value);
    setUsersOffset(0);
  };

  const onRolesSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setRolesSearch(e.target.value);
    setRolesOffset(0);
  };

  const onPermissionsSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPermissionsSearch(e.target.value);
    setPermissionsOffset(0);
  };

  const openCreateUserModal = () => {
    setCreateUserModalVisible(true);
  };

  const closeCreateUserModal = () => {
    setCreateUserModalVisible(false);
    createUserForm.resetFields();
  };

  const openEditUserModal = (record: UsersResponse) => {
    setEditUserModalVisible(true);
    setSelectedUserId(record.id);
    editUserForm.setFieldsValue({
      username: record.username,
      email: record.email,
      notes: record.notes,
      metadata: record.metadata ? JSON.stringify(record.metadata) : ''
    });
  };

  const closeEditUserModal = () => {
    setEditUserModalVisible(false);
    setSelectedUserId(null);
    editUserForm.resetFields();
  };

  const openCreateRoleModal = () => {
    setCreateRoleModalVisible(true);
  };

  const closeCreateRoleModal = () => {
    setCreateRoleModalVisible(false);
    createRoleForm.resetFields();
  };

  const openEditRoleModal = (record: RolesResponse) => {
    setEditRoleModalVisible(true);
    setSelectedRoleId(record.id);
    editRoleForm.setFieldsValue({
      role_name: record.role_name,
      notes: record.notes,
      metadata: record.metadata ? JSON.stringify(record.metadata) : ''
    });
  };

  const closeEditRoleModal = () => {
    setEditRoleModalVisible(false);
    setSelectedRoleId(null);
    editRoleForm.resetFields();
  };

  const openCreatePermissionModal = () => {
    setCreatePermissionModalVisible(true);
  };

  const closeCreatePermissionModal = () => {
    setCreatePermissionModalVisible(false);
    createPermissionForm.resetFields();
  };

  const openEditPermissionModal = (record: PermissionsResponse) => {
    setEditPermissionModalVisible(true);
    setSelectedPermissionId(record.id);
    editPermissionForm.setFieldsValue({
      permission_name: record.permission_name,
      notes: record.notes,
      metadata: record.metadata ? JSON.stringify(record.metadata) : ''
    });
  };

  const closeEditPermissionModal = () => {
    setEditPermissionModalVisible(false);
    setSelectedPermissionId(null);
    editPermissionForm.resetFields();
  };

  const openRoleHistoryDrawer = async (record: RolesResponse) => {
    setSelectedRoleId(record.id);
    setRoleHistoryDrawerVisible(true);
    try {
      const result = await request<RoleshistoryResponse[]>({
        method: 'GET',
        path: '/user-management/roles-history',
        query: {
          limit: 20,
          offset: 0,
          roles_id: record.id
        }
      });
      setRoleHistory(result.data);
    } catch (error) {
      messageApi.error('Failed to load role history');
    }
  };

  const closeRoleHistoryDrawer = () => {
    setRoleHistoryDrawerVisible(false);
  };

  const openPermissionHistoryDrawer = async (record: PermissionsResponse) => {
    setSelectedPermissionId(record.id);
    setPermissionHistoryDrawerVisible(true);
    try {
      const result = await request<PermissionshistoryResponse[]>({
        method: 'GET',
        path: '/user-management/permissions-history',
        query: {
          limit: 20,
          offset: 0,
          permissions_id: record.id
        }
      });
      setPermissionHistory(result.data);
    } catch (error) {
      messageApi.error('Failed to load permission history');
    }
  };

  const closePermissionHistoryDrawer = () => {
    setPermissionHistoryDrawerVisible(false);
  };

  const submitCreateUser = async () => {
    try {
      const values = await createUserForm.validateFields();
      await request<UsersResponse>({
        method: 'POST',
        path: '/user-management/users',
        body: {
          submenu_id: 1,
          username: values.username,
          email: values.email,
          notes: values.notes || null,
          metadata: values.metadata ? JSON.parse(values.metadata) : null
        }
      });
      messageApi.success('User created successfully');
      closeCreateUserModal();
      fetchUsers();
    } catch (error) {
      messageApi.error('Failed to create user');
    }
  };

  const submitEditUser = async () => {
    if (!selectedUserId) return;
    try {
      const values = await editUserForm.validateFields();
      await request<UsersResponse>({
        method: 'PUT',
        path: '/user-management/users/{user_id}',
        pathParams: { user_id: selectedUserId },
        body: {
          submenu_id: 1,
          username: values.username,
          email: values.email,
          notes: values.notes || null,
          metadata: values.metadata ? JSON.parse(values.metadata) : null
        }
      });
      messageApi.success('User updated successfully');
      closeEditUserModal();
      fetchUsers();
    } catch (error) {
      messageApi.error('Failed to update user');
    }
  };

  const confirmDeleteUser = (record: UsersResponse) => {
    Modal.confirm({
      title: 'Delete User',
      content: 'Are you sure you want to delete this user?',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/user-management/users/{user_id}',
            pathParams: { user_id: record.id }
          });
          messageApi.success('User deleted successfully');
          fetchUsers();
        } catch (error) {
          messageApi.error('Failed to delete user');
        }
      }
    });
  };

  const submitCreateRole = async () => {
    try {
      const values = await createRoleForm.validateFields();
      await request<RolesResponse>({
        method: 'POST',
        path: '/user-management/roles',
        query: {
          changed_by: currentUser?.id || 0
        },
        body: {
          submenu_id: 1,
          role_name: values.role_name,
          notes: values.notes || null,
          metadata: values.metadata ? JSON.parse(values.metadata) : null
        }
      });
      messageApi.success('Role created successfully');
      closeCreateRoleModal();
      fetchRoles();
    } catch (error) {
      messageApi.error('Failed to create role');
    }
  };

  const submitEditRole = async () => {
    if (!selectedRoleId) return;
    try {
      const values = await editRoleForm.validateFields();
      await request<RolesResponse>({
        method: 'PUT',
        path: '/user-management/roles/{role_id}',
        pathParams: { role_id: selectedRoleId },
        query: {
          changed_by: currentUser?.id || 0
        },
        body: {
          submenu_id: 1,
          role_name: values.role_name,
          notes: values.notes || null,
          metadata: values.metadata ? JSON.parse(values.metadata) : null
        }
      });
      messageApi.success('Role updated successfully');
      closeEditRoleModal();
      fetchRoles();
    } catch (error) {
      messageApi.error('Failed to update role');
    }
  };

  const confirmDeleteRole = (record: RolesResponse) => {
    Modal.confirm({
      title: 'Delete Role',
      content: 'Are you sure you want to delete this role?',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/user-management/roles/{role_id}',
            pathParams: { role_id: record.id },
            query: {
              changed_by: currentUser?.id || 0
            }
          });
          messageApi.success('Role deleted successfully');
          fetchRoles();
        } catch (error) {
          messageApi.error('Failed to delete role');
        }
      }
    });
  };

  const submitCreatePermission = async () => {
    try {
      const values = await createPermissionForm.validateFields();
      await request<PermissionsResponse>({
        method: 'POST',
        path: '/user-management/permissions',
        query: {
          changed_by: currentUser?.id || 0
        },
        body: {
          submenu_id: 1,
          permission_name: values.permission_name,
          notes: values.notes || null,
          metadata: values.metadata ? JSON.parse(values.metadata) : null
        }
      });
      messageApi.success('Permission created successfully');
      closeCreatePermissionModal();
      fetchPermissions();
    } catch (error) {
      messageApi.error('Failed to create permission');
    }
  };

  const submitEditPermission = async () => {
    if (!selectedPermissionId) return;
    try {
      const values = await editPermissionForm.validateFields();
      await request<PermissionsResponse>({
        method: 'PUT',
        path: '/user-management/permissions/{permission_id}',
        pathParams: { permission_id: selectedPermissionId },
        query: {
          changed_by: currentUser?.id || 0
        },
        body: {
          submenu_id: 1,
          permission_name: values.permission_name,
          notes: values.notes || null,
          metadata: values.metadata ? JSON.parse(values.metadata) : null
        }
      });
      messageApi.success('Permission updated successfully');
      closeEditPermissionModal();
      fetchPermissions();
    } catch (error) {
      messageApi.error('Failed to update permission');
    }
  };

  const confirmDeletePermission = (record: PermissionsResponse) => {
    Modal.confirm({
      title: 'Delete Permission',
      content: 'Are you sure you want to delete this permission?',
      onOk: async () => {
        try {
          await request({
            method: 'DELETE',
            path: '/user-management/permissions/{permission_id}',
            pathParams: { permission_id: record.id },
            query: {
              changed_by: currentUser?.id || 0
            }
          });
          messageApi.success('Permission deleted successfully');
          fetchPermissions();
        } catch (error) {
          messageApi.error('Failed to delete permission');
        }
      }
    });
  };

  const navigateToPreferences = () => {
    navigate('/user-management/preferences');
  };

  const usersColumns = useMemo(() => [
    {
      title: 'User ID',
      dataIndex: 'id',
      key: 'id',
      width: 80
    },
    {
      title: 'Username',
      dataIndex: 'username',
      key: 'username'
    },
    {
      title: 'Email',
      dataIndex: 'email',
      key: 'email'
    },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at'
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: UsersResponse) => (
        <>
          <Button type="link" onClick={() => openEditUserModal(record)}>Edit</Button>
          <Button type="link" danger onClick={() => confirmDeleteUser(record)}>Delete</Button>
        </>
      )
    }
  ], []);

  const rolesColumns = useMemo(() => [
    {
      title: 'Role ID',
      dataIndex: 'id',
      key: 'id',
      width: 80
    },
    {
      title: 'Name',
      dataIndex: 'role_name',
      key: 'role_name'
    },
    {
      title: 'Description',
      dataIndex: 'notes',
      key: 'notes'
    },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at'
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: RolesResponse) => (
        <>
          <Button type="link" onClick={() => openEditRoleModal(record)}>Edit</Button>
          <Button type="link" onClick={() => openRoleHistoryDrawer(record)}>History</Button>
          <Button type="link" danger onClick={() => confirmDeleteRole(record)}>Delete</Button>
        </>
      )
    }
  ], []);

  const permissionsColumns = useMemo(() => [
    {
      title: 'Permission ID',
      dataIndex: 'id',
      key: 'id',
      width: 100
    },
    {
      title: 'Name',
      dataIndex: 'permission_name',
      key: 'permission_name'
    },
    {
      title: 'Description',
      dataIndex: 'notes',
      key: 'notes'
    },
    {
      title: 'Created At',
      dataIndex: 'created_at',
      key: 'created_at'
    },
    {
      title: 'Actions',
      key: 'actions',
      render: (_: unknown, record: PermissionsResponse) => (
        <>
          <Button type="link" onClick={() => openEditPermissionModal(record)}>Edit</Button>
          <Button type="link" onClick={() => openPermissionHistoryDrawer(record)}>History</Button>
          <Button type="link" danger onClick={() => confirmDeletePermission(record)}>Delete</Button>
        </>
      )
    }
  ], []);

  const roleHistoryColumns = useMemo(() => [
    {
      title: 'Change Type',
      dataIndex: 'change_type',
      key: 'change_type'
    },
    {
      title: 'Change Date',
      dataIndex: 'change_date',
      key: 'change_date'
    },
    {
      title: 'Changed By',
      dataIndex: 'changed_by',
      key: 'changed_by'
    },
    {
      title: 'IP Address',
      dataIndex: 'ip_address',
      key: 'ip_address'
    }
  ], []);

  const permissionHistoryColumns = useMemo(() => [
    {
      title: 'Change Type',
      dataIndex: 'change_type',
      key: 'change_type'
    },
    {
      title: 'Change Date',
      dataIndex: 'change_date',
      key: 'change_date'
    },
    {
      title: 'Changed By',
      dataIndex: 'changed_by',
      key: 'changed_by'
    },
    {
      title: 'IP Address',
      dataIndex: 'ip_address',
      key: 'ip_address'
    }
  ], []);

  const rootStyle: CSSProperties = {
    minHeight: '100vh',
    height: '100%',
    width: '100%',
    display: 'flex',
    flexDirection: 'column',
    padding: '24px',
    background: '#f5f5f5'
  };

  const headerStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: '24px'
  };

  const toolbarStyle: CSSProperties = {
    display: 'flex',
    justifyContent: 'space-between',
    marginBottom: '16px'
  };

  const tabItems = [
    {
      key: 'users',
      label: 'Users',
      children: (
        <div>
          <div style={toolbarStyle}>
            <Input.Search
              placeholder="Search by username or email..."
              allowClear
              value={usersSearch}
              onChange={onUsersSearchChange}
              style={{ width: '300px' }}
            />
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreateUserModal}>
              Create User
            </Button>
          </div>
          <Table
            columns={usersColumns}
            dataSource={users}
            rowKey="id"
            pagination={{ pageSize: 20 }}
            loading={loading}
          />
        </div>
      )
    },
    {
      key: 'roles',
      label: 'Roles',
      children: (
        <div>
          <div style={toolbarStyle}>
            <Input.Search
              placeholder="Search by role name..."
              allowClear
              value={rolesSearch}
              onChange={onRolesSearchChange}
              style={{ width: '300px' }}
            />
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreateRoleModal}>
              Create Role
            </Button>
          </div>
          <Table
            columns={rolesColumns}
            dataSource={roles}
            rowKey="id"
            pagination={{ pageSize: 20 }}
            loading={loading}
          />
        </div>
      )
    },
    {
      key: 'permissions',
      label: 'Permissions',
      children: (
        <div>
          <div style={toolbarStyle}>
            <Input.Search
              placeholder="Search by permission name..."
              allowClear
              value={permissionsSearch}
              onChange={onPermissionsSearchChange}
              style={{ width: '300px' }}
            />
            <Button type="primary" icon={<PlusOutlined />} onClick={openCreatePermissionModal}>
              Create Permission
            </Button>
          </div>
          <Table
            columns={permissionsColumns}
            dataSource={permissions}
            rowKey="id"
            pagination={{ pageSize: 20 }}
            loading={loading}
          />
        </div>
      )
    }
  ];

  return (
    <div style={rootStyle}>
      {contextHolder}
      <div style={headerStyle}>
        <Typography.Title level={2} style={{ margin: 0 }}>
          User Management
        </Typography.Title>
        <Button type="default" icon={<SettingOutlined />} onClick={navigateToPreferences}>
          User Preferences
        </Button>
      </div>
      <Tabs activeKey={activeTab} onChange={onTabChange} type="card" items={tabItems} />

      <Modal
        title="Create User"
        open={createUserModalVisible}
        onCancel={closeCreateUserModal}
        onOk={submitCreateUser}
        okText="Create"
      >
        <Form form={createUserForm} layout="vertical">
          <Form.Item name="username" label="Username" rules={[{ required: true, message: 'Username is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email', message: 'Valid email is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="notes" label="Notes">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name="metadata" label="Metadata">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit User"
        open={editUserModalVisible}
        onCancel={closeEditUserModal}
        onOk={submitEditUser}
        okText="Save"
      >
        <Form form={editUserForm} layout="vertical">
          <Form.Item name="username" label="Username" rules={[{ required: true, message: 'Username is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="email" label="Email" rules={[{ required: true, type: 'email', message: 'Valid email is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="notes" label="Notes">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name="metadata" label="Metadata">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Create Role"
        open={createRoleModalVisible}
        onCancel={closeCreateRoleModal}
        onOk={submitCreateRole}
        okText="Create"
      >
        <Form form={createRoleForm} layout="vertical">
          <Form.Item name="role_name" label="Role Name" rules={[{ required: true, message: 'Role name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="notes" label="Description">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name="metadata" label="Permissions (JSON)">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit Role"
        open={editRoleModalVisible}
        onCancel={closeEditRoleModal}
        onOk={submitEditRole}
        okText="Save"
      >
        <Form form={editRoleForm} layout="vertical">
          <Form.Item name="role_name" label="Role Name" rules={[{ required: true, message: 'Role name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="notes" label="Description">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name="metadata" label="Permissions (JSON)">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Create Permission"
        open={createPermissionModalVisible}
        onCancel={closeCreatePermissionModal}
        onOk={submitCreatePermission}
        okText="Create"
      >
        <Form form={createPermissionForm} layout="vertical">
          <Form.Item name="permission_name" label="Permission Name" rules={[{ required: true, message: 'Permission name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="notes" label="Description">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name="metadata" label="Module/Metadata (JSON)">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="Edit Permission"
        open={editPermissionModalVisible}
        onCancel={closeEditPermissionModal}
        onOk={submitEditPermission}
        okText="Save"
      >
        <Form form={editPermissionForm} layout="vertical">
          <Form.Item name="permission_name" label="Permission Name" rules={[{ required: true, message: 'Permission name is required' }]}>
            <Input />
          </Form.Item>
          <Form.Item name="notes" label="Description">
            <Input.TextArea />
          </Form.Item>
          <Form.Item name="metadata" label="Module/Metadata (JSON)">
            <Input.TextArea />
          </Form.Item>
        </Form>
      </Modal>

      <Drawer
        title="Role Change History"
        width={600}
        open={roleHistoryDrawerVisible}
        onClose={closeRoleHistoryDrawer}
      >
        <Table
          columns={roleHistoryColumns}
          dataSource={roleHistory}
          rowKey="id"
          pagination={{ pageSize: 10 }}
          size="small"
        />
      </Drawer>

      <Drawer
        title="Permission Change History"
        width={600}
        open={permissionHistoryDrawerVisible}
        onClose={closePermissionHistoryDrawer}
      >
        <Table
          columns={permissionHistoryColumns}
          dataSource={permissionHistory}
          rowKey="id"
          pagination={{ pageSize: 10 }}
          size="small"
        />
      </Drawer>
    </div>
  );
}