// src/layouts/MainLayout.js
// 主布局组件 - 为所有带导航栏的页面提供统一布局
import React, { memo, Suspense } from "react";
import { Outlet } from "react-router-dom";
import { Box } 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 { BACK_TO_TOP_CONFIG } 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 />

            {/* 页面内容区域 - flex: 1 占据剩余空间，包含错误边界、懒加载 */}
            <Box flex="1" pt="60px" bg="#1A202C">
                <ErrorBoundary>
                    <Suspense fallback={<PageLoader message="页面加载中..." />}>
                        <Outlet />
                    </Suspense>
                </ErrorBoundary>
            </Box>

            {/* 页脚 - 在所有页面间共享，memo 后不会在路由切换时重新渲染 */}
            <MemoizedAppFooter />

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