/*
 * File: App.tsx
 * Description: Main application component with navigation setup
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React, { useRef } from 'react';
import { StatusBar } from 'react-native';
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { NavigationContainer, NavigationContainerRef } from '@react-navigation/native';
import { theme } from './theme/theme';
import { RootStackNavigator, setNavigationRef } from './navigation';
import { StoreProvider } from './store/Provider';
import Toast from 'react-native-toast-message';
import { useAppSelector } from './store/hooks';
import { selectIsAuthenticated } from './modules/Auth/redux/authSelectors';



/**
 * AppContent Component (Inner Component)
 * 
 * Purpose: Inner component that uses Redux hooks for authentication state
 * 
 * Features:
 * 1. Connect to Redux store for authentication state
 * 2. Set up navigation container with global reference
 * 3. Configure status bar appearance
 * 4. Render the main app navigator based on authentication state
 * 
 * Navigation Flow:
 * 1. App starts → Check Redux authentication status
 * 2. If not authenticated → Show LoginScreen
 * 3. If authenticated → Show MainTabNavigator (dashboard)
 */
function AppContent() {
  // ============================================================================
  // REDUX STATE
  // ============================================================================
  
  // Get authentication state from Redux
  const isAuthenticated = useAppSelector(selectIsAuthenticated);

  // Navigation reference for programmatic navigation
  const navigationRef = useRef<NavigationContainerRef<any> | null>(null);

  // ============================================================================
  // EFFECTS
  // ============================================================================

  // Set up navigation reference for global access
  React.useEffect(() => {
    setNavigationRef(navigationRef);
  }, []);

  // ============================================================================
  // RENDER SECTION
  // ============================================================================

  return (
    <SafeAreaProvider>
      <SafeAreaView style={{flex:1}} edges={['top', 'left', 'right']} >
      <NavigationContainer ref={navigationRef}>
        <StatusBar
          barStyle="dark-content"                    // Dark text on light background
          backgroundColor={theme.colors.background}  // Status bar background color
        />
        <RootStackNavigator isAuthenticated={isAuthenticated} />
        <Toast     
          position='bottom'
          bottomOffset={20} 
        />
      </NavigationContainer>
      </SafeAreaView>
    </SafeAreaProvider>
  );
}

/**
 * App Component (Root Component)
 * 
 * Purpose: Root component that wraps the entire application with Redux Provider
 * 
 * Features:
 * 1. Provide Redux store context
 * 2. Wrap the main app content
 * 3. Enable Redux state management throughout the app
 */
export default function App() {
  return (
    <StoreProvider>
      <AppContent />
    </StoreProvider>
  );
}

/*
 * End of File: App.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */