import React, { useState } from 'react';
import { Layout, Menu, Avatar, Dropdown, Space } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import {
  DashboardOutlined,
  GiftOutlined,
  CalendarOutlined,
  TeamOutlined,
  BarChartOutlined,
  SettingOutlined,
  UserOutlined,
  LogoutOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
} from '@ant-design/icons';
import { logout } from '../store/slices/authSlice';

const { Header, Sider, Content } = Layout;

const LayoutComponent = ({ children }) => {
  const [collapsed, setCollapsed] = useState(false);
  const [openKeys, setOpenKeys] = useState([]);
  const navigate = useNavigate();
  const location = useLocation();
  const dispatch = useDispatch();
  const { user } = useSelector((state) => state.auth);

  const menuItems = [
    {
      key: '/dashboard',
      icon: <DashboardOutlined />,
      label: '主控制台',
    },
    {
      key: '/points/rules',
      icon: <GiftOutlined />,
      label: '申报项目设置',
    },
    {
      key: '/activities',
      icon: <CalendarOutlined />,
      label: '活动列表',
    },
    {
      key: '/volunteers',
      icon: <TeamOutlined />,
      label: '志愿者列表',
    },
    {
      key: '/volunteers/points',
      icon: <TeamOutlined />,
      label: '积分查询',
    },
    {
      key: '/statistics/overview',
      icon: <BarChartOutlined />,
      label: '数据概览',
    },
    {
      key: 'system',
      icon: <SettingOutlined />,
      label: '系统管理',
      children: [
        {
          key: '/system/admins',
          icon: <UserOutlined />,
          label: '管理员管理',
        },
        {
          key: '/system/users',
          icon: <UserOutlined />,
          label: '用户管理',
        },
        {
          key: '/system/permissions',
          icon: <SettingOutlined />,
          label: '权限管理',
        },
        {
          key: '/system/settings',
          icon: <SettingOutlined />,
          label: '系统设置',
        },
      ],
    },
  ];

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

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

  const userMenuItems = [
    {
      key: 'profile',
      icon: <UserOutlined />,
      label: '个人资料',
    },
    {
      type: 'divider',
    },
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: handleLogout,
    },
  ];

  const getSelectedKeys = () => {
    const pathname = location.pathname;
    return [pathname];
  };

  const handleOpenChange = (keys) => {
    setOpenKeys(keys);
  };

  // 当路由变化时，自动展开对应的菜单
  React.useEffect(() => {
    const pathname = location.pathname;
    if (pathname.startsWith('/system')) {
      setOpenKeys(['system']);
    }
  }, [location.pathname]);

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider trigger={null} collapsible collapsed={collapsed} theme="dark">
        <div className="logo">
          {collapsed ? '志愿' : '志愿者管理系统'}
        </div>
        <Menu
          theme="dark"
          mode="inline"
          selectedKeys={getSelectedKeys()}
          openKeys={openKeys}
          onOpenChange={handleOpenChange}
          items={menuItems}
          onClick={handleMenuClick}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: () => setCollapsed(!collapsed),
              style: { fontSize: '18px', padding: '0 24px', cursor: 'pointer' },
            })}
          </div>
          <div style={{ marginRight: 24 }}>
            <Dropdown menu={{ items: userMenuItems }} placement="bottomRight">
              <Space style={{ cursor: 'pointer' }}>
                <Avatar icon={<UserOutlined />} />
                <span>{user?.name || '管理员'}</span>
              </Space>
            </Dropdown>
          </div>
        </Header>
        <Content className="content-layout">
          {children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default LayoutComponent;