import { Colors } from "@/constants/Colors";
import { IPItem } from "@/services/award";
import React from "react";
import {
    ScrollView,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from "react-native";

const ITEM_WIDTH = 87;
const ITEM_HEIGHT = 42;

interface IPFilterProps {
  data: IPItem[];
  activeIndex: number;
  onSelect?: (item: IPItem, index: number) => void;
}

export function IPFilter({ data, activeIndex, onSelect }: IPFilterProps) {
  return (
    <View style={styles.container}>
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={styles.content}
      >
        {data.map((item, index) => {
          const isActive = activeIndex === index;
          return (
            <TouchableOpacity
              key={item.id || index}
              activeOpacity={0.7}
              onPress={() => onSelect?.(item, index)}
              style={[
                styles.item,
                isActive ? styles.itemActive : styles.itemInactive,
              ]}
            >
              <Text
                style={[styles.text, isActive && styles.textActive]}
                numberOfLines={1}
              >
                {item.name}
              </Text>
              {/* Active Indicator */}
              {isActive && <View style={styles.indicator} />}
            </TouchableOpacity>
          );
        })}
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: "100%",
    paddingTop: 10,
    marginBottom: 5,
  },
  content: {
    paddingHorizontal: 8,
  },
  item: {
    width: ITEM_WIDTH,
    height: ITEM_HEIGHT,
    justifyContent: "center",
    alignItems: "center",
    marginHorizontal: 6,
    borderRadius: 4,
    borderWidth: 1,
  },
  itemInactive: {
    backgroundColor: "rgba(255, 255, 255, 0.05)",
    borderColor: Colors.textTertiary,
  },
  itemActive: {
    backgroundColor: "rgba(0, 243, 255, 0.1)", // Low opacity neon blue
    borderColor: Colors.neonBlue,
    shadowColor: Colors.neonBlue,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.5,
    shadowRadius: 5,
    elevation: 5,
  },
  text: {
    fontWeight: "bold",
    fontSize: 14,
    color: Colors.textSecondary,
  },
  textActive: {
    color: "#fff",
    textShadowColor: Colors.neonBlue,
    textShadowRadius: 5,
  },
  indicator: {
    position: "absolute",
    bottom: -1,
    width: "40%",
    height: 2,
    backgroundColor: Colors.neonBlue,
  },
});