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, DownArrowIcon } from '@/components/icon'
import AIGenerationRecordDrawer from './AIGenerationRecordDrawer'

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

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

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

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

export default function UploadReferenceImageDrawer({
    visible,
    onClose,
    onSelectImage,
}: UploadReferenceImageDrawerProps) {
    const [activeTab, setActiveTab] = useState<TabType>('ai-record')
    const [selectedFilter, setSelectedFilter] = useState<'all' | 'face'>('all')
    const [aiRecordDrawerVisible, setAiRecordDrawerVisible] = useState(false)

    const handleImageSelect = (imageSource: any) => {
        onSelectImage?.(imageSource)
        onClose()
    }

    const renderImageItem = ({ item, index }: { item: typeof mockImages[0]; index: number }) => {
        const paddingHorizontal = 0
        const gap = 2
        const itemWidth = (screenWidth - paddingHorizontal * 2 - gap * 2) / 3
        const isLastRow = index >= Math.floor(mockImages.length / 3) * 3
        
        return (
            <Pressable
                style={[
                    styles.imageItem,
                    {
                        width: itemWidth,
                        marginRight: (index + 1) % 3 !== 0 ? gap : 0,
                        marginBottom: isLastRow ? 0 : 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}>
                    <View >
                        <Text style={styles.title}>选择图片</Text>
                        <Text style={styles.title}>生成 AI 视频</Text>
                    </View>
                    <Pressable
                        style={styles.closeButton}
                        onPress={onClose}
                        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
                    >
                        <CloseIcon />
                    </Pressable>
                </View>

                {/* 标签切换 */}
                <View style={styles.tabContainer}>
                    <Pressable
                        style={[styles.tab, activeTab === 'ai-record' && styles.tabActive]}
                        onPress={() => {
                            setActiveTab('ai-record')
                            setAiRecordDrawerVisible(true)
                        }}
                    >
                        <View style={styles.tabIconContainer}>
                            <View style={styles.tabIcon} />
                        </View>
                        <Text style={[styles.tabText, activeTab === 'ai-record' && styles.tabTextActive]}>
                            AI 生成记录
                        </Text>
                    </Pressable>
                    <Pressable
                        style={[styles.tab, activeTab === 'recent' && styles.tabActive]}
                        onPress={() => {
                            setActiveTab('recent')
                            setAiRecordDrawerVisible(true)
                        }}
                    >
                        <View style={styles.tabIconContainer}>
                            <View style={styles.tabIconSmall} />
                        </View>
                        <Text style={[styles.tabText, activeTab === 'recent' && styles.tabTextActive]}>
                            最近用过
                        </Text>
                    </Pressable>
                </View>

                {/* 筛选区域 */}
                <View style={styles.filterContainer}>
                    <Pressable
                        style={styles.categoryButton}
                        onPress={() => {
                            // 可以展开分类选择
                        }}
                    >
                        <Text style={styles.categoryText}>最近项目</Text>
                        <DownArrowIcon />
                    </Pressable>
                    <View style={styles.filterButtons}>
                        <Pressable
                            style={[
                                styles.filterButton,
                                selectedFilter === 'all' && styles.filterButtonActive,
                            ]}
                            onPress={() => setSelectedFilter('all')}
                        >
                            <Text
                                style={[
                                    styles.filterButtonText,
                                    selectedFilter === 'all' && styles.filterButtonTextActive,
                                ]}
                            >
                                全部
                            </Text>
                        </Pressable>
                        <Pressable
                            style={[
                                styles.filterButton,
                                selectedFilter === 'face' && styles.filterButtonActive,
                            ]}
                            onPress={() => setSelectedFilter('face')}
                        >
                            <Text
                                style={[
                                    styles.filterButtonText,
                                    selectedFilter === 'face' && styles.filterButtonTextActive,
                                ]}
                            >
                                人脸
                            </Text>
                        </Pressable>
                    </View>
                </View>

                {/* 图片网格 */}
                <FlatList
                    data={mockImages}
                    renderItem={renderImageItem}
                    keyExtractor={(item) => item.id.toString()}
                    numColumns={3}
                    // contentContainerStyle={styles.imageGrid}
                    showsVerticalScrollIndicator={false}
                />
            </View>
            <AIGenerationRecordDrawer
                visible={aiRecordDrawerVisible}
                onClose={() => setAiRecordDrawerVisible(false)}
                onSelectImage={(imageUri) => {
                    handleImageSelect(imageUri)
                }}
                type={activeTab}
            />
        </Drawer>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#16181B',
        paddingTop: 24,
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        paddingBottom: 20,
    },
    title: {
        color: '#F5F5F5',
        fontSize: 20,
        fontWeight: '600',
    },
    closeButton: {
        width: 24,
        height: 24,
        alignItems: 'center',
        justifyContent: 'center',
    },
    tabContainer: {
        flexDirection: 'row',
        paddingHorizontal: 16,
        gap: 8,
        marginBottom: 24,
    },
    tab: {
        flex: 1,
        height: 52,
        backgroundColor: '#272A30',
        borderRadius: 12,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 4,
    },
    tabActive: {
        backgroundColor: '#262A31',
    },
    tabIconContainer: {
        width: 28,
        height: 28,
        alignItems: 'center',
        justifyContent: 'center',
    },
    tabIcon: {
        width: 27,
        height: 27,
        borderRadius: 6,
        backgroundColor: '#4A4C4F',
    },
    tabIconSmall: {
        width: 26,
        height: 26,
        borderRadius: 6,
        backgroundColor: '#4A4C4F',
    },
    tabText: {
        color: '#F5F5F5',
        fontSize: 12,
        fontWeight: '600',
    },
    tabTextActive: {
        color: '#F5F5F5',
    },
    filterContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 16,
        marginBottom: 9,
    },
    categoryButton: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 8,
    },
    categoryText: {
        color: '#F5F5F5',
        fontSize: 14,
        fontWeight: '600',
    },
    filterButtons: {
        flexDirection: 'row',
        alignItems: 'center',
        backgroundColor: '#1C1E22',
        borderRadius: 100,
        height: 32,
        padding: 3,
    },
    filterButton: {
        paddingHorizontal: 12,
        paddingVertical: 4,
        minWidth: 48,

        alignItems: 'center',
        justifyContent: 'center',
    },
    filterButtonActive: {
        backgroundColor: '#F5F5F5',
        height: 24,
        borderRadius: 100,
    },
    filterButtonText: {
        color: '#CCCCCC',
        fontSize: 12,
    },
    filterButtonTextActive: {
        color: '#000000',
    },
    // imageGrid: {
    //     // paddingHorizontal: 16,
    //     // paddingBottom: 20,
    // },
    imageItem: {
        aspectRatio: 1,
        overflow: 'hidden',
        backgroundColor: '#262A31',
    },
    image: {
        width: '100%',
        height: '100%',
    },
})