XuqmGroup-RNChatDemo/src/screens/contact/ContactsScreen.tsx

import React, { useEffect, useState, useCallback } from 'react'
import {
  View, Text, FlatList, StyleSheet, TouchableOpacity, SafeAreaView,
  ActivityIndicator, Image,
} from 'react-native'
import { useNavigation, useFocusEffect } from '@react-navigation/native'
import type { NativeStackNavigationProp } from '@react-navigation/native-stack'
import type { RootStackParams } from '../../navigation/types'
import { ImSDK, type FriendRequest, type ImEventListener, type ImMessage } from '@xuqm/rn-sdk'
import type { UserProfile } from '../../api/demo'
import { toDemoUserProfile } from '../../utils/userProfiles'
import { load, save, K } from '../../utils/storage'

type Nav = NativeStackNavigationProp<RootStackParams>

function ContactRow({ user, onPress }: { user: UserProfile; onPress(): void }) {
  const letter = (user.nickname || user.userId).charAt(0).toUpperCase()
  return (
    <TouchableOpacity style={styles.row} onPress={onPress} activeOpacity={0.7}>
      {user.avatar ? (
        <Image source={{ uri: user.avatar }} style={styles.avatar} />
      ) : (
        <View style={[styles.avatar, styles.avatarFallback]}>
          <Text style={styles.avatarText}>{letter}</Text>
        </View>
      )}
      <View style={styles.body}>
        <Text style={styles.name}>{user.nickname}</Text>
        <Text style={styles.uid}>@{user.userId}</Text>
      </View>
      <Text style={styles.arrow}>›</Text>
    </TouchableOpacity>
  )
}

function ContactsEmpty({ loading, onGoSearch }: { loading: boolean; onGoSearch(): void }) {
  if (loading) return null
  return (
    <View style={styles.empty}>
      <Text style={styles.emptyText}>还没有联系人</Text>
      <TouchableOpacity onPress={onGoSearch}>
        <Text style={styles.emptyLink}>搜索添加</Text>
      </TouchableOpacity>
    </View>
  )
}

function ContactsSeparator() {
  return <View style={styles.sep} />
}

export default function ContactsScreen() {
  const navigation = useNavigation<Nav>()
  const [contacts, setContacts] = useState<UserProfile[]>([])
  const [friendRequests, setFriendRequests] = useState<FriendRequest[]>([])
  const [loading, setLoading] = useState(false)

  const refreshFriendRequests = useCallback(async () => {
    try {
      const list = await ImSDK.listFriendRequests('incoming')
      setFriendRequests(list)
    } catch {
      setFriendRequests([])
    }
  }, [])

  const fetchContacts = useCallback(async () => {
    setLoading(true)
    try {
      const friendIds = await ImSDK.listFriends()
      const profiles: UserProfile[] = []
      await Promise.all(
        friendIds.map(async (id) => {
          try {
            const results = await ImSDK.searchUsers(id)
            const match = results.find(u => u.userId === id)
            if (match) profiles.push(toDemoUserProfile(match))
          } catch {/* skip individual failures */}
        }),
      )
      setContacts(profiles)
      await save(K.CONTACTS, profiles)
    } catch {
      // network failed — load from local cache
      const cached = await load<UserProfile[]>(K.CONTACTS)
      if (cached) setContacts(cached)
    } finally {
      setLoading(false)
    }
  }, [])

  useEffect(() => {
    const listener: ImEventListener = {
      onSystemMessage(msg: ImMessage) {
        if (msg.msgType !== 'NOTIFY') return
        try {
          const payload = JSON.parse(msg.content || '{}')
          if (payload.type === 'FRIEND_REQUEST' || payload.type === 'FRIEND_REQUEST_STATUS') {
            refreshFriendRequests()
          }
        } catch {
          /* ignore */
        }
      },
    }
    ImSDK.addListener(listener)
    return () => ImSDK.removeListener(listener)
  }, [refreshFriendRequests])

  useFocusEffect(
    useCallback(() => {
      fetchContacts()
      refreshFriendRequests()
    }, [fetchContacts, refreshFriendRequests]),
  )

  const openChat = (user: UserProfile) => {
    navigation.navigate('SingleChat', { targetId: user.userId, targetName: user.nickname, targetAvatar: user.avatar })
  }

  return (
    <SafeAreaView style={styles.root}>
      <View style={styles.header}>
        <Text style={styles.title}>通讯录</Text>
        <View style={styles.headerActions}>
          <TouchableOpacity onPress={() => navigation.navigate('FriendRequests')} style={styles.headerBtn}>
            <Text style={styles.headerBtnText}>申请{friendRequests.length > 0 ? `(${friendRequests.length})` : ''}</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => navigation.navigate('GroupList')} style={styles.headerBtn}>
            <Text style={styles.headerBtnText}>群聊</Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => navigation.navigate('UserSearch')} style={styles.headerBtn}>
            <Text style={styles.headerBtnText}>添加</Text>
          </TouchableOpacity>
        </View>
      </View>
      {friendRequests.length > 0 && (
        <View style={styles.requestBanner}>
          <Text style={styles.requestText}>有 {friendRequests.length} 条好友申请待处理</Text>
          <TouchableOpacity onPress={() => navigation.navigate('FriendRequests')}>
            <Text style={styles.requestLink}>去处理</Text>
          </TouchableOpacity>
        </View>
      )}
      {loading && <ActivityIndicator style={styles.loadingIndicator} color="#07C160" />}
      <FlatList
        data={contacts}
        keyExtractor={u => u.userId}
        renderItem={({ item }) => <ContactRow user={item} onPress={() => openChat(item)} />}
        ItemSeparatorComponent={ContactsSeparator}
        ListEmptyComponent={<ContactsEmpty loading={loading} onGoSearch={() => navigation.navigate('UserSearch')} />}
      />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: '#f5f5f5' },
  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', padding: 16, backgroundColor: '#fff', borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: '#e0e0e0' },
  title: { fontSize: 20, fontWeight: '700', color: '#111' },
  headerActions: { flexDirection: 'row', gap: 12 },
  headerBtn: { paddingHorizontal: 12, paddingVertical: 6, backgroundColor: '#07C160', borderRadius: 6 },
  headerBtnText: { color: '#fff', fontSize: 13, fontWeight: '600' },
  requestBanner: { marginHorizontal: 12, marginTop: 12, padding: 12, backgroundColor: '#fff7e6', borderRadius: 8, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' },
  requestText: { color: '#8a5a00', fontSize: 13, flex: 1, marginRight: 8 },
  requestLink: { color: '#07C160', fontSize: 13, fontWeight: '700' },
  loadingIndicator: { marginVertical: 8 },
  row: { flexDirection: 'row', alignItems: 'center', padding: 12, backgroundColor: '#fff' },
  avatar: { width: 46, height: 46, borderRadius: 8, marginRight: 12 },
  avatarFallback: { backgroundColor: '#07C160', alignItems: 'center', justifyContent: 'center' },
  avatarText: { color: '#fff', fontSize: 18, fontWeight: '600' },
  body: { flex: 1 },
  name: { fontSize: 16, fontWeight: '500', color: '#111' },
  uid: { fontSize: 13, color: '#888', marginTop: 2 },
  arrow: { color: '#ccc', fontSize: 20 },
  sep: { height: StyleSheet.hairlineWidth, backgroundColor: '#e0e0e0', marginLeft: 70 },
  empty: { alignItems: 'center', paddingTop: 80 },
  emptyText: { color: '#bbb', fontSize: 15 },
  emptyLink: { color: '#07C160', fontSize: 14, marginTop: 12 },
})