import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import '../../../../core/di/injection.dart'; import '../../../../core/theme/design_tokens.dart'; import '../../../../shared/widgets/app_loading_indicator.dart'; import '../../../../shared/widgets/toast/index.dart'; import '../../../../shared/widgets/app_button.dart'; import '../../../../shared/widgets/back_title_page_header.dart'; import '../../../friends/data/friends_api.dart'; import '../../../users/data/models/user_response.dart'; import '../../../users/data/users_api.dart'; class ContactsScreen extends StatefulWidget { const ContactsScreen({super.key}); @override State createState() => _ContactsScreenState(); } class _ContactsScreenState extends State { final _searchController = TextEditingController(); final _searchFocusNode = FocusNode(); List _friends = []; List _pendingRequests = []; List _searchResults = []; bool _isLoading = true; bool _isSearching = false; bool _hasSearched = false; String? _sendingRequestUserId; final Set _sentRequestIds = {}; Set _friendIds = {}; @override void initState() { super.initState(); _loadFriends(); } Future _loadFriends() async { try { final friendsApi = sl(); final friends = await friendsApi.getFriends(); final outgoingRequests = await friendsApi.getOutgoingRequests(); final pendingRequests = outgoingRequests .where((r) => r.status == 'pending') .toList(); if (mounted) { setState(() { _friends = friends; _friendIds = friends.map((f) => f.friend.id).toSet(); _sentRequestIds.addAll(outgoingRequests.map((r) => r.recipient.id)); _pendingRequests = pendingRequests; _isLoading = false; }); } } catch (e) { if (mounted) { setState(() { _isLoading = false; }); } } } Future _onSearch() async { final query = _searchController.text.trim(); if (query.isEmpty) { Toast.show(context, '请输入用户名或手机号', type: ToastType.warning); return; } setState(() { _isSearching = true; _searchResults = []; _hasSearched = true; }); try { final usersApi = sl(); final results = await usersApi.searchUsers(query); if (mounted) { setState(() { _searchResults = results; _isSearching = false; }); } } catch (e) { if (mounted) { setState(() { _isSearching = false; }); Toast.show(context, '搜索失败,请稍后重试', type: ToastType.error); } } } Future _sendFriendRequest(String targetUserId, String? content) async { if (_sendingRequestUserId != null) { return; } try { setState(() { _sendingRequestUserId = targetUserId; }); final friendsApi = sl(); await friendsApi.sendRequest(targetUserId, content: content); if (mounted) { setState(() { _sentRequestIds.add(targetUserId); _sendingRequestUserId = null; }); Toast.show(context, '好友请求已发送', type: ToastType.success); } } catch (e) { if (mounted) { setState(() { _sendingRequestUserId = null; }); Toast.show(context, '发送失败,请稍后重试', type: ToastType.error); } } } void _showAddFriendDialog(UserResponse user) { final controller = TextEditingController(); showModalBottomSheet( context: context, isScrollControlled: true, backgroundColor: Colors.transparent, builder: (sheetContext) { return Padding( padding: EdgeInsets.only( bottom: MediaQuery.of(sheetContext).viewInsets.bottom, ), child: Container( width: double.infinity, constraints: BoxConstraints( maxHeight: MediaQuery.of(sheetContext).size.height * 0.7, ), padding: const EdgeInsets.fromLTRB( AppSpacing.xxl, AppSpacing.lg, AppSpacing.xxl, AppSpacing.lg, ), decoration: const BoxDecoration( color: AppColors.white, borderRadius: BorderRadius.vertical( top: Radius.circular(AppRadius.xxl), ), ), child: SingleChildScrollView( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Center( child: Container( width: 40, height: AppSpacing.xs, decoration: BoxDecoration( color: AppColors.slate300, borderRadius: BorderRadius.circular(AppRadius.full), ), ), ), const SizedBox(height: AppSpacing.lg), Text( '添加 ${user.username}', style: const TextStyle( fontSize: 20, fontWeight: FontWeight.w600, color: AppColors.slate900, ), ), const SizedBox(height: AppSpacing.sm), const Text( '发送一条验证信息,方便对方确认你的身份', style: TextStyle(fontSize: 13, color: AppColors.slate500), ), const SizedBox(height: AppSpacing.lg), Container( decoration: BoxDecoration( color: AppColors.slate50, borderRadius: BorderRadius.circular(AppRadius.lg), border: Border.all(color: AppColors.borderSecondary), ), child: TextField( controller: controller, maxLines: 3, minLines: 2, maxLength: 200, decoration: const InputDecoration( hintText: '你好,我是...', hintStyle: TextStyle( fontSize: 13, color: AppColors.slate400, ), border: InputBorder.none, contentPadding: EdgeInsets.all(AppSpacing.lg), counterStyle: TextStyle( fontSize: 11, color: AppColors.slate400, ), ), ), ), const SizedBox(height: AppSpacing.lg), Row( crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( child: AppButton( text: '取消', isOutlined: true, onPressed: () => Navigator.pop(sheetContext), ), ), const SizedBox(width: AppSpacing.md), Expanded( child: _buildSendButton( user.id, controller, sheetContext, ), ), ], ), SizedBox( height: MediaQuery.of(sheetContext).padding.bottom + AppSpacing.sm, ), ], ), ), ), ); }, ); } @override void dispose() { _searchController.dispose(); _searchFocusNode.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: AppColors.surfaceSecondary, resizeToAvoidBottomInset: false, body: SafeArea( maintainBottomViewPadding: true, child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, children: [ BackTitlePageHeader(title: '联系人', onBack: () => context.pop()), Expanded( child: SingleChildScrollView( padding: const EdgeInsets.fromLTRB(20, 8, 20, 20), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildSearchRow(), _buildSearchResults(), const SizedBox(height: 16), if (_pendingRequests.isNotEmpty) ...[ _buildSectionTitle('新的联系人'), const SizedBox(height: 8), _buildPendingRequestCard(_pendingRequests), const SizedBox(height: 16), ], _buildSectionTitle('全部联系人'), const SizedBox(height: 8), if (_isLoading) const Center( child: Padding( padding: EdgeInsets.all(20), child: AppLoadingIndicator(size: 22), ), ) else if (_friends.isEmpty) _buildEmptyState() else _buildContactCard(_friends), ], ), ), ), ], ), ), ); } Widget _buildSearchRow() { return Row( children: [ Expanded( child: Container( height: 40, decoration: BoxDecoration( color: AppColors.surfaceTertiary, borderRadius: BorderRadius.circular(12), border: Border.all(color: const Color(0xFFE4EBF7)), ), child: TextField( controller: _searchController, focusNode: _searchFocusNode, decoration: const InputDecoration( hintText: '输入用户名或手机号', hintStyle: TextStyle( fontSize: 13, fontWeight: FontWeight.w500, color: AppColors.slate400, ), prefixIcon: Icon( Icons.search, size: 16, color: AppColors.slate400, ), border: InputBorder.none, contentPadding: EdgeInsets.symmetric( horizontal: 12, vertical: 10, ), ), style: const TextStyle(fontSize: 13), keyboardType: TextInputType.text, textInputAction: TextInputAction.search, onSubmitted: (_) => _onSearch(), onChanged: (value) { if (value.isEmpty) { setState(() { _hasSearched = false; _searchResults = []; }); } }, ), ), ), const SizedBox(width: 10), GestureDetector( onTap: _onSearch, child: Container( width: 40, height: 40, decoration: BoxDecoration( color: const Color(0xFFF1F7FF), borderRadius: BorderRadius.circular(12), border: Border.all(color: const Color(0xFFD7E6FF)), ), child: _isSearching ? const Padding( padding: EdgeInsets.all(10), child: AppLoadingIndicator( size: 16, strokeWidth: 2, color: AppColors.blue500, trackColor: AppColors.blue100, withContainer: false, ), ) : const Icon(Icons.search, size: 16, color: AppColors.blue500), ), ), ], ); } Widget _buildSearchResults() { if (!_hasSearched) { return const SizedBox.shrink(); } return Container( margin: const EdgeInsets.only(top: 8), decoration: BoxDecoration( color: AppColors.white, borderRadius: BorderRadius.circular(12), boxShadow: [ BoxShadow( color: Colors.black.withValues(alpha: 0.08), blurRadius: 8, offset: const Offset(0, 2), ), ], ), child: Column( children: [ if (_isSearching) Container( padding: const EdgeInsets.all(20), child: const Center(child: AppLoadingIndicator(size: 22)), ) else if (_searchResults.isEmpty) Container( padding: const EdgeInsets.all(20), child: const Center( child: Text( '未找到该用户', style: TextStyle(fontSize: 14, color: AppColors.slate500), ), ), ) else Column( children: [ for (int i = 0; i < _searchResults.length; i++) ...[ _buildSearchResultItem(_searchResults[i]), if (i < _searchResults.length - 1) _buildDivider(), ], ], ), ], ), ); } Widget _buildSearchResultItem(UserResponse user) { final isFriend = _friendIds.contains(user.id); final isSent = _sentRequestIds.contains(user.id); final avatarColor = _getAvatarColor(user.id); return Container( height: 70, padding: const EdgeInsets.symmetric(horizontal: 14), child: Row( children: [ _buildAvatar(user.avatarUrl, user.id, avatarColor), const SizedBox(width: 12), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( user.username, style: const TextStyle( fontSize: 15, fontWeight: FontWeight.w600, color: AppColors.slate900, ), ), if (user.bio != null) ...[ const SizedBox(height: 2), Text( user.bio!, style: const TextStyle( fontSize: 12, color: AppColors.slate500, ), maxLines: 1, overflow: TextOverflow.ellipsis, ), ], ], ), ), _buildAddButton(user.id, isFriend, isSent), ], ), ); } Widget _buildAddButton(String userId, bool isFriend, bool isSent) { if (isFriend) { return Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), decoration: BoxDecoration( color: AppColors.slate300, borderRadius: BorderRadius.circular(8), ), child: const Text( '已是好友', style: TextStyle(fontSize: 12, color: AppColors.slate500), ), ); } if (isSent) { return Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), decoration: BoxDecoration( color: AppColors.slate300, borderRadius: BorderRadius.circular(8), ), child: const Text( '已发送', style: TextStyle(fontSize: 12, color: AppColors.slate500), ), ); } return GestureDetector( onTap: () { final user = _searchResults.firstWhere((u) => u.id == userId); _showAddFriendDialog(user); }, child: Container( padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6), decoration: BoxDecoration( color: const Color(0xFFF1F7FF), borderRadius: BorderRadius.circular(8), border: Border.all(color: const Color(0xFFD7E6FF)), ), child: const Row( mainAxisSize: MainAxisSize.min, children: [ Icon(Icons.person_add, size: 14, color: AppColors.blue500), SizedBox(width: 4), Text( '添加', style: TextStyle( fontSize: 12, fontWeight: FontWeight.w500, color: AppColors.blue500, ), ), ], ), ), ); } Widget _buildEmptyState() { return Container( width: double.infinity, padding: const EdgeInsets.all(32), decoration: BoxDecoration( color: AppColors.white, borderRadius: BorderRadius.circular(16), border: Border.all(color: const Color(0xFFE3EAF6)), ), child: Column( children: [ const Icon(Icons.person_outline, size: 48, color: AppColors.slate400), const SizedBox(height: 12), const Text( '暂无联系人', style: TextStyle( fontSize: 15, fontWeight: FontWeight.w500, color: AppColors.slate500, ), ), const SizedBox(height: 4), const Text( '搜索手机号添加好友开始聊天吧', style: TextStyle(fontSize: 13, color: AppColors.slate400), ), ], ), ); } Widget _buildSectionTitle(String title) { return Text( title, style: const TextStyle( fontSize: 13, fontWeight: FontWeight.w600, color: AppColors.slate500, ), ); } Widget _buildPendingRequestCard(List requests) { return Container( decoration: BoxDecoration( color: AppColors.white, borderRadius: BorderRadius.circular(16), border: Border.all(color: const Color(0xFFE3EAF6)), ), child: Column( children: [ for (int i = 0; i < requests.length; i++) ...[ _buildPendingRequestItem(requests[i]), if (i < requests.length - 1) _buildDivider(), ], ], ), ); } Widget _buildPendingRequestItem(FriendRequestResponse request) { final recipient = request.recipient; final color = _getAvatarColor(recipient.id); return Container( height: 70, padding: const EdgeInsets.symmetric(horizontal: 14), child: Row( children: [ _buildAvatar(recipient.avatarUrl, recipient.id, color), const SizedBox(width: 12), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( recipient.username, style: const TextStyle( fontSize: 15, fontWeight: FontWeight.w600, color: AppColors.slate900, ), ), const SizedBox(height: 2), const Text( '等待对方确认', style: TextStyle(fontSize: 12, color: AppColors.slate500), ), ], ), ), ], ), ); } Widget _buildContactCard(List friends) { return Container( decoration: BoxDecoration( color: AppColors.white, borderRadius: BorderRadius.circular(16), border: Border.all(color: const Color(0xFFE3EAF6)), ), child: Column( children: [ for (int i = 0; i < friends.length; i++) ...[ _buildContactItem(friends[i]), if (i < friends.length - 1) _buildDivider(), ], ], ), ); } Widget _buildContactItem(FriendResponse friend) { final friendInfo = friend.friend; final color = _getAvatarColor(friendInfo.id); return GestureDetector( onTap: () => context.push('/contacts/add?id=${friendInfo.id}'), child: Container( height: 70, padding: const EdgeInsets.symmetric(horizontal: 14), child: Row( children: [ _buildAvatar(friendInfo.avatarUrl, friendInfo.id, color), const SizedBox(width: 12), Expanded( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( friendInfo.username, style: const TextStyle( fontSize: 15, fontWeight: FontWeight.w600, color: AppColors.slate900, ), ), ], ), ), ], ), ), ); } Color _getAvatarColor(String id) { final colors = [ AppColors.blue500, AppColors.violet600, AppColors.blue600, const Color(0xFF0EA5E9), AppColors.violet500, ]; final index = id.hashCode.abs() % colors.length; return colors[index]; } Color _getAvatarBackground(Color color) { if (color == AppColors.blue500) return const Color(0xFFEEF4FF); if (color == AppColors.violet600) return AppColors.surfaceInfoLight; if (color == AppColors.blue600) return const Color(0xFFEDF5FF); if (color == const Color(0xFF0EA5E9)) return const Color(0xFFF2F8FF); if (color == AppColors.violet500) return const Color(0xFFF5F7FF); return const Color(0xFFEEF4FF); } Color _getAvatarBorder(Color color) { if (color == AppColors.blue500) return const Color(0xFFDDE8FB); if (color == AppColors.violet600) return const Color(0xFFE2EAFB); if (color == AppColors.blue600) return const Color(0xFFDCE9FB); if (color == const Color(0xFF0EA5E9)) return const Color(0xFFDFEAFA); if (color == AppColors.violet500) return const Color(0xFFE4E8FA); return const Color(0xFFDDE8FB); } Widget _buildDivider() { return Container( height: 1, margin: const EdgeInsets.symmetric(horizontal: 14), color: const Color(0xFFEEF2F7), ); } Widget _buildAvatar(String? avatarUrl, String userId, Color color) { return Container( width: 42, height: 42, decoration: BoxDecoration( color: _getAvatarBackground(color), borderRadius: BorderRadius.circular(21), border: Border.all(color: _getAvatarBorder(color)), ), child: avatarUrl != null ? ClipRRect( borderRadius: BorderRadius.circular(21), child: Image.network( avatarUrl, width: 42, height: 42, fit: BoxFit.cover, errorBuilder: (context, error, stackTrace) => Icon( Icons.person, size: 18, color: _getAvatarColor(userId), ), ), ) : Icon(Icons.person, size: 18, color: _getAvatarColor(userId)), ); } Widget _buildSendButton( String userId, TextEditingController controller, BuildContext sheetContext, ) { return SizedBox( height: 44, child: ElevatedButton( onPressed: _sendingRequestUserId == userId ? null : () async { final content = controller.text.trim(); Navigator.pop(sheetContext); await _sendFriendRequest( userId, content.isEmpty ? null : content, ); }, style: ElevatedButton.styleFrom( backgroundColor: AppColors.blue500, foregroundColor: AppColors.white, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(AppRadius.sm), ), ), child: _sendingRequestUserId == userId ? const AppLoadingIndicator( size: 16, strokeWidth: 2, color: AppColors.white, trackColor: AppColors.blue300, withContainer: false, ) : const Text( '发送', style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500), ), ), ); } }