import { useState, useEffect, useRef } from 'react'
import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    Pressable,
    StatusBar as RNStatusBar,
    Platform,
    useWindowDimensions,
    ActivityIndicator,
} from 'react-native'
import { StatusBar } from 'expo-status-bar'
import { LinearGradient } from 'expo-linear-gradient'
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { useTranslation } from 'react-i18next'
import { Image } from 'expo-image'
import Carousel from 'react-native-reanimated-carousel'
import Svg, { Path, Defs, LinearGradient as SvgLinearGradient, Stop } from 'react-native-svg'
import { CheckIcon, LeftArrowIcon, OmitIcon, UncheckedIcon, TermsIcon, PrivacyIcon } from '@/components/icon'
import { CheckMarkIcon } from '@/components/icon/checkMark'
import PointsDrawer from '@/components/drawer/PointsDrawer'
import Dropdown from '@/components/ui/dropdown'
import GradientText from '@/components/GradientText'
import { useMembership } from '@/hooks/use-membership'
import { useActivates } from '@/hooks/use-activates'

// 使用唯一 id 的 PointsIcon，避免与其他页面的图标 id 冲突
const MembershipPointsIcon = () => {
    const gradientId = 'paint0_linear_membership'
    return (
        <Svg width="14" height="14" viewBox="0 0 14 14" fill="none" preserveAspectRatio="xMidYMid meet">
            <Defs>
                <SvgLinearGradient
                    id={gradientId}
                    x1="7.00033"
                    y1="1.73615"
                    x2="7.00033"
                    y2="12.2639"
                    gradientUnits="userSpaceOnUse"
                >
                    <Stop offset="0" stopColor="#FFC738" />
                    <Stop offset="1" stopColor="#FFA92D" />
                </SvgLinearGradient>
            </Defs>
            <Path
                d="M10.297 6.5548H8.38602C8.21382 6.5548 8.08222 6.3994 8.11022 6.23L8.79062 2.0622C8.83542 1.7892 8.49802 1.624 8.30902 1.8256L3.49862 6.9734C3.33202 7.1526 3.45802 7.4452 3.70302 7.4452H5.61402C5.78622 7.4452 5.91782 7.6006 5.88982 7.77L5.20942 11.9378C5.16462 12.2108 5.50202 12.376 5.69102 12.1744L10.5014 7.0266C10.6694 6.8474 10.542 6.5548 10.297 6.5548Z"
                fill={`url(#${gradientId})`}
            />
        </Svg>
    )
}

type PlanType = 'plus' | 'pro' | 'plus-premium'

interface Plan {
    id: PlanType
    name: string
    price: number
    recommended?: boolean
    points: number // 每月积分
    currency: string // 货币类型
    featureList: string[] // 功能列表（翻译 key）
}

// 货币符号转换函数
function toUnit(currency: string): string {
    switch (currency.toLowerCase()) {
        case 'hkd':
            return 'HK$'
        case 'cny':
            return '￥'
        default:
            return '$'
    }
}

export default function MembershipScreen() {
    const router = useRouter()
    const insets = useSafeAreaInsets()
    const { width: screenWidth } = useWindowDimensions()
    const [agreed, setAgreed] = useState(true)
    const [pointsDrawerVisible, setPointsDrawerVisible] = useState(false)
    const [isSubscribing, setIsSubscribing] = useState(false)

    const { t } = useTranslation()

    // 使用 useMembership hook
    const {
        creditPlans,
        creditBalance,
        selectedPlanIndex,
        setSelectedPlanIndex,
        isLoadingSubscriptions,
        isStripePricingLoading,
        createSubscription,
        upgradeSubscription,
        restoreSubscription,
        rechargeToken,
        activeAuthSubscription,
        hasActiveSubscription,
        stripePricingData,
    } = useMembership()

    // 使用 useActivates hook 获取广告数据
    const { load: loadActivates, data: activatesData } = useActivates()


    // 映射 API 数据到 UI 格式
    const plans: Plan[] = creditPlans.map((plan, index) => ({
        id: `plan-${index}` as PlanType,
        name: plan.name,
        price: plan.amountInCents / 100,
        recommended: plan.popular,
        points: plan.credits,
        currency: plan.currency,
        featureList: plan.featureList,
    }))

    const selectedPlan = plans[selectedPlanIndex] || plans[0]

    // 下拉菜单选项
    const menuOptions = [
        { label: t('membership.terms'), value: 'terms' },
        { label: t('membership.privacy'), value: 'privacy' },
    ]

    // 处理菜单选择
    const handleMenuSelect = (value: string) => {
        if (value === 'terms') {
            router.push('/terms')
        } else if (value === 'privacy') {
            router.push('/privacy')
        }
    }

    // 轮播图相关 - 使用动态广告数据
    const activities = activatesData?.activities || []
    const [currentImageIndex, setCurrentImageIndex] = useState(0)

    // 加载广告数据
    useEffect(() => {
        loadActivates()
    }, [])

    // 处理订阅按钮点击
    const handleSubscribe = async () => {
        if (!agreed || !selectedPlan) return

        const planData = creditPlans[selectedPlanIndex]
        if (!planData) return

        setIsSubscribing(true)
        try {
            if (hasActiveSubscription) {
                await upgradeSubscription({ credits: planData.credits })
            } else if (activeAuthSubscription?.cancelAtPeriodEnd) {
                await restoreSubscription()
            } else {
                const pricingItem = stripePricingData?.pricing_table_items?.[selectedPlanIndex]
                if (pricingItem) {
                    await createSubscription({
                        priceId: pricingItem.price_id,
                        productId: pricingItem.product_id,
                    })
                }
            }
        } finally {
            setIsSubscribing(false)
        }
    }

    // 获取当前选中计划的信息
    const currentPlan = selectedPlan

    // 计算进度条百分比：当前计划积分 / 最高计划积分
    const maxPoints = plans.length > 0 ? Math.max(...plans.map(plan => plan.points)) : 1
    const progressPercentage = currentPlan?.points ? (currentPlan.points / maxPoints) * 100 : 0

    // 加载状态
    if (isStripePricingLoading || creditPlans.length === 0) {
        return (
            <SafeAreaView style={styles.container} edges={['top']}>
                <StatusBar style="light" />
                <View style={[styles.container, styles.loadingContainer]}>
                    <ActivityIndicator size="large" color="#FF9966" />
                </View>
            </SafeAreaView>
        )
    }

    return (
        <SafeAreaView style={styles.container} edges={['top']}>
            <StatusBar style="light" />
            <RNStatusBar
                barStyle="light-content"
                backgroundColor="#090A0B"
                translucent={Platform.OS === 'android'}
            />
            <View style={styles.contentWrapper}>
                {/* 顶部导航栏 - 固定在顶部 */}
                <View style={styles.header}>
                    <Pressable
                        style={styles.backButton}
                        onPress={() => router.back()}
                    >
                        <LeftArrowIcon className="w-4 h-4" />
                    </Pressable>
                    <View style={styles.headerSpacer} />
                    <View style={styles.pointsContainer}>
                        <Pressable
                            style={styles.pointsPill}
                            onPress={() => setPointsDrawerVisible(true)}
                        >
                            <Text style={styles.pointsLabel}>{t('membership.myPoints')}</Text>
                            <MembershipPointsIcon />
                            <Text style={styles.pointsValue}>{creditBalance}</Text>
                        </Pressable>
                        <View style={styles.settingsButtonContainer}>
                            <Dropdown
                                options={menuOptions}
                                onSelect={(value) => handleMenuSelect(value)}
                                offsetTop={10}
                                renderTrigger={(selectedOption, isOpen, toggle) => (
                                    <Pressable style={styles.settingsButton} onPress={toggle}>
                                        <OmitIcon />
                                    </Pressable>
                                )}
                                dropdownStyle={styles.menuDropdown}
                                renderOption={(option, isSelected) => (
                                    <View style={styles.menuOption}>
                                        {option.value === 'terms' ? (
                                            <TermsIcon />
                                        ) : (
                                            <PrivacyIcon />
                                        )}
                                        <Text style={styles.menuOptionText}>{option.label}</Text>
                                    </View>
                                )}
                            />
                        </View>
                    </View>
                </View>
                <ScrollView
                    style={styles.scrollView}
                    contentContainerStyle={styles.scrollContent}
                    showsVerticalScrollIndicator={false}
                >
                    <View style={styles.imageContainer}>
                        {/* 只在有广告数据时显示轮播图 */}
                        {activities.length > 0 && (
                            <>
                                <Carousel
                                    testID="carousel"
                                    width={screenWidth}
                                    height={screenWidth / 1.1}
                                    data={activities}
                                    renderItem={({ item }) => (
                                        <Pressable
                                            onPress={() => router.push(item.link as any)}
                                            style={{ width: screenWidth, height: screenWidth / 1.1 }}
                                        >
                                            <Image
                                                source={{ uri: item.coverUrl }}
                                                style={[styles.membershipImage, { width: screenWidth, height: screenWidth / 1.1 }]}
                                                contentFit="cover"
                                            />
                                        </Pressable>
                                    )}
                                    autoPlay
                                    autoPlayInterval={2000}
                                    loop
                                    onSnapToItem={(index) => setCurrentImageIndex(index)}
                                    enabled={false}
                                    windowSize={1}
                                    mode="parallax"
                                />
                                <View style={styles.dotsContainer}>
                                    {activities.map((_, index) => (
                                        <View
                                            key={index}
                                            testID={`dot-${index}`}
                                            style={[
                                                styles.dot,
                                                index === currentImageIndex && styles.dotActive,
                                            ]}
                                        />
                                    ))}
                                </View>
                                <LinearGradient
                                    colors={['#090A0B00', '#090A0B']}
                                    start={{ x: 0, y: 0 }}
                                    end={{ x: 0, y: 1 }}
                                    style={styles.imageGradient}
                                    pointerEvents="none"
                                />
                            </>
                        )}
                    </View>

                    {/* 订阅计划标题 */}
                    <Text style={styles.sectionTitle}>{t('membership.subscriptionPlan')}</Text>

                    {/* 订阅计划卡片 */}
                    <View style={styles.plansContainer}>
                        {plans.map((plan, index) => {
                            const isSelected = selectedPlanIndex === index
                            return (
                                <Pressable
                                    key={plan.id}
                                    style={[
                                        styles.planCardWrapper,
                                        index > 0 && styles.planCardSpacing,
                                    ]}
                                    onPress={() => setSelectedPlanIndex(index)}
                                >
                                    {isSelected ? (
                                        <LinearGradient
                                            colors={['#FF9966', '#FF6699', '#9966FF']}
                                            start={{ x: 0, y: 0 }}
                                            end={{ x: 1, y: 0 }}
                                            style={styles.planCardGradient}
                                        >
                                            <View style={styles.planCard}>
                                                {plan.recommended && (
                                                    <View style={styles.recommendedBadge}>
                                                        <Text style={styles.recommendedText}>{t('membership.mostRecommended')}</Text>
                                                    </View>
                                                )}
                                                <Text style={styles.planName}>{plan.name}</Text>
                                                <View style={styles.priceContainer}>
                                                    <GradientText
                                                        colors={['#FF9966', '#FF6699', '#9966FF']}
                                                        start={{ x: 0, y: 0 }}
                                                        end={{ x: 1, y: 0 }}
                                                        style={styles.priceSymbol}
                                                    >
                                                        {toUnit(plan.currency)}
                                                    </GradientText>
                                                    <GradientText
                                                        colors={['#FF9966', '#FF6699', '#9966FF']}
                                                        start={{ x: 0, y: 0 }}
                                                        end={{ x: 1, y: 0 }}
                                                        style={styles.priceValue}>{plan.price}</GradientText>
                                                    <Text style={styles.priceUnit}>{t('membership.perMonth')}</Text>
                                                </View>
                                            </View>
                                        </LinearGradient>
                                    ) : (
                                        <View style={styles.planCardWrapperUnselected}>
                                            <View style={styles.planCard}>
                                                {plan.recommended && (
                                                    <View style={styles.recommendedBadge}>
                                                        <Text style={styles.recommendedText}>{t('membership.mostRecommended')}</Text>
                                                    </View>
                                                )}
                                                <Text style={styles.planName}>{plan.name}</Text>
                                                <View style={styles.priceContainer}>
                                                    <GradientText
                                                        colors={['#FF9966', '#FF6699', '#9966FF']}
                                                        start={{ x: 0, y: 0 }}
                                                        end={{ x: 1, y: 0 }}
                                                        style={styles.priceSymbol}
                                                    >
                                                        {toUnit(plan.currency)}
                                                    </GradientText>
                                                    <GradientText
                                                        colors={['#FF9966', '#FF6699', '#9966FF']}
                                                        start={{ x: 0, y: 0 }}
                                                        end={{ x: 1, y: 0 }}
                                                        style={styles.priceValue}>{plan.price}</GradientText>
                                                    <Text style={styles.priceUnit}>{t('membership.perMonth')}</Text>
                                                </View>
                                            </View>
                                        </View>
                                    )}
                                </Pressable>
                            )
                        })}
                    </View>
                    {/* 卡片所属的信息 */}
                    <View style={styles.pointsMonthlyContainer}>
                        {/* 积分每月显示 */}
                        <View style={styles.pointsMonthlyCard}>
                            <View style={styles.pointsMonthlyHeader}>
                                <MembershipPointsIcon />
                                <Text style={styles.pointsMonthlyValue}>
                                    {currentPlan.points.toLocaleString()}
                                </Text>
                                <Text style={styles.pointsMonthlyLabel}>{t('membership.pointsPerMonth')}</Text>
                            </View>
                            <View style={styles.progressBar}>
                                <LinearGradient
                                    colors={['#FF9966', '#FF6699', '#9966FF']}
                                    start={{ x: 0, y: 0 }}
                                    end={{ x: 1, y: 0 }}
                                    style={[styles.progressFill, { width: `${progressPercentage}%` }]}
                                />
                            </View>
                            <Text style={styles.pointsMonthlyNote}>{t('membership.pointsAutoRenew')}</Text>
                        </View>

                        {/* 功能列表 */}
                        <View >
                            {currentPlan.featureList.map((featureKey, index) => {
                                const translatedText = t(featureKey)
                                // 如果没有对应的翻译键（翻译结果等于键本身），不展示该项
                                if (translatedText === featureKey) {
                                    return null
                                }
                                return (
                                    <View key={index} style={styles.featureItem}>
                                        <CheckMarkIcon />
                                        <Text style={styles.featureText}>{translatedText}</Text>
                                    </View>
                                )
                            })}
                        </View>
                    </View>
                </ScrollView>

                {/* 固定在底部的订阅容器 */}
                <View style={[styles.subscribeContainer, { paddingBottom: Math.max(insets.bottom, 3) }]}>
                    {/* 立即开通按钮 */}
                    <Pressable
                        disabled={!agreed || isLoadingSubscriptions || isStripePricingLoading || isSubscribing}
                        style={styles.subscribeButtonPressable}
                        onPress={handleSubscribe}
                    >
                        <LinearGradient
                            colors={currentPlan.recommended
                                ? ['#9966FF', '#FF6699', '#FF9966']
                                : ['#FFE7F8', '#C6A7FA', '#ADBCFF', '#E6E3FF']
                            }
                            locations={currentPlan.recommended
                                ? [0.0015, 0.4985, 0.9956]
                                : [0, 0.33, 0.66, 1]
                            }
                            start={{ x: 1, y: 0 }}
                            end={{ x: 0, y: 0 }}
                            style={[
                                styles.subscribeButton,
                                (!agreed || isLoadingSubscriptions || isStripePricingLoading || isSubscribing) && styles.subscribeButtonDisabled,
                            ]}
                        >
                            {isLoadingSubscriptions || isStripePricingLoading || isSubscribing ? (
                                <ActivityIndicator color="#F5F5F5" />
                            ) : (
                                <Text style={currentPlan.recommended ? styles.subscribeButtonText : styles.subscribeButtonText1}>{t('membership.subscribeNow')}</Text>
                            )}
                        </LinearGradient>
                    </Pressable>
                    {/* 协议复选框 */}
                    <View style={styles.agreementContainer}>
                        <Pressable
                            style={styles.checkbox}
                            onPress={() => setAgreed(!agreed)}
                        >
                            {agreed ? <CheckIcon /> : <UncheckedIcon />}
                        </Pressable>
                        <View style={styles.agreementTextWrapper}>
                            <Text style={styles.agreementText}>
                                {t('membership.agreementText')}{' '}
                                <Text
                                    style={styles.agreementLink}
                                    onPress={() => router.push('/terms')}
                                >
                                    {t('membership.terms')}
                                </Text>
                                <Text style={styles.agreementText}> {t('membership.agreementAnd')} </Text>
                                <Text
                                    style={styles.agreementLink}
                                    onPress={() => router.push('/privacy')}
                                >
                                    {t('membership.privacy')}
                                </Text>
                            </Text>
                        </View>
                    </View>
                </View>
            </View>

            {/* 积分抽屉 */}
            <PointsDrawer
                visible={pointsDrawerVisible}
                onClose={() => setPointsDrawerVisible(false)}
                totalPoints={creditBalance}
                subscriptionPoints={0}
                topUpPoints={0}
                onRecharge={(amount) => rechargeToken(amount)}
            />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    contentWrapper: {
        flex: 1,
    },
    scrollView: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    scrollContent: {
        backgroundColor: '#090A0B',
        flexGrow: 1,
        paddingTop: 56, // 为固定的导航栏留出空间
    },
    header: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 12,
        paddingTop: 7,
        paddingBottom: 7,
        zIndex: 100,
        backgroundColor: 'transparent',
    },
    imageContainer: {
        width: '100%',
        overflow: 'hidden',
        marginTop: -56,
        position: 'relative',
    },
    membershipImage: {
        width: '100%',
        height: '100%',
    },
    imageGradient: {
        position: 'absolute',
        bottom: -20,
        left: 0,
        right: 0,
        height: '30%',
        zIndex: 10,
        elevation: 10,
    },
    dotsContainer: {
        position: 'absolute',
        bottom: 40,
        left: 16,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        gap: 4,
        zIndex: 20,
        elevation: 20,
    },
    dot: {
        width: 4,
        height: 4,
        borderRadius: 100,
        backgroundColor: '#FFFFFF80',
    },
    dotActive: {
        width: 10,
        height: 4,
        borderRadius: 100,
        backgroundColor: '#FFFFFF',
    },
    backButton: {
        width: 32,
        height: 32,
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 100,
    },
    headerSpacer: {
        flex: 1,
    },
    pointsPill: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 12,
        paddingVertical: 8,
        borderRadius: 100,
        backgroundColor: '#2A2A2A80',
    },
    pointsLabel: {
        color: '#F5F5F5',
        fontSize: 11,
        fontWeight: '500',
    },
    pointsValue: {
        color: '#F5F5F5',
        fontSize: 12,
        fontWeight: '500',
    },
    sectionTitle: {
        textAlign: 'center',
        color: '#F5F5F5',
        fontSize: 24,
        fontWeight: '900',
        lineHeight: 32,
        marginBottom: 16,
        marginTop: 9,
        fontStyle: 'italic',
    },
    plansContainer: {
        flexDirection: 'row',
        paddingHorizontal: 16,
        marginBottom: 16,
    },
    planCardWrapper: {
        flex: 1,
    },
    planCardGradient: {
        flex: 1,
        borderRadius: 12,
        padding: 2,
    },
    planCardWrapperUnselected: {
        flex: 1,
        borderRadius: 12,
        padding: 2,
        backgroundColor: 'transparent',
    },
    planCard: {
        flex: 1,
        paddingTop: 12,
        paddingBottom: 16,
        paddingHorizontal: 12,
        borderRadius: 12,
        backgroundColor: '#16181B',
        position: 'relative',
        overflow: 'hidden',
    },
    planCardSpacing: {
        marginLeft: 12,
    },
    recommendedBadge: {
        position: 'absolute',
        top: -3,
        right: -2,
        paddingHorizontal: 11,
        paddingBottom: 1,
        borderRadius: 4,
        backgroundColor: '#6851EB',
        borderTopRightRadius: 12,
        borderBottomRightRadius: 0,
    },
    recommendedText: {
        color: '#F5F5F5',
        fontSize: 10,
        fontWeight: '500',
    },
    planName: {
        color: '#F5F5F5',
        fontSize: 12,
        fontWeight: '500',
        marginBottom: 14,
    },
    priceContainer: {
        flexDirection: 'row',
        alignItems: 'baseline',
    },
    priceSymbol: {
        color: '#F5F5F5',
        fontSize: 12,
        fontWeight: '500',
        marginRight: 2,
    },
    priceValue: {
        color: '#F5F5F5',
        fontSize: 24,
        fontWeight: '500',
        marginRight: 4,
    },
    priceUnit: {
        color: '#ABABAB',
        fontSize: 12,
        fontWeight: '500',
    },
    pointsMonthlyContainer: {
        marginHorizontal: 16,
        backgroundColor: '#191B1F',
        paddingHorizontal: 12,
        paddingVertical: 12,
        borderRadius: 12,
        marginBottom: 16,
    },
    pointsMonthlyCard: {
        paddingHorizontal: 16,
        paddingVertical: 10,
        borderRadius: 10,
        backgroundColor: '#272A30',
        marginBottom: 24,
    },
    pointsMonthlyHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        marginBottom: 10,
    },
    pointsMonthlyLabelWrapper: {
        marginLeft: 8,
    },
    pointsMonthlyValue: {
        color: '#F5F5F5',
        fontSize: 13,
        fontWeight: '500',
    },
    pointsMonthlyLabel: {
        color: '#F5F5F5',
        fontSize: 13,
        fontWeight: '500',
    },
    progressBar: {
        width: '100%',
        height: 3,
        backgroundColor: '#484F5B',
        borderRadius: 10,
        marginBottom: 10,
        overflow: 'hidden',
    },
    progressFill: {
        height: '100%',
        borderRadius: 2,
    },
    pointsMonthlyNote: {
        color: '#CCCCCC',
        fontSize: 11,
        fontWeight: '400',
    },
    featureItem: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 16,
        marginBottom: 12,
    },
    featureText: {
        flex: 1,
        color: '#CCCCCC',
        fontSize: 12,
        fontWeight: '400',
    },
    agreementContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        marginTop: 8,
        marginBottom: 16,
        paddingVertical: 8,
    },
    agreementTextWrapper: {
        marginLeft: 4,
    },
    checkbox: {
        width: 20,
        height: 20,
        alignItems: 'center',
        justifyContent: 'center',
        padding: 4,
    },
    agreementText: {
        color: '#CCCCCC',
        fontSize: 11,
        fontWeight: '400',
    },
    agreementLink: {
        color: '#CCCCCC',
    },
    subscribeContainer: {
        paddingTop: 8,
        alignItems: 'center',
        paddingHorizontal: 16,
    },
    subscribeButtonPressable: {
        width: '100%',
        height: 48,
        borderRadius: 12,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    subscribeButton: {
        width: '100%',
        paddingVertical: 14,
        borderRadius: 12,
        alignItems: 'center',
        justifyContent: 'center',
    },
    subscribeButtonDisabled: {
        opacity: 0.5,
    },
    subscribeButtonText: {
        color: '#F5F5F5',
        fontSize: 16,
        fontWeight: '500',
    },
    subscribeButtonText1: {
        color: '#0D0D0E',
        fontSize: 16,
        fontWeight: '500',
    },
    settingsButtonContainer: {
        position: 'relative',
    },
    settingsButton: {
        width: 32,
        height: 32,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#2A2A2A80',
        borderRadius: 100,
    },
    pointsContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 12,
    },
    menuDropdown: {
        width: 180,
        minWidth: 180,
        borderRadius: 12,
        backgroundColor: '#2A2A2A80',
        paddingVertical: 4,
        right: 12,
    },
    menuOption: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 2,
        gap: 8,
    },
    menuOptionText: {
        color: '#F5F5F5',
        fontSize: 12,
        fontWeight: '400',
        flex: 1,
    },
    loadingContainer: {
        justifyContent: 'center',
        alignItems: 'center',
    },
})