import { radius, shadows, useColors } from '@/aesthetics/styles';
import { usePreferences } from '@/profile/preferences';
import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
import { useRouter } from 'expo-router';
import { House, Plus, User } from 'lucide-react-native';
import { Pressable, StyleSheet, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

const TAB_BAR_HEIGHT = 64;
const TAB_BAR_BOTTOM_MARGIN = 24;

export function TabBar({ state, descriptors, navigation }: BottomTabBarProps) {
  const { isDarkMode } = usePreferences();
  const c = useColors();
  const insets = useSafeAreaInsets();
  const router = useRouter();

  const tabs = [
    { icon: House, isCenter: false },
    { icon: Plus, isCenter: true },
    { icon: User, isCenter: false },
  ];

  return (
    <View style={[styles.tabBarWrapper, { bottom: insets.bottom + TAB_BAR_BOTTOM_MARGIN }]}>
      <View
        style={[
          styles.tabBar,
          shadows.md,
          {
            backgroundColor: isDarkMode ? c.surfaceElevated : c.surface,
            borderColor: c.borderSubtle,
          },
        ]}
      >
        {state.routes.map((route, index) => {
          const { options } = descriptors[route.key];
          const isFocused = state.index === index;
          const { icon: Icon, isCenter } = tabs[index];

          const onPress = () => {
            if (route.name === 'log') {
              router.push('/add-log');
              return;
            }
            const event = navigation.emit({
              type: 'tabPress',
              target: route.key,
              canPreventDefault: true,
            });
            if (!isFocused && !event.defaultPrevented) {
              navigation.navigate(route.name);
            }
          };

          if (isCenter) {
            return (
              <Pressable
                key={route.key}
                onPress={onPress}
                style={({ pressed }) => [styles.centerTab, pressed && styles.pressed]}
                accessibilityRole="button"
                accessibilityLabel={options.tabBarAccessibilityLabel}
              >
                <View style={[styles.centerButton, { backgroundColor: c.accent }]}>
                  <Icon size={24} color={c.buttonText} strokeWidth={2} />
                </View>
              </Pressable>
            );
          }

          return (
            <Pressable
              key={route.key}
              onPress={onPress}
              style={({ pressed }) => [styles.tabItem, pressed && styles.pressed]}
              accessibilityRole="button"
              accessibilityState={isFocused ? { selected: true } : {}}
              accessibilityLabel={options.tabBarAccessibilityLabel}
            >
              <Icon
                size={22}
                color={isFocused ? c.text : c.tertiaryText}
                strokeWidth={isFocused ? 2 : 1.5}
              />
            </Pressable>
          );
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  tabBarWrapper: {
    position: 'absolute',
    left: 24,
    right: 24,
    alignItems: 'center',
  },
  tabBar: {
    flexDirection: 'row',
    width: '100%',
    maxWidth: 320,
    height: TAB_BAR_HEIGHT,
    borderRadius: radius.xl,
    borderWidth: 1,
    paddingHorizontal: 8,
    alignItems: 'center',
    overflow: 'hidden',
  },
  tabItem: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: '100%',
  },
  centerTab: {
    alignItems: 'center',
    justifyContent: 'center',
    paddingHorizontal: 8,
  },
  centerButton: {
    width: 48,
    height: 48,
    borderRadius: radius.lg,
    alignItems: 'center',
    justifyContent: 'center',
  },
  pressed: {
    opacity: 0.7,
  },
});