ProcureLinc-Mobile-App/src/Screens/Auction/LiveAuction.tsx

import React, { useCallback, useState, useEffect, useRef } from 'react';
import {
  View,
  FlatList,
  ActivityIndicator,
  RefreshControl,
  StyleSheet,
} from 'react-native';
import Animated, { FadeInDown, FadeOutUp } from 'react-native-reanimated';
import LiveAuctionTile from './LiveAuctionTile';
import { useFetchLiveAuction } from '../../Services/ApiCall/Hooks';
import { SearchInput } from '../../components/SearchInput';
import { Skeleton } from '../../components';
import SkeletonList from '../../components/SkeletonList';
import { useDispatch, useSelector } from 'react-redux';
import { togglePurchaseAuction } from '../../Redux/Slices/selectPurchaseAuction';
import { useTheme } from '../../Hooks/useTheme';
import AppText from '../../components/AppText';

const LiveAuction = () => {
  const Dispatch = useDispatch();
  const { colors, shadows } = useTheme();
  const user = useSelector((state: any) => state.token?.token);
  const onEndReachedCalledDuringMomentum = useRef(true);
  const SelectedPurchaseList = useSelector((state: any) => state.selectPurchaseAuction);
  const [showRefreshBanner, setShowRefreshBanner] = useState(false);

  const {
    data,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
    isLoading,
    isRefetching,
    refetch,
    isPending,
  }: any = useFetchLiveAuction();

  const renderItem = useCallback(
    ({ item, index }: any) => {
      const isPurchase = SelectedPurchaseList.findIndex(
        (prev: any) => prev.auctionNumber === item.auctionNumber,
      );
      return (
        <LiveAuctionTile
          data={item}
          index={index}
          isPurchasedByContractor={item.contractorId?.includes(
            String(user.contractorId),
          )}
          auctionId={item.auctionId}
          auctionDispatchDate={item.auctionDispatchDate}
          isPurchased={isPurchase !== -1}
          purchaseEnd={item.purchaseEnd}
          auctionOfWork={item.auctionOfWork}
          auctionFees={item.auctionFees}
          auctionNumber={item.auctionNumber}
          onPurchasePress={() => {
            console.log('[LiveAuction] purchase toggled:', item?.auctionNumber);
            Dispatch(togglePurchaseAuction(item));
          }}
          onDetailsPress={() => {}}
        />
      );
    },
    // Intentionally runs only on SelectedPurchaseList changes; other deps are stable or recreated each render.
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [SelectedPurchaseList],
  );

  const loadMore = useCallback(() => {
    if (onEndReachedCalledDuringMomentum.current) return;
    if (!hasNextPage || isFetchingNextPage) return;
    console.log('[LiveAuction] loadMore: fetching next page');
    fetchNextPage();
    onEndReachedCalledDuringMomentum.current = true;
  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);

  const renderFooter = useCallback(() => {
    if (!isFetchingNextPage) return null;
    return (
      <View style={styles.footerLoader}>
        <ActivityIndicator size="small" color={colors.primary} />
        <AppText variant="caption" color={colors.textSecondary}>
          Loading more…
        </AppText>
      </View>
    );
  }, [isFetchingNextPage, colors]);

  useEffect(() => {
    if (isRefetching) {
      console.log('[LiveAuction] refetch started');
      setShowRefreshBanner(true);
    } else {
      console.log('[LiveAuction] refetch completed');
      const timer = setTimeout(() => setShowRefreshBanner(false), 1000);
      return () => clearTimeout(timer);
    }
  }, [isRefetching]);

  useEffect(() => {
    console.log('[LiveAuction] data updated:', {
      count: data?.result?.length ?? 0,
      hasNextPage,
      isFetchingNextPage,
      isPending,
    });
  }, [data, hasNextPage, isFetchingNextPage, isPending]);

  if (isLoading) {
    return <Skeleton />;
  }

  return (
    <View style={styles.root}>
      {/* Search */}
      <SearchInput onChange={() => {}} placeholder="Search auctions…" filter={false} />

      {/* Refresh Banner */}
      {showRefreshBanner && (
        <Animated.View
          entering={FadeInDown.duration(200)}
          exiting={FadeOutUp.duration(400)}
          style={[
            styles.refreshBanner,
            {
              backgroundColor: colors.surface,
              ...shadows.medium,
            },
          ]}
        >
          <ActivityIndicator size="small" color={colors.primary} />
          <AppText variant="caption" color={colors.text} style={styles.refreshText as any}>
            Refreshing auctions…
          </AppText>
        </Animated.View>
      )}

      {/* List */}
      {isPending ? (
        <SkeletonList />
      ) : (
        <FlatList
          data={data?.result ?? []}
          renderItem={renderItem}
          keyExtractor={(item: any) => item?.auctionId?.toString()}
          showsVerticalScrollIndicator={false}
          contentContainerStyle={styles.listContent}
          onEndReached={loadMore}
          onEndReachedThreshold={0.1}
          onMomentumScrollBegin={() => {
            onEndReachedCalledDuringMomentum.current = false;
          }}
          ListFooterComponent={renderFooter}
          refreshControl={
            <RefreshControl
              refreshing={isRefetching}
              onRefresh={refetch}
              tintColor="transparent"
              colors={[colors.primary]}
            />
          }
          initialNumToRender={6}
          maxToRenderPerBatch={6}
          windowSize={7}
          removeClippedSubviews
        />
      )}
    </View>
  );
};

export default LiveAuction;

const styles = StyleSheet.create({
  root: {
    flex: 1,
  },
  listContent: {
    paddingHorizontal: 16,
    paddingBottom: 60,
    paddingTop: 10,
  },
  refreshBanner: {
    alignSelf: 'center',
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
    paddingVertical: 8,
    paddingHorizontal: 16,
    marginTop: 6,
    borderRadius: 20,
    zIndex: 10,
    position: 'absolute',
    top: 60,
  },
  refreshText: {
    fontWeight: '500',
  } as any,
  footerLoader: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 8,
    paddingVertical: 16,
  },
});