import React from "react";
import { View, StyleSheet, TouchableOpacity } from "react-native";
import { BottomTabBarProps } from "@react-navigation/bottom-tabs";
import { Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useTheme } from "../contexts/ThemeContext";

/**
 * CustomTabBar - Minimal bottom navigation with pill indicator
 *
 * Design:
 * - Simple flat design (no floating, no glassmorphism)
 * - Clean icons with outline/filled states
 * - Small pill indicator below active tab
 * - 56px height (reduced from 70px)
 * - No animations (just opacity fade on press)
 * - Theme-aware colors
 */
export function CustomTabBar({
  state,
  descriptors,
  navigation,
}: BottomTabBarProps) {
  const { colors } = useTheme();
  const insets = useSafeAreaInsets();

  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: colors.surface,
          borderTopColor: colors.border,
          paddingBottom: insets.bottom,
        },
      ]}
    >
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        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);
          }
        };

        const getIconName = (
          routeName: string,
          focused: boolean,
        ): keyof typeof Ionicons.glyphMap => {
          switch (routeName) {
            case "index":
              return focused ? "home" : "home-outline";
            case "goals":
              return focused ? "trophy" : "trophy-outline";
            case "attendance":
              return focused ? "calendar" : "calendar-outline";
            case "recommendations":
              return focused ? "sparkles" : "sparkles-outline";
            case "profile":
              return focused ? "person" : "person-outline";
            default:
              return "ellipse-outline";
          }
        };

        return (
          <TouchableOpacity
            key={index}
            accessibilityRole="button"
            accessibilityState={isFocused ? { selected: true } : {}}
            accessibilityLabel={options.tabBarAccessibilityLabel}
            testID={(options as any).tabBarTestID}
            onPress={onPress}
            style={styles.tabItem}
            activeOpacity={0.7}
          >
            <View style={styles.iconWrapper}>
              <Ionicons
                name={getIconName(route.name, isFocused)}
                size={24}
                color={isFocused ? colors.primary : colors.textTertiary}
              />
              {isFocused && (
                <View
                  style={[
                    styles.indicator,
                    { backgroundColor: colors.primary },
                  ]}
                />
              )}
            </View>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    height: 56,
    borderTopWidth: 1,
  },
  tabItem: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    height: "100%",
  },
  iconWrapper: {
    alignItems: "center",
    justifyContent: "center",
  },
  indicator: {
    width: 24,
    height: 3,
    borderRadius: 999,
    marginTop: 4,
  },
});
