import { useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App.tsx';
import { AuthProvider } from './contexts/AuthContext';
import { ThemeProvider } from './contexts/ThemeContext';
import { WindowManagerProvider } from './contexts/WindowManagerContext';
import { WorkspaceProvider } from './contexts/WorkspaceContext';
import { ReportEditorPopup } from './components/ReportEditorPopup';
import { ErrorBoundary } from './components/ErrorBoundary';
import { ConfigErrorScreen } from './components/ConfigErrorScreen';
import { getSupabaseConfigError } from './lib/supabase';
import './index.css'; // Main entry point

if (typeof window !== 'undefined') {
  (window as any).React = React;
  (window as any).ReactDOM = ReactDOM;
}

function AppWithLoadingScreen() {
  useEffect(() => {
    const loadingScreen = document.getElementById('loading-screen');
    if (loadingScreen) {
      setTimeout(() => {
        loadingScreen.classList.add('hidden');
        setTimeout(() => loadingScreen.remove(), 300);
      }, 100);
    }
  }, []);

  const params = new URLSearchParams(window.location.search);
  const isReportEditorPopup = params.get('mode') === 'report-editor';

  if (isReportEditorPopup) {
    return (
      <ErrorBoundary>
        <AuthProvider>
          <ThemeProvider>
            <ReportEditorPopup />
          </ThemeProvider>
        </AuthProvider>
      </ErrorBoundary>
    );
  }

  return (
    <ErrorBoundary>
      <AuthProvider>
        <ThemeProvider>
          <WindowManagerProvider>
            <WorkspaceProvider>
              <App />
            </WorkspaceProvider>
          </WindowManagerProvider>
        </ThemeProvider>
      </AuthProvider>
    </ErrorBoundary>
  );
}

const configError = getSupabaseConfigError();
const root = createRoot(document.getElementById('root')!);

if (configError) {
  const loadingScreen = document.getElementById('loading-screen');
  if (loadingScreen) loadingScreen.remove();
  root.render(<ConfigErrorScreen message={configError} />);
} else {
  root.render(<AppWithLoadingScreen />);
}