import { View, YStack, Card, XStack } from 'tamagui';
import CustomText from '@/components/common/CustomText';
import { StyleSheet, TouchableOpacity, ScrollView } from 'react-native';
import { Image as ExpoImage } from 'expo-image';
import * as Application from 'expo-application';
import Constants from 'expo-constants';
import * as Updates from 'expo-updates';
import { router } from 'expo-router';

//自定义组件
import { CustomSafeArea } from '@/components/common/CustomSafeArea';
import { CustomHeader } from '@/components/common/CustomHeader';
import CustomButton from '@/components/ui/CustomButton';

// 引入国际化
import { useTranslation } from '@/node_modules/react-i18next';
// 引入屏幕适配
import { wp, sp } from '@/utils/ui/screenUtils';
// 引入全局弹窗服务
import dialogService from '@/utils/ui/dialogService.js';
import { useAuthStore } from '@/stores/auth';

//获取应用名称
const appName =
    Updates.manifest?.extra?.displayAppName ??
    Constants.expoConfig?.extra?.displayAppName ??
    Constants.expoConfig?.name ??
    Application.nativeApplicationName ?? '';

const SignOut = () => {
    // 国际化
    const { t } = useTranslation('personal');

    // 退出登录清空登录状态
    const { logout } = useAuthStore();
    // 获取当前用户信息
    const user = useAuthStore(state => state.getUser());
    // 获取前端假注销账号方法
    const addSignOutAccount = useAuthStore(state => state.addSignOutAccount);

    // 显示注销账号弹窗
    const showDeleteAccountDialog = async () => {
        const result = await dialogService.confirm({
            content: t('signOut.deleteAccountDialog')
        })

        if (result) {
            console.log('用户点击了确定')
            // 确认注销：清空登录状态并跳转到登录页，同时做本地注销记录禁止该账号登录
            // 记录当前账号为前端假注销账号
            const tel = user?.TelNum;
            if (tel) {
                addSignOutAccount(tel);
            }
            // 清除当前登录状态
            logout();
            // 重置导航栈，只保留登录页
            router.dismissAll();
            router.replace('/login');
        } else {
            console.log('用户点击了取消')
        }
    }

    return (
        <View flex={1}>
            <ExpoImage
                source={require('@/assets/images/backgrounds/home-bg.webp')}
                style={StyleSheet.absoluteFill}
                contentFit="cover"
                transition={0}
                pointerEvents="none"
                cachePolicy="memory-disk"
            />
            <CustomSafeArea>
                <CustomHeader title={t('settingsAndPrivacy.deleteAccount')} />
                <YStack style={styles.container}>
                    <XStack style={styles.titleContainer}>
                        <CustomText style={styles.titleText}>{t('signOut.deleteAccountTitle', { appName })}</CustomText>
                    </XStack>
                    <Card style={styles.card}>
                        <ScrollView
                            flex={1}
                            // 隐藏滚动条
                            showsVerticalScrollIndicator={false}
                            // 解决滚动冲突
                            nestedScrollEnabled={true}
                        >
                            <YStack>
                                <CustomText style={styles.textContent}>{t('signOut.deleteAccountIntro', { appName })}</CustomText>
                                <CustomText style={styles.textContent}>{t('signOut.deleteAccountAttention', { appName })}</CustomText>
                                <CustomText style={styles.textContent}>{t('signOut.deleteAccountBullet1', { appName })}</CustomText>
                                <CustomText style={styles.textContent}>{t('signOut.deleteAccountBullet2')}</CustomText>
                                <CustomText style={styles.textContent}>{t('signOut.deleteAccountBullet3', { appName })}</CustomText>
                            </YStack>
                        </ScrollView>
                    </Card>
                    <YStack>
                        <XStack style={styles.agreementContainer}>
                            <CustomText style={styles.agreementText}>{t('signOut.deleteAccountAgreementText')}</CustomText>
                            <TouchableOpacity onPress={() => router.push('/agreement/deleteAccount')}>
                                <CustomText style={styles.agreementButton}>《{t('signOut.deleteAccountAgreement')}》</CustomText>
                            </TouchableOpacity>
                        </XStack>
                        <CustomButton
                            fontSize={sp(18)}
                            lineHeight={wp(28)}
                            onPress={() => showDeleteAccountDialog()}
                            btnText={t('signOut.deleteAccountButton')}
                            textStyle={styles.deleteAccountButtonText}
                        />
                    </YStack>
                </YStack>
            </CustomSafeArea>
        </View>
    )
}

export default SignOut;

const styles = StyleSheet.create({
    container: {
        paddingHorizontal: wp(16),
        flex: 1,
    },
    titleContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingVertical: wp(20),
    },
    titleText: {
        fontSize: sp(22),
        fontFamily: 'SemiBold',
        color: '#000000',
        lineHeight: wp(28),
    },
    card: {
        paddingHorizontal: wp(16),
        paddingVertical: wp(16),
        flex: 1,
    },
    textContent: {
        fontSize: sp(15),
        fontFamily: 'Regular',
        color: '#191919',
        lineHeight: wp(20),
        textAlign: 'justify',
        marginVertical: wp(10),
    },
    agreementContainer: {
        alignItems: 'center',
        justifyContent: 'center',
        paddingTop: wp(20),
        paddingBottom: wp(10),
        gap: wp(8),
        maxWidth: wp(330),
        flexWrap: 'wrap',
    },
    agreementText: {
        fontSize: sp(14),
        fontFamily: 'Regular',
        color: '#9c9c9c',
        lineHeight: wp(22),
    },
    agreementButton: {
        fontSize: sp(14),
        fontFamily: 'Regular',
        color: '#DE428C',
        lineHeight: wp(22),
    },
    deleteAccountButtonText: {
        color: '#FFFFFF',
    },
});
