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

const { width: screenWidth } = Dimensions.get('window')

const GAP = 2
const NUM_COLUMNS = 3
const ITEM_WIDTH = (screenWidth - GAP * 2) / NUM_COLUMNS

export function AIGenerationRecordDrawerSkeleton() {
    return (
        <View style={styles.container}>
            {/* 顶部标题栏骨架 */}
            <View style={styles.header}>
                <Skeleton width={120} height={18} borderRadius={4} />
                <View style={styles.closeButton}>
                    <Skeleton width={24} height={24} borderRadius={12} />
                </View>
            </View>

            {/* 图片网格骨架 */}
            <FlatList
                data={Array.from({ length: 30 }, (_, i) => i)}
                keyExtractor={(item) => item.toString()}
                numColumns={NUM_COLUMNS}
                contentContainerStyle={styles.imageGrid}
                renderItem={({ index }) => {
                    const isLastInRow = (index + 1) % NUM_COLUMNS === 0

                    return (
                        <View
                            style={[
                                styles.imageItem,
                                {
                                    width: ITEM_WIDTH,
                                    marginRight: isLastInRow ? 0 : GAP,
                                    marginBottom: GAP,
                                },
                            ]}
                        >
                            <Skeleton width="100%" height="100%" borderRadius={0} />
                        </View>
                    )
                }}
                showsVerticalScrollIndicator={false}
            />
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#16181B',
        paddingTop: 12,
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 16,
        paddingBottom: 12,
        position: 'relative',
    },
    closeButton: {
        position: 'absolute',
        right: 16,
        width: 24,
        height: 24,
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 10,
    },
    imageGrid: {
        paddingHorizontal: 0,
        paddingBottom: Platform.OS === 'ios' ? 20 : 16,
    },
    imageItem: {
        // aspectRatio = width / height
        // 1 : 1.3 (width : height) => 1 / 1.3
        aspectRatio: 1 / 1.3,
        overflow: 'hidden',
        backgroundColor: '#262A31',
    },
})