import ReturnArrowSvg from '@/assets/icons/svg/returnArrow.svg';
import StarSvg from '@/assets/icons/svg/whiteStart.svg';
import CheckSvg from '@/assets/icons/svg/yes.svg';
import PrivacyModal from '@/components/owner/qualification/privacy';
import Normal from '@/components/owner/rights/normal';
import Premium, { PayItem } from '@/components/owner/rights/premium';
import ProRights from '@/components/owner/rights/proRights';
import { createOrder, createPayment, getPAy, isOrderExpired, payFailure, payProcessing, paySuccess } from '@/components/owner/rights/utils';
import { ThemedText } from '@/components/ThemedText';
import { CreateOrder } from '@/types/personal-info';
import { useLocalSearchParams, useRouter } from "expo-router";
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { ActivityIndicator, Image, Platform, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';

// 根据平台动态导入 expo-iap
let useIAP: any, requestPurchase: any, getPurchaseHistories: any;
if (Platform.OS !== 'web') {
    const iap = require('expo-iap');
    useIAP = iap.useIAP;
    requestPurchase = iap.requestPurchase;
    getPurchaseHistories = iap.getPurchaseHistories;
} else {
    // 为 Web 端提供 mock 实现
    useIAP = () => ({ connected: false });
    requestPurchase = async () => { console.log('IAP is not available on web.'); };
    getPurchaseHistories = async () => [];
}

export default function Rights() {
    const insets = useSafeAreaInsets();
    const router = useRouter();
    const { t } = useTranslation();
    const {
        connected,
        requestProducts,
        ErrorCode
    } = useIAP();
    const { points, pro } = useLocalSearchParams<{
        credit: string;
        points: string;
        pro: string
    }>();
    // 用户勾选协议
    const [agree, setAgree] = useState<boolean>(false);
    // 用户选择购买的loading
    const [confirmLoading, setConfirmLoading] = useState<boolean>(false);
    // 选择购买方式
    const [payChoice, setPayChoice] = useState<'ApplePay'>('ApplePay');
    // 普通用户，会员
    const [userType, setUserType] = useState<'normal' | 'premium'>('normal');

    // 选择权益方式
    const [payType, setPayType] = useState<string>('');

    // 用户协议弹窗打开
    const [showTerms, setShowTerms] = useState<boolean>(false);

    // 调接口获取支付信息
    const [premiumPay, setPremiumPay] = useState<PayItem[]>();
    const [loading, setLoading] = useState<boolean>(false);

    // 查看历史订单
    const fetchPurchaseHistory = async () => {
        try {
            const purchaseHistories = await getPurchaseHistories();
            console.log('Purchase history fetched:', purchaseHistories);
            return purchaseHistories
        } catch (error) {
            console.error('Failed to fetch purchase history:', error);
        }
    };

    // 恢复购买
    // const restorePurchases = async () => {
    //     try {
    //         const purchases = await getAvailablePurchases();
    //         console.log('Available purchases:', purchases);
    //         // Process and validate restored purchases
    //         for (const purchase of purchases) {
    //             await validateAndGrantPurchase(purchase);
    //         }
    //         alert(t('personal:rights.restoreSuccess'));
    //     } catch (error) {
    //         console.error('Restore failed:', error);
    //     }
    // };

    // 处理购买
    const handlePurchase = async (sku: string, transaction_id: string) => {
        try {
            // 支付中
            await payProcessing(transaction_id, "")
            const res = await requestPurchase({
                request: {
                    ios: {
                        sku: sku,
                        andDangerouslyFinishTransactionAutomaticallyIOS: false,
                    },
                },
            });
            // 支付成功
            await paySuccess(transaction_id, res?.transaction_id || "")
        } catch (error: any) {
            console.log('Purchase failed:', error);
            // 支付失败
            payFailure(transaction_id, ErrorCode[error?.code as keyof typeof ErrorCode || "E_UNKNOWN"])
        }
    };

    // 获取苹果订单信息
    useEffect(() => {
        if (!connected) return;

        const initializeStore = async () => {
            try {
                await requestProducts({ skus: ["MEMBERSHIP_PRO_QUARTERLY", "MEMBERSHIP_PRO_YEARLY", "MEMBERSHIP_PRO_MONTH"], type: 'subs' });
            } catch (error) {
                console.error('Failed to initialize store:', error);
            }
        };

        initializeStore();
    }, [connected]);

    // 初始化获取产品项
    useEffect(() => {
        setLoading(true);
        getPAy().then(({ bestValue, payInfo }) => {
            setPayType(bestValue?.product_code)
            setPremiumPay([bestValue, ...payInfo?.filter((item) => item.product_code !== bestValue?.product_code)]);
            setLoading(false);
        }).catch(() => {
            setLoading(false);
        })
    }, []);

    // 用户确认购买时，进行 创建订单，创建支付 接口调用
    const confirmPurchase = async () => {
        if (!agree) {
            alert(t('personal:rights.agreementError'));
            return
        }
        setConfirmLoading(true);
        const history = await fetchPurchaseHistory()
        const historyIds = history?.filter((item: any) => isOrderExpired(item?.expirationDateIos))?.map((i: any) => { return i?.id })
        if (historyIds?.includes(payType)) {
            setConfirmLoading(false);
            setTimeout(() => {
                alert(t('personal:rights.againError'));
            }, 0);
            return
        }

        try {
            // 创建订单
            createOrder(premiumPay?.filter((item) => item.product_code === payType)?.[0]?.id || 1, 1).then((res: CreateOrder) => {
                // 创建支付
                createPayment(res?.id || "", payChoice).then(async (res) => {
                    // 苹果支付
                    await handlePurchase(payType, res?.transaction_id || "")
                    setConfirmLoading(false);
                }).catch((err) => {
                    console.log("createPayment", err);
                    setConfirmLoading(false);
                })
            }).catch((err) => {
                console.log("createOrder", err);
                setConfirmLoading(false);
            })
        } catch (error) {
            console.log("confirmPurchase", error);
            setConfirmLoading(false);
        }
    };

    useEffect(() => {
        if (pro === "Pro") {
            setUserType('premium')
        } else {
            setUserType('normal')
        }
    }, [pro])

    useEffect(() => {
        fetchPurchaseHistory()
    }, [])

    return (
        <View style={{ flex: 1 }}>
            {/* 整个页面的中间添加一个loading */}
            {confirmLoading && (
                <View style={[styles.loadingContainer, { top: insets.top + 60 }]}>
                    <View style={styles.loadingContent}>
                        <ActivityIndicator size="large" color="#AC7E35" />
                        <ThemedText style={{ color: '#AC7E35', fontSize: 14, fontWeight: '700' }}>
                            {t('personal:rights.confirmLoading')}
                        </ThemedText>
                    </View>
                </View>
            )}
            <ScrollView style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom + 80 }]}>
                {/* 导航栏 */}
                <View
                    style={styles.header}
                >
                    <TouchableOpacity onPress={() => { router.push('/owner'); setConfirmLoading(false) }} style={{ padding: 16 }}>
                        <ReturnArrowSvg />
                    </TouchableOpacity>
                    <ThemedText style={styles.headerTitle}>
                        {t('rights.title', { ns: 'personal' })}
                    </ThemedText>
                    <ThemedText className='opacity-0'>123</ThemedText>
                </View>
                {/* 会员卡 */}
                <View style={styles.card}>
                    {userType === 'normal' ? (
                        <Image source={require('@/assets/images/png/owner/normal.png')} style={{ height: 150, objectFit: 'cover', width: '100%', borderRadius: 32 }} />
                    ) : (
                        <Image source={require('@/assets/images/png/owner/pro.png')} style={{ height: 150, objectFit: 'cover', width: '100%', borderRadius: 32 }} />
                    )}
                    <View style={styles.cardContent}>
                        <View style={styles.cardinfo}>
                            <ThemedText style={styles.cardTitle}>
                                {t('rights.purchase', { ns: 'personal' })}
                            </ThemedText>
                            <View style={styles.cardPoints}>
                                <StarSvg />
                                <ThemedText style={styles.cardPointsText}>{points}</ThemedText>
                            </View>
                        </View>
                    </View>
                </View>

                {/* 会员信息 */}
                <View style={styles.info}>
                    {/* 切换按钮 */}
                    <View style={styles.switchButton}>
                        <TouchableOpacity
                            onPress={() => { setUserType("normal") }}
                            style={[styles.switchButtonItem, { backgroundColor: userType === 'normal' ? "#FFB645" : "#fff", borderColor: userType === 'normal' ? "#FFB645" : "#E2793F" }]}
                        >
                            <ThemedText style={{ color: userType === 'normal' ? "#fff" : "#E2793F" }}> {t('rights.free', { ns: 'personal' })}</ThemedText>
                        </TouchableOpacity>
                        <TouchableOpacity
                            onPress={() => { setUserType("premium") }}
                            style={[styles.switchButtonItem, { backgroundColor: userType === 'premium' ? "#E2793F" : "#fff", borderColor: userType === 'premium' ? "#E2793F" : "#E2793F" }]}
                        >
                            <ThemedText style={{ color: userType === 'premium' ? "#fff" : "#E2793F" }}>{t('rights.premium', { ns: 'personal' })}</ThemedText>
                        </TouchableOpacity>
                    </View>
                    {/* 普通权益 */}
                    <Normal setUserType={setUserType} style={{ display: userType === 'normal' ? "flex" : "none" }} />
                    {/* 会员权益 */}
                    <Premium setPayType={setPayType} setShowTerms={setShowTerms} payType={payType} premiumPay={premiumPay} loading={loading} style={{ display: userType === 'normal' ? "none" : "flex" }} />
                </View>
                {/* 支付方式 */}
                {/* <PayTypeModal setConfirmPay={setConfirmPay} modalVisible={showPayType} setModalVisible={setShowPayType} payChoice={payChoice} setPayChoice={setPayChoice} /> */}
                {/* 会员权益信息 */}
                <View style={{ flex: 1, marginBottom: 120 }}>
                    <ProRights style={{ display: userType === 'normal' ? "none" : "flex" }} />
                </View>
            </ScrollView>
            {/* 付费按钮 */}
            <View style={{
                padding: 16,
                paddingBottom: 32,
                backgroundColor: '#fff',
                position: 'absolute',
                bottom: 0,
                left: 0,
                right: 0,
                display: userType === 'normal' ? "none" : "flex"
            }}>
                <View style={{ flexDirection: 'row', gap: 8, alignItems: 'center', marginLeft: 8, marginBottom: 8 }}>
                    <TouchableOpacity onPress={() => { setAgree(!agree) }} activeOpacity={0.8}>
                        <View style={[styles.agree, { backgroundColor: agree ? '#FFB645' : '#fff', borderColor: agree ? '#FFB645' : '#AC7E35' }]}>
                            {agree && <CheckSvg />}
                        </View>
                    </TouchableOpacity>
                    <View style={{ flexDirection: 'row', gap: 4 }}>
                        <ThemedText style={{ fontWeight: '400', fontSize: 11 }}>
                            {t('personal:rights.agreement')}
                        </ThemedText>
                        <TouchableOpacity
                            onPress={async () => {
                                setShowTerms(true);
                            }}
                            activeOpacity={0.8}
                        >
                            <ThemedText style={{ color: '#AC7E35', fontWeight: '400', fontSize: 11, textAlign: 'center' }}>
                                {t('personal:rights.membership')}
                            </ThemedText>
                        </TouchableOpacity>
                    </View>
                </View>
                <TouchableOpacity
                    style={styles.goPay}
                    onPress={async () => {
                        confirmPurchase()
                    }}
                    activeOpacity={0.8}
                >
                    <ThemedText style={{ color: '#fff', fontWeight: '700', fontSize: 18 }}>
                        {t('rights.subscribe', { ns: 'personal' })} {payType?.split('_')[payType?.split('_')?.length - 1]}
                    </ThemedText>
                </TouchableOpacity>

            </View>
            {/* 协议弹窗 */}
            <PrivacyModal modalVisible={showTerms} setModalVisible={setShowTerms} type={"membership"} />
        </View>
    );
}

const styles = StyleSheet.create({
    agree: {
        width: 15,
        height: 15,
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center',
        borderColor: '#AC7E35',
        borderWidth: 1,
    },
    loadingContent: {
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#fff',
        borderRadius: 12,
        padding: 16,
    },
    loadingContainer: {
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 9,
        backgroundColor: 'rgba(255, 255, 255, 0.5)',
    },
    payChoice: {
        width: 20,
        height: 20,
        borderRadius: 15,
        alignItems: 'center',
        justifyContent: 'center',
    },
    paymentMethod: {
        marginHorizontal: 16,
        marginVertical: 16,
        borderRadius: 12,
        backgroundColor: '#fff',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 5,
        elevation: 5,
    },
    goPay: {
        backgroundColor: '#E2793F',
        borderRadius: 32,
        paddingVertical: 16,
        display: "flex",
        alignItems: "center",
        width: "100%",
    },
    switchButton: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        gap: 16,
        marginBottom: 16
    },
    switchButtonItem: {
        width: "47%",
        borderRadius: 24,
        paddingVertical: 8,
        display: "flex",
        alignItems: "center",
        borderWidth: 1
    },
    info: {
        marginHorizontal: 16,
        marginVertical: 16,
        padding: 16,
        borderRadius: 32,
        backgroundColor: '#fff',
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 5,
        elevation: 5,
    },
    container: {
        flex: 1,
        backgroundColor: 'white',
    },
    header: {
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginVertical: 16,
    },
    headerTitle: {
        fontSize: 20,
        fontWeight: '700',
        color: '#4C320C',
    },
    card: {
        marginHorizontal: 16,
        marginVertical: 16,
        backgroundColor: '#FFB645',
        borderRadius: 32,
    },
    cardContent: {
        position: 'absolute',
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
        padding: 16,
        justifyContent: 'space-between'
    },
    cardinfo: {
        alignItems: 'flex-end',
    },
    cardTitle: {
        fontSize: 12,
        fontWeight: '700',
        color: '#E2793F',
        backgroundColor: '#fff',
        paddingHorizontal: 16,
        paddingVertical: 2,
        borderRadius: 20,
        textAlign: 'center',
        marginBottom: 24
    },
    cardPoints: {
        display: 'flex',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8
    },
    cardPointsText: {
        fontSize: 32,
        fontWeight: '700',
        color: '#4C320C',
        lineHeight: 36
    }
});