import React, { useState } from 'react';
import { Layout as AntLayout, Menu, ConfigProvider, theme, Drawer, Button } from 'antd';
import { RobotOutlined, MenuOutlined, AppstoreOutlined, EyeOutlined } from '@ant-design/icons';
import { useNavigate, useLocation } from 'react-router-dom';
import ParticleBackground from './ParticleBackground';
import { motion, AnimatePresence } from 'framer-motion';

const { Header, Content, Footer } = AntLayout;

const Layout = ({ children }) => {
  const navigate = useNavigate();
  const location = useLocation();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  const items = [
    {
      key: '/',
      icon: <RobotOutlined />,
      label: 'AI 硬件',
    },
    {
      key: '/services',
      icon: <AppstoreOutlined />,
      label: 'AI 服务',
    },
    {
      key: '/ar',
      icon: <EyeOutlined />,
      label: 'AR 体验',
    },
  ];

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

  return (
    <ConfigProvider
      theme={{
        algorithm: theme.darkAlgorithm,
        token: {
          colorPrimary: '#00b96b',
          colorBgContainer: 'transparent',
          colorBgLayout: 'transparent',
          fontFamily: "'Orbitron', sans-serif",
        },
      }}
    >
      <ParticleBackground />
      <AntLayout style={{ minHeight: '100vh', background: 'transparent' }}>
        <Header 
          style={{ 
            position: 'fixed', 
            top: 0,
            left: 0,
            zIndex: 1000, 
            width: '100%', 
            padding: 0,
            background: 'rgba(0, 0, 0, 0.5)',
            backdropFilter: 'blur(10px)',
            borderBottom: '1px solid rgba(255, 255, 255, 0.1)',
            display: 'flex',
            justifyContent: 'center'
          }}
        >
          <div style={{ 
            width: '100%', 
            maxWidth: '1440px', 
            padding: '0 20px', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'space-between',
            height: '100%'
          }}>
          <motion.div 
            initial={{ opacity: 0, x: -20 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ duration: 0.5 }}
            style={{ 
              color: '#fff', 
              fontSize: '20px', 
              fontWeight: 'bold', 
              display: 'flex', 
              alignItems: 'center', 
              cursor: 'pointer' 
            }}
            onClick={() => navigate('/')}
          >
            <img src="/liangji_white.png" alt="Quant-Speed Logo" style={{ height: '32px' }} />
          </motion.div>

          {/* Desktop Menu */}
          <div className="desktop-menu" style={{ display: 'none' }}>
            <Menu
              theme="dark"
              mode="horizontal"
              selectedKeys={[location.pathname]}
              items={items}
              onClick={(e) => handleMenuClick(e.key)}
              style={{ background: 'transparent', borderBottom: 'none', minWidth: 300 }}
            />
          </div>
          <style>{`
            @media (min-width: 768px) {
              .desktop-menu { display: block !important; }
              .mobile-menu-btn { display: none !important; }
            }
          `}</style>

          {/* Mobile Menu Button */}
          <Button 
            className="mobile-menu-btn"
            type="text" 
            icon={<MenuOutlined style={{ color: '#fff', fontSize: 20 }} />} 
            onClick={() => setMobileMenuOpen(true)}
          />
          </div>
        </Header>

        {/* Mobile Drawer Menu */}
        <Drawer
          title={<span style={{ color: '#00b96b' }}>导航菜单</span>}
          placement="right"
          onClose={() => setMobileMenuOpen(false)}
          open={mobileMenuOpen}
          styles={{ body: { padding: 0, background: '#111' }, header: { background: '#111', borderBottom: '1px solid #333' }, wrapper: { width: 250 } }}
        >
          <Menu
            theme="dark"
            mode="vertical"
            selectedKeys={[location.pathname]}
            items={items}
            onClick={(e) => handleMenuClick(e.key)}
            style={{ background: 'transparent', borderRight: 'none' }}
          />
        </Drawer>

        <Content style={{ marginTop: 64, padding: '24px', overflowX: 'hidden' }}>
          <AnimatePresence mode="wait">
            <motion.div
              key={location.pathname}
              initial={{ opacity: 0, y: 20, filter: 'blur(10px)' }}
              animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}
              exit={{ opacity: 0, y: -20, filter: 'blur(10px)' }}
              transition={{ duration: 0.3 }}
            >
              {children}
            </motion.div>
          </AnimatePresence>
        </Content>

        <Footer style={{ textAlign: 'center', background: 'rgba(0,0,0,0.5)', color: '#666', backdropFilter: 'blur(5px)' }}>
          Quant-Speed AI Hardware ©{new Date().getFullYear()} Created by Quant-Speed Tech
        </Footer>
      </AntLayout>
    </ConfigProvider>
  );
};

export default Layout;