import React, { useState } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import {
  DashboardOutlined,
  FileTextOutlined,
  UserOutlined,
  BarChartOutlined,
} from '@ant-design/icons';
import Header from './Header';

const Sidebar = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  const { user } = JSON.parse(localStorage.getItem('user') || '{}');

  const menuItems = [
    {
      key: '/dashboard',
      icon: <DashboardOutlined />,
      label: '仪表盘',
    },
    {
      key: '/projects',
      icon: <FileTextOutlined />,
      label: '项目管理',
    },
    ...(user?.role === 'admin' ? [
      {
        key: '/users',
        icon: <UserOutlined />,
        label: '用户管理',
      },
    ] : []),
    {
      key: '/statistics',
      icon: <BarChartOutlined />,
      label: '项目统计',
    },
  ];

  const handleMenuClick = ({ key }) => {
    navigate(key);
  };

  return (
    <>
      <Header />
      <div className="layout-sider">
        <div style={{ padding: '16px' }}>
          <h3 style={{ margin: 0, fontSize: '16px', color: '#001529' }}>
            �单
          </h3>
        </div>
        {menuItems.map((item) => (
          <div
            key={item.key}
            className={`menu-item ${
              location.pathname === item.key ? 'active' : ''
            }`}
            onClick={() => handleMenuClick(item)}
            style={{
              padding: '12px 24px',
              display: 'flex',
              alignItems: 'center',
              gap: '10px',
              color: location.pathname === item.key ? '#1890ff' : '#666',
              cursor: 'pointer',
              transition: 'all 0.3s',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = '#e6f7ff';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = 'transparent';
            }}
          >
            {item.icon}
            <span>{item.label}</span>
          </div>
        ))}
      </div>
      <div className="layout-content">
        <Outlet />
      </div>
    </>
  );
};

export default Sidebar;
