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

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

export function SearchWorksResultsSkeleton() {
    return (
        <View style={styles.container}>
            {/* 分类标签骨架 */}
            <View style={styles.categoryContainer}>
                {[1, 2, 3, 4].map((item) => (
                    <Skeleton
                        key={item}
                        width={50}
                        height={30}
                        borderRadius={8}
                        style={styles.categoryTag}
                    />
                ))}
            </View>

            {/* 作品列表骨架 */}
            <View style={styles.scrollContent}>
                {[1, 2].map((dateIndex) => (
                    <View key={dateIndex}>
                        <Skeleton width={100} height={14} borderRadius={4} style={styles.dateText} />
                        <View style={styles.galleryGrid}>
                            {[1, 2, 3, 4, 5, 6].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>
                ))}
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    categoryContainer: {
        flexDirection: 'row',
        paddingHorizontal: 14,
        paddingVertical: 16,
        gap: 8,
    },
    categoryTag: {
        marginBottom: 0,
    },
    scrollContent: {
        paddingBottom: 20,
    },
    dateText: {
        marginBottom: 8,
        paddingLeft: 14,
    },
    galleryGrid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
    },
    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,
    },
})