import { View, StyleSheet } from 'react-native'
import { Skeleton } from './skeleton'

export function MembershipSkeleton() {
    return (
        <View style={styles.container}>
            {/* 顶部导航栏骨架 */}
            <View style={styles.header}>
                <Skeleton width={32} height={32} borderRadius={100} />
                <View style={styles.headerSpacer} />
                <Skeleton width={100} height={32} borderRadius={100} />
                <Skeleton width={32} height={32} borderRadius={100} />
            </View>

            {/* 订阅计划标题骨架 */}
            <Skeleton width={100} height={32} borderRadius={4} style={styles.sectionTitle} />

            {/* 订阅计划卡片骨架 */}
            <View style={styles.plansContainer}>
                {[1, 2, 3].map((item) => (
                    <View
                        key={item}
                        style={[
                            styles.planCard,
                            item > 1 && styles.planCardSpacing,
                        ]}
                    >
                        <Skeleton width={60} height={16} borderRadius={4} style={styles.planName} />
                        <Skeleton width={80} height={28} borderRadius={4} />
                    </View>
                ))}
            </View>

            {/* 积分每月卡片骨架 */}
            <View style={styles.pointsMonthlyContainer}>
                <View style={styles.pointsMonthlyCard}>
                    <View style={styles.pointsMonthlyHeader}>
                        <Skeleton width={14} height={14} borderRadius={4} />
                        <Skeleton width={60} height={16} borderRadius={4} />
                        <Skeleton width={50} height={14} borderRadius={4} />
                    </View>
                    <Skeleton width="100%" height={3} borderRadius={10} style={styles.progressBar} />
                    <Skeleton width={120} height={12} borderRadius={4} />
                </View>

                {/* 功能列表骨架 */}
                {[1, 2, 3, 4, 5].map((item) => (
                    <View key={item} style={styles.featureItem}>
                        <Skeleton width={12} height={12} borderRadius={4} />
                        <Skeleton width="80%" height={14} borderRadius={4} />
                    </View>
                ))}
            </View>

            {/* 底部订阅按钮骨架 */}
            <View style={styles.subscribeContainer}>
                <Skeleton width="100%" height={48} borderRadius={12} style={styles.subscribeButton} />
                <View style={styles.agreementContainer}>
                    <Skeleton width={12} height={12} borderRadius={4} />
                    <Skeleton width={200} height={12} borderRadius={4} />
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 12,
        paddingTop: 7,
        paddingBottom: 20,
    },
    headerSpacer: {
        flex: 1,
    },
    sectionTitle: {
        textAlign: 'center',
        marginBottom: 16,
        alignSelf: 'center',
    },
    plansContainer: {
        flexDirection: 'row',
        paddingHorizontal: 16,
        marginBottom: 16,
    },
    planCard: {
        flex: 1,
        paddingTop: 12,
        paddingBottom: 16,
        paddingHorizontal: 12,
        borderRadius: 12,
        backgroundColor: '#16181B',
        gap: 14,
    },
    planCardSpacing: {
        marginLeft: 12,
    },
    planName: {
        marginBottom: 0,
    },
    pointsMonthlyContainer: {
        marginHorizontal: 16,
        backgroundColor: '#191B1F',
        paddingHorizontal: 12,
        paddingVertical: 12,
        borderRadius: 12,
        marginBottom: 24,
        gap: 12,
    },
    pointsMonthlyCard: {
        paddingHorizontal: 16,
        paddingVertical: 10,
        borderRadius: 10,
        backgroundColor: '#272A30',
        marginBottom: 24,
        gap: 10,
    },
    pointsMonthlyHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
    },
    progressBar: {
        marginBottom: 10,
    },
    featureItem: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 16,
        marginBottom: 12,
    },
    subscribeContainer: {
        paddingTop: 16,
        alignItems: 'center',
        paddingHorizontal: 16,
        gap: 8,
    },
    subscribeButton: {
        marginBottom: 0,
    },
    agreementContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 4,
    },
})