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'

// 搜索结果数据
const searchResults = [
    {
        id: 1,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 236,
    },
    {
        id: 2,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 131,
    },
    {
        id: 3,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 236,
    },
    {
        id: 4,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 236,
    },
    {
        id: 5,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 95,
    },
    {
        id: 6,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 236,
    },
    {
        id: 7,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 228,
    },
    {
        id: 8,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 95,
    },
    {
        id: 9,
        title: '猫咪圣诞写真',
        image: require('@/assets/images/android-icon-background.png'),
        height: 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" />

            {/* Top Bar with Search */}
            <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',
    },
})