App.js

import React, { useState, useEffect } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Provider as PaperProvider } from 'react-native-paper';
import { StatusBar } from 'expo-status-bar';

// Import screens
import HomeScreen from './src/screens/HomeScreen';
import SimpleTripScreen from './src/screens/SimpleTripScreen';
import AnalysisScreen from './src/screens/AnalysisScreen';
import ResultsScreen from './src/screens/ResultsScreen';
import NarrativeScreen from './src/screens/NarrativeScreen';
import DashboardScreen from './src/screens/DashboardScreen';
import TripDetailsScreen from './src/screens/TripDetailsScreen';
import PromptResultsScreen from './src/screens/PromptResultsScreen';

// Import context and error boundary
import { AppProvider } from './src/context/AppContext';
import { ThemeProvider } from './src/context/ThemeContext';
import ErrorBoundary from './src/components/ErrorBoundary';
import ApiService from './src/services/ApiService';
import { Colors } from './src/constants/Colors';
import { testColorSystem } from './src/utils/ColorSystemTest';

const Stack = createStackNavigator();

function App() {
  const [selectedMedia, setSelectedMedia] = useState([]);
  const [analysisResults, setAnalysisResults] = useState(null);
  const [isAnalyzing, setIsAnalyzing] = useState(false);

  // Global error handler for unhandled errors
  useEffect(() => {
    // Override console.error to catch Jimp errors
    const originalConsoleError = console.error;
    console.error = (...args) => {
      const errorMessage = args.join(' ');
      if (errorMessage.includes('Could not find MIME for Buffer')) {
        console.warn('Jimp MIME error detected:', errorMessage);
        return; // Don't log as error
      }
      originalConsoleError.apply(console, args);
    };

    // Test API key on app start
    const testAPIKey = async () => {
      console.log('🧪 [APP] Testing API keys on startup...');
      await ApiService.testVisionAPIKey();
    };
    
    // Test color system on app start
    const testColors = () => {
      console.log('🎨 [APP] Testing color system on startup...');
      testColorSystem();
    };
    
    testAPIKey();
    testColors();

    return () => {
      console.error = originalConsoleError;
    };
  }, []);

  const contextValue = {
    selectedMedia,
    setSelectedMedia,
    analysisResults,
    setAnalysisResults,
    isAnalyzing,
    setIsAnalyzing,
  };

  return (
    <ErrorBoundary>
      <ThemeProvider>
        <PaperProvider>
          <AppProvider value={contextValue}>
            <NavigationContainer>
              <StatusBar style="auto" />
              <Stack.Navigator
                initialRouteName="Dashboard"
                screenOptions={{
                  headerStyle: {
                    backgroundColor: Colors.primary.main,
                  },
                  headerTintColor: Colors.primary.contrast,
                  headerTitleStyle: {
                    fontWeight: 'bold',
                  },
                }}
              >
              <Stack.Screen 
                name="Dashboard" 
                component={DashboardScreen} 
                options={{ title: 'My Trips' }}
              />
              <Stack.Screen 
                name="TripDetails" 
                component={TripDetailsScreen} 
                options={{ title: 'Trip Details' }}
              />
              <Stack.Screen 
                name="SimpleTrip" 
                component={SimpleTripScreen} 
                options={{ title: 'Select Trip Dates' }}
              />
              <Stack.Screen 
                name="Analysis" 
                component={AnalysisScreen} 
                options={{ title: 'Analyzing Media...' }}
              />
              <Stack.Screen 
                name="Results" 
                component={ResultsScreen} 
                options={{ title: 'Analysis Results' }}
              />
              <Stack.Screen 
                name="Narrative" 
                component={NarrativeScreen} 
                options={{ title: 'Trip Narrative' }}
              />
              <Stack.Screen 
                name="PromptResults" 
                component={PromptResultsScreen} 
                options={{ title: 'Generated Posts' }}
              />
              </Stack.Navigator>
            </NavigationContainer>
          </AppProvider>
        </PaperProvider>
      </ThemeProvider>
    </ErrorBoundary>
  );
}

export default App;