import { View, Text, FlatList, RefreshControl, StyleSheet } from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useRouter } from 'expo-router'
import { useStellenListe } from '@/hooks/useStellen'
import { StelleCard } from '@/components/stellen/StelleCard'
import { EmptyState } from '@/components/ui/EmptyState'
import { LoadingSpinner } from '@/components/ui/LoadingSpinner'

export default function StellenScreen() {
  const router = useRouter()
  const { data, isLoading, refetch, isRefetching } = useStellenListe()

  const totalStellen = data?.reduce((sum, s) => sum + s.stellenAnz, 0) ?? 0

  return (
    <SafeAreaView style={styles.safeArea} edges={['top']}>
      {/* Header */}
      <View style={styles.header}>
        <View style={styles.titleRow}>
          <View style={styles.titleBlock}>
            <Text style={styles.screenTitle}>Lehrlingsbörse</Text>
            <Text style={styles.subtitle}>Ausbildungsplätze in deiner Innung</Text>
          </View>

          {/* Counter */}
          {totalStellen > 0 && (
            <View style={styles.counter}>
              <Text style={styles.counterNumber}>{totalStellen}</Text>
              <Text style={styles.counterLabel}>Stellen</Text>
            </View>
          )}
        </View>
      </View>

      <View style={styles.divider} />

      {isLoading ? (
        <LoadingSpinner />
      ) : (
        <FlatList
          data={data ?? []}
          keyExtractor={(item) => item.id}
          contentContainerStyle={styles.list}
          refreshControl={
            <RefreshControl refreshing={isRefetching} onRefresh={refetch} tintColor="#003B7E" />
          }
          renderItem={({ item }) => (
            <StelleCard
              stelle={item}
              onPress={() => router.push(`/(app)/stellen/${item.id}` as never)}
            />
          )}
          ListEmptyComponent={
            <EmptyState
              icon="school-outline"
              title="Keine Angebote"
              subtitle="Aktuell keine Ausbildungsplätze verfügbar"
            />
          }
        />
      )}
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: '#F8FAFC',
  },
  header: {
    backgroundColor: '#FFFFFF',
    paddingHorizontal: 20,
    paddingTop: 18,
    paddingBottom: 16,
  },
  titleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  titleBlock: {
    flex: 1,
  },
  screenTitle: {
    fontSize: 26,
    fontWeight: '800',
    color: '#0F172A',
    letterSpacing: -0.5,
  },
  subtitle: {
    fontSize: 13,
    color: '#64748B',
    marginTop: 2,
  },
  counter: {
    backgroundColor: '#003B7E',
    borderRadius: 14,
    paddingHorizontal: 14,
    paddingVertical: 8,
    alignItems: 'center',
    minWidth: 56,
    shadowColor: '#003B7E',
    shadowOffset: { width: 0, height: 3 },
    shadowOpacity: 0.25,
    shadowRadius: 8,
    elevation: 4,
  },
  counterNumber: {
    color: '#FFFFFF',
    fontSize: 22,
    fontWeight: '800',
    lineHeight: 24,
  },
  counterLabel: {
    color: 'rgba(255,255,255,0.75)',
    fontSize: 9,
    fontWeight: '600',
    letterSpacing: 0.5,
  },
  divider: {
    height: 1,
    backgroundColor: '#E2E8F0',
  },
  list: {
    padding: 16,
    gap: 10,
  },
})