<template>
	<view class="header-container">
		<!-- 返回按钮（可选） -->
		<view v-if="showBack" class="back-button" @click="handleBack">
			<text class="back-icon" :style="{ color: backIconColor }">←</text>
		</view>

		<!-- 右侧图标区域 -->
		<view class="right-icons">
			<!-- 任务图标 -->
			<view v-if="showTaskIcon" class="daily-task-group" @click="handleTaskClick">
				<!-- 1. 上层：任务图标（悬浮在上面） -->
				<view class="task-icon-box">
					<image class="task-icon-img" src="/static/icon/task.png" mode="aspectFit"></image>
					<view class="task-red-dot"></view>
				</view>

				<!-- 2. 下层：文字背景块 -->
				<view class="task-text-box">
					<text class="task-text-label">每日任务</text>
				</view>
			</view>

			<!-- 新手引导 -->
			<view v-if="showGuideIcon" class="daily-task-group" @click="handleGuideClick">
				<!-- 1. 上层：新手引导（悬浮在上面） -->
				<view class="task-icon-box">
					<image class="task-icon-img" src="/static/icon/onboarding-bg.png" mode="aspectFit"></image>
					<view class="task-red-dot"></view>
				</view>

				<!-- 2. 下层：文字背景块 -->
				<view class="task-text-box">
					<text class="task-text-label">新手引导</text>
				</view>
			</view>

			<!-- 星援活动 -->
			<view v-if="showStarActivityIcon" class="daily-task-group" @click="handleTaskClick">
				<!-- 1. 上层：星援活动（悬浮在上面） -->
				<view class="task-icon-box">
					<image class="task-icon-img" src="/static/icon/bus-icon.png" mode="aspectFit"></image>
					<view class="task-red-dot"></view>
				</view>

				<!-- 2. 下层：文字背景块 -->
				<view class="task-text-box">
					<text class="task-text-label">星援活动</text>
				</view>
			</view>

			<!-- 顶粉水晶余额 -->
			<view class="crystal-balance-new">
				<!-- 1. 左侧钻石图标：层级最高，盖住右侧背景 -->
				<view class="crystal-icon-box">
					<image class="crystal-icon" src="/static/icon/crystal.png" mode="aspectFit"></image>
				</view>

				<!-- 2. 右侧容器：用于包裹背景和文字 -->
				<view class="crystal-info-container">

					<!-- 上层：文字内容（层级中间，盖住背景） -->
					<view class="crystal-text-layer">
						<text class="balance-number">{{ crystalBalance }}</text>
					</view>

					<!-- 下层：渐变背景（层级最低，被文字盖住，但盖住容器底色） -->
					<view class="crystal-bg-layer">
						<text class="balance-income">收益 27.1/H</text>
					</view>

				</view>
			</view>


			<!-- 用户头像 -->
			<view class="icon-item avatar-icon" @click="handleAvatarClick">
				<Avatar :key="avatarKey" :userId="userUid" :avatarUrl="userAvatarUrl" :size="96" :borderWidth="2" />
			</view>
		</view>

		<!-- 任务弹窗 -->
		<TaskModal :visible="showTaskModal" @close="closeTaskModal" />

		<!-- 新手引导列表弹窗 -->
		<GuideListModal :visible="showGuideListModal" @start-guide="handleStartGuide"
			@claim-success="handleClaimSuccess" @close="showGuideListModal = false" />
	</view>
</template>

<script setup>
import { computed, ref, onMounted, onUnmounted } from 'vue';
import { useStore } from 'vuex';
import Avatar from './Avatar.vue';
import TaskModal from './TaskModal.vue';
import GuideListModal from '@/components/GuideListModal.vue';

// 定义 props
const props = defineProps({
	showBack: {
		type: Boolean,
		default: false
	},
	backUrl: {
		type: String,
		default: ''
	},
	backIconColor: {
		type: String,
		default: '#000000'
	},
	showTaskIcon: {
		type: Boolean,
		default: true
	},
	showGuideIcon: {
		type: Boolean,
		default: true
	},
	showStarActivityIcon: {
		type: Boolean,
		default: true
	}
});

const store = useStore();

// 使用ref存储用户信息，使其具有响应式
const userInfo = ref(null);
const avatarKey = ref(0); // 用于强制刷新Avatar组件

// 任务弹窗显示状态
const showTaskModal = ref(false);

// 新手引导弹窗显示状态
const showGuideListModal = ref(false);

// 从本地存储读取用户信息
const loadUserInfo = () => {
	try {
		const userStr = uni.getStorageSync('user');
		if (userStr) {
			userInfo.value = JSON.parse(userStr);
		}
	} catch (e) {
		console.error('解析用户信息失败:', e);
		userInfo.value = null;
	}
};

// 获取用户UID
const userUid = computed(() => {
	return userInfo.value?.uid || '';
});

// 获取用户头像URL
const userAvatarUrl = computed(() => {
	return userInfo.value?.avatar_url || '';
});

// 获取水晶余额
const crystalBalance = computed(() => {
	return userInfo.value?.crystal_balance ?? 9527;
});

// 监听头像更新事件
const handleAvatarUpdate = (data) => {
	// 重新加载用户信息（含新 avatar_url）
	loadUserInfo();
	// 强制刷新Avatar组件
	avatarKey.value += 1;
};

// 监听用户信息更新事件（如切换身份）
const handleUserInfoUpdate = () => {
	loadUserInfo();
	avatarKey.value += 1;
};

// 监听余额更新事件
const handleBalanceUpdate = (data) => {
	if (userInfo.value) {
		userInfo.value = { ...userInfo.value, crystal_balance: data.crystal_balance };
	} else {
		loadUserInfo();
	}
};

// 组件挂载时加载用户信息并监听事件
onMounted(() => {
	loadUserInfo();
	uni.$on('avatarUpdated', handleAvatarUpdate);
	uni.$on('userInfoUpdated', handleUserInfoUpdate);
	uni.$on('balanceUpdated', handleBalanceUpdate);
});

// 组件卸载时移除事件监听
onUnmounted(() => {
	uni.$off('avatarUpdated', handleAvatarUpdate);
	uni.$off('userInfoUpdated', handleUserInfoUpdate);
	uni.$off('balanceUpdated', handleBalanceUpdate);
});

// 处理返回按钮点击
const handleBack = () => {
	if (props.backUrl) {
		uni.navigateTo({
			url: props.backUrl
		});
	} else {
		// 获取页面栈
		const pages = getCurrentPages();
		if (pages.length > 1) {
			// 有上一页，执行返回
			uni.navigateBack();
		} else {
			// 没有上一页，跳转到square页面
			uni.reLaunch({
				url: '/pages/square/square'
			});
		}
	}
};

// 处理任务图标点击
const handleTaskClick = () => {
	showTaskModal.value = true;
};

// 点击新手引导
const handleGuideClick = () => {
	showGuideListModal.value = true;
};

// 执行引导
const handleStartGuide = (params) => {
	const key = typeof params === 'string' ? params : (params?.key || '');
	const fromStep = typeof params === 'object' ? (params.fromStep ?? 0) : 0;
	const targetPage = typeof params === 'object' ? (params.targetPage || '') : '';

	console.log('[Header] handleStartGuide:', { key, fromStep, targetPage });

	showGuideListModal.value = false;

	// 根据引导类型跳转到对应页面
	if (key === 'square_home') {
		const navigateUrl = targetPage || '/pages/square/square';
		uni.navigateTo({
			url: navigateUrl,
			success: () => {
				setTimeout(() => {
					if (fromStep === 0) {
						store.dispatch("guide/startGuideFromBeginning", key);
					} else {
						store.dispatch("guide/resumeGuide", key);
					}
				}, 500);
			}
		});
	} else {
		if (fromStep === 0) {
			store.dispatch("guide/startGuideFromBeginning", key);
		} else {
			store.dispatch("guide/resumeGuide", key);
		}
	}
};

// 领取奖励成功
const handleClaimSuccess = (reward) => {
	console.log("[Header] 领取奖励成功:", reward);
};

// 关闭任务弹窗
const closeTaskModal = () => {
	showTaskModal.value = false;
};

// 处理头像点击
const handleAvatarClick = () => {
	// 获取当前页面栈
	const pages = getCurrentPages();
	if (pages.length > 0) {
		const currentPage = pages[pages.length - 1];
		// 检查当前页面是否是个人信息页面
		if (currentPage.route === 'pages/profile/profile') {
			// 已经在个人信息页面，不执行跳转
			return;
		}
	}
	uni.navigateTo({
		url: '/pages/profile/profile'
	});
};

// 将方法暴露给模板
defineExpose({
	showTaskModal,
	closeTaskModal
});
</script>

<style scoped>
.header-container {
	position: fixed;
	top: 80rpx;
	left: 0;
	right: 0;
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 32rpx;
	box-sizing: border-box;
	z-index: 200;
}

.back-button {
	width: 60rpx;
	height: 60rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.back-icon {
	font-size: 48rpx;
	font-weight: bold;
}

.right-icons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* gap: 30rpx; */
	margin-left: auto;
}

.daily-task-group {
	position: relative;
	/* 必须是相对定位，作为子元素的定位基准 */
	width: 100rpx;
	/* 控制整体宽度，根据图标大小调整 */
	height: 120rpx;
	/* 预估高度，包含图标和文字块 */
}

/* --- 上层图标样式 --- */
.task-icon-box {
	position: absolute;
	top: 0;
	/* 固定在顶部 */
	left: 50%;
	transform: translateX(-50%);
	/* 水平居中 */
	width: 90rpx;
	/* 图标宽度 */
	height: 90rpx;
	/* 图标高度 */
	z-index: 10;
	/* 确保图标在文字块上面 */
}

.task-icon-img {
	width: 100%;
	height: 100%;
}

/* 红点样式 */
.task-red-dot {
	position: absolute;
	top: 6rpx;
	right: 6rpx;
	width: 16rpx;
	height: 16rpx;
	background-color: red;
	border-radius: 50%;
	border: 2rpx solid #fff;
}

/* --- 下层文字背景块 --- */
.task-text-box {
	position: absolute;
	top: 48rpx;
	/* 关键：调整这个值，让文字块往上顶，与图标产生重叠 */
	left: 50%;
	transform: translateX(-50%);
	width: 88rpx;
	height: 80rpx;
	background: linear-gradient(to bottom right,
			#F0E4B1 0%,
			/* 左：浅橙粉 */
			#F08399 50%,
			#B94E73 100%
			/* 右：柔粉红 */
		);


	/* 立体感核心：多层阴影 + 内阴影模拟凸起 */
	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);
	/* 底部暗部 */
	/* 粉色渐变背景，可微调 */
	border-radius: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	/* 必须比图标小，才能被覆盖 */
	box-shadow: 0 4rpx 10rpx rgba(255, 107, 187, 0.3);
	/* 可选：增加一点阴影层次感 */
}

.task-text-label {
	font-size: 18rpx;
	color: #fff;
	text-shadow: 1rpx 1rpx 2rpx rgba(255, 255, 255, 0.5);
	margin-top: 24rpx;

}

/* 水晶余额组件 */
.crystal-balance-new {
	height: 120rpx;
	display: flex;
	align-items: center;
	/* 底部对齐 */
	position: relative;
	/* 左侧留出足够空间给钻石图标，防止文字被压在图标正下方 */
	padding-left: 50rpx;
	top: 8rpx;
}

/* --- 左侧钻石图标 --- */
.crystal-icon-box {
	position: absolute;
	left: 0;
	bottom: 10rpx;
	/* 与右侧底部平齐 */
	z-index: 10;
	/* 最高层级：盖住右侧背景 */
	width: 100rpx;
	height: 100rpx;
}

.crystal-icon {
	width: 100%;
	height: 100%;
}

/* --- 右侧容器 --- */
.crystal-info-container {
	position: relative;
	/* 自动撑开宽度 */
	height: 56rpx;
	width: 80rpx;
	/* 容器高度 */
	border-radius: 16rpx;
	background: rgba(0, 0, 0, 0.5);
	bottom: 4rpx;
	padding-right: 28rpx;
	padding-left: 56rpx;
}

/* --- 上层：文字内容 --- */
.crystal-text-layer {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 8rpx;
}

.balance-number {
	font-size: 22rpx;
	font-weight: bold;
	color: #FFB800;
	font-family: 'ZaoZiGongFangJianHei-1', sans-serif;
	text-shadow:
		0 0 10rpx rgba(255, 184, 0, 0.8),
		0 2rpx 4rpx rgba(0, 0, 0, 0.5);
	letter-spacing: 1rpx;
	display: flex;
	align-items: center;
	white-space: nowrap;
}

.balance-income {
	font-size: 18rpx;
	color: #FFFFFF;
	margin-bottom: 2rpx;
	margin-left: 28rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}

/* --- 下层：渐变背景 --- */
.crystal-bg-layer {
	display: flex;
	align-items: center;
    justify-content: center;
	position: absolute;
	bottom: -18rpx;
	left: 0;
	width: 100%;
	height: 65%;
	z-index: 1;
	/* 关键：层级低于文字，高于透明底色 */

	background: linear-gradient(to bottom right,
			#F0E4B1 0%,
			/* 左：浅橙粉 */
			#F08399 50%,
			#B94E7399 100%
			/* 右：柔粉红 */
		);


	/* 立体感核心：多层阴影 + 内阴影模拟凸起 */
	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);
	/* 底部暗部 */
	border-radius: 10rpx;

}

.icon-item {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-left: 32rpx;
	margin-top: 16rpx;
}

.task-icon {
	width: 64rpx;
	height: 64rpx;
}

.icon-image {
	width: 100%;
	height: 100%;
}

.avatar-icon {
	width: 60rpx;
	height: 60rpx;
}
</style>
