/*
 * File: MainTabNavigator.tsx
 * Description: Bottom tab navigator for the main app interface
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { theme } from '../theme/theme';
import { DashboardStackNavigator } from '../modules/Dashboard/navigation';
import { SettingsStackNavigator } from '../modules/Settings/navigation';
import { MainTabParamList } from './navigationTypes';
import MaterialIcons  from 'react-native-vector-icons/MaterialIcons';

// Create the bottom tab navigator
const Tab = createBottomTabNavigator<MainTabParamList>();

/**
 * MainTabNavigator Component
 * 
 * Purpose: Creates the bottom tab navigation for the main app interface
 * 
 * Tab Structure:
 * - Dashboard: Main ER dashboard with patient overview and statistics
 * - Patients: Detailed patient list and management interface
 * - Alerts: Critical notifications and alert management
 * - Reports: Medical reports and documentation access
 * - Settings: User preferences and app configuration
 * 
 * Features:
 * - Consistent styling with app theme
 * - Tab-specific icons and labels
 * - Proper parameter passing to screens
 * - Accessibility support
 */
export const MainTabNavigator: React.FC = () => {
  return (
    <Tab.Navigator
      screenOptions={{
        // Tab bar styling for active and inactive states
        tabBarActiveTintColor: theme.colors.primary,      // Blue color for active tab
        tabBarInactiveTintColor: theme.colors.textMuted,  // Gray color for inactive tab
        
        // Tab bar container styling
        tabBarStyle: {
          backgroundColor: theme.colors.background,
          borderTopColor: theme.colors.border,
          borderTopWidth: 1,
          paddingBottom: 8,
          paddingTop: 8,
          height: 60,                                      // Fixed height for tab bar
        },
        
        // Header styling for each screen
        headerStyle: {
          backgroundColor: theme.colors.background,
          borderBottomColor: theme.colors.border,
          borderBottomWidth: 1,
        },
        headerTitleStyle: {
          color: theme.colors.textPrimary,
          fontFamily: theme.typography.fontFamily.bold,
        },
      }}
    >
      {/* Dashboard Tab - Main ER overview */}
      <Tab.Screen
        name="Dashboard"
        component={DashboardStackNavigator}
        options={{
          title: 'ER Dashboard',
          tabBarLabel: 'Dashboard',
          // TODO: Add tab bar icon
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="dashboard" size={size} color={color} />
          ),
          headerShown: false,
        }}
      />
      
      {/* Patients Tab - Patient list and management */}
      <Tab.Screen
        name="Patients"
        component={DashboardStackNavigator} // TODO: Replace with actual PatientsScreen
        options={{
          title: 'Patient List',
          tabBarLabel: 'Patients',
          // TODO: Add tab bar icon
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="people" size={size} color={color} />
          ),
          headerShown: false,
        }}
      />
      
      {/* Alerts Tab - Critical notifications */}
      <Tab.Screen
        name="Alerts"
        component={DashboardStackNavigator} // TODO: Replace with actual AlertsScreen
        options={{
          title: 'Alerts',
          tabBarLabel: 'Alerts',
          // TODO: Add tab bar icon
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="notifications" size={size} color={color} />
          ),
          headerShown: false,
        }}
      />
      
      {/* Reports Tab - Medical documentation */}
      <Tab.Screen
        name="Reports"
        component={DashboardStackNavigator} // TODO: Replace with actual ReportsScreen
        options={{
          title: 'Reports',
          tabBarLabel: 'Reports',
          // TODO: Add tab bar icon
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="description" size={size} color={color} />
          ),
          headerShown: false,
        }}
      />
      
      {/* Settings Tab - User preferences */}
      <Tab.Screen
        name="Settings"
        component={SettingsStackNavigator}
        options={{
          title: 'Settings',
          tabBarLabel: 'Settings',
          tabBarIcon: ({ color, size }) => (
            <MaterialIcons name="settings" size={size} color={color} />
          ),
          headerShown: false,
        }}
      />
    </Tab.Navigator>
  );
};

/*
 * End of File: MainTabNavigator.tsx
 * Design & Developed by Tech4Biz Solutions
 * Copyright (c) Spurrin Innovations. All rights reserved.
 */