<template>
	<view class="family-container page-container-with-bg">
		<!-- 家庭概览卡片 -->
		<view class="family-overview-card">
			<view class="overview-header">
				<view class="family-info">
					<text class="family-name">{{ familyData.name || '我的家庭' }}</text>
					<text class="family-desc">{{ familyData.members.length }}位成员 · 共同照顾{{ petCount }}只宠物</text>
				</view>
				<view class="family-avatar">
					<text class="avatar-icon">👨‍👩‍👧‍👦</text>
				</view>
			</view>
			<view class="overview-stats">
				<view class="stat-item">
					<view class="stat-number">{{ familyData.members.length }}</view>
					<view class="stat-label">家庭成员</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{ sharedPets }}</view>
					<view class="stat-label">共享宠物</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{ todayRecords }}</view>
					<view class="stat-label">今日记录</view>
				</view>
			</view>
		</view>

		<!-- 家庭成员卡片 -->
		<view class="members-card">
			<view class="card-header">
				<text class="card-title">家庭成员</text>
				<view class="header-action" @click="inviteMember">
					<text class="action-icon">➕</text>
					<text class="action-text">邀请</text>
				</view>
			</view>
			<view class="members-list">
				<view 
					class="member-item" 
					v-for="member in familyData.members" 
					:key="member.id"
					@click="viewMemberDetail(member)"
				>
					<view class="member-avatar">
						<u-avatar
							:src="member.avatarUrl || ''"
							:text="member.nickName ? member.nickName.charAt(0) : '👤'"
							size="80"
							shape="circle"
							bg-color="linear-gradient(135deg, #FF8A80, #FFB6C1)"
							color="white"
							font-size="32"
						></u-avatar>
						<view class="member-role-badge" :class="member.role">
							<text class="role-text">{{ getRoleText(member.role) }}</text>
						</view>
					</view>
					<view class="member-info">
						<view class="member-name">{{ member.nickName }}</view>
						<view class="member-status">
							<view class="status-dot" :class="{ online: member.isOnline }"></view>
							<text class="status-text">{{ member.isOnline ? '在线' : '离线' }}</text>
						</view>
						<view class="member-stats">
							<text class="stats-text">本月记录 {{ member.monthlyRecords || 0 }} 条</text>
						</view>
					</view>
					<view class="member-action">
						<text class="action-arrow">→</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 权限设置卡片 -->
		<view class="permissions-card">
			<view class="card-header">
				<text class="card-title">权限设置</text>
			</view>
			<view class="permissions-list">
				<view class="permission-item">
					<view class="permission-info">
						<text class="permission-title">宠物管理权限</text>
						<text class="permission-desc">允许成员添加、编辑宠物信息</text>
					</view>
					<view class="permission-switch">
						<u-switch 
							v-model="permissions.petManagement" 
							@change="onPermissionChange('petManagement', $event)"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
				<view class="permission-item">
					<view class="permission-info">
						<text class="permission-title">记录管理权限</text>
						<text class="permission-desc">允许成员添加、编辑宠物记录</text>
					</view>
					<view class="permission-switch">
						<u-switch 
							v-model="permissions.recordManagement" 
							@change="onPermissionChange('recordManagement', $event)"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
				<view class="permission-item">
					<view class="permission-info">
						<text class="permission-title">成员管理权限</text>
						<text class="permission-desc">允许成员邀请和管理其他成员</text>
					</view>
					<view class="permission-switch">
						<u-switch 
							v-model="permissions.memberManagement" 
							@change="onPermissionChange('memberManagement', $event)"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
			</view>
		</view>

		<!-- 家庭设置卡片 -->
		<view class="settings-card">
			<view class="card-header">
				<text class="card-title">家庭设置</text>
			</view>
			<view class="settings-list">
				<view class="setting-item" @click="editFamilyName">
					<view class="setting-left">
						<text class="setting-icon">✏️</text>
						<text class="setting-text">修改家庭名称</text>
					</view>
					<view class="setting-right">
						<text class="setting-value">{{ familyData.name || '我的家庭' }}</text>
						<text class="setting-arrow">→</text>
					</view>
				</view>
				<view class="setting-item" @click="viewInviteCode">
					<view class="setting-left">
						<text class="setting-icon">🔗</text>
						<text class="setting-text">邀请码管理</text>
					</view>
					<view class="setting-right">
						<text class="setting-arrow">→</text>
					</view>
				</view>
				<view class="setting-item" @click="viewFamilyHistory">
					<view class="setting-left">
						<text class="setting-icon">📊</text>
						<text class="setting-text">家庭统计</text>
					</view>
					<view class="setting-right">
						<text class="setting-arrow">→</text>
					</view>
				</view>
				<view class="setting-item danger" @click="leaveFamilyConfirm">
					<view class="setting-left">
						<text class="setting-icon">🚪</text>
						<text class="setting-text">退出家庭</text>
					</view>
					<view class="setting-right">
						<text class="setting-arrow">→</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 邀请成员弹窗 -->
		<u-modal 
			:show="showInviteModal" 
			title="邀请家庭成员"
			@confirm="confirmInvite"
			@cancel="showInviteModal = false"
		>
			<view class="invite-content">
				<view class="invite-method">
					<text class="method-title">邀请方式</text>
					<view class="method-options">
						<view class="method-option" @click="shareInviteCode">
							<text class="option-icon">📱</text>
							<text class="option-text">分享邀请码</text>
						</view>
						<view class="method-option" @click="shareQRCode">
							<text class="option-icon">📷</text>
							<text class="option-text">分享二维码</text>
						</view>
					</view>
				</view>
				<view class="invite-code">
					<text class="code-title">邀请码</text>
					<view class="code-display">
						<text class="code-text">{{ inviteCode }}</text>
						<view class="code-copy" @click="copyInviteCode">
							<text class="copy-text">复制</text>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
import { reactive, ref, onMounted, computed } from 'vue'

export default {
	name: 'FamilyPage',
	setup() {
		// 响应式数据
		const familyData = reactive({
			id: '',
			name: '我的家庭',
			members: []
		})
		
		const permissions = reactive({
			petManagement: true,
			recordManagement: true,
			memberManagement: false
		})
		
		const showInviteModal = ref(false)
		const inviteCode = ref('')
		const petCount = ref(0)
		const sharedPets = ref(0)
		const todayRecords = ref(0)
		
		// 生命周期
		onMounted(() => {
			loadFamilyData()
			generateInviteCode()
		})
		
		// 方法定义
		const loadFamilyData = () => {
			try {
				// 加载家庭数据
				const savedFamilyData = uni.getStorageSync('familyData') || {
					id: 'family_' + Date.now(),
					name: '我的家庭',
					members: []
				}
				
				// 如果没有成员，添加当前用户作为家庭主人
				if (savedFamilyData.members.length === 0) {
					const userInfo = uni.getStorageSync('userInfo') || {}
					savedFamilyData.members.push({
						id: 'user_' + Date.now(),
						nickName: userInfo.nickName || '我',
						avatarUrl: userInfo.avatarUrl || '',
						role: 'owner',
						isOnline: true,
						joinTime: new Date().toISOString(),
						monthlyRecords: 15
					})
				}
				
				Object.assign(familyData, savedFamilyData)
				
				// 加载权限设置
				const savedPermissions = uni.getStorageSync('familyPermissions') || permissions
				Object.assign(permissions, savedPermissions)
				
				// 加载统计数据
				loadFamilyStats()
				
			} catch (error) {
				console.error('加载家庭数据失败:', error)
			}
		}
		
		const loadFamilyStats = () => {
			// 加载宠物数量
			const pets = uni.getStorageSync('pets') || []
			petCount.value = pets.length
			sharedPets.value = pets.filter(pet => pet.shared).length || pets.length
			
			// 计算今日记录数
			const today = new Date().toDateString()
			let todayCount = 0
			pets.forEach(pet => {
				const records = uni.getStorageSync(`petRecords_${pet.id}`) || []
				todayCount += records.filter(record => 
					new Date(record.date).toDateString() === today
				).length
			})
			todayRecords.value = todayCount
		}
		
		const generateInviteCode = () => {
			// 生成6位邀请码
			const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
			let code = ''
			for (let i = 0; i < 6; i++) {
				code += chars.charAt(Math.floor(Math.random() * chars.length))
			}
			inviteCode.value = code
		}
		
		const getRoleText = (role) => {
			const roleMap = {
				'owner': '主人',
				'admin': '管理员',
				'member': '成员',
				'viewer': '观察者'
			}
			return roleMap[role] || '成员'
		}
		
		const inviteMember = () => {
			showInviteModal.value = true
		}
		
		const confirmInvite = () => {
			shareInviteCode()
			showInviteModal.value = false
		}
		
		const shareInviteCode = () => {
			const shareText = `邀请您加入我的宠物家庭！\n邀请码：${inviteCode.value}\n快来一起记录我们的宠物生活吧~`
			
			// 复制到剪贴板
			uni.setClipboardData({
				data: shareText,
				success: () => {
					uni.showToast({
						title: '邀请信息已复制',
						icon: 'success'
					})
				}
			})
		}
		
		const shareQRCode = () => {
			uni.showToast({
				title: '二维码功能开发中',
				icon: 'none'
			})
		}
		
		const copyInviteCode = () => {
			uni.setClipboardData({
				data: inviteCode.value,
				success: () => {
					uni.showToast({
						title: '邀请码已复制',
						icon: 'success'
					})
				}
			})
		}
		
		const viewMemberDetail = (member) => {
			uni.showModal({
				title: member.nickName,
				content: `角色：${getRoleText(member.role)}\n加入时间：${new Date(member.joinTime).toLocaleDateString()}\n本月记录：${member.monthlyRecords || 0}条`,
				showCancel: false
			})
		}
		
		const onPermissionChange = (key, value) => {
			permissions[key] = value
			uni.setStorageSync('familyPermissions', permissions)
			
			uni.showToast({
				title: '权限设置已更新',
				icon: 'success'
			})
		}
		
		const editFamilyName = () => {
			uni.showModal({
				title: '修改家庭名称',
				editable: true,
				placeholderText: '请输入家庭名称',
				success: (res) => {
					if (res.confirm && res.content.trim()) {
						familyData.name = res.content.trim()
						saveFamilyData()
						uni.showToast({
							title: '家庭名称已更新',
							icon: 'success'
						})
					}
				}
			})
		}
		
		const viewInviteCode = () => {
			showInviteModal.value = true
		}
		
		const viewFamilyHistory = () => {
			uni.showToast({
				title: '家庭统计功能开发中',
				icon: 'none'
			})
		}
		
		const leaveFamilyConfirm = () => {
			uni.showModal({
				title: '确认退出',
				content: '退出后将无法查看家庭共享的宠物信息，确定要退出吗？',
				success: (res) => {
					if (res.confirm) {
						leaveFamily()
					}
				}
			})
		}
		
		const leaveFamily = () => {
			// 清除家庭数据
			uni.removeStorageSync('familyData')
			uni.removeStorageSync('familyPermissions')
			
			uni.showToast({
				title: '已退出家庭',
				icon: 'success'
			})
			
			// 返回上一页
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		}
		
		const saveFamilyData = () => {
			uni.setStorageSync('familyData', familyData)
		}
		
		return {
			familyData,
			permissions,
			showInviteModal,
			inviteCode,
			petCount,
			sharedPets,
			todayRecords,
			getRoleText,
			inviteMember,
			confirmInvite,
			shareInviteCode,
			shareQRCode,
			copyInviteCode,
			viewMemberDetail,
			onPermissionChange,
			editFamilyName,
			viewInviteCode,
			viewFamilyHistory,
			leaveFamilyConfirm
		}
	}
}
</script>

<style lang="scss" scoped>
.family-container {
	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
	min-height: 100vh;
	padding-bottom: 40rpx;
}

/* 通用卡片样式 */
.family-overview-card,
.members-card,
.permissions-card,
.settings-card {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	margin: 0 30rpx 24rpx 30rpx;
	border-radius: 24rpx;
	padding: 32rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

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

		.card-title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
		}

		.header-action {
			display: flex;
			align-items: center;
			padding: 12rpx 20rpx;
			background: rgba(255, 138, 128, 0.1);
			border-radius: 20rpx;

			.action-icon {
				font-size: 24rpx;
				margin-right: 8rpx;
			}

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

/* 家庭概览卡片 */
.family-overview-card {
	.overview-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;

		.family-info {
			flex: 1;

			.family-name {
				display: block;
				font-size: 36rpx;
				font-weight: 700;
				color: #333333;
				margin-bottom: 8rpx;
			}

			.family-desc {
				font-size: 24rpx;
				color: #666666;
			}
		}

		.family-avatar {
			.avatar-icon {
				font-size: 60rpx;
			}
		}
	}

	.overview-stats {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 24rpx;

		.stat-item {
			text-align: center;
			padding: 24rpx 16rpx;
			border-radius: 16rpx;
			background: rgba(255, 138, 128, 0.05);

			.stat-number {
				font-size: 40rpx;
				font-weight: 700;
				color: #FF8A80;
				margin-bottom: 8rpx;
			}

			.stat-label {
				font-size: 22rpx;
				color: #666666;
			}
		}
	}
}

/* 家庭成员卡片 */
.members-list {
	.member-item {
		display: flex;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
		transition: all 0.3s ease;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background: rgba(255, 138, 128, 0.05);
			border-radius: 16rpx;
		}

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

			.member-role-badge {
				position: absolute;
				bottom: -4rpx;
				right: -4rpx;
				padding: 4rpx 8rpx;
				border-radius: 12rpx;
				font-size: 18rpx;

				&.owner {
					background: #FFD700;
					color: #333333;
				}

				&.admin {
					background: #FF8A80;
					color: white;
				}

				&.member {
					background: #81C784;
					color: white;
				}

				&.viewer {
					background: #CCCCCC;
					color: #666666;
				}

				.role-text {
					font-size: 18rpx;
				}
			}
		}

		.member-info {
			flex: 1;

			.member-name {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 8rpx;
			}

			.member-status {
				display: flex;
				align-items: center;
				margin-bottom: 4rpx;

				.status-dot {
					width: 12rpx;
					height: 12rpx;
					border-radius: 50%;
					background: #CCCCCC;
					margin-right: 8rpx;

					&.online {
						background: #4CAF50;
					}
				}

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

			.member-stats {
				.stats-text {
					font-size: 20rpx;
					color: #999999;
				}
			}
		}

		.member-action {
			.action-arrow {
				font-size: 24rpx;
				color: #FF8A80;
			}
		}
	}
}

/* 权限设置卡片 */
.permissions-list {
	.permission-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

		&:last-child {
			border-bottom: none;
		}

		.permission-info {
			flex: 1;

			.permission-title {
				display: block;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
				margin-bottom: 8rpx;
			}

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

		.permission-switch {
			margin-left: 24rpx;
		}
	}
}

/* 家庭设置卡片 */
.settings-list {
	.setting-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
		transition: all 0.3s ease;

		&:last-child {
			border-bottom: none;
		}

		&:active {
			background: rgba(255, 138, 128, 0.05);
			border-radius: 16rpx;
		}

		&.danger {
			.setting-text {
				color: #FF5722;
			}

			.setting-arrow {
				color: #FF5722;
			}
		}

		.setting-left {
			display: flex;
			align-items: center;

			.setting-icon {
				font-size: 32rpx;
				margin-right: 16rpx;
			}

			.setting-text {
				font-size: 30rpx;
				color: #333333;
				font-weight: 500;
			}
		}

		.setting-right {
			display: flex;
			align-items: center;

			.setting-value {
				font-size: 24rpx;
				color: #666666;
				margin-right: 12rpx;
			}

			.setting-arrow {
				font-size: 24rpx;
				color: #FF8A80;
			}
		}
	}
}

/* 邀请弹窗样式 */
.invite-content {
	padding: 20rpx 0;

	.invite-method {
		margin-bottom: 32rpx;

		.method-title {
			display: block;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 16rpx;
		}

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

			.method-option {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 24rpx 16rpx;
				border-radius: 16rpx;
				background: rgba(255, 138, 128, 0.05);
				transition: all 0.3s ease;

				&:active {
					background: rgba(255, 138, 128, 0.1);
					transform: scale(0.98);
				}

				.option-icon {
					font-size: 32rpx;
					margin-bottom: 8rpx;
				}

				.option-text {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}
	}

	.invite-code {
		.code-title {
			display: block;
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
			margin-bottom: 16rpx;
		}

		.code-display {
			display: flex;
			align-items: center;
			padding: 20rpx;
			background: rgba(255, 138, 128, 0.05);
			border-radius: 16rpx;
			border: 2rpx dashed #FF8A80;

			.code-text {
				flex: 1;
				font-size: 32rpx;
				font-weight: 700;
				color: #FF8A80;
				text-align: center;
				letter-spacing: 4rpx;
			}

			.code-copy {
				padding: 8rpx 16rpx;
				background: #FF8A80;
				border-radius: 12rpx;

				.copy-text {
					font-size: 22rpx;
					color: white;
				}
			}
		}
	}
}

/* 响应式设计 */
@media (max-width: 375px) {
	.family-container {
		.family-overview-card,
		.members-card,
		.permissions-card,
		.settings-card {
			margin: 0 20rpx 20rpx 20rpx;
			padding: 24rpx;
		}

		.overview-stats {
			gap: 16rpx;

			.stat-item {
				padding: 20rpx 12rpx;

				.stat-number {
					font-size: 36rpx;
				}
			}
		}
	}
}

/* 动画效果 */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.family-container > view {
	animation: fadeIn 0.5s ease-out;
}

.family-container > view:nth-child(1) { animation-delay: 0.1s; }
.family-container > view:nth-child(2) { animation-delay: 0.2s; }
.family-container > view:nth-child(3) { animation-delay: 0.3s; }
.family-container > view:nth-child(4) { animation-delay: 0.4s; }
</style>
