import {
  View,
  Text,
  FlatList,
  TextInput,
  TouchableOpacity,
  RefreshControl,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { trpc } from '@/lib/trpc'
import { useMembersFilterStore } from '@/store/members.store'
import { MemberCard } from '@/components/members/MemberCard'
import { EmptyState } from '@/components/ui/EmptyState'
import { LoadingSpinner } from '@/components/ui/LoadingSpinner'

export default function MembersScreen() {
  const router = useRouter()
  const search = useMembersFilterStore((s) => s.search)
  const nurAusbildungsbetriebe = useMembersFilterStore((s) => s.nurAusbildungsbetriebe)
  const setSearch = useMembersFilterStore((s) => s.setSearch)
  const setNurAusbildungsbetriebe = useMembersFilterStore((s) => s.setNurAusbildungsbetriebe)

  const { data, isLoading, refetch, isRefetching } = trpc.members.list.useQuery({
    search: search || undefined,
    ausbildungsbetrieb: nurAusbildungsbetriebe || undefined,
    status: 'aktiv',
  })

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

        {/* Search */}
        <View className="flex-row items-center bg-gray-100 rounded-xl px-3 py-2 mb-2">
          <Text className="text-gray-400 mr-2">🔍</Text>
          <TextInput
            className="flex-1 text-sm text-gray-900"
            placeholder="Name, Betrieb, Ort, Sparte..."
            placeholderTextColor="#9ca3af"
            value={search}
            onChangeText={setSearch}
            clearButtonMode="while-editing"
          />
        </View>

        {/* Filter: Ausbildungsbetriebe */}
        <TouchableOpacity
          onPress={() => setNurAusbildungsbetriebe(!nurAusbildungsbetriebe)}
          className="flex-row items-center gap-2 py-1"
        >
          <View
            className={`w-5 h-5 rounded border-2 items-center justify-center ${
              nurAusbildungsbetriebe
                ? 'bg-brand-500 border-brand-500'
                : 'border-gray-300 bg-white'
            }`}
          >
            {nurAusbildungsbetriebe && (
              <Text className="text-white text-xs">✓</Text>
            )}
          </View>
          <Text className="text-sm text-gray-600">Nur Ausbildungsbetriebe</Text>
        </TouchableOpacity>
      </View>

      {/* 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 }) => (
            <MemberCard
              member={item}
              onPress={() => router.push(`/(app)/members/${item.id}`)}
            />
          )}
          ListEmptyComponent={
            <EmptyState
              icon="👥"
              title="Keine Mitglieder"
              subtitle={search ? 'Keine Treffer für Ihre Suche' : 'Noch keine Mitglieder'}
            />
          }
        />
      )}
    </SafeAreaView>
  )
}