import { useState } from 'react'
import {
    View,
    StyleSheet,
    StatusBar as RNStatusBar,
} from 'react-native'
import { StatusBar } from 'expo-status-bar'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter, useLocalSearchParams } from 'expo-router'

import SearchResultsGrid from '@/components/SearchResultsGrid'
import SearchBar from '@/components/SearchBar'
import type { TemplateGeneration } from '@/hooks'

const createMockResult = (id: string, height: number): TemplateGeneration & { height: number; title: string; image: any } => ({
    id,
    userId: 'test',
    templateId: `template-${id}`,
    type: 'VIDEO',
    resultUrl: [],
    status: 'completed',
    createdAt: new Date(),
    updatedAt: new Date(),
    title: '猫咪圣诞写真',
    image: require('@/assets/images/android-icon-background.png'),
    height,
    template: {
        id: `template-${id}`,
        title: '猫咪圣诞写真',
        titleEn: 'Cat Christmas',
        coverImageUrl: '',
    },
})

const searchResults = [
    createMockResult('1', 236),
    createMockResult('2', 131),
    createMockResult('3', 236),
    createMockResult('4', 236),
    createMockResult('5', 95),
    createMockResult('6', 236),
    createMockResult('7', 228),
    createMockResult('8', 95),
    createMockResult('9', 228),
]

export default function SearchResultsScreen() {
    const router = useRouter()
    const params = useLocalSearchParams()
    const [searchText, setSearchText] = useState((params.q as string) || '')

    return (
        <SafeAreaView style={styles.container} edges={['top']}>
            <StatusBar style="light" />
            <RNStatusBar barStyle="light-content" />

            <SearchBar
                searchText={searchText}
                onSearchTextChange={setSearchText}
                onSearch={(text) => {}}
                onBack={() => router.back()}
                readOnly={true}
                onInputPress={() => {
                    router.push({
                        pathname: '/searchTemplate',
                        params: { q: searchText, focus: 'true' },
                    })
                }}
                onClearPress={() => {
                    router.push({
                        pathname: '/searchTemplate',
                        params: { q: '', focus: 'true' },
                    })
                }}
                marginBottom={12}
            />

            <SearchResultsGrid results={searchResults} />
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
})