import React, { useEffect } from 'react';
import { StyleSheet, View, Text, TouchableOpacity, ScrollView, Image, Alert } from 'react-native';
import { useRouter } from 'expo-router';
import { SafeAreaView } from 'react-native-safe-area-context';
import { LinearGradient } from 'expo-linear-gradient';
import { CreditCard, Smartphone, Landmark, Bitcoin, ChevronRight, AlertCircle } from 'lucide-react-native';
import { useTheme } from '@/context/ThemeContext';
import useTradeStore from '@/store/useTradeStore';
import { Stack } from 'expo-router';

export default function DepositMethodsScreen() {
  const router = useRouter();
  const { isUserFromNigeria, setSelectedDepositMethod } = useTradeStore();
  const { theme, colors } = useTheme();
  
  // Redirect to deposit modal on mount
  useEffect(() => {
    // Redirect to the trade screen with deposit modal open
    router.replace({
      pathname: '/',
      params: { openDepositModal: 'true' }
    });
  }, []);
  
  const handleSelectMethod = (method: string) => {
    setSelectedDepositMethod(method);
    
    // Navigate to trade screen with deposit modal open
    router.replace({
      pathname: '/',
      params: { openDepositModal: 'true' }
    });
  };
  
  return (
    <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]} edges={['top']}>
      <Stack.Screen options={{ 
        title: "Deposit Methods",
        headerTitleStyle: { fontWeight: 'bold' }
      }} />
      
      {theme === 'dark' && (
        <LinearGradient
          colors={['rgba(30, 39, 46, 0.8)', 'rgba(0, 0, 0, 1)']}
          style={styles.backgroundGradient}
        />
      )}
      
      <ScrollView 
        style={styles.content}
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.contentContainer}
      >
        <View style={[styles.infoCard, { backgroundColor: theme === 'dark' ? 'rgba(41, 171, 226, 0.1)' : 'rgba(41, 171, 226, 0.05)' }]}>
          <AlertCircle size={20} color={colors.primary} />
          <Text style={[styles.infoText, { color: colors.textSecondary }]}>
            Redirecting to deposit screen...
          </Text>
        </View>
        
        <View style={styles.methodsContainer}>
          {isUserFromNigeria ? (
            // Nigerian payment methods
            <>
              <TouchableOpacity 
                style={[styles.methodCard, { backgroundColor: colors.backgroundSecondary }]}
                onPress={() => handleSelectMethod('Bank Transfer')}
              >
                <View style={[styles.methodIconContainer, { backgroundColor: theme === 'dark' ? 'rgba(46, 204, 113, 0.1)' : 'rgba(46, 204, 113, 0.05)' }]}>
                  <Landmark size={24} color={colors.success} />
                </View>
                <View style={styles.methodInfo}>
                  <Text style={[styles.methodName, { color: colors.text }]}>Bank Transfer</Text>
                  <Text style={[styles.methodDescription, { color: colors.textSecondary }]}>
                    Direct transfer to our Nigerian bank account
                  </Text>
                </View>
                <ChevronRight size={20} color={colors.textSecondary} />
              </TouchableOpacity>
              
              <TouchableOpacity 
                style={[styles.methodCard, { backgroundColor: colors.backgroundSecondary }]}
                onPress={() => handleSelectMethod('Mobile Money')}
              >
                <View style={[styles.methodIconContainer, { backgroundColor: theme === 'dark' ? 'rgba(41, 171, 226, 0.1)' : 'rgba(41, 171, 226, 0.05)' }]}>
                  <Smartphone size={24} color={colors.primary} />
                </View>
                <View style={styles.methodInfo}>
                  <Text style={[styles.methodName, { color: colors.text }]}>Mobile Money</Text>
                  <Text style={[styles.methodDescription, { color: colors.textSecondary }]}>
                    Pay using mobile money services
                  </Text>
                </View>
                <ChevronRight size={20} color={colors.textSecondary} />
              </TouchableOpacity>
              
              <TouchableOpacity 
                style={[styles.methodCard, { backgroundColor: colors.backgroundSecondary }]}
                onPress={() => handleSelectMethod('USSD Transfer')}
              >
                <View style={[styles.methodIconContainer, { backgroundColor: theme === 'dark' ? 'rgba(243, 156, 18, 0.1)' : 'rgba(243, 156, 18, 0.05)' }]}>
                  <CreditCard size={24} color={colors.accent} />
                </View>
                <View style={styles.methodInfo}>
                  <Text style={[styles.methodName, { color: colors.text }]}>USSD Transfer</Text>
                  <Text style={[styles.methodDescription, { color: colors.textSecondary }]}>
                    Quick transfer using USSD codes
                  </Text>
                </View>
                <ChevronRight size={20} color={colors.textSecondary} />
              </TouchableOpacity>
            </>
          ) : (
            // International payment methods
            <>
              <TouchableOpacity 
                style={[styles.methodCard, { backgroundColor: colors.backgroundSecondary }]}
                onPress={() => handleSelectMethod('USDT TRC20')}
              >
                <View style={[styles.methodIconContainer, { backgroundColor: theme === 'dark' ? 'rgba(46, 204, 113, 0.1)' : 'rgba(46, 204, 113, 0.05)' }]}>
                  <Bitcoin size={24} color={colors.success} />
                </View>
                <View style={styles.methodInfo}>
                  <Text style={[styles.methodName, { color: colors.text }]}>USDT (TRC20)</Text>
                  <Text style={[styles.methodDescription, { color: colors.textSecondary }]}>
                    Deposit using USDT on Tron network
                  </Text>
                </View>
                <ChevronRight size={20} color={colors.textSecondary} />
              </TouchableOpacity>
              
              <TouchableOpacity 
                style={[styles.methodCard, { backgroundColor: colors.backgroundSecondary }]}
                onPress={() => handleSelectMethod('USDT ERC20')}
              >
                <View style={[styles.methodIconContainer, { backgroundColor: theme === 'dark' ? 'rgba(41, 171, 226, 0.1)' : 'rgba(41, 171, 226, 0.05)' }]}>
                  <Bitcoin size={24} color={colors.primary} />
                </View>
                <View style={styles.methodInfo}>
                  <Text style={[styles.methodName, { color: colors.text }]}>USDT (ERC20)</Text>
                  <Text style={[styles.methodDescription, { color: colors.textSecondary }]}>
                    Deposit using USDT on Ethereum network
                  </Text>
                </View>
                <ChevronRight size={20} color={colors.textSecondary} />
              </TouchableOpacity>
              
              <TouchableOpacity 
                style={[styles.methodCard, { backgroundColor: colors.backgroundSecondary }]}
                onPress={() => handleSelectMethod('Bitcoin')}
              >
                <View style={[styles.methodIconContainer, { backgroundColor: theme === 'dark' ? 'rgba(243, 156, 18, 0.1)' : 'rgba(243, 156, 18, 0.05)' }]}>
                  <Bitcoin size={24} color={colors.accent} />
                </View>
                <View style={styles.methodInfo}>
                  <Text style={[styles.methodName, { color: colors.text }]}>Bitcoin</Text>
                  <Text style={[styles.methodDescription, { color: colors.textSecondary }]}>
                    Deposit using Bitcoin (BTC)
                  </Text>
                </View>
                <ChevronRight size={20} color={colors.textSecondary} />
              </TouchableOpacity>
            </>
          )}
        </View>
        
        <View style={styles.footer}>
          <Image 
            source={{ uri: 'https://cdn.prod.website-files.com/66b7dcae754fe5eef2139e69/67d2bd08bfc05787cd4dc601_THE%20BATZ%20Trade%20logo.png' }}
            style={styles.footerLogo}
            resizeMode="contain"
          />
          <Text style={[styles.footerText, { color: colors.textSecondary }]}>
            All transactions are secure and encrypted
          </Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  backgroundGradient: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
  },
  content: {
    flex: 1,
  },
  contentContainer: {
    padding: 16,
    paddingBottom: 32,
  },
  infoCard: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 12,
    borderRadius: 8,
    marginBottom: 16,
  },
  infoText: {
    fontSize: 14,
    marginLeft: 8,
    flex: 1,
  },
  methodsContainer: {
    gap: 12,
  },
  methodCard: {
    flexDirection: 'row',
    alignItems: 'center',
    padding: 16,
    borderRadius: 12,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  methodIconContainer: {
    width: 48,
    height: 48,
    borderRadius: 24,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  methodInfo: {
    flex: 1,
  },
  methodName: {
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 2,
  },
  methodDescription: {
    fontSize: 12,
  },
  footer: {
    marginTop: 32,
    alignItems: 'center',
  },
  footerLogo: {
    width: 100,
    height: 40,
    marginBottom: 8,
  },
  footerText: {
    fontSize: 12,
    textAlign: 'center',
  },
});