import React, { useRef, useEffect } from 'react';
import { StyleSheet, TouchableOpacity, Text, Animated } from 'react-native';
import { RefreshCw } from 'lucide-react-native';
import { colors } from '@/constants/colors';
import useTradeStore from '@/store/useTradeStore';
import { CONFIG } from '@/constants/config';
import { LinearGradient } from 'expo-linear-gradient';

export default function RefillButton() {
  const { isDemoAccount, demoBalance, refillDemoBalance } = useTradeStore();
  
  // Animation values
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(20)).current;
  const rotateAnim = useRef(new Animated.Value(0)).current;
  
  useEffect(() => {
    if (isDemoAccount && demoBalance < CONFIG.minInvestmentAmount) {
      // Animate button when it appears
      Animated.parallel([
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 500,
          useNativeDriver: true,
        }),
        Animated.timing(slideAnim, {
          toValue: 0,
          duration: 500,
          useNativeDriver: true,
        }),
      ]).start();
      
      // Rotate icon animation
      Animated.loop(
        Animated.timing(rotateAnim, {
          toValue: 1,
          duration: 2000,
          useNativeDriver: true,
        })
      ).start();
    } else {
      // Hide button with animation
      Animated.timing(fadeAnim, {
        toValue: 0,
        duration: 300,
        useNativeDriver: true,
      }).start();
    }
  }, [isDemoAccount, demoBalance]);
  
  // Convert rotation value to degrees for transform
  const rotate = rotateAnim.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
  });
  
  // Only show refill button in demo mode with low balance
  if (!isDemoAccount || demoBalance >= CONFIG.minInvestmentAmount) {
    return null;
  }
  
  return (
    <Animated.View
      style={[
        styles.buttonContainer,
        {
          opacity: fadeAnim,
          transform: [{ translateY: slideAnim }]
        }
      ]}
    >
      <TouchableOpacity 
        style={styles.button} 
        onPress={refillDemoBalance}
        activeOpacity={0.8}
      >
        <LinearGradient
          colors={['rgba(46, 204, 113, 0.3)', 'rgba(46, 204, 113, 0.1)']}
          style={styles.buttonGradient}
        />
        <Animated.View style={{ transform: [{ rotate }] }}>
          <RefreshCw size={18} color={colors.textWhite} />
        </Animated.View>
        <Text style={styles.buttonText}>Refill Demo Balance</Text>
      </TouchableOpacity>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  buttonContainer: {
    marginHorizontal: 16,
    marginBottom: 16,
    shadowColor: colors.success,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.2,
    shadowRadius: 4,
    elevation: 3,
  },
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: colors.bgBlack,
    borderWidth: 1.5,
    borderColor: colors.success,
    borderRadius: 10,
    paddingVertical: 12,
    paddingHorizontal: 16,
    gap: 10,
    position: 'relative',
    overflow: 'hidden',
  },
  buttonGradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  buttonText: {
    color: colors.textWhite,
    fontSize: 14,
    fontWeight: 'bold',
  },
});