import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  Linking,
  ActivityIndicator,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import { trpc } from '@/lib/trpc'
import { useAuth } from '@/hooks/useAuth'
import { Avatar } from '@/components/ui/Avatar'

export default function ProfilScreen() {
  const { signOut } = useAuth()
  const { data: member, isLoading } = trpc.members.me.useQuery()

  return (
    <SafeAreaView className="flex-1 bg-gray-50" edges={['top']}>
      <View className="bg-white px-4 py-3 border-b border-gray-100">
        <Text className="text-xl font-bold text-gray-900">Mein Profil</Text>
      </View>

      <ScrollView>
        {isLoading ? (
          <View className="py-16 items-center">
            <ActivityIndicator color="#E63946" />
          </View>
        ) : member ? (
          <>
            {/* Profile */}
            <View className="bg-white px-4 py-8 items-center border-b border-gray-100">
              <Avatar name={member.name} size={72} />
              <Text className="text-xl font-bold text-gray-900 mt-4">{member.name}</Text>
              <Text className="text-gray-500 mt-1">{member.betrieb}</Text>
              <Text className="text-gray-400 text-sm mt-0.5">{member.org.name}</Text>
            </View>

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

            <View className="mx-4 mt-2">
              <Text className="text-xs text-gray-400 px-1">
                Änderungen an Ihren Daten nehmen Sie über die Innungsgeschäftsstelle vor.
              </Text>
            </View>
          </>
        ) : null}

        {/* Links */}
        <View className="bg-white mx-4 mt-4 rounded-2xl overflow-hidden border border-gray-100">
          <TouchableOpacity
            onPress={() => Linking.openURL('https://innungsapp.de/datenschutz')}
            className="flex-row items-center justify-between px-4 py-3.5 border-b border-gray-50"
          >
            <Text className="text-gray-700">Datenschutzerklärung</Text>
            <Text className="text-gray-400">›</Text>
          </TouchableOpacity>
          <TouchableOpacity
            onPress={() => Linking.openURL('https://innungsapp.de/impressum')}
            className="flex-row items-center justify-between px-4 py-3.5"
          >
            <Text className="text-gray-700">Impressum</Text>
            <Text className="text-gray-400">›</Text>
          </TouchableOpacity>
        </View>

        {/* Logout */}
        <View className="mx-4 mt-4">
          <TouchableOpacity
            onPress={signOut}
            className="bg-red-50 border border-red-200 rounded-2xl py-4 items-center"
          >
            <Text className="text-red-600 font-semibold">Abmelden</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-28">{label}</Text>
      <Text className="text-sm text-gray-900 flex-1">{value}</Text>
    </View>
  )
}