digital-pilates/app/(tabs)/_layout.tsx

import * as Haptics from 'expo-haptics';
import { Tabs, usePathname } from 'expo-router';
import React from 'react';
import { Text, TouchableOpacity, View, ViewStyle } from 'react-native';
import type { BottomTabNavigationOptions } from '@react-navigation/bottom-tabs';

import { IconSymbol } from '@/components/ui/IconSymbol';
import { Colors } from '@/constants/Colors';
import { ROUTES } from '@/constants/Routes';
import { TAB_BAR_BOTTOM_OFFSET, TAB_BAR_HEIGHT } from '@/constants/TabBar';
import { useColorScheme } from '@/hooks/useColorScheme';

// Tab configuration
type TabConfig = {
  icon: string;
  title: string;
};

const TAB_CONFIGS: Record<string, TabConfig> = {
  statistics: { icon: 'chart.pie.fill', title: '健康' },
  explore: { icon: 'magnifyingglass.circle.fill', title: '发现' },
  goals: { icon: 'flag.fill', title: '习惯' },
  personal: { icon: 'person.fill', title: '个人' },
};

export default function TabLayout() {
  const theme = (useColorScheme() ?? 'light') as 'light' | 'dark';
  const colorTokens = Colors[theme];
  const pathname = usePathname();

  // Helper function to determine if a tab is selected
  const isTabSelected = (routeName: string): boolean => {
    const routeMap: Record<string, string> = {
      explore: ROUTES.TAB_EXPLORE,
      goals: ROUTES.TAB_GOALS,
      statistics: ROUTES.TAB_STATISTICS,
    };
    
    return routeMap[routeName] === pathname || pathname.includes(routeName);
  };

  // Custom tab button component
  const createTabButton = (routeName: string) => (props: any) => {
    const { onPress } = props;
    const tabConfig = TAB_CONFIGS[routeName];
    
    if (!tabConfig) return null;
    
    const isSelected = isTabSelected(routeName);
    
    const handlePress = (event: any) => {
      if (process.env.EXPO_OS === 'ios') {
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
      }
      onPress?.(event);
    };

    return (
      <TouchableOpacity
        onPress={handlePress}
        accessibilityRole="button"
        style={{
          flex: 1,
          alignItems: 'center',
          justifyContent: 'center',
          flexDirection: 'row',
          marginHorizontal: 6,
          marginVertical: 10,
          borderRadius: 25,
          backgroundColor: isSelected ? colorTokens.tabBarActiveBackground : 'transparent',
          paddingHorizontal: isSelected ? 16 : 10,
          paddingVertical: 8,
        }}
      >
        <View style={{ flexDirection: 'row', alignItems: 'center' }}>
          <IconSymbol
            size={22}
            name={tabConfig.icon as any}
            color={isSelected ? colorTokens.tabIconSelected : colorTokens.tabIconDefault}
          />
          {isSelected && (
            <Text
              style={{
                color: colorTokens.tabIconSelected,
                fontSize: 12,
                fontWeight: '600',
                marginLeft: 6,
              }}
              numberOfLines={0 as any}
            >
              {tabConfig.title}
            </Text>
          )}
        </View>
      </TouchableOpacity>
    );
  };

  // Common screen options
  const getScreenOptions = (routeName: string): BottomTabNavigationOptions => ({
    headerShown: false,
    tabBarActiveTintColor: colorTokens.tabIconSelected,
    tabBarButton: createTabButton(routeName),
    tabBarStyle: {
      position: 'absolute',
      bottom: TAB_BAR_BOTTOM_OFFSET,
      height: TAB_BAR_HEIGHT,
      borderRadius: 34,
      backgroundColor: colorTokens.tabBarBackground,
      shadowColor: '#000',
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.2,
      shadowRadius: 10,
      elevation: 5,
      paddingHorizontal: 10,
      paddingTop: 0,
      paddingBottom: 0,
      marginHorizontal: 20,
      left: 20,
      right: 20,
      alignSelf: 'center',
    } as ViewStyle,
    tabBarItemStyle: {
      backgroundColor: 'transparent',
      height: TAB_BAR_HEIGHT,
      marginTop: 0,
      marginBottom: 0,
      paddingTop: 0,
      paddingBottom: 0,
    },
    tabBarShowLabel: false,
  });

  return (
    <Tabs
      initialRouteName="statistics"
      screenOptions={({ route }) => getScreenOptions(route.name)}
    >

      <Tabs.Screen name="statistics" options={{ title: '健康' }} />
      <Tabs.Screen name="explore" options={{ title: '发现', href: null }} />
      <Tabs.Screen name="coach" options={{ title: 'AI', href: null }} />
      <Tabs.Screen name="goals" options={{ title: '习惯' }} />
      <Tabs.Screen name="personal" options={{ title: '个人' }} />
    </Tabs>
  );
}