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 { useAdminTheme } from '../theme';
import { adminPath } from '../../constants';

const ICON_SIZE = 24;
export const BOTTOM_NAV_HEIGHT = 70;
export const BOTTOM_NAV_PADDING = 8;

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 theme = useAdminTheme();
  const navRef = React.useRef<HTMLDivElement | null>(null);
  
  // Modern Glass Background
  const navSurface = theme.glassSurfaceStrong ?? theme.surfaceMuted ?? theme.surface;
  const navBorder = theme.glassBorder ?? theme.border;
  const navShadow = theme.glassShadow ?? theme.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; strokeWidth?: number }>; label: string }> = [
    { key: 'home', icon: isDeepHome ? LayoutDashboard : Home, label: t('nav.home', 'Home') },
    { key: 'tasks', icon: CheckSquare, label: t('nav.tasks', 'Photo tasks') },
    { key: 'uploads', icon: ImageIcon, label: t('nav.uploads', 'Uploads') },
    { key: 'profile', icon: User, label: t('nav.profile', 'Profile') },
  ];

  const setBottomOffset = React.useCallback(() => {
    if (typeof document === 'undefined' || !navRef.current) {
      return;
    }

    const height = Math.ceil(navRef.current.getBoundingClientRect().height);
    document.documentElement.style.setProperty('--admin-bottom-nav-offset', `${height}px`);
  }, []);

  React.useLayoutEffect(() => {
    if (typeof window === 'undefined') {
      return;
    }

    setBottomOffset();

    const handleResize = () => setBottomOffset();
    if (typeof ResizeObserver !== 'undefined' && navRef.current) {
      const observer = new ResizeObserver(() => setBottomOffset());
      observer.observe(navRef.current);
      window.addEventListener('resize', handleResize);

      return () => {
        observer.disconnect();
        window.removeEventListener('resize', handleResize);
        document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
      };
    }

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      document.documentElement.style.removeProperty('--admin-bottom-nav-offset');
    };
  }, [setBottomOffset]);

  return (
    <YStack
      ref={navRef as any}
      position="fixed"
      bottom={0}
      left={0}
      right={0}
      backgroundColor={navSurface}
      borderTopWidth={1}
      borderColor={navBorder}
      paddingVertical="$2.5"
      paddingHorizontal="$4"
      zIndex={50}
      shadowColor={navShadow}
      shadowOpacity={0.08}
      shadowRadius={20}
      shadowOffset={{ width: 0, height: -8 }}
      style={{
        paddingBottom: `calc(env(safe-area-inset-bottom, 0px) + ${BOTTOM_NAV_PADDING}px)`,
        backdropFilter: 'blur(20px)',
        WebkitBackdropFilter: 'blur(20px)',
      }}
    >
      <XStack width="100%" maxWidth={800} marginHorizontal="auto" justifyContent="space-around" alignItems="center">
        {items.map((item) => {
          const activeState = item.key === active;
          const isPressed = pressedKey === item.key;
          const IconCmp = item.icon;
          
          // Dynamic Styles
          const color = activeState ? theme.primary : theme.muted;
          const strokeWidth = activeState ? 2.5 : 2;
          
          return (
            <Pressable
              key={item.key}
              onPress={() => onNavigate(item.key)}
              onPressIn={() => setPressedKey(item.key)}
              onPressOut={() => setPressedKey(null)}
              onPointerLeave={() => setPressedKey(null)}
              style={{ flex: 1 }}
            >
              <YStack
                alignItems="center"
                justifyContent="center"
                gap="$1"
                minHeight={50}
                style={{
                  transform: isPressed ? 'scale(0.92)' : (activeState ? 'scale(1.05)' : 'scale(1)'),
                  transition: 'transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1)',
                }}
              >
                {activeState && (
                   <YStack 
                      position="absolute" 
                      top={-12} 
                      width={4} 
                      height={4} 
                      borderRadius={2} 
                      backgroundColor={theme.primary} 
                   />
                )}
                
                <IconCmp size={ICON_SIZE} color={color} strokeWidth={strokeWidth} />
                
                <Text
                  fontSize={10}
                  fontWeight={activeState ? "700" : "500"}
                  color={color}
                  textAlign="center"
                >
                  {item.label}
                </Text>
              </YStack>
            </Pressable>
          );
        })}
      </XStack>
    </YStack>
  );
}