import React from 'react';
import { TouchableOpacity } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { DrawerNavigationProp } from '@react-navigation/drawer';
import Icon from 'react-native-vector-icons/Ionicons';
import { route, RouteParams } from '@utils';
import {
  DashboardScreen,
  AddLeadScreen,
  CustomersScreen,
  ProfileScreen,
} from '@features';
import { LeadsStack } from './leadsStack';
import { useTheme } from '@theme';
import { getStyles } from './tabStack.styles';

export type TabStackParamList = Pick<
  RouteParams,
  'dashboard' | 'leads' | 'addLead' | 'customers' | 'profile'
>;

const Tab = createBottomTabNavigator<TabStackParamList>();

export const TabStack = () => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  return (
    <Tab.Navigator
      screenOptions={({ route: tabRoute }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName = 'square';
          if (tabRoute.name === route.dashboard) {
            iconName = focused ? 'grid' : 'grid-outline';
          } else if (tabRoute.name === route.leads) {
            iconName = focused ? 'funnel' : 'funnel-outline';
          } else if (tabRoute.name === route.addLead) {
            iconName = focused ? 'add-circle' : 'add-circle-outline';
          } else if (tabRoute.name === route.customers) {
            iconName = focused ? 'business' : 'business-outline';
          } else if (tabRoute.name === route.profile) {
            iconName = focused ? 'person' : 'person-outline';
          }
          return <Icon name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: colors.icon,
        tabBarInactiveTintColor: colors.textMuted,
        tabBarStyle: styles.tabBar,
        tabBarLabelStyle: styles.tabBarLabel,
        headerStyle: styles.header,
        headerTitleStyle: styles.headerTitle,
        headerTitleAlign: 'center',
      })}
    >
      <Tab.Screen
        name={route.dashboard}
        component={DashboardScreen}
        options={({ navigation }) => ({
          headerTitle: 'Convex CRM',
          headerLeft: () => (
            <TouchableOpacity
              style={styles.drawerButton}
              activeOpacity={0.7}
              onPress={() => {
                const parentNav =
                  navigation.getParent<DrawerNavigationProp<any>>();
                if (parentNav) {
                  parentNav.openDrawer();
                } else {
                  (navigation as any).openDrawer?.();
                }
              }}
            >
              <Icon name="menu-outline" size={26} color={colors.text} />
            </TouchableOpacity>
          ),
        })}
      />
      <Tab.Screen
        name={route.leads}
        component={LeadsStack}
        options={{ headerShown: false }}
      />
      <Tab.Screen name={route.addLead} component={AddLeadScreen} />
      <Tab.Screen name={route.customers} component={CustomersScreen} />
      <Tab.Screen name={route.profile} component={ProfileScreen} />
    </Tab.Navigator>
  );
};