<template>
	<view class="success-container">
		<!-- 背景图片 -->
		<image class="background-image" src="/static/background/exhibitionSuccess.png" mode="aspectFill"></image>

		<!-- 蒙层 -->
		<view class="background-overlay"></view>

		<!-- Header组件 -->
		<!-- <Header :showBack="true" :showGuideIcon="false" :showTaskIcon="false" :showStarActivityIcon="false"  backIconColor="#e6e6e6" /> -->

		<!-- 内容区域 -->
		<view class="content-wrapper">
			<!-- 成功提示文字 -->
			<view class="success-title">
				<text class="title-text">铸造成功</text>
			</view>

			<!-- 藏品展示区域 -->
			<view class="nft-display-section">
				<!-- 光栅卡：单张工作台预览（陀螺仪） -->
				<view v-if="isLenticular" class="lenticular-result-wrap">
					<view class="lenticular-result-card">
						<view class="card-wrapper craft-card-wrapper">
							<image class="card-frame" src="/static/square/gerenzhongxincangpinkuang.png"
								mode="aspectFit" />
							<view class="craft-lenticular-slot">
								<LenticularCard v-if="lenticularLayers.length > 0" class="craft-lenticular-card"
									:layers="lenticularLayers" :transforms="layerTransforms"
									gyro-source="simulation" tilt-hint-text="晃动查看"
									:shimmer-mid-opacity="0.16"
									:simulate-tilt-from-normalized="simulate" />
							</view>
						</view>
					</view>
				</view>
				<!-- 镭射卡：WebGL 动态预览（效果直接渲染在图片上） -->
				<view v-else-if="isLaser && showCoverCard" class="cover-card-wrap">
					<view class="laser-result-card-preview">
						<LaserPreviewCanvas :variant-path="nftData.image" :cutout-path="laserCutoutPath"
							:fallback-path="nftData.image" :preset="laserPreset" :variant-index="laserPresetIndex"
							:paused="false" />
					</view>
				</view>
				<!-- 普通单图：封面展示 -->
				<view v-else-if="showCoverCard" class="cover-card-wrap">
					<NftCard :cover-image="nftData.image" :width="280" :height="280" :custom-style="nftCardStyle" />
				</view>
			</view>

			<!-- 铸造成功角色图片 -->
			<view class="character-section">
				<image class="character-image" src="/static/nft/mint-success-char.png" mode="aspectFit"></image>
			</view>

			<!-- 查看详情按钮 -->
			<view class="button-section">
				<button class="btn-primary" @click="handleViewDetails">查看详情</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { onUnload } from '@dcloudio/uni-app';
import Header from '../components/Header.vue';
import NftCard from '../components/NftCard.vue';
import LenticularCard from '@/components/lenticular/LenticularCard.vue';
import LaserPreviewCanvas from '@/components/laser/LaserPreviewCanvas.vue';
import { useLenticularCraftTiltPreview } from '@/composables/useLenticularCraftTiltPreview.js';
import { buildLenticularLayersTwo } from '@/utils/castloveMintForm.js';
import { getAssetDetailApi, getAssetMaterialsApi } from '@/utils/api.js';
import { getLaserPresetByIndex } from '@/utils/laser-card/laserPresets.js';

// 藏品数据
const nftData = ref({
	image: '',
	name: '',
	event: '',
	remark: '',
	materialType: '',
	is_lenticular: false,
	is_laser: false,
	bg_image: '',
});

// 是否显示为光栅卡（陀螺仪双层预览）
const isLaser = ref(false)
const laserPresetIndex = ref(-1)
const laserCutoutPath = ref('')
const isLenticular = ref(false)

const laserPreset = computed(() => {
	if (laserPresetIndex.value >= 0) {
		return getLaserPresetByIndex(laserPresetIndex.value)
	}
	return {}
})

/** 镭射卡 / 普通单图：用 NftCard 展示 main 合成图（craftMintSubmit 写入 temp_nft_data.image） */
const showCoverCard = computed(
	() => !isLenticular.value && !!String(nftData.value.image || '').trim()
)

// 光栅卡图层
const lenticularLayers = ref([])
const {
	layerTransforms,
	simulate,
} = useLenticularCraftTiltPreview(lenticularLayers);

// NftCard 样式
const nftCardStyle = {
	position: 'relative',
	transform: 'rotate(-5deg)',
	overflow: 'hidden'
};

// 页面加载时获取数据
onMounted(async () => {
	// 从全局存储读取数据
	try {
		const tempNftData = uni.getStorageSync('temp_nft_data');
		if (tempNftData) {
			const data = JSON.parse(tempNftData);

			// 优先使用 API 获取最新数据
			if (data.asset_id) {
				try {
					const res = await getAssetDetailApi(data.asset_id);
					console.log('[success] asset detail API 返回:', res);
					if (res.code === 0 && res.data?.asset) {
						const asset = res.data.asset;
						console.log('[success] asset:', asset);

						// 获取主图和背景图（通过 materials 接口）
						let imageUrl = asset.image || data.image || '';
						let bgImageUrl = asset.bg_image || data.bg_image || '';

						try {
							const materialsRes = await getAssetMaterialsApi(data.asset_id);
							console.log('[success] materials API 返回:', materialsRes);
							if (materialsRes.code === 0 && materialsRes.data) {
								const materials = Array.isArray(materialsRes.data) ? materialsRes.data : materialsRes.data.materials || [];
								console.log('[success] materials 数组:', materials);
								// 找到 type 为主图和背景图的素材
								const mainMat = materials.find(m => m.material_type === 'main');
								const bgMat = materials.find(m => m.material_type === 'bg');
								console.log('[success] mainMat:', mainMat, 'bgMat:', bgMat);
								if (mainMat?.material_url_signed) imageUrl = mainMat.material_url_signed;
								if (bgMat?.material_url_signed) bgImageUrl = bgMat.material_url_signed;
								console.log('[success] imageUrl:', imageUrl, 'bgImageUrl:', bgImageUrl);
							}
						} catch (e) {
							console.error('获取素材详情失败:', e);
						}

						const assetTags = Array.isArray(asset.tags) ? asset.tags : []
						const dataTags = Array.isArray(data.tags) ? data.tags : []
						// 工艺标记（展示走 showCoverCard；is_laser 供详情/扩展用）
						// 用局部变量 isLaserFlag 避免与顶层 ref isLaser 同名遮蔽
						const isLaserFlag =
							data.is_laser ||
							assetTags.includes('craft:laser') ||
							dataTags.includes('craft:laser')

						nftData.value = {
							image: imageUrl,
							name: asset.name || data.name || '未命名藏品',
							event: asset.event || data.event || '',
							remark: asset.remark || data.remark || '',
							materialType: asset.material_type || data.materialType || '',
							is_lenticular: asset.is_lenticular || data.is_lenticular || false,
							is_laser: isLaserFlag,
							bg_image: bgImageUrl,
						};
						console.log('[success] nftData 设置后:', nftData.value);
						// 镭射卡：读取预设索引和抠图
						if (isLaserFlag && typeof data.laser_preset_index === 'number') {
							laserPresetIndex.value = data.laser_preset_index
						}
						if (isLaserFlag && data.laser_cutout_path) {
							laserCutoutPath.value = data.laser_cutout_path
						}
						isLaser.value = isLaserFlag
						// 如果是光栅卡，构建图层
						if ((asset.is_lenticular || data.is_lenticular) && bgImageUrl && imageUrl) {
							isLenticular.value = true
							lenticularLayers.value = buildLenticularLayersTwo(bgImageUrl, imageUrl)
						}
					} else {
						// API 返回异常，使用本地数据
						applyLocalNftData(data);
					}
				} catch (e) {
					console.error('获取藏品详情失败，使用本地数据:', e);
					applyLocalNftData(data);
				}
			} else {
				applyLocalNftData(data);
			}
		}
	} catch (e) {
		console.error('读取藏品数据失败:', e);
		uni.showToast({
			title: '数据加载失败',
			icon: 'none'
		});
	}
});

// 应用本地存储的数据（API 不可用时的回退）
function applyLocalNftData(data) {
	const dataTags = Array.isArray(data.tags) ? data.tags : []
	const isLaserFlag = data.is_laser || dataTags.includes('craft:laser')
	nftData.value = {
		image: data.image || '',
		name: data.name || '未命名藏品',
		event: data.event || '',
		remark: data.remark || '',
		materialType: data.materialType || '',
		is_lenticular: data.is_lenticular || false,
		is_laser: isLaserFlag,
		bg_image: data.bg_image || '',
	};
	// 镭射卡：读取预设索引
	if (isLaserFlag && typeof data.laser_preset_index === 'number') {
		laserPresetIndex.value = data.laser_preset_index
	}
	if (isLaserFlag && data.laser_cutout_path) {
		laserCutoutPath.value = data.laser_cutout_path
	}
	isLaser.value = isLaserFlag
	// 如果是光栅卡，构建图层
	if (data.is_lenticular && data.image && data.bg_image) {
		isLenticular.value = true
		lenticularLayers.value = buildLenticularLayersTwo(data.bg_image, data.image)
	}
}

// 查看详情（保留 temp_nft_data，避免第二次点击时 order_id 丢失）
const handleViewDetails = () => {
	let orderId = '';
	let assetId = '';
	try {
		const raw = uni.getStorageSync('temp_nft_data');
		if (raw) {
			const parsed = JSON.parse(raw);
			orderId = parsed.order_id || '';
			assetId = parsed.asset_id || '';
		}
	} catch (e) {
		console.error('读取铸造结果失败:', e);
	}

	if (!orderId && !assetId) {
		uni.showToast({ title: '订单信息已失效，请从星册查看', icon: 'none' });
		return;
	}

	const query = assetId
		? `asset_id=${encodeURIComponent(assetId)}`
		: `order_id=${encodeURIComponent(orderId)}`;
	uni.navigateTo({
		url: `/pages/asset-detail/asset-detail?${query}&from=castlove`,
	});
};

onUnload(() => {
	try {
		uni.removeStorageSync('temp_nft_data');
	} catch (e) {
		/* noop */
	}
});
</script>

<style scoped>
.success-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	min-height: 100vh;
	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%;
}

.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.2);
}

.content-wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 80rpx 40rpx 100rpx;
	box-sizing: border-box;
}

/* 成功提示文字 */
.success-title {
	margin-bottom: 60rpx;
	animation: fadeInDown 0.6s ease-out;
}

@keyframes fadeInDown {
	from {
		opacity: 0;
		transform: translateY(-30rpx);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.title-text {
	font-size: 72rpx;
	font-weight: bold;
	font-family: 'yt', sans-serif;
	color: #e6e6e6;
	text-shadow:
		0 4rpx 20rpx rgba(255, 107, 157, 0.8),
		0 2rpx 10rpx rgba(0, 0, 0, 0.5);
}

/* 藏品展示区域 */
.nft-display-section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 60rpx;
	animation: zoomIn 0.8s ease-out 0.2s both;
}

.cover-card-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

/* 镭射卡预览：WebGL 动态渲染（与选中卡预览同效果，3:4 比例）*/
.laser-result-card-preview {
	width: 280px;
	height: 374px;
	border-radius: 24rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.45);
}

/* 光栅卡容器 */
.lenticular-card-wrap {
	width: 420rpx;
	height: 560rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lenticular-preview {
	width: 420rpx;
	height: 560rpx;
}

@keyframes zoomIn {
	from {
		opacity: 0;
		transform: scale(0.5);
	}

	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* 铸造成功角色图片区域 */
.character-section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 60rpx;
	animation: fadeInUp 0.8s ease-out 0.4s both;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.character-image {
	width: 500rpx;
	height: 500rpx;
	object-fit: contain;
}

/* 按钮区域 */
.button-section {
	width: 100%;
	max-width: 600rpx;
	display: flex;
	justify-content: center;
	animation: fadeIn 1s ease-out 0.6s both;
	position: fixed;
	bottom: 112rpx;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.btn-primary {
	width: 400rpx;
	height: 88rpx;
	line-height: 88rpx;
	border-radius: 44rpx;
	font-size: 36rpx;
	font-family: 'yt', sans-serif;
	font-weight: 600;
	border: none;
	background: linear-gradient(165deg, #F0E4B1 0%, #F08399 50%, #B94E73 90%, #834B9E 100%);
	color: #e6e6e6;
	box-shadow:
		0 0 20rpx rgba(255, 107, 157, 0.6),
		0 0 40rpx rgba(255, 140, 66, 0.4),
		0 4rpx 20rpx rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

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

.btn-primary:active {
	opacity: 0.9;
	transform: scale(0.98);
}

/* 光栅卡样式 */
.lenticular-result-wrap {
	display: flex;
	justify-content: center;
	z-index: 8;
}

.lenticular-result-card {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.lenticular-result-card .card-wrapper {
	position: relative;
	width: 352rpx;
	height: 520rpx;
}

.lenticular-result-card .craft-card-wrapper {
	margin-bottom: 32rpx;
}

.lenticular-result-card .card-frame {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	transform: rotate(-10deg);
}

.lenticular-result-card .craft-lenticular-slot {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 87%;
	height: 96%;
	border-radius: 48rpx;
	transform: translate(-50%, -50%) rotate(-10deg);
	z-index: 2;
	overflow: hidden;
}

.lenticular-result-card .craft-lenticular-card {
	width: 100%;
	height: 100%;
}
</style>
