import React, { useRef, useEffect } from 'react';
import { StyleSheet, View, Text, Animated } from 'react-native';
import { Withdrawal } from '@/types';
import useTradeStore from '@/store/useTradeStore';
import { ArrowDownToLine, CreditCard, Calendar } from 'lucide-react-native';
import { LinearGradient } from 'expo-linear-gradient';
import { useTheme } from '@/context/ThemeContext';

interface WithdrawalHistoryItemProps {
  withdrawal: Withdrawal;
  index: number;
}

export default function WithdrawalHistoryItem({ withdrawal, index }: WithdrawalHistoryItemProps) {
  const { isUserFromNigeria } = useTradeStore();
  const { colors, theme } = useTheme();
  
  // Animation for list items
  const itemFadeAnim = useRef(new Animated.Value(0)).current;
  const itemSlideAnim = useRef(new Animated.Value(50)).current;
  
  useEffect(() => {
    // Staggered animation for list items
    const delay = index * 100;
    Animated.parallel([
      Animated.timing(itemFadeAnim, {
        toValue: 1,
        duration: 500,
        delay,
        useNativeDriver: true,
      }),
      Animated.timing(itemSlideAnim, {
        toValue: 0,
        duration: 500,
        delay,
        useNativeDriver: true,
      }),
    ]).start();
    
    // Cleanup animations on unmount
    return () => {
      itemFadeAnim.stopAnimation();
      itemSlideAnim.stopAnimation();
    };
  }, [index]);
  
  // Format date for display
  const formatDate = (dateString: string) => {
    try {
      const date = new Date(dateString);
      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
    } catch (error) {
      console.error("Error formatting date:", error);
      return "Recent";
    }
  };
  
  return (
    <Animated.View 
      style={[
        styles.withdrawalItem,
        {
          opacity: itemFadeAnim,
          transform: [{ translateY: itemSlideAnim }],
          backgroundColor: theme === 'dark' ? 'transparent' : colors.card
        }
      ]}
    >
      {theme === 'dark' && (
        <LinearGradient
          colors={['rgba(41, 171, 226, 0.1)', 'rgba(30, 39, 46, 0.5)']}
          style={styles.withdrawalItemGradient}
        />
      )}
      
      <View style={[styles.withdrawalItemHeader, { borderBottomColor: colors.border }]}>
        <View style={styles.withdrawalTypeContainer}>
          <ArrowDownToLine size={16} color={colors.primary} />
          <Text style={[styles.withdrawalType, { color: colors.text }]}>Withdrawal</Text>
        </View>
        
        <Text style={[styles.withdrawalAmount, { color: colors.primary }]}>
          {withdrawal.amount.toFixed(2)} {isUserFromNigeria ? 'NGN' : 'USDT'}
        </Text>
      </View>
      
      <View style={styles.withdrawalItemDetails}>
        <View style={styles.withdrawalDetailRow}>
          <CreditCard size={14} color={colors.textSecondary} />
          <Text style={[styles.withdrawalDetailValue, { color: colors.text }]}>
            {withdrawal.method === 'Bank Transfer' ? 'Bank Transfer' : 'USDT (TRC-20)'}
          </Text>
        </View>
        
        <View style={styles.withdrawalDetailRow}>
          <Calendar size={14} color={colors.textSecondary} />
          <Text style={[styles.withdrawalDetailValue, { color: colors.text }]}>{formatDate(withdrawal.timestamp)}</Text>
        </View>
      </View>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  withdrawalItem: {
    borderRadius: 10,
    marginBottom: 12,
    overflow: 'hidden',
    position: 'relative',
  },
  withdrawalItemGradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  withdrawalItemHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 12,
    borderBottomWidth: 1,
  },
  withdrawalTypeContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  withdrawalType: {
    fontSize: 14,
    fontWeight: '600',
    marginLeft: 6,
  },
  withdrawalAmount: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  withdrawalItemDetails: {
    padding: 12,
    gap: 8,
  },
  withdrawalDetailRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8,
  },
  withdrawalDetailValue: {
    fontSize: 13,
  },
});