wellnua-lite/app/(tabs)/_layout.tsx

import { Tabs } from 'expo-router';
import React, { useCallback } from 'react';
import { Platform, View, Alert } from 'react-native';
import { Feather } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

import { HapticTab } from '@/components/haptic-tab';
import { VoiceFAB } from '@/components/VoiceFAB';
import { AppColors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';
import { useVoiceCall } from '@/contexts/VoiceCallContext';

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const isDark = colorScheme === 'dark';
  const insets = useSafeAreaInsets();
  // VoiceFAB uses VoiceCallContext internally to hide when call is active
  useVoiceCall(); // Ensure context is available

  // Handle voice FAB press - initiate voice call
  const handleVoiceFABPress = useCallback(() => {
    // TODO: Integrate with voice call service when ready
    Alert.alert(
      'Voice Call',
      'Voice call with Julia AI will be available soon.',
      [{ text: 'OK' }]
    );
  }, []);

  // Calculate tab bar height based on safe area
  // On iOS with home indicator, insets.bottom is ~34px
  // On Android with gesture navigation or software buttons (Samsung/Pixel):
  // - insets.bottom should reflect the navigation bar height
  // - But some devices/modes may return 0, so we add a minimum for Android
  // Android minimum: 16px to ensure content doesn't touch system buttons
  const androidMinPadding = Platform.OS === 'android' ? 16 : 0;
  const bottomPadding = Math.max(insets.bottom, androidMinPadding, 10);
  const tabBarHeight = 60 + bottomPadding; // 60px for content + safe area padding

  return (
    <View style={{ flex: 1 }}>
      <Tabs
        screenOptions={{
          tabBarActiveTintColor: AppColors.primary,
          tabBarInactiveTintColor: isDark ? '#9BA1A6' : '#687076',
          tabBarStyle: {
            backgroundColor: isDark ? '#151718' : AppColors.background,
            borderTopColor: isDark ? '#2D3135' : AppColors.border,
            height: tabBarHeight,
            paddingBottom: bottomPadding,
            paddingTop: 10,
          },
          tabBarLabelStyle: {
            fontSize: 11,
            fontWeight: '500',
          },
          headerShown: false,
          tabBarButton: HapticTab,
        }}
      >
        <Tabs.Screen
          name="index"
          options={{
            title: 'Dashboard',
            tabBarIcon: ({ color, size }) => (
              <Feather name="grid" size={22} color={color} />
            ),
          }}
        />
        {/* Hide old dashboard - now index shows WebView dashboard */}
        <Tabs.Screen
          name="dashboard"
          options={{
            href: null,
          }}
        />
        {/* Chat with Julia AI */}
        <Tabs.Screen
          name="chat"
          options={{
            title: 'Julia',
            tabBarIcon: ({ color, size }) => (
              <Feather name="message-circle" size={22} color={color} />
            ),
          }}
        />
        <Tabs.Screen
          name="profile"
          options={{
            title: 'Profile',
            tabBarIcon: ({ color, size }) => (
              <Feather name="user" size={22} color={color} />
            ),
          }}
        />
        {/* Hide explore tab */}
        <Tabs.Screen
          name="explore"
          options={{
            href: null,
          }}
        />
        {/* Audio Debug - hidden */}
        <Tabs.Screen
          name="audio-debug"
          options={{
            href: null,
          }}
        />
        {/* Beneficiaries - hidden from tab bar but keeps tab bar visible */}
        <Tabs.Screen
          name="beneficiaries"
          options={{
            href: null,
          }}
        />
      </Tabs>

      {/* Voice FAB - shown when no call is active */}
      <VoiceFAB onPress={handleVoiceFABPress} />
    </View>
  );
}