<template>
	<view class="feedback-container page-container-with-bg">
		<!-- 反馈表单卡片 -->
		<view class="feedback-form-card">
			<view class="card-header">
				<text class="card-title">意见反馈</text>
				<text class="card-desc">您的建议是我们改进的动力</text>
			</view>
			<view class="form-content">
				<view class="form-group">
					<text class="form-label">反馈类型 *</text>
					<view class="type-options">
						<view 
							class="type-option" 
							v-for="type in feedbackTypes" 
							:key="type.value"
							:class="{ active: formData.type === type.value }"
							@click="selectType(type.value)"
						>
							<view class="option-icon">{{ type.icon }}</view>
							<text class="option-text">{{ type.label }}</text>
						</view>
					</view>
				</view>
				<view class="form-group">
					<text class="form-label">问题描述 *</text>
					<u-textarea
						v-model="formData.content"
						placeholder="请详细描述您遇到的问题或建议..."
						:maxlength="500"
						count
						:custom-style="textareaStyle"
					></u-textarea>
				</view>
				<view class="form-group">
					<text class="form-label">联系方式</text>
					<u-input
						v-model="formData.contact"
						placeholder="请留下您的联系方式（可选）"
						border="none"
						:custom-style="inputStyle"
					></u-input>
				</view>
				<view class="form-group">
					<text class="form-label">截图上传</text>
					<view class="upload-area">
						<view 
							class="upload-item" 
							v-for="(image, index) in formData.images" 
							:key="index"
							@click="previewImage(index)"
						>
							<image class="upload-image" :src="image" mode="aspectFill" />
							<view class="upload-delete" @click.stop="deleteImage(index)">
								<text class="delete-icon">×</text>
							</view>
						</view>
						<view 
							class="upload-add" 
							v-if="formData.images.length < 3"
							@click="uploadImage"
						>
							<text class="add-icon">+</text>
							<text class="add-text">添加截图</text>
						</view>
					</view>
				</view>
				<view class="submit-button">
					<u-button
						type="primary"
						:custom-style="buttonStyle"
						@click="submitFeedback"
						:loading="submitting"
					>
						{{ submitting ? '提交中...' : '提交反馈' }}
					</u-button>
				</view>
			</view>
		</view>

		<!-- 历史反馈卡片 -->
		<view class="history-card">
			<view class="card-header">
				<text class="card-title">历史反馈</text>
				<view class="header-action" @click="refreshHistory">
					<text class="action-text">刷新</text>
				</view>
			</view>
			<view class="history-list" v-if="historyList.length > 0">
				<view 
					class="history-item" 
					v-for="item in historyList" 
					:key="item.id"
					@click="viewFeedbackDetail(item)"
				>
					<view class="item-header">
						<view class="item-type">
							<text class="type-icon">{{ getTypeIcon(item.type) }}</text>
							<text class="type-text">{{ getTypeText(item.type) }}</text>
						</view>
						<view class="item-status" :class="item.status">
							<text class="status-text">{{ getStatusText(item.status) }}</text>
						</view>
					</view>
					<view class="item-content">
						<text class="content-text">{{ item.content }}</text>
					</view>
					<view class="item-footer">
						<text class="submit-time">{{ formatTime(item.submitTime) }}</text>
						<text class="item-arrow">→</text>
					</view>
				</view>
			</view>
			<view class="empty-history" v-else>
				<view class="empty-icon">📝</view>
				<view class="empty-text">暂无反馈记录</view>
			</view>
		</view>

		<!-- 常见问题卡片 -->
		<view class="faq-card">
			<view class="card-header">
				<text class="card-title">常见问题</text>
			</view>
			<view class="faq-list">
				<view 
					class="faq-item" 
					v-for="faq in faqList" 
					:key="faq.id"
					@click="toggleFaq(faq)"
				>
					<view class="faq-question">
						<text class="question-text">{{ faq.question }}</text>
						<text class="question-arrow" :class="{ expanded: faq.expanded }">▼</text>
					</view>
					<view class="faq-answer" v-if="faq.expanded">
						<text class="answer-text">{{ faq.answer }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 联系我们卡片 -->
		<view class="contact-card">
			<view class="card-header">
				<text class="card-title">联系我们</text>
			</view>
			<view class="contact-list">
				<view class="contact-item" @click="copyContact('email')">
					<view class="contact-info">
						<text class="contact-icon">📧</text>
						<text class="contact-text">邮箱：support@petai.com</text>
					</view>
					<view class="contact-action">
						<text class="action-text">复制</text>
					</view>
				</view>
				<view class="contact-item" @click="copyContact('qq')">
					<view class="contact-info">
						<text class="contact-icon">💬</text>
						<text class="contact-text">QQ群：123456789</text>
					</view>
					<view class="contact-action">
						<text class="action-text">复制</text>
					</view>
				</view>
				<view class="contact-item" @click="copyContact('wechat')">
					<view class="contact-info">
						<text class="contact-icon">💚</text>
						<text class="contact-text">微信：PetAI_Support</text>
					</view>
					<view class="contact-action">
						<text class="action-text">复制</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

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

export default {
	name: 'FeedbackPage',
	setup() {
		// 响应式数据
		const formData = reactive({
			type: '',
			content: '',
			contact: '',
			images: []
		})
		
		const submitting = ref(false)
		const historyList = ref([])
		const faqList = ref([])
		
		const feedbackTypes = ref([
			{ value: 'bug', label: '功能异常', icon: '🐛' },
			{ value: 'suggestion', label: '功能建议', icon: '💡' },
			{ value: 'ui', label: '界面问题', icon: '🎨' },
			{ value: 'other', label: '其他问题', icon: '❓' }
		])
		
		// 样式配置
		const inputStyle = {
			fontSize: '28rpx',
			color: '#333333',
			backgroundColor: 'rgba(255, 138, 128, 0.05)',
			borderRadius: '12rpx',
			padding: '20rpx'
		}
		
		const textareaStyle = {
			fontSize: '26rpx',
			color: '#333333',
			backgroundColor: 'rgba(255, 138, 128, 0.05)',
			borderRadius: '12rpx',
			padding: '20rpx'
		}
		
		const buttonStyle = {
			background: 'linear-gradient(135deg, #FF8A80, #FFB6C1)',
			borderRadius: '24rpx',
			height: '88rpx',
			fontSize: '32rpx'
		}
		
		// 生命周期
		onMounted(() => {
			loadHistory()
			loadFAQ()
			loadUserContact()
		})
		
		// 方法定义
		const loadHistory = () => {
			try {
				const savedHistory = uni.getStorageSync('feedbackHistory') || []
				
				// 如果没有历史记录，创建一些模拟数据
				if (savedHistory.length === 0) {
					const mockHistory = [
						{
							id: 'fb_1',
							type: 'bug',
							content: '宠物记录页面偶尔会出现加载失败的情况',
							contact: '',
							status: 'resolved',
							submitTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
							response: '感谢您的反馈，该问题已在最新版本中修复。'
						},
						{
							id: 'fb_2',
							type: 'suggestion',
							content: '希望能增加宠物体重变化趋势图功能',
							contact: '',
							status: 'processing',
							submitTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString(),
							response: '您的建议很棒，我们正在评估技术可行性。'
						}
					]
					
					uni.setStorageSync('feedbackHistory', mockHistory)
					historyList.value = mockHistory
				} else {
					historyList.value = savedHistory
				}
			} catch (error) {
				console.error('加载反馈历史失败:', error)
			}
		}
		
		const loadFAQ = () => {
			faqList.value = [
				{
					id: 'faq_1',
					question: '如何添加新的宠物？',
					answer: '在首页点击"添加宠物"按钮，填写宠物的基本信息和上传照片即可。',
					expanded: false
				},
				{
					id: 'faq_2',
					question: '如何设置宠物提醒？',
					answer: '进入宠物详情页，点击"添加提醒"，选择提醒类型和时间即可设置。',
					expanded: false
				},
				{
					id: 'faq_3',
					question: '家庭成员如何共享宠物信息？',
					answer: '在"我的"页面进入家庭管理，邀请成员加入家庭即可共享宠物信息。',
					expanded: false
				},
				{
					id: 'faq_4',
					question: '如何发布领养信息？',
					answer: '在领养页面点击"发布领养"，填写宠物信息和领养要求即可发布。',
					expanded: false
				}
			]
		}
		
		const loadUserContact = () => {
			try {
				const userInfo = uni.getStorageSync('userInfo') || {}
				if (userInfo.phone) {
					formData.contact = userInfo.phone
				}
			} catch (error) {
				console.error('加载用户联系方式失败:', error)
			}
		}
		
		const selectType = (type) => {
			formData.type = type
		}
		
		const uploadImage = () => {
			uni.chooseImage({
				count: 3 - formData.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					formData.images.push(...res.tempFilePaths)
				},
				fail: (err) => {
					console.error('选择图片失败:', err)
					uni.showToast({
						title: '选择图片失败',
						icon: 'none'
					})
				}
			})
		}
		
		const deleteImage = (index) => {
			formData.images.splice(index, 1)
		}
		
		const previewImage = (index) => {
			uni.previewImage({
				urls: formData.images,
				current: index
			})
		}
		
		const validateForm = () => {
			if (!formData.type) {
				uni.showToast({
					title: '请选择反馈类型',
					icon: 'none'
				})
				return false
			}
			
			if (!formData.content.trim()) {
				uni.showToast({
					title: '请填写问题描述',
					icon: 'none'
				})
				return false
			}
			
			return true
		}
		
		const submitFeedback = async () => {
			if (!validateForm()) {
				return
			}
			
			submitting.value = true
			
			try {
				// 模拟网络请求延迟
				await new Promise(resolve => setTimeout(resolve, 2000))
				
				const feedback = {
					id: 'fb_' + Date.now(),
					type: formData.type,
					content: formData.content.trim(),
					contact: formData.contact.trim(),
					images: formData.images,
					status: 'pending',
					submitTime: new Date().toISOString(),
					response: ''
				}
				
				// 保存到历史记录
				historyList.value.unshift(feedback)
				uni.setStorageSync('feedbackHistory', historyList.value)
				
				// 重置表单
				Object.assign(formData, {
					type: '',
					content: '',
					contact: formData.contact, // 保留联系方式
					images: []
				})
				
				uni.showToast({
					title: '反馈提交成功',
					icon: 'success'
				})
				
			} catch (error) {
				console.error('提交反馈失败:', error)
				uni.showToast({
					title: '提交失败',
					icon: 'none'
				})
			} finally {
				submitting.value = false
			}
		}
		
		const refreshHistory = () => {
			loadHistory()
			uni.showToast({
				title: '刷新成功',
				icon: 'success'
			})
		}
		
		const getTypeIcon = (type) => {
			const typeMap = {
				'bug': '🐛',
				'suggestion': '💡',
				'ui': '🎨',
				'other': '❓'
			}
			return typeMap[type] || '❓'
		}
		
		const getTypeText = (type) => {
			const typeMap = {
				'bug': '功能异常',
				'suggestion': '功能建议',
				'ui': '界面问题',
				'other': '其他问题'
			}
			return typeMap[type] || '其他问题'
		}
		
		const getStatusText = (status) => {
			const statusMap = {
				'pending': '待处理',
				'processing': '处理中',
				'resolved': '已解决',
				'closed': '已关闭'
			}
			return statusMap[status] || '待处理'
		}
		
		const formatTime = (timeString) => {
			if (!timeString) return ''
			const date = new Date(timeString)
			return date.toLocaleDateString('zh-CN')
		}
		
		const viewFeedbackDetail = (item) => {
			let content = `类型：${getTypeText(item.type)}\n状态：${getStatusText(item.status)}\n提交时间：${formatTime(item.submitTime)}\n\n问题描述：\n${item.content}`
			
			if (item.response) {
				content += `\n\n官方回复：\n${item.response}`
			}
			
			uni.showModal({
				title: '反馈详情',
				content: content,
				showCancel: false
			})
		}
		
		const toggleFaq = (faq) => {
			faq.expanded = !faq.expanded
		}
		
		const copyContact = (type) => {
			let text = ''
			switch (type) {
				case 'email':
					text = 'support@petai.com'
					break
				case 'qq':
					text = '123456789'
					break
				case 'wechat':
					text = 'PetAI_Support'
					break
			}
			
			if (text) {
				uni.setClipboardData({
					data: text,
					success: () => {
						uni.showToast({
							title: '已复制到剪贴板',
							icon: 'success'
						})
					}
				})
			}
		}
		
		return {
			formData,
			submitting,
			historyList,
			faqList,
			feedbackTypes,
			inputStyle,
			textareaStyle,
			buttonStyle,
			selectType,
			uploadImage,
			deleteImage,
			previewImage,
			submitFeedback,
			refreshHistory,
			getTypeIcon,
			getTypeText,
			getStatusText,
			formatTime,
			viewFeedbackDetail,
			toggleFaq,
			copyContact
		}
	}
}
</script>

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

/* 通用卡片样式 */
.feedback-form-card,
.history-card,
.faq-card,
.contact-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 {
		margin-bottom: 24rpx;

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

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

		.header-action {
			display: flex;
			justify-content: flex-end;

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

/* 反馈表单 */
.form-content {
	.form-group {
		margin-bottom: 32rpx;

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

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

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

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

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

				.option-text {
					color: #FF8A80;
					font-weight: 600;
				}
			}

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

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

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

	.upload-area {
		display: flex;
		gap: 16rpx;

		.upload-item {
			position: relative;
			width: 120rpx;
			height: 120rpx;
			border-radius: 12rpx;
			overflow: hidden;

			.upload-image {
				width: 100%;
				height: 100%;
			}

			.upload-delete {
				position: absolute;
				top: 4rpx;
				right: 4rpx;
				width: 24rpx;
				height: 24rpx;
				background: rgba(0, 0, 0, 0.6);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				.delete-icon {
					color: white;
					font-size: 16rpx;
					font-weight: bold;
				}
			}
		}

		.upload-add {
			width: 120rpx;
			height: 120rpx;
			border: 2rpx dashed #FF8A80;
			border-radius: 12rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background: rgba(255, 138, 128, 0.05);
			transition: all 0.3s ease;

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

			.add-icon {
				font-size: 32rpx;
				color: #FF8A80;
				margin-bottom: 4rpx;
			}

			.add-text {
				font-size: 20rpx;
				color: #FF8A80;
			}
		}
	}

	.submit-button {
		margin-top: 40rpx;
	}
}

/* 历史反馈 */
.history-card {
	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}

.history-list {
	.history-item {
		padding: 20rpx 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;
		}

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

			.item-type {
				display: flex;
				align-items: center;

				.type-icon {
					font-size: 20rpx;
					margin-right: 8rpx;
				}

				.type-text {
					font-size: 24rpx;
					color: #666666;
				}
			}

			.item-status {
				padding: 4rpx 12rpx;
				border-radius: 12rpx;
				font-size: 20rpx;

				&.pending {
					background: #FFF3E0;
					color: #FF9800;
				}

				&.processing {
					background: #E3F2FD;
					color: #2196F3;
				}

				&.resolved {
					background: #E8F5E8;
					color: #4CAF50;
				}

				&.closed {
					background: #F5F5F5;
					color: #757575;
				}

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

		.item-content {
			margin-bottom: 12rpx;

			.content-text {
				font-size: 26rpx;
				color: #333333;
				line-height: 1.5;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
		}

		.item-footer {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.submit-time {
				font-size: 22rpx;
				color: #999999;
			}

			.item-arrow {
				font-size: 20rpx;
				color: #FF8A80;
			}
		}
	}
}

/* 空历史状态 */
.empty-history {
	text-align: center;
	padding: 60rpx 0;

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

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

/* 常见问题 */
.faq-list {
	.faq-item {
		border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

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

		.faq-question {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			transition: all 0.3s ease;

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

			.question-text {
				flex: 1;
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}

			.question-arrow {
				font-size: 20rpx;
				color: #FF8A80;
				transition: transform 0.3s ease;

				&.expanded {
					transform: rotate(180deg);
				}
			}
		}

		.faq-answer {
			padding: 0 0 20rpx 0;
			animation: fadeIn 0.3s ease-out;

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

/* 联系我们 */
.contact-list {
	.contact-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 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;
		}

		.contact-info {
			display: flex;
			align-items: center;
			flex: 1;

			.contact-icon {
				font-size: 28rpx;
				margin-right: 16rpx;
			}

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

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

/* 响应式设计 */
@media (max-width: 375px) {
	.feedback-container {
		.feedback-form-card,
		.history-card,
		.faq-card,
		.contact-card {
			margin: 0 20rpx 20rpx 20rpx;
			padding: 24rpx;
		}

		.type-options {
			gap: 12rpx;

			.type-option {
				padding: 20rpx 12rpx;
			}
		}

		.upload-area {
			gap: 12rpx;

			.upload-item,
			.upload-add {
				width: 100rpx;
				height: 100rpx;
			}
		}
	}
}

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

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

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

/* 交互反馈 */
.type-option:active,
.upload-add:active,
.history-item:active,
.faq-question:active,
.contact-item:active {
	transform: scale(0.98);
}
</style>
