<template>
	<view class="my-published-container page-container-with-bg">
		<!-- 统计卡片 -->
		<view class="stats-card">
			<view class="stats-grid">
				<view class="stat-item" :class="{ active: currentFilter === 'all' }" @click="setFilter('all')">
					<view class="stat-number">{{ totalCount }}</view>
					<view class="stat-label">全部</view>
				</view>
				<view class="stat-item" :class="{ active: currentFilter === 'active' }" @click="setFilter('active')">
					<view class="stat-number">{{ activeCount }}</view>
					<view class="stat-label">招募中</view>
				</view>
				<view class="stat-item" :class="{ active: currentFilter === 'completed' }" @click="setFilter('completed')">
					<view class="stat-number">{{ completedCount }}</view>
					<view class="stat-label">已完成</view>
				</view>
			</view>
		</view>

		<!-- 发布列表 -->
		<view class="published-list" v-if="filteredList.length > 0">
			<view 
				class="published-item" 
				v-for="item in filteredList" 
				:key="item.id"
				@click="viewDetail(item)"
			>
				<view class="item-image">
					<image class="pet-image" :src="item.photos[0] || '/static/default-pet.png'" mode="aspectFill" />
					<view class="status-badge" :class="item.status">
						<text class="status-text">{{ getStatusText(item.status) }}</text>
					</view>
				</view>
				<view class="item-content">
					<view class="item-header">
						<view class="pet-name">{{ item.name }}</view>
						<view class="item-actions" @click.stop="showActions(item)">
							<text class="action-icon">⋯</text>
						</view>
					</view>
					<view class="pet-info">
						<view class="info-row">
							<text class="info-label">品种：</text>
							<text class="info-value">{{ item.breed }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">性别：</text>
							<text class="info-value">{{ item.gender }}</text>
						</view>
						<view class="info-row">
							<text class="info-label">年龄：</text>
							<text class="info-value">{{ item.age }}</text>
						</view>
					</view>
					<view class="item-stats">
						<view class="stat-group">
							<text class="stat-icon">👁️</text>
							<text class="stat-text">{{ item.viewCount || 0 }} 浏览</text>
						</view>
						<view class="stat-group">
							<text class="stat-icon">📝</text>
							<text class="stat-text">{{ item.applicationCount || 0 }} 申请</text>
						</view>
						<view class="stat-group">
							<text class="stat-icon">🕐</text>
							<text class="stat-text">{{ formatTime(item.publishTime) }}</text>
						</view>
					</view>
					<view class="item-description" v-if="item.description">
						{{ item.description }}
					</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="publishNew" v-if="currentFilter === 'all'">
				<text class="action-text">发布第一个领养信息</text>
			</view>
		</view>

		<!-- 浮动发布按钮 -->
		<view class="fab-button" @click="publishNew">
			<text class="fab-icon">+</text>
		</view>

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

		<!-- 编辑状态弹窗 -->
		<u-modal 
			:show="showStatusModal" 
			title="修改状态"
			@confirm="confirmStatusChange"
			@cancel="showStatusModal = false"
		>
			<view class="status-options">
				<view 
					class="status-option" 
					v-for="status in statusOptions" 
					:key="status.value"
					:class="{ active: selectedStatus === status.value }"
					@click="selectStatus(status.value)"
				>
					<view class="option-icon" :class="status.value">
						<text class="icon-text">{{ status.icon }}</text>
					</view>
					<view class="option-info">
						<text class="option-title">{{ status.label }}</text>
						<text class="option-desc">{{ status.desc }}</text>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

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

export default {
	name: 'MyPublishedPage',
	setup() {
		// 响应式数据
		const publishedList = ref([])
		const currentFilter = ref('all')
		const showActionSheet = ref(false)
		const showStatusModal = ref(false)
		const currentItem = ref(null)
		const selectedStatus = ref('')
		
		const actionList = ref([
			{ name: '查看详情', value: 'detail' },
			{ name: '查看申请', value: 'applications' },
			{ name: '编辑信息', value: 'edit' },
			{ name: '修改状态', value: 'status' },
			{ name: '删除', value: 'delete', color: '#FF5722' }
		])
		
		const statusOptions = ref([
			{
				value: 'active',
				label: '招募中',
				desc: '正在寻找领养家庭',
				icon: '🟢'
			},
			{
				value: 'paused',
				label: '已暂停',
				desc: '暂时停止接收申请',
				icon: '🟡'
			},
			{
				value: 'completed',
				label: '已完成',
				desc: '已找到合适的领养家庭',
				icon: '🔵'
			},
			{
				value: 'cancelled',
				label: '已取消',
				desc: '取消领养计划',
				icon: '🔴'
			}
		])
		
		// 计算属性
		const totalCount = computed(() => publishedList.value.length)
		const activeCount = computed(() => publishedList.value.filter(item => item.status === 'active').length)
		const completedCount = computed(() => publishedList.value.filter(item => item.status === 'completed').length)
		
		const filteredList = computed(() => {
			if (currentFilter.value === 'all') {
				return publishedList.value
			}
			return publishedList.value.filter(item => item.status === currentFilter.value)
		})
		
		// 生命周期
		onMounted(() => {
			loadPublishedList()
		})
		
		// 方法定义
		const loadPublishedList = () => {
			try {
				const savedList = uni.getStorageSync('myPublishedAdoptions') || []
				
				// 如果没有数据，创建模拟数据
				if (savedList.length === 0) {
					const mockData = [
						{
							id: 'pub_1',
							name: '小橘',
							breed: '橘猫',
							gender: '公',
							age: '2岁',
							photos: ['/static/mock-cat1.jpg'],
							status: 'active',
							description: '性格温顺，喜欢和人亲近，已绝育，疫苗齐全。',
							publishTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
							applicationCount: 3,
							viewCount: 25
						},
						{
							id: 'pub_2',
							name: '小白',
							breed: '英短',
							gender: '母',
							age: '1岁',
							photos: ['/static/mock-cat2.jpg'],
							status: 'completed',
							description: '活泼可爱，适合有经验的铲屎官。',
							publishTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
							applicationCount: 8,
							viewCount: 45
						}
					]
					
					uni.setStorageSync('myPublishedAdoptions', mockData)
					publishedList.value = mockData
				} else {
					publishedList.value = savedList
				}
			} catch (error) {
				console.error('加载发布列表失败:', error)
			}
		}
		
		const savePublishedList = () => {
			uni.setStorageSync('myPublishedAdoptions', publishedList.value)
		}
		
		const setFilter = (filter) => {
			currentFilter.value = filter
		}
		
		const getStatusText = (status) => {
			const statusMap = {
				'active': '招募中',
				'paused': '已暂停',
				'completed': '已完成',
				'cancelled': '已取消'
			}
			return statusMap[status] || '未知'
		}
		
		const getEmptyText = () => {
			switch (currentFilter.value) {
				case 'active':
					return '暂无招募中的领养信息'
				case 'completed':
					return '暂无已完成的领养信息'
				default:
					return '还没有发布过领养信息'
			}
		}
		
		const formatTime = (timeString) => {
			if (!timeString) return ''
			const date = new Date(timeString)
			const now = new Date()
			const diffTime = now - date
			const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
			
			if (diffDays === 0) {
				return '今天'
			} else if (diffDays === 1) {
				return '昨天'
			} else if (diffDays < 7) {
				return `${diffDays}天前`
			} else {
				return date.toLocaleDateString('zh-CN')
			}
		}
		
		const viewDetail = (item) => {
			uni.navigateTo({
				url: `/pages/adoption/adoption-detail?id=${item.id}&from=published`,
				fail: () => {
					uni.showToast({
						title: '页面开发中',
						icon: 'none'
					})
				}
			})
		}
		
		const showActions = (item) => {
			currentItem.value = item
			showActionSheet.value = true
		}
		
		const onActionSelect = (action) => {
			switch (action.value) {
				case 'detail':
					viewDetail(currentItem.value)
					break
				case 'applications':
					viewApplications(currentItem.value)
					break
				case 'edit':
					editItem(currentItem.value)
					break
				case 'status':
					changeStatus(currentItem.value)
					break
				case 'delete':
					deleteItem(currentItem.value)
					break
			}
			showActionSheet.value = false
		}
		
		const viewApplications = (item) => {
			uni.navigateTo({
				url: `/pages/adoption/applications?publishId=${item.id}`,
				fail: () => {
					uni.showToast({
						title: '页面开发中',
						icon: 'none'
					})
				}
			})
		}
		
		const editItem = (item) => {
			uni.navigateTo({
				url: `/pages/adoption/publish?id=${item.id}&mode=edit`,
				fail: () => {
					uni.showToast({
						title: '页面开发中',
						icon: 'none'
					})
				}
			})
		}
		
		const changeStatus = (item) => {
			currentItem.value = item
			selectedStatus.value = item.status
			showStatusModal.value = true
		}
		
		const selectStatus = (status) => {
			selectedStatus.value = status
		}
		
		const confirmStatusChange = () => {
			if (currentItem.value && selectedStatus.value !== currentItem.value.status) {
				currentItem.value.status = selectedStatus.value
				savePublishedList()
				
				uni.showToast({
					title: '状态已更新',
					icon: 'success'
				})
			}
			showStatusModal.value = false
		}
		
		const deleteItem = (item) => {
			uni.showModal({
				title: '确认删除',
				content: '删除后无法恢复，确定要删除这个领养信息吗？',
				success: (res) => {
					if (res.confirm) {
						const index = publishedList.value.findIndex(p => p.id === item.id)
						if (index > -1) {
							publishedList.value.splice(index, 1)
							savePublishedList()
							uni.showToast({
								title: '已删除',
								icon: 'success'
							})
						}
					}
				}
			})
		}
		
		const publishNew = () => {
			uni.navigateTo({
				url: '/pages/adoption/publish',
				fail: () => {
					uni.showToast({
						title: '页面开发中',
						icon: 'none'
					})
				}
			})
		}
		
		return {
			publishedList,
			currentFilter,
			showActionSheet,
			showStatusModal,
			selectedStatus,
			actionList,
			statusOptions,
			totalCount,
			activeCount,
			completedCount,
			filteredList,
			setFilter,
			getStatusText,
			getEmptyText,
			formatTime,
			viewDetail,
			showActions,
			onActionSelect,
			selectStatus,
			confirmStatusChange,
			publishNew
		}
	}
}
</script>

<style lang="scss" scoped>
.my-published-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: 20rpx;

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

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

				.stat-number,
				.stat-label {
					color: white;
				}
			}

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

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

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

/* 发布列表 */
.published-list {
	margin: 0 30rpx;

	.published-item {
		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);
		}

		.item-image {
			position: relative;
			margin-bottom: 16rpx;

			.pet-image {
				width: 100%;
				height: 300rpx;
				border-radius: 16rpx;
			}

			.status-badge {
				position: absolute;
				top: 16rpx;
				right: 16rpx;
				padding: 8rpx 16rpx;
				border-radius: 16rpx;
				font-size: 20rpx;

				&.active {
					background: rgba(76, 175, 80, 0.9);
					color: white;
				}

				&.paused {
					background: rgba(255, 152, 0, 0.9);
					color: white;
				}

				&.completed {
					background: rgba(33, 150, 243, 0.9);
					color: white;
				}

				&.cancelled {
					background: rgba(244, 67, 54, 0.9);
					color: white;
				}

				.status-text {
					font-size: 20rpx;
					font-weight: 500;
				}
			}
		}

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

				.pet-name {
					font-size: 32rpx;
					font-weight: 700;
					color: #333333;
				}

				.item-actions {
					padding: 8rpx 12rpx;
					border-radius: 12rpx;
					background: rgba(255, 138, 128, 0.1);

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

			.pet-info {
				margin-bottom: 16rpx;

				.info-row {
					display: flex;
					margin-bottom: 8rpx;

					&:last-child {
						margin-bottom: 0;
					}

					.info-label {
						font-size: 24rpx;
						color: #666666;
						width: 80rpx;
					}

					.info-value {
						font-size: 24rpx;
						color: #333333;
						font-weight: 500;
					}
				}
			}

			.item-stats {
				display: flex;
				gap: 24rpx;
				margin-bottom: 16rpx;

				.stat-group {
					display: flex;
					align-items: center;

					.stat-icon {
						font-size: 20rpx;
						margin-right: 6rpx;
					}

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

			.item-description {
				font-size: 24rpx;
				color: #666666;
				line-height: 1.6;
				background: rgba(255, 138, 128, 0.05);
				padding: 16rpx;
				border-radius: 12rpx;
			}
		}
	}
}

/* 空状态 */
.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;
		}
	}
}

/* 浮动发布按钮 */
.fab-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);
	}

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

/* 状态选择弹窗 */
.status-options {
	padding: 20rpx 0;

	.status-option {
		display: flex;
		align-items: center;
		padding: 20rpx;
		margin-bottom: 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);
		}

		&:last-child {
			margin-bottom: 0;
		}

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

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

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

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

			&.cancelled {
				background: rgba(244, 67, 54, 0.1);
			}

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

		.option-info {
			flex: 1;

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

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

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

		.stats-card {
			padding: 24rpx;
		}

		.stats-grid {
			gap: 16rpx;

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

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

		.published-item {
			padding: 20rpx;

			.item-image {
				.pet-image {
					height: 250rpx;
				}
			}
		}

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

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

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

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

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

.fab-button {
	animation: fadeIn 0.6s ease-out;
}

/* 状态过渡动画 */
.status-badge {
	animation: fadeIn 0.4s ease-out;
}

.item-actions:active {
	transform: scale(0.9);
}
</style>
