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";
import Home from "../screens/home/Home";

const Tab = createBottomTabNavigator();

const TAB_CONFIG = {
  activeColor: "#eb87a3ff", // coffee-like orange
  inactiveColor: "#000000ff",
  backgroundColor: "#e3e9efff",
  height: 80,
  iconSize: 30,
  labelSize: 12,
  labelWeight: "600",
};



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,
        tabBarActiveTintColor: TAB_CONFIG.activeColor,
        tabBarInactiveTintColor: TAB_CONFIG.inactiveColor,
        tabBarLabelStyle: {
          fontSize: TAB_CONFIG.labelSize,
          fontWeight: TAB_CONFIG.labelWeight as any,
          marginBottom: Platform.OS === "ios" ? 0 : 5,
        },
        tabBarIcon: ({ color, focused }) => {
          let iconName:
            | "home"
            | "home-outline"
            | "person"
            | "person-outline"
            | "settings"
            | "settings-outline"
            | "people"
            | "people-outline" = "home-outline";

          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";

          return <Ionicons name={iconName} size={TAB_CONFIG.iconSize} color={color} />;
        },
      })}
    >
      <Tab.Screen name="Home" component={Home} />
      <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: "#dae4ed",
  },
  text: {
    fontSize: 20,
    fontWeight: "600",
    color: "#111",
  },
  tabBar: {
    position: "absolute",
    bottom: 0,
    left: 0,
    right: 0,
    height: TAB_CONFIG.height,
    backgroundColor: TAB_CONFIG.backgroundColor,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    shadowColor: "#000",
    shadowOpacity: 0.10,
    shadowOffset: { width: 0, height: -2 },
    shadowRadius: 8,
    elevation: 20,
    paddingTop: 10,
    borderTopWidth: 0,
  },
});