<template>
	<view class="personality-container">
		<!-- 顶部操作栏 -->
		<view class="top-action-bar">
			<view class="action-item" @click="showHelp = true">
				<u-icon name="question-circle" size="20" color="#666666"></u-icon>
				<text class="action-text">帮助</text>
			</view>
		</view>

		<!-- 进度指示器 -->
		<view class="progress-container">
			<view class="progress-bar">
				<view class="progress-fill" :style="{ width: (currentStep / totalSteps) * 100 + '%' }"></view>
			</view>
			<text class="progress-text">{{ currentStep }}/{{ totalSteps }}</text>
		</view>

		<!-- 问卷内容 -->
		<view class="questionnaire-content">
			<!-- 第一步：基本性格倾向 -->
			<view class="question-section" v-if="currentStep === 1">
				<view class="question-header">
					<text class="question-title">🐾 基本性格倾向</text>
					<text class="question-subtitle">选择最符合你家宠物的描述</text>
				</view>
				<view class="options-grid">
					<view 
						class="option-card" 
						v-for="option in basicPersonalityOptions" 
						:key="option.value"
						:class="{ active: selectedAnswers.basicPersonality === option.value }"
						@click="selectOption('basicPersonality', option.value)"
					>
						<text class="option-emoji">{{ option.emoji }}</text>
						<text class="option-title">{{ option.title }}</text>
						<text class="option-desc">{{ option.desc }}</text>
					</view>
				</view>
			</view>

			<!-- 第二步：社交倾向 -->
			<view class="question-section" v-if="currentStep === 2">
				<view class="question-header">
					<text class="question-title">👥 社交倾向</text>
					<text class="question-subtitle">你的宠物对人和其他动物的态度</text>
				</view>
				<view class="options-grid">
					<view 
						class="option-card" 
						v-for="option in socialOptions" 
						:key="option.value"
						:class="{ active: selectedAnswers.social === option.value }"
						@click="selectOption('social', option.value)"
					>
						<text class="option-emoji">{{ option.emoji }}</text>
						<text class="option-title">{{ option.title }}</text>
						<text class="option-desc">{{ option.desc }}</text>
					</view>
				</view>
			</view>

			<!-- 第三步：活动水平 -->
			<view class="question-section" v-if="currentStep === 3">
				<view class="question-header">
					<text class="question-title">⚡ 活动水平</text>
					<text class="question-subtitle">你的宠物平时的活跃程度</text>
				</view>
				<view class="options-grid">
					<view 
						class="option-card" 
						v-for="option in activityOptions" 
						:key="option.value"
						:class="{ active: selectedAnswers.activity === option.value }"
						@click="selectOption('activity', option.value)"
					>
						<text class="option-emoji">{{ option.emoji }}</text>
						<text class="option-title">{{ option.title }}</text>
						<text class="option-desc">{{ option.desc }}</text>
					</view>
				</view>
			</view>

			<!-- 第四步：特殊习惯 -->
			<view class="question-section" v-if="currentStep === 4">
				<view class="question-header">
					<text class="question-title">🎯 特殊习惯</text>
					<text class="question-subtitle">选择你的宠物具有的特殊习惯（可多选）</text>
				</view>
				<view class="habits-grid">
					<view 
						class="habit-tag" 
						v-for="habit in habitOptions" 
						:key="habit.value"
						:class="{ active: selectedAnswers.habits.includes(habit.value) }"
						@click="toggleHabit(habit.value)"
					>
						<text class="habit-emoji">{{ habit.emoji }}</text>
						<text class="habit-text">{{ habit.title }}</text>
					</view>
				</view>
			</view>

			<!-- 第五步：性格结果 -->
			<view class="result-section" v-if="currentStep === 5">
				<view class="result-header">
					<text class="result-title">🎉 性格分析完成</text>
					<text class="result-subtitle">为你的宠物生成了专属性格档案</text>
				</view>
				<view class="personality-result">
					<view class="personality-type">
						<text class="type-emoji">{{ personalityResult.emoji }}</text>
						<text class="type-name">{{ personalityResult.typeName }}</text>
					</view>
					<view class="personality-description">
						<text class="desc-text">{{ personalityResult.description }}</text>
					</view>
					<view class="personality-tags">
						<u-tag 
							v-for="tag in personalityResult.tags" 
							:key="tag" 
							:text="tag" 
							type="primary" 
							size="small"
							plain
						></u-tag>
					</view>
					<view class="care-suggestions">
						<text class="suggestions-title">💡 饲养建议</text>
						<view class="suggestion-item" v-for="suggestion in personalityResult.suggestions" :key="suggestion">
							<text class="suggestion-text">• {{ suggestion }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作按钮 -->
		<view class="bottom-actions">
			<u-button 
				v-if="currentStep > 1 && currentStep < 5" 
				text="上一步" 
				type="info" 
				plain 
				@click="prevStep"
			></u-button>
			<u-button 
				v-if="currentStep < 4" 
				text="下一步" 
				type="primary" 
				:disabled="!canProceed"
				@click="nextStep"
			></u-button>
			<u-button 
				v-if="currentStep === 4" 
				text="生成性格档案" 
				type="primary" 
				:disabled="!canProceed"
				@click="generatePersonality"
			></u-button>
			<u-button 
				v-if="currentStep === 5" 
				text="保存并完成" 
				type="primary" 
				@click="savePersonality"
			></u-button>
		</view>

		<!-- 帮助弹窗 -->
		<u-popup v-model="showHelp" mode="center" border-radius="20">
			<view class="help-popup">
				<view class="help-header">
					<text class="help-title">性格预设说明</text>
					<u-icon name="close" size="20" @click="showHelp = false"></u-icon>
				</view>
				<view class="help-content">
					<text class="help-text">通过简单的问卷，我们将为你的宠物生成专属的性格档案，包括：</text>
					<view class="help-list">
						<text class="help-item">• 性格类型分析</text>
						<text class="help-item">• 个性化饲养建议</text>
						<text class="help-item">• AI聊天个性化设置</text>
						<text class="help-item">• 健康管理建议</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentStep: 1,
			totalSteps: 5,
			showHelp: false,
			selectedAnswers: {
				basicPersonality: '',
				social: '',
				activity: '',
				habits: []
			},
			// 基本性格选项
			basicPersonalityOptions: [
				{
					value: 'gentle',
					emoji: '😇',
					title: '温顺天使',
					desc: '性格温和，很少发脾气'
				},
				{
					value: 'active',
					emoji: '🌟',
					title: '活泼精灵',
					desc: '精力充沛，喜欢玩耍'
				},
				{
					value: 'independent',
					emoji: '👑',
					title: '独立王者',
					desc: '独立自主，有自己的想法'
				},
				{
					value: 'clingy',
					emoji: '🥰',
					title: '粘人小宝',
					desc: '喜欢粘着主人，需要陪伴'
				}
			],
			// 社交倾向选项
			socialOptions: [
				{
					value: 'friendly',
					emoji: '🤗',
					title: '社交达人',
					desc: '对人和动物都很友好'
				},
				{
					value: 'selective',
					emoji: '🤔',
					title: '选择性社交',
					desc: '对熟悉的人友好，对陌生人警惕'
				},
				{
					value: 'shy',
					emoji: '😊',
					title: '害羞内向',
					desc: '比较内向，需要时间适应'
				},
				{
					value: 'protective',
					emoji: '🛡️',
					title: '保护型',
					desc: '对主人很保护，对陌生人警惕'
				}
			],
			// 活动水平选项
			activityOptions: [
				{
					value: 'high',
					emoji: '🏃',
					title: '超级活跃',
					desc: '精力旺盛，需要大量运动'
				},
				{
					value: 'medium',
					emoji: '🚶',
					title: '适度活跃',
					desc: '喜欢适量的运动和玩耍'
				},
				{
					value: 'low',
					emoji: '😴',
					title: '安静悠闲',
					desc: '喜欢安静，更愿意休息'
				}
			],
			// 特殊习惯选项
			habitOptions: [
				{ value: 'foodie', emoji: '🍖', title: '贪吃鬼' },
				{ value: 'sleepy', emoji: '😴', title: '瞌睡虫' },
				{ value: 'playful', emoji: '🎾', title: '玩具控' },
				{ value: 'vocal', emoji: '🗣️', title: '话唠' },
				{ value: 'curious', emoji: '🔍', title: '好奇宝宝' },
				{ value: 'neat', emoji: '🧼', title: '爱干净' },
				{ value: 'guard', emoji: '👮', title: '小卫士' },
				{ value: 'escape', emoji: '🏃‍♂️', title: '逃跑专家' }
			],
			personalityResult: {}
		}
	},
	computed: {
		canProceed() {
			switch (this.currentStep) {
				case 1:
					return this.selectedAnswers.basicPersonality !== ''
				case 2:
					return this.selectedAnswers.social !== ''
				case 3:
					return this.selectedAnswers.activity !== ''
				case 4:
					return this.selectedAnswers.habits.length > 0
				default:
					return true
			}
		}
	},
	onLoad(options) {
		this.petId = options.petId
	},
	methods: {
		selectOption(type, value) {
			this.selectedAnswers[type] = value
		},

		toggleHabit(value) {
			const index = this.selectedAnswers.habits.indexOf(value)
			if (index > -1) {
				this.selectedAnswers.habits.splice(index, 1)
			} else {
				this.selectedAnswers.habits.push(value)
			}
		},

		nextStep() {
			if (this.canProceed && this.currentStep < this.totalSteps) {
				this.currentStep++
			}
		},

		prevStep() {
			if (this.currentStep > 1) {
				this.currentStep--
			}
		},

		generatePersonality() {
			// 根据选择生成性格结果
			const { basicPersonality, social, activity, habits } = this.selectedAnswers
			
			// 简单的性格分析逻辑
			let typeName = ''
			let emoji = ''
			let description = ''
			let tags = []
			let suggestions = []

			// 根据基本性格确定类型
			if (basicPersonality === 'gentle') {
				typeName = '温柔天使型'
				emoji = '😇'
				description = '你的宠物是一个温柔的小天使，性格温和，很少发脾气，是理想的家庭伴侣。'
				tags = ['温顺', '乖巧', '易相处']
				suggestions = ['提供安静舒适的环境', '温柔的互动方式', '定期的关爱和陪伴']
			} else if (basicPersonality === 'active') {
				typeName = '活力四射型'
				emoji = '🌟'
				description = '你的宠物充满活力，精力旺盛，喜欢各种游戏和活动，是天生的运动健将。'
				tags = ['活泼', '精力充沛', '爱玩']
				suggestions = ['提供充足的运动空间', '准备丰富的玩具', '安排规律的运动时间']
			} else if (basicPersonality === 'independent') {
				typeName = '独立自主型'
				emoji = '👑'
				description = '你的宠物很有个性，独立自主，有自己的想法和节奏，是个小小的独立王者。'
				tags = ['独立', '有个性', '自主']
				suggestions = ['尊重它的个人空间', '不要过度干预', '提供选择的自由']
			} else {
				typeName = '粘人小可爱型'
				emoji = '🥰'
				description = '你的宠物是个粘人的小宝贝，喜欢和主人在一起，需要很多的关爱和陪伴。'
				tags = ['粘人', '需要陪伴', '情感丰富']
				suggestions = ['多花时间陪伴', '建立固定的互动时间', '给予充分的关爱']
			}

			// 添加社交和活动相关的标签
			if (social === 'friendly') tags.push('友好')
			if (social === 'shy') tags.push('内向')
			if (activity === 'high') tags.push('高能量')
			if (activity === 'low') tags.push('安静')

			// 添加习惯相关的标签
			habits.forEach(habit => {
				const habitOption = this.habitOptions.find(h => h.value === habit)
				if (habitOption) {
					tags.push(habitOption.title)
				}
			})

			this.personalityResult = {
				typeName,
				emoji,
				description,
				tags: tags.slice(0, 6), // 最多显示6个标签
				suggestions
			}

			this.currentStep = 5
		},

		savePersonality() {
			// 保存性格数据到本地存储
			try {
				const personalityData = {
					answers: this.selectedAnswers,
					result: this.personalityResult,
					createdAt: new Date().toISOString()
				}

				// 如果有petId，更新对应宠物的性格数据
				if (this.petId) {
					let pets = uni.getStorageSync('pets') || []
					const petIndex = pets.findIndex(pet => pet.id == this.petId)
					if (petIndex > -1) {
						pets[petIndex].personality = this.personalityResult.tags
						pets[petIndex].personalityType = this.personalityResult.typeName
						pets[petIndex].personalityData = personalityData
						uni.setStorageSync('pets', pets)
					}
				}

				uni.showToast({
					title: '性格档案保存成功',
					icon: 'success'
				})

				setTimeout(() => {
					uni.navigateBack()
				}, 1500)
			} catch (error) {
				console.error('保存性格数据失败', error)
				uni.showToast({
					title: '保存失败',
					icon: 'error'
				})
			}
		},

		goBack() {
			uni.navigateBack()
		}
	}
}
</script>

<style lang="scss" scoped>
.personality-container {
	background: linear-gradient(135deg, #FFF8F0 0%, #F8F9FA 100%);
	min-height: 100vh;
	padding-bottom: 120rpx;
}

/* 顶部操作栏 */
.top-action-bar {
	display: flex;
	justify-content: flex-end;
	padding: 20rpx 30rpx;

	.action-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 12rpx 20rpx;
		border-radius: 20rpx;
		background: rgba(255, 255, 255, 0.8);

		.action-text {
			font-size: 24rpx;
			color: #666666;
		}
	}
}

/* 进度指示器 */
.progress-container {
	padding: 30rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;

	.progress-bar {
		flex: 1;
		height: 8rpx;
		background: #E0E0E0;
		border-radius: 4rpx;
		overflow: hidden;

		.progress-fill {
			height: 100%;
			background: linear-gradient(90deg, #FF8A80, #FFB74D);
			border-radius: 4rpx;
			transition: width 0.3s ease;
		}
	}

	.progress-text {
		font-size: 24rpx;
		color: #666666;
		font-weight: bold;
	}
}

/* 问卷内容 */
.questionnaire-content {
	padding: 0 30rpx;
}

.question-section {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 40rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);

	.question-header {
		text-align: center;
		margin-bottom: 40rpx;

		.question-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			display: block;
			margin-bottom: 16rpx;
		}

		.question-subtitle {
			font-size: 28rpx;
			color: #666666;
			display: block;
		}
	}

	.options-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;

		.option-card {
			background: #F8F9FA;
			border: 3rpx solid transparent;
			border-radius: 20rpx;
			padding: 30rpx 20rpx;
			text-align: center;
			transition: all 0.3s ease;

			&.active {
				background: #FFF8F0;
				border-color: #FF8A80;
				transform: translateY(-4rpx);
				box-shadow: 0 8rpx 24rpx rgba(255, 138, 128, 0.2);
			}

			&:active {
				transform: scale(0.95);
			}

			.option-emoji {
				font-size: 48rpx;
				display: block;
				margin-bottom: 16rpx;
			}

			.option-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				display: block;
				margin-bottom: 12rpx;
			}

			.option-desc {
				font-size: 24rpx;
				color: #666666;
				line-height: 1.4;
				display: block;
			}
		}
	}

	.habits-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 16rpx;

		.habit-tag {
			background: #F8F9FA;
			border: 3rpx solid transparent;
			border-radius: 16rpx;
			padding: 20rpx 16rpx;
			text-align: center;
			transition: all 0.3s ease;

			&.active {
				background: #FFF8F0;
				border-color: #FF8A80;
				transform: translateY(-2rpx);
			}

			&:active {
				transform: scale(0.95);
			}

			.habit-emoji {
				font-size: 32rpx;
				display: block;
				margin-bottom: 8rpx;
			}

			.habit-text {
				font-size: 22rpx;
				color: #333333;
				display: block;
			}
		}
	}
}

/* 结果展示 */
.result-section {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 40rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);

	.result-header {
		text-align: center;
		margin-bottom: 40rpx;

		.result-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			display: block;
			margin-bottom: 16rpx;
		}

		.result-subtitle {
			font-size: 28rpx;
			color: #666666;
			display: block;
		}
	}

	.personality-result {
		.personality-type {
			text-align: center;
			margin-bottom: 30rpx;

			.type-emoji {
				font-size: 80rpx;
				display: block;
				margin-bottom: 16rpx;
			}

			.type-name {
				font-size: 32rpx;
				font-weight: bold;
				color: #FF8A80;
				display: block;
			}
		}

		.personality-description {
			background: #FFF8F0;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 30rpx;

			.desc-text {
				font-size: 28rpx;
				color: #333333;
				line-height: 1.6;
			}
		}

		.personality-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
			margin-bottom: 30rpx;
		}

		.care-suggestions {
			.suggestions-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
				display: block;
				margin-bottom: 20rpx;
			}

			.suggestion-item {
				margin-bottom: 12rpx;

				.suggestion-text {
					font-size: 26rpx;
					color: #666666;
					line-height: 1.5;
				}
			}
		}
	}
}

/* 底部操作按钮 */
.bottom-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #ffffff;
	padding: 30rpx;
	border-top: 2rpx solid #F0F0F0;
	display: flex;
	gap: 20rpx;
	box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.1);

	:deep(.u-button) {
		flex: 1;
		height: 88rpx;
	}
}

/* 帮助弹窗 */
.help-popup {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx;
	width: 600rpx;

	.help-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;

		.help-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
		}
	}

	.help-content {
		.help-text {
			font-size: 28rpx;
			color: #666666;
			line-height: 1.5;
			display: block;
			margin-bottom: 20rpx;
		}

		.help-list {
			.help-item {
				font-size: 26rpx;
				color: #666666;
				line-height: 1.6;
				display: block;
				margin-bottom: 8rpx;
			}
		}
	}
}

/* 微信小程序适配 */
@media screen and (max-width: 375px) {
	.questionnaire-content {
		padding: 0 20rpx;
	}

	.question-section {
		padding: 30rpx;
	}

	.options-grid {
		grid-template-columns: 1fr;
		gap: 16rpx;
	}

	.habits-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
</style>
