import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import { View, Text, StyleSheet, Platform } from "react-native";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import GroupScreen from "../screens/GroupScreen";
import Profile from "../screens/profile/Profile";

const Tab = createBottomTabNavigator();

const TAB_CONFIG = {
  activeColor: "#000",
  inactiveColor: "#8e8e93",
  backgroundColor: "#fff",
  height: 70,
  iconSize: 26,
};

// 1. Define a color map for active tabs
const activeTabColors: { [key: string]: string } = {
  Home: "#ff7675", // A soft red
  Profile: "#74b9ff", // A nice blue
  Group: "#55efc4", // Your theme's green
  Settings: "#ffeaa7", // A gentle yellow
};

// 2. Define a text color map for contrasting icon colors
const activeIconColors: { [key: string]: string } = {
    Home: "#333",
    Profile: "#333",
    Group: "#333",
    Settings: "#e17055",
}


function HomeScreen() {
  return (
    <View style={styles.screen}><Text style={styles.text}>🏠 Home</Text></View>
  );
}

function SettingsScreen() {
  return (
    <View style={styles.screen}><Text style={styles.text}>⚙️ Settings</Text></View>
  );
}

export default function BottomTabs() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        headerShown: false,
        tabBarStyle: styles.tabBar,

        tabBarLabel: ({ focused, color }) =>
          !focused ? (
            <Text style={[styles.label, { color }]}>{route.name}</Text>
          ) : null,

        tabBarIcon: ({ focused }) => {
          let iconName: string = "home-outline";
          
          // Determine icon based on route
          if (route.name === "Home") iconName = focused ? "home" : "home-outline";
          else if (route.name === "Profile") iconName = focused ? "person" : "person-outline";
          else if (route.name === "Settings") iconName = focused ? "settings" : "settings-outline";
          else if (route.name === "Group") iconName = focused ? "people" : "people-outline";

          // 3. Get the active background color and icon color from the maps
          const activeBackgroundColor = activeTabColors[route.name];
          const activeIconColor = activeIconColors[route.name];

          return (
            <View
              style={[
                styles.iconContainer,
                // 4. Apply the dynamic background color when focused
                focused && [
                  styles.activeIconContainer,
                  { backgroundColor: activeBackgroundColor },
                ],
              ]}
            >
              <Ionicons
                name={iconName}
                size={TAB_CONFIG.iconSize}
                color={focused ? activeIconColor : TAB_CONFIG.inactiveColor}
              />
            </View>
          );
        },
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={Profile} />
      <Tab.Screen name="Group" component={GroupScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#f5f7fa",
  },
  text: {
    fontSize: 20,
    fontWeight: "600",
    color: "#111",
  },
  tabBar: {
    position: "absolute",
    bottom: 20,
    left: 20,
    right: 20,
    height: TAB_CONFIG.height,
    backgroundColor: TAB_CONFIG.backgroundColor,
    borderRadius: 20,
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowOffset: { width: 0, height: 5 },
    shadowRadius: 8,
    elevation: 10,
    paddingBottom: Platform.OS === "ios" ? 25 : 10,
    paddingTop: 10,
    marginHorizontal: 10,
  },
  label: {
    fontSize: 12,
    marginBottom: 5,
  },
  iconContainer: {
    justifyContent: "center",
    alignItems: "center",
    width: 50, // Reduced size for a sleeker look
    height: 50, // Reduced size
    marginTop: 10,
    borderRadius: 15,
  },
  activeIconContainer: {
    // The default active style, background color is now applied dynamically
    elevation: 2,
    shadowColor: '#000',
    shadowOpacity: 0.1,
    shadowRadius: 5,
  },
});