import React, { useState } from 'react';
import { View, StyleSheet, Dimensions, Text } from 'react-native';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import Animated, { useAnimatedStyle, useSharedValue, withSpring, runOnJS } from 'react-native-reanimated';
import { Deal } from '@/models/Deal';
import { DealCard } from './DealCard';

interface SwipeDeckProps {
  deals: Deal[];
  onNeedMore: () => void;
}

const { width } = Dimensions.get('window');
const SWIPE_THRESHOLD = width * 0.3;

export function SwipeDeck({ deals, onNeedMore }: SwipeDeckProps) {
  const [currentIndex, setCurrentIndex] = useState(0);
  const translateX = useSharedValue(0);

  const handleSwipeComplete = (direction: 'left' | 'right') => {
    if (currentIndex < deals.length - 1) {
      setCurrentIndex(currentIndex + 1);
      if (deals.length - currentIndex <= 3) {
        onNeedMore();
      }
    }
  };

  const gesture = Gesture.Pan()
    .onUpdate((event) => {
      translateX.value = event.translationX;
    })
    .onEnd((event) => {
      const shouldSwipe = Math.abs(event.translationX) > SWIPE_THRESHOLD;

      if (shouldSwipe) {
        const direction = event.translationX > 0 ? 'right' : 'left';
        translateX.value = withSpring(event.translationX > 0 ? width : -width, {}, () => {
          runOnJS(handleSwipeComplete)(direction);
          translateX.value = 0;
        });
      } else {
        translateX.value = withSpring(0);
      }
    });

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: translateX.value }],
  }));

  if (deals.length === 0) {
    return (
      <View style={styles.emptyContainer}>
        <Text style={styles.emptyText}>No deals available</Text>
      </View>
    );
  }

  const visibleDeals = deals.slice(currentIndex, currentIndex + 5);

  return (
    <View style={styles.container}>
      {visibleDeals.map((deal, index) => {
        const isTopCard = index === 0;
        const zIndex = visibleDeals.length - index;
        const scale = 1 - index * 0.05;
        const translateY = index * 10;

        if (isTopCard) {
          return (
            <GestureDetector gesture={gesture} key={deal.deal_id}>
              <Animated.View
                style={[
                  styles.cardWrapper,
                  { zIndex, transform: [{ scale }, { translateY }] },
                  animatedStyle,
                ]}
              >
                <DealCard deal={deal} />
              </Animated.View>
            </GestureDetector>
          );
        }

        return (
          <View
            key={deal.deal_id}
            style={[
              styles.cardWrapper,
              { zIndex, transform: [{ scale }, { translateY }] },
            ]}
          >
            <DealCard deal={deal} />
          </View>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    position: 'relative',
  },
  cardWrapper: {
    position: 'absolute',
    width: width - 40,
  },
  emptyContainer: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  emptyText: {
    fontSize: 16,
    color: '#999',
  },
});