import { useState } from 'react'
import {
    View,
    Text,
    StyleSheet,
    Pressable,
    Dimensions,
    FlatList,
} from 'react-native'
import { Image } from 'expo-image'
import Drawer from '@/components/ui/drawer'
import { CloseIcon } from '@/components/icon'

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

type DrawerType = 'ai-record' | 'recent'

interface AIGenerationRecordDrawerProps {
    visible: boolean
    onClose: () => void
    onSelectImage?: (imageUri: any) => void
    type?: DrawerType
}

// 模拟 AI 生成记录图片数据
const mockAIRecordImages = Array.from({ length: 12 }, (_, i) => ({
    id: i + 1,
    uri: require('@/assets/images/android-icon-background.png'),
}))

// 模拟最近用过的图片数据
const mockRecentImages = Array.from({ length: 12 }, (_, i) => ({
    id: i + 1,
    uri: require('@/assets/images/android-icon-background.png'),
}))

export default function AIGenerationRecordDrawer({
    visible,
    onClose,
    onSelectImage,
    type = 'ai-record',
}: AIGenerationRecordDrawerProps) {
    const handleImageSelect = (imageSource: any) => {
        onSelectImage?.(imageSource)
        onClose()
    }

    const title = type === 'ai-record' ? 'AI 生成记录' : '最近用过'
    const images = type === 'ai-record' ? mockAIRecordImages : mockRecentImages

    const renderImageItem = ({ item, index }: { item: typeof mockAIRecordImages[0]; index: number }) => {
        const gap = 2
        const itemWidth = (screenWidth - gap * 2) / 3
        
        return (
            <Pressable
                style={[
                    styles.imageItem,
                    {
                        width: itemWidth,
                        marginRight: (index + 1) % 3 !== 0 ? gap : 0,
                        marginBottom: gap,
                    },
                ]}
                onPress={() => handleImageSelect(item.uri)}
            >
                <Image
                    source={item.uri}
                    style={styles.image}
                    contentFit="cover"
                />
            </Pressable>
        )
    }

    return (
        <Drawer
            visible={visible}
            onClose={onClose}
            position="bottom"
            height="98%"
            showCloseButton={false}
        >
            <View style={styles.container}>
                {/* 顶部标题栏 */}
                <View style={styles.header}>
                    <Text style={styles.title}>{title}</Text>
                    <Pressable
                        style={styles.closeButton}
                        onPress={onClose}
                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                    >
                        <CloseIcon />
                    </Pressable>
                </View>

                {/* 图片网格 */}
                <FlatList
                    data={images}
                    renderItem={renderImageItem}
                    keyExtractor={(item) => item.id.toString()}
                    numColumns={3}
                    contentContainerStyle={styles.imageGrid}
                    showsVerticalScrollIndicator={false}
                />
            </View>
        </Drawer>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#16181B',
        paddingTop: 12,
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 16,
        paddingBottom: 12,
        position: 'relative',
    },
    title: {
        color: '#F5F5F5',
        fontSize: 15,
        fontWeight: '600',
    },
    closeButton: {
        position: 'absolute',
        right: 16,
        width: 24,
        height: 24,
        alignItems: 'center',
        justifyContent: 'center',
    },
    imageGrid: {
        paddingHorizontal: 0,
        paddingBottom: 20,
    },
    imageItem: {
        aspectRatio: 1,
        overflow: 'hidden',
        backgroundColor: '#262A31',
    },
    image: {
        width: '100%',
        height: '100%',
    },
})