import React from 'react';
import { YStack, XStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Pressable } from '@tamagui/react-native-web-lite';
import { Home, CheckSquare, Image as ImageIcon, User } from 'lucide-react';
import { useTheme } from '@tamagui/core';
import { useTranslation } from 'react-i18next';

export type NavKey = 'home' | 'tasks' | 'uploads' | 'profile';

export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
  const { t } = useTranslation('mobile');
  const theme = useTheme();
  const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
    { key: 'home', icon: Home, label: t('nav.home', 'Home') },
    { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Tasks') },
    { key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
    { key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
  ];

  return (
    <YStack
      position="fixed"
      bottom={0}
      left={0}
      right={0}
      backgroundColor="white"
      borderTopWidth={1}
      borderColor="#e5e7eb"
      paddingVertical="$2"
      paddingHorizontal="$4"
      zIndex={50}
      shadowColor="#0f172a"
      shadowOpacity={0.08}
      shadowRadius={12}
      shadowOffset={{ width: 0, height: -4 }}
      // allow for safe-area inset on modern phones
      style={{ paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)' }}
    >
      <XStack justifyContent="space-between" alignItems="center">
        {items.map((item) => {
          const activeState = item.key === active;
          const IconCmp = item.icon;
          return (
            <Pressable key={item.key} onPress={() => onNavigate(item.key)}>
              <YStack alignItems="center" space="$1" position="relative">
                <IconCmp size={20} color={activeState ? String(theme.primary?.val ?? '#007AFF') : '#94a3b8'} />
                <Text fontSize="$xs" color={activeState ? '$primary' : '#6b7280'}>
                  {item.label}
                </Text>
              </YStack>
            </Pressable>
          );
        })}
      </XStack>
    </YStack>
  );
}
