import React, { useRef, useEffect } from 'react';
import { View, StyleSheet, Animated, Easing } from 'react-native';
import { BarChart2 } from 'lucide-react-native';
import { colors } from '@/constants/colors';

interface TradeHistoryBadgeProps {
  hasNewTrades: boolean;
  color: string;
  size: number;
}

export default function TradeHistoryBadge({ hasNewTrades, color, size }: TradeHistoryBadgeProps) {
  // Animation values
  const pulseAnim = useRef(new Animated.Value(1)).current;
  const opacityAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (hasNewTrades) {
      // Reset animations
      pulseAnim.setValue(1);
      opacityAnim.setValue(0);

      // Start pulse animation
      Animated.loop(
        Animated.sequence([
          Animated.timing(pulseAnim, {
            toValue: 1.3,
            duration: 800,
            useNativeDriver: true,
            easing: Easing.out(Easing.ease),
          }),
          Animated.timing(pulseAnim, {
            toValue: 1,
            duration: 800,
            useNativeDriver: true,
            easing: Easing.in(Easing.ease),
          }),
        ])
      ).start();

      // Fade in the badge
      Animated.timing(opacityAnim, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }).start();
    } else {
      // Fade out the badge
      Animated.timing(opacityAnim, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }).start();

      // Stop pulse animation
      Animated.timing(pulseAnim, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }).start();
    }

    return () => {
      // Cleanup animations
      pulseAnim.stopAnimation();
      opacityAnim.stopAnimation();
    };
  }, [hasNewTrades]);

  return (
    <View style={styles.container}>
      <BarChart2 size={size} color={color} />
      
      {/* Notification badge */}
      {hasNewTrades && (
        <Animated.View 
          style={[
            styles.badge,
            {
              opacity: opacityAnim,
              transform: [{ scale: pulseAnim }]
            }
          ]}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'relative',
    alignItems: 'center',
    justifyContent: 'center',
  },
  badge: {
    position: 'absolute',
    top: -2,
    right: -2,
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: colors.accent,
    borderWidth: 1,
    borderColor: colors.bgDark,
  },
});