import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { View } from 'react-native';
import { QueryClientProvider } from '@tanstack/react-query';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import { persistor, store } from './src/Redux/Store';
import Routes from './src/Navigation/Routes';
import { NavigationContainer } from '@react-navigation/native';
import colors from './src/Constant/Color';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import AppStatusBar from './src/components/AppStatusBar';
import { ApiToastBridge, AppToastHost } from './src/components/AppToast';
import { ErrorBoundary } from './src/core/errors/ErrorBoundary';
import { queryClient } from './src/core/query/queryClient';
import AuthSessionGuard from './src/Navigation/AuthSessionGuard';
import { navigationRef } from './src/Navigation/NavigationService';
import { applyGuardForCurrentRoute } from './src/core/security/screenGuard';

const App = () => {
  const insets = useSafeAreaInsets();
  return (
    <ErrorBoundary>
      <NavigationContainer
        ref={navigationRef}
        onReady={applyGuardForCurrentRoute}
        onStateChange={applyGuardForCurrentRoute}
      >
        <QueryClientProvider client={queryClient}>
          <GestureHandlerRootView style={{ flex: 1 }}>
            <Provider store={store}>
              <PersistGate persistor={persistor}>
                <View style={{ flex: 1, backgroundColor: colors.white, paddingBottom: insets.bottom }}>
                  <AppStatusBar />
                  <AuthSessionGuard />
                  <Routes />
                  <ApiToastBridge />
                  <AppToastHost />
                </View>
              </PersistGate>
            </Provider>
          </GestureHandlerRootView>
        </QueryClientProvider>
      </NavigationContainer>
    </ErrorBoundary>
  );
};

export default App;