import React, { useRef, useEffect } from 'react';
import { StyleSheet, TouchableOpacity, Text, Animated, View } from 'react-native';
import { Wallet } from 'lucide-react-native';
import { colors } from '@/constants/colors';
import useTradeStore from '@/store/useTradeStore';
import { LinearGradient } from 'expo-linear-gradient';
import { useToast } from '@/context/ToastContext';

interface DepositButtonProps {
  onPress: () => void;
}

export default function DepositButton({ onPress }: DepositButtonProps) {
  const { isDemoAccount, switchAccountMode } = useTradeStore();
  const { showToast } = useToast();
  
  // Animation values
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const slideAnim = useRef(new Animated.Value(20)).current;
  const scaleAnim = useRef(new Animated.Value(1)).current;
  
  useEffect(() => {
    // Animate button on mount
    Animated.parallel([
      Animated.timing(fadeAnim, {
        toValue: 1,
        duration: 800,
        useNativeDriver: true,
      }),
      Animated.timing(slideAnim, {
        toValue: 0,
        duration: 800,
        useNativeDriver: true,
      }),
    ]).start();
    
    // Subtle pulse animation
    Animated.loop(
      Animated.sequence([
        Animated.timing(scaleAnim, {
          toValue: 1.02,
          duration: 1500,
          useNativeDriver: true,
        }),
        Animated.timing(scaleAnim, {
          toValue: 1,
          duration: 1500,
          useNativeDriver: true,
        }),
      ])
    ).start();
  }, []);
  
  const handlePress = () => {
    if (isDemoAccount) {
      // Show toast notification with guidance
      showToast(
        "Deposits are not available in Demo mode. Switch to Real Account to deposit funds.",
        "info"
      );
      return;
    }
    onPress();
  };
  
  return (
    <Animated.View
      style={[
        styles.buttonContainer,
        {
          opacity: fadeAnim,
          transform: [
            { translateY: slideAnim },
            { scale: scaleAnim }
          ]
        }
      ]}
    >
      <TouchableOpacity 
        style={[
          styles.button,
          isDemoAccount && styles.disabledButton
        ]}
        onPress={handlePress}
        activeOpacity={isDemoAccount ? 0.6 : 0.8}
      >
        {!isDemoAccount && (
          <LinearGradient
            colors={['rgba(41, 171, 226, 0.2)', 'rgba(41, 171, 226, 0.05)']}
            style={styles.buttonGradient}
          />
        )}
        <Wallet size={20} color={isDemoAccount ? colors.textSecondary : colors.textWhite} />
        <Text style={[
          styles.buttonText,
          isDemoAccount && styles.disabledButtonText
        ]}>
          Deposit Funds
        </Text>
        
        {!isDemoAccount && (
          <View style={styles.glowDot} />
        )}
      </TouchableOpacity>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  buttonContainer: {
    marginHorizontal: 16,
    marginBottom: 16,
    shadowColor: colors.primary,
    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.primary,
    borderRadius: 10,
    paddingVertical: 14,
    paddingHorizontal: 16,
    gap: 10,
    position: 'relative',
    overflow: 'hidden',
  },
  buttonGradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  disabledButton: {
    opacity: 0.6,
    borderColor: colors.borderGray,
    backgroundColor: 'rgba(30, 30, 30, 0.8)',
  },
  buttonText: {
    color: colors.textWhite,
    fontSize: 15,
    fontWeight: 'bold',
  },
  disabledButtonText: {
    color: colors.textSecondary,
    fontWeight: 'normal',
  },
  glowDot: {
    position: 'absolute',
    top: 8,
    right: 8,
    width: 6,
    height: 6,
    borderRadius: 3,
    backgroundColor: colors.primary,
    shadowColor: colors.primary,
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.8,
    shadowRadius: 4,
  },
});