<template>
	<scroll-view class="mine-page" scroll-y :scroll-with-animation="true"
		:style="{ paddingBottom: safeAreaBottom + 'px' }">
		<view class="mine-container">
			<!-- 用户信息头部 -->
			<view class="profile-card">
				<view class="profile-bg" />
				<view class="profile-content">
					<view class="profile-avatar-wrap" @click="handleEditProfile">
						<image v-if="displayAvatarUrl" class="avatar-img" :src="displayAvatarUrl" mode="aspectFill" />
						<view v-else class="avatar-placeholder">
							<TnIcon name="my-circle" :size="80" color="#FFFFFF" />
						</view>
						<view class="avatar-edit-badge">
							<TnIcon name="edit-write-fill" :size="24" color="#fff" />
						</view>
					</view>
					<text class="profile-name" @click="handleEditProfile">
						{{ userInfo.nickName || '铲屎官' }}
					</text>
					<view class="profile-member-row">
						<view class="member-type-card" @click="handleGoMember">
							<TnIcon :name="userInfo.membershipType === 'premium' ? 'vip-fill' : 'vip'" :size="36"
								:color="userInfo.membershipType === 'premium' ? '#F59E0B' : '#94A3B8'" />
							<view class="member-type-info">
								<text class="member-type-name">
									{{ userInfo.membershipType === 'premium' ? '高级会员' : '免费用户' }}
								</text>
								<text class="member-type-hint">
									{{ userInfo.membershipType === 'premium'
										? (userInfo.memberExpireAt ? '有效期至 ' + formatDate(userInfo.memberExpireAt) : '')
										: '立即升级享更多权益' }}
								</text>
							</view>
							<TnIcon name="right" :size="28" color="rgba(255,255,255,0.6)" />
						</view>
					</view>
				</view>
			</view>

			<!-- 数据统计卡片 -->
			<view class="stats-section">
				<view class="stats-card" @click="handleGoMyPets">
					<view class="stats-icon-wrap">
						<TnIcon name="floral" :size="36" color="#F97316" />
					</view>
					<text class="stats-value">{{ statsData.petCount }}</text>
					<text class="stats-label">我的萌宠</text>
				</view>
				<view class="stats-card" @click="handleGoRecords">
					<view class="stats-icon-wrap">
						<TnIcon name="write" :size="36" color="#14B8A6" />
					</view>
					<text class="stats-value">{{ statsData.recordCount }}</text>
					<text class="stats-label">健康记录</text>
				</view>
				<view class="stats-card" @click="handleGoSchedules">
					<view class="stats-icon-wrap">
						<TnIcon name="calendar" :size="36" color="#8B5CF6" />
					</view>
					<text class="stats-value">{{ statsData.scheduleCount }}</text>
					<text class="stats-label">待办提醒</text>
				</view>
			</view>

			<!-- 快捷操作 -->
			<view class="section-block">
				<text class="section-title">快捷操作</text>
				<view class="quick-grid">
					<view class="quick-item" @click="handleAddPet">
						<view class="quick-icon" style="background: linear-gradient(135deg, #F97316, #FB923C)">
							<TnIcon name="add-lack" :size="44" color="#FFFFFF" />
						</view>
						<text class="quick-label">添加宠物</text>
					</view>
					<view class="quick-item" @click="handleAddRecord">
						<view class="quick-icon" style="background: linear-gradient(135deg, #2DD4BF, #0D9488)">
							<TnIcon name="write-feather" :size="44" color="#FFFFFF" />
						</view>
						<text class="quick-label">健康记录</text>
					</view>
					<view class="quick-item" @click="handleAddSchedule">
						<view class="quick-icon" style="background: linear-gradient(135deg, #8B5CF6, #7C3AED)">
							<TnIcon name="notice-fill" :size="44" color="#FFFFFF" />
						</view>
						<text class="quick-label">添加提醒</text>
					</view>
					<view class="quick-item" @click="handleNearbyHospital">
						<view class="quick-icon" style="background: linear-gradient(135deg, #EC4899, #DB2777)">
							<TnIcon name="safe-fill" :size="44" color="#FFFFFF" />
						</view>
						<text class="quick-label">附近医院</text>
					</view>
				</view>
			</view>

			<!-- 宠物管理 -->
			<view class="section-block">
				<text class="section-title">宠物管理</text>
				<view class="menu-card">
					<view class="menu-row" @click="handleGoMyPets">
						<view class="menu-icon-wrap" style="background: #FFF7ED">
							<TnIcon name="floral" :size="38" color="#F97316" />
						</view>
						<text class="menu-text">我的宠物</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
					<view class="menu-divider" />
					<view class="menu-row" @click="handleGoPetAlbum">
						<view class="menu-icon-wrap" style="background: #FFF7ED">
							<TnIcon name="eye-fill" :size="38" color="#FB923C" />
						</view>
						<text class="menu-text">宠物相册</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
				</view>
			</view>

			<!-- 数据服务 -->
			<view class="section-block">
				<text class="section-title">数据服务</text>
				<view class="menu-card">
					<view class="menu-row" @click="handleGoHealthData">
						<view class="menu-icon-wrap" style="background: #F0FDFA">
							<TnIcon name="data-fill" :size="38" color="#14B8A6" />
						</view>
						<text class="menu-text">健康数据总览</text>
						<text class="menu-badge">NEW</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
					<view class="menu-divider" />
					<view class="menu-row" @click="handleExportData">
						<view class="menu-icon-wrap" style="background: #ECFEFF">
							<TnIcon name="folder-upload" :size="38" color="#06B6D4" />
						</view>
						<text class="menu-text">数据导出</text>
						<TnTag type="warning" size="sm" shape="round">会员</TnTag>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
					<view class="menu-divider" />
					<view class="menu-row" @click="handleCloudBackup">
						<view class="menu-icon-wrap" style="background: #EFF6FF">
							<TnIcon name="cloud-fill" :size="38" color="#3B82F6" />
						</view>
						<text class="menu-text">云端备份</text>
						<text class="menu-extra">已备份</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
				</view>
			</view>

			<!-- 会员服务 -->
			<view class="section-block">
				<text class="section-title">会员服务</text>
				<view class="menu-card">
					<view class="menu-row" @click="handleGoMember">
						<view class="menu-icon-wrap" style="background: #FFFBEB">
							<TnIcon name="vip-fill" :size="38" color="#F59E0B" />
						</view>
						<text class="menu-text">会员中心</text>
						<TnTag type="danger" size="sm" shape="round">限时优惠</TnTag>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
					<view class="menu-divider" />
					<view class="menu-row" @click="handleShare">
						<view class="menu-icon-wrap" style="background: #F5F3FF">
							<TnIcon name="share" :size="38" color="#8B5CF6" />
						</view>
						<text class="menu-text">推荐给朋友</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
				</view>
			</view>

			<!-- 其他 -->
			<view class="section-block">
				<text class="section-title">其他</text>
				<view class="menu-card">
					<view class="menu-row" @click="handleGoSettings">
						<view class="menu-icon-wrap" style="background: #F8FAFC">
							<TnIcon name="menu-set" :size="38" color="#475569" />
						</view>
						<text class="menu-text">设置</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
					<view class="menu-divider" />
					<view class="menu-row" @click="handleGoAbout">
						<view class="menu-icon-wrap" style="background: #F8FAFC">
							<TnIcon name="copyright" :size="38" color="#64748B" />
						</view>
						<text class="menu-text">关于毛球</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
					<view class="menu-divider" />
					<view class="menu-row" @click="handleFeedback">
						<view class="menu-icon-wrap" style="background: #F8FAFC">
							<TnIcon name="service" :size="38" color="#64748B" />
						</view>
						<text class="menu-text">帮助与反馈</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
					<view class="menu-divider" />
					<view class="menu-row" @click="handleGoLogin">
						<view class="menu-icon-wrap" style="background: #FFF7ED">
							<TnIcon name="my-circle" :size="38" color="#F97316" />
						</view>
						<text class="menu-text">登录 / 退出登录</text>
						<TnIcon name="right" :size="28" color="#CBD5E1" />
					</view>
				</view>
			</view>

			<!-- 底部版权 -->
			<view class="footer-section">
				<TnIcon name="floral" :size="44" color="#F97316" />
				<text class="footer-name">毛球手账 v1.0.0</text>
				<text class="footer-slogan">让宠物健康管理像记账一样简单</text>
			</view>
		</view>
	</scroll-view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import TnIcon from '@/uni_modules/tuniaoui-vue3/components/icon/src/icon.vue'

interface UserInfo {
	avatarUrl: string
	nickName: string
	membershipType: 'free' | 'premium'
	memberExpireAt: string
}

const safeAreaBottom = ref(0)
const displayAvatarUrl = ref('')

const userInfo = reactive<UserInfo>({
	avatarUrl: '',
	nickName: '',
	membershipType: 'free',
	memberExpireAt: '',
})

const statsData = reactive({
	petCount: 0,
	recordCount: 0,
	scheduleCount: 0,
})

onMounted(() => {
	loadUserInfo()
	loadStats()
	calcSafeArea()
})

onShow(() => {
	loadUserInfo()
	loadStats()
})

function calcSafeArea() {
	const systemInfo = uni.getSystemInfoSync()
	safeAreaBottom.value = (systemInfo.safeAreaInsets?.bottom || 0) + 78
}

function formatDate(dateStr: string) {
	if (!dateStr) return ''
	const d = new Date(dateStr)
	if (Number.isNaN(d.getTime())) return dateStr
	const y = d.getFullYear()
	const m = String(d.getMonth() + 1).padStart(2, '0')
	const day = String(d.getDate()).padStart(2, '0')
	return `${y}-${m}-${day}`
}

async function loadUserInfo() {
	try {
		const uid = uni.getStorageSync('uid')
		const res = await uniCloud.callFunction({
			name: 'userManager',
			data: { action: 'profile', uid },
		})
		if (res.result?.code === 0 && res.result.data) {
			const data = res.result.data
			userInfo.avatarUrl = data.avatarUrl || ''
			userInfo.nickName = data.nickName || ''
			userInfo.membershipType = data.membership?.type || 'free'
			userInfo.memberExpireAt = data.membership?.expireAt || ''
			await resolveMineAvatar()
			return
		}
	} catch (e) {
		console.warn('云函数加载用户信息失败，使用本地缓存', e)
	}
	const cached = uni.getStorageSync('userInfo')
	if (cached) {
		userInfo.avatarUrl = cached.avatarUrl || ''
		userInfo.nickName = cached.nickName || '铲屎官'
		userInfo.membershipType = cached.membership?.type || 'free'
		userInfo.memberExpireAt = cached.membership?.expireAt || ''
		await resolveMineAvatar()
	}
}

async function resolveMineAvatar() {
	const url = userInfo.avatarUrl
	if (!url) {
		displayAvatarUrl.value = ''
		return
	}
	if (url.startsWith('cloud://')) {
		try {
			const res = await uniCloud.getTempFileURL({ fileList: [url] })
			if (res.fileList && res.fileList[0]?.tempFileURL) {
				displayAvatarUrl.value = res.fileList[0].tempFileURL
			}
		} catch (e) {
			console.warn('获取头像临时URL失败', e)
			displayAvatarUrl.value = ''
		}
	} else {
		displayAvatarUrl.value = url
	}
}

async function loadStats() {
	try {
		const uid = uni.getStorageSync('uid')
		const res = await uniCloud.callFunction({
			name: 'userManager',
			data: { action: 'stats', uid },
		})
		if (res.result?.code === 0 && res.result.data) {
			const data = res.result.data
			statsData.petCount = data.petCount ?? 0
			statsData.recordCount = data.recordCount ?? 0
			statsData.scheduleCount = data.pendingScheduleCount ?? 0
		}
	} catch (e) {
		console.warn('加载统计数据失败，使用默认值', e)
	}
}

function handleEditProfile() {
	uni.navigateTo({ url: '/pages/mine/profile-edit' })
}

function handleGoMember() {
	uni.navigateTo({ url: '/pages/mine/member' })
}

function handleGoMyPets() {
	uni.switchTab({ url: '/pages/index/index' })
}

function handleGoRecords() {
	uni.switchTab({ url: '/pages/index/index' })
}

function handleGoSchedules() {
	uni.switchTab({ url: '/pages/index/index' })
}

function handleAddPet() {
	uni.navigateTo({ url: '/pages/pet/edit' })
}

function handleAddRecord() {
	uni.navigateTo({ url: '/pages/record/type-select' })
}

function handleAddSchedule() {
	uni.navigateTo({ url: '/pages/schedule/edit' })
}

function handleNearbyHospital() {
	uni.navigateTo({ url: '/pages/discovery/hospital-list' })
}

function handleGoPetAlbum() {
	uni.showToast({ title: '即将上线，敬请期待', icon: 'none' })
}

function handleGoHealthData() {
	uni.showToast({ title: '即将上线，敬请期待', icon: 'none' })
}

function handleExportData() {
	if (userInfo.membershipType !== 'premium') {
		uni.showModal({
			title: '会员功能',
			content: '数据导出为高级会员专属功能，是否前往开通？',
			success: (res) => {
				if (res.confirm) {
					handleGoMember()
				}
			},
		})
		return
	}
	uni.showToast({ title: '即将上线，敬请期待', icon: 'none' })
}

function handleCloudBackup() {
	uni.showToast({ title: '数据已自动备份至云端', icon: 'none' })
}

function handleShare() {
	uni.showToast({ title: '即将上线，敬请期待', icon: 'none' })
}

function handleGoSettings() {
	uni.navigateTo({ url: '/pages/mine/settings' })
}

function handleGoAbout() {
	uni.navigateTo({ url: '/pages/mine/about' })
}

function handleFeedback() {
	uni.navigateTo({ url: '/pages/mine/feedback' })
}

function handleGoLogin() {
	const token = uni.getStorageSync('token')
	if (token) {
		uni.showModal({
			title: '提示',
			content: '确定要退出当前账号吗？',
			success: (res) => {
				if (res.confirm) {
					uni.removeStorageSync('token')
					uni.removeStorageSync('uid')
					uni.removeStorageSync('userInfo')
					uni.reLaunch({ url: '/pages/login/login' })
				}
			},
		})
	} else {
		uni.reLaunch({ url: '/pages/login/login' })
	}
}
</script>

<style lang="scss" scoped>
$primary: #F97316;
$primary-light: #FB923C;
$primary-bg: #FFF7ED;
$text-dark: #1E293B;
$text-body: #475569;
$text-muted: #94A3B8;
$card-bg: #FFFFFF;
$border-color: #F1F5F9;
$shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
$radius-xl: 32rpx;
$radius-lg: 24rpx;

.mine-page {
	height: 100vh;
	background-color: #F8FAFC;
	box-sizing: border-box;
}

.mine-container {
	padding: 0 28rpx 28rpx;
}

// === 个人资料卡 ===
.profile-card {
	position: relative;
	margin-top: 24rpx;
	border-radius: $radius-xl;
	overflow: hidden;
	box-shadow: 0 8rpx 32rpx rgba(249, 115, 22, 0.12);
}

.profile-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg, #F97316 0%, #FB923C 60%, #FDBA74 100%);

	&::after {
		content: '';
		position: absolute;
		top: -40rpx;
		right: -60rpx;
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.1);
	}

	&::before {
		content: '';
		position: absolute;
		bottom: -30rpx;
		left: -30rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.06);
	}
}

.profile-content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48rpx 32rpx 40rpx;
	gap: 16rpx;
}

.profile-avatar-wrap {
	position: relative;
	width: 160rpx;
	height: 160rpx;
}

.avatar-img {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	border: 6rpx solid rgba(255, 255, 255, 0.6);
	box-shadow: 0 8rpx 20rpx rgba(124, 45, 18, 0.2);
}

.avatar-placeholder {
	width: 160rpx;
	height: 160rpx;
	border-radius: 50%;
	border: 6rpx solid rgba(255, 255, 255, 0.6);
	background: rgba(255, 255, 255, 0.15);
	display: flex;
	align-items: center;
	justify-content: center;
}

.avatar-edit-badge {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 44rpx;
	height: 44rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #FB923C, #F97316);
	border: 4rpx solid #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 8rpx rgba(124, 45, 18, 0.2);
}

.profile-name {
	font-size: 40rpx;
	font-weight: 800;
	color: #FFFFFF;
	line-height: 1.3;
	text-shadow: 0 2rpx 8rpx rgba(124, 45, 18, 0.15);
}

.profile-member-row {
	width: 100%;
	margin-top: 8rpx;
}

.member-type-card {
	display: flex;
	align-items: center;
	gap: 16rpx;
	padding: 18rpx 24rpx;
	background: rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(10rpx);
	border-radius: 20rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.25);
}

.member-type-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4rpx;
}

.member-type-name {
	font-size: 26rpx;
	font-weight: 700;
	color: #FFFFFF;
}

.member-type-hint {
	font-size: 20rpx;
	color: rgba(255, 255, 255, 0.8);
}

// === 数据统计 ===
.stats-section {
	display: flex;
	gap: 16rpx;
	margin-top: 24rpx;
}

.stats-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	padding: 24rpx 12rpx;
	background-color: $card-bg;
	border-radius: $radius-lg;
	box-shadow: $shadow;
	transition: transform 0.2s ease;

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

.stats-icon-wrap {
	width: 56rpx;
	height: 56rpx;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: $primary-bg;
}

.stats-value {
	font-size: 40rpx;
	font-weight: 800;
	color: $text-dark;
	line-height: 1;
}

.stats-label {
	font-size: 22rpx;
	font-weight: 500;
	color: $text-muted;
}

// === 快捷操作 & 分区 ===
.section-block {
	margin-top: 36rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 800;
	color: $text-dark;
	margin-bottom: 16rpx;
	padding-left: 4rpx;
}

.quick-grid {
	display: flex;
	gap: 16rpx;
}

.quick-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12rpx;
	padding: 24rpx 8rpx;
	background-color: $card-bg;
	border-radius: $radius-lg;
	box-shadow: $shadow;
	transition: transform 0.2s ease;

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

.quick-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 22rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
}

.quick-label {
	font-size: 22rpx;
	font-weight: 600;
	color: $text-body;
	text-align: center;
}

// === 菜单卡片 ===
.menu-card {
	background-color: $card-bg;
	border-radius: $radius-lg;
	box-shadow: $shadow;
	overflow: hidden;
	padding: 0 24rpx;
}

.menu-row {
	display: flex;
	align-items: center;
	gap: 20rpx;
	padding: 24rpx 0;

	&:active {
		opacity: 0.7;
	}
}

.menu-divider {
	height: 1rpx;
	background: $border-color;
	margin-left: 88rpx;
}

.menu-icon-wrap {
	width: 64rpx;
	height: 64rpx;
	border-radius: 16rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.menu-text {
	flex: 1;
	font-size: 28rpx;
	font-weight: 500;
	color: $text-dark;
}

.menu-badge {
	font-size: 18rpx;
	font-weight: 700;
	color: #FFFFFF;
	background: linear-gradient(135deg, #F97316, #FB923C);
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
}

.menu-extra {
	font-size: 24rpx;
	color: #22C55E;
	font-weight: 500;
}

// === 底部 ===
.footer-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8rpx;
	margin-top: 40rpx;
	padding-bottom: 20rpx;
}

.footer-name {
	font-size: 22rpx;
	font-weight: 600;
	color: $text-muted;
}

.footer-slogan {
	font-size: 20rpx;
	color: #CBD5E1;
}
</style>
