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

interface HeaderDepositButtonProps {
  onPress: () => void;
  style?: any;
}

export default function HeaderDepositButton({ onPress, style }: HeaderDepositButtonProps) {
  const { isDemoAccount, switchAccountMode } = useTradeStore();
  const { colors } = useTheme();
  const { showToast } = useToast();
  
  // Animation values
  const pulseAnim = useRef(new Animated.Value(1)).current;
  
  useEffect(() => {
    // Subtle pulse animation for the button (only when not in demo mode)
    if (!isDemoAccount) {
      Animated.loop(
        Animated.sequence([
          Animated.timing(pulseAnim, {
            toValue: 1.05,
            duration: 1500,
            useNativeDriver: true,
          }),
          Animated.timing(pulseAnim, {
            toValue: 1,
            duration: 1500,
            useNativeDriver: true,
          }),
        ])
      ).start();
    } else {
      // Stop animation in demo mode
      pulseAnim.setValue(1);
    }
  }, [isDemoAccount]);
  
  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.container,
        {
          transform: [{ scale: isDemoAccount ? 1 : pulseAnim }],
        },
        style
      ]}
    >
      <TouchableOpacity 
        style={[
          styles.button,
          { 
            backgroundColor: colors.bgDark,
            borderColor: isDemoAccount ? colors.borderGray : colors.primary,
            opacity: isDemoAccount ? 0.8 : 1
          }
        ]}
        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={16} color={isDemoAccount ? colors.textSecondary : colors.primary} />
        <Text 
          style={[
            styles.buttonText,
            { 
              color: isDemoAccount ? colors.textSecondary : colors.primary,
              fontWeight: isDemoAccount ? 'normal' : 'bold'
            }
          ]}
        >
          Deposit
        </Text>
        
        {!isDemoAccount && (
          <View style={styles.glowDot} />
        )}
      </TouchableOpacity>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: 150, // Match the width of AccountTypeSwitch
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 3,
    elevation: 2,
  },
  button: {
    width: '100%', // Take full width of container
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderRadius: 20,
    paddingVertical: 8,
    paddingHorizontal: 12,
    gap: 6,
    position: 'relative',
    overflow: 'hidden',
  },
  buttonGradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  buttonText: {
    fontSize: 13,
    fontWeight: '500',
  },
  glowDot: {
    position: 'absolute',
    top: 6,
    right: 6,
    width: 4,
    height: 4,
    borderRadius: 2,
    backgroundColor: '#29ABE2',
    shadowColor: '#29ABE2',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
  },
});