BigBrainParking/app/src/navigation/RootNavigator.tsx

import React from 'react';
import { ActivityIndicator, Text, TouchableOpacity, View } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { NavigationContainer, useNavigation } from '@react-navigation/native';
import {
  createNativeStackNavigator,
  type NativeStackNavigationProp,
} from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useAuth } from '@/auth/AuthContext';
import { LoginScreen } from '@/screens/LoginScreen';
import { MapScreen } from '@/screens/MapScreen';
import { ScanScreen } from '@/screens/ScanScreen';
import { FavoritesScreen } from '@/screens/FavoritesScreen';
import { SessionsScreen } from '@/screens/SessionsScreen';
import { MeterDetailScreen } from '@/screens/MeterDetailScreen';
import { AboutScreen } from '@/screens/AboutScreen';
import { AccountScreen } from '@/screens/AccountScreen';
import { ProfileScreen } from '@/screens/ProfileScreen';
import { VehiclesScreen } from '@/screens/VehiclesScreen';
import { PaymentMethodsScreen } from '@/screens/PaymentMethodsScreen';
import { NotificationsScreen } from '@/screens/NotificationsScreen';
import { StartSessionScreen } from '@/screens/StartSessionScreen';
import { SessionDetailScreen } from '@/screens/SessionDetailScreen';
import { DiagnosticsScreen } from '@/screens/DiagnosticsScreen';
import { AdminScreen } from '@/screens/AdminScreen';
import { CityAreaScreen } from '@/screens/CityAreaScreen';
import { MapAlignScreen } from '@/screens/MapAlignScreen';
import { useTheme } from '@/theme/ThemeContext';
import { useActiveParkingSync } from '@/features/session/activeParking';
import type { ParkingArea } from '@/api/parkingAreas';
import type { ParkedSpot } from '@/features/session/activeParkingStore';
import type { ActiveSession, PastSession, Zone } from 'parksmarter-client';

export type RootStackParamList = {
  Tabs: undefined;
  MeterDetail: { zone: Zone };
  StartSession: { zone: Zone };
  /** An area from the city's printed parking map — no ParkSmarter zone involved. */
  CityArea: { area: ParkingArea; spot?: ParkedSpot };
  MapAlign: undefined;
  SessionDetail: { session: PastSession | ActiveSession; kind: 'active' | 'past' };
  About: undefined;
  Profile: undefined;
  Vehicles: undefined;
  PaymentMethods: undefined;
  Notifications: undefined;
  Diagnostics: undefined;
  Admin: undefined;
};

export type TabParamList = {
  Map: undefined;
  Scan: undefined;
  Favorites: undefined;
  Sessions: undefined;
  Account: undefined;
};

const Stack = createNativeStackNavigator<RootStackParamList>();
const Tab = createBottomTabNavigator<TabParamList>();

function AboutButton() {
  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  return (
    <TouchableOpacity onPress={() => navigation.navigate('About')} style={{ paddingHorizontal: 12 }}>
      <Text style={{ fontSize: 18 }}>ⓘ</Text>
    </TouchableOpacity>
  );
}

const TAB_ICONS: Record<keyof TabParamList, keyof typeof Ionicons.glyphMap> = {
  Map: 'map',
  Scan: 'qr-code',
  Favorites: 'star',
  Sessions: 'time',
  Account: 'person',
};

function Tabs() {
  // Keep the ongoing countdown in sync (on open + every foreground) and apply any
  // End/Extend the user pressed on the notification while the app was away.
  useActiveParkingSync();
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: true,
        headerRight: () => <AboutButton />,
        tabBarActiveTintColor: '#1e6f5c',
        tabBarIcon: ({ color, size }) => (
          <Ionicons name={TAB_ICONS[route.name]} size={size} color={color} />
        ),
      })}
    >
      <Tab.Screen name="Map" component={MapScreen} />
      <Tab.Screen name="Scan" component={ScanScreen} />
      <Tab.Screen name="Favorites" component={FavoritesScreen} />
      <Tab.Screen name="Sessions" component={SessionsScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>
  );
}

export function RootNavigator() {
  const { status } = useAuth();
  const { navTheme } = useTheme();

  if (status === 'loading') {
    return (
      <View
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: navTheme.colors.background,
        }}
      >
        <ActivityIndicator size="large" color={navTheme.colors.primary} />
      </View>
    );
  }

  return (
    <NavigationContainer theme={navTheme}>
      {status === 'signedIn' || status === 'anonymous' ? (
        <Stack.Navigator>
          <Stack.Screen name="Tabs" component={Tabs} options={{ headerShown: false }} />
          <Stack.Screen
            name="MeterDetail"
            component={MeterDetailScreen}
            options={{ title: 'Meter' }}
          />
          <Stack.Screen
            name="StartSession"
            component={StartSessionScreen}
            options={{ title: 'Start session' }}
          />
          <Stack.Screen
            name="SessionDetail"
            component={SessionDetailScreen}
            options={{ title: 'Session' }}
          />
          <Stack.Screen name="About" component={AboutScreen} options={{ title: 'About' }} />
          <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: 'Profile' }} />
          <Stack.Screen name="Vehicles" component={VehiclesScreen} options={{ title: 'Vehicles' }} />
          <Stack.Screen
            name="PaymentMethods"
            component={PaymentMethodsScreen}
            options={{ title: 'Payment methods' }}
          />
          <Stack.Screen
            name="Notifications"
            component={NotificationsScreen}
            options={{ title: 'Notifications' }}
          />
          <Stack.Screen
            name="Diagnostics"
            component={DiagnosticsScreen}
            options={{ title: 'Diagnostics' }}
          />
          <Stack.Screen
            name="CityArea"
            component={CityAreaScreen}
            options={{ title: 'Parking area' }}
          />
          <Stack.Screen name="Admin" component={AdminScreen} options={{ title: 'Admin' }} />
          <Stack.Screen
            name="MapAlign"
            component={MapAlignScreen}
            options={{ title: 'Align city map' }}
          />
        </Stack.Navigator>
      ) : (
        <LoginScreen />
      )}
    </NavigationContainer>
  );
}