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'
import { Avatar } from '@/components/ui/Avatar'

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

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

  if (!member) return null

  return (
    <SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
      {/* Header */}
      <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>
        {/* Profile Header */}
        <View className="bg-white px-6 py-8 items-center border-b border-gray-100">
          <Avatar
            name={member.name}
            imageUrl={member.avatarUrl ?? undefined}
            size={80}
          />
          <Text className="text-2xl font-bold text-gray-900 mt-4">{member.name}</Text>
          <Text className="text-gray-500 mt-1">{member.betrieb}</Text>
          {member.istAusbildungsbetrieb && (
            <View className="mt-2 bg-green-100 px-3 py-1 rounded-full">
              <Text className="text-green-700 text-xs font-medium">
                🎓 Ausbildungsbetrieb
              </Text>
            </View>
          )}
        </View>

        {/* Details */}
        <View className="bg-white mx-4 mt-4 rounded-2xl overflow-hidden border border-gray-100">
          <InfoRow label="Sparte" value={member.sparte} />
          <InfoRow label="Ort" value={member.ort} />
          {member.seit && (
            <InfoRow label="Mitglied seit" value={String(member.seit)} />
          )}
        </View>

        {/* Contact Buttons */}
        <View className="mx-4 mt-4 gap-3">
          {member.telefon && (
            <TouchableOpacity
              onPress={() => Linking.openURL(`tel:${member.telefon}`)}
              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">
                Anrufen
              </Text>
            </TouchableOpacity>
          )}
          <TouchableOpacity
            onPress={() =>
              Linking.openURL(
                `mailto:${member.email}?subject=InnungsApp%20Anfrage`
              )
            }
            className="bg-white border border-gray-200 rounded-2xl py-4 flex-row items-center justify-center gap-2"
          >
            <Text className="text-gray-900 text-xl">✉️</Text>
            <Text className="text-gray-900 font-semibold text-base">
              E-Mail senden
            </Text>
          </TouchableOpacity>
        </View>

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

function InfoRow({ 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>
  )
}