import React from 'react';
import { Layout, Menu, Button, Avatar, Dropdown, Space } from 'antd';
import { LogoutOutlined, UserOutlined, HomeOutlined, TeamOutlined, LockOutlined, UserAddOutlined, SettingOutlined, ClusterOutlined, ShoppingOutlined, BuildOutlined, ProjectOutlined, DollarOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import { authService } from '../services/auth.service';

const { Header, Content, Sider } = Layout;

const HomePage: React.FC = () => {
  const navigate = useNavigate();
  const user = authService.getUser();

  const handleLogout = () => {
    authService.logout();
    navigate('/login');
  };

  const menu = {
    items: [
      {
        key: 'profile',
        label: (
          <span>
            <UserOutlined /> 个人资料
          </span>
        ),
      },
      {
        key: 'logout',
        label: (
          <span>
            <LogoutOutlined /> 退出登录
          </span>
        ),
        onClick: handleLogout,
      },
    ],
  };

  return (
    <Layout className="min-h-screen">
      <Header className="bg-white shadow-sm px-4">
        <div className="flex items-center justify-between">
          <div className="text-xl font-bold text-blue-600">ERP系统</div>
          <div className="flex items-center">
            <Space>
              <span className="mr-4">欢迎, {user?.name}</span>
              <Dropdown menu={menu} placement="bottomRight">
                <Button type="text" icon={<Avatar icon={<UserOutlined />} />} />
              </Dropdown>
            </Space>
          </div>
        </div>
      </Header>
      <Layout>
        <Sider width={200} className="bg-white">
          <Menu
            mode="inline"
            defaultSelectedKeys={['home']}
            style={{ height: '100%', borderRight: 0 }}
            onClick={({ key }) => {
              switch (key) {
                case 'home':
                  navigate('/');
                  break;
                case 'customers':
                  navigate('/customers');
                  break;
                case 'suppliers':
                  navigate('/suppliers');
                  break;
                case 'subcontractors':
                  navigate('/subcontractors');
                  break;
                case 'projects':
                  navigate('/projects');
                  break;
                case 'finance':
                  navigate('/finance');
                  break;
                default:
                  break;
              }
            }}
          >
            <Menu.Item key="home" icon={<HomeOutlined />}>
              首页
            </Menu.Item>
            <Menu.Item key="customers" icon={<ClusterOutlined />}>
              客户管理
            </Menu.Item>
            <Menu.Item key="suppliers" icon={<ShoppingOutlined />}>
              供应商管理
            </Menu.Item>
            <Menu.Item key="subcontractors" icon={<BuildOutlined />}>
              分包商管理
            </Menu.Item>
            <Menu.Item key="projects" icon={<ProjectOutlined />}>
              项目管理
            </Menu.Item>
            <Menu.Item key="finance" icon={<DollarOutlined />}>
              财务管理
            </Menu.Item>
            <Menu.Item key="users" icon={<TeamOutlined />}>
              用户管理
            </Menu.Item>
            <Menu.Item key="roles" icon={<LockOutlined />}>
              角色管理
            </Menu.Item>
            <Menu.Item key="permissions" icon={<SettingOutlined />}>
              权限管理
            </Menu.Item>
            <Menu.Item key="register" icon={<UserAddOutlined />}>
              用户注册
            </Menu.Item>
          </Menu>
        </Sider>
        <Content className="p-6">
          <div className="bg-white rounded-lg shadow-sm p-6">
            <h1 className="text-xl font-bold mb-4">欢迎使用ERP系统</h1>
            <p>这是系统的主页面，您可以通过左侧菜单访问各个功能模块。</p>
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default HomePage;