App.js

import React, { useCallback } from 'react';

import { useFonts } from 'expo-font';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { View, Text, StyleSheet } from 'react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';

import DashboardScreen from './src/screens/DashboardScreen';
import AppsScreen from './src/screens/AppsScreen';
import { useAppTheme } from './src/theme/AppTheme';
import { ThemeProvider } from './src/context/ThemeContext';
import { BackgroundProvider } from './src/context/BackgroundContext';
import { FirewallProvider } from './src/context/FirewallContext';

import { createNativeStackNavigator } from '@react-navigation/native-stack';
import AppDetailsScreen from './src/screens/AppDetailsScreen';
import SettingsScreen from './src/screens/SettingsScreen';
import AnalyticsScreen from './src/screens/AnalyticsScreen';
import RulesEngineScreen from './src/screens/RulesEngineScreen';
import SplashScreen from './src/screens/SplashScreen';
import OnboardingScreen from './src/screens/OnboardingScreen';
import ProcessMonitorScreen from './src/screens/ProcessMonitorScreen';

import { Octicons } from '@expo/vector-icons';
import { ToastProvider } from './src/components/Toast';
import ErrorBoundary from './src/components/ErrorBoundary';
import VersionUpdater from './src/components/VersionUpdater';

// Keep splash screen visible while loading fonts


const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function TabNavigator() {
  const colors = useAppTheme();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        // Removed unmountOnBlur: true to preserve state across tab switches
        tabBarStyle: {
          backgroundColor: colors.background,
          borderTopWidth: 0,
          elevation: 0,
          height: 70,
          paddingBottom: 0,
        },
        tabBarShowLabel: false,
        tabBarActiveTintColor: colors.toggleTrackOn,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarIconStyle: {
          marginTop: 5,
        },
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          if (route.name === 'Home') iconName = 'home';
          else if (route.name === 'Apps') iconName = 'apps';
          else if (route.name === 'Analytics') iconName = 'hubot';
          else if (route.name === 'Settings') iconName = 'gear';

          return <Octicons name={iconName} size={22} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={DashboardScreen} />
      <Tab.Screen name="Apps" component={AppsScreen} />
      <Tab.Screen name="Analytics" component={AnalyticsScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

function AppContent() {
  const colors = useAppTheme();
  const [appReady, setAppReady] = React.useState(false);
  const [splashAnimationFinished, setSplashAnimationFinished] = React.useState(false);
  const [isFirstLaunch, setIsFirstLaunch] = React.useState(null);

  // Load fonts
  const [fontsLoaded, fontError] = useFonts({
    'FunnelSans-Regular': require('./assets/Funnel_Sans/ttf/FunnelSans-Regular.ttf'),
    'FunnelSans-Bold': require('./assets/Funnel_Sans/ttf/FunnelSans-Bold.ttf'),
    'FunnelSans-Medium': require('./assets/Funnel_Sans/ttf/FunnelSans-Medium.ttf'),
    'FunnelSans-SemiBold': require('./assets/Funnel_Sans/ttf/FunnelSans-SemiBold.ttf'),
    'DrunkenHour': require('./assets/drunken_hour/drunkenhourDEMO.otf'),
  });

  const onLayoutRootView = useCallback(async () => {
    // We handle hiding splash manually with the animation
  }, []);

  // Check if everything is ready
  React.useEffect(() => {
    async function prepare() {
      try {
        const completed = await AsyncStorage.getItem('@onboarding_completed');
        setIsFirstLaunch(completed === null);
      } catch (e) {
        setIsFirstLaunch(true);
      }
    }
    prepare();
  }, []);

  React.useEffect(() => {
    if (fontsLoaded || fontError) {
      setAppReady(true);
    }
  }, [fontsLoaded, fontError]);

  if (!appReady || !splashAnimationFinished || isFirstLaunch === null) {
    if (!fontsLoaded && !fontError) return null;

    return (
      <SplashScreen onFinish={() => setSplashAnimationFinished(true)} />
    );
  }

  return (
    <View style={{ flex: 1 }} onLayout={onLayoutRootView}>
      <NavigationContainer>
        <StatusBar style={colors.statusBarStyle} />
        <Stack.Navigator
          initialRouteName={isFirstLaunch ? "Onboarding" : "MainTabs"}
          screenOptions={{
            headerShown: false,
            contentStyle: { backgroundColor: colors.background },
            headerTitleStyle: { fontFamily: 'FunnelSans-Bold' }
          }}
        >
          <Stack.Screen name="Onboarding" component={OnboardingScreen} />
          <Stack.Screen name="MainTabs" component={TabNavigator} />
          <Stack.Screen name="AppDetails" component={AppDetailsScreen} options={{ animation: 'slide_from_right' }} />
          <Stack.Screen name="RulesEngine" component={RulesEngineScreen} options={{ animation: 'slide_from_bottom' }} />
          <Stack.Screen name="ProcessMonitor" component={ProcessMonitorScreen} options={{ animation: 'slide_from_right' }} />
        </Stack.Navigator>
      </NavigationContainer>
      <VersionUpdater />
    </View>
  );
}

export default function App() {
  return (
    <ThemeProvider>
      <FirewallProvider>
        <BackgroundProvider>
          <SafeAreaProvider>
            <ToastProvider>
              <ErrorBoundary fallbackMessage="The app encountered an error. Tap retry to continue.">
                <AppContent />
              </ErrorBoundary>
            </ToastProvider>
          </SafeAreaProvider>
        </BackgroundProvider>
      </FirewallProvider>
    </ThemeProvider>
  );
}