import 'react-native-gesture-handler';
import React from 'react';
import { StatusBar } from 'react-native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Provider } from 'react-redux';

import { store } from './src/app/store';
import { RootNavigator } from './src/navigation/RootNavigator';
import { ThemeProvider, useTheme } from './src/theme';
import { ToastHost } from './src/components/ToastHost';
import { ActivityTracker } from './src/components/ActivityTracker';
import { FeatureProvider, hydrateFeatures } from './src/features';
import { useAppBootstrap } from './src/hooks/useAppBootstrap';

const AppShell = () => {
  const theme = useTheme();

  useAppBootstrap();

  return (
    <ActivityTracker>
      {/*
        The app-wide default. Individual screens override it — a screen on the
        full-bleed navy wash forces light icons, because that wash is dark in
        both themes — but everything else sits on `colors.background`, and
        this follows the live theme so dark mode does not leave black icons on
        a near-black bar.
      */}
      <StatusBar barStyle={theme.statusBarStyle} translucent backgroundColor="transparent" />
      <RootNavigator />
      <ToastHost />
    </ActivityTracker>
  );
};

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SafeAreaProvider>
        <Provider store={store}>
          {/* Reads the persisted local overrides and the bank's server-driven
              config before the navigators mount — they decide at mount time
              which screens to register, so a flag arriving later would leave a
              disabled route reachable until the next launch. */}
          <FeatureProvider hydrate={hydrateFeatures}>
            <ThemeProvider>
              <AppShell />
            </ThemeProvider>
          </FeatureProvider>
        </Provider>
      </SafeAreaProvider>
    </GestureHandlerRootView>
  );
}