import { useRef } from "react";
import { Pressable, ScrollView, Text, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import * as Haptics from "expo-haptics";

interface CategoryPill {
  id: string;
  name: string;
  count: number;
}

interface CategoryPillBarProps {
  categories: CategoryPill[];
  activeCategoryId: string | null;
  onSelectCategory: (id: string) => void;
  onAddCategoryPress: () => void;
}

export function CategoryPillBar({
  categories,
  activeCategoryId,
  onSelectCategory,
  onAddCategoryPress,
}: CategoryPillBarProps) {
  const scrollRef = useRef<ScrollView>(null);

  if (categories.length === 0) return null;

  return (
    <View style={{ backgroundColor: "#FAF8F5", paddingVertical: 10, borderBottomWidth: 1, borderBottomColor: "#E7E5E4" }}>
      <ScrollView
        ref={scrollRef}
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ paddingHorizontal: 16, gap: 8, alignItems: "center" }}
      >
        {categories.map((cat) => {
          const isActive = cat.id === activeCategoryId;
          return (
            <Pressable
              key={cat.id}
              onPress={() => {
                Haptics.selectionAsync();
                onSelectCategory(cat.id);
              }}
              style={({ pressed }) => ({
                flexDirection: "row",
                alignItems: "center",
                gap: 6,
                backgroundColor: isActive ? "#1C1917" : "#FFFFFF",
                paddingVertical: 8,
                paddingHorizontal: 14,
                borderRadius: 20,
                borderWidth: 1,
                borderColor: isActive ? "#1C1917" : "#E7E5E4",
                opacity: pressed ? 0.85 : 1,
                minHeight: 38,
              })}
            >
              <Text
                style={{
                  fontSize: 13,
                  fontWeight: isActive ? "700" : "600",
                  color: isActive ? "#FFFFFF" : "#44403C",
                }}
              >
                {cat.name}
              </Text>
              <View
                style={{
                  backgroundColor: isActive ? "rgba(255, 255, 255, 0.2)" : "#F5F5F4",
                  paddingHorizontal: 6,
                  paddingVertical: 2,
                  borderRadius: 10,
                }}
              >
                <Text
                  style={{
                    fontSize: 11,
                    fontWeight: "700",
                    color: isActive ? "#FFFFFF" : "#78716C",
                  }}
                >
                  {cat.count}
                </Text>
              </View>
            </Pressable>
          );
        })}

        <Pressable
          onPress={() => {
            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
            onAddCategoryPress();
          }}
          style={({ pressed }) => ({
            flexDirection: "row",
            alignItems: "center",
            gap: 4,
            backgroundColor: "#F3EDE2",
            paddingVertical: 8,
            paddingHorizontal: 12,
            borderRadius: 20,
            borderWidth: 1,
            borderColor: "rgba(200, 169, 107, 0.4)",
            borderStyle: "dashed",
            opacity: pressed ? 0.8 : 1,
            minHeight: 38,
          })}
        >
          <Ionicons name="add" size={16} color="#926E27" />
          <Text style={{ fontSize: 13, fontWeight: "700", color: "#926E27" }}>
            Kategori
          </Text>
        </Pressable>
      </ScrollView>
    </View>
  );
}
