import React from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { XStack, YStack } from '@tamagui/stacks';
import { SizableText as Text } from '@tamagui/text';
import { Button } from '@tamagui/button';
import { Home, Image, Share2 } from 'lucide-react';
import { useEventData } from '../context/EventDataContext';
import { buildEventPath } from '../lib/routes';
import { useTranslation } from '@/guest/i18n/useTranslation';
import { useGuestThemeVariant } from '../lib/guestTheme';

export default function BottomDock() {
  const location = useLocation();
  const navigate = useNavigate();
  const { token } = useEventData();
  const { t } = useTranslation();
  const { isDark } = useGuestThemeVariant();

  const dockItems = [
    { key: 'home', label: t('navigation.home', 'Home'), path: '/', icon: Home },
    { key: 'gallery', label: t('navigation.gallery', 'Gallery'), path: '/gallery', icon: Image },
    { key: 'share', label: t('navigation.share', 'Share'), path: '/share', icon: Share2 },
  ];
  const activeIconColor = isDark ? '#F8FAFF' : '#0F172A';
  const inactiveIconColor = isDark ? '#94A3B8' : '#64748B';

  return (
    <XStack
      position="fixed"
      left={0}
      right={0}
      bottom={0}
      zIndex={1000}
      paddingHorizontal="$4"
      paddingBottom="$3"
      paddingTop="$2"
      alignItems="flex-end"
      justifyContent="space-between"
      borderTopWidth={1}
      borderColor="rgba(255, 255, 255, 0.08)"
      style={{
        paddingBottom: 'calc(12px + env(safe-area-inset-bottom))',
        backgroundColor: isDark ? 'rgba(10, 14, 28, 0.85)' : 'rgba(255, 255, 255, 0.9)',
        backdropFilter: 'saturate(160%) blur(18px)',
        WebkitBackdropFilter: 'saturate(160%) blur(18px)',
      }}
    >
      {dockItems.map((item) => {
        const targetPath = buildEventPath(token, item.path);
        const active = location.pathname === targetPath || (item.path !== '/' && location.pathname.startsWith(targetPath));
        const Icon = item.icon;
        return (
          <Button
            key={item.key}
            unstyled
            onPress={() => navigate(targetPath)}
            padding="$2"
            borderRadius="$pill"
            backgroundColor={active ? '$surface' : 'transparent'}
            borderWidth={active ? 1 : 0}
            borderColor={active ? '$borderColor' : 'transparent'}
          >
            <YStack alignItems="center" gap="$1">
              <Icon size={18} color={active ? activeIconColor : inactiveIconColor} />
              <Text fontSize="$1" color={active ? '$color' : '$color'} opacity={active ? 1 : 0.6}>
                {item.label}
              </Text>
            </YStack>
          </Button>
        );
      })}
    </XStack>
  );
}