import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
// Import styles in the correct order - first base with variables, then Bootstrap, then our custom styles
import './styles/base.scss';
import 'bootstrap';
import './styles/style.scss';
import App from './App.jsx';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import store, { persistor } from './store/store.js';
import { PersistGate } from 'redux-persist/integration/react';
import Loading from './components/Loading.jsx';

// 获取根元素
const rootElement = document.getElementById('root');

// 定义渲染React应用的函数
const renderApp = () => {
    console.log('React应用开始渲染');
    const root = createRoot(rootElement);
    root.render(
        // <StrictMode>
        <PersistGate loading={<Loading />} persistor={persistor}>
            <BrowserRouter>
                <Provider store={store}>
                    <App />
                </Provider>
            </BrowserRouter>
        </PersistGate>
        // </StrictMode>
    );
    console.log('React应用渲染完成');
};

// 协调视频播放和应用加载
const coordinateAppStart = () => {
    // 如果视频已播放完毕，直接显示应用
    if (window.doorAnimationCompleted) {
        console.log('视频已播放完毕，显示应用');
        if (window.showReactApp) {
            window.showReactApp();
        } else {
            // 备用方案：直接修改样式
            if (rootElement) rootElement.style.display = 'block';
            const splash = document.getElementById('root-loading');
            if (splash) splash.style.display = 'none';
        }
    } else {
        console.log('React应用已准备好，等待视频播放完成');
        // 通知视频播放脚本，React已准备好
        window.reactAppReady = true;
    }
};

// 预先加载和渲染React应用，但不显示
renderApp();

// 通知协调脚本React应用已准备好
coordinateAppStart();