import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  RefreshControl,
  ScrollView,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useState } from 'react'
import { trpc } from '@/lib/trpc'
import { useRouter } from 'expo-router'
import { NewsCard } from '@/components/news/NewsCard'
import { EmptyState } from '@/components/ui/EmptyState'
import { LoadingSpinner } from '@/components/ui/LoadingSpinner'
import { NEWS_KATEGORIE_LABELS } from '@innungsapp/shared'

const FILTER_OPTIONS = [
  { value: undefined, label: 'Alle' },
  { value: 'Wichtig', label: 'Wichtig' },
  { value: 'Pruefung', label: 'Prüfung' },
  { value: 'Foerderung', label: 'Förderung' },
  { value: 'Veranstaltung', label: 'Veranstaltung' },
]

export default function NewsScreen() {
  const router = useRouter()
  const [kategorie, setKategorie] = useState<string | undefined>(undefined)
  const { data, isLoading, refetch, isRefetching } = trpc.news.list.useQuery({
    kategorie: kategorie as never,
  })

  return (
    <SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
      {/* Header */}
      <View className="bg-white px-4 py-3 border-b border-gray-100">
        <Text className="text-xl font-bold text-gray-900">News</Text>
      </View>

      {/* Kategorie Filter */}
      <ScrollView
        horizontal
        showsHorizontalScrollIndicator={false}
        className="bg-white border-b border-gray-100"
        contentContainerStyle={{ paddingHorizontal: 12, paddingVertical: 10, gap: 8 }}
      >
        {FILTER_OPTIONS.map((opt) => (
          <TouchableOpacity
            key={String(opt.value)}
            onPress={() => setKategorie(opt.value)}
            className={`px-4 py-1.5 rounded-full border ${
              kategorie === opt.value
                ? 'bg-brand-500 border-brand-500'
                : 'bg-white border-gray-200'
            }`}
          >
            <Text
              className={`text-sm font-medium ${
                kategorie === opt.value ? 'text-white' : 'text-gray-600'
              }`}
            >
              {opt.label}
            </Text>
          </TouchableOpacity>
        ))}
      </ScrollView>

      {/* List */}
      {isLoading ? (
        <LoadingSpinner />
      ) : (
        <FlatList
          data={data ?? []}
          keyExtractor={(item) => item.id}
          contentContainerStyle={{ padding: 12, gap: 8 }}
          refreshControl={
            <RefreshControl
              refreshing={isRefetching}
              onRefresh={refetch}
              tintColor="#E63946"
            />
          }
          renderItem={({ item }) => (
            <NewsCard
              news={item}
              onPress={() => router.push(`/(app)/news/${item.id}`)}
            />
          )}
          ListEmptyComponent={
            <EmptyState
              icon="📰"
              title="Keine News"
              subtitle="Noch keine Beiträge für diese Kategorie"
            />
          }
        />
      )}
    </SafeAreaView>
  )
}