Caregiver/src/navigation/AppNavigator.tsx

import React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Home, Calendar, Settings } from 'lucide-react-native';

import { HomeScreen } from '../screens/HomeScreen';
import { ProfileScreen } from '../screens/ProfileScreen';
import { AppointmentsScreen } from '../screens/AppointmentsScreen';
import { SettingsScreen } from '../screens/SettingsScreen';
import { LoginScreen } from '../screens/LoginScreen';
import { PersonalInformationScreen } from '../screens/PersonalInformationScreen';
import { ManageSkillsScreen } from '../screens/ManageSkillsScreen';
import { AddSkillScreen } from '../screens/AddSkillScreen';
import { AvailabilityListScreen } from '../screens/AvailabilityListScreen';
import { AddAvailabilityScreen } from '../screens/AddAvailabilityScreen';
import { EditAvailabilityScreen } from '../screens/EditAvailabilityScreen';
import { PaymentProfileListScreen } from '../screens/PaymentProfileListScreen';
import { AddEditPaymentProfileScreen } from '../screens/AddEditPaymentProfileScreen';
import { ManageServicesScreen } from '../screens/ManageServicesScreen';
import { AddEditServiceScreen } from '../screens/AddEditServiceScreen';
import { ProfessionalDocumentsScreen } from '../screens/ProfessionalDocumentsScreen';
import { UploadDocumentScreen } from '../screens/UploadDocumentScreen';
import { ViewDocumentScreen } from '../screens/ViewDocumentScreen';
import { SelectionScreen } from '../screens/SelectionScreen';
import { Service } from '../services/serviceService';
import { navigationRef } from './navigationRef';

export type RootStackParamList = {
  Login: undefined;
  Selection: {
    data: any[];
    value: any;
    isMulti?: boolean;
    searchable?: boolean;
    label?: string;
    searchPlaceholder?: string;
    onSelect: (value: any) => void;
  };
  MainTabs: undefined;
  Profile: { caregiverId: string };
  PersonalInformation: undefined;
  ManageSkills: undefined;
  AddSkill: undefined;
  AvailabilityList: undefined;
  AddAvailability: undefined;
  EditAvailability: { 
    day_of_week: string; 
    start_time: string; 
    end_time: string; 
  };
  PaymentProfileList: undefined;
  AddEditPaymentProfile: { profile?: any };
  ManageServices: undefined;
  AddEditService: { service?: Service };
  ProfessionalDocuments: undefined;
  UploadDocument: undefined;
  ViewDocument: { documentId: number };
};

export type TabParamList = {
  HomeTab: undefined;
  Appointments: undefined;
  Settings: undefined;
};

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

function MainTabs() {
  const insets = useSafeAreaInsets();
  
  return (
    <Tab.Navigator
      id={undefined}
      screenOptions={{
        headerShown: false,
        tabBarStyle: {
          backgroundColor: '#FFFFFF',
          borderTopWidth: 0,
          elevation: 0,
          shadowOpacity: 0,
          height: 60 + insets.bottom,
          paddingBottom: 8 + insets.bottom,
          paddingTop: 8,
        },
        tabBarActiveTintColor: 'navy', // Primary color
        tabBarInactiveTintColor: '#9CA3AF',
      }}
    >
      <Tab.Screen 
        name="HomeTab" 
        component={HomeScreen} 
        options={{
          tabBarLabel: 'Home',
          tabBarIcon: ({ color, size }) => <Home color={color} size={size} />,
        }}
      />
      <Tab.Screen 
        name="Appointments" 
        component={AppointmentsScreen} 
        options={{
          tabBarLabel: 'Appointments',
          tabBarIcon: ({ color, size }) => <Calendar color={color} size={size} />,
        }}
      />
      <Tab.Screen 
        name="Settings" 
        component={SettingsScreen} 
        options={{
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color, size }) => <Settings color={color} size={size} />,
        }}
      />
    </Tab.Navigator>
  );
}


const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    background: '#F9FAFB',
  },
};

export const AppNavigator = () => {
  return (
    <NavigationContainer ref={navigationRef} theme={MyTheme}>
      <Stack.Navigator
        id={undefined}
        initialRouteName="Login"
        screenOptions={{
          headerShown: false,
          contentStyle: { backgroundColor: '#F9FAFB' }
        }}
      >
        <Stack.Screen name="Login" component={LoginScreen} />
        <Stack.Screen name="MainTabs" component={MainTabs} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
        <Stack.Screen name="PersonalInformation" component={PersonalInformationScreen} />
        <Stack.Screen name="ManageSkills" component={ManageSkillsScreen} />
        <Stack.Screen name="AddSkill" component={AddSkillScreen} />
        <Stack.Screen name="AvailabilityList" component={AvailabilityListScreen} />
        <Stack.Screen name="AddAvailability" component={AddAvailabilityScreen} />
        <Stack.Screen name="EditAvailability" component={EditAvailabilityScreen} />
        <Stack.Screen name="PaymentProfileList" component={PaymentProfileListScreen} />
        <Stack.Screen name="AddEditPaymentProfile" component={AddEditPaymentProfileScreen} />
        <Stack.Screen name="ManageServices" component={ManageServicesScreen} />
        <Stack.Screen name="AddEditService" component={AddEditServiceScreen} />
        <Stack.Screen name="ProfessionalDocuments" component={ProfessionalDocumentsScreen} />
        <Stack.Screen name="UploadDocument" component={UploadDocumentScreen} />
        <Stack.Screen name="ViewDocument" component={ViewDocumentScreen} />
        <Stack.Screen name="Selection" component={SelectionScreen} options={{ presentation: 'card' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};