import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Linking,
  ActivityIndicator,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { useLocalSearchParams, useRouter } from 'expo-router'
import { trpc } from '@/lib/trpc'

export default function StelleDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>()
  const router = useRouter()
  const { data: stelle, isLoading } = trpc.stellen.byId.useQuery({ id })

  if (isLoading) {
    return (
      <SafeAreaView className="flex-1 bg-white items-center justify-center">
        <ActivityIndicator size="large" color="#E63946" />
      </SafeAreaView>
    )
  }

  if (!stelle) return null

  const betreffVorlage = `Bewerbung als Auszubildender bei ${stelle.member.betrieb}`
  const bewerbungsUrl = `mailto:${stelle.kontaktEmail}?subject=${encodeURIComponent(betreffVorlage)}`

  return (
    <SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
      <View className="flex-row items-center px-4 py-3 bg-white border-b border-gray-100">
        <TouchableOpacity onPress={() => router.back()} className="mr-3">
          <Text className="text-brand-500 text-base">← Zurück</Text>
        </TouchableOpacity>
      </View>

      <ScrollView>
        {/* Header */}
        <View className="bg-white px-4 py-6 border-b border-gray-100">
          <View className="bg-brand-50 rounded-xl w-16 h-16 items-center justify-center mb-4">
            <Text className="text-3xl">🎓</Text>
          </View>
          <Text className="text-2xl font-bold text-gray-900">{stelle.member.betrieb}</Text>
          <Text className="text-gray-500 mt-1">{stelle.member.ort}</Text>
          <Text className="text-gray-500">{stelle.org.name}</Text>
        </View>

        {/* Details */}
        <View className="bg-white mx-4 mt-4 rounded-2xl overflow-hidden border border-gray-100">
          <DetailRow label="Sparte" value={stelle.sparte} />
          <DetailRow label="Anzahl Stellen" value={String(stelle.stellenAnz)} />
          {stelle.lehrjahr && <DetailRow label="Lehrjahr" value={stelle.lehrjahr} />}
          {stelle.verguetung && <DetailRow label="Vergütung" value={stelle.verguetung} />}
        </View>

        {stelle.beschreibung && (
          <View className="bg-white mx-4 mt-4 rounded-2xl p-4 border border-gray-100">
            <Text className="font-semibold text-gray-900 mb-2">Über die Stelle</Text>
            <Text className="text-gray-600 leading-6">{stelle.beschreibung}</Text>
          </View>
        )}

        {/* CTA */}
        <View className="mx-4 mt-6">
          <TouchableOpacity
            onPress={() => Linking.openURL(bewerbungsUrl)}
            className="bg-brand-500 rounded-2xl py-4 flex-row items-center justify-center gap-2"
          >
            <Text className="text-white text-xl">✉️</Text>
            <Text className="text-white font-semibold text-base">Jetzt bewerben</Text>
          </TouchableOpacity>
          {stelle.kontaktName && (
            <Text className="text-center text-sm text-gray-400 mt-3">
              Ansprechperson: {stelle.kontaktName}
            </Text>
          )}
        </View>

        <View className="h-8" />
      </ScrollView>
    </SafeAreaView>
  )
}

function DetailRow({ label, value }: { label: string; value: string }) {
  return (
    <View className="flex-row items-center px-4 py-3 border-b border-gray-50 last:border-0">
      <Text className="text-sm text-gray-500 w-32">{label}</Text>
      <Text className="text-sm text-gray-900 font-medium flex-1">{value}</Text>
    </View>
  )
}