<template>
	<view v-if="visible" class="asset-selector-mask" @tap="closeModal">
		<view class="asset-selector-modal" @tap.stop :class="{ 'show': animated }">
			<!-- 背景图片 -->
			<image class="modal-background" src="/static/starbookcontent/beijing.png" mode="aspectFill"></image>

			<!-- 内容包装器 -->
			<view class="modal-content">
				<!-- 顶部拖动区域 -->
				<view
					class="modal-drag-area"
					@touchstart="handleTouchStart"
					@touchmove="handleTouchMove"
					@touchend="handleTouchEnd"
				>
					<view class="modal-handle"></view>
					<text class="modal-title">选择要展出的藏品</text>
				</view>

				<!-- 类型Tab -->
				<!-- <view class="modal-tabs">
					<view
						v-for="tab in tabs"
						:key="tab.key"
						class="modal-tab-item"
						:class="{ active: currentType === tab.key }"
						@tap="switchType(tab.key)"
					>
						<text>{{ tab.label }}</text>
					</view>
				</view> -->

				<!-- 加载中 -->
				<view v-if="loading" class="modal-loading">
					<text class="loading-text">加载中...</text>
				</view>

				<!-- 空状态 -->
				<view v-else-if="!hasData" class="modal-empty">
					<text class="empty-text">暂无藏品</text>
				</view>

				<!-- 藏品列表 -->
				<scroll-view v-else class="modal-scroll" scroll-y :show-scrollbar="false">
					<!-- 原创藏品：按 grade 分组 -->
					<template v-if="currentType === 'regular'">
						<view v-for="gradeItem in regularGrades" :key="gradeItem.grade" class="grade-section">
							<view class="grade-header">
								<image
									class="grade-header-bg"
									:src="getGradeBackground(gradeItem.grade)"
									mode="aspectFill"
								></image>
								<text class="grade-title">{{ formatGrade(gradeItem.grade) }}</text>
							</view>
							<scroll-view class="asset-row" scroll-x :show-scrollbar="false" :enable-flex="true">
								<view class="asset-row-content">
									<view
										v-for="item in gradeItem.items"
										:key="item.asset_id"
										class="asset-item"
										@tap="selectAsset(item)"
									>
										<image
											class="asset-image"
											:class="{ 'nft-image-displayed': item.display_status === 1 }"
											:src="item.coverUrl || '/static/nft/collection.png'"
											mode="aspectFill"
										/>
										<view v-if="item.display_status === 1" class="status-overlay">
											<text class="status-text-center">已展示</text>
										</view>
										<view class="card-rate-badge-overlay">
											<image class="heart-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
											<text class="card-rate-text">{{ item.like_count || 0 }}</text>
										</view>
										<!-- <view class="asset-info">
											<text class="asset-name">{{ item.name }}</text>
										</view> -->
									</view>
								</view>
							</scroll-view>
						</view>
					</template>

					<!-- 典藏/活动藏品：直接列表 -->
					<template v-else>
						<view class="grade-section">
							<scroll-view class="asset-row" scroll-x :show-scrollbar="false" :enable-flex="true">
								<view class="asset-row-content">
									<view
										v-for="item in currentItems"
										:key="item.asset_id"
										class="asset-item"
										@tap="selectAsset(item)"
									>
										<image
											class="asset-image"
											:class="{ 'nft-image-displayed': item.display_status === 1 }"
											:src="item.coverUrl || '/static/nft/collection.png'"
											mode="aspectFill"
										/>
										<view v-if="item.display_status === 1" class="status-overlay">
											<text class="status-text-center">已展示</text>
										</view>
										<view class="card-rate-badge-overlay">
											<image class="heart-icon" src="/static/icon/heart-icon.png" mode="aspectFit"></image>
											<text class="card-rate-text">{{ item.like_count || 0 }}</text>
										</view>
										<view class="asset-info">
											<text class="asset-name">{{ item.name }}</text>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</template>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, watch } from 'vue';
import { getMyAssetsApi } from '@/utils/api.js';
import { getAssetCoverRealUrl } from '@/utils/assetImageHelper.js';

const props = defineProps({
	visible: {
		type: Boolean,
		default: false
	},
	// 替换模式：传入要被替换的藏品信息
	replaceAsset: {
		type: Object,
		default: null
	}
});

const emit = defineEmits(['close', 'select']);

// Tab配置
const tabs = [
	{ key: 'regular', label: '原创' },
	{ key: 'collection', label: '典藏' },
	{ key: 'activity', label: '活动' }
];

const currentType = ref('regular');
const loading = ref(false);
const assetsGroups = ref([]);
const animated = ref(false);

// 监听visible变化，控制动画
watch(() => props.visible, (newVal) => {
	if (newVal) {
		setTimeout(() => {
			animated.value = true;
		}, 50);
		if (assetsGroups.value.length === 0) {
			loadAssets();
		}
	} else {
		animated.value = false;
	}
});

// 判断当前类型是否有数据
const hasData = computed(() => {
	const group = assetsGroups.value.find(g => g.type === currentType.value);
	if (!group) return false;
	if (currentType.value === 'regular') {
		return group.grades && group.grades.some(g => g.items && g.items.length > 0);
	}
	return group.items && group.items.length > 0;
});

// 获取原创藏品的等级分组
const regularGrades = computed(() => {
	const group = assetsGroups.value.find(g => g.type === 'regular');
	return group && group.grades ? group.grades : [];
});

// 获取典藏藏品列表
const collectionItems = computed(() => {
	const group = assetsGroups.value.find(g => g.type === 'collection');
	return group && group.items ? group.items : [];
});

// 获取活动藏品列表
const activityItems = computed(() => {
	const group = assetsGroups.value.find(g => g.type === 'activity');
	return group && group.items ? group.items : [];
});

// 当前类型的藏品列表
const currentItems = computed(() => {
	if (currentType.value === 'collection') return collectionItems.value;
	if (currentType.value === 'activity') return activityItems.value;
	return [];
});

// grade 中文转换
const gradeMap = { 1: '一', 2: '二', 3: '三', 4: '四', 5: '五' };
const formatGrade = (grade) => `V${grade}`;

// 获取等级背景图
const getGradeBackground = (grade) => {
	if (grade <= 2) {
		return '/static/starbookcontent/V1dengji.png';
	} else if (grade <= 4) {
		return '/static/starbookcontent/V2dengji.png';
	} else {
		return '/static/starbookcontent/V3dengji.png';
	}
};

// 切换类型
const switchType = (type) => {
	currentType.value = type;
};

// 加载藏品列表
const loadAssets = async () => {
	loading.value = true;
	try {
		const response = await getMyAssetsApi(1, 20);
		if (response.code === 200 && response.data && response.data.data.groups) {
			// 收集所有需要处理的藏品项
			const allItems = [];
			const itemRefs = [];

			// 处理分组数据
			const processedGroups = [];
			for (const group of response.data.data.groups) {
				const processedGroup = {
					type: group.type,
					category: group.category,
					category_name: group.category_name,
					total_count: group.total_count,
					has_more: group.has_more,
					grades: [],
					items: []
				};

				// 处理 grades
				if (group.grades) {
					for (const grade of group.grades) {
						const processedGrade = {
							grade: grade.grade,
							total_count: grade.total_count,
							has_more: grade.has_more,
							items: []
						};
						for (const item of grade.items || []) {
							allItems.push(item);
							itemRefs.push({ type: 'grade', parent: processedGrade, grade: item.grade, category: null });
						}
						processedGroup.grades.push(processedGrade);
					}
				}

				// 处理 items
				if (group.items) {
					for (const item of group.items) {
						allItems.push(item);
						itemRefs.push({ type: 'item', parent: processedGroup, grade: null, category: item.category });
					}
				}

				processedGroups.push(processedGroup);
			}

			// 并行处理所有封面URL
			const coverUrlPromises = allItems.map(item => getAssetCoverRealUrl(item.cover_url_signed));
			const coverUrls = await Promise.all(coverUrlPromises);

			// 将处理好的封面URL填回数据结构
			for (let i = 0; i < allItems.length; i++) {
				const item = allItems[i];
				const ref = itemRefs[i];
				const processedItem = {
					asset_id: item.asset_id,
					name: item.name,
					coverUrl: coverUrls[i],
					display_status: item.display_status || 0,
					like_count: item.like_count,
					grade: ref.grade,
					category: ref.category
				};
				ref.parent.items.push(processedItem);
			}

			assetsGroups.value = processedGroups;
		}
	} catch (error) {
		console.error('获取藏品列表失败:', error);
	} finally {
		loading.value = false;
	}
};

// 选择藏品
const selectAsset = (asset) => {
	emit('select', {
		asset,
		isReplace: !!props.replaceAsset,
		oldAsset: props.replaceAsset
	});
	closeModal();
};

// 关闭弹窗
const closeModal = () => {
	animated.value = false;
	setTimeout(() => {
		emit('close');
	}, 300);
};

// 弹窗滑动关闭
const touchStartY = ref(0);
const touchStartTime = ref(0);

const handleTouchStart = (e) => {
	touchStartY.value = e.touches[0].clientY;
	touchStartTime.value = Date.now();
};

const handleTouchMove = (e) => {
	const currentY = e.touches[0].clientY;
	const deltaY = currentY - touchStartY.value;
	if (deltaY > 0) {
		e.preventDefault();
	}
};

const handleTouchEnd = (e) => {
	const currentY = e.changedTouches[0].clientY;
	const deltaY = currentY - touchStartY.value;
	const deltaTime = Date.now() - touchStartTime.value;

	if (deltaY > 0) {
		const velocity = deltaY / deltaTime;
		if (deltaY > 100 || velocity > 0.5) {
			closeModal();
		}
	}
};
</script>

<style scoped>
.asset-selector-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 9998;
	display: flex;
	align-items: flex-end;
}

.asset-selector-modal {
	position: relative;
	width: 100%;
	height: 80vh;
	border-top-left-radius: 40rpx;
	border-top-right-radius: 40rpx;
	overflow: hidden;
	transform: translateY(100%);
	transition: transform 0.3s ease-out;
	background: #0d0820;
}

.asset-selector-modal.show {
	transform: translateY(0);
}

.modal-background {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	object-fit: cover;
}

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

.modal-drag-area {
	flex-shrink: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0;
	cursor: grab;
}

.modal-drag-area:active {
	cursor: grabbing;
}

.modal-handle {
	width: 80rpx;
	height: 8rpx;
	background: rgba(255, 255, 255, 0.5);
	border-radius: 4rpx;
	margin: 0 auto 20rpx;
	flex-shrink: 0;
}

.modal-title {
	font-size: 36rpx;
	font-weight: bold;
	color: #e6e6e6;
	text-align: center;
	margin-bottom: 30rpx;
	margin-top: 30rpx;
	font-family: 'PingFang SC', 'Noto Sans SC', sans-serif;
	flex-shrink: 0;
}

.modal-tabs {
	display: flex;
	justify-content: center;
	gap: 40rpx;
	padding: 20rpx 30rpx;
	z-index: 100;
}

.modal-tab-item {
	padding: 12rpx 30rpx;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.6);
	border-bottom: 4rpx solid transparent;
	transition: all 0.3s ease;
}

.modal-tab-item.active {
	color: #ffffff;
	border-bottom-color: #ffffff;
}

.modal-loading,
.modal-empty {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-top: 200rpx;
}

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

.modal-scroll {
	height: calc(80vh - 200rpx);
}

.modal-scroll::-webkit-scrollbar {
	display: none;
}

.modal-scroll {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.grade-section {
	background: #f0839960;
	border-radius: 16rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.grade-header {
	position: relative;
	margin-bottom: 16rpx;
	padding: 16rpx 24rpx;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 160rpx;
	height: 32rpx;
}

.grade-header-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 160rpx;
	height: 64rpx;
	z-index: 0;
}

.grade-title {
	position: relative;
	z-index: 1;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 600;
}

.asset-row {
	width: 100%;
	height: 288rpx;
	white-space: nowrap;
}

.asset-row::-webkit-scrollbar {
	display: none;
}

.asset-row {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.asset-row-content {
	display: inline-block;
	white-space: nowrap;
	padding-left: 24rpx;
	height: 100%;
}

.asset-item {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin-right: 32rpx;
	height: 100%;
}

.asset-image {
	width: 192rpx;
	height: 100%;
	border-radius: 16rpx;
	background: rgba(255, 255, 255, 0.05);
	display: block;
}

/* 已展示的图片 - 灰色滤镜 */
.nft-image-displayed {
	filter: grayscale(25%);
}

.status-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 192rpx;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16rpx;
	z-index: 1;
}

.status-text-center {
	font-size: 24rpx;
	color: #fff;
	font-weight: bold;
	text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.8);
	background: linear-gradient(to bottom right,
		#F0E4B1 0%,
		#F08399 50%,
		#B94E73 100%
	);
	border-radius: 24rpx;
	box-shadow:
		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
		0 2rpx 6rpx rgba(255, 143, 158, 0.15),
		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4),
		inset 0 -2rpx 4rpx rgba(0, 0, 0, 0.05);
	padding: 16rpx;
}

.status-overlay-pending {
	position: absolute;
	top: 8rpx;
	right: 8rpx;
	background: rgba(0, 0, 0, 0.6);
	border-radius: 8rpx;
	padding: 4rpx 8rpx;
	z-index: 1;
}

.status-text-pending {
	font-size: 18rpx;
	color: #fff;
	font-weight: bold;
}

/* 点赞数徽章 - 图片上覆盖层 */
.card-rate-badge-overlay {
	position: absolute;
	bottom: 12rpx;
	left: 12rpx;
	display: flex;
	align-items: center;
	background: linear-gradient(to bottom right,
			#F0E4B1 0%,
			#F08399 50%,
			#B94E73 100%);
	border-radius: 999rpx;
	padding: 8rpx 20rpx 8rpx 40rpx;
	box-shadow:
		0 4rpx 12rpx rgba(255, 143, 158, 0.2),
		inset 0 2rpx 4rpx rgba(255, 255, 255, 0.4);
	
	border-radius: 20rpx;
	padding: 6rpx 12rpx;
	z-index: 2;
}

.card-rate-badge-overlay .heart-icon {
	width: 24rpx;
	height: 24rpx;
	margin-right: 6rpx;
}

.card-rate-badge-overlay .card-rate-text {
	font-size: 22rpx;
	color: #fff;
	font-weight: bold;
}

.asset-info {
	padding: 12rpx 0;
	text-align: center;
}

.asset-name {
	display: block;
	font-size: 22rpx;
	color: rgba(255, 255, 255, 0.9);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
</style>
