import { useState } from 'react';
import { Layout, Menu, Button, Avatar, Dropdown, App, ConfigProvider, theme } 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 { message } = App.useApp();
  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 (
    <ConfigProvider
      theme={{
        algorithm: theme.darkAlgorithm,
        token: {
          colorPrimary: '#22D3EE', // Cyan-400
          colorBgContainer: 'rgba(255, 255, 255, 0.05)',
          colorBgElevated: 'rgba(30, 41, 59, 0.95)', // Slate-800
          borderRadius: 12,
          colorText: 'rgba(255, 255, 255, 0.9)',
          colorTextSecondary: 'rgba(255, 255, 255, 0.65)',
        },
        components: {
          Layout: {
            bodyBg: 'transparent',
            headerBg: 'rgba(255, 255, 255, 0.03)',
            siderBg: 'rgba(255, 255, 255, 0.03)',
          },
          Menu: {
            itemBg: 'transparent',
            itemSelectedBg: 'rgba(34, 211, 238, 0.15)',
            itemSelectedColor: '#22D3EE',
          },
          Table: {
            headerBg: 'rgba(255, 255, 255, 0.05)',
            headerColor: 'rgba(255, 255, 255, 0.85)',
            rowHoverBg: 'rgba(255, 255, 255, 0.08)',
          },
        },
      }}
    >
      <Layout style={{ minHeight: '100vh', background: '#0A1628', position: 'relative', overflow: 'hidden' }}>
        {/* Ambient Background Effects */}
        <div className="fixed top-0 left-0 w-full h-full overflow-hidden pointer-events-none z-0">
          <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-blue-600/10 rounded-full blur-[120px]" />
          <div className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-cyan-600/10 rounded-full blur-[120px]" />
        </div>

        <Sider 
          trigger={null} 
          collapsible 
          collapsed={collapsed} 
          width={240}
          className="z-10 border-r border-white/5 backdrop-blur-md"
          style={{
            background: 'rgba(255, 255, 255, 0.02)',
          }}
        >
          <div className="flex items-center justify-center py-6 px-4">
            <img 
              src={collapsed ? 正方形LOGO : 主要LOGO} 
              alt="Logo" 
              className={`transition-all duration-300 ${collapsed ? 'w-10' : 'h-10'}`}
              style={{ filter: 'brightness(0) invert(1)' }}
            />
          </div>
          <Menu
            mode="inline"
            selectedKeys={[location.pathname]}
            items={menuItems}
            onClick={handleMenuClick}
            className="border-none px-2"
          />
        </Sider>
        
        <Layout className="z-10 bg-transparent">
          <Header 
            className="flex items-center justify-between px-6 border-b border-white/5 backdrop-blur-md sticky top-0 z-20"
            style={{
              padding: 0,
              background: 'rgba(255, 255, 255, 0.02)',
              height: 64,
            }}
          >
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={() => setCollapsed(!collapsed)}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
                color: 'rgba(255, 255, 255, 0.85)',
              }}
            />
            
            <div className="flex items-center gap-4 px-6">
              <span className="text-white/80 text-sm hidden sm:inline-block">
                欢迎回来，{admin?.username}
              </span>
              <Dropdown menu={{ items: userMenuItems }} placement="bottomRight" arrow>
                <div className="flex items-center gap-2 cursor-pointer hover:bg-white/5 px-3 py-2 rounded-lg transition-colors">
                  <Avatar 
                    style={{ backgroundColor: '#22D3EE', verticalAlign: 'middle' }} 
                    icon={<UserOutlined />} 
                    size="small"
                  />
                  <span className="text-white/90 font-medium hidden sm:inline-block">
                    管理员
                  </span>
                </div>
              </Dropdown>
            </div>
          </Header>
          
          <Content className="m-6 overflow-hidden flex flex-col">
            <div className="flex-1 overflow-auto custom-scrollbar">
              {children}
            </div>
          </Content>
          
          <Footer className="text-center bg-transparent text-white/30 py-4">
            Survey System ©{new Date().getFullYear()} Created by BLV
          </Footer>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

export default AdminLayout;
