/**
 * Public Lehrlingsbörse — accessible without login
 * Can be embedded in a WebView or shared as a link
 */
import {
  View,
  Text,
  FlatList,
  RefreshControl,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { trpc } from '@/lib/trpc'
import { StelleCard } from '@/components/stellen/StelleCard'
import { EmptyState } from '@/components/ui/EmptyState'
import { LoadingSpinner } from '@/components/ui/LoadingSpinner'

export default function StellenPublicScreen() {
  const router = useRouter()
  const { data, isLoading, refetch, isRefetching } = trpc.stellen.listPublic.useQuery({})

  return (
    <SafeAreaView className="flex-1 bg-gray-50">
      <View className="bg-brand-500 px-4 py-4">
        <Text className="text-white text-xl font-bold">Lehrlingsbörse</Text>
        <Text className="text-white/80 text-sm mt-0.5">
          Aktuelle Ausbildungsplätze
        </Text>
      </View>

      {isLoading ? (
        <LoadingSpinner />
      ) : (
        <FlatList
          data={data ?? []}
          keyExtractor={(item) => item.id}
          contentContainerStyle={{ padding: 12, gap: 8 }}
          initialNumToRender={10}
          maxToRenderPerBatch={10}
          windowSize={5}
          refreshControl={
            <RefreshControl
              refreshing={isRefetching}
              onRefresh={refetch}
              tintColor="#E63946"
              progressViewOffset={50}
            />
          }
          renderItem={({ item }) => (
            <StelleCard
              stelle={item}
              onPress={() => router.push(`/(app)/stellen/${item.id}`)}
            />
          )}
          ListEmptyComponent={
            <EmptyState
              icon="🎓"
              title="Keine Angebote"
              subtitle="Aktuell sind keine Ausbildungsplätze verfügbar"
            />
          }
        />
      )}
    </SafeAreaView>
  )
}