import React, { useEffect } from 'react';
import { GameStateProvider, useGameStateContext } from './context/GameStateContext';
import { cardModelService } from './services/CardModelService';
import SetupScreen from './components/Setup/SetupScreen';
import CameraScreen from './components/Camera/CameraScreen';
import ResultsScreen from './components/Results/ResultsScreen';
import HistoryScreen from './components/History/HistoryScreen';

const App = () => {
  useEffect(() => {
    cardModelService.init().catch(err => console.warn('Model loading failed, using fallback detection:', err));
  }, []);

  return (
    <GameStateProvider>
      <AppContent />
    </GameStateProvider>
  );
};

const AppContent = () => {
  const { gameState } = useGameStateContext();

  const renderScreen = () => {
    switch (gameState.currentScreen) {
      case 'setup':
        return <SetupScreen />;
      case 'camera':
        return <CameraScreen />;
      case 'results':
        return <ResultsScreen />;
      case 'history':
        return <HistoryScreen />;
      default:
        return <SetupScreen />;
    }
  };

  return (
    <div className="app">
      {renderScreen()}
    </div>
  );
};

export default App;
