frontend/src/screens/message/components/ChatScreen/MentionPanel.tsx

/**
 * @成员选择面板组件
 */

import React from 'react';
import { View, ScrollView, TouchableOpacity } from 'react-native';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import { Avatar, Text } from '../../../../components/common';
import { useChatScreenStyles } from './styles';
import { MentionPanelProps } from './types';

export const MentionPanel: React.FC<MentionPanelProps> = ({
  members,
  currentUserId,
  mentionQuery,
  currentUserRole,
  onSelectMention,
  onMentionAll,
  onClose,
}) => {
  const styles = useChatScreenStyles();
  // 过滤成员列表
  const filteredMembers = members.filter(member => {
    if (member.user_id === currentUserId) return false; // 排除自己
    const displayName = member.nickname || member.user?.nickname || '';
    return displayName.toLowerCase().includes(mentionQuery);
  });

  // 检查是否可以@所有人（仅群主和管理员）
  const canMentionAll = currentUserRole === 'owner' || currentUserRole === 'admin';

  return (
    <View style={styles.mentionPanelContainer}>
      {/* 拖动把手 */}
      <View style={styles.mentionPanelDragHandle}>
        <View style={styles.mentionPanelDragBar} />
      </View>

      {/* 标题栏 */}
      <View style={styles.mentionPanelHeader}>
        <Text style={styles.mentionPanelTitle}>@ 成员</Text>
        <TouchableOpacity style={styles.mentionPanelCloseBtn} onPress={onClose}>
          <MaterialCommunityIcons name="close" size={14} color="#999" />
        </TouchableOpacity>
      </View>

      <ScrollView
        style={styles.mentionList}
        keyboardShouldPersistTaps="handled"
        showsVerticalScrollIndicator={true}
        nestedScrollEnabled={true}
      >
        {/* @所有人选项 */}
        {canMentionAll && (
          <TouchableOpacity style={styles.mentionItemAll} onPress={onMentionAll}>
            <View style={styles.mentionAllIcon}>
              <MaterialCommunityIcons name="account-group" size={22} color="#FFF" />
            </View>
            <View style={styles.mentionItemInfo}>
              <Text style={styles.mentionItemNameAll}>所有人</Text>
              <Text style={styles.mentionItemSub}>通知群内所有成员</Text>
            </View>
            <MaterialCommunityIcons name="chevron-right" size={18} color="rgba(255,107,53,0.4)" />
          </TouchableOpacity>
        )}

        {/* 成员列表 */}
        {filteredMembers.map(member => (
          <TouchableOpacity
            key={member.id}
            style={styles.mentionItem}
            onPress={() => onSelectMention(member)}
          >
            <Avatar
              source={member.user?.avatar || null}
              size={38}
              name={member.nickname || member.user?.nickname || ''}
            />
            <View style={styles.mentionItemInfo}>
              <Text style={styles.mentionItemName}>
                {member.nickname || member.user?.nickname || '用户'}
              </Text>
              {member.role === 'owner' && (
                <Text style={styles.mentionItemRole}>群主</Text>
              )}
              {member.role === 'admin' && (
                <Text style={styles.mentionItemRole}>管理员</Text>
              )}
            </View>
          </TouchableOpacity>
        ))}

        {filteredMembers.length === 0 && (
          <View style={styles.mentionEmpty}>
            <Text style={styles.mentionEmptyText}>没有找到匹配的成员</Text>
          </View>
        )}
      </ScrollView>
    </View>
  );
};

export default MentionPanel;