import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import './llm-fe/platform/nativeSafeArea.css';
import App from './App';
import AppRouter from './llm-fe/platform/AppRouter';
import { initNativeShell } from './llm-fe/platform/initNativeShell';
import { AuthProvider } from './llm-fe/contexts/AuthContext';
import { AccountProvider } from './llm-fe/contexts/AccountContext';
import { WebSocketProvider } from './llm-fe/contexts/WebSocketContext';
import { MaterialUIControllerProvider } from './llm-fe/ui-kit/context';
import { ConversationProvider } from './llm-fe/contexts/ConversationContext';
import { MessageProvider } from './llm-fe/contexts/MessageContext';
import { PreferenceProvider } from './llm-fe/contexts/PreferencesContext';

void initNativeShell();

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <AppRouter>
      <AuthProvider>
        <AccountProvider>
          <WebSocketProvider>
            <PreferenceProvider>
              <ConversationProvider>
                <MessageProvider>
                  <MaterialUIControllerProvider>
                    <App />
                  </MaterialUIControllerProvider>
                </MessageProvider>
              </ConversationProvider>
            </PreferenceProvider>
          </WebSocketProvider>
        </AccountProvider>
      </AuthProvider>
    </AppRouter>
  </React.StrictMode>
);
