<template>
	<view class="friends-content">
		<!-- 背景图片 - 使用mainpage -->
		<image class="background-image" src="/static/background/mainpage.png" mode="aspectFill"></image>
		
		<!-- 蒙层 -->
		<view class="background-overlay"></view>
		
		<!-- 页面内容 -->
		<view class="content-wrapper">
		<!-- Tab标签页 -->
		<view class="tab-container">
			<view 
				class="tab-item" 
				:class="{ 'active': activeTab === 0 }"
				:style="{ zIndex: activeTab === 0 ? 4 : 2 }"
				@click="switchTab(0)"
			>
				<text class="tab-text">好友列表</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ 'active': activeTab === 1 }"
				:style="{ zIndex: activeTab === 1 ? 4 : 2 }"
				@click="switchTab(1)"
			>
				<text class="tab-text">添加好友</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ 'active': activeTab === 2 }"
				:style="{ zIndex: activeTab === 2 ? 4 : 1 }"
				@click="switchTab(2)"
			>
				<text class="tab-text">好友请求</text>
			</view>
		</view>
			
			<!-- 好友列表Tab内容 -->
			<view v-show="activeTab === 0" class="friend-list-container">
				<!-- 大卡片容器 -->
				<view class="friend-list-card">
					<!-- 大卡片背景 -->
					<image class="card-background" src="/static/background/friend-list-bg.png" mode="aspectFill"></image>
					
					<!-- 大卡片蒙层 -->
					<view class="card-overlay"></view>
					
					<!-- 卡片内容 -->
					<view class="card-content">
						<!-- 好友总数 -->
						<view class="friend-count">
							<text class="count-text">好友列表 ({{ friendList.length }}/{{ totalCount }})</text>
						</view>
						
						<scroll-view 
							class="scroll-view"
							scroll-y
							:show-scrollbar="false"
							:lower-threshold="50"
							@scrolltolower="onScrollToLower"
						>
							<view class="friend-list">
							<view 
								v-for="friend in friendList" 
								:key="friend.user_id"
								class="friend-card"
							>
							<!-- 好友头像 -->
							<view class="friend-avatar">
								<Avatar 
									:userId="friend.user_id" 
									:nickname="friend.nickname"
									:avatarUrl="friend.avatar_url"
									:size="100" 
									:borderWidth="4" 
									:showLevel="true" 
									:level="friend.fan_level"
									:enableCache="false"
								/>
							</view>
								
								<!-- 好友信息 -->
								<view class="friend-info">
									<text class="friend-nickname">{{ friend.nickname }}</text>
									<text class="friend-uid">UID: {{ friend.user_id }}</text>
								</view>
									
								<!-- 操作按钮 -->
								<view class="friend-actions">
									<view class="action-item">
										<view class="action-btn delete-btn" @click="handleDelete(friend)">
											<image class="action-icon" src="/static/icon/reject.png" mode="aspectFit"></image>
										</view>
										<text class="action-label">删除好友</text>
									</view>
								</view>
								</view>
								
								<!-- 加载状态 -->
								<view v-if="loading" class="loading-more">
									<text class="loading-text">加载中...</text>
								</view>
								<view v-if="!hasMore && friendList.length > 0" class="no-more">
									<text class="no-more-text">没有更多数据了</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
			
		<!-- 添加好友Tab内容 -->
		<view v-show="activeTab === 1" class="add-friend-container">
			<!-- 大卡片容器 -->
			<view class="friend-list-card">
				<!-- 大卡片背景 -->
				<image class="card-background" src="/static/background/friend-list-bg.png" mode="aspectFill"></image>
				
				<!-- 大卡片蒙层 -->
				<view class="card-overlay"></view>
				
			<!-- 卡片内容 -->
			<view class="card-content add-friend-card-content">
				<!-- 搜索模式切换 -->
				<view class="search-mode-switch">
					<view
						class="mode-btn"
						:class="{ active: searchMode === 'uid' }"
						@click="switchSearchMode('uid')"
					>
						<text class="mode-btn-text">UID搜索</text>
					</view>
					<view
						class="mode-btn"
						:class="{ active: searchMode === 'nickname' }"
						@click="switchSearchMode('nickname')"
					>
						<text class="mode-btn-text">昵称搜索</text>
					</view>
				</view>

				<!-- 搜索框 -->
				<view class="search-wrapper">
					<image class="search-icon" src="/static/icon/search.png" mode="aspectFit"></image>
					<input
						class="search-input"
						v-model="searchUid"
						:placeholder="searchMode === 'uid' ? '输入uid进行用户搜索' : '输入昵称进行用户搜索'"
						:type="searchMode === 'uid' ? 'number' : 'text'"
					/>
					<view
						v-show="searchUid"
						class="clear-btn"
						@click="clearSearch"
					>
						<image class="clear-icon" src="/static/icon/cancel.png" mode="aspectFit"></image>
					</view>
				</view>
				
				<!-- 搜索结果区域 -->
				<view class="search-result-area" v-if="searchUid">
					<!-- 搜索中 -->
					<view v-if="isSearching" class="search-status">
						<text class="status-text">搜索中...</text>
					</view>

					<!-- 搜索错误 -->
					<view v-else-if="searchError" class="search-status">
						<text class="error-text">{{ searchError }}</text>
					</view>

					<!-- UID搜索结果卡片 -->
					<view v-else-if="searchMode === 'uid' && searchResult" class="friend-card">
						<view class="friend-avatar">
							<Avatar
								:userId="searchResult.user_id"
								:nickname="searchResult.nickname"
								:avatarUrl="searchResult.avatar_url"
								:size="100"
								:borderWidth="4"
								:showLevel="true"
								:level="searchResult.fan_level"
								:enableCache="false"
							/>
						</view>
						<view class="friend-info">
							<text class="friend-nickname">{{ searchResult.nickname }}</text>
							<text class="friend-uid">UID: {{ searchResult.user_id }}</text>
						</view>
						<view class="friend-actions">
							<button class="add-friend-btn" @click="handleAddFriend(searchResult.user_id, searchResult.nickname)">
								添加好友
							</button>
						</view>
					</view>

					<!-- 昵称搜索结果列表 -->
					<view v-else-if="searchMode === 'nickname' && nicknameSearchResults.length > 0" class="nickname-results">
						<text class="results-count">找到 {{ nicknameSearchResults.length }} 个匹配用户</text>
						<view
							v-for="user in nicknameSearchResults"
							:key="user.user_id"
							class="friend-card"
						>
							<view class="friend-avatar">
								<Avatar
									:userId="user.user_id"
									:nickname="user.nickname"
									:avatarUrl="user.avatar_url"
									:size="100"
									:borderWidth="4"
									:showLevel="true"
									:level="user.fan_level"
									:enableCache="false"
								/>
							</view>
							<view class="friend-info">
								<text class="friend-nickname">{{ user.nickname }}</text>
								<text class="friend-uid">UID: {{ user.user_id }}</text>
								<text class="user-relation-status" :class="'status-' + user.relationship_status">
									{{ getRelationStatusText(user.relationship_status) }}
								</text>
							</view>
							<view class="friend-actions">
								<button
									v-if="user.can_send_request"
									class="add-friend-btn"
									@click="handleAddFriend(user.user_id, user.nickname)"
								>
									添加好友
								</button>
								<text v-else class="cannot-add-hint">无法添加</text>
							</view>
						</view>
					</view>
				</view>
			
			<!-- 分隔线 -->
			<view class="divider"></view>
			
			<!-- 已发送的好友请求 -->
			<view class="sent-requests-section">
					<view class="section-header">
						<text class="section-title">我发出的好友请求</text>
					</view>
					
					<!-- 加载中 -->
					<view v-if="loadingSentRequests" class="loading-status">
						<text class="status-text">加载中...</text>
					</view>
					
					<!-- 空状态 -->
					<view v-else-if="sentRequests.length === 0" class="empty-status">
						<text class="empty-text">暂无已发送的好友请求</text>
					</view>
					
					<!-- 请求列表 -->
					<view v-else class="request-list">
					<view 
						v-for="request in sentRequests" 
						:key="request.to_user_id"
						class="request-card"
					>
					<view class="friend-avatar">
						<Avatar 
							:userId="request.to_user_id" 
							:nickname="request.to_user_nickname"
							:avatarUrl="request.to_user_avatar_url"
							:size="100" 
							:borderWidth="4" 
							:showLevel="true" 
							:level="request.to_user_fan_level"
							:enableCache="false"
						/>
					</view>
						<view class="request-info">
							<text class="friend-nickname">{{ request.to_user_nickname }}</text>
							<text class="friend-uid">UID: {{ request.to_user_id }}</text>
							<text v-if="request.message" class="request-message">留言: {{ request.message }}</text>
						</view>
						<view class="status-badge" :class="'status-' + request.status">
							<text class="status-text">{{ getStatusText(request.status) }}</text>
						</view>
					</view>
					</view>
				</view>
			</view>
			</view>
		</view>
		
		<!-- 好友请求Tab内容 -->
		<view v-show="activeTab === 2" class="friend-request-container">
			<!-- 大卡片容器 -->
			<view class="friend-list-card">
				<!-- 大卡片背景 -->
				<image class="card-background" src="/static/background/friend-list-bg.png" mode="aspectFill"></image>
				
				<!-- 大卡片蒙层 -->
				<view class="card-overlay"></view>
				
			<!-- 卡片内容 -->
			<view class="card-content add-friend-card-content">
				
				<!-- 加载中 -->
				<view v-if="loadingReceivedRequests && receivedRequests.length === 0" class="loading-status">
					<text class="status-text">加载中...</text>
				</view>
				
				<!-- 空状态 -->
				<view v-else-if="receivedRequests.length === 0 && !loadingReceivedRequests" class="empty-status">
					<text class="empty-text">暂无收到的好友请求</text>
				</view>
				
				<!-- 请求列表 -->
				<scroll-view 
					v-else
					class="scroll-view"
					scroll-y
					:show-scrollbar="false"
					:lower-threshold="50"
					@scrolltolower="loadMoreReceivedRequests"
				>
					<view class="request-list">
						<view 
							v-for="request in receivedRequests" 
							:key="request.request_id || request.from_user_id"
							class="request-card"
						>
						<view class="friend-avatar">
							<Avatar 
								:userId="request.from_user_id" 
								:nickname="request.from_user_nickname"
								:avatarUrl="request.from_user_avatar_url"
								:size="100" 
								:borderWidth="4" 
								:showLevel="true" 
								:level="request.from_user_fan_level"
								:enableCache="false"
							/>
						</view>
							<view class="request-info">
								<text class="friend-nickname">{{ request.from_user_nickname }}</text>
								<text class="friend-uid">UID: {{ request.from_user_id }}</text>
								<text v-if="request.message" class="request-message">留言: {{ request.message }}</text>
							</view>
							<view class="request-actions">
								<view class="action-btn accept-btn" @click="handleAcceptRequest(request)">
									<image class="action-icon" src="/static/icon/accept.png" mode="aspectFit"></image>
								</view>
								<view class="action-btn reject-btn" @click="handleRejectRequest(request)">
									<image class="action-icon" src="/static/icon/reject.png" mode="aspectFit"></image>
								</view>
							</view>
						</view>
						
						<!-- 加载更多 -->
						<view v-if="loadingReceivedRequests" class="loading-more">
							<text class="loading-text">加载中...</text>
						</view>
						<view v-if="!hasMoreReceivedRequests && receivedRequests.length > 0" class="no-more">
							<text class="no-more-text">没有更多数据了</text>
						</view>
					</view>
				</scroll-view>
			</view>
			</view>
		</view>
		
		<!-- 添加好友确认弹窗 -->
		<view class="custom-modal" v-if="showAddFriendModal" @click="cancelAddFriend">
			<view class="modal-content" @click.stop>
				<view class="modal-title">添加好友</view>
				<view class="modal-message">
					确定要添加{{ pendingAddUserNickname ? ` "${pendingAddUserNickname}" ` : '该用户' }}为好友吗？
				</view>
				<view class="modal-buttons">
					<button class="modal-btn modal-btn-cancel" @click="cancelAddFriend">取消</button>
					<button class="modal-btn modal-btn-confirm" @click="confirmAddFriend">确认</button>
				</view>
			</view>
		</view>
		
		<!-- 删除好友确认弹窗 -->
		<view class="custom-modal" v-if="showDeleteFriendModal" @click="cancelDeleteFriend">
			<view class="modal-content" @click.stop>
				<view class="modal-title">确认删除</view>
				<view class="modal-message">
					确定要删除好友"{{ pendingDeleteFriend?.nickname }}"吗？
				</view>
				<view class="modal-buttons">
					<button class="modal-btn modal-btn-cancel" @click="cancelDeleteFriend">取消</button>
					<button class="modal-btn modal-btn-confirm" @click="confirmDeleteFriend">确认</button>
				</view>
			</view>
		</view>
	</view>
</view>
</template>

<script setup>
	import { ref, onMounted, watch } from 'vue';
	import Avatar from './Avatar.vue';
	import { friendListApi, searchUserApi, getSentFriendRequestsApi, sendFriendRequestApi, getReceivedFriendRequestsApi, handleFriendRequestApi, deleteFriendApi } from '@/utils/api';
	import { getFriendAvatarRealUrl } from '@/utils/assetImageHelper.js';
	
	// Tab状态
	const activeTab = ref(0);
	
	// 好友列表数据
	const friendList = ref([]);
	const totalCount = ref(0);
	const currentPage = ref(1);
	const pageSize = ref(10);
	const loading = ref(false);
	const hasMore = ref(true);
	
	// 搜索UID
	const searchUid = ref('');

	// 搜索模式：uid / nickname
	const searchMode = ref('uid');

	// 昵称搜索结果列表
	const nicknameSearchResults = ref([]);

	// 搜索相关
	const searchResult = ref(null);  // 搜索结果用户（UID模式）
	const searchError = ref('');     // 搜索错误信息
	const isSearching = ref(false);  // 搜索中状态
	let searchTimer = null;          // 搜索防抖定时器
	
	// 已发送的好友请求
	const sentRequests = ref([]);    // 已发送请求列表
	const loadingSentRequests = ref(false);
	
	// 收到的好友请求
	const receivedRequests = ref([]);
	const receivedRequestsPage = ref(1);
	const receivedRequestsPageSize = ref(10);
	const loadingReceivedRequests = ref(false);
	const hasMoreReceivedRequests = ref(true);
	
	// 添加好友确认弹窗
	const showAddFriendModal = ref(false);
	const pendingAddUserId = ref(null);
	const pendingAddUserNickname = ref('');
	
	// 删除好友确认弹窗
	const showDeleteFriendModal = ref(false);
	const pendingDeleteFriend = ref(null);
	
	// 切换Tab
	const switchTab = (index) => {
		activeTab.value = index;
	};
	
	
	// 加载好友列表
	const loadFriendList = async (page) => {
		if (loading.value) return;
		
		loading.value = true;
		try {
			const res = await friendListApi(page, pageSize.value);
			if (res.code === 200 && res.data) {
				// 映射字段并解析头像URL
				const friendsPromises = (res.data.items || []).map(async item => {
					
					const realAvatarUrl = item.friend_avatar 
						? await getFriendAvatarRealUrl(item.friend_avatar)
						: '';
					
					
					return {
						user_id: item.friend_id,
						nickname: item.friend_nickname,
						fan_level: item.friend_fan_level,
						avatar_url: realAvatarUrl,
						_loading: false // 标记加载完成
					};
				});
				
				// 先设置占位数据（用于显示加载状态）
				if (page === 1) {
					const placeholders = (res.data.items || []).map(item => ({
						user_id: item.friend_id,
						nickname: item.friend_nickname,
						fan_level: item.friend_fan_level,
						avatar_url: '',
						_loading: true // 标记正在加载
					}));
					friendList.value = placeholders;
					totalCount.value = res.data.total || 0;
				}
				
				// 等待所有头像解析完成
				const mappedList = await Promise.all(friendsPromises);
				
				if (page === 1) {
					// 第一页，替换数据
					friendList.value = mappedList;
				} else {
					// 后续页，追加数据
					friendList.value = [...friendList.value, ...mappedList];
				}
				
				// 判断是否还有更多数据
				hasMore.value = mappedList.length === pageSize.value && 
								(page * pageSize.value) < totalCount.value;
				currentPage.value = page;
			}
		} catch (error) {
			console.error('加载好友列表失败:', error);
			uni.showToast({
				title: '加载失败，请重试',
				icon: 'none'
			});
		} finally {
			loading.value = false;
		}
	};
	
	// 加载更多
	const loadMore = () => {
		if (!hasMore.value || loading.value) return;
		loadFriendList(currentPage.value + 1);
	};
	
	// 滚动到底部
	const onScrollToLower = () => {
		if (activeTab.value === 0) {
			loadMore();
		}
	};
	
	// 删除好友
	const handleDelete = (friend) => {
		pendingDeleteFriend.value = friend;
		showDeleteFriendModal.value = true;
	};
	
	// 取消删除好友
	const cancelDeleteFriend = () => {
		showDeleteFriendModal.value = false;
		pendingDeleteFriend.value = null;
	};
	
	// 确认删除好友
	const confirmDeleteFriend = async () => {
		if (!pendingDeleteFriend.value) return;
		
		const friend = pendingDeleteFriend.value;
		const friendUserId = friend.user_id; // 使用user_id作为friend_user_id
		
		try {
			uni.showLoading({ title: '删除中...', mask: true });
			await deleteFriendApi(friendUserId);
			uni.hideLoading();
			
			// 关闭弹窗
			showDeleteFriendModal.value = false;
			
			// 从列表中移除
			const index = friendList.value.findIndex(item => item.user_id === friend.user_id);
			if (index !== -1) {
				friendList.value.splice(index, 1);
				totalCount.value = Math.max(0, totalCount.value - 1);
			}
			
			uni.showToast({ title: '删除成功', icon: 'success' });
			
			// 重置状态
			pendingDeleteFriend.value = null;
		} catch (error) {
			uni.hideLoading();
			uni.showToast({ 
				title: error.message || '删除失败', 
				icon: 'none' 
			});
		}
	};
	
	// 清空搜索框
	const clearSearch = () => {
		searchUid.value = '';
		nicknameSearchResults.value = [];
		searchResult.value = null;
		searchError.value = '';
	};

	// 切换搜索模式
	const switchSearchMode = (mode) => {
		searchMode.value = mode;
		clearSearch();
	};
	
	// 监听搜索框变化，实现自动搜索
	watch(searchUid, async (newValue) => {
		// 清除之前的定时器
		if (searchTimer) {
			clearTimeout(searchTimer);
		}

		// 清空之前的结果
		searchResult.value = null;
		nicknameSearchResults.value = [];
		searchError.value = '';

		// 如果搜索框为空，直接返回
		if (!newValue || newValue.trim() === '') {
			return;
		}

		// 设置新的定时器，500ms 后执行搜索
		searchTimer = setTimeout(async () => {
			try {
				isSearching.value = true;

				if (searchMode.value === 'uid') {
					// UID 搜索模式
					const res = await searchUserApi(newValue.trim());

					if (res.code === 200 && res.data) {
						// 解析头像URL
						const realAvatarUrl = res.data.avatar_url
							? await getFriendAvatarRealUrl(res.data.avatar_url)
							: '';
						searchResult.value = {
							...res.data,
							avatar_url: realAvatarUrl
						};
						searchError.value = '';
					}
				} else {
					// 昵称搜索模式
					const res = await sendFriendRequestApi(null, newValue.trim(), true);

					if (res.code === 200 && res.data) {
						// 解析每个用户的头像URL
						const users = res.data.users || [];
						const processedUsers = await Promise.all(
							users.map(async (user) => {
								const realAvatarUrl = user.avatar
									? await getFriendAvatarRealUrl(user.avatar)
									: '';
								return {
									...user,
									avatar_url: realAvatarUrl
								};
							})
						);
						nicknameSearchResults.value = processedUsers;
						searchError.value = '';
					}
				}
			} catch (error) {
				// 处理 404 错误
				if (error.statusCode === 404 || error.message.includes('404')) {
					searchError.value = '用户不存在';
					searchResult.value = null;
				} else {
					searchError.value = error.message || '搜索失败';
					searchResult.value = null;
				}
			} finally {
				isSearching.value = false;
			}
		}, 500);
	});
	
	// 添加好友
	const handleAddFriend = (userId, nickname) => {
		pendingAddUserId.value = userId;
		pendingAddUserNickname.value = nickname || '';
		showAddFriendModal.value = true;
	};
	
	// 取消添加好友
	const cancelAddFriend = () => {
		showAddFriendModal.value = false;
		pendingAddUserId.value = null;
		pendingAddUserNickname.value = '';
	};
	
	// 确认添加好友
	const confirmAddFriend = async () => {
		if (!pendingAddUserId.value) return;
		
		try {
			uni.showLoading({ title: '发送中...', mask: true });
			await sendFriendRequestApi(pendingAddUserId.value);
			uni.hideLoading();
			
			// 关闭弹窗
			showAddFriendModal.value = false;
			
			uni.showToast({ title: '好友请求已发送', icon: 'success' });
			
			// 刷新已发送列表
			await fetchSentRequests();
			
			// 清空搜索
			searchUid.value = '';
			
			// 重置状态
			pendingAddUserId.value = null;
			pendingAddUserNickname.value = '';
		} catch (error) {
			uni.hideLoading();
			uni.showToast({ 
				title: error.message || '发送失败', 
				icon: 'none' 
			});
		}
	};
	
	// 获取已发送的好友请求列表
	const fetchSentRequests = async () => {
		try {
			loadingSentRequests.value = true;
			const res = await getSentFriendRequestsApi(1, 10);
			
			if (res.code === 200) {
				// 解析头像URL
				const requestsPromises = (res.data.items || []).map(async item => {
					const realAvatarUrl = item.to_user_avatar_url 
						? await getFriendAvatarRealUrl(item.to_user_avatar_url)
						: '';
					return {
						...item,
						to_user_avatar_url: realAvatarUrl
					};
				});
				sentRequests.value = await Promise.all(requestsPromises);
			}
		} catch (error) {
			console.error('获取已发送请求失败:', error);
			uni.showToast({ 
				title: error.message || '获取失败', 
				icon: 'none' 
			});
		} finally {
			loadingSentRequests.value = false;
		}
	};
	
	// 获取状态文本
	const getStatusText = (status) => {
		const statusMap = {
			'pending': '待处理',
			'accepted': '已接受',
			'rejected': '已拒绝',
			'cancelled': '已取消'
		};
		return statusMap[status] || status;
	};

	// 获取关系状态文本
	const getRelationStatusText = (status) => {
		const statusMap = {
			'stranger': '陌生人',
			'friend': '已是好友',
			'pending_sent': '已发送请求',
			'pending_received': '待接受',
			'rejected': '已被拒绝'
		};
		return statusMap[status] || status;
	};
	
	// 加载收到的好友请求
	const loadReceivedRequests = async (page) => {
		if (loadingReceivedRequests.value) return;
		
		loadingReceivedRequests.value = true;
		try {
			const res = await getReceivedFriendRequestsApi(page, receivedRequestsPageSize.value);
			
			if (res.code === 200 && res.data) {
				// 解析头像URL
				const requestsPromises = (res.data.items || []).map(async item => {
					const realAvatarUrl = item.from_user_avatar_url 
						? await getFriendAvatarRealUrl(item.from_user_avatar_url)
						: '';
					return {
						...item,
						from_user_avatar_url: realAvatarUrl
					};
				});
				
				const items = await Promise.all(requestsPromises);
				
				if (page === 1) {
					receivedRequests.value = items;
				} else {
					receivedRequests.value = [...receivedRequests.value, ...items];
				}
				
				// 判断是否还有更多
				hasMoreReceivedRequests.value = items.length === receivedRequestsPageSize.value;
				receivedRequestsPage.value = page;
			}
		} catch (error) {
			console.error('获取收到的好友请求失败:', error);
			uni.showToast({ 
				title: error.message || '获取失败', 
				icon: 'none' 
			});
		} finally {
			loadingReceivedRequests.value = false;
		}
	};
	
	// 加载更多收到的好友请求
	const loadMoreReceivedRequests = () => {
		if (!hasMoreReceivedRequests.value || loadingReceivedRequests.value) return;
		loadReceivedRequests(receivedRequestsPage.value + 1);
	};
	
	// 处理接受好友请求
	const handleAcceptRequest = async (request) => {
		if (!request.request_id) {
			uni.showToast({ title: '请求ID不存在', icon: 'none' });
			return;
		}
		
		try {
			uni.showLoading({ title: '处理中...', mask: true });
			await handleFriendRequestApi(request.request_id, 'accept');
			uni.hideLoading();
			uni.showToast({ title: '已接受好友请求', icon: 'success' });
			
			// 从列表中移除该请求
			const index = receivedRequests.value.findIndex(item => 
				(item.request_id || item.from_user_id) === (request.request_id || request.from_user_id)
			);
			if (index !== -1) {
				receivedRequests.value.splice(index, 1);
			}
		} catch (error) {
			uni.hideLoading();
			uni.showToast({ 
				title: error.message || '处理失败', 
				icon: 'none' 
			});
		}
	};
	
	// 处理拒绝好友请求
	const handleRejectRequest = async (request) => {
		if (!request.request_id) {
			uni.showToast({ title: '请求ID不存在', icon: 'none' });
			return;
		}
		
		try {
			uni.showLoading({ title: '处理中...', mask: true });
			await handleFriendRequestApi(request.request_id, 'reject');
			uni.hideLoading();
			uni.showToast({ title: '已拒绝好友请求', icon: 'success' });
			
			// 从列表中移除该请求
			const index = receivedRequests.value.findIndex(item => 
				(item.request_id || item.from_user_id) === (request.request_id || request.from_user_id)
			);
			if (index !== -1) {
				receivedRequests.value.splice(index, 1);
			}
		} catch (error) {
			uni.hideLoading();
			uni.showToast({ 
				title: error.message || '处理失败', 
				icon: 'none' 
			});
		}
	};
	
	// 监听 activeTab 变化，切换到添加好友 tab 时刷新
	watch(activeTab, (newTab) => {
		if (newTab === 0) {
			// 切换到好友列表tab时重新加载
			loadFriendList(1);
		} else if (newTab === 1) {
			fetchSentRequests();
		} else if (newTab === 2) {
			// 切换到好友请求tab时加载
			if (receivedRequests.value.length === 0) {
				loadReceivedRequests(1);
			}
		}
	});
	
	// 页面加载时获取第一页数据
	onMounted(() => {
		loadFriendList(1);
		// 根据初始tab加载对应数据
		if (activeTab.value === 1) {
			fetchSentRequests();
		} else if (activeTab.value === 2) {
			loadReceivedRequests(1);
		}
	});
</script>

<style scoped>
.friends-content {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	overflow: hidden;
}

.background-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
	min-width: 100%;
	min-height: 100%;
	filter: blur(20rpx);
	transform: scale(1.1);
}

.background-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: rgba(0, 0, 0, 0.3);
}

.content-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding-top: 192rpx;
	padding-left: 40rpx;
	padding-right: 40rpx;
	padding-bottom: 160rpx;
	box-sizing: border-box;
}

/* Tab标签页样式 */
.tab-container {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-bottom: -20rpx;
	align-items: flex-end;
	position: relative;
	z-index: 1;
}

.tab-item {
	padding: 20rpx 40rpx;
	cursor: pointer;
	border-radius: 30rpx 30rpx 0 0;
	background: linear-gradient(to bottom, rgb(232, 180, 217) 0%, rgb(180, 232, 232) 100%);
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	position: relative;
	min-width: 140rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	margin-left: -20rpx;
	transform: translateY(-10rpx);
}

.tab-item:first-child {
	margin-left: 0;
}

.tab-item.active {
	background: linear-gradient(to bottom, #E8B4D9 0%, #B4E8E8 100%);
	box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
	transform: translateY(-15rpx);
	padding-bottom: 40rpx;
	min-width: 160rpx;
}

.tab-item:active {
	transform: translateY(-10rpx) scale(0.95);
}

.tab-item.active:active {
	transform: translateY(-15rpx) scale(0.98);
}

.tab-text {
	font-size: 32rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: bold;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}

.tab-item.active .tab-text {
	color: #e6e6e6;
	font-weight: bold;
	font-size: 36rpx;
	text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
}

/* 好友列表容器 */
.friend-list-container {
	flex: 1;
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: 30rpx;
}

/* 大卡片容器 */
.friend-list-card {
	position: relative;
	width: 100%;
	flex: 1;
	border-radius: 30rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.3);
	z-index: 10;
}

.card-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
	border-radius: 30rpx;
}

.card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 30rpx;
}

.card-content {
	position: relative;
	width: 100%;
	height: 100%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 30rpx;
	box-sizing: border-box;
	border-radius: 30rpx;
}

.friend-count {
	width: 100%;
	padding: 20rpx 0;
	text-align: center;
	margin-bottom: 20rpx;
}

.count-text {
	font-size: 32rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: bold;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.scroll-view {
	flex: 1;
	width: 100%;
	height: 0;
}

.friend-list {
	width: 100%;
	padding-bottom: 40rpx;
}

/* 好友卡片样式 */
.friend-card {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.friend-avatar {
	margin-right: 30rpx;
}


.friend-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.friend-nickname {
	font-size: 36rpx;
	font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
	color: #333333;
	font-weight: normal;
}

.friend-uid {
	font-size: 24rpx;
	color: #999999;
	margin-top: 4rpx;
}

.friend-actions {
	display: flex;
	align-items: center;
	gap: 10rpx;
	margin-left: auto;
}

.action-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6rpx;
}

.action-btn {
	width: 100rpx;
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform 0.2s ease;
	flex-shrink: 0;
}

.action-btn:active {
	transform: scale(0.9);
}

.visit-btn {
	background: transparent;
}

.action-icon {
	width: 60rpx;
	height: 60rpx;
}

.delete-btn {
	background: transparent;
}


.action-label {
	font-size: 20rpx;
	font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
	text-align: center;
	white-space: nowrap;
}

/* 加载状态 */
.loading-more,
.no-more {
	width: 100%;
	padding: 40rpx 0;
	text-align: center;
}

.loading-text,
.no-more-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.6);
}

/* 添加好友容器 */
.add-friend-container {
	flex: 1;
	width: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: 30rpx;
}

.add-friend-card-content {
	justify-content: flex-start;
	align-items: flex-start;
	padding-top: 30rpx;
	overflow-y: auto;
}

.search-wrapper {
	width: 100%;
	padding: 0;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 20rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
}

.search-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.search-input {
	flex: 1;
	height: 88rpx;
	background: transparent;
	border: none;
	font-size: 32rpx;
	color: #e6e6e6;
	box-sizing: border-box;
}

.search-input::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.clear-btn {
	width: 40rpx;
	height: 40rpx;
	margin-left: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	cursor: pointer;
	transition: transform 0.2s ease;
}

/* 搜索模式切换 */
.search-mode-switch {
	width: 100%;
	display: flex;
	gap: 20rpx;
	margin-bottom: 20rpx;
}

.mode-btn {
	flex: 1;
	padding: 20rpx;
	border-radius: 20rpx;
	background: rgba(255, 255, 255, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.mode-btn.active {
	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
}

.mode-btn-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: bold;
}

.mode-btn.active .mode-btn-text {
	color: #ffffff;
}

/* 昵称搜索结果 */
.nickname-results {
	width: 100%;
}

.results-count {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.8);
	margin-bottom: 20rpx;
	display: block;
}

.user-relation-status {
	font-size: 24rpx;
	color: #666;
	margin-top: 8rpx;
}

.cannot-add-hint {
	font-size: 24rpx;
	color: #999;
}

.clear-btn:active {
	transform: scale(0.9);
}

.clear-icon {
	width: 40rpx;
	height: 40rpx;
}

/* 好友请求容器 */
.friend-request-container {
	flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	position: relative;
}

.request-placeholder {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100rpx 0;
}

.placeholder-text {
	font-size: 32rpx;
	color: rgba(255, 255, 255, 0.6);
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

/* 搜索结果区域 */
.search-result-area {
	width: 100%;
	margin-top: 20rpx;
}

.search-status {
	text-align: center;
	padding: 40rpx 0;
}

.status-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.6);
}

.error-text {
	font-size: 28rpx;
	color: #ff6b9d;
}

.add-friend-btn {
	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
	color: #e6e6e6;
	border: none;
	border-radius: 50rpx;
	padding: 0 32rpx;
	height: 90rpx;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-friend-btn::after {
	border: none;
}

.add-friend-btn:active {
	opacity: 0.8;
}

/* 分隔线 */
.divider {
	width: 100%;
	height: 2rpx;
	background: rgba(255, 255, 255, 0.2);
	margin: 40rpx 0;
}

/* 已发送请求区域 */
.sent-requests-section {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.section-header {
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 32rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: bold;
}

.loading-status,
.empty-status {
	text-align: center;
	padding: 40rpx 0;
}

.empty-text {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.5);
}

.request-list {
	width: 100%;
}

.request-card {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.request-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8rpx;
	margin-right: 20rpx;
}

.request-message {
	font-size: 26rpx;
	color: #666;
	margin-top: 8rpx;
}

.status-badge {
	padding: 10rpx 24rpx;
	border-radius: 30rpx;
	font-size: 24rpx;
	font-weight: bold;
	white-space: nowrap;
	flex-shrink: 0;
}

.status-pending {
	background: linear-gradient(135deg, #FFA726 0%, #FB8C00 100%);
	color: #e6e6e6;
}

.status-accepted {
	background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
	color: #e6e6e6;
}

.status-rejected {
	background: linear-gradient(135deg, #EF5350 0%, #E53935 100%);
	color: #e6e6e6;
}

.status-cancelled {
	background: linear-gradient(135deg, #BDBDBD 0%, #9E9E9E 100%);
	color: #e6e6e6;
}

.status-text {
	font-size: 24rpx;
}

/* 收到的好友请求操作按钮 */
.request-actions {
	display: flex;
	align-items: center;
	gap: 10rpx;
	flex-shrink: 0;
}

.request-actions .action-btn {
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease;
}

.request-actions .action-btn:active {
	transform: scale(0.9);
}

.request-actions .accept-btn {
	background: transparent;
}

.request-actions .reject-btn {
	background: transparent;
}

.request-actions .action-icon {
	width: 80rpx;
	height: 80rpx;
}

/* 自定义添加好友弹窗 */
.custom-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.modal-content {
	width: 580rpx;
	background: #e6e6e6;
	border-radius: 30rpx;
	padding: 50rpx 40rpx 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.modal-title {
	font-size: 38rpx;
	font-weight: bold;
	color: #333333;
	margin-bottom: 30rpx;
}

.modal-message {
	font-size: 30rpx;
	color: #666666;
	text-align: center;
	line-height: 1.6;
	margin-bottom: 40rpx;
}

.modal-buttons {
	width: 100%;
	display: flex;
	gap: 20rpx;
}

.modal-btn {
	flex: 1;
	height: 90rpx;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
}

.modal-btn::after {
	border: none;
}

.modal-btn-cancel {
	background: #f5f5f5;
	color: #666666;
}

.modal-btn-confirm {
	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
	color: #e6e6e6;
}

.modal-btn:active {
	opacity: 0.8;
}
</style>
