import { View, Text, StyleSheet, Pressable, Alert } from 'react-native';
import { useState } from 'react';
import { Ionicons } from '@expo/vector-icons';
import NormalButton from '../../../global/normal_button';
import NormalInput from '../../../global/normal_input';
import { authenticationService } from '../../../../service/authService';
import { useTranslation } from '../../../../util/hooks/useTranslation';

const BindingPhoneNumberPage = ({ bindingFormData, setBindingFormData, setScreen }: any) => {
    const { t } = useTranslation(); // 使用翻译钩子
    const [error, setError] = useState('');
    const [isLoading, setIsLoading] = useState(false);
    const [showPassword, setShowPassword] = useState(false);
    
    const handleVerification = async () => {
        setIsLoading(true);
        try {
            const isBinding = true;
            const response = await authenticationService.emailLogin(
                bindingFormData.email,
                bindingFormData.password,
                isBinding
            );

            if (response == true) {
                setScreen(1);
            } else {
                Alert.alert(t('binding.one.login_failed'));
            }
        } catch (error) {
            console.error('Login error:', error);
        } finally {
            setIsLoading(false);
        }
    };
    
    return (
        <>
            <View style={styles.container}>
                <View style={styles.bottomContainer}>
                    <Text style={styles.text}>{t('binding.one.enter_existing_email')}</Text>
                    <View className="pb-2">
                        <NormalInput
                            placeholder={t('binding.one.enter_your_email')}
                            onChangeText={(email) =>
                                setBindingFormData({
                                    ...bindingFormData,
                                    email: email
                                })
                            }
                            textContentType="username"
                            autoComplete="username"
                            keyboardType="email-address"
                            autoCapitalize="none"
                        />
                    </View>
                    <View className="pb-2">
                        <NormalInput
                            placeholder={t('binding.one.enter_your_password')}
                            onChangeText={(password) =>
                                setBindingFormData({
                                    ...bindingFormData,
                                    password: password
                                })
                            }
                            secureTextEntry={!showPassword}
                            extendedStyle={{ borderRadius: 12, padding: 20, paddingRight: 50 }}
                            textContentType="password"
                            autoComplete="password"
                        />
                        <Pressable
                            className="absolute right-4 top-0 bottom-0 justify-center"
                            onPress={() => setShowPassword(!showPassword)}
                        >
                            <Ionicons
                                name={showPassword ? 'eye-outline' : 'eye-off-outline'}
                                size={24}
                                color="#02677D"
                            />
                        </Pressable>
                    </View>
                    <NormalButton
                        title={<Text style={{ color: '#fff' }}>{isLoading ? t('binding.one.processing') : t('common.next')}</Text>}
                        onPress={handleVerification}
                    />

                    {error && <Text style={styles.errorMessage}>{error}</Text>}
                </View>
            </View>
        </>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        marginHorizontal: 20
    },

    titleText: {
        fontSize: 24,
        fontWeight: '300'
    },
    bottomContainer: {
        flex: 3,
        paddingBottom: 100
    },
    breakline: {
        width: 24,
        height: 1,
        backgroundColor: '#000000',
        marginVertical: 17
    },
    text: {
        fontSize: 18,
        paddingBottom: 10
    },
    hiddenPasswordFields: {
        gap: 10,
        paddingTop: 10
    },
    opacityZero: {
        opacity: 0
    },
    opacityFull: {
        opacity: 1
    },
    errorMessage: {
        fontSize: 14,
        color: '#ff0033',
        fontWeight: '400',
        marginLeft: 10,
        marginTop: 10
    },
    footer: { color: '#02677D', fontSize: 16, paddingVertical: 10 }
});

export default BindingPhoneNumberPage;