import React, { useCallback, useEffect, useState } from 'react'
import {
  View, Text, FlatList, StyleSheet, TouchableOpacity, SafeAreaView, ActivityIndicator, Alert,
} from 'react-native'
import { useNavigation, useFocusEffect } from '@react-navigation/native'
import type { NativeStackScreenProps } from '@react-navigation/native-stack'
import { ImSDK } from '@xuqm/rn-sdk'
import { demoApi, type UserProfile } from '../../api/demo'
import type { RootStackParams } from '../../navigation/types'

type Props = NativeStackScreenProps<RootStackParams, 'GroupMembers'>

export default function GroupMembersScreen({ route }: Props) {
  const { groupId, groupName } = route.params
  const navigation = useNavigation()
  const [members, setMembers] = useState<UserProfile[]>([])
  const [loading, setLoading] = useState(true)

  const load = useCallback(async () => {
    setLoading(true)
    try {
      const groups = await ImSDK.listGroups()
      const group = groups.find(g => g.id === groupId)
      if (!group) return
      const ids = group.memberIds.split(',').filter(Boolean)
      const profiles = await Promise.all(
        ids.map(async id => {
          const res = await demoApi.searchUsers(id)
          return res.find(u => u.userId === id) ?? { userId: id, nickname: id, avatar: '', gender: 'UNKNOWN' as const, status: '' }
        })
      )
      setMembers(profiles)
    } catch {
      /* silently fail */
    } finally {
      setLoading(false)
    }
  }, [groupId])

  useFocusEffect(useCallback(() => { load() }, [load]))

  return (
    <SafeAreaView style={styles.root}>
      {loading
        ? <ActivityIndicator style={{ flex: 1 }} color="#07C160" />
        : (
          <FlatList
            data={members}
            keyExtractor={u => u.userId}
            renderItem={({ item }) => {
              const letter = (item.nickname || item.userId).charAt(0).toUpperCase()
              return (
                <View style={styles.row}>
                  <View style={styles.avatar}><Text style={styles.avatarText}>{letter}</Text></View>
                  <View style={styles.body}>
                    <Text style={styles.name}>{item.nickname}</Text>
                    <Text style={styles.uid}>@{item.userId}</Text>
                  </View>
                </View>
              )
            }}
            ItemSeparatorComponent={() => <View style={styles.sep} />}
            ListHeaderComponent={<Text style={styles.count}>{members.length} 名成员</Text>}
          />
        )
      }
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  root: { flex: 1, backgroundColor: '#f5f5f5' },
  count: { padding: 12, fontSize: 13, color: '#888', backgroundColor: '#f5f5f5' },
  row: { flexDirection: 'row', alignItems: 'center', padding: 12, backgroundColor: '#fff' },
  avatar: { width: 44, height: 44, borderRadius: 8, backgroundColor: '#5856d6', alignItems: 'center', justifyContent: 'center', marginRight: 12 },
  avatarText: { color: '#fff', fontSize: 17, fontWeight: '600' },
  body: { flex: 1 },
  name: { fontSize: 16, fontWeight: '500', color: '#111' },
  uid: { fontSize: 13, color: '#888', marginTop: 2 },
  sep: { height: StyleSheet.hairlineWidth, backgroundColor: '#e0e0e0', marginLeft: 68 },
})