<template>
	<view class="pets-container">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view class="navbar-content">
				<view class="navbar-title">
					<text class="title-text">🐾 我的宠物</text>
					<text class="subtitle-text">{{ petsList.length }}只小可爱陪伴着你</text>
				</view>
				<view class="navbar-actions">
					<view class="action-btn" @click="showQuickActions = true">
						<u-icon name="apps" color="#FF8A80" size="20"></u-icon>
					</view>
					<view class="action-btn add-btn" @click="addPet">
						<u-icon name="plus" color="#ffffff" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 统计卡片 -->
		<view class="stats-card" v-if="petsList.length > 0">
			<view class="stats-item">
				<view class="stats-number">{{ totalRecords }}</view>
				<view class="stats-label">记录</view>
			</view>
			<view class="stats-item">
				<view class="stats-number">{{ totalDays }}</view>
				<view class="stats-label">陪伴天数</view>
			</view>
			<view class="stats-item">
				<view class="stats-number">{{ upcomingReminders }}</view>
				<view class="stats-label">待办提醒</view>
			</view>
		</view>

		<!-- 宠物列表 -->
		<view class="pets-list" v-if="petsList.length > 0">
			<view class="pet-card" v-for="pet in petsList" :key="pet.id" @click="viewPetDetail(pet)">
				<!-- 宠物头像和基本信息 -->
				<view class="pet-header">
					<view class="pet-avatar-container">
						<u-avatar :src="pet.avatar || '/static/default-pet.png'" size="70" shape="circle"></u-avatar>
						<view class="pet-status" :class="pet.healthStatus || 'healthy'">
							<u-icon :name="getHealthIcon(pet.healthStatus)" size="12" color="#ffffff"></u-icon>
						</view>
					</view>
					<view class="pet-basic-info">
						<view class="pet-name-row">
							<text class="pet-name">{{ pet.name }}</text>
							<view class="pet-gender" :class="pet.gender === '公' ? 'male' : 'female'">
								<u-icon :name="pet.gender === '公' ? 'man' : 'woman'" size="12" color="#ffffff"></u-icon>
							</view>
						</view>
						<text class="pet-breed">{{ pet.breed }}</text>
						<text class="pet-age">{{ pet.age }}岁 · 陪伴{{ pet.companionDays }}天</text>
					</view>
				</view>

				<!-- 宠物特征标签 -->
				<view class="pet-tags" v-if="pet.personality && pet.personality.length > 0">
					<u-tag
						v-for="tag in pet.personality.slice(0, 3)"
						:key="tag"
						:text="tag"
						type="primary"
						size="mini"
						plain
					></u-tag>
				</view>

				<!-- 快捷操作按钮 -->
				<view class="pet-actions">
					<view class="action-item" @click.stop="addRecord(pet)">
						<u-icon name="edit-pen" size="16" color="#81C784"></u-icon>
						<text class="action-text">记录</text>
					</view>
					<view class="action-item" @click.stop="chatWithPet(pet)">
						<u-icon name="chat" size="16" color="#64B5F6"></u-icon>
						<text class="action-text">聊天</text>
					</view>
					<view class="action-item" @click.stop="viewHealth(pet)">
						<u-icon name="heart" size="16" color="#FF8A80"></u-icon>
						<text class="action-text">健康</text>
					</view>
					<view class="action-item" @click.stop="viewTimeline(pet)">
						<u-icon name="clock" size="16" color="#FFB74D"></u-icon>
						<text class="action-text">时光</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<image class="empty-image" src="/static/empty-pets.png" mode="aspectFit"></image>
			<text class="empty-title">还没有小伙伴呢</text>
			<text class="empty-desc">添加你的第一只宠物，开始记录美好时光吧~</text>
			<u-button
				class="add-first-pet-btn"
				type="primary"
				text="添加第一只宠物"
				shape="round"
				@click="addPet"
			></u-button>
		</view>

		<!-- 快捷操作弹窗 -->
		<u-popup v-model="showQuickActions" mode="bottom" border-radius="20">
			<view class="quick-actions-popup">
				<view class="popup-header">
					<text class="popup-title">快捷操作</text>
					<u-icon name="close" size="20" @click="showQuickActions = false"></u-icon>
				</view>
				<view class="quick-actions-grid">
					<view class="quick-action-item" @click="navigateToRecords">
						<u-icon name="list" size="24" color="#81C784"></u-icon>
						<text class="quick-action-text">所有记录</text>
					</view>
					<view class="quick-action-item" @click="navigateToStats">
						<u-icon name="bar-chart" size="24" color="#64B5F6"></u-icon>
						<text class="quick-action-text">数据统计</text>
					</view>
					<view class="quick-action-item" @click="navigateToReminders">
						<u-icon name="bell" size="24" color="#FFB74D"></u-icon>
						<text class="quick-action-text">提醒事项</text>
					</view>
					<view class="quick-action-item" @click="exportData">
						<u-icon name="share" size="24" color="#FF8A80"></u-icon>
						<text class="quick-action-text">数据导出</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			petsList: [],
			showQuickActions: false,
			totalRecords: 0,
			totalDays: 0,
			upcomingReminders: 0
		}
	},
	onShow() {
		this.loadPets()
		this.loadStatistics()
	},
	computed: {
		// 计算总陪伴天数
		totalCompanionDays() {
			return this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)
		}
	},
	methods: {
		loadPets() {
			try {
				let pets = uni.getStorageSync('pets') || []

				// 如果没有宠物数据，添加一些模拟数据
				if (pets.length === 0) {
					pets = [
						{
							id: 1,
							name: '小橘',
							breed: '橘猫',
							age: 2,
							companionDays: 365,
							avatar: '/static/default-pet.png',
							gender: '公',
							weight: '4.5kg',
							birthday: '2022-01-15',
							healthStatus: 'healthy',
							personality: ['活泼', '粘人', '贪吃'],
							lastRecord: '2024-01-15'
						},
						{
							id: 2,
							name: '小白',
							breed: '金毛',
							age: 3,
							companionDays: 1095,
							avatar: '/static/default-pet.png',
							gender: '母',
							weight: '25kg',
							birthday: '2021-03-20',
							healthStatus: 'healthy',
							personality: ['温顺', '聪明', '忠诚'],
							lastRecord: '2024-01-14'
						}
					]
					// 保存模拟数据到本地存储
					uni.setStorageSync('pets', pets)
				}

				this.petsList = pets
			} catch (error) {
				console.error('加载宠物列表失败', error)
				this.petsList = []
			}
		},

		loadStatistics() {
			try {
				// 加载统计数据
				const records = uni.getStorageSync('petRecords') || []
				this.totalRecords = records.length

				// 计算总陪伴天数
				this.totalDays = this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)

				// 模拟待办提醒数量
				this.upcomingReminders = Math.floor(Math.random() * 5) + 1
			} catch (error) {
				console.error('加载统计数据失败', error)
			}
		},

		getHealthIcon(status) {
			const iconMap = {
				healthy: 'checkmark',
				warning: 'warning',
				sick: 'close'
			}
			return iconMap[status] || 'checkmark'
		},

		addPet() {
			uni.navigateTo({
				url: '/pages/pets/add-pet'
			})
		},

		viewPetDetail(pet) {
			uni.navigateTo({
				url: `/pages/pets/pet-detail?id=${pet.id}`
			})
		},

		chatWithPet(pet) {
			uni.navigateTo({
				url: `/pages/pets/pet-chat-simple?petId=${pet.id}`
			})
		},

		addRecord(pet) {
			uni.navigateTo({
				url: `/pages/pets/add-record-simple?petId=${pet.id}`
			})
		},

		viewHealth(pet) {
			uni.navigateTo({
				url: `/pages/pets/health-charts?petId=${pet.id}`
			})
		},

		viewTimeline(pet) {
			uni.navigateTo({
				url: `/pages/pets/pet-timeline?petId=${pet.id}`
			})
		},

		// 快捷操作方法
		navigateToRecords() {
			this.showQuickActions = false
			uni.navigateTo({
				url: '/pages/pets/all-records'
			})
		},

		navigateToStats() {
			this.showQuickActions = false
			uni.navigateTo({
				url: '/pages/pets/statistics'
			})
		},

		navigateToReminders() {
			this.showQuickActions = false
			uni.navigateTo({
				url: '/pages/pets/reminders'
			})
		},

		exportData() {
			this.showQuickActions = false
			uni.showToast({
				title: '数据导出功能开发中',
				icon: 'none'
			})
		}
	}
}
</script>

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

/* 自定义导航栏 */
.custom-navbar {
	background: linear-gradient(135deg, #FF8A80 0%, #FFB74D 100%);
	padding: 20rpx 30rpx 30rpx;
	border-radius: 0 0 40rpx 40rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.3);

	.navbar-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
	}

	.navbar-title {
		.title-text {
			color: #ffffff;
			font-size: 36rpx;
			font-weight: bold;
			display: block;
		}

		.subtitle-text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 24rpx;
			margin-top: 8rpx;
			display: block;
		}
	}

	.navbar-actions {
		display: flex;
		gap: 20rpx;
		align-items: center;
	}

	.action-btn {
		width: 72rpx;
		height: 72rpx;
		border-radius: 36rpx;
		background: rgba(255, 255, 255, 0.2);
		display: flex;
		align-items: center;
		justify-content: center;
		backdrop-filter: blur(10rpx);

		&.add-btn {
			background: rgba(255, 255, 255, 0.3);
		}
	}
}

/* 统计卡片 */
.stats-card {
	background: #ffffff;
	margin: 30rpx;
	padding: 40rpx;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	display: flex;
	justify-content: space-around;

	.stats-item {
		text-align: center;

		.stats-number {
			font-size: 48rpx;
			font-weight: bold;
			color: #FF8A80;
			line-height: 1;
		}

		.stats-label {
			font-size: 24rpx;
			color: #999999;
			margin-top: 8rpx;
		}
	}
}

/* 宠物列表 */
.pets-list {
	padding: 0 30rpx;
}

.pet-card {
	background: #ffffff;
	border-radius: 24rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
	position: relative;
	overflow: hidden;

	&::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 8rpx;
		background: linear-gradient(90deg, #FF8A80, #81C784, #64B5F6);
	}

	.pet-header {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.pet-avatar-container {
		position: relative;
		margin-right: 24rpx;

		.pet-status {
			position: absolute;
			bottom: -4rpx;
			right: -4rpx;
			width: 32rpx;
			height: 32rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 4rpx solid #ffffff;

			&.healthy {
				background: #81C784;
			}

			&.warning {
				background: #FFB74D;
			}

			&.sick {
				background: #FF8A80;
			}
		}
	}

	.pet-basic-info {
		flex: 1;

		.pet-name-row {
			display: flex;
			align-items: center;
			margin-bottom: 8rpx;
		}

		.pet-name {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			margin-right: 16rpx;
		}

		.pet-gender {
			width: 32rpx;
			height: 32rpx;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			&.male {
				background: #64B5F6;
			}

			&.female {
				background: #F06292;
			}
		}

		.pet-breed {
			font-size: 28rpx;
			color: #666666;
			margin-bottom: 8rpx;
			display: block;
		}

		.pet-age {
			font-size: 24rpx;
			color: #999999;
			display: block;
		}
	}

	.pet-tags {
		margin-bottom: 24rpx;
		display: flex;
		gap: 16rpx;
		flex-wrap: wrap;
	}

	.pet-actions {
		display: flex;
		justify-content: space-around;
		padding-top: 24rpx;
		border-top: 2rpx solid #F5F5F5;

		.action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8rpx;
			padding: 16rpx;
			border-radius: 16rpx;
			transition: all 0.3s ease;

			&:active {
				background: #F5F5F5;
				transform: scale(0.95);
			}

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

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 120rpx 60rpx;
	text-align: center;

	.empty-image {
		width: 300rpx;
		height: 300rpx;
		margin-bottom: 40rpx;
		opacity: 0.8;
	}

	.empty-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		margin-bottom: 16rpx;
	}

	.empty-desc {
		font-size: 28rpx;
		color: #999999;
		line-height: 1.5;
		margin-bottom: 60rpx;
	}

	.add-first-pet-btn {
		width: 400rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #FF8A80, #FFB74D);
		border: none;
		box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.4);
	}
}

/* 快捷操作弹窗 */
.quick-actions-popup {
	background: #ffffff;
	border-radius: 20rpx 20rpx 0 0;
	padding: 40rpx 30rpx 60rpx;

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

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

	.quick-actions-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 40rpx;

		.quick-action-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16rpx;
			padding: 24rpx 16rpx;
			border-radius: 16rpx;
			background: #F8F9FA;
			transition: all 0.3s ease;

			&:active {
				background: #E9ECEF;
				transform: scale(0.95);
			}

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

/* 微信小程序适配 */
@media screen and (max-width: 375px) {
	.custom-navbar {
		padding: 15rpx 25rpx 25rpx;
	}

	.stats-card {
		margin: 25rpx;
		padding: 30rpx;
	}

	.pets-list {
		padding: 0 25rpx;
	}

	.pet-card {
		padding: 25rpx;
		margin-bottom: 25rpx;
	}
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
	.pets-container {
		background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
	}

	.stats-card,
	.pet-card {
		background: #2d2d2d;
		color: #ffffff;
	}

	.pet-name {
		color: #ffffff !important;
	}

	.pet-breed {
		color: #cccccc !important;
	}

	.pet-age {
		color: #999999 !important;
	}
}
</style>
