import { View, Text, ScrollView, Pressable, Button, Alert } from 'react-native';
import React, { useContext } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { router } from 'expo-router';
import { CrossLogoSvg, RightArrowIconSvg } from '../global/SVG';
import { AuthContext, useAuth } from '../../context/AuthProvider';
import { useTranslation } from '../../util/hooks/useTranslation';

const AccountSettingPageComponent = () => {
    const { user } = useContext(AuthContext);
    const { logout } = useAuth();
    const { t } = useTranslation();
    
    const genderText = user?.gender === 'woman' ? t('accountSettings.female') : 
                      user?.gender === 'man' ? t('accountSettings.male') : 
                      user?.gender;

    const handleDeletionAccount = () => {
        Alert.alert(
            t('accountSettings.delete_account'), 
            t('accountSettings.delete_account_confirmation'), 
            [
                {
                    text: t('common.cancel'),
                    style: 'cancel'
                },
                {
                    text: t('accountSettings.delete'),
                    style: 'destructive',
                    onPress: async () => {
                        try {
                            logout();
                            // await walletService.deleteWallet(user.id);
                            // Handle successful deletion (e.g., logout and redirect)
                            // You might want to add additional logic here
                        } catch (error) {
                            console.error('Error deleting account:', error);
                            Alert.alert(t('common.error'), t('accountSettings.delete_account_error'));
                        }
                    }
                }
            ]
        );
    };

    return (
        <SafeAreaView className="flex-1 bg-white" edges={['top', 'right', 'left']}>
            <ScrollView className="flex-1 mx-[5%]" showsVerticalScrollIndicator={false}>
                <View style={{ marginTop: 25 }}>
                    <Pressable
                        onPress={() => {
                            router.replace('/accountMainPage');
                        }}
                    >
                        <CrossLogoSvg />
                    </Pressable>
                    <Text style={{ fontSize: 45, marginVertical: 25 }}>{t('accountSettings.account_management')}</Text>
                </View>
                <View>
                    <View className="flex-col">
                        <Pressable onPress={() => router.push('changeEmailPage')}>
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">{t('accountSettings.email')}</Text>
                                    <Text style={{ color: '#555555' }}>{user?.email}</Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4] " />
                    </View>
                    <View className="flex-col ">
                        <Pressable onPress={() => router.push('changePasswordPage')}>
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">{t('accountSettings.password')}</Text>
                                    <Text style={{ color: '#555555' }}>********</Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4] " />
                    </View>
                    <View className="flex-col ">
                        <Pressable onPress={() => router.push('changeNamePage')}>
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">{t('accountSettings.nickname')}</Text>
                                    <Text style={{ color: '#555555' }}>{user?.nickname}</Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4]" />
                    </View>
                    <View className="flex-col ">
                        <Pressable onPress={() => router.push('changeGenderPage')}>
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">{t('accountSettings.gender')}</Text>
                                    <Text style={{ color: '#555555' }}>{genderText}</Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4]" />
                    </View>
                    <View className="flex-col ">
                        <Pressable onPress={() => router.push('changeCarPage')}>
                            <View className="flex-row items-center justify-between">
                                <View className="flex-col py-4">
                                    <Text className="text-lg pb-1">{t('accountSettings.license_plate')}</Text>
                                    <Text style={{ color: '#555555' }}>{user?.car}</Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4]" />
                    </View>
                    <View className="flex-col ">
                        {/* <Pressable onPress={() => router.push('changePhonePage')}>
                            <View className="flex-row items-center justify-between">
                                <View className="flex-co py-4">
                                    <Text className="text-lg pb-1">{t('accountSettings.phone')}</Text>
                                    <Text style={{ color: '#555555' }}>
                                        {user?.phone ? `+852 ${user.phone}` : t('accountSettings.no_phone')}
                                    </Text>
                                </View>
                                <RightArrowIconSvg />
                            </View>
                        </Pressable>
                        <View className="h-0.5  bg-[#f4f4f4]" /> */}
                        <Button onPress={handleDeletionAccount} title={t('accountSettings.delete_account')} color="red"></Button>
                    </View>
                </View>
            </ScrollView>
        </SafeAreaView>
    );
};

export default AccountSettingPageComponent;