circle-collect/src/screens/home/GroupList.tsx

import React, { useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  TextInput,
  FlatList,
  ActivityIndicator,
  LayoutAnimation,
  UIManager,
  Platform,
  Alert,
} from "react-native";
import { Ionicons } from "@react-native-vector-icons/ionicons";
import colors from "../../components/colors";
import * as keychain from "react-native-keychain";
import { BASE_URL } from "../../utils/ApiUrls";

// Enable LayoutAnimation for Android
if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}


const GroupCard = ({ item }: { item: any }) => {
  const [expanded, setExpanded] = useState(false);
  const toggleExpand = () => {
    LayoutAnimation.easeInEaseOut();
    setExpanded(!expanded);
  };
  const initial = item.groupName ? item.groupName.charAt(0).toUpperCase() : "?";
  return (
    <View style={styles.groupCard}>
      <View style={styles.groupLeft}>
        <View style={styles.groupAvatar}>
          <Text style={styles.avatarText}>{initial}</Text>
        </View>
        <View style={{ flex: 1 }}>
          <Text style={styles.groupName}>{item.groupName}</Text>
          <Text style={styles.groupDescription}>{item.description}</Text>
          <Text style={styles.groupMeta}>
            {item.visibility} • {item.cycleType}
          </Text>
        </View>
        <TouchableOpacity onPress={toggleExpand}>
          <Ionicons
            name={expanded ? "chevron-up-outline" : "chevron-forward-outline"}
            size={22}
            color={colors.textLight}
          />
        </TouchableOpacity>
      </View>

      {expanded && (
        <View style={styles.detailsBox}>
          {Object.entries(item).map(([key, value]) => (
            <Text key={key} style={styles.detailText}>
              <Text style={{ fontWeight: "600" }}>{key}:</Text>{" "}
              {Array.isArray(value) ? value.join("-") : String(value)}
            </Text>
          ))}
        </View>
      )}
    </View>
  );
};

// ✅ Group List with Search
const GroupList = () => {
  const [groups, setGroups] = useState<any[]>([]);
  const [filteredGroups, setFilteredGroups] = useState<any[]>([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState("");

  useEffect(() => {
    const fetchGroups = async () => {
      const credentials = await keychain.getGenericPassword();
      if (!credentials) {
        Alert.alert("Error", "You are not logged in");
        return;
      }
      const token = credentials.password;
      try {
        const res = await fetch(`${BASE_URL}fund/getAll/my/groups`, {
          headers: { Accept: "*/*", Authorization: `Bearer ${token}` },
        });
        console.log("my groups response", res);
        const data = await res.json();
        setGroups(data.data || []);
        setFilteredGroups(data.data || []);
      } catch (e) {
        console.error("API error", e);
      } finally {
        setLoading(false);
      }
    };
    fetchGroups();
  }, []);

  useEffect(() => {
    if (search.trim() === "") {
      setFilteredGroups(groups);
    } else {
      setFilteredGroups(
        groups.filter((g) =>
          g.groupName.toLowerCase().includes(search.toLowerCase())
        )
      );
    }
  }, [search, groups]);

  if (loading) return <ActivityIndicator size="large" color={colors.Home} />;

  return (
    <>
      <View style={styles.searchContainer}>
        <Ionicons name="search" size={20} color={colors.textLight} />
        <TextInput
          placeholder="Search groups..."
          placeholderTextColor={colors.textLight}
          style={styles.searchInput}
          value={search}
          onChangeText={setSearch}
        />
      </View>

      <FlatList
        data={filteredGroups}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => <GroupCard item={item} />}
        ListEmptyComponent={
          <Text style={styles.emptyText}>No groups found</Text>
        }
      />
    </>
  );
};

export default GroupList;
const styles = StyleSheet.create({

  searchContainer: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: colors.white,
    borderRadius: 12,
    paddingHorizontal: 12,
    marginVertical: 10,
    height: 45,
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 5,
    elevation: 2,
  },
  searchInput: { flex: 1, marginLeft: 8, color: colors.textDark },

  groupCard: {
    backgroundColor: colors.white,
    padding: 14,
    borderRadius: 14,
    marginBottom: 12,
    shadowColor: "#000",
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 2,
  },
  groupLeft: { flexDirection: "row", alignItems: "center" },
  groupAvatar: {
    width: 50,
    height: 50,
    borderRadius: 25,
    backgroundColor: colors.pastelPink,
    justifyContent: "center",
    alignItems: "center",
    marginRight: 12,
  },
  avatarText: { fontSize: 18, fontWeight: "700", color: colors.Home },
  groupName: { fontSize: 16, fontWeight: "600", color: colors.textDark },
  groupDescription: { fontSize: 13, color: colors.textLight, marginTop: 2 },
  groupMeta: { fontSize: 12, color: colors.Home, marginTop: 2 },
  detailsBox: {
    marginTop: 10,
    padding: 10,
    borderRadius: 8,
    backgroundColor: "#f9f9f9",
  },
  detailText: { fontSize: 12, color: colors.textDark, marginBottom: 4 },
  emptyText: { textAlign: "center", color: colors.textLight, marginTop: 20 },
  centered: { flex: 1, justifyContent: "center", alignItems: "center" },
  sectionTitle: { fontSize: 18, fontWeight: "600", color: colors.textDark },
});