<template>
	<view class="container">
		<view v-if="question" class="question-card">
			<view class="question-header">
				<text class="question-title">题目</text>
				<view class="question-meta">
					<view class="meta-tag category-tag">
						<text class="meta-text">{{ getCategoryText(question.category) }}</text>
					</view>
					<view class="meta-tag difficulty-tag" :class="getDifficultyClass(question.difficulty)">
						<text class="meta-text">{{ getDifficultyText(question.difficulty) }}</text>
					</view>
				</view>
			</view>
			<view class="question-content">
				<text class="question-text">{{ question.question }}</text>
			</view>
			<view v-if="question.options" class="options-list">
				<view 
					v-for="(option, index) in question.options" 
					:key="index" 
					class="option-item"
					:class="{ 
						'correct': answered && correctAnswer === String.fromCharCode(65 + index),
						'wrong': answered && selectedAnswer === String.fromCharCode(65 + index) && correctAnswer !== String.fromCharCode(65 + index)
					}"
					@click="handleAnswer(option, index)"
				>
					<text class="option-text">{{ option }}</text>
				</view>
			</view>
			<view v-if="answered && explanation" class="explanation">
				<view class="explanation-title">解析</view>
				<text class="explanation-text">{{ explanation }}</text>
			</view>
			<view class="action-buttons">
				<button class="next-btn" @click="refreshQuestion">下一题</button>
			</view>
		</view>
		<view v-else class="empty-state">
			<text class="empty-text">暂无题目</text>
			<button class="refresh-btn" @click="refreshQuestion">刷新</button>
		</view>
	</view>
</template>

<script>
import storage from '../../utils/storage.js'
import api from '../../utils/api.js'

export default {
	data() {
		return {
			categorySn: '',
			categoryName: '',
			question: null,
			answered: false,
			correctAnswer: '',
			selectedAnswer: '',
			explanation: ''
		}
	},
	
	onLoad(options) {
		this.categorySn = options.categorySn || ''
		this.categoryName = options.categoryName || ''
		this.refreshQuestion()
	},
	
	onShow() {
		if (this.question) {
			this.checkAnsweredQuestion()
		}
	},
	
	methods: {
		loadQuestion() {
			const question = storage.getQuestion()
			if (question) {
				this.question = question
				this.resetAnswer()
			}
		},
		
		checkAnsweredQuestion() {
			if (this.question && storage.isQuestionAnswered(this.question.sn)) {
				this.refreshQuestion()
			}
		},
		
		resetAnswer() {
			this.answered = false
			this.correctAnswer = ''
			this.selectedAnswer = ''
			this.explanation = ''
		},
		
		getCategoryText(category) {
			return category || '其他'
		},
		
		getDifficultyText(difficulty) {
			if (!difficulty && difficulty !== 0) return '简单'
			if (difficulty <= 30) return '简单'
			if (difficulty <= 60) return '中等'
			if (difficulty <= 80) return '困难'
			return '极难'
		},
		
		getDifficultyClass(difficulty) {
			if (!difficulty && difficulty !== 0) return 'difficulty-easy'
			if (difficulty <= 30) return 'difficulty-easy'
			if (difficulty <= 60) return 'difficulty-medium'
			if (difficulty <= 80) return 'difficulty-hard'
			return 'difficulty-extreme'
		},
		
		async handleAnswer(option, index) {
			if (this.answered) return
			
			const answer = String.fromCharCode(65 + index)
			this.selectedAnswer = answer
			
			try {
				const res = await api.answerCategoryQuestion(this.question.sn, answer)
				if (res.data) {
					this.answered = true
					this.correctAnswer = res.data.answer || answer
					this.explanation = res.data.explanation || ''
					
					storage.addAnsweredQuestion(this.question.sn)
					
					if (this.correctAnswer === answer) {
						uni.showToast({
							title: '回答正确',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '回答错误',
							icon: 'none'
						})
					}
				}
			} catch (error) {
				console.error('提交答案失败:', error)
				uni.showToast({
					title: '提交失败',
					icon: 'none'
				})
			}
		},
		
		async refreshQuestion() {
			try {
				const res = await api.getCategoryQuestion(this.categorySn)
				if (res.data) {
					if (storage.isQuestionAnswered(res.data.sn)) {
						this.refreshQuestion()
						return
					}
					storage.setQuestion(res.data)
					this.question = res.data
					this.resetAnswer()
				} else {
					uni.showToast({
						title: '暂无题目',
						icon: 'none'
					})
				}
			} catch (error) {
				console.error('获取题目失败:', error)
				uni.showToast({
					title: '刷新失败',
					icon: 'none'
				})
			}
		}
	}
}
</script>

<style scoped>
.container {
	padding: 40rpx;
}

.question-card {
	background: #ffffff;
	border-radius: 20rpx;
	padding: 40rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.question-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 2rpx solid #f0f0f0;
}

.question-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.question-meta {
	display: flex;
	gap: 10rpx;
}

.meta-tag {
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
}

.category-tag {
	background: #e3f2fd;
}

.difficulty-tag {
	background: #f8f9fa;
}

.difficulty-easy {
	background: #d4edda;
	color: #155724;
}

.difficulty-medium {
	background: #fff3cd;
	color: #856404;
}

.difficulty-hard {
	background: #fd7e14;
	color: #ffffff;
}

.difficulty-extreme {
	background: #dc3545;
	color: #ffffff;
}

.meta-text {
	font-weight: bold;
}

.question-content {
	margin-bottom: 40rpx;
}

.question-text {
	font-size: 30rpx;
	color: #666;
	line-height: 1.8;
}

.options-list {
	margin-top: 30rpx;
}

.option-item {
	display: flex;
	align-items: center;
	padding: 24rpx 30rpx;
	margin-bottom: 20rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
	transition: all 0.3s;
}

.option-item:active {
	background: #e9ecef;
}

.option-item.correct {
	background: #d4edda;
	border: 2rpx solid #28a745;
}

.option-item.wrong {
	background: #f8d7da;
	border: 2rpx solid #dc3545;
}

.option-label {
	font-size: 28rpx;
	font-weight: bold;
	color: #667eea;
	margin-right: 20rpx;
	min-width: 40rpx;
}

.option-item.correct .option-label {
	color: #28a745;
}

.option-item.wrong .option-label {
	color: #dc3545;
}

.option-text {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.explanation {
	margin-top: 40rpx;
	padding: 30rpx;
	background: #fff3cd;
	border-radius: 12rpx;
	border-left: 4rpx solid #ffc107;
}

.explanation-title {
	font-size: 28rpx;
	font-weight: bold;
	color: #856404;
	margin-bottom: 16rpx;
}

.explanation-text {
	font-size: 28rpx;
	color: #856404;
	line-height: 1.8;
}

.action-buttons {
	margin-top: 40rpx;
	display: flex;
	justify-content: center;
}

.next-btn {
	width: 200rpx;
	height: 70rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 35rpx;
	border: none;
}

.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 60vh;
}

.empty-text {
	font-size: 32rpx;
	color: #999;
	margin-bottom: 40rpx;
}

.refresh-btn {
	width: 200rpx;
	height: 70rpx;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: #ffffff;
	font-size: 28rpx;
	border-radius: 35rpx;
	border: none;
}
</style>
