import { useState } from 'react';
import { Layout, Menu, Button, Avatar, Dropdown, message } from 'antd';
import { useNavigate, useLocation } from 'react-router-dom';
import { 
  DashboardOutlined, 
  QuestionCircleOutlined, 
  BarChartOutlined,
  UserOutlined,
  LogoutOutlined,
  DatabaseOutlined,
  SafetyOutlined,
  BookOutlined,
  CalendarOutlined,
  TeamOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from '@ant-design/icons';
import { useAdmin } from '../contexts';
import 主要LOGO from '../assets/主要LOGO.svg';
import 正方形LOGO from '../assets/正方形LOGO.svg';

const { Header, Sider, Content, Footer } = Layout;

const AdminLayout = ({ children }: { children: React.ReactNode }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const { admin, clearAdmin } = useAdmin();
  const [collapsed, setCollapsed] = useState(false);

  const menuItems = [
    {
      key: '/admin/dashboard',
      icon: <DashboardOutlined />,
      label: '仪表盘',
    },
    {
      key: '/admin/questions',
      icon: <QuestionCircleOutlined />,
      label: '题库管理',
    },
    {
      key: '/admin/categories',
      icon: <SafetyOutlined />,
      label: '题目类别',
    },
    {
      key: '/admin/subjects',
      icon: <BookOutlined />,
      label: '考试科目',
    },
    {
      key: '/admin/tasks',
      icon: <CalendarOutlined />,
      label: '考试任务',
    },
    {
      key: '/admin/users',
      icon: <TeamOutlined />,
      label: '用户管理',
    },
    
    {
      key: '/admin/statistics',
      icon: <BarChartOutlined />,
      label: '数据统计',
    },
    {
      key: '/admin/backup',
      icon: <DatabaseOutlined />,
      label: '数据备份',
    },
  ];

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

  const handleLogout = () => {
    clearAdmin();
    message.success('退出登录成功');
    navigate('/admin/login');
  };

  const userMenuItems = [
    {
      key: 'logout',
      icon: <LogoutOutlined />,
      label: '退出登录',
      onClick: handleLogout,
    },
  ];

  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider 
        trigger={null} 
        collapsible 
        collapsed={collapsed} 
        theme="light"
        className="shadow-md z-10 fixed left-0 top-0 h-screen overflow-y-auto"
        width={240}
      >
        <div className="h-16 flex items-center justify-center border-b border-gray-100">
          {collapsed ? (
             <img src={正方形LOGO} alt="正方形LOGO" style={{ width: '24px', height: '32px' }} />
          ) : (
            <img src={主要LOGO} alt="主要LOGO" style={{ width: '180px', height: '72px' }} />
          )}
        </div>
        <Menu
          mode="inline"
          selectedKeys={[location.pathname]}
          items={menuItems}
          onClick={handleMenuClick}
          style={{ borderRight: 0 }}
          className="py-4"
        />
      </Sider>
      
      <Layout className="bg-gray-50/50 ml-0 transition-all duration-300" style={{ marginLeft: collapsed ? 80 : 240 }}>
        <Header className="bg-white shadow-sm flex justify-between items-center px-6 h-16 sticky top-0 z-10">
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            className="text-lg w-10 h-10 flex items-center justify-center"
          />
          
          <div className="flex items-center gap-4">
            <span className="text-gray-600 hidden sm:block">
              欢迎您，{admin?.username}
            </span>
            <Dropdown menu={{ items: userMenuItems }} placement="bottomRight" arrow>
              <Avatar 
                icon={<UserOutlined />} 
                className="cursor-pointer bg-mars-100 text-mars-600 hover:bg-mars-200 transition-colors" 
              />
            </Dropdown>
          </div>
        </Header>
        
        <Content className="m-6 flex flex-col pb-20">
          {children}
        </Content>

        <Footer className="bg-white text-center py-1.5 px-2 text-gray-400 text-xs flex flex-col md:flex-row justify-center items-center fixed bottom-0 left-0 right-0 shadow-sm" style={{ marginLeft: collapsed ? 80 : 240, transition: 'margin-left 0.3s' }}>
          <div className="whitespace-nowrap">
            &copy; {new Date().getFullYear()} Boonlive OA System. All Rights Reserved.
          </div>
        </Footer>
      </Layout>
    </Layout>
  );
};

export default AdminLayout;
