fotospiel-app/resources/js/admin/mobile/components/BottomNav.tsx

import React from 'react';
import { useLocation } from 'react-router-dom';
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, LayoutDashboard } from 'lucide-react';
import { useTranslation } from 'react-i18next';
import { withAlpha } from './colors';
import { useAdminTheme } from '../theme';
import { adminPath } from '../../constants';

const ICON_SIZE = 20;

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

export function BottomNav({ active, onNavigate }: { active: NavKey; onNavigate: (key: NavKey) => void }) {
  const { t } = useTranslation('mobile');
  const location = useLocation();
  const { surface, border, primary, accent, muted, subtle, shadow, glassSurfaceStrong, glassBorder, glassShadow } = useAdminTheme();
  const surfaceColor = glassSurfaceStrong ?? surface;
  const navSurface = glassSurfaceStrong ?? withAlpha(surfaceColor, 0.92);
  const navBorder = glassBorder ?? border;
  const navShadow = glassShadow ?? shadow;
  const [pressedKey, setPressedKey] = React.useState<NavKey | null>(null);

  const isDeepHome = active === 'home' && location.pathname !== adminPath('/mobile/dashboard');

  const items: Array<{ key: NavKey; icon: React.ComponentType<{ size?: number; color?: string }>; label: string }> = [
    { key: 'home', icon: isDeepHome ? LayoutDashboard : 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={navSurface}
      borderTopWidth={1}
      borderColor={navBorder}
      paddingVertical="$2"
      paddingHorizontal="$4"
      zIndex={50}
      shadowColor={navShadow}
      shadowOpacity={0.12}
      shadowRadius={16}
      shadowOffset={{ width: 0, height: -6 }}
      // allow for safe-area inset on modern phones
      style={{
        paddingBottom: 'max(env(safe-area-inset-bottom, 0px), 8px)',
        backdropFilter: 'blur(14px)',
        WebkitBackdropFilter: 'blur(14px)',
      }}
    >
      <XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-between" alignItems="center">
        {items.map((item) => {
          const activeState = item.key === active;
          const isPressed = pressedKey === item.key;
          const IconCmp = item.icon;
          const activeBg = primary;
          const activeShadow = withAlpha(primary, 0.4);
          return (
            <Pressable
              key={item.key}
              onPress={() => onNavigate(item.key)}
              onPressIn={() => setPressedKey(item.key)}
              onPressOut={() => setPressedKey(null)}
              onPointerLeave={() => setPressedKey(null)}
            >
              <YStack
                flexGrow={1}
                flexBasis="0%"
                alignItems="center"
                justifyContent="center"
                space="$1"
                position="relative"
                minWidth={88}
                minHeight={64}
                paddingHorizontal="$3"
                paddingVertical="$2"
                borderRadius={12}
                backgroundColor={activeState ? activeBg : 'transparent'}
                gap="$1"
                style={{
                  boxShadow: activeState ? `0 10px 22px ${activeShadow}` : undefined,
                  transform: isPressed ? 'scale(0.96)' : 'scale(1)',
                  opacity: isPressed ? 0.9 : 1,
                  transition: 'transform 140ms ease, background-color 140ms ease, opacity 140ms ease',
                }}
              >
                {activeState ? (
                  <YStack
                    position="absolute"
                    top={6}
                    width={28}
                    height={3}
                    borderRadius={999}
                    backgroundColor={accent}
                  />
                ) : null}
                <YStack width={ICON_SIZE} height={ICON_SIZE} alignItems="center" justifyContent="center" shrink={0}>
                  <IconCmp size={ICON_SIZE} color={activeState ? 'white' : subtle} />
                </YStack>
                <Text
                  fontSize="$xs"
                  fontWeight="700"
                  fontFamily="$body"
                  color={activeState ? 'white' : muted}
                  textAlign="center"
                  flexShrink={1}
                >
                  {item.label}
                </Text>
              </YStack>
            </Pressable>
          );
        })}
      </XStack>
    </YStack>
  );
}