import React from 'react';
import { View, FlatList, StyleSheet, Text, ActivityIndicator, Dimensions } from 'react-native';
import { Deal } from '@/models/Deal';
import { DealCard } from './DealCard';

interface DealGridProps {
  deals: Deal[];
  onEndReached: () => void;
  loading?: boolean;
}

const { width } = Dimensions.get('window');
const COLUMN_GAP = 16;
const HORIZONTAL_PADDING = 16;
const ITEM_WIDTH = (width - HORIZONTAL_PADDING * 2 - COLUMN_GAP) / 2;

export function DealGrid({ deals, onEndReached, loading }: DealGridProps) {
  const renderItem = ({ item }: { item: Deal }) => (
    <View style={styles.gridItem}>
      <DealCard deal={item} compact />
    </View>
  );

  const renderFooter = () => {
    if (!loading) return null;
    return (
      <View style={styles.loaderContainer}>
        <ActivityIndicator size="large" color="#ff9500" />
      </View>
    );
  };

  const renderEmpty = () => (
    <View style={styles.emptyContainer}>
      <Text style={styles.emptyText}>No deals available</Text>
    </View>
  );

  return (
    <FlatList
      data={deals}
      renderItem={renderItem}
      keyExtractor={(item) => item.deal_id}
      numColumns={2}
      columnWrapperStyle={styles.columnWrapper}
      contentContainerStyle={styles.contentContainer}
      onEndReached={onEndReached}
      onEndReachedThreshold={0.5}
      ListFooterComponent={renderFooter}
      ListEmptyComponent={renderEmpty}
      showsVerticalScrollIndicator={true}
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      windowSize={5}
    />
  );
}

const styles = StyleSheet.create({
  contentContainer: {
    padding: HORIZONTAL_PADDING,
  },
  columnWrapper: {
    justifyContent: 'space-between',
    marginBottom: COLUMN_GAP,
  },
  gridItem: {
    width: ITEM_WIDTH,
  },
  emptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingTop: 100,
  },
  emptyText: {
    fontSize: 16,
    color: '#999',
  },
  loaderContainer: {
    width: '100%',
    padding: 20,
    alignItems: 'center',
  },
});