import { View } from "react-native";
import { useEffect, useState } from "react";
import { Heading } from "@/components/ui/heading";
import { FlatList } from "react-native";
import UserBlock from "@/components/UserBlock";
import { getAllUsers } from "@/api/client";
import { useAuthStore } from "@/store/authStore";

export function UserSection({ notices, title }) {
  const [users, setUsers] = useState([]);
  const { token } = useAuthStore.getState();

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const data = await getAllUsers();
        setUsers(data);
      } catch (error) {
        setUsers([]);
      }
    };

    if (token) {
        fetchUsers();
    }
  }, [token]);

  const usersWithNoticeCount =
    users && users.length > 0
      ? users.map((user) => {
          const count = notices.filter((n) => n.clientId === user.id).length;
          return { ...user, noticeCount: count };
        })
      : [];

  const topUsers = usersWithNoticeCount
    .sort((a, b) => b.noticeCount - a.noticeCount)
    .slice(0, 5);

  return (
    <View className="mb-6">
      <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
      <FlatList
        data={topUsers}
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
        renderItem={({ item }) => {
          return <UserBlock user={item} />;
        }}
      />
    </View>
  );
}