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

const AdminManagement = () => {
  const [activeTab, setActiveTab] = useState('userManagement');
  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">
          <div className="tabs">
            <button 
              className={`tab-btn ${activeTab === 'userManagement' ? 'active' : ''}`}
              onClick={() => setActiveTab('userManagement')}
            >
              <Users size={18} style={{ marginRight: '0.5rem' }} />
              用户管理
            </button>
            <button 
              className={`tab-btn ${activeTab === 'systemConfiguration' ? 'active' : ''}`}
              onClick={() => setActiveTab('systemConfiguration')}
            >
              <Settings size={18} style={{ marginRight: '0.5rem' }} />
              系统配置
            </button>
          </div>
          <div className="tab-content">
            {activeTab === 'userManagement' && <UserManagement />}
            {activeTab === 'systemConfiguration' && <SystemConfiguration />}
          </div>
        </div>
      </div>
    </div>
  );
};

export default AdminManagement;