import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Icon from 'react-native-vector-icons/MaterialIcons';
import { useTheme } from '@/shared/styles/useTheme';
import { useDispatch, useSelector } from 'react-redux';
import type { RootState } from '@/store/store';
import { TouchableOpacity, View, StyleSheet } from 'react-native';
import { clearSelectedService } from '@/modules/integrations/store/integrationsSlice';

// Module navigators
import ZohoProjectsNavigator from '@/modules/zohoProjects/navigation/ZohoProjectsNavigator';
import HRNavigator from '@/modules/hr/navigation/HRNavigator';
import ProfileNavigator from '@/modules/profile/navigation/ProfileNavigator';
import FinanceNavigator from '@/modules/finance/navigation/FinanceNavigator';
import CrmNavigator from '@/modules/crm/navigation/CrmNavigator';
import CollabNavigator from '@/modules/collab/navigation/CollabNavigator';
import StorageNavigator from '@/modules/storage/navigation/StorageNavigator';

const Tab = createBottomTabNavigator();
// Stacks are now defined per module under their navigation folders

const DashboardRouter: React.FC = () => {
  const selectedService = useSelector((s: RootState) => s.integrations.selectedService);
  const hrServices = ['zohoPeople', 'bamboohr', 'workday', 'keka'];
  const financeServices = ['quickbooks', 'zohoBooks', 'tally', 'xero', 'sapb1'];
  const crmServices = ['zohoCRM', 'hubspot', 'salesforce', 'pipedrive'];
  const collabServices = ['slack', 'teams', 'zoom', 'gworkspace'];
  const storageServices = ['gdrive', 'dropbox', 'onedrive', 'sharepoint', 'box'];
  if (selectedService === 'zohoProjects') {
    return <ZohoProjectsNavigator />;
  }
  if (selectedService && hrServices.includes(selectedService)) {
    return <HRNavigator />;
  }
  if (selectedService && financeServices.includes(selectedService)) {
    return <FinanceNavigator />;
  }
  if (selectedService && crmServices.includes(selectedService)) {
    return <CrmNavigator />;
  }
  if (selectedService && collabServices.includes(selectedService)) {
    return <CollabNavigator />;
  }
  if (selectedService && storageServices.includes(selectedService)) {
    return <StorageNavigator />;
  }
  // Default dashboard if unknown service
  return <ZohoProjectsNavigator />;
};

const AppTabs = () => {
  const { colors } = useTheme();
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ color, size }) => {
          const map: Record<string, string> = {
            Dashboard: 'dashboard',
            Profile: 'person',
          };
          const iconName = map[route.name] ?? 'dashboard';
          return <Icon name={iconName} size={size} color={color} />;
        },
        headerShown: false,
        tabBarActiveTintColor: colors.primary,
      })}
    >
      <Tab.Screen name="Dashboard" component={DashboardWithHome} />
      <Tab.Screen name="Profile" component={ProfileNavigator} />
    </Tab.Navigator>
  );
};

const AppNavigator = () => (
    <AppTabs />
);

export default AppNavigator;

// Local overlay wrapper to show a floating home button on Dashboard
const DashboardWithHome: React.FC = () => {
  const { colors } = useTheme();
  const dispatch = useDispatch();
  return (
    <View style={{ flex: 1 }}>
      <DashboardRouter />
      <TouchableOpacity
        activeOpacity={0.85}
        onPress={() => dispatch(clearSelectedService())}
        style={[styles.fab, { backgroundColor: colors.primary }]}
      >
        <Icon name="home" size={24} color="#FFFFFF" />
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  fab: {
    position: 'absolute',
    right: 16,
    bottom: 24, // sit above tab bar
    width: 48,
    height: 48,
    borderRadius: 24,
    alignItems: 'center',
    justifyContent: 'center',
    elevation: 6,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
  },
});


