import React, { useState, useEffect } from 'react';
import { Layout, Menu, Avatar, Dropdown, message, Button } from 'antd';
import { UserOutlined, LogoutOutlined, HomeOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import { useNavigate, Link } from 'react-router-dom';
// 删除 import './App.css';

const { Header, Content, Footer } = Layout;

function App() {
  const [user, setUser] = useState(null);
  const navigate = useNavigate();

  useEffect(() => {
    // 从localStorage获取用户信息
    const storedUser = localStorage.getItem('user');
    if (storedUser) {
      setUser(JSON.parse(storedUser));
    }
  }, []);

  const handleLogout = () => {
    localStorage.removeItem('token');
    localStorage.removeItem('user');
    message.success('已成功退出登录');
    navigate('/login');
  };

  const userMenu = (
    <Menu>
      <Menu.Item key="profile" icon={<UserOutlined />}>
        个人资料
      </Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout" icon={<LogoutOutlined />} onClick={handleLogout}>
        退出登录
      </Menu.Item>
    </Menu>
  );

  return (
    <Layout className="min-h-screen">
      <Header className="flex items-center px-6">
        <div className="text-white text-xl font-bold mr-6">PT网站</div>
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['1']}>
          <Menu.Item key="1" icon={<HomeOutlined />}>
            <Link to="/">首页</Link>
          </Menu.Item>
          <Menu.Item key="2" icon={<AppstoreOutlined />}>资源</Menu.Item>
          {/* 只对管理员显示管理面板菜单项 */}
          {user?.role === 'admin' && (
            <Menu.Item key="3" icon={<SettingOutlined />}>
              <Link to="/admin">管理面板</Link>
            </Menu.Item>
          )}
        </Menu>
        <div className="ml-auto">
          <Dropdown menu={userMenu} placement="bottomRight">
            <span className="flex items-center cursor-pointer text-white">
              <Avatar src={user?.avatar} icon={<UserOutlined />} />
              <span className="ml-2">{user?.username || '用户'}</span>
              <span className="ml-1 text-xs opacity-80">({user?.role || '游客'})</span>
            </span>
          </Dropdown>
        </div>
      </Header>
      <Content className="p-6">
        <div className="bg-white p-6 min-h-[280px] rounded">
          <h1>欢迎来到PT网站</h1>
          <p>这里是网站的主要内容区域。您可以在这里展示各种资源和信息。</p>
          
          {/* 根据用户角色显示不同内容 */}
          {user?.role === 'admin' && (
            <div className="mt-6 p-4 bg-gray-50 rounded border-l-4 border-blue-500">
              <h2>管理员专区</h2>
              <p>这部分内容只有管理员可以看到。</p>
              <Button type="primary" onClick={() => navigate('/admin')}>
                进入管理面板
              </Button>
            </div>
          )}
          
          {user?.role === 'moderator' && (
            <div className="mt-6 p-4 bg-gray-50 rounded border-l-4 border-green-500">
              <h2>版主专区</h2>
              <p>这部分内容只有版主可以看到。</p>
            </div>
          )}
        </div>
      </Content>
      <Footer className="text-center">
        PT网站 ©{new Date().getFullYear()} 版权所有
      </Footer>
    </Layout>
  );
}

export default App;