import {
    View,
    Text,
    StyleSheet,
    ScrollView,
    Dimensions,
    Pressable,
    StatusBar as RNStatusBar,
} from 'react-native'
import { StatusBar } from 'expo-status-bar'
import { SafeAreaView } from 'react-native-safe-area-context'
import { Image } from 'expo-image'
import { useRouter, useLocalSearchParams } from 'expo-router'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'

import { LeftArrowIcon, DeleteIcon, EditIcon, ChangeIcon, WhiteStarIcon } from '@/components/icon'
import { DeleteConfirmDialog } from '@/components/ui/delete-confirm-dialog'

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

export default function GenerationRecordScreen() {
    const { t } = useTranslation()
    const router = useRouter()
    const params = useLocalSearchParams()
    const workId = params.id as string
    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)

    const handleDelete = () => {
        // TODO: 实现删除逻辑
        console.log('删除记录:', workId)
    }

    return (
        <SafeAreaView style={styles.container} edges={['top']}>
            <StatusBar style="light" />
            <RNStatusBar barStyle="light-content" />
            <ScrollView
                style={styles.scrollView}
                contentContainerStyle={styles.scrollContent}
                showsVerticalScrollIndicator={false}
            >
                {/* 顶部导航栏 */}
                <View style={styles.header}>
                    <Pressable
                        style={styles.backButton}
                        onPress={() => router.back()}
                    >
                        <LeftArrowIcon />
                    </Pressable>
                    <Text style={styles.headerTitle}>{t('generationRecord.title')}</Text>
                    <View style={styles.headerSpacer} />
                </View>

                {/* AI 视频标签 */}
                <View style={styles.categorySection}>
                    <View style={styles.categoryIcon}>
                        <WhiteStarIcon />
                    </View>
                    <Text style={styles.categoryText}>{t('generationRecord.aiVideo')}</Text>
                </View>

                {/* 原图标签 */}
                <View style={styles.originalImageSection}>
                    <Text style={styles.originalImageLabel}>{t('generationRecord.originalImage')}</Text>
                    <View style={styles.originalImageDivider} />
                </View>

                {/* 主图片/视频预览区域 */}
                <View style={styles.imageContainer}>
                    <Image
                        source={require('@/assets/images/android-icon-background.png')}
                        style={styles.mainImage}
                        contentFit="cover"
                    />
                    {/* 视频时长显示 */}
                   
                       
                </View>
                <Text style={styles.durationText}>00:03</Text>
                {/* 底部操作按钮 */}
                <View style={styles.actionButtons}>
                    <Pressable style={styles.actionButton}   onPress={() => {
                        router.push({
                                pathname: '/generateVideo' as any,
                                params: {
                                    template: JSON.stringify({
                                        id: 1,
                                        title: 'AI 视频',
                                        image: require('@/assets/images/android-icon-background.png'),
                                        users: 6349,
                                        height: 214,
                                    }),
                                },
                            })
                        }}>
                        <EditIcon />
                        <Text style={styles.actionButtonText}>{t('generationRecord.reEdit')}</Text>
                    </Pressable>
                    <Pressable style={styles.actionButton}>
                        <ChangeIcon />
                        <Text style={styles.actionButtonText}>{t('generationRecord.regenerate')}</Text>
                    </Pressable>
                    <Pressable 
                        style={styles.deleteButton}
                        onPress={() => setDeleteDialogOpen(true)}
                    >
                        <DeleteIcon />
                    </Pressable>
                </View>
            </ScrollView>

            {/* 删除确认弹窗 */}
            <DeleteConfirmDialog
                open={deleteDialogOpen}
                onOpenChange={setDeleteDialogOpen}
                onConfirm={handleDelete}
            />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    scrollView: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    scrollContent: {
        backgroundColor: '#090A0B',
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 12,
        paddingTop: 16,
        paddingBottom: 20,
    },
    backButton: {
        width: 22,
        height: 22,
        alignItems: 'center',
        justifyContent: 'center',
    },
    headerTitle: {
        color: '#F5F5F5',
        fontSize: 14,
        fontWeight: '600',
        flex: 1,
        textAlign: 'center',
    },
    headerSpacer: {
        width: 22,
    },
    categorySection: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 16,
        marginBottom: 8,
        gap:4,
    },
    categoryIcon: {
        width: 16,
        height: 16,
        alignItems: 'center',
        justifyContent: 'center',
    },
    categoryText: {
        color: '#F5F5F5',
        fontSize: 14,
        fontWeight: '600',
    },
    originalImageSection: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 16,
        marginBottom: 8,
    },
    originalImageLabel: {
        color: '#8A8A8A',
        fontSize: 13,
        marginRight: 6,
    },
    originalImageDivider: {
        width: 1,
        height: 12,
        backgroundColor: '#FFFFFF33',
    },
    imageContainer: {
        width: screenWidth - 24,
        height: (screenWidth - 24) * 1.32, // 根据设计稿比例计算
        marginHorizontal: 12,
        marginBottom: 14,
        borderRadius: 16,
        overflow: 'hidden',
        backgroundColor: '#1C1E22',
        position: 'relative',
    },
    mainImage: {
        width: '100%',
        height: '100%',
    },
    durationText: {
        paddingLeft: 28,
        color: '#F5F5F5',
        fontSize: 13,
        marginBottom: 22,
        fontWeight: '500',
    },
    actionButtons: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 12,
        gap: 8,
    },
    actionButton: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingHorizontal: 8,
        paddingVertical: 6,
        borderRadius: 8,
        backgroundColor: '#1C1E22',
        height: 32,
    },
    actionButtonText: {
        color: '#F5F5F5',
        fontSize: 11,
        fontWeight: '500',
    },
    deleteButton: {
        width: 32,
        height: 32,
        borderRadius: 8,
        backgroundColor: '#1C1E22',
        alignItems: 'center',
        justifyContent: 'center',
        marginLeft: 'auto',
    },
})