import React, { useRef, useEffect, useState } from 'react';
import { AuthProvider } from './contexts/AuthContext';
import { ProfileActionsProvider } from './contexts/ProfileActionsContext';
import { ClickSparkProvider } from './contexts/ClickSparkContext';
import { MediaProvider } from './contexts/MediaContext';
import { withErrorBoundary } from './hooks/useErrorBoundary';
import Header from './components/layout/Header';
import Footer from './components/layout/Footer';
import AppRoutes from './routes';
import MobileApp from './mobile/App';
import './index.css';

const AppContent = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth <= 768);
    };

    checkMobile();
    window.addEventListener('resize', checkMobile);

    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  if (isMobile) {
    return <MobileApp />;
  }

  return (
    <div className="flex flex-col min-h-screen bg-campfire-dark text-campfire-light">
      <Header />
      <main className="flex-grow pt-16 pb-32">
        <AppRoutes />
      </main>
      <Footer />
    </div>
  );
};

const AppContentWithErrorBoundary = withErrorBoundary(AppContent);

function App() {
  return (
    <AuthProvider>
      <ProfileActionsProvider>
        <ClickSparkProvider>
          <MediaProvider>
            <AppContentWithErrorBoundary />
          </MediaProvider>
        </ClickSparkProvider>
      </ProfileActionsProvider>
    </AuthProvider>
  );
}

export default App;
