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

import { TopArrowIcon } from '@/components/icon'
import { useCategories } from '@/hooks/data/use-categories'

export default function ChannelsScreen() {
    const router = useRouter()
    const [isExpanded, setIsExpanded] = useState(true)
    const [selectedChannel, setSelectedChannel] = useState<string>('')

    const { load, loading, data } = useCategories()

    useEffect(() => {
        load({ isActive: true })
    }, [])

    return (
        <View style={styles.screen}>
            <StatusBar style="light" />
            <RNStatusBar barStyle="light-content" />
            
            {/* 顶部容器 - 包含 header 和频道选择区域，带底部圆角 */}
            <View style={styles.topContainer}>
                <SafeAreaView style={styles.safeArea} edges={['top']}>
                    {/* 标题栏 */}
                    <View style={styles.header}>
                        <Text style={styles.headerTitle}>全部频道</Text>
                        <Pressable
                            onPress={() => {
                                if (isExpanded) {
                                    router.push('/')
                                } else {
                                    setIsExpanded(true)
                                }
                            }}
                        >
                            <TopArrowIcon />
                        </Pressable>
                    </View>

                    {/* 频道选择区域 */}
                    {isExpanded && (
                        <View style={styles.channelsSection}>
                            {loading ? (
                                <View style={styles.loadingContainer}>
                                    <ActivityIndicator size="small" color="#F5F5F5" />
                                </View>
                            ) : (
                                <View style={styles.channelsGrid}>
                                    {data?.categories.map((category) => (
                                        <Pressable
                                            key={category.id}
                                            onPress={() => setSelectedChannel(category.id)}
                                        >
                                            <View style={[
                                                styles.channelButtonDefault,
                                                selectedChannel === category.id && styles.channelButtonSelected
                                            ]}>
                                                <Text style={styles.channelButtonText}>
                                                    {category.name}
                                                </Text>
                                            </View>
                                        </Pressable>
                                    ))}
                                </View>
                            )}
                        </View>
                    )}
                </SafeAreaView>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        backgroundColor: '#0A0A0A',
    },
    topContainer: {
        backgroundColor: '#16181B',
        borderBottomLeftRadius: 16,
        borderBottomRightRadius: 16,
        overflow: 'hidden',
    },
    safeArea: {
        backgroundColor: '#16181B',
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 16,
        paddingTop: 27,
        paddingBottom: 12,
    },
    headerTitle: {
        color: '#F5F5F5',
        fontSize: 12,
        fontWeight: '500',
    },
    channelsSection: {
        paddingHorizontal: 12,
        paddingBottom: 12,
    },
    channelsGrid: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        gap: 8,
    },
    channelButtonDefault: {
        backgroundColor: '#262A31',
        borderRadius: 100,
        paddingVertical: 8,
        paddingHorizontal: 17,
        borderWidth: 1,
        borderColor: '#262A31',
    },
    channelButtonSelected: {
        backgroundColor: '#FF6B35',
        borderColor: '#FF6B35',
    },
    channelButtonText: {
        color: '#F5F5F5',
        fontSize: 12,
        fontWeight: '500',
        textAlign: 'center',
    },
    loadingContainer: {
        paddingVertical: 20,
        alignItems: 'center',
    },
})