/**
 * App Entry Point
 * 
 * Main application component with authentication routing.
 * Shows loading screen while restoring auth state.
 */

import React from 'react';
import { Buffer } from 'buffer';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { StyleSheet, View, ActivityIndicator, Text } from 'react-native';
import TabNavigator from './src/navigation/TabNavigator';
import AuthNavigator from './src/navigation/AuthNavigator';
import { AuthProvider, useAuth } from './src/context/AuthContext';
import { colors } from './src/theme/colors';

if (typeof globalThis !== 'undefined' && !globalThis.Buffer) {
  globalThis.Buffer = Buffer;
}

/**
 * Loading screen shown while restoring auth state
 */
function LoadingScreen() {
  return (
    <View style={styles.loadingContainer}>
      <ActivityIndicator size="large" color={colors.nautical.teal} />
      <Text style={styles.loadingText}>Loading...</Text>
    </View>
  );
}

/**
 * Main app content with auth-based routing
 */
function AppContent() {
  const { user, isInitializing } = useAuth();

  // Show loading screen while restoring auth state
  if (isInitializing) {
    return <LoadingScreen />;
  }

  return (
    <NavigationContainer>
      <StatusBar style="auto" />
      {user ? <TabNavigator /> : <AuthNavigator />}
    </NavigationContainer>
  );
}

/**
 * Root App component
 */
export default function App() {
  return (
    <GestureHandlerRootView style={styles.container}>
      <AuthProvider>
        <AppContent />
      </AuthProvider>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
  loadingContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.flow.backgroundGradientStart,
  },
  loadingText: {
    marginTop: 16,
    fontSize: 16,
    color: colors.flow.textSecondary,
  },
});