<template>
	<view class="notifications-container page-container-with-bg">
		<!-- 通知设置卡片 -->
		<view class="settings-card">
			<view class="card-header">
				<text class="card-title">通知设置</text>
			</view>
			<view class="settings-list">
				<view class="setting-item">
					<view class="setting-info">
						<text class="setting-title">系统通知</text>
						<text class="setting-desc">接收系统重要消息和更新通知</text>
					</view>
					<view class="setting-switch">
						<u-switch 
							v-model="notificationSettings.system" 
							@change="onSettingChange('system', $event)"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
				<view class="setting-item">
					<view class="setting-info">
						<text class="setting-title">宠物提醒</text>
						<text class="setting-desc">宠物喂食、医疗等重要提醒</text>
					</view>
					<view class="setting-switch">
						<u-switch 
							v-model="notificationSettings.petReminder" 
							@change="onSettingChange('petReminder', $event)"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
				<view class="setting-item">
					<view class="setting-info">
						<text class="setting-title">领养消息</text>
						<text class="setting-desc">领养申请、回复等相关消息</text>
					</view>
					<view class="setting-switch">
						<u-switch 
							v-model="notificationSettings.adoption" 
							@change="onSettingChange('adoption', $event)"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
				<view class="setting-item">
					<view class="setting-info">
						<text class="setting-title">家庭动态</text>
						<text class="setting-desc">家庭成员活动和共享内容通知</text>
					</view>
					<view class="setting-switch">
						<u-switch 
							v-model="notificationSettings.family" 
							@change="onSettingChange('family', $event)"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
				<view class="setting-item">
					<view class="setting-info">
						<text class="setting-title">营销推广</text>
						<text class="setting-desc">产品推荐、活动优惠等信息</text>
					</view>
					<view class="setting-switch">
						<u-switch 
							v-model="notificationSettings.marketing" 
							@change="onSettingChange('marketing', $event)"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
			</view>
		</view>

		<!-- 免打扰设置卡片 -->
		<view class="dnd-card">
			<view class="card-header">
				<text class="card-title">免打扰设置</text>
			</view>
			<view class="dnd-content">
				<view class="dnd-toggle">
					<view class="toggle-info">
						<text class="toggle-title">开启免打扰</text>
						<text class="toggle-desc">在指定时间段内不接收通知</text>
					</view>
					<view class="toggle-switch">
						<u-switch 
							v-model="dndSettings.enabled" 
							@change="onDndToggle"
							active-color="#FF8A80"
						></u-switch>
					</view>
				</view>
				<view class="dnd-time" v-if="dndSettings.enabled">
					<view class="time-item" @click="showStartTimePicker">
						<text class="time-label">开始时间</text>
						<text class="time-value">{{ dndSettings.startTime }}</text>
					</view>
					<view class="time-item" @click="showEndTimePicker">
						<text class="time-label">结束时间</text>
						<text class="time-value">{{ dndSettings.endTime }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 消息列表卡片 -->
		<view class="messages-card">
			<view class="card-header">
				<text class="card-title">最近消息</text>
				<view class="header-action" @click="markAllRead" v-if="unreadCount > 0">
					<text class="action-text">全部已读</text>
				</view>
			</view>
			<view class="messages-list" v-if="messagesList.length > 0">
				<view 
					class="message-item" 
					v-for="message in messagesList" 
					:key="message.id"
					:class="{ unread: !message.read }"
					@click="readMessage(message)"
				>
					<view class="message-icon" :class="message.type">
						<text class="icon-text">{{ getMessageIcon(message.type) }}</text>
					</view>
					<view class="message-content">
						<view class="message-title">{{ message.title }}</view>
						<view class="message-desc">{{ message.content }}</view>
						<view class="message-time">{{ formatTime(message.time) }}</view>
					</view>
					<view class="message-status" v-if="!message.read">
						<view class="unread-dot"></view>
					</view>
				</view>
			</view>
			<view class="empty-messages" v-else>
				<view class="empty-icon">📬</view>
				<view class="empty-text">暂无消息</view>
			</view>
		</view>

		<!-- 清理设置卡片 -->
		<view class="cleanup-card">
			<view class="card-header">
				<text class="card-title">消息管理</text>
			</view>
			<view class="cleanup-list">
				<view class="cleanup-item" @click="clearReadMessages">
					<view class="cleanup-info">
						<text class="cleanup-title">清理已读消息</text>
						<text class="cleanup-desc">删除所有已读的消息记录</text>
					</view>
					<view class="cleanup-action">
						<text class="action-arrow">→</text>
					</view>
				</view>
				<view class="cleanup-item" @click="clearAllMessages">
					<view class="cleanup-info">
						<text class="cleanup-title">清空所有消息</text>
						<text class="cleanup-desc">删除所有消息记录（不可恢复）</text>
					</view>
					<view class="cleanup-action">
						<text class="action-arrow">→</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 时间选择器 -->
		<u-datetime-picker
			:show="showStartTime"
			v-model="selectedStartTime"
			mode="time"
			@confirm="onStartTimeConfirm"
			@cancel="showStartTime = false"
		></u-datetime-picker>

		<u-datetime-picker
			:show="showEndTime"
			v-model="selectedEndTime"
			mode="time"
			@confirm="onEndTimeConfirm"
			@cancel="showEndTime = false"
		></u-datetime-picker>
	</view>
</template>

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

export default {
	name: 'NotificationsPage',
	setup() {
		// 响应式数据
		const notificationSettings = reactive({
			system: true,
			petReminder: true,
			adoption: true,
			family: true,
			marketing: false
		})
		
		const dndSettings = reactive({
			enabled: false,
			startTime: '22:00',
			endTime: '08:00'
		})
		
		const messagesList = ref([])
		const showStartTime = ref(false)
		const showEndTime = ref(false)
		const selectedStartTime = ref(Date.now())
		const selectedEndTime = ref(Date.now())
		
		// 计算属性
		const unreadCount = computed(() => {
			return messagesList.value.filter(msg => !msg.read).length
		})
		
		// 生命周期
		onMounted(() => {
			loadSettings()
			loadMessages()
		})
		
		// 方法定义
		const loadSettings = () => {
			try {
				const savedSettings = uni.getStorageSync('notificationSettings')
				if (savedSettings) {
					Object.assign(notificationSettings, savedSettings)
				}
				
				const savedDndSettings = uni.getStorageSync('dndSettings')
				if (savedDndSettings) {
					Object.assign(dndSettings, savedDndSettings)
				}
			} catch (error) {
				console.error('加载设置失败:', error)
			}
		}
		
		const loadMessages = () => {
			try {
				const savedMessages = uni.getStorageSync('notifications') || []
				
				// 如果没有消息，创建一些模拟消息
				if (savedMessages.length === 0) {
					const mockMessages = [
						{
							id: 'msg_1',
							type: 'system',
							title: '系统更新',
							content: '宠物AI助手已更新到最新版本，新增了家庭共享功能。',
							time: new Date(Date.now() - 2 * 60 * 60 * 1000).toISOString(),
							read: false
						},
						{
							id: 'msg_2',
							type: 'pet',
							title: '喂食提醒',
							content: '小橘的晚餐时间到了，记得给它准备食物哦！',
							time: new Date(Date.now() - 4 * 60 * 60 * 1000).toISOString(),
							read: true
						},
						{
							id: 'msg_3',
							type: 'adoption',
							title: '领养申请',
							content: '有用户申请领养您发布的小白，请及时查看处理。',
							time: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
							read: false
						},
						{
							id: 'msg_4',
							type: 'family',
							title: '家庭动态',
							content: '家庭成员小明为小花添加了一条健康记录。',
							time: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
							read: true
						}
					]
					
					uni.setStorageSync('notifications', mockMessages)
					messagesList.value = mockMessages
				} else {
					messagesList.value = savedMessages
				}
			} catch (error) {
				console.error('加载消息失败:', error)
			}
		}
		
		const saveSettings = () => {
			uni.setStorageSync('notificationSettings', notificationSettings)
			uni.setStorageSync('dndSettings', dndSettings)
		}
		
		const saveMessages = () => {
			uni.setStorageSync('notifications', messagesList.value)
		}
		
		const onSettingChange = (key, value) => {
			notificationSettings[key] = value
			saveSettings()
			
			uni.showToast({
				title: value ? '已开启' : '已关闭',
				icon: 'success'
			})
		}
		
		const onDndToggle = (value) => {
			dndSettings.enabled = value
			saveSettings()
			
			if (value) {
				uni.showToast({
					title: '免打扰已开启',
					icon: 'success'
				})
			} else {
				uni.showToast({
					title: '免打扰已关闭',
					icon: 'success'
				})
			}
		}
		
		const showStartTimePicker = () => {
			const [hours, minutes] = dndSettings.startTime.split(':')
			const date = new Date()
			date.setHours(parseInt(hours), parseInt(minutes), 0, 0)
			selectedStartTime.value = date.getTime()
			showStartTime.value = true
		}
		
		const showEndTimePicker = () => {
			const [hours, minutes] = dndSettings.endTime.split(':')
			const date = new Date()
			date.setHours(parseInt(hours), parseInt(minutes), 0, 0)
			selectedEndTime.value = date.getTime()
			showEndTime.value = true
		}
		
		const onStartTimeConfirm = (e) => {
			const date = new Date(e.value)
			dndSettings.startTime = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
			saveSettings()
			showStartTime.value = false
		}
		
		const onEndTimeConfirm = (e) => {
			const date = new Date(e.value)
			dndSettings.endTime = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
			saveSettings()
			showEndTime.value = false
		}
		
		const getMessageIcon = (type) => {
			const iconMap = {
				'system': '🔔',
				'pet': '🐱',
				'adoption': '🏠',
				'family': '👨‍👩‍👧‍👦',
				'marketing': '📢'
			}
			return iconMap[type] || '📬'
		}
		
		const formatTime = (timeString) => {
			if (!timeString) return ''
			const date = new Date(timeString)
			const now = new Date()
			const diffTime = now - date
			const diffHours = Math.floor(diffTime / (1000 * 60 * 60))
			const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
			
			if (diffHours < 1) {
				return '刚刚'
			} else if (diffHours < 24) {
				return `${diffHours}小时前`
			} else if (diffDays < 7) {
				return `${diffDays}天前`
			} else {
				return date.toLocaleDateString('zh-CN')
			}
		}
		
		const readMessage = (message) => {
			if (!message.read) {
				message.read = true
				saveMessages()
			}
			
			// 显示消息详情
			uni.showModal({
				title: message.title,
				content: message.content,
				showCancel: false
			})
		}
		
		const markAllRead = () => {
			messagesList.value.forEach(msg => {
				msg.read = true
			})
			saveMessages()
			
			uni.showToast({
				title: '已全部标记为已读',
				icon: 'success'
			})
		}
		
		const clearReadMessages = () => {
			uni.showModal({
				title: '清理已读消息',
				content: '确定要删除所有已读消息吗？此操作不可恢复。',
				success: (res) => {
					if (res.confirm) {
						messagesList.value = messagesList.value.filter(msg => !msg.read)
						saveMessages()
						
						uni.showToast({
							title: '已清理已读消息',
							icon: 'success'
						})
					}
				}
			})
		}
		
		const clearAllMessages = () => {
			uni.showModal({
				title: '清空所有消息',
				content: '确定要删除所有消息吗？此操作不可恢复。',
				success: (res) => {
					if (res.confirm) {
						messagesList.value = []
						saveMessages()
						
						uni.showToast({
							title: '已清空所有消息',
							icon: 'success'
						})
					}
				}
			})
		}
		
		return {
			notificationSettings,
			dndSettings,
			messagesList,
			showStartTime,
			showEndTime,
			selectedStartTime,
			selectedEndTime,
			unreadCount,
			onSettingChange,
			onDndToggle,
			showStartTimePicker,
			showEndTimePicker,
			onStartTimeConfirm,
			onEndTimeConfirm,
			getMessageIcon,
			formatTime,
			readMessage,
			markAllRead,
			clearReadMessages,
			clearAllMessages
		}
	}
}
</script>

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

/* 通用卡片样式 */
.settings-card,
.dnd-card,
.messages-card,
.cleanup-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 {
			.action-text {
				font-size: 24rpx;
				color: #FF8A80;
			}
		}
	}
}

/* 设置列表 */
.settings-list {
	.setting-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;
		}

		.setting-info {
			flex: 1;

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

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

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

/* 免打扰设置 */
.dnd-content {
	.dnd-toggle {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24rpx;

		.toggle-info {
			flex: 1;

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

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

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

	.dnd-time {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20rpx;

		.time-item {
			padding: 20rpx;
			background: rgba(255, 138, 128, 0.05);
			border-radius: 16rpx;
			text-align: center;
			transition: all 0.3s ease;

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

			.time-label {
				display: block;
				font-size: 22rpx;
				color: #666666;
				margin-bottom: 8rpx;
			}

			.time-value {
				font-size: 32rpx;
				font-weight: 600;
				color: #FF8A80;
			}
		}
	}
}

/* 消息列表 */
.messages-list {
	.message-item {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 0;
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
		transition: all 0.3s ease;

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

		&.unread {
			background: rgba(255, 138, 128, 0.05);
			border-radius: 16rpx;
			padding: 20rpx;
			margin-bottom: 8rpx;
		}

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

		.message-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 20rpx;

			&.system {
				background: rgba(33, 150, 243, 0.1);
			}

			&.pet {
				background: rgba(255, 138, 128, 0.1);
			}

			&.adoption {
				background: rgba(76, 175, 80, 0.1);
			}

			&.family {
				background: rgba(255, 152, 0, 0.1);
			}

			&.marketing {
				background: rgba(156, 39, 176, 0.1);
			}

			.icon-text {
				font-size: 28rpx;
			}
		}

		.message-content {
			flex: 1;

			.message-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 8rpx;
			}

			.message-desc {
				font-size: 24rpx;
				color: #666666;
				line-height: 1.5;
				margin-bottom: 8rpx;
			}

			.message-time {
				font-size: 20rpx;
				color: #999999;
			}
		}

		.message-status {
			margin-left: 16rpx;

			.unread-dot {
				width: 12rpx;
				height: 12rpx;
				background: #FF8A80;
				border-radius: 50%;
			}
		}
	}
}

/* 空消息状态 */
.empty-messages {
	text-align: center;
	padding: 60rpx 0;

	.empty-icon {
		font-size: 60rpx;
		margin-bottom: 16rpx;
		opacity: 0.5;
	}

	.empty-text {
		font-size: 24rpx;
		color: #999999;
	}
}

/* 清理设置 */
.cleanup-list {
	.cleanup-item {
		display: flex;
		justify-content: space-between;
		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;
		}

		.cleanup-info {
			flex: 1;

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

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

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

/* 响应式设计 */
@media (max-width: 375px) {
	.notifications-container {
		.settings-card,
		.dnd-card,
		.messages-card,
		.cleanup-card {
			margin: 0 20rpx 20rpx 20rpx;
			padding: 24rpx;
		}

		.dnd-time {
			gap: 16rpx;
		}
	}
}

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

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

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