import { Heart, Home, Map, Store, UserRound } from "lucide-react-native";
import { Pressable, StyleSheet, Text, View } from "react-native";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";
import type { IconComponent, ScreenId } from "../types/domain";

interface TabItem {
  id: ScreenId;
  label: string;
  icon: IconComponent;
}

const tabs: TabItem[] = [
  { id: "home", label: "Accueil", icon: Home },
  { id: "explore", label: "Explorer", icon: Store },
  { id: "pass", label: "Pass Local", icon: Map },
  { id: "favorites", label: "Favoris", icon: Heart },
  { id: "profile", label: "Profil", icon: UserRound }
];

interface BottomNavigationProps {
  activeScreen: ScreenId;
  onNavigate: (screen: ScreenId) => void;
}

export function BottomNavigation({ activeScreen, onNavigate }: BottomNavigationProps) {
  return (
    <View style={styles.shell}>
      <View style={styles.container}>
        {tabs.map((tab) => {
          const isActive = tab.id === activeScreen;
          const Icon = tab.icon;

          return (
            <Pressable
              accessibilityRole="tab"
              accessibilityState={{ selected: isActive }}
              key={tab.id}
              onPress={() => onNavigate(tab.id)}
              style={({ pressed }) => [
                styles.tab,
                isActive && styles.activeTab,
                pressed && styles.pressed
              ]}
            >
              <Icon
                color={isActive ? colors.primary : colors.muted}
                size={20}
                strokeWidth={isActive ? 2.8 : 2.3}
              />
              <Text
                numberOfLines={1}
                style={[styles.label, isActive && styles.activeLabel]}
              >
                {tab.label}
              </Text>
            </Pressable>
          );
        })}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  shell: {
    position: "absolute",
    left: 0,
    right: 0,
    bottom: 0,
    paddingHorizontal: spacing.md,
    paddingTop: spacing.sm,
    paddingBottom: spacing.md,
    backgroundColor: "rgba(255, 248, 252, 0.96)"
  },
  container: {
    height: 70,
    borderRadius: radius.lg,
    borderWidth: 1,
    borderColor: colors.line,
    backgroundColor: colors.surface,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    paddingHorizontal: spacing.xs,
    shadowColor: colors.shadow,
    shadowOpacity: 1,
    shadowRadius: 18,
    shadowOffset: { width: 0, height: 8 },
    elevation: 12
  },
  tab: {
    flex: 1,
    height: 58,
    borderRadius: radius.md,
    alignItems: "center",
    justifyContent: "center",
    gap: 3
  },
  activeTab: {
    backgroundColor: colors.primarySoft
  },
  pressed: {
    opacity: 0.76
  },
  label: {
    color: colors.muted,
    fontSize: 10,
    lineHeight: 12,
    fontWeight: "800"
  },
  activeLabel: {
    color: colors.primary
  }
});