import React, { useContext } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { AuthContext } from '../context/AuthContext';
import { ActivityIndicator, View } from 'react-native';
import { LayoutDashboard, Briefcase, Users, MoreHorizontal, CheckSquare } from 'lucide-react-native';
import Colors from '../constants/Colors';

import LoginScreen from '../screens/LoginScreen';
import HomeScreen from '../screens/HomeScreen';
import AttendanceScreen from '../screens/AttendanceScreen';
import ClientListScreen from '../screens/ClientListScreen';
import AddClientScreen from '../screens/AddClientScreen';
import ClientDetailsScreen from '../screens/ClientDetailsScreen';
import EditClientScreen from '../screens/EditClientScreen';
import PipelineScreen from '../screens/PipelineScreen';

import AddOpportunityScreen from '../screens/AddOpportunityScreen';
import ExpenseScreen from '../screens/ExpenseScreen';
import IncentiveScreen from '../screens/IncentiveScreen';
import LogActivityScreen from '../screens/LogActivityScreen';
import MyTargetScreen from '../screens/MyTargetScreen';
import TasksScreen from '../screens/TasksScreen';
import CallLogsScreen from '../screens/CallLogsScreen';
import ChangePasswordScreen from '../screens/ChangePasswordScreen';

const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

const TabNavigator = () => (
    <Tab.Navigator
        screenOptions={({ route }) => ({
            tabBarIcon: ({ focused, color, size }) => {
                let Icon;
                if (route.name === 'Dashboard') Icon = LayoutDashboard;
                else if (route.name === 'Pipeline') Icon = Briefcase;
                else if (route.name === 'Clients') Icon = Users;
                else if (route.name === 'Tasks') Icon = CheckSquare;
                else Icon = MoreHorizontal;
                return <Icon size={size} color={color} />;
            },
            tabBarActiveTintColor: Colors.primary,
            tabBarInactiveTintColor: Colors.textLight,
            tabBarStyle: { height: 60, paddingBottom: 10 },
            headerStyle: { backgroundColor: Colors.primary },
            headerTintColor: '#fff',
            headerTitleStyle: { fontWeight: 'bold' },
        })}
    >
        <Tab.Screen name="Dashboard" component={HomeScreen} />
        <Tab.Screen name="Pipeline" component={PipelineScreen} />
        <Tab.Screen name="Clients" component={ClientListScreen} />
        <Tab.Screen name="Activities" component={TasksScreen} />
    </Tab.Navigator>
);

const AppNav = () => {
    const { isLoading, userToken } = useContext(AuthContext);

    if (isLoading) {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size={'large'} color={Colors.primary} />
            </View>
        );
    }

    return (
        <NavigationContainer>
            <Stack.Navigator>
                {userToken !== null ? (
                    <>
                        <Stack.Screen name="Main" component={TabNavigator} options={{ headerShown: false }} />
                        <Stack.Screen name="Attendance" component={AttendanceScreen} />
                        <Stack.Screen name="AddClient" component={AddClientScreen} />
                        <Stack.Screen name="ClientDetails" component={ClientDetailsScreen} options={{ title: 'Client Details' }} />
                        <Stack.Screen name="EditClient" component={EditClientScreen} options={{ title: 'Edit Client' }} />
                        <Stack.Screen name="AddOpportunity" component={AddOpportunityScreen} options={{ headerShown: false }} />
                        <Stack.Screen name="Expense" component={ExpenseScreen} />
                        <Stack.Screen name="Incentive" component={IncentiveScreen} />
                        <Stack.Screen name="LogActivity" component={LogActivityScreen} options={{ title: 'Log Activity' }} />
                        <Stack.Screen name="MyTarget" component={MyTargetScreen} options={{ headerShown: false }} />
                        <Stack.Screen name="TasksDetail" component={TasksScreen} options={{ headerShown: false }} />
                        <Stack.Screen name="CallLogs" component={CallLogsScreen} options={{ headerShown: false }} />
                        <Stack.Screen name="ChangePassword" component={ChangePasswordScreen} options={{ headerShown: false }} />
                    </>
                ) : (
                    <Stack.Screen name="Login" component={LoginScreen} options={{ headerShown: false }} />
                )}
            </Stack.Navigator>
        </NavigationContainer>
    );
}

export default AppNav;