<template>
	<view class="reminders-container page-container-with-bg">
		<!-- 统计概览卡片 -->
		<view class="stats-card">
			<view class="stats-grid">
				<view class="stat-item">
					<view class="stat-number">{{ pendingCount }}</view>
					<view class="stat-label">待处理</view>
					<view class="stat-icon">⏰</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{ todayCount }}</view>
					<view class="stat-label">今日</view>
					<view class="stat-icon">📅</view>
				</view>
				<view class="stat-item">
					<view class="stat-number">{{ completedCount }}</view>
					<view class="stat-label">已完成</view>
					<view class="stat-icon">✅</view>
				</view>
			</view>
		</view>

		<!-- 筛选标签 -->
		<view class="filter-tabs">
			<view 
				class="filter-tab" 
				:class="{ active: currentFilter === 'all' }"
				@click="setFilter('all')"
			>
				<text class="tab-text">全部</text>
			</view>
			<view 
				class="filter-tab" 
				:class="{ active: currentFilter === 'pending' }"
				@click="setFilter('pending')"
			>
				<text class="tab-text">待处理</text>
			</view>
			<view 
				class="filter-tab" 
				:class="{ active: currentFilter === 'today' }"
				@click="setFilter('today')"
			>
				<text class="tab-text">今日</text>
			</view>
			<view 
				class="filter-tab" 
				:class="{ active: currentFilter === 'completed' }"
				@click="setFilter('completed')"
			>
				<text class="tab-text">已完成</text>
			</view>
		</view>

		<!-- 提醒列表 -->
		<view class="reminders-list" v-if="filteredReminders.length > 0">
			<view 
				class="reminder-item" 
				v-for="reminder in filteredReminders" 
				:key="reminder.id"
				:class="{ completed: reminder.completed, overdue: isOverdue(reminder) }"
				@click="viewReminderDetail(reminder)"
			>
				<view class="reminder-checkbox" @click.stop="toggleReminder(reminder)">
					<view class="checkbox" :class="{ checked: reminder.completed }">
						<text class="check-icon" v-if="reminder.completed">✓</text>
					</view>
				</view>
				<view class="reminder-content">
					<view class="reminder-title">{{ reminder.title }}</view>
					<view class="reminder-meta">
						<view class="reminder-time">
							<text class="time-icon">🕐</text>
							<text class="time-text">{{ formatDateTime(reminder.datetime) }}</text>
						</view>
						<view class="reminder-pet" v-if="reminder.petName">
							<text class="pet-icon">🐱</text>
							<text class="pet-text">{{ reminder.petName }}</text>
						</view>
					</view>
					<view class="reminder-desc" v-if="reminder.description">
						{{ reminder.description }}
					</view>
				</view>
				<view class="reminder-actions">
					<view class="reminder-priority" :class="reminder.priority">
						<text class="priority-dot"></text>
					</view>
					<view class="action-more" @click.stop="showReminderActions(reminder)">
						<text class="more-icon">⋯</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-else>
			<view class="empty-icon">📝</view>
			<view class="empty-text">{{ getEmptyText() }}</view>
			<view class="empty-action" @click="addReminder" v-if="currentFilter === 'all'">
				<text class="action-text">添加第一个提醒</text>
			</view>
		</view>

		<!-- 添加按钮 -->
		<view class="add-button" @click="addReminder">
			<text class="add-icon">+</text>
		</view>

		<!-- 添加提醒弹窗 -->
		<u-modal 
			:show="showAddModal" 
			title="添加提醒"
			@confirm="confirmAddReminder"
			@cancel="cancelAddReminder"
			:show-cancel-button="true"
			confirm-text="保存"
		>
			<view class="add-reminder-form">
				<view class="form-item">
					<text class="form-label">提醒标题</text>
					<u-input
						v-model="newReminder.title"
						placeholder="请输入提醒标题"
						border="none"
						:custom-style="inputStyle"
					></u-input>
				</view>
				<view class="form-item">
					<text class="form-label">提醒时间</text>
					<view class="datetime-picker" @click="showDatetimePicker">
						<text class="datetime-text">{{ formatDateTime(newReminder.datetime) || '请选择时间' }}</text>
						<text class="picker-arrow">→</text>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">关联宠物</text>
					<view class="pet-picker" @click="showPetPicker">
						<text class="pet-text">{{ newReminder.petName || '请选择宠物' }}</text>
						<text class="picker-arrow">→</text>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">优先级</text>
					<view class="priority-options">
						<view 
							class="priority-option" 
							:class="{ active: newReminder.priority === 'high' }"
							@click="setPriority('high')"
						>
							<view class="priority-dot high"></view>
							<text class="priority-text">高</text>
						</view>
						<view 
							class="priority-option" 
							:class="{ active: newReminder.priority === 'medium' }"
							@click="setPriority('medium')"
						>
							<view class="priority-dot medium"></view>
							<text class="priority-text">中</text>
						</view>
						<view 
							class="priority-option" 
							:class="{ active: newReminder.priority === 'low' }"
							@click="setPriority('low')"
						>
							<view class="priority-dot low"></view>
							<text class="priority-text">低</text>
						</view>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">备注说明</text>
					<u-textarea
						v-model="newReminder.description"
						placeholder="添加备注说明（可选）"
						:maxlength="100"
						:custom-style="textareaStyle"
					></u-textarea>
				</view>
			</view>
		</u-modal>

		<!-- 日期时间选择器 -->
		<u-datetime-picker
			:show="showDatetime"
			v-model="selectedDatetime"
			mode="datetime"
			@confirm="onDatetimeConfirm"
			@cancel="showDatetime = false"
		></u-datetime-picker>

		<!-- 宠物选择器 -->
		<u-picker
			:show="showPet"
			:columns="petColumns"
			@confirm="onPetConfirm"
			@cancel="showPet = false"
		></u-picker>

		<!-- 操作菜单 -->
		<u-action-sheet
			:show="showActions"
			:actions="actionList"
			@close="showActions = false"
			@select="onActionSelect"
		></u-action-sheet>
	</view>
</template>

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

export default {
	name: 'RemindersPage',
	setup() {
		// 响应式数据
		const reminders = ref([])
		const currentFilter = ref('all')
		const showAddModal = ref(false)
		const showDatetime = ref(false)
		const showPet = ref(false)
		const showActions = ref(false)
		const selectedDatetime = ref(Date.now())
		const currentReminder = ref(null)
		
		const newReminder = reactive({
			title: '',
			datetime: '',
			petId: '',
			petName: '',
			priority: 'medium',
			description: ''
		})
		
		const petColumns = ref([])
		const actionList = ref([
			{ name: '编辑', value: 'edit' },
			{ name: '删除', value: 'delete', color: '#FF5722' }
		])
		
		// 样式配置
		const inputStyle = {
			fontSize: '28rpx',
			color: '#333333'
		}
		
		const textareaStyle = {
			fontSize: '26rpx',
			color: '#333333'
		}
		
		// 计算属性
		const pendingCount = computed(() => {
			return reminders.value.filter(r => !r.completed).length
		})
		
		const todayCount = computed(() => {
			const today = new Date().toDateString()
			return reminders.value.filter(r => 
				new Date(r.datetime).toDateString() === today
			).length
		})
		
		const completedCount = computed(() => {
			return reminders.value.filter(r => r.completed).length
		})
		
		const filteredReminders = computed(() => {
			let filtered = reminders.value
			
			switch (currentFilter.value) {
				case 'pending':
					filtered = reminders.value.filter(r => !r.completed)
					break
				case 'today':
					const today = new Date().toDateString()
					filtered = reminders.value.filter(r => 
						new Date(r.datetime).toDateString() === today
					)
					break
				case 'completed':
					filtered = reminders.value.filter(r => r.completed)
					break
				default:
					filtered = reminders.value
			}
			
			// 按时间排序，未完成的在前
			return filtered.sort((a, b) => {
				if (a.completed !== b.completed) {
					return a.completed ? 1 : -1
				}
				return new Date(a.datetime) - new Date(b.datetime)
			})
		})
		
		// 生命周期
		onMounted(() => {
			loadReminders()
			loadPets()
		})
		
		// 方法定义
		const loadReminders = () => {
			try {
				const savedReminders = uni.getStorageSync('reminders') || []
				reminders.value = savedReminders
			} catch (error) {
				console.error('加载提醒数据失败:', error)
			}
		}
		
		const loadPets = () => {
			try {
				const pets = uni.getStorageSync('pets') || []
				petColumns.value = [pets.map(pet => pet.name)]
			} catch (error) {
				console.error('加载宠物数据失败:', error)
			}
		}
		
		const saveReminders = () => {
			uni.setStorageSync('reminders', reminders.value)
		}
		
		const setFilter = (filter) => {
			currentFilter.value = filter
		}
		
		const isOverdue = (reminder) => {
			if (reminder.completed) return false
			return new Date(reminder.datetime) < new Date()
		}
		
		const formatDateTime = (datetime) => {
			if (!datetime) return ''
			const date = new Date(datetime)
			const now = new Date()
			const today = new Date(now.getFullYear(), now.getMonth(), now.getDate())
			const reminderDate = new Date(date.getFullYear(), date.getMonth(), date.getDate())
			
			let dateStr = ''
			if (reminderDate.getTime() === today.getTime()) {
				dateStr = '今天'
			} else if (reminderDate.getTime() === today.getTime() + 24 * 60 * 60 * 1000) {
				dateStr = '明天'
			} else {
				dateStr = `${date.getMonth() + 1}月${date.getDate()}日`
			}
			
			const timeStr = `${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
			return `${dateStr} ${timeStr}`
		}
		
		const getEmptyText = () => {
			switch (currentFilter.value) {
				case 'pending':
					return '暂无待处理的提醒'
				case 'today':
					return '今日暂无提醒事项'
				case 'completed':
					return '暂无已完成的提醒'
				default:
					return '暂无提醒事项'
			}
		}
		
		const toggleReminder = (reminder) => {
			reminder.completed = !reminder.completed
			reminder.completedAt = reminder.completed ? new Date().toISOString() : null
			saveReminders()
			
			uni.showToast({
				title: reminder.completed ? '已完成' : '已取消完成',
				icon: 'success'
			})
		}
		
		const viewReminderDetail = (reminder) => {
			const statusText = reminder.completed ? '已完成' : (isOverdue(reminder) ? '已过期' : '待处理')
			const content = `时间：${formatDateTime(reminder.datetime)}\n状态：${statusText}${reminder.petName ? `\n宠物：${reminder.petName}` : ''}${reminder.description ? `\n备注：${reminder.description}` : ''}`
			
			uni.showModal({
				title: reminder.title,
				content: content,
				showCancel: false
			})
		}
		
		const showReminderActions = (reminder) => {
			currentReminder.value = reminder
			showActions.value = true
		}
		
		const onActionSelect = (action) => {
			if (action.value === 'edit') {
				editReminder(currentReminder.value)
			} else if (action.value === 'delete') {
				deleteReminder(currentReminder.value)
			}
			showActions.value = false
		}
		
		const editReminder = (reminder) => {
			Object.assign(newReminder, {
				id: reminder.id,
				title: reminder.title,
				datetime: reminder.datetime,
				petId: reminder.petId,
				petName: reminder.petName,
				priority: reminder.priority,
				description: reminder.description
			})
			showAddModal.value = true
		}
		
		const deleteReminder = (reminder) => {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这个提醒吗？',
				success: (res) => {
					if (res.confirm) {
						const index = reminders.value.findIndex(r => r.id === reminder.id)
						if (index > -1) {
							reminders.value.splice(index, 1)
							saveReminders()
							uni.showToast({
								title: '已删除',
								icon: 'success'
							})
						}
					}
				}
			})
		}
		
		const addReminder = () => {
			// 重置表单
			Object.assign(newReminder, {
				id: '',
				title: '',
				datetime: '',
				petId: '',
				petName: '',
				priority: 'medium',
				description: ''
			})
			showAddModal.value = true
		}
		
		const confirmAddReminder = () => {
			if (!newReminder.title.trim()) {
				uni.showToast({
					title: '请输入提醒标题',
					icon: 'none'
				})
				return
			}
			
			if (!newReminder.datetime) {
				uni.showToast({
					title: '请选择提醒时间',
					icon: 'none'
				})
				return
			}
			
			const reminder = {
				id: newReminder.id || 'reminder_' + Date.now(),
				title: newReminder.title.trim(),
				datetime: newReminder.datetime,
				petId: newReminder.petId,
				petName: newReminder.petName,
				priority: newReminder.priority,
				description: newReminder.description.trim(),
				completed: false,
				createdAt: new Date().toISOString()
			}
			
			if (newReminder.id) {
				// 编辑模式
				const index = reminders.value.findIndex(r => r.id === newReminder.id)
				if (index > -1) {
					reminders.value[index] = reminder
				}
			} else {
				// 新增模式
				reminders.value.push(reminder)
			}
			
			saveReminders()
			showAddModal.value = false
			
			uni.showToast({
				title: newReminder.id ? '修改成功' : '添加成功',
				icon: 'success'
			})
		}
		
		const cancelAddReminder = () => {
			showAddModal.value = false
		}
		
		const showDatetimePicker = () => {
			selectedDatetime.value = newReminder.datetime ? new Date(newReminder.datetime).getTime() : Date.now()
			showDatetime.value = true
		}
		
		const onDatetimeConfirm = (e) => {
			newReminder.datetime = new Date(e.value).toISOString()
			showDatetime.value = false
		}
		
		const showPetPicker = () => {
			showPet.value = true
		}
		
		const onPetConfirm = (e) => {
			const pets = uni.getStorageSync('pets') || []
			const selectedPet = pets.find(pet => pet.name === e.value[0])
			if (selectedPet) {
				newReminder.petId = selectedPet.id
				newReminder.petName = selectedPet.name
			}
			showPet.value = false
		}
		
		const setPriority = (priority) => {
			newReminder.priority = priority
		}
		
		return {
			reminders,
			currentFilter,
			showAddModal,
			showDatetime,
			showPet,
			showActions,
			selectedDatetime,
			newReminder,
			petColumns,
			actionList,
			inputStyle,
			textareaStyle,
			pendingCount,
			todayCount,
			completedCount,
			filteredReminders,
			setFilter,
			isOverdue,
			formatDateTime,
			getEmptyText,
			toggleReminder,
			viewReminderDetail,
			showReminderActions,
			onActionSelect,
			addReminder,
			confirmAddReminder,
			cancelAddReminder,
			showDatetimePicker,
			onDatetimeConfirm,
			showPetPicker,
			onPetConfirm,
			setPriority
		}
	}
}
</script>

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

/* 统计概览卡片 */
.stats-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);

	.stats-grid {
		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;
				margin-bottom: 8rpx;
			}

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

/* 筛选标签 */
.filter-tabs {
	display: flex;
	margin: 0 30rpx 24rpx 30rpx;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	padding: 8rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

	.filter-tab {
		flex: 1;
		text-align: center;
		padding: 16rpx 12rpx;
		border-radius: 16rpx;
		transition: all 0.3s ease;

		&.active {
			background: linear-gradient(135deg, #FF8A80, #FFB6C1);

			.tab-text {
				color: white;
				font-weight: 600;
			}
		}

		.tab-text {
			font-size: 26rpx;
			color: #666666;
		}
	}
}

/* 提醒列表 */
.reminders-list {
	margin: 0 30rpx;

	.reminder-item {
		display: flex;
		align-items: flex-start;
		background: rgba(255, 255, 255, 0.95);
		backdrop-filter: blur(20rpx);
		border-radius: 20rpx;
		padding: 24rpx;
		margin-bottom: 16rpx;
		box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1);
		border: 1rpx solid rgba(255, 255, 255, 0.3);
		transition: all 0.3s ease;

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

		&.completed {
			opacity: 0.6;

			.reminder-title {
				text-decoration: line-through;
				color: #999999;
			}
		}

		&.overdue:not(.completed) {
			border-left: 6rpx solid #FF5722;

			.reminder-title {
				color: #FF5722;
			}
		}

		.reminder-checkbox {
			margin-right: 16rpx;
			margin-top: 4rpx;

			.checkbox {
				width: 40rpx;
				height: 40rpx;
				border: 3rpx solid #CCCCCC;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.3s ease;

				&.checked {
					background: #FF8A80;
					border-color: #FF8A80;

					.check-icon {
						color: white;
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}

		.reminder-content {
			flex: 1;

			.reminder-title {
				font-size: 30rpx;
				font-weight: 600;
				color: #333333;
				margin-bottom: 12rpx;
				line-height: 1.4;
			}

			.reminder-meta {
				display: flex;
				flex-wrap: wrap;
				gap: 16rpx;
				margin-bottom: 8rpx;

				.reminder-time,
				.reminder-pet {
					display: flex;
					align-items: center;

					.time-icon,
					.pet-icon {
						font-size: 20rpx;
						margin-right: 6rpx;
					}

					.time-text,
					.pet-text {
						font-size: 22rpx;
						color: #666666;
					}
				}
			}

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

		.reminder-actions {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 12rpx;

			.reminder-priority {
				.priority-dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;

					&.high {
						background: #FF5722;
					}

					&.medium {
						background: #FF8A80;
					}

					&.low {
						background: #CCCCCC;
					}
				}
			}

			.action-more {
				padding: 8rpx;

				.more-icon {
					font-size: 24rpx;
					color: #CCCCCC;
				}
			}
		}
	}
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80rpx 40rpx;
	margin: 0 30rpx;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);

	.empty-icon {
		font-size: 80rpx;
		margin-bottom: 24rpx;
		opacity: 0.5;
	}

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

	.empty-action {
		display: inline-block;
		padding: 16rpx 32rpx;
		background: linear-gradient(135deg, #FF8A80, #FFB6C1);
		border-radius: 20rpx;

		.action-text {
			font-size: 26rpx;
			color: white;
		}
	}
}

/* 添加按钮 */
.add-button {
	position: fixed;
	bottom: 120rpx;
	right: 40rpx;
	width: 100rpx;
	height: 100rpx;
	background: linear-gradient(135deg, #FF8A80, #FFB6C1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8rpx 24rpx rgba(255, 138, 128, 0.4);
	z-index: 100;
	transition: all 0.3s ease;

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

	.add-icon {
		font-size: 48rpx;
		color: white;
		font-weight: 300;
	}
}

/* 添加提醒表单 */
.add-reminder-form {
	padding: 20rpx 0;

	.form-item {
		margin-bottom: 32rpx;

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

		.datetime-picker,
		.pet-picker {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			background: rgba(255, 138, 128, 0.05);
			border-radius: 16rpx;
			border: 1rpx solid rgba(255, 138, 128, 0.2);

			.datetime-text,
			.pet-text {
				font-size: 28rpx;
				color: #333333;
			}

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

		.priority-options {
			display: flex;
			gap: 16rpx;

			.priority-option {
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 20rpx 16rpx;
				border-radius: 16rpx;
				background: rgba(255, 138, 128, 0.05);
				border: 2rpx solid transparent;
				transition: all 0.3s ease;

				&.active {
					border-color: #FF8A80;
					background: rgba(255, 138, 128, 0.1);
				}

				.priority-dot {
					width: 16rpx;
					height: 16rpx;
					border-radius: 50%;
					margin-right: 8rpx;

					&.high {
						background: #FF5722;
					}

					&.medium {
						background: #FF8A80;
					}

					&.low {
						background: #CCCCCC;
					}
				}

				.priority-text {
					font-size: 26rpx;
					color: #333333;
				}
			}
		}
	}
}

/* 响应式设计 */
@media (max-width: 375px) {
	.reminders-container {
		.stats-card,
		.filter-tabs,
		.reminders-list,
		.empty-state {
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		.stats-card,
		.empty-state {
			padding: 24rpx;
		}

		.stats-grid {
			gap: 16rpx;

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

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

		.add-button {
			right: 30rpx;
			bottom: 100rpx;
			width: 80rpx;
			height: 80rpx;

			.add-icon {
				font-size: 40rpx;
			}
		}
	}
}

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

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

.reminder-item {
	animation: fadeIn 0.3s ease-out;
}

.add-button {
	animation: fadeIn 0.6s ease-out;
}
</style>
