// src/navigation/MobileTabNavigator.tsx
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useTheme } from 'react-native-paper';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';

import DashboardScreen from '../screens/DashboardScreen';
import ChatScreen from '../screens/ChatScreen';
import CalendarScreen from '../screens/CalendarScreen';
import ProfileScreen from '../screens/ProfileScreen';
import EventFormScreen from '../screens/EventFormScreen';
import AdminScreen from '../screens/AdminScreen'; // Import AdminScreen
import { useAuth, UserRole } from '../contexts/AuthContext'; // Import useAuth and UserRole

import { MobileTabParamList } from '../types/navigation';

const Tab = createBottomTabNavigator<MobileTabParamList>();

const MobileTabNavigator = () => {
  const theme = useTheme();
  const { user } = useAuth(); // Get user data from context
  const isAdmin = user?.role === UserRole.ADMIN;

  return (
    <Tab.Navigator
      initialRouteName="DashboardTab"
      screenOptions={({ route }) => ({
        tabBarActiveTintColor: theme.colors.secondary,
        tabBarInactiveTintColor: theme.colors.onSurfaceVariant, // Use onSurfaceVariant instead of textSecondary
        tabBarStyle: {
          backgroundColor: theme.colors.surface,
          borderTopColor: theme.colors.surface, // Or a subtle border
        },
        headerStyle: {
          backgroundColor: theme.colors.surface,
        },
        headerTintColor: theme.colors.onSurface, // Use onSurface instead of text
        tabBarIcon: ({ focused, color, size }) => {
          let iconName: string = 'help-circle'; // Default icon

          if (route.name === 'DashboardTab') {
            iconName = focused ? 'view-dashboard' : 'view-dashboard-outline';
          } else if (route.name === 'ChatTab') {
            iconName = focused ? 'chat' : 'chat-outline';
          } else if (route.name === 'CalendarTab') {
            iconName = focused ? 'calendar' : 'calendar-outline';
          } else if (route.name === 'ProfileTab') {
            iconName = focused ? 'account-circle' : 'account-circle-outline';
          } else if (route.name === 'AdminTab') { // Add icon for AdminTab
            iconName = focused ? 'shield-crown' : 'shield-crown-outline';
          }
          return <MaterialCommunityIcons name={iconName} size={size} color={color} />;
        },
      })}
    >
      <Tab.Screen
        name="DashboardTab"
        component={DashboardScreen}
        options={{ title: 'Dashboard', headerTitle: 'MAIA Dashboard' }}
      />
      <Tab.Screen
        name="ChatTab"
        component={ChatScreen}
        options={{ title: 'Chat', headerTitle: 'MAIA Chat' }}
      />
      <Tab.Screen
        name="CalendarTab"
        component={CalendarScreen}
        options={{ title: 'Calendar', headerTitle: 'Calendar' }}
      />
      <Tab.Screen
        name="ProfileTab"
        component={ProfileScreen}
        options={{ title: 'Profile', headerTitle: 'Profile' }}
      />
      {/* Conditionally render Admin Tab */}
      {isAdmin && (
        <Tab.Screen
          name="AdminTab"
          component={AdminScreen}
          options={{ title: 'Admin', headerTitle: 'Admin Controls' }}
        />
      )}
    </Tab.Navigator>
  );
};

export default MobileTabNavigator;