import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { View, Text, StyleSheet, Platform, TouchableOpacity } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import Ionicons from 'react-native-vector-icons/Ionicons'; // Correct import for react-native-vector-icons

import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../navigation/AppNavigator'; // Adjust path
import EditGroupScreen from './EditGroupScreen'; // Your screen component
import Payments from './Payments';
import Member from './Member';

type Props = NativeStackScreenProps<RootStackParamList, 'ManagementTabs'>;

const Tab = createBottomTabNavigator();

// --- Custom Floating Tab Bar Component ---
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';

const FloatingTabBar = ({ state, descriptors, navigation }: BottomTabBarProps) => {
  const insets = useSafeAreaInsets();

  return (
    <View style={[styles.tabBarContainer, { bottom: insets.bottom > 0 ? insets.bottom : 16 }]}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel ?? options.title ?? route.name;

        console.log("option : ", options)
        // A custom option to pass the icon name
        const iconName = options.tabBarIconName ?? 'help-circle'; 

        const isFocused = state.index === index;

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name, route.params);
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        return (
          <TouchableOpacity
            key={route.key}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={options.tabBarButtonTestID}
            onPress={onPress}
            onLongPress={onLongPress}
            style={styles.tabItem}
          >
            <Ionicons
              name={iconName}
              size={24}
              color={isFocused ? '#4F46E5' : '#6B7280'}
            />
            <Text style={[styles.tabLabel, { color: isFocused ? '#4F46E5' : '#6B7280' }]}>
              {label as string}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

// --- Main Tab Navigator Component ---
const ManagementTabNavigation: React.FC<Props> = ({ route }) => {
  const { groupId } = route.params 

  return (
    <Tab.Navigator
      // Assign the custom floating tab bar
      tabBar={props => <FloatingTabBar {...props} />}
      screenOptions={{
        headerShown: false, // Hides the default header for all screens in the tab
      }}
    >
      <Tab.Screen
        name="EditGroup"
        component={EditGroupScreen}
        // Pass the groupId to the EditGroupScreen as an initial parameter
        initialParams={{ groupId }}
        options={{
          tabBarLabel: 'Settings',
          // Custom prop to define the icon for our FloatingTabBar
      
        }}
      />
            <Tab.Screen
        name="Payments"
        component={Payments}
        // Pass the groupId to the EditGroupScreen as an initial parameter
        initialParams={{ groupId }}
        options={{
          tabBarLabel: 'Payments',


        }}
      />
          <Tab.Screen
        name="Member"
        component={Member}
        // Pass the groupId to the EditGroupScreen as an initial parameter
        initialParams={{ groupId  }}
        options={{
          tabBarLabel: 'Members',
       
        }}
        
      />
      {/* You can easily add more tabs here in the future */}
    </Tab.Navigator>
  );
};

// --- Styles ---
const styles = StyleSheet.create({
  tabBarContainer: {
    flexDirection: 'row',
    position: 'absolute',
    left: 30,
    right: 30,
    backgroundColor: 'white',
    borderRadius: 60,
    paddingVertical: 4,
    alignItems: 'center',
    justifyContent: 'space-around',

    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 0.1,
    shadowRadius: 10,
    elevation: 8,
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingVertical: 8,
  },
  tabLabel: {
    fontSize: 12,
    marginTop: 4,
    fontWeight: '600',
  },
});

export default ManagementTabNavigation;