import React, { useState, useEffect } from 'react';
import Header from './components/Layouts/Header';
import SiQuan from './components/Business/SiQuan';
import SiZhi from './components/Business/SiZhi';
import SiYu from './components/Business/SiYu';
import SiGuan from './components/Business/SiGuan';
import MapCtrl from './MapCtrl/index'
import MapToolBox from './mapToolBox'
import './index.less';

const HomePage = () => {
  const [activeMenu, setActiveMenu] = useState('siquan');
  const [userInfo, setUserInfo] = useState({ userName: '系统管理员' });
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    // 兼容 Hash 路由模式：参数可能跟在 # 后面 (例如 /#/home?token=...)
    let queryString = window.location.search;
    if (window.location.hash.indexOf('?') > -1) {
      queryString = window.location.hash.split('?')[1];
    }
    const params = new URLSearchParams(queryString);
    
    const token = params.get('access_token');
    const userName = params.get('userName');
    const userId = params.get('userId');

    if (token) localStorage.setItem('access_token', token);
    if (userId) localStorage.setItem('userId', userId);

    // 优先使用 URL 参数中的用户名，其次读取本地存储，最后默认
    const finalUserName = userName || localStorage.getItem('userName') || '系统管理员';
    if (userName) localStorage.setItem('userName', userName);
    
    setUserInfo({ userName: finalUserName });
    setIsReady(true);
  }, []);

  const renderContent = () => {
    if (!isReady) return null;  //状态提升，防止跳过来的参数，不能及时渲染
    switch (activeMenu) {
      case 'siquan':
        return <SiQuan />;
      case 'sizhi':
        return <SiZhi />;
      case 'siyu':
        return <SiYu />;
      case 'siguan':
        return <SiGuan />;
      default:
        return <SiQuan />;
    }
  };

  return (
    // style={{position:"relative"}} 这段以后写在.home-page里
    <div className="home-page" style={{position:"relative"}}>
      <Header activeMenu={activeMenu} onMenuChange={setActiveMenu} userName={userInfo.userName} />
      <div className="main-content-wrapper">
        <div className="content-overlay">
          {renderContent()}
        </div>
      </div>


      {/* 地图相关 */}
      <div style={{ height: '100%',width:'100%', position: 'absolute',overflow:'hidden'}}>
        {/* 地图 */}
        <MapCtrl/>

        {/* 控制按钮 */}
        <MapToolBox/>
      </div>
    </div>
  )
}

export default HomePage;