import React, { useState } from 'react';
import { Layout, Menu, Button, Input, Avatar, Badge, Switch, ConfigProvider } from 'antd';
import { SearchOutlined, BellOutlined, UserOutlined, MenuFoldOutlined, MenuUnfoldOutlined, HomeOutlined, BarChartOutlined, SafetyOutlined, SettingOutlined, SunOutlined, MoonOutlined, StarOutlined } from '@ant-design/icons';
import { Link, useLocation } from 'react-router-dom';
import './MainLayout.css';

const { Header, Sider, Content } = Layout;
const { Search } = Input;

const MainLayout = ({ children }) => {
  const location = useLocation();
  const [collapsed, setCollapsed] = useState(false);
  const [darkMode, setDarkMode] = useState(false);

  const getSelectedKey = () => {
    const path = location.pathname;
    if (path === '/') return '1';
    if (path === '/watchlist') return '2';
    if (path.includes('/detail/')) return '3';
    if (path === '/risk-control') return '4';
    if (path === '/config') return '5';
    return '1';
  };

  const menuItems = [
    {
      key: '1',
      icon: <HomeOutlined />,
      label: <Link to="/">Dashboard</Link>,
    },
    {
      key: '2',
      icon: <StarOutlined />,
      label: <Link to="/watchlist">自选合约</Link>,
    },
    {
      key: '3',
      icon: <BarChartOutlined />,
      label: <Link to="/detail/AG">详情分析</Link>,
    },
    {
      key: '4',
      icon: <SafetyOutlined />,
      label: <Link to="/risk-control">风控管理</Link>,
    },
    {
      key: '5',
      icon: <SettingOutlined />,
      label: <Link to="/config">配置管理</Link>,
    },
  ];

  const toggleCollapse = () => {
    setCollapsed(!collapsed);
  };

  const toggleDarkMode = () => {
    const newDarkMode = !darkMode;
    setDarkMode(newDarkMode);
    document.body.setAttribute('data-theme', newDarkMode ? 'dark' : 'light');
  };

  // 初始化主题
  React.useEffect(() => {
    document.body.setAttribute('data-theme', darkMode ? 'dark' : 'light');
  }, []);

  return (
    <ConfigProvider
      theme={{
        token: {
          colorScheme: darkMode ? 'dark' : 'light',
        },
        algorithm: darkMode ? ConfigProvider.darkAlgorithm : ConfigProvider.defaultAlgorithm,
      }}
    >
      <Layout style={{ minHeight: '100vh' }}>
        <Header className="header">
          <div className="header-left">
            <Button
              type="text"
              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
              onClick={toggleCollapse}
              style={{
                fontSize: '16px',
                width: 64,
                height: 64,
              }}
            />
            <h1 className="logo">AI期货分析系统</h1>
          </div>
          <div className="header-right">
            <Switch
              checkedChildren={<MoonOutlined />}
              unCheckedChildren={<SunOutlined />}
              checked={darkMode}
              onChange={toggleDarkMode}
              style={{ marginRight: 16 }}
            />
            <Badge count={4} style={{ marginRight: 16 }}>
              <Button type="text" icon={<BellOutlined />} />
            </Badge>
            <Avatar icon={<UserOutlined />} />
          </div>
        </Header>
        <Layout>
          <Sider
            width={200}
            theme={darkMode ? 'dark' : 'light'}
            collapsed={collapsed}
            collapsedWidth={80}
            trigger={null}
            style={{
              transition: 'width 0.3s',
            }}
          >
            <Menu
              mode="inline"
              selectedKeys={[getSelectedKey()]}
              style={{ height: '100%', borderRight: 0 }}
              items={menuItems}
            />
          </Sider>
          <Content className="content">
            <div className="content-inner">
              {children}
            </div>
          </Content>
        </Layout>
      </Layout>
    </ConfigProvider>
  );
};

export default MainLayout;
