import React from 'react';
import { Layout, Menu } from 'antd';
import { UserOutlined, TeamOutlined, AppstoreOutlined } from '@ant-design/icons';
import { Routes, Route, useNavigate } from 'react-router-dom';
import UserManagement from './UserManagement';
import RoleManagement from './RoleManagement';
import CategoryManagement from './CategoryManagement';

const { Content, Sider } = Layout;

const AdminPanel: React.FC = () => {
  const navigate = useNavigate();

  const menuItems = [
    {
      key: 'users',
      icon: <UserOutlined />,
      label: 'Пользователи',
      onClick: () => navigate('/admin/users')
    },
    {
      key: 'roles',
      icon: <TeamOutlined />,
      label: 'Роли и разрешения',
      onClick: () => navigate('/admin/roles')
    },
    {
      key: 'categories',
      icon: <AppstoreOutlined />,
      label: 'Категории',
      onClick: () => navigate('/admin/categories')
    }
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider width={250} theme="light">
        <Menu
          mode="inline"
          defaultSelectedKeys={['users']}
          style={{ height: '100%', borderRight: 0 }}
          items={menuItems}
        />
      </Sider>
      <Layout style={{ padding: '24px' }}>
        <Content style={{ background: '#fff', padding: 24, margin: 0, minHeight: 280 }}>
          <Routes>
            <Route path="users" element={<UserManagement />} />
            <Route path="roles" element={<RoleManagement />} />
            <Route path="categories" element={<CategoryManagement />} />
          </Routes>
        </Content>
      </Layout>
    </Layout>
  );
};

export default AdminPanel;