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

import { DeleteIcon, ChangeIcon, Close1Icon } from '@/components/icon'
import SearchBar from '@/components/SearchBar'
import { useSearchHistory, useTags } from '@/hooks'

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

export default function SearchTemplateScreen() {
    const { t } = useTranslation()
    const router = useRouter()
    const params = useLocalSearchParams()
    const [searchText, setSearchText] = useState('')
    const [isDeleteMode, setIsDeleteMode] = useState(false)
    const inputRef = useRef<TextInput>(null)
    const isNavigatingRef = useRef(false)

    // 使用搜索历史 hook
    const { history: searchHistory, addToHistory, removeFromHistory, clearHistory, isLoading: historyLoading } = useSearchHistory()

    // 使用推荐标签 hook
    const { load: loadTags, data: tagsData, loading: tagsLoading } = useTags()

    useEffect(() => {
        // 加载推荐标签
        loadTags({ page: 1, limit: 20, orderBy: 'sortOrder', order: 'desc' })
    }, [])

    // 当从搜索结果页面返回时，更新搜索文本
    useEffect(() => {
        if (params.q && typeof params.q === 'string') {
            setSearchText(params.q)
            // 将搜索关键词添加到历史记录
            addToHistory(params.q)
        }
    }, [params.q, addToHistory])

    // 推荐标签数据
    const recommendedTags = tagsData?.tags?.map(tag => tag.name) || []

    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) => {
                    // 执行搜索时，添加到历史记录
                    addToHistory(text)
                    router.push({
                        pathname: '/searchResults',
                        params: { q: text },
                    })
                }}
                onBack={() => router.push('/(tabs)')}
                inputRef={inputRef}
                autoFocus={params.focus === 'true'}
            />
            {/* 搜索历史和推荐标签 */}
            <ScrollView
                style={styles.scrollView}
                showsVerticalScrollIndicator={false}
            >
                {/* 搜索历史 */}
                {!historyLoading && searchHistory.length > 0 && (
                    <View style={styles.historySection}>
                        <View style={styles.historyHeader}>
                            <Text style={styles.sectionTitle}>{t('search.history')}</Text>
                            {isDeleteMode ? (
                                <View style={styles.deleteActions}>
                                    <Pressable
                                        onPress={() => {
                                            clearHistory()
                                            setIsDeleteMode(false)
                                        }}
                                    >
                                        <Text style={styles.deleteActionText}>{t('search.clearAll')}</Text>
                                    </Pressable>
                                    <View style={styles.deleteActionSeparator} />
                                    <Pressable
                                        onPress={() => setIsDeleteMode(false)}
                                    >
                                        <Text style={styles.deleteActionText}>{t('search.done')}</Text>
                                    </Pressable>
                                </View>
                            ) : (
                                <Pressable
                                    onPress={() => setIsDeleteMode(true)}
                                >
                                    <DeleteIcon />
                                </Pressable>
                            )}
                        </View>
                        <View style={styles.historyTags}>
                            {searchHistory.map((item, index) => (
                                <View
                                    key={index}
                                    style={styles.historyTagContainer}
                                >
                                    <Pressable
                                        style={styles.historyTag}
                                        onPress={() => {
                                            if (!isDeleteMode && !isNavigatingRef.current) {
                                                isNavigatingRef.current = true
                                                requestAnimationFrame(() => {
                                                    router.push({
                                                        pathname: '/searchResults',
                                                        params: { q: item },
                                                    })
                                                    setTimeout(() => {
                                                        isNavigatingRef.current = false
                                                    }, 500)
                                                })
                                            }
                                        }}
                                    >
                                        <Text style={styles.historyTagText}>{item}</Text>
                                        {isDeleteMode && (
                                        <Pressable
                                            style={styles.historyTagDeleteButton}
                                            onPress={() => {
                                                removeFromHistory(item)
                                            }}
                                        >
                                            <Close1Icon />
                                        </Pressable>
                                        )}
                                    </Pressable>
                                </View>
                            ))}
                        </View>
                    </View>
                )}

                {/* 探索更多 - 推荐标签 */}
                <View>
                    <View style={styles.exploreHeader}>
                        <Text style={styles.sectionTitle}>{t('search.exploreMore')}</Text>
                        <Pressable
                            style={styles.refreshButton}
                            onPress={() => loadTags({ page: 1, limit: 20, orderBy: 'sortOrder', order: 'desc' })}
                        >
                            <ChangeIcon />
                            <Text style={styles.refreshButtonText}>{t('search.refresh')}</Text>
                        </Pressable>
                    </View>
                    {tagsLoading ? (
                        <View style={styles.loadingContainer}>
                            <ActivityIndicator size="small" color="#FF6699" />
                        </View>
                    ) : recommendedTags.length > 0 ? (
                        <View style={styles.exploreTags}>
                            {recommendedTags.map((item, index) => (
                                <Pressable
                                    key={index}
                                    style={styles.exploreTag}
                                    onPress={() => {
                                        if (!isNavigatingRef.current) {
                                            isNavigatingRef.current = true
                                            requestAnimationFrame(() => {
                                                addToHistory(item)
                                                router.push({
                                                    pathname: '/searchResults',
                                                    params: { q: item },
                                                })
                                                setTimeout(() => {
                                                    isNavigatingRef.current = false
                                                }, 500)
                                            })
                                        }
                                    }}
                                >
                                    <Text style={styles.exploreTagText}>{item}</Text>
                                </Pressable>
                            ))}
                        </View>
                    ) : (
                        <View style={styles.emptyContainer}>
                            <Text style={styles.emptyText}>{t('search.noTags') || '暂无推荐标签'}</Text>
                        </View>
                    )}
                </View>
            </ScrollView>
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    scrollView: {
        flex: 1,
        paddingHorizontal: 12,
    },
    historySection: {
        paddingBottom:32,
    },
    historyHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
    sectionTitle: {
        color: '#F5F5F5',
        fontSize: 14,
        fontWeight: '500',
        lineHeight: 20,
    },
    historyTags: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 4,
        marginTop: 16,
    },
    historyTagContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 4,
    },
    historyTag: {
        backgroundColor: '#191B1F',
        borderRadius: 100,
        paddingHorizontal: 11,
        paddingVertical: 6,
        borderWidth: 1,
        borderColor: '#191B1F',
        height: 29,
        justifyContent: 'center',
        flexDirection: 'row',
        alignItems: 'center',
        gap: 4,
    },
    historyTagText: {
        color: '#F5F5F5',
        fontSize: 12,
    },
    historyTagDeleteButton: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    deleteActions: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    deleteActionText: {
        color: '#ABABAB',
        fontSize: 14,
        fontWeight: '400',
    },
    deleteActionSeparator: {
        width: 1,
        height: 14,
        backgroundColor: '#ABABAB',
        marginHorizontal: 12,
    },
    exploreHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginBottom: 16,
    },
    refreshButton: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 1,
        paddingVertical: 4,
    },
    refreshButtonText: {
        color: '#8A8A8A',
        fontSize: 12,
        fontWeight: '400',
    },
    loadingContainer: {
        paddingVertical: 24,
        alignItems: 'center',
        justifyContent: 'center',
    },
    emptyContainer: {
        paddingVertical: 40,
        alignItems: 'center',
        justifyContent: 'center',
    },
    emptyText: {
        color: '#ABABAB',
        fontSize: 14,
    },
    exploreTags: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 8,
    },
    exploreTag: {
        width: (screenWidth - 24 - 8) / 2, // 屏幕宽度 - 左右padding(12*2) - gap(8) 除以2
        justifyContent: 'center',
        paddingVertical: 2,
    },
    exploreTagText: {
        color: '#F5F5F5',
        fontSize: 14,
        fontWeight: '400',
    },
})