import { Ionicons } from '@expo/vector-icons';
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Alert, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import services from '../../services/api';

export default function WithdrawScreen() {
    const router = useRouter();
    const params = useLocalSearchParams();
    const [balance, setBalance] = useState('0.00');
    const [money, setMoney] = useState('');
    const [bankInfo, setBankInfo] = useState<any>(null);
    const [rate, setRate] = useState(0);
    const [agree, setAgree] = useState(false);
    const [loading, setLoading] = useState(false);
    
    // Uniapp had type='ALIPAY' default
    const type = (params.type as string) || 'ALIPAY';

    useEffect(() => {
        fetchData();
        fetchRate();
        fetchWithdrawInfo();
    }, []);

    const fetchData = async () => {
        try {
            const res = await services.wallet.withdrawPre(type, 'MAGIC_PROMOTION');
            if (res && res.avaliableWithdraw) {
                setBalance(res.avaliableWithdraw.amount);
            }
        } catch (error) {
            console.error('Fetch withdraw pre failed', error);
        }
    };

    const fetchRate = async () => {
        try {
            await services.user.getParamConfig('wallet_withdraw_rate').then((res: any) => {
                 setRate(res.data ? Number(res.data) : 0);
            });
        } catch (error) {
            console.error('Fetch rate failed', error);
        }
    };

    const fetchWithdrawInfo = async () => {
        try {
            const res = await services.wallet.getWithdraw();
            setBankInfo(res);
        } catch (error) {
            console.error('Fetch bank info failed', error);
        }
    };

    const handleWithdraw = async () => {
        if (!agree) {
            Alert.alert('提示', '请您先阅读并同意提现协议');
            return;
        }
        if (!bankInfo || !bankInfo.bankNum) {
            Alert.alert('提示', '请新增银行卡信息');
            return;
        }
        const amount = parseFloat(money);
        if (!money || isNaN(amount) || amount <= 0 || amount > parseFloat(balance)) {
             Alert.alert('提示', '请输入正确的金额');
             return;
        }

        setLoading(true);
        try {
            const success = await services.wallet.withdraw({
                money,
                ...bankInfo,
                walletType: 'MAGIC_PROMOTION',
                accountType: '3'
            });
            if (success) {
                Alert.alert('成功', '提现申请已提交', [
                    { text: '确定', onPress: () => router.push('/wallet/withdraw_record') }
                ]);
                setMoney('');
            }
        } catch (error) {
            console.error('Withdraw failed', error);
        } finally {
            setLoading(false);
        }
    };

    const realMoney = money ? (parseFloat(money) * (1 - rate)).toFixed(2) : '0.00';

    return (
        <ScrollView style={styles.container}>
            <Stack.Screen options={{ title: '提现', headerStyle: { backgroundColor: '#fff' }, headerShadowVisible: false }} />
            
            <View style={styles.groupContainer}>
                {/* Bank Card Section */}
                <TouchableOpacity style={styles.formGroup} onPress={() => router.push('/cardInfo')}>
                    <Text style={styles.label}>提现至</Text>
                    <View style={styles.rightContent}>
                        <Text style={styles.valueText}>
                            {bankInfo && bankInfo.bankName 
                                ? `${bankInfo.bankName}尾号(${bankInfo.bankNum.slice(-4)})` 
                                : '暂无银行卡信息'}
                        </Text>
                        <Ionicons name="chevron-forward" size={16} color="#8799a3" />
                    </View>
                </TouchableOpacity>
            </View>

            <View style={styles.groupContainer}>
                <View style={styles.formGroup}>
                    <Text style={styles.label}>可提现金额:{balance}元</Text>
                    <TouchableOpacity style={styles.ruleBtn}>
                        <Ionicons name="help-circle" size={16} color="#5b5b5b" />
                        <Text style={styles.ruleText}>提现规则</Text>
                    </TouchableOpacity>
                </View>
                
                <View style={styles.formGroupInput}>
                    <Text style={styles.currencySymbol}>￥</Text>
                    <TextInput
                        style={styles.input}
                        value={money}
                        onChangeText={setMoney}
                        keyboardType="decimal-pad"
                        placeholder="请输入提现金额"
                    />
                    <TouchableOpacity onPress={() => setMoney(balance)}>
                        <Text style={styles.withdrawAll}>全部提现</Text>
                    </TouchableOpacity>
                </View>

                <View style={[styles.formGroup, { backgroundColor: '#f8f8f8' }]}>
                    <Text style={styles.label}>税率：</Text>
                    <Text style={styles.valueText}>{(rate * 100).toFixed(0)}%</Text>
                </View>
                <View style={[styles.formGroup, { backgroundColor: '#f8f8f8' }]}>
                    <Text style={styles.label}>实际到账金额：</Text>
                    <Text style={styles.valueText}>{realMoney}</Text>
                </View>
            </View>

            <TouchableOpacity style={styles.recordLink} onPress={() => router.push('/wallet/withdraw_record')}>
                <Text style={styles.recordLinkText}>提现记录</Text>
            </TouchableOpacity>

            <TouchableOpacity style={styles.agreement} onPress={() => setAgree(!agree)}>
                <Ionicons 
                    name={agree ? "radio-button-on" : "radio-button-off"} 
                    size={20} 
                    color={agree ? "#8b3dff" : "#8799a3"} 
                />
                <Text style={styles.agreementText}>
                    我已阅读并同意 <Text style={styles.linkText}>《提现协议》</Text>
                </Text>
            </TouchableOpacity>

            <View style={styles.footer}>
                <TouchableOpacity 
                    style={[styles.confirmBtn, loading && styles.disabledBtn]} 
                    onPress={handleWithdraw}
                    disabled={loading}
                >
                    {loading ? <ActivityIndicator color="#fff" /> : <Text style={styles.confirmBtnText}>确认提现</Text>}
                </TouchableOpacity>
            </View>
        </ScrollView>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    groupContainer: {
        paddingHorizontal: 12,
        paddingTop: 18,
    },
    formGroup: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingVertical: 15,
        backgroundColor: '#fff',
        // borderBottomWidth: 1,
        // borderBottomColor: '#eee',
    },
    formGroupInput: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingVertical: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#eee',
    },
    label: {
        fontSize: 15,
        color: '#333',
    },
    rightContent: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    valueText: {
        fontSize: 15,
        color: '#666',
        marginRight: 5,
    },
    ruleBtn: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    ruleText: {
        fontSize: 14,
        color: '#5b5b5b',
        marginLeft: 4,
    },
    currencySymbol: {
        fontSize: 24,
        fontWeight: 'bold',
        color: '#333',
        width: 30,
    },
    input: {
        flex: 1,
        fontSize: 20,
        paddingHorizontal: 10,
    },
    withdrawAll: {
        color: '#ff9600',
        fontSize: 14,
    },
    recordLink: {
        alignItems: 'center',
        marginTop: 18,
    },
    recordLinkText: {
        fontSize: 12,
        color: '#999',
    },
    agreement: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        marginTop: 20,
    },
    agreementText: {
        fontSize: 12,
        color: '#333',
        marginLeft: 4,
    },
    linkText: {
        color: '#8b3dff',
    },
    footer: {
        paddingHorizontal: 26,
        paddingTop: 6,
        marginTop: 20,
        backgroundColor: '#f6f6f6', // Optional visual separation if needed, or transparent
        paddingBottom: 40,
    },
    confirmBtn: {
        backgroundColor: '#8b3dff', // Theme color
        height: 50,
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
    },
    disabledBtn: {
        opacity: 0.7,
    },
    confirmBtnText: {
        color: '#fff',
        fontSize: 16,
        fontWeight: 'bold',
    },
});