import { createRoot } from "react-dom/client";
import React, { Suspense, lazy } from "react";
import "./index.css";

// Lazy load App to ensure main.tsx can execute even if App has import errors
const App = lazy(() => import("./App"));

const LoadingScreen = () => (
  <div style={{
    height: '100vh', 
    width: '100vw', 
    backgroundColor: 'blue', 
    display: 'flex', 
    alignItems: 'center', 
    justifyContent: 'center', 
    color: 'white', 
    fontSize: '24px',
    fontFamily: 'monospace',
    position: 'fixed',
    top: 0,
    left: 0,
    zIndex: 9999
  }}>
    <div className="animate-pulse">INITIALIZING AETHEX OS...</div>
  </div>
);

const renderApp = () => {
  console.log('[AeThexOS] Starting RenderApp...');
  // Immediate visual feedback that JS is executing
  document.body.style.backgroundColor = 'purple';
  
  const rootElement = document.getElementById("root");
  
  if (rootElement) {
    try {
      console.log('[AeThexOS] Creating Root...');
      const root = createRoot(rootElement);
      console.log('[AeThexOS] Rendering App...');
      root.render(
        <Suspense fallback={<LoadingScreen />}>
          <App />
        </Suspense>
      );
    } catch (e) {
      console.error('[AeThexOS] Critical render error:', e);
      // Force visible error
      document.body.innerHTML += '<div style="background:red;color:white;position:fixed;top:0;left:0;width:100%;z-index:9999">REACT CRASH: ' + String(e) + '</div>';
    }
  } else {
    console.error("Failed to find the root element");
    document.body.innerHTML = '<div style="background:red;color:white;">NO ROOT ELEMENT FOUND</div>';
  }
};

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", renderApp);
} else {
  renderApp();
}
