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

import { LeftArrowIcon } from '@/components/icon'
import SearchResultsGrid from '@/components/SearchResultsGrid'

// 模板详情数据 - 根据实际需求可以改为从 API 获取
const templateDetailData = [
    {
        id: 1,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 214,
    },
    {
        id: 2,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 236,
    },
    {
        id: 3,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/favicon.png'),
        height: 214,
    },
    {
        id: 4,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/icon.png'),
        height: 200,
    },
    {
        id: 5,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 220,
    },
    {
        id: 6,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 214,
    },
]

export default function TemplateDetailScreen() {
    const { t } = useTranslation()
    const router = useRouter()
    return (
        <SafeAreaView style={styles.container} edges={['top']}>
            <StatusBar style="light" />
            <RNStatusBar barStyle="light-content" />
            
            {/* 顶部导航栏 */}
            <View style={styles.header}>
                <Pressable
                    onPress={() => router.back()}
                    style={styles.backButton}
                >
                    <LeftArrowIcon />
                </Pressable>
            </View>

            {/* 标题区域 */}
            <View style={styles.titleSection}>
                <Text style={styles.mainTitle}>
                    {t('templateDetail.title')}
                </Text>
                <Text style={styles.subTitle}>
                    {t('templateDetail.subtitle')}
                </Text>
            </View>

            {/* 图片网格 */}
            <SearchResultsGrid results={templateDetailData} />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    header: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingTop: 12,
        paddingHorizontal: 12,
        paddingBottom: 24,
    },
    backButton: {
        padding: 4,
    },
    titleSection: {
        paddingHorizontal: 12,
        paddingBottom: 24,
    },
    mainTitle: {
        color: '#F5F5F5',
        fontSize: 20,
        fontWeight: '500',
        marginBottom: 4,
    },
    subTitle: {
        color: '#ABABAB',
        fontSize: 14,
        fontWeight: '400',
    },
})