// src/components/GlobalComponents.js
// 集中管理应用的全局组件

import React, { useMemo } from 'react';
import { useSelector } from 'react-redux';
import { selectIsMobile } from '@/store/slices/deviceSlice';

// Global Components
import AuthModalManager from './Auth/AuthModalManager';
import NotificationContainer from './NotificationContainer';
import ScrollToTop from './ScrollToTop';

// Bytedesk客服组件
import BytedeskWidget from '../bytedesk-integration/components/BytedeskWidget';
import { getBytedeskConfig } from '../bytedesk-integration/config/bytedesk.config';

/**
 * GlobalComponents - 全局组件容器
 * 集中管理所有全局级别的组件,如弹窗、通知、状态栏等
 *
 * 包含的组件:
 * - ScrollToTop: 路由切换时自动滚动到顶部
 * - AuthModalManager: 认证弹窗管理器
 * - NotificationContainer: 通知容器（仅桌面端渲染）
 * - BytedeskWidget: Bytedesk在线客服
 *
 * 注意:
 * - ConnectionStatusBar 已移除（所有端）
 * - NotificationContainer 在移动端不渲染（通知功能已在 NotificationContext 层禁用）
 */
export function GlobalComponents() {
    const isMobile = useSelector(selectIsMobile);

    // ✅ 缓存 Bytedesk 配置对象，避免每次渲染都创建新引用导致重新加载
    const bytedeskConfigMemo = useMemo(() => getBytedeskConfig(), []);

    return (
        <>
            {/* 路由切换时自动滚动到顶部 */}
            <ScrollToTop />

            {/* 认证弹窗管理器 */}
            <AuthModalManager />

            {/* 通知容器（仅桌面端渲染） */}
            {!isMobile && <NotificationContainer />}

            {/* Bytedesk在线客服 - 使用缓存的配置对象 */}
            <BytedeskWidget
                config={bytedeskConfigMemo}
                autoLoad={true}
            />
        </>
    );
}

export default GlobalComponents;