// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router } from 'react-router-dom';

// ⚡ 性能监控：在应用启动时尽早标记
import { performanceMonitor } from './utils/performanceMonitor';

// T0: HTML 加载完成时间点
if (document.readyState === 'complete') {
  performanceMonitor.mark('html-loaded');
} else {
  window.addEventListener('load', () => {
    performanceMonitor.mark('html-loaded');
  });
}

// T1: React 开始初始化
performanceMonitor.mark('app-start');

// ⚡ 已删除 brainwave.css（项目未安装 Tailwind CSS，该文件无效）
// import './styles/brainwave.css';

// 导入 Select 下拉框颜色修复样式
import './styles/select-fix.css';

// 导入 Bytedesk 客服系统 z-index 覆盖样式（必须在所有样式之后导入）
import './styles/bytedesk-override.css';

// Import the main App component
import App from './App';

// 导入通知服务并挂载到 window（用于调试）
import { browserNotificationService } from './services/browserNotificationService';
window.browserNotificationService = browserNotificationService;

// 🔧 条件导入调试工具（生产环境可选）
// 开启方式: 在 .env 文件中设置 REACT_APP_ENABLE_DEBUG=true
// 移除方式: 删除此段代码 + 删除 src/devtools/ 目录
if (process.env.REACT_APP_ENABLE_DEBUG === 'true') {
    import('./devtools').then(({ debugToolkit }) => {
        debugToolkit.init();
        console.log(
            '%c✅ 调试工具已加载！使用 window.__DEBUG__.help() 查看命令',
            'color: #4CAF50; font-weight: bold; font-size: 14px;'
        );
    });
}

// 注册 Service Worker（用于支持浏览器通知）
function registerServiceWorker() {
    // ⚠️ Mock 模式下跳过 Service Worker 注册（避免与 MSW 冲突）
    if (process.env.REACT_APP_ENABLE_MOCK === 'true') {
        return;
    }

    // 仅在支持 Service Worker 的浏览器中注册
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker
                .register('/service-worker.js')
                .catch((error) => {
                    console.error('[App] Service Worker 注册失败:', error.message);
                });
        });
    }
}

// 渲染应用
function renderApp() {
    const root = ReactDOM.createRoot(document.getElementById('root'));

    // StrictMode 已启用（Chakra UI 2.10.9+ 已修复兼容性问题）
    root.render(
        <React.StrictMode>
            <Router
                future={{
                    // v7_startTransition: true, // 禁用：导致路由切换延迟2秒，影响用户体验
                    v7_relativeSplatPath: true,
                }}
            >
                <App />
            </Router>
        </React.StrictMode>
    );

    // 注册 Service Worker（非 Mock 模式）
    registerServiceWorker();
}

// 启动应用
async function startApp() {
    // ✅ 开发环境 Mock 模式：先启动 MSW，再渲染应用
    // 确保所有 API 请求（包括 AuthContext.checkSession）都被正确拦截
    if (process.env.NODE_ENV === 'development' && process.env.REACT_APP_ENABLE_MOCK === 'true') {
        try {
            const { startMockServiceWorker } = await import('./mocks/browser');
            await startMockServiceWorker();
        } catch (error) {
            console.error('[MSW] 启动失败:', error);
        }
    }

    // 渲染应用
    renderApp();
}

// 启动应用
startApp();