import React from 'react';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { View } from 'react-native';
import { QueryClientProvider } from '@tanstack/react-query';
import { AlertNotificationRoot } from 'react-native-alert-notification';
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 { 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';

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

export default App;