import { StrictMode, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import './index.css';

// Performance monitoring
const measurePerformance = () => {
  if (typeof window !== 'undefined' && 'performance' in window) {
    // Mark app start
    performance.mark('app-start');
    
    // Measure when app is ready
    setTimeout(() => {
      performance.mark('app-ready');
      performance.measure('app-load-time', 'app-start', 'app-ready');
      
      const measure = performance.getEntriesByName('app-load-time')[0];
      if (measure && import.meta.env.DEV) {
        console.log(`⚡ App loaded in ${measure.duration.toFixed(2)}ms`);
      }
    }, 100);
  }
};

// Remove loading screen
const removeLoadingScreen = () => {
  const loadingScreen = document.querySelector('.loading-screen');
  if (loadingScreen) {
    loadingScreen.style.opacity = '0';
    loadingScreen.style.transition = 'opacity 0.3s ease-out';
    setTimeout(() => {
      loadingScreen.remove();
    }, 300);
  }
};

// App wrapper with performance optimizations
const AppWrapper = () => {
  useEffect(() => {
    // Remove loading screen when app mounts
    removeLoadingScreen();
    
    // Measure performance
    measurePerformance();
    
    // Preload critical resources
    const preloadCriticalResources = () => {
      // Preload critical components that exist
      import('./components/Gallery').catch(() => {});
      import('./components/Hero').catch(() => {});
    };
    
    // Delay preloading to not block initial render
    const preloadTimer = setTimeout(preloadCriticalResources, 2000);
    
    return () => clearTimeout(preloadTimer);
  }, []);
  
  return <App />;
};

// Start the application
const startApp = () => {
  const root = createRoot(document.getElementById('root')!);
  
  root.render(
    <StrictMode>
      <AppWrapper />
    </StrictMode>
  );
};

// Initialize app
startApp();