import React from 'react';
import { MessageSquare, Settings, Users } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Tabs } from 'antd';
import UserManagement from '../components/admin/UserManagement';
import SystemConfiguration from '../components/admin/SystemConfiguration';
import './AdminManagement.css';

const { TabPane } = Tabs;

const AdminManagement = () => {
  const navigate = useNavigate();

  const handleLogoClick = () => {
    navigate('/dashboard');
  };

  return (
    <div className="admin-management-page">
      <header className="admin-header">
        <div className="header-content">
          <div className="logo" onClick={handleLogoClick} style={{ cursor: 'pointer' }}>
            <MessageSquare className="logo-icon" />
            <span className="logo-text">iMeeting</span>
          </div>
          <h1>平台管理</h1>
        </div>
      </header>
      <div className="admin-content">
        <div className="admin-wrapper">
          <Tabs defaultActiveKey="userManagement" className="admin-tabs">
            <TabPane 
              tab={<span><Users size={16} /> 用户管理</span>} 
              key="userManagement"
            >
              <UserManagement />
            </TabPane>
            <TabPane 
              tab={<span><Settings size={16} /> 系统配置</span>} 
              key="systemConfiguration"
            >
              <SystemConfiguration />
            </TabPane>
          </Tabs>
        </div>
      </div>
    </div>
  );
};


export default AdminManagement;