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

const { width: screenWidth } = Dimensions.get('window')
const GALLERY_GAP = 2
const GALLERY_HORIZONTAL_PADDING = 0
const GALLERY_ITEM_SIZE = Math.floor(
    (screenWidth - GALLERY_HORIZONTAL_PADDING * 2 - GALLERY_GAP * 2) / 3
)

export function MySkeleton() {
    return (
        <View style={styles.container}>
            {/* 顶部积分与设置骨架 */}
            <View style={styles.topBar}>
                <Skeleton width={80} height={32} borderRadius={100} />
                <Skeleton width={32} height={32} borderRadius={100} />
            </View>

            {/* 个人信息区骨架 */}
            <View style={styles.profileSection}>
                <Skeleton width={64} height={64} borderRadius={32} />
                <View style={styles.profileInfo}>
                    <Skeleton width={100} height={20} borderRadius={4} style={styles.profileName} />
                    <Skeleton width={80} height={14} borderRadius={4} />
                </View>
                <Skeleton width={60} height={28} borderRadius={6} />
            </View>

            {/* 标题行骨架 */}
            <View style={styles.sectionHeader}>
                <Skeleton width={80} height={18} borderRadius={4} />
                <Skeleton width={20} height={20} borderRadius={4} />
            </View>

            {/* 作品九宫格骨架 */}
            <View style={styles.galleryGrid}>
                {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => (
                    <View
                        key={item}
                        style={[
                            styles.galleryItem,
                            item % 3 !== 2 && styles.galleryItemMarginRight,
                            styles.galleryItemMarginBottom,
                        ]}
                    >
                        <Skeleton
                            width="100%"
                            height={undefined}
                            borderRadius={0}
                            style={styles.gallerySkeleton}
                        />
                    </View>
                ))}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    topBar: {
        paddingHorizontal: GALLERY_HORIZONTAL_PADDING,
        paddingTop: 19,
        paddingRight: 16,
        backgroundColor: '#090A0B',
        flexDirection: 'row',
        justifyContent: 'flex-end',
        gap: 12,
    },
    profileSection: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 16,
        paddingRight: 16,
        marginTop: 20,
        marginBottom: 32,
        backgroundColor: '#090A0B',
        gap: 16,
    },
    profileInfo: {
        flex: 1,
        gap: 4,
    },
    profileName: {
        marginBottom: 4,
    },
    sectionHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginBottom: 12,
        marginHorizontal: 12,
        backgroundColor: '#090A0B',
    },
    galleryGrid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        marginBottom: 10,
    },
    galleryItem: {
        width: GALLERY_ITEM_SIZE,
        aspectRatio: 1,
        overflow: 'hidden',
        backgroundColor: '#1C1E22',
        position: 'relative',
    },
    gallerySkeleton: {
        width: '100%',
        height: undefined,
        aspectRatio: 1,
    },
    galleryItemMarginRight: {
        marginRight: GALLERY_GAP,
    },
    galleryItemMarginBottom: {
        marginBottom: GALLERY_GAP,
    },
})