import Alipay from 'expo-native-alipay';
import { Stack, useRouter } from 'expo-router';
import React, { useState } from 'react';
import { ActivityIndicator, Alert, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import services from '../../services/api';

const MAX_AMOUNT = 100000;

export default function RechargeScreen() {
    const router = useRouter();
    const [money, setMoney] = useState('');
    const [loading, setLoading] = useState(false);

    const validateInput = (text: string) => {
        let value = text.replace(/[^\d.]/g, '')
            .replace(/^\./g, '')
            .replace(/\.{2,}/g, '.');
        
        value = value.replace(/^(-)*(\d+)\.(\d\d).*$/, '$1$2.$3');

        if (parseFloat(value) > MAX_AMOUNT) {
            Alert.alert('提示', `最大充值金额为${MAX_AMOUNT}元`);
            value = MAX_AMOUNT.toString();
        }
        setMoney(value);
    };

    const handleRecharge = async () => {
        const amount = parseFloat(money);
        if (!amount || amount <= 0) {
            Alert.alert('提示', '请输入有效的充值金额');
            return;
        }

        setLoading(true);
        setLoading(true);
        try {
            // Use ALIPAY_APP for native payment with correct API
            const res: any = await services.wallet.rechargeSubmit(amount, 'ALIPAY_APP', 'CASH');
            
            console.log('Recharge API Res:', res);

            // Handle response which might be direct string or object with payInfo
            const payInfo = typeof res?.data === 'string' ? res?.data : (res?.data?.payInfo || res?.data?.orderInfo || res?.data?.tradeNo);

            if (payInfo && typeof payInfo === 'string' && (payInfo.startsWith('alipay_root_cert_sn') || payInfo.includes('alipay_sdk'))) {
                 Alipay.setAlipayScheme('alipay2021005175632205');
                 const result = await Alipay.pay(payInfo);
                 console.log('Alipay Result:', result);
                 
                 if (result?.resultStatus === '9000') {
                     Alert.alert('提示', '充值成功');
                     router.replace('/wallet/recharge_record');
                 } else {
                     Alert.alert('提示', '支付未完成');
                 }
            } else if (res?.data?.tradeNo && !payInfo) {
                 Alert.alert('提示', '获取支付信息失败(仅获取到订单号)');
            } else {
                 Alert.alert('失败', '生成充值订单失败 ' + (res?.msg || ''));
            }

        } catch (error) {
            console.error('Recharge failed', error);
            Alert.alert('错误', '充值失败，请重试');
        } finally {
            setLoading(false);
        }
    };

    return (
        <View style={styles.container}>
            <Stack.Screen options={{ title: '充值', headerStyle: { backgroundColor: '#fff' }, headerShadowVisible: false }} />
            
            <View style={styles.content}>
                <View style={styles.inputWrapper}>
                    <Text style={styles.label}>充值金额:</Text>
                    <TextInput
                        style={styles.input}
                        value={money}
                        onChangeText={validateInput}
                        placeholder="请输入金额"
                        keyboardType="decimal-pad"
                    />
                </View>

                <Text style={styles.tip}>充值金额可以用于购买手办，奖池</Text>
                <Text style={styles.tipSub}>
                    充值金额不可提现，<Text style={styles.highlight}>线下充值额外返10%</Text>
                </Text>

                <TouchableOpacity 
                    style={[styles.btn, loading && styles.disabledBtn]} 
                    onPress={handleRecharge}
                    disabled={loading}
                >
                     {loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.btnText}>充值</Text>}
                </TouchableOpacity>

                <TouchableOpacity style={styles.recordLink} onPress={() => router.push('/wallet/recharge_record')}>
                    <Text style={styles.recordLinkText}>充值记录 {'>'}{'>'}</Text>
                </TouchableOpacity>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    content: {
        paddingHorizontal: 24,
        paddingTop: 32,
    },
    inputWrapper: {
        flexDirection: 'row',
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#ddd',
        borderRadius: 8,
        paddingHorizontal: 16,
        height: 52, // 104rpx
        marginTop: 15,
    },
    label: {
        fontSize: 16, // font5
        color: '#333',
        marginRight: 10,
    },
    input: {
        flex: 1,
        fontSize: 16, // font5
        height: '100%',
    },
    tip: {
        textAlign: 'center',
        color: '#666', // color-2
        fontSize: 14,
        marginTop: 36,
    },
    tipSub: {
        textAlign: 'center',
        color: '#666', // color-2
        fontSize: 14,
        marginTop: 5,
        marginBottom: 20,
    },
    highlight: {
        color: '#07C160',
        textDecorationLine: 'underline',
    },
    btn: {
        backgroundColor: '#0081ff', // bg-blue
        height: 44,
        borderRadius: 4,
        justifyContent: 'center',
        alignItems: 'center',
        width: '70%',
        alignSelf: 'center',
    },
    disabledBtn: {
        opacity: 0.7,
    },
    btnText: {
        color: '#fff',
        fontSize: 14,
        fontWeight: 'bold',
    },
    recordLink: {
        marginTop: 20,
        alignItems: 'center',
    },
    recordLinkText: {
        color: '#8b3dff', // color-theme
        fontSize: 14,
    },
});