<template>
	<view class="welcome-mask" @click="onBgClick">
		<text class="header-text">SKIP</text>

		<!-- 背景层 -->
		<view class="background-layer">
			<!-- 场景1: 视频图.mp4 -->
			<view v-if="currentScene === 0" class="scene1-wrapper">
				<video class="bg-media" src="/static/animation/animation1.mp4" loop autoplay muted object-fit="fill"
					:show-center-play-btn="false" :show-play-btn="false" :enable-progress-gesture="false"
					:controls="false"></video>
				<!-- 场景1对话框 - 位置动态配置 -->
				<view class="scene1-dialog" :style="{ left: currentDialogPos.left, top: currentDialogPos.top }"
					:class="{ visible: dialogVisible }">
					<image class="dialog-bg" src="/static/animation/dialog-monster/dialog.png" mode="aspectFit" />
					<view class="dialog-text-wrapper-vertical">
						<text class="dialog-text-vertical">{{ currentText }}</text>
					</view>
				</view>
			</view>

			<!-- 场景2: 视频轮播 图3,图4,图5 (三个独立区域) -->
			<view v-else-if="currentScene === 1" class="scene2-layout">
				<!-- 图3: 底层视频 (始终显示) -->
				<view class="scene2-item scene2-item-1">
					<video class="scene2-video" src="/static/animation/animation3.mp4" loop autoplay muted
						object-fit="fill" :show-center-play-btn="false" :show-play-btn="false"
						:enable-progress-gesture="false" :controls="false"></video>
				</view>
				<!-- 图4: 上层视频 (scene2SubPhase >= 1 时显示) -->
				<view v-if="scene2SubPhase >= 1" class="scene2-item scene2-item-2 visible">
					<video class="scene2-video scene2-video-right" src="/static/animation/animation4.mp4" loop autoplay
						muted object-fit="fill" :show-center-play-btn="false" :show-play-btn="false"
						:enable-progress-gesture="false" :controls="false"></video>
				</view>
				<!-- 图4对话框: 覆盖在图3上面 (scene2SubPhase >= 1 时显示) -->
				<view v-if="scene2SubPhase >= 1" class="scene2-dialog-on-video3"
					:style="{ left: scene1DialogOnVideo3Pos.left, top: scene1DialogOnVideo3Pos.top }"
					:class="{ visible: dialogVisible }">
					<image class="dialog-bg dialog-bg-oval" src="/static/animation/dialog-monster/oval-dialog1.png"
						mode="aspectFit" />
					<view class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video3">
						<text class="dialog-text-vertical">{{ scene2Video4Text }}</text>
					</view>
				</view>

				<!-- 图5: 视频 (scene2SubPhase >= 2 时显示) -->
				<view v-if="scene2SubPhase >= 2" class="scene2-item scene2-item-3 visible">
					<view class="scene2-video-crop">
						<video class="scene2-video scene2-video-crop-inner" src="/static/animation/animation5.mp4" loop
							autoplay muted object-fit="fill" :show-center-play-btn="false" :show-play-btn="false"
							:enable-progress-gesture="false" :controls="false"></video>
					</view>
				</view>

				<!-- 图5对话框: 覆盖在图4上面 (scene2SubPhase >= 2 时显示) -->
				<view v-if="scene2SubPhase >= 2" class="scene2-dialog-on-video4"
					:style="{ left: scene2DialogOnVideo5Pos.left, top: scene2DialogOnVideo5Pos.top }"
					:class="{ visible: dialogVisible }">
					<image class="dialog-bg dialog-bg-oval1" src="/static/animation/dialog-monster/dialog2.png"
						mode="aspectFit" />
					<view class="dialog-text-wrapper-vertical">
						<text class="dialog-text-vertical">{{ scene2Video5Text }}</text>
					</view>
				</view>
			</view>

			<!-- 场景3: 图2,图6 (上下布局) -->
			<view v-else-if="currentScene === 2" class="scene3-layout">
				<view class="scene3-top">
					<video class="scene3-video" src="/static/animation/animation2.mp4" loop autoplay muted
						object-fit="fill" :show-center-play-btn="false" :show-play-btn="false"
						:enable-progress-gesture="false" :controls="false"></video>
					<!-- 上部分对话框 -->
					<view class="scene1-dialog" :style="{ left: scene3DialogTopPos.left, top: scene3DialogTopPos.top }"
						:class="{ visible: dialogVisible }">
						<image class="dialog-bg dialog-bg-oval-1" src="/static/animation/dialog-monster/dialog2.png"
							mode="aspectFit" />
						<view class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video4">
							<text class="dialog-text-vertical">{{ currentText }}</text>
						</view>
					</view>
				</view>
				<view class="scene3-bottom" v-if="scene3SubPhase >= 1">
					<video class="scene3-video" src="/static/animation/animation6.mp4" loop autoplay muted
						object-fit="fill" :show-center-play-btn="false" :show-play-btn="false"
						:enable-progress-gesture="false" :controls="false"></video>
					<!-- 下部分对话框 -->
					<view class="scene1-dialog"
						:style="{ left: scene3DialogBottomPos.left, top: scene3DialogBottomPos.top }"
						:class="{ visible: dialogVisible }">
						<image class="dialog-bg dialog-bg-oval-2"
							src="/static/animation/dialog-monster/rounded-corner-dialog1.png" mode="aspectFit" />
						<view class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video5">
							<text class="dialog-text-vertical">{{ scene3Video6Text }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 场景4: 视频轮播 图7,图8 (两个独立区域) -->
			<view v-else-if="currentScene === 3" class="scene4-layout">
				<!-- 图7: 有对话框 -->
				<view class="scene4-item scene4-item-1">
					<video class="scene4-video" src="/static/animation/animation7.mp4" loop autoplay muted
						:show-center-play-btn="false" :show-play-btn="false" :enable-progress-gesture="false"
						:controls="false"></video>
					<view class="scene1-dialog" :style="{ left: scene4Dialog7Pos.left, top: scene4Dialog7Pos.top }"
						:class="{ visible: dialogVisible }">
						<image class="dialog-bg dialog-bg-oval-3"
							src="/static/animation/dialog-monster/rounded-corner-dialog1.png" mode="aspectFit" />
						<view class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video6">
							<text class="dialog-text-vertical dialog-text-vertical-on-video5">{{ scene4Video7Text
							}}</text>
						</view>
					</view>
				</view>
				<!-- 图8: 有对话框 -->
				<view class="scene4-item scene4-item-2" v-if="scene4SubPhase >= 1">
					<video class="scene4-video" src="/static/animation/animation8.mp4" loop autoplay muted
						object-fit="fill" :show-center-play-btn="false" :show-play-btn="false"
						:enable-progress-gesture="false" :controls="false"></video>
					<view class="scene1-dialog" :style="{ left: scene4Dialog8Pos.left, top: scene4Dialog8Pos.top }"
						:class="{ visible: dialogVisible }">
						<image class="dialog-bg dialog-bg-oval-4" src="/static/animation/dialog-monster/dialog3.png"
							mode="aspectFit" />
						<view class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video7">
							<text class="dialog-text-vertical">{{ scene4Video8Text }}</text>
						</view>
					</view>
					<!-- 小怪兽图片 -->
					<image class="scene4-monster" :style="{ left: scene4MonsterPos.left, top: scene4MonsterPos.top }"
						src="/static/animation/dialog-monster/monster.png" mode="aspectFit" />
				</view>
			</view>

			<!-- 场景5: 选择明星页面 -->
			<view v-else-if="currentScene === 4" class="scene-role">
				<SelectRole :is-welcome="true" @confirm="onSelectRoleConfirm" />
			</view>

			<!-- 场景6: 视频图9.mp4 -->
			<view v-else-if="currentScene === 5" class="scene6-wrapper">
				<view class="scene6-bg">
					<video class="bg-media" src="/static/animation/animation9.mp4" loop autoplay muted object-fit="fill"
						:show-center-play-btn="false" :show-play-btn="false" :enable-progress-gesture="false"
						:controls="false"></video>
					<view class="scene1-dialog" :style="{ left: scene6DialogPos.left, top: scene6DialogPos.top }"
						:class="{ visible: dialogVisible }">
						<image class="dialog-bg dialog-bg-oval-5" src="/static/animation/dialog-monster/dialog3.png"
							mode="aspectFit" />
						<view class="dialog-text-wrapper-vertical dialog-text-wrapper-vertical-on-video8">
							<text class="dialog-text-vertical dialog-text-vertical-on-video5">{{ scene6Video9Text }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- Topfans文字 + 箭头 (仅场景1-4) -->
		<view v-if="currentScene <= 3" class="topfans-arrow-wrapper" :class="{ visible: contentVisible }"
			@click.stop="nextScene">
			<text class="topfans-text">TOPFANS</text>
			<text class="arrow-icon"></text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useStore } from "vuex";
import SelectRole from "../profile/selectRole.vue";

const store = useStore();

const emit = defineEmits(["complete", "skip"]);

// 固定资源
const monsterSrc = "/static/animation/dialog-monster/monster.png";

// 每场景的文案
const sceneTexts = [
	"这些限量款徽章都没舍得用过……", // 场景1
	"还可以铸造专属藏品哦~", // 场景3
	"这些都是我的宝贝，难道都会悄悄褪色吗?！", // 场景4
	"选择你喜欢的明星吧！", // 场景5
];

// 图4和图5对话框的独立文字
const scene2Video4Text = ref("啊啊啊，这张小卡怎么褪色了555");
const scene2Video5Text = ref("当时可是排好久才买到的。");

// 场景3图6的对话框文字
const scene3Video6Text = ref("当然不会!角角我能让这些铸造成永久的藏品。");

// 场景4图7的对话框文字
const scene4Video7Text = ref("是真的吗，我要怎么做?");
// 场景4图8的对话框文字
const scene4Video8Text = ref("只需要告诉我Ta的名字，我就能带你去Ta的TopFans。");

// 场景6图9的对话框文字
const scene6Video9Text = ref("好，传送门打开了，我们出发吧");

// 对话框位置配置 (每个场景可配置)
const dialogPosConfig = ref({
	scene0: { leftRatio: 0.35, topRatio: 0.2 },
	// 场景3: 图2对话框 (上部分)
	scene3_top: { leftRatio: 0.35, topRatio: 0.135 },
	// 场景3: 图6对话框 (下部分)
	scene3_bottom: { leftRatio: -0.08, topRatio: 0.06 },
	// 场景4: 图7对话框 (上部分)
	scene4_top: { leftRatio: 0.4, topRatio: -0.06 },
	// 场景4: 图8对话框 (下部分)
	scene4_bottom: { leftRatio: 0.035, topRatio: 0.2 },
	// 场景4: 小怪兽
	scene4Monster: { leftRatio: 0, topRatio: 0.15 },
	// 图4对话框覆盖在图3上面
	scene1DialogOnVideo3: { leftRatio: 0.11, topRatio: 0.30 },
	// 图5对话框
	scene2DialogOnVideo5: { leftRatio: 0.4, topRatio: 0.7 },
	// 场景6: 图9对话框
	scene6: { leftRatio: 0.15, topRatio: 0.15 },
});

// 当前对话框位置
const currentDialogPos = ref({
	left: "0",
	top: "0"
});

// 图4对话框位置
const scene1DialogOnVideo3Pos = ref({
	left: "0",
	top: "0"
});

// 图5对话框位置
const scene2DialogOnVideo5Pos = ref({
	left: "0",
	top: "0"
});

// 场景3（图2/图6）对话框位置
const scene3DialogTopPos = ref({
	left: "0",
	top: "0"
});

const scene3DialogBottomPos = ref({
	left: "0",
	top: "0"
});

// 场景4对话框位置
const scene4Dialog7Pos = ref({
	left: "0",
	top: "0"
});

const scene4Dialog8Pos = ref({
	left: "0",
	top: "0"
});

// 场景4小怪兽位置
const scene4MonsterPos = ref({
	left: "0",
	top: "0"
});

// 场景6对话框位置
const scene6DialogPos = ref({
	left: "0",
	top: "0"
});

// 通用：动态计算对话框位置
const calculateDialogPos = (sceneIndex) => {
	const systemInfo = uni.getSystemInfoSync();
	const screenWidth = systemInfo.windowWidth;
	const screenHeight = systemInfo.windowHeight;

	// 计算屏幕宽高比
	const ratio = screenWidth / screenHeight;

	// 获取当前场景的配置
	const configKey = `scene${sceneIndex}`;
	const config = dialogPosConfig.value[configKey] || dialogPosConfig.value.scene0;

	// 根据屏幕比例动态调整
	const leftBase = config.leftRatio;
	const leftAdjust = ratio > 0.5 ? (ratio - 0.5) * 0.3 : 0;

	currentDialogPos.value = {
		left: Math.round(screenWidth * (leftBase + leftAdjust)) + "px",
		top: Math.round(screenHeight * config.topRatio) + "px"
	};
};

// 计算图4对话框位置（覆盖在图3上面）
const calculateScene1DialogOnVideo3Pos = () => {
	const systemInfo = uni.getSystemInfoSync();
	const screenWidth = systemInfo.windowWidth;
	const screenHeight = systemInfo.windowHeight;

	const config = dialogPosConfig.value.scene1DialogOnVideo3;
	const ratio = screenWidth / screenHeight;
	const leftAdjust = ratio > 0.5 ? (ratio - 0.5) * 0.3 : 0;

	scene1DialogOnVideo3Pos.value = {
		left: Math.round(screenWidth * (config.leftRatio + leftAdjust)) + "px",
		top: Math.round(screenHeight * config.topRatio) + "px"
	};
};

// 计算图5对话框位置
const calculateScene2DialogOnVideo5Pos = () => {
	const systemInfo = uni.getSystemInfoSync();
	const screenWidth = systemInfo.windowWidth;
	const screenHeight = systemInfo.windowHeight;

	const config = dialogPosConfig.value.scene2DialogOnVideo5;
	const ratio = screenWidth / screenHeight;
	const leftAdjust = ratio > 0.5 ? (ratio - 0.5) * 0.3 : 0;

	scene2DialogOnVideo5Pos.value = {
		left: Math.round(screenWidth * (config.leftRatio + leftAdjust)) + "px",
		top: Math.round(screenHeight * config.topRatio) + "px"
	};
};

// 计算场景3（图2/图6）对话框位置
const calculateScene3DialogPos = () => {
	const systemInfo = uni.getSystemInfoSync();
	const screenWidth = systemInfo.windowWidth;
	const screenHeight = systemInfo.windowHeight;

	// 上部分对话框
	const configTop = dialogPosConfig.value.scene3_top;
	const ratio = screenWidth / screenHeight;
	const leftAdjust = ratio > 0.5 ? (ratio - 0.5) * 0.3 : 0;

	scene3DialogTopPos.value = {
		left: Math.round(screenWidth * (configTop.leftRatio + leftAdjust)) + "px",
		top: Math.round(screenHeight * configTop.topRatio) + "px"
	};

	// 下部分对话框
	const configBottom = dialogPosConfig.value.scene3_bottom;
	scene3DialogBottomPos.value = {
		left: Math.round(screenWidth * (configBottom.leftRatio + leftAdjust)) + "px",
		top: Math.round(screenHeight * configBottom.topRatio) + "px"
	};
};

// 计算场景4（图7/图8）对话框位置
const calculateScene4DialogPos = () => {
	const systemInfo = uni.getSystemInfoSync();
	const screenWidth = systemInfo.windowWidth;
	const screenHeight = systemInfo.windowHeight;

	const ratio = screenWidth / screenHeight;
	const leftAdjust = ratio > 0.5 ? (ratio - 0.5) * 0.3 : 0;

	// 上部分对话框
	const configTop = dialogPosConfig.value.scene4_top;
	scene4Dialog7Pos.value = {
		left: Math.round(screenWidth * (configTop.leftRatio + leftAdjust)) + "px",
		top: Math.round(screenHeight * configTop.topRatio) + "px"
	};

	// 下部分对话框
	const configBottom = dialogPosConfig.value.scene4_bottom;
	scene4Dialog8Pos.value = {
		left: Math.round(screenWidth * (configBottom.leftRatio + leftAdjust)) + "px",
		top: Math.round(screenHeight * configBottom.topRatio) + "px"
	};

	// 小怪兽位置 - 在图8对话框右边
	const configMonster = dialogPosConfig.value.scene4Monster;
	scene4MonsterPos.value = {
		left: 0 + "px",
		top: Math.round(screenHeight * configMonster.topRatio) + "px"
	};
};

// 计算场景6（图9）对话框位置
const calculateScene6DialogPos = () => {
	const systemInfo = uni.getSystemInfoSync();
	const screenWidth = systemInfo.windowWidth;
	const screenHeight = systemInfo.windowHeight;

	const config = dialogPosConfig.value.scene6;
	scene6DialogPos.value = {
		left: Math.round(screenWidth * config.leftRatio) + "px",
		top: Math.round(screenHeight * config.topRatio) + "px"
	};
};

// 响应式状态
const currentScene = ref(0);
const contentVisible = ref(false);
const dialogVisible = ref(false);
const monsterVisible = ref(false);

// 场景2的子阶段：0=只显示图3, 1=显示图3+图4, 2=显示图3+图4+图5
const scene2SubPhase = ref(0);

// 场景3的子阶段：0=只显示图2, 1=显示图2+图6
const scene3SubPhase = ref(0);

// 场景4的子阶段：0=只显示图7, 1=显示图7+图8
const scene4SubPhase = ref(0);

const currentText = computed(() => sceneTexts[currentScene.value]);

// 选择明星确认后调用注册接口
const onSelectRoleConfirm = async (star) => {
	console.log("[WelcomeAnimation] onSelectRoleConfirm called, star:", star);

	try {
		// 获取临时存储的注册信息
		const mobile = uni.getStorageSync("temp_register_mobile");
		const password = uni.getStorageSync("temp_register_password");
		const nickname = uni.getStorageSync("temp_register_nickname");
		const star_id = star.star_id;

		console.log("[WelcomeAnimation] register info:", {
			mobile,
			password,
			nickname,
			star_id,
		});

		if (!mobile || !password || !nickname || !star_id) {
			console.log("[WelcomeAnimation] 注册信息不完整");
			uni.showToast({
				title: "注册信息不完整",
				icon: "none",
			});
			// 清除已选择的注册信息，重新注册
			uni.removeStorageSync("temp_register_mobile");
			uni.removeStorageSync("temp_register_password");
			uni.removeStorageSync("temp_register_nickname");
			// 返回注册页面重新注册
			uni.navigateTo({
				url: '/pages/register/register'
			});
			return;
		}

		// 显示加载提示
		uni.showLoading({
			title: "注册中...",
			mask: true,
		});

		// 调用注册 API
		console.log("[WelcomeAnimation] 开始调用注册API");
		await store.dispatch("user/register", {
			mobile,
			password,
			star_id,
			nickname,
		});
		console.log("[WelcomeAnimation] 注册API调用成功");

		uni.hideLoading();

		// 清除临时数据
		uni.removeStorageSync("temp_register_mobile");
		uni.removeStorageSync("temp_register_password");
		uni.removeStorageSync("temp_register_nickname");

		// 跳转到场景6
		console.log("[WelcomeAnimation] 跳转到场景6");
		currentScene.value = 5;
		// 2秒后自动结束
		setTimeout(() => {
			handleFinish();
		}, 2000);
	} catch (error) {
		console.log("[WelcomeAnimation] 注册失败:", error);
		uni.hideLoading();
		uni.showToast({
			title: error.message || "注册失败，请重试",
			icon: "none",
		});
		// 清除已选择的注册信息，重新注册
		uni.removeStorageSync("temp_register_mobile");
		uni.removeStorageSync("temp_register_password");
		uni.removeStorageSync("temp_register_nickname");
		// 返回注册页面重新注册
		uni.navigateTo({
			url: '/pages/register/register'
		});
	}
};

// 点击背景显示文字和箭头，处理场景2的子阶段切换
const onBgClick = (e) => {
	// 阻止事件冒泡，避免触发背景点击
	e && e.stopPropagation && e.stopPropagation();

	// 场景2：处理子阶段切换
	if (currentScene.value === 1) {
		if (scene2SubPhase.value === 0) {
			// 图3显示时，点击立即进入下一阶段显示图4
			scene2SubPhase.value = 1;
		} else if (scene2SubPhase.value === 1) {
			// 图4显示时，点击立即进入下一阶段显示图5
			scene2SubPhase.value = 2;
		} else if (scene2SubPhase.value === 2) {
			// 图5显示时，点击显示Topfans文字+箭头
			if (!contentVisible.value) {
				contentVisible.value = true;
			}
		}
		return;
	}

	// 场景3：处理子阶段切换
	if (currentScene.value === 2) {
		if (scene3SubPhase.value === 0) {
			// 图2显示时，点击立即进入下一阶段显示图6
			scene3SubPhase.value = 1;
		} else if (scene3SubPhase.value === 1) {
			// 图6显示时，点击显示Topfans文字+箭头
			if (!contentVisible.value) {
				contentVisible.value = true;
			}
		}
		return;
	}

	// 场景4：处理子阶段切换
	if (currentScene.value === 3) {
		if (scene4SubPhase.value === 0) {
			// 图7显示时，点击立即进入下一阶段显示图8
			scene4SubPhase.value = 1;
		} else if (scene4SubPhase.value === 1) {
			// 图8显示时，点击显示Topfans文字+箭头
			if (!contentVisible.value) {
				contentVisible.value = true;
			}
		}
		return;
	}

	// 其他场景：点击显示文字和箭头
	if (currentScene.value <= 3 && !contentVisible.value) {
		contentVisible.value = true;
	}
};

let carouselTimer = null;
let autoShowTimer = null;

// 切换到下一个场景
const nextScene = () => {
	if (currentScene.value === 0) {
		// 场景1: 切换到场景2 (图3、图4、图5 上中下)
		currentScene.value = 1;
		resetSceneAnimation();
	} else if (currentScene.value === 1) {
		// 场景2: 切换到场景3 (图2、图6 上下)
		currentScene.value = 2;
		resetSceneAnimation();
	} else if (currentScene.value === 2) {
		// 场景3: 切换到场景4 (图7、图8 上下)
		currentScene.value = 3;
		resetSceneAnimation();
	} else if (currentScene.value === 3) {
		// 场景4: 切换到场景5（选择明星）
		currentScene.value = 4;
		resetSceneAnimation();
	} else if (currentScene.value === 4) {
		// 场景5: 选择明星页面，由组件触发确认事件
		// 不做任何操作，等待用户选择明星后触发 onSelectRoleConfirm
	} else {
		handleFinish();
	}
};

// 跳过
const handleSkip = () => {
	cleanup();
	emit("skip");
};

// 完成
const handleFinish = () => {
	cleanup();
	uni.setStorageSync("has_seen_welcome", true);
	emit("complete");
};

// 重置场景动画
const resetSceneAnimation = () => {
	// 清除之前的自动显示定时器
	if (autoShowTimer) {
		clearTimeout(autoShowTimer);
		autoShowTimer = null;
	}

	contentVisible.value = false;
	dialogVisible.value = false;
	monsterVisible.value = false;

	// 场景2子阶段重置
	scene2SubPhase.value = 0;

	// 切换场景时只自动显示对话框和小怪兽，文字和箭头需要点击显示
	setTimeout(() => {
		dialogVisible.value = true;
	}, 300);

	setTimeout(() => {
		monsterVisible.value = true;
	}, 800);

	// 切换场景时重新计算对话框位置
	calculateDialogPos(currentScene.value);

	// 场景1: 5秒后自动显示文字和箭头
	if (currentScene.value === 0) {
		autoShowTimer = setTimeout(() => {
			contentVisible.value = true;
		}, 4800);
	}

	// 场景2: 自动逐步显示（只在用户没有手动点击时触发）
	if (currentScene.value === 1) {
		// 图3显示后4秒，自动进入下一阶段显示图4
		autoShowTimer = setTimeout(() => {
			if (scene2SubPhase.value === 0) {
				scene2SubPhase.value = 1;
			}
			// 图4显示后4秒，自动进入下一阶段显示图5
			autoShowTimer = setTimeout(() => {
				if (scene2SubPhase.value === 1) {
					scene2SubPhase.value = 2;
				}
				// 图5显示后10秒，自动显示Topfans文字+箭头
				autoShowTimer = setTimeout(() => {
					if (!contentVisible.value) {
						contentVisible.value = true;
					}
				}, 9800);
			}, 3800);
		}, 3800);
	}

	// 场景3: 自动逐步显示
	if (currentScene.value === 2) {
		// 图2显示后4秒，自动进入下一阶段显示图6
		autoShowTimer = setTimeout(() => {
			if (scene3SubPhase.value === 0) {
				scene3SubPhase.value = 1;
			}
			// 图6显示后10秒，自动显示Topfans文字+箭头
			autoShowTimer = setTimeout(() => {
				if (!contentVisible.value) {
					contentVisible.value = true;
				}
			}, 2800);
		}, 8800);
	}

	// 场景4: 自动逐步显示
	if (currentScene.value === 3) {
		// 图7显示后4秒，自动进入下一阶段显示图8
		autoShowTimer = setTimeout(() => {
			if (scene4SubPhase.value === 0) {
				scene4SubPhase.value = 1;
			}
			// 图8显示后10秒，自动显示Topfans文字+箭头
			autoShowTimer = setTimeout(() => {
				if (!contentVisible.value) {
					contentVisible.value = true;
				}
			}, 7800);
		}, 3800);
	}
};

// 清理定时器
const cleanup = () => {
	if (carouselTimer) {
		clearInterval(carouselTimer);
		carouselTimer = null;
	}
	if (autoShowTimer) {
		clearTimeout(autoShowTimer);
		autoShowTimer = null;
	}
};

// 启动视频轮播（仅场景1、5、6需要自动切换）
const startCarousel = () => {
	// 场景2-4不需要轮播，每个场景只显示一次
	carouselTimer = setInterval(() => {
		// 这里可以留作未来扩展，目前场景2-4不需要自动切换
	}, 3000);
};

onMounted(() => {
	// 动态计算当前场景对话框位置
	calculateDialogPos(currentScene.value);

	// 计算图4对话框位置
	calculateScene1DialogOnVideo3Pos();
	calculateScene2DialogOnVideo5Pos();
	calculateScene3DialogPos();
	calculateScene4DialogPos();
	calculateScene6DialogPos();

	// 初始动画 - 对话框和小怪兽自动显示，文字和箭头需要点击显示
	setTimeout(() => {
		dialogVisible.value = true;
	}, 500);

	setTimeout(() => {
		monsterVisible.value = true;
	}, 1500);

	// 场景1: 5秒后自动显示 Topfans文字+箭头
	if (currentScene.value === 0) {
		autoShowTimer = setTimeout(() => {
			contentVisible.value = true;
		}, 5000);
	}

	// 启动轮播
	startCarousel();
});

onUnmounted(() => {
	cleanup();
});
</script>

<style scoped>
@font-face {
	/* 这里给字体起个名字，随便取，只要好记就行，比如 'MyAnimFont' */
	font-family: "MyAnimFont";

	/* 这里才是放 url 的地方 */
	src: url("/static/fonts/animation.ttf") format("truetype");

	/* 可选：定义字重和样式，防止浏览器乱猜 */
	font-weight: normal;
	font-style: normal;
}

.welcome-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	background: white;
}

.header-text {
	width: 176rpx;
	font-size: 64rpx;
	background: linear-gradient(45deg, #b52920 20%, #56c1ff, #86d9e0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: absolute;
	right: 48rpx;
	top: 16rpx;
	z-index: 5;
	font-family: "MyAnimFont", sans-serif;
}

.header-text::first-letter {
	font-size: 96rpx;
	margin-left: 8px;
	line-height: 1;
}

.background-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.bg-media {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.scene-role {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* 场景1独立区域 */
.scene1-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* 场景1对话框样式 */
.scene1-dialog {
	position: absolute;
	width: 420rpx;
	opacity: 0;
	transform: translateY(20rpx);
	transition: all 0.5s ease;
	pointer-events: none;
	z-index: 10;
}

.dialog-bg.dialog-bg-oval-1 {
	transform: scale(1.95);
}

.dialog-bg.dialog-bg-oval-2 {
	transform: scale(5);
}

.dialog-bg.dialog-bg-oval-3 {
	transform: scale(4);
}

.dialog-bg.dialog-bg-oval-4 {
	transform: scale(1.6);
}

.dialog-bg.dialog-bg-oval-5 {
	transform: scale(1.6);
}

.scene1-dialog.visible {
	opacity: 1;
	transform: translateY(0);
}

/* 场景2三个独立区域 */
.scene2-layout {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

/* 场景2三个独立区域 - 使用固定高度 */
.scene2-item {
	position: absolute;
	left: 16rpx;
	right: 16rpx;
	overflow: hidden;
}

/* 图3: 上部分 */
.scene2-item-1 {
	top: 128rpx;
	height: 25%;
}

/* 图4: 中部分 */
.scene2-item-2 {
	top: calc(128rpx + 25% + 16rpx);
	height: 30%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.scene2-item-2.visible {
	opacity: 1;
}

/* 图5: 下部分 */
.scene2-item-3 {
	bottom: 32rpx;
	height: 30%;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.scene2-item-3.visible {
	opacity: 1;
}

.scene2-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 图4视频：靠右，宽度4/5 */
.scene2-video-right {
	left: auto;
	right: 0;
	width: 80%;
	height: 90%;
}

/* 场景2对话框样式 */
.scene2-dialog,
.scene2-dialog-bottom {
	position: absolute;
	right: 0;
	width: 80%;
	opacity: 0;
	transform: translateY(20rpx);
	transition: all 0.5s ease;
	pointer-events: auto;
}

.scene2-dialog.visible,
.scene2-dialog-bottom.visible {
	opacity: 1;
	transform: translateY(0);
}

/* 图4对话框覆盖在图3上面 */
.scene2-dialog-on-video3 {
	position: absolute;
	width: 420rpx;
	opacity: 0;
	transform: translateY(20rpx);
	transition: all 0.5s ease;
	pointer-events: none;
	z-index: 10;
}

/* 图5对话框覆盖在图4上面 */
.scene2-dialog-on-video4 {
	position: absolute;
	width: 420rpx;
	opacity: 0;
	transform: translateY(20rpx);
	transition: all 0.5s ease;
	pointer-events: none;
	z-index: 10;
}

.scene2-dialog-on-video3.visible,
.scene2-dialog-on-video4.visible {
	opacity: 1;
	transform: translateY(0);
}

.scene2-dialog {
	top: 20%;
}

.scene2-dialog-bottom {
	bottom: 20%;
}

.dialog-bg.dialog-bg-oval {
	transform: scale(4.5);
}

.dialog-bg.dialog-bg-oval1 {
	transform: scale(1.5);
	top: 32rpx;
}

/* 场景4两个独立区域 */
.scene4-layout {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.scene4-item {
	position: relative;

}

.scene4-item-1 {
	margin: 256rpx 16rpx 32rpx 16rpx;
	height: 25%;
}

.scene4-item-2 {
	height: 30%;
	width: 75%;
	margin: 0 0 0 auto;
}

.scene4-monster {
	position: absolute;
	width: 144rpx;
	height: 144rpx;
	z-index: 1;
	transform: scale(4);
}

.scene4-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 场景4对话框样式 */
.scene4-dialog,
.scene4-dialog-bottom {
	position: absolute;
	left: 40rpx;
	width: 420rpx;
	opacity: 0;
	transform: translateY(20rpx);
	transition: all 0.5s ease;
	pointer-events: auto;
}

.scene4-dialog.visible,
.scene4-dialog-bottom.visible {
	opacity: 1;
	transform: translateY(0);
}

.scene4-dialog {
	top: 20%;
}

.scene4-dialog-bottom {
	bottom: 20%;
}

/* 场景3上下布局 (上2/3, 下1/3) */
.scene3-layout {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
}

.scene3-top {
	height: 60%;
	position: relative;
	margin: 96rpx 16rpx 32rpx 16rpx;
	border-radius: 0.8rpx;
}

.scene3-bottom {
	height: 20%;
	width: 640rpx;
	position: relative;
	margin: 0 16rpx 0 auto;
}

.scene3-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 场景3对话框样式 */
.scene3-top,
.scene3-bottom {
	position: relative;
}

.skip-btn {
	position: absolute;
	top: 80rpx;
	right: 40rpx;
	z-index: 10;
	padding: 16rpx 32rpx;
	background: rgba(0, 0, 0, 0.5);
	border-radius: 30rpx;
	border: 2rpx solid rgba(255, 255, 255, 0.5);
}

.skip-text {
	font-size: 28rpx;
	color: #fff;
}

/* Topfans文字 + 箭头整体 */
.topfans-arrow-wrapper {
	position: absolute;
	left: 40rpx;
	right: 40rpx;
	bottom: 0;
	transform: translateY(-50%) translateX(-50rpx);
	opacity: 0;
	transition: all 0.5s ease;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	pointer-events: none;
}

.topfans-arrow-wrapper.visible {
	pointer-events: auto;
}

.topfans-arrow-wrapper.visible {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.topfans-text {
	width: 640rpx;
	font-size: 96rpx;
	background: linear-gradient(45deg, #b52920 10%, #56c1ff, #86d9e0);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-family: "MyAnimFont", sans-serif;
}

.topfans-text::first-letter {
	font-size: 112;
	/* 设置为首行文字大小的3倍 */
	margin-left: 8px;
	/* 可选：与后续文字保持间距 */
	line-height: 1;
	/* 可选：调整行高以防错位 */
}

.arrow-icon {
	display: inline-block;
	width: 0;
	height: 0;

	/* 1. 画三角形形状 */
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 25px solid #ffcccc;
	/* 这里的颜色会被渐变覆盖，随便写个浅色即可 */

	/* 2. 设置渐变色 (从左到右：粉色 -> 黄色) */
	/* 注意：为了让渐变填满三角形，我们需要一个伪元素或者特殊技巧，
       但更简单的方法是直接用 background-image 配合 clip-path (现代浏览器) 
       或者保持上面的 border 写法，用 filter 上色（兼容性最好但渐变难做）。
       
       【修正方案】：为了完美渐变 + 阴影，我们用 clip-path 画法更精准：
    */
	width: 128rpx;
	/* 箭头总宽 */
	height: 64rpx;
	/* 箭头总高 */
	border: none;
	/* 清除边框画法 */

	/* 使用背景渐变 */
	background: linear-gradient(35deg, rgba(255, 107, 157, 0.9) 35%, rgba(255, 177, 153, 0.9) 70%);

	/* 使用 clip-path 切割出“尾巴+三角”的形状 */
	/* 这是一个类似图片中形状的坐标点：左边有个小尾巴，右边是大三角 */
	clip-path: polygon(0% 40%,
			/* 左上尾巴起点 */
			40% 40%,
			/* 尾巴连接处上 */
			40% 0%,
			/* 三角形顶点上 */
			100% 50%,
			/* 最右侧尖端 */
			40% 100%,
			/* 三角形顶点下 */
			40% 60%,
			/* 尾巴连接处下 */
			0% 60%
			/* 左下尾巴终点 */
		);

	/* 3. 添加立体阴影 (关键步骤) */
	/* drop-shadow 比 box-shadow 更适合不规则形状 */
	filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.3));

	vertical-align: middle;
	margin: 0 10px;
}

/* 内容层 */
.content-layer {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.dialog-wrapper {
	position: absolute;
	left: 35%;
	top: 20%;
	width: 420rpx;
	opacity: 0;
	transform: translateY(20rpx);
	transition: all 0.5s ease;
	pointer-events: auto;
}

.dialog-wrapper.visible {
	opacity: 1;
	transform: translateY(0);
}

.dialog-bg {
	position: absolute;
	top: 8rpx;
	left: 0;
	width: 100%;
	height: 200rpx;
	z-index: 0;
	transform: scale(1.2);
	pointer-events: none;

}

.dialog-text-wrapper {
	position: relative;
	z-index: 1;
	padding: 40rpx 50rpx 50rpx 50rpx;
	min-height: 120rpx;
	display: flex;
	align-items: center;
	left: 15%;
}

.dialog-text {
	font-size: 30rpx;
	color: #333;
	line-height: 1.5;
	font-weight: 500;
}

/* 场景1文字上下居中样式 */
.dialog-text-wrapper-vertical {
	position: relative;
	left: 80rpx;
	z-index: 1;
	width: 256rpx;
	height: 200rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video3 {
	left: 48rpx;
	width: 320rpx;
}

.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video4 {
	left: 56rpx;
	bottom: 32rpx;
	width: 320rpx;
}

.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video5 {
	left: 24rpx;
	width: 336rpx;
}

.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video6 {
	width: 224rpx;
	left: 80rpx;
}

.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video7 {
	width: 352rpx;
	bottom: 16rpx;
	left: 80rpx;
}
.dialog-text-wrapper-vertical.dialog-text-wrapper-vertical-on-video8 {
	width: 356rpx;
	left: 80rpx;
}


.dialog-text-vertical {
	font-size: 24rpx;
	color: #333;
	font-weight: 500;
	text-align: center;
	letter-spacing: 4rpx;
	line-height: 40rpx;
}

.dialog-text-vertical.dialog-text-vertical-on-video5 {
	font-size: 32rpx;
}

.monster {
	position: absolute;
	right: 160rpx;
	bottom: 20%;
	width: 280rpx;
	height: 280rpx;
	opacity: 0;
	transform: translateX(50rpx);
	transition: all 0.6s ease;
	pointer-events: auto;
}

.monster.visible {
	opacity: 1;
	transform: translateX(0);
}

/* 场景6背景 */

.scene6-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}

.scene6-bg {
	position: relative;
	height: 100%;
}

</style>
