import React, { useState, useEffect, useRef } from 'react'
import {
    StyleSheet,
    StatusBar as RNStatusBar,
    View,
    Text,
    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 SearchBar from '@/components/SearchBar'
import WorksGallery, { type Category, type WorkItem } from '@/components/WorksGallery'
import { useWorksSearch, type WorksSearchResult } from '@/hooks/use-works-search'

/**
 * 将 API 返回的作品数据转换为 WorkItem 格式
 */
function convertToWorkItem(apiWork: WorksSearchResult): WorkItem {
    return {
        id: parseInt(apiWork.id, 10),
        date: apiWork.createdAt,
        duration: `${String(Math.floor(apiWork.duration / 60)).padStart(2, '0')}:${String(
            apiWork.duration % 60
        ).padStart(2, '0')}`,
        // TODO: 从 API 响应中获取分类信息
        category: '写真' as Category,
    }
}

/**
 * 按日期分组作品
 */
function groupWorksByDate(works: WorkItem[]): Record<string, WorkItem[]> {
    return works.reduce((acc, work) => {
        const dateKey =
            work.date instanceof Date
                ? work.date.toISOString().split('T')[0]
                : new Date(work.date).toISOString().split('T')[0]

        if (!acc[dateKey]) {
            acc[dateKey] = []
        }
        acc[dateKey].push(work)
        return acc
    }, {} as Record<string, WorkItem[]>)
}

export default function SearchWorksResultsScreen() {
    console.log('========== SearchWorksResultsScreen 组件渲染 ==========')

    const { t } = useTranslation()
    const router = useRouter()
    const params = useLocalSearchParams()
    const [searchText, setSearchText] = useState((params.q as string) || '')
    const [page, setPage] = useState(1)
    const [allWorks, setAllWorks] = useState<WorksSearchResult[]>([])
    const [isLoadingMore, setIsLoadingMore] = useState(false)

    console.log('========== 当前状态:', { searchText, page, allWorksLength: allWorks.length, isLoadingMore })

    const categories: Category[] = [
        t('worksList.all') as Category,
        t('worksList.pets') as Category,
        t('worksList.portrait') as Category,
        t('worksList.together') as Category,
    ]

    const [selectedCategory, setSelectedCategory] = useState<Category>(categories[0])

    // 使用真实的搜索接口
    const { data, works, isLoading, error } = useWorksSearch({
        keyword: searchText,
        category: selectedCategory,
        page,
        limit: 20,
    })

    // 当搜索关键词或分类变化时，重置页码和累积数据
    useEffect(() => {
        console.log('[SearchResults] 重置: searchText=', searchText, 'category=', selectedCategory)
        setPage(1)
        setAllWorks([])
    }, [searchText, selectedCategory])

    // 累积新数据
    useEffect(() => {
        console.log('[SearchResults] works变化:', {
            worksLength: works?.length,
            page,
            allWorksLength: allWorks.length,
            isLoading,
            data: data ? { total: data.total, totalPages: data.totalPages } : null
        })

        if (works) {
            if (works.length > 0) {
                if (page === 1) {
                    console.log('[SearchResults] 设置第1页数据')
                    setAllWorks(works)
                } else {
                    console.log('[SearchResults] 追加第', page, '页数据')
                    setAllWorks((prev) => [...prev, ...works])
                }
            } else if (page === 1) {
                console.log('[SearchResults] 第1页无结果,清空数据')
                setAllWorks([])
            }
            setIsLoadingMore(false)
        }
    }, [works])

    // 加载更多函数
    const handleLoadMore = () => {
        console.log('[SearchResults] handleLoadMore调用:', {
            isLoading,
            isLoadingMore,
            hasData: !!data,
            page,
            totalPages: data?.totalPages
        })

        if (isLoading || isLoadingMore || !data) {
            console.log('[SearchResults] 跳过加载: 正在加载或无数据')
            return
        }

        // 检查是否还有更多数据
        if (page >= data.totalPages) {
            console.log('[SearchResults] 跳过加载: 已到最后一页')
            return
        }

        console.log('[SearchResults] 开始加载第', page + 1, '页')
        setIsLoadingMore(true)
        setPage((prev) => prev + 1)
    }

    // 根据分类过滤结果（如果 API 不支持分类筛选，则在前端过滤）
    const filteredWorks =
        selectedCategory === categories[0]
            ? allWorks
            : allWorks.filter((work) => {
                  const convertedWork = convertToWorkItem(work)
                  return convertedWork.category === selectedCategory
              })

    // 转换为 WorkItem 格式
    const workItems: WorkItem[] = filteredWorks.map(convertToWorkItem)

    // 按日期分组
    const groupedWorks = groupWorksByDate(workItems)

    // 处理错误状态
    if (error) {
        return (
            <SafeAreaView style={styles.container} edges={['top']}>
                <StatusBar style="light" />
                <RNStatusBar barStyle="light-content" />

                <SearchBar
                    searchText={searchText}
                    onSearchTextChange={setSearchText}
                    onSearch={(text) => {
                        router.push({
                            pathname: '/searchWorksResults',
                            params: { q: text },
                        })
                    }}
                    onBack={() => router.back()}
                    placeholder={t('search.searchWorks')}
                    marginBottom={0}
                    readOnly={true}
                    onInputPress={() => {
                        router.push({
                            pathname: '/searchWorks',
                            params: { q: searchText },
                        })
                    }}
                    onClearPress={() => {
                        router.push({
                            pathname: '/searchWorks',
                            params: { q: '' },
                        })
                    }}
                />

                <View style={styles.errorContainer}>
                    <Text style={styles.errorText}>
                        {error instanceof Error ? error.message : t('search.errorOccurred')}
                    </Text>
                </View>
            </SafeAreaView>
        )
    }

    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) => {
                    router.push({
                        pathname: '/searchWorksResults',
                        params: { q: text },
                    })
                }}
                onBack={() => router.back()}
                placeholder={t('search.searchWorks')}
                marginBottom={0}
                readOnly={true}
                onInputPress={() => {
                    router.push({
                        pathname: '/searchWorks',
                        params: { q: searchText },
                    })
                }}
                onClearPress={() => {
                    router.push({
                        pathname: '/searchWorks',
                        params: { q: '' },
                    })
                }}
            />

            {/* Loading State */}
            {isLoading && (
                <View style={styles.loadingContainer}>
                    <ActivityIndicator size="large" color="#FF6699" />
                    <Text style={styles.loadingText}>{t('search.loading')}</Text>
                </View>
            )}

            {/* Empty State */}
            {!isLoading && workItems.length === 0 && searchText.trim() && (
                <View style={styles.emptyContainer}>
                    <Text style={styles.emptyText}>{t('search.noResults')}</Text>
                </View>
            )}

            {/* Results */}
            {!isLoading && workItems.length > 0 && (
                <WorksGallery
                    categories={categories}
                    selectedCategory={selectedCategory}
                    onCategoryChange={setSelectedCategory}
                    groupedWorks={groupedWorks}
                    onWorkPress={(id) => {
                        router.push({
                            pathname: '/generationRecord' as any,
                            params: { id: id.toString() },
                        })
                    }}
                    onEndReached={handleLoadMore}
                    ListFooterComponent={
                        isLoadingMore ? (
                            <View style={styles.loadingMoreContainer} testID="loading-more-indicator">
                                <ActivityIndicator size="small" color="#FF6699" />
                                <Text style={styles.loadingMoreText}>{t('search.loadingMore')}</Text>
                            </View>
                        ) : undefined
                    }
                />
            )}
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#090A0B',
    },
    loadingContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#090A0B',
    },
    loadingText: {
        color: '#F5F5F5',
        fontSize: 14,
        marginTop: 12,
    },
    errorContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#090A0B',
        paddingHorizontal: 20,
    },
    errorText: {
        color: '#FF6666',
        fontSize: 14,
        textAlign: 'center',
    },
    emptyContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#090A0B',
    },
    emptyText: {
        color: '#8A8A8A',
        fontSize: 14,
    },
    loadingMoreContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 20,
        gap: 8,
    },
    loadingMoreText: {
        color: '#F5F5F5',
        fontSize: 12,
    },
})