import React, { useEffect, useState } from 'react';
import Header from './components/Header';
import HeaderOld from '@/layouts/Header';
import LeftSidebar from './components/LeftSidebar';
import MapContainer from './components/MapContainer';
import VideoCarousel from './components/VideoCarousel';
import RightContent from './components/RightContent';
import { DashboardProvider, useDashboard } from './components/context';
import RestaurantOil from './components/SubPages/RestaurantOil';
import Environment from './components/SubPages/Environment';
import Municipal from './components/SubPages/Municipal';
import LandscapeLighting from './components/SubPages/LandscapeLighting';
import LawEnforcementPunishment from './components/SubPages/LawEnforcementPunishment';
import LawEnforcementCoordination from './components/SubPages/LawEnforcementCoordination';
import LawEnforcementPatrol from './components/SubPages/LawEnforcementPatrol';
import DomesticWaste from './components/SubPages/DomesticWaste';
import ConstructionWaste from './components/SubPages/ConstructionWaste';
import CityAppearance from './components/SubPages/CityAppearance';
import VideoKeyAreas from './components/SubPages/VideoKeyAreas';
import VideoBackStreets from './components/SubPages/VideoBackStreets';
import VideoFarmersMarket from './components/SubPages/VideoFarmersMarket';
import VideoSubwayEntrances from './components/SubPages/VideoSubwayEntrances';
import OverallSituation from './components/SubPages/OverallSituation';
import classNames from 'classnames';
import styles from './index.less';
import { MapStateProvider } from './components/MapStateContext';

// 子页面内容组件
const PageContent: React.FC = () => {
  const { activePage, isTransitioning, transitionDirection } = useDashboard();
  const [prevPage, setPrevPage] = useState<string>('home');
  const [visiblePages, setVisiblePages] = useState<Set<string>>(new Set(['home']));

  // 当activePage改变时，更新可见页面列表
  useEffect(() => {
    // 如果是切换到新页面，先将新页面添加到可见列表
    if (activePage !== prevPage) {
      setVisiblePages(prev => {
        const newSet = new Set(prev);
        newSet.add(activePage);
        return newSet;
      });
      
      // 短暂延迟后移除之前的页面（等待过渡动画完成）
      setTimeout(() => {
        if (activePage !== 'home' && prevPage !== 'home') {
          setVisiblePages(prev => {
            const newSet = new Set(prev);
            newSet.delete(prevPage);
            return newSet;
          });
        }
        setPrevPage(activePage);
      }, 1000);
    }
  }, [activePage, prevPage]);

  // 主页内容
  const renderHomeContent = () => {
    const isHomePage = activePage === 'home';
    const isHomeTransitioning = isTransitioning && (activePage === 'home' || prevPage === 'home');
    
    // 确定左侧边栏样式
    const leftSidebarStyle = {
      transform: !isHomePage || (isHomeTransitioning && transitionDirection === 'in')
        ? 'translateX(-110%)'
        : isHomeTransitioning && transitionDirection === 'out'
          ? 'translateX(-110%)'
          : 'translateX(0)'
    };
    
    // 确定右侧内容样式
    const rightContentStyle = {
      transform: !isHomePage || (isHomeTransitioning && transitionDirection === 'in')
        ? 'translateX(110%)'
        : isHomeTransitioning && transitionDirection === 'out'
          ? 'translateX(110%)'
          : 'translateX(0)'
    };
    
    return (
      <>
        <div 
          className={styles.leftSidebar} 
          style={leftSidebarStyle}
        >
          <LeftSidebar />
        </div>
        <div className={styles.centerContainer}>
          <div className={classNames(styles.mapContainer, {
            [styles.mapContainer_expand]: activePage !== 'home'
          })}>
            <MapContainer />
          </div>
          <div className={classNames(styles.videoCarousel, {
            [styles.videoCarousel_exit]: activePage !== 'home' && transitionDirection === 'in',
            [styles.videoCarousel_enter]: activePage === 'home' && transitionDirection === 'out'
          })}>
            <VideoCarousel />
          </div>
        </div>
        <div 
          className={styles.rightContent}
          style={rightContentStyle}
        >
          <RightContent />
        </div>
      </>
    );
  };

  // 渲染子页面
  const renderSubPage = (pageId: string, Component: React.ComponentType<{ visible: boolean }>) => {
    return visiblePages.has(pageId) && (
      <div 
        className={classNames(styles.subPageContainer, {
          [styles.subPage_enter]: activePage === pageId && isTransitioning && transitionDirection === 'in',
          [styles.subPage_active]: activePage === pageId && !isTransitioning,
          [styles.subPage_exit]: activePage !== pageId && isTransitioning && transitionDirection === 'out',
          [styles.hidden]: activePage !== pageId && !isTransitioning && !visiblePages.has(pageId)
        })}
      >
        <Component visible={activePage === pageId} />
      </div>
    );
  };

  return (
    <>
      {/* 首页 */}
      {visiblePages.has('home') && renderHomeContent()}
      
      {/* 餐饮油烟子页面 */}
      {renderSubPage('restaurantOil', RestaurantOil)}
      
      {/* 环境卫生子页面 */}
      {renderSubPage('environment', Environment)}
      
      {/* 市政设施子页面 */}
      {renderSubPage('municipal', Municipal)}
      
      {/* 景观照明子页面 */}
      {renderSubPage('landscapeLighting', LandscapeLighting)}
      
      {/* 执法管理子页面 */}
      {renderSubPage('lawEnforcementPunishment', LawEnforcementPunishment)}
      {renderSubPage('lawEnforcementCoordination', LawEnforcementCoordination)}
      {renderSubPage('lawEnforcementPatrol', LawEnforcementPatrol)}
      
      {/* 生活垃圾子页面 */}
      {renderSubPage('domesticWaste', DomesticWaste)}
      
      {/* 建筑垃圾子页面 */}
      {renderSubPage('constructionWaste', ConstructionWaste)}
      
      {/* 市容秩序子页面 */}
      {renderSubPage('cityAppearance', CityAppearance)}
      
      {/* 视频监控-重点区域子页面 */}
      {renderSubPage('videoKeyAreas', VideoKeyAreas)}
      
      {/* 视频监控-背街小巷子页面 */}
      {renderSubPage('videoBackStreets', VideoBackStreets)}
      
      {/* 视频监控-农贸市场子页面 */}
      {renderSubPage('videoFarmersMarket', VideoFarmersMarket)}
      
      {/* 视频监控-地铁口子页面 */}
      {renderSubPage('videoSubwayEntrances', VideoSubwayEntrances)}
      
      {/* 整体概况子页面 */}
      {renderSubPage('overallSituation', OverallSituation)}
    </>
  );
};

const Home_v_2504: React.FC = () => {
  return (
    <DashboardProvider>
      <MapStateProvider>
        <div className={styles.container}>
          <Header />
          {/* <HeaderOld /> */}
          <div className={styles.content}>
            <PageContent />
          </div>
        </div>
      </MapStateProvider>
    </DashboardProvider>
  );
};

export default Home_v_2504; 