import * as React from 'react';
import { useMatches, useLocation, Outlet, useNavigate } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Layout, Divider } from 'antd';
import Header from './components/Header';
import Nav from './components/Nav';
import Breadcrumb from './components/Breadcrumb';
import EntryModal from './components/EntryModal';
import store from './store';
import LocalStorage from '@/LocalStorage';
import './style.less';

const { Content } = Layout;

const LayoutApp: React.FC = () => {
  const navigate = useNavigate(); // 添加useNavigate hook
  const {
    state,
    onClickLogout,
    onChangeSelectedKey,
    onOpenChange,
    onClickCollapsed,
    init,
    reset
  } = store;
  const {
    routerMatchList,
    userName,
    collapsed,
    selectedKey,
    openKeys,
  } = state;

  const matches = useMatches();
  const location = useLocation();
  const isHelp = location.pathname.startsWith('/help');

  React.useEffect(() => {
    const list = matches.filter((item: any) => item.handle?.menuLevel && item.handle?.breadcrumbName).map((item: any) => {
      return {
        path: item.pathname,
        menuLevel: item.handle.menuLevel,
        breadcrumbName: item.handle.breadcrumbName,
      }
    });
    init(list);
  }, [matches]);

  const currentMenuType = LocalStorage.getMenuType();
  const [entryModalOpen, setEntryModalOpen] = React.useState(false);

  React.useEffect(() => {
    LocalStorage.setMenuType(1);

    if (currentMenuType === 0) {
      // setEntryModalOpen( true );
    }
    return () => reset();
  }, []);

  // 统一管理菜单类型状态
  const [menuType, setMenuType] = React.useState(1 || (location.pathname.startsWith('/deepseek') ? 1 : 2));

  // 处理菜单类型变化
  const handleSelectChange = (value: number) => {
    setMenuType(value);
    const defaultPath = value === 1 ? '/deepseek/questionAnswer' : '/zhipu/questionAnswer';
    // 使用navigate进行路由跳转
    navigate(defaultPath);
    // 同时更新selectedKey
    onChangeSelectedKey(defaultPath, 1);
  };

  // 添加路由变化监听
  React.useEffect(() => {
    const path = location.pathname;
    const type = path.startsWith('/deepseek') ? 1 : 2;
    setMenuType(type);

    // 确保selectedKey与当前路由同步
    if (path !== selectedKey) {
      onChangeSelectedKey(path, 1);
    }
  }, [location.pathname]);

  return (
    <Layout style={{
      minHeight: '100vh',
      overflow: 'auto',
      display: 'flex',
      flexDirection: 'column',
      backgroundColor: '#fff'
    }}>
      <Header
        userName={userName}
        onClickLogout={onClickLogout}
        onSelectChange={handleSelectChange} // 传递回调函数
        currentMenuType={menuType}
      />
      <div style={{ display: 'flex', marginTop: '64px', backgroundColor: '#fff' }}>
        { !isHelp && (
          <Nav
            selectedKey={selectedKey}
            onChangeSelectedKey={onChangeSelectedKey}
            openKeys={openKeys}
            onOpenChange={onOpenChange}
            collapsed={collapsed}
            onClickCollapsed={onClickCollapsed}
            menuType={menuType}
          />
        ) }
        <Layout style={{
          marginLeft: isHelp ? '0' : (collapsed ? '80px' : '200px'),
          width: isHelp ? '100%' : (collapsed ? 'calc(100% - 80px)' : 'calc(100% - 200px)'),
          backgroundColor: '#fff',
          minHeight: 'calc(100vh - 64px)',
          transition: 'all 0.2s ease'
        }}>

          <Content className='main-content'>
            {(!isHelp) && (
              location.pathname === '/404' ?
                <div style={{ width: '100%', height: 20 }}></div> :
                <Breadcrumb routerMatchList={routerMatchList} />
            )}
            <div className='content-scroll-area'>
              <Outlet />
            </div>
          </Content>
        </Layout>
      </div>
      {
        entryModalOpen &&
        <EntryModal
          open={entryModalOpen}
          onClickConfirm={(type) => {
            handleSelectChange(type);
            setEntryModalOpen(false);
            LocalStorage.setMenuType(type);
          }}
        />
      }
    </Layout>
  );
};

export default observer(LayoutApp);