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 { 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';

export type RootStackParamList = {
  Login: undefined;
  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; 
  };
};

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

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

function MainTabs() {
  return (
    <Tab.Navigator
      id={undefined}
      screenOptions={{
        headerShown: false,
        tabBarStyle: {
          backgroundColor: '#FFFFFF',
          borderTopWidth: 0,
          elevation: 0,
          shadowOpacity: 0,
          height: 60,
          paddingBottom: 8,
          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 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.Navigator>
    </NavigationContainer>
  );
};