import React from "react";
import {
  BottomTabNavigationProp,
  createBottomTabNavigator,
} from "@react-navigation/bottom-tabs";
import {
  View,
  StyleSheet,
} from "react-native";
import { Home, User, Settings, Users } from "lucide-react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { responsiveFontSize } from "react-native-responsive-dimensions";

import HomeScreen from "../screens/home/Home";
import Profile from "../screens/profile/Profile";
import GroupScreen from "../screens/GroupScreen";
import ManagementScreen from "../screens/management/ManagementScreen";
import { useTheme } from "../hooks/ui/useTheme";
import FontsFamily from "../constents/FontsFamily";

export type RootTabParamList = {
  Home: undefined;
  Profile: undefined;
  Group: undefined;
  Management: {
    actionTab?: "My Groups" | "Joined Groups" | "Requests" | "Your Requests";
  };
};

export type TabNavigationProp = BottomTabNavigationProp<RootTabParamList>;
const Tab = createBottomTabNavigator<RootTabParamList>();

const BottomTabs: React.FC = () => {
  const theme = useTheme();
  const insets = useSafeAreaInsets();

  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarShowLabel: true,
        tabBarStyle: {
          position: "absolute",
          bottom: Math.max(insets.bottom, 8),
          left: 40,
          right: 40,
          height: 64,
          borderRadius: 22,
          backgroundColor: theme.colors.surface,
          borderWidth: 1,
          borderColor: theme.colors.border,
          borderTopWidth: 0,
          elevation: 10,
          shadowColor: "#000",
          shadowOffset: { width: 0, height: 4 },
          shadowOpacity: 0.15,
          shadowRadius: 10,
          paddingBottom: 0,
        },
        tabBarItemStyle: {
          height: 64,
          justifyContent: "center",
          alignItems: "center",
          paddingVertical: 6,
        },
        tabBarActiveTintColor: theme.colors.primary,
        tabBarInactiveTintColor: theme.colors.textMuted,
        tabBarLabelStyle: {
          fontFamily: FontsFamily.nunitoBold,
          fontSize: responsiveFontSize(1.2),
          marginTop: -2,
          marginBottom: 4,
        },
        tabBarIcon: ({ focused, color }) => {
          const iconColor = focused ? theme.colors.primary : color;
          const iconSize = 22;
          let IconComponent: React.FC<any> = Home;

          if (route.name === "Home") IconComponent = Home;
          else if (route.name === "Profile") IconComponent = User;
          else if (route.name === "Management") IconComponent = Settings;
          else if (route.name === "Group") IconComponent = Users;

          return (
            <View style={[
              styles.iconWrapper,
              focused && { backgroundColor: theme.colors.primarySoft }
            ]}>
              <IconComponent
                size={iconSize}
                color={iconColor}
                strokeWidth={focused ? 2.5 : 2}
              />
            </View>
          );
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Group" component={GroupScreen} />
      <Tab.Screen name="Management" component={ManagementScreen} />
    </Tab.Navigator>
  );
};

const styles = StyleSheet.create({
  iconWrapper: {
    width: 40,
    height: 28,
    justifyContent: "center",
    alignItems: "center",
    borderRadius: 10,
    marginBottom: 2,
  },
});

export default BottomTabs;