import React, { useEffect, useRef } from 'react';
import { Alert, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import {
    onProxyMessage,
    proxySendMessage,
    openPaytmPayToBank,
    openMobikwikPayToBank,
    openPhonePePayToBank,
    openFreechargePayToBank,
} from 'rnwalletman';

export default function TestScreen() {
    const subRef = useRef<ReturnType<typeof onProxyMessage> | null>(null);

    useEffect(() => {
        subRef.current = onProxyMessage((msg) => {
            if (msg.type === 'echo') {
                Alert.alert('Echo Response', JSON.stringify(msg.data));
            }
        });
        return () => {
            subRef.current?.remove();
        };
    }, []);

    const handleEcho = () => {
        proxySendMessage({ type: 'echo', messageId: `echo_${Date.now()}`, data: { text: `hello_${Date.now()}` } });
    };

    const handlePaytmPayToBank = () => {
        openPaytmPayToBank('Harshpreet singh', '01601000068180', 'PSIB0000160', '2', '66666')
            .then(result => console.log('Paytm Pay To Bank', result ? 'Success' : 'Failed'))
            .catch(error => Alert.alert('Transfer Failed', String(error)));
    };

    const handleMobikwikPayToBank = () => {
        openMobikwikPayToBank('Anmol', '5521101002938', 'CNRB0005521', '12')
            .then(result => console.log('Mobikwik Pay To Bank', result ? 'Success' : 'Failed'))
            .catch(err => Alert.alert('Error', String(err)));
    };

    const handlePhonePePayToBank = () => {
        openPhonePePayToBank('Harshpreet singh', '01601000068180', 'PSIB0000160', '100', 'payment')
            .then((ok: boolean) => console.log('PhonePe Pay To Bank', ok ? 'opened' : 'failed'))
            .catch((err: unknown) => Alert.alert('Error', String(err)));
    };

    const handleFreechargePayToBank = () => {
        openFreechargePayToBank('', '8284919464', 'PSIB0000160', '2', 'test transfer')
            .then((result: boolean) => console.log('Freecharge Pay To Bank', result ? 'Success' : 'Failed'))
            .catch((err: unknown) => Alert.alert('Error', String(err)));
    };

    return (
        <View style={styles.container}>
            <Text style={styles.sectionTitle}>Test Tools</Text>

            <TouchableOpacity style={[styles.btn, { backgroundColor: '#2ecc71' }]} onPress={handlePaytmPayToBank}>
                <Text style={styles.btnText}>Paytm Pay To Bank Test</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.btn, { backgroundColor: '#2ecc33' }]} onPress={handleMobikwikPayToBank}>
                <Text style={styles.btnText}>Mobikwik Pay To Bank Test</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.btn, { backgroundColor: '#5a2d9c' }]} onPress={handlePhonePePayToBank}>
                <Text style={styles.btnText}>PhonePe Pay To Bank Test</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.btn, { backgroundColor: '#5468db' }]} onPress={handleFreechargePayToBank}>
                <Text style={styles.btnText}>Freecharge Pay To Bank Test</Text>
            </TouchableOpacity>
            <TouchableOpacity style={[styles.btn, { backgroundColor: '#3498db' }]} onPress={handleEcho}>
                <Text style={styles.btnText}>Echo Test</Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f0f0f0',
        padding: 20,
        alignItems: 'center',
    },
    sectionTitle: {
        fontSize: 16,
        fontWeight: '600',
        color: '#333',
        alignSelf: 'flex-start',
        marginBottom: 16,
        marginTop: 8,
    },
    btn: {
        width: '100%',
        paddingVertical: 14,
        borderRadius: 8,
        alignItems: 'center',
        marginBottom: 12,
    },
    btnText: {
        color: '#fff',
        fontSize: 15,
        fontWeight: '600',
    },
});