// src/layouts/MainLayout.js
// 主布局组件 - 为所有带导航栏的页面提供统一布局
import React, { memo, Suspense } from "react";
import { Outlet } from "react-router-dom";
import { Box, Flex } from '@chakra-ui/react';
import HomeNavbar from "../components/Navbars/HomeNavbar";
import AppFooter from "./AppFooter";
import BackToTopButton from "./components/BackToTopButton";
import ErrorBoundary from "../components/ErrorBoundary";
import PageLoader from "../components/Loading/PageLoader";
import GlobalSidebar from "../components/GlobalSidebar";
import { BACK_TO_TOP_CONFIG, LAYOUT_SIZE, LAYOUT_PADDING } from "./config/layoutConfig";

// ✅ P0 性能优化：缓存静态组件，避免路由切换时不必要的重新渲染
// HomeNavbar (1623行) 和 AppFooter 不依赖路由参数，使用 memo 可大幅减少渲染次数
const MemoizedHomeNavbar = memo(HomeNavbar);
const MemoizedAppFooter = memo(AppFooter);

/**
 * MainLayout - 带导航栏的主布局
 *
 * 使用 <Outlet /> 渲染子路由，确保导航栏只渲染一次
 * 页面切换时只有 Outlet 内的内容会更新，导航栏保持不变
 *
 * 架构优化：
 * - ✅ 组件拆分 - BackToTopButton 独立复用
 * - ✅ 性能优化 - 使用 memo 避免导航栏和页脚重新渲染
 * - ✅ 错误隔离 - ErrorBoundary 包裹页面内容，确保导航栏可用
 * - ✅ 懒加载支持 - Suspense 统一处理懒加载
 * - ✅ 布局简化 - 直接内联容器逻辑，减少嵌套层级
 * - ✅ 全局侧边栏 - 右侧可收起的工具栏（关注股票、事件动态）
 */
export default function MainLayout() {
    return (
        <Box flex="1" h="100vh" w="100%" position="relative" display="flex" flexDirection="column" bg="#1A202C">
            {/* 导航栏 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
            <MemoizedHomeNavbar />

            {/* 主体区域 - 页面内容 + 右侧全局侧边栏（绝对定位覆盖） */}
            <Box flex="1" bg="#1A202C" position="relative" overflow="hidden">
                {/* 页面内容区域 - 全宽度，与导航栏对齐 */}
                <Box h="100%" overflowY="auto" display="flex" flexDirection="column">
                    <Box flex="1" pt={LAYOUT_SIZE.navbarHeight} px={LAYOUT_PADDING.x}>
                        <ErrorBoundary>
                            <Suspense fallback={<PageLoader message="页面加载中..." />}>
                                <Outlet />
                            </Suspense>
                        </ErrorBoundary>
                    </Box>
                    {/* 页脚 - 在滚动区域内，随内容滚动 */}
                    <MemoizedAppFooter />
                </Box>

                {/* 全局右侧工具栏 - 绝对定位覆盖在内容上方 */}
                <Box position="absolute" top={0} right={0} bottom={0}>
                    <GlobalSidebar />
                </Box>
            </Box>

            {/* 返回顶部按钮 - 滚动超过阈值时显示 */}
            {/* <BackToTopButton
                scrollThreshold={BACK_TO_TOP_CONFIG.scrollThreshold}
                position={BACK_TO_TOP_CONFIG.position}
                zIndex={BACK_TO_TOP_CONFIG.zIndex}
            /> */}
        </Box>
    );
}