<template>
	<view class="container">
		<view v-if="gameState === 'prepare'" class="prepare-screen">
			<view class="countdown-circle">
				<text class="countdown-text">{{ prepareCountdown }}</text>
			</view>
			<text class="prepare-text">准备开始</text>
		</view>
		
		<view v-else-if="gameState === 'playing'" class="game-screen">
			<view class="timer-bar">
				<view class="timer-progress" :style="{ width: timerProgress + '%' }"></view>
				<text class="timer-text">{{ countdown }}s</text>
			</view>
			
			<view class="stats-bar">
				<view class="stat-item">
					<text class="stat-label">正确</text>
					<text class="stat-value correct">{{ correctCount }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">错误</text>
					<text class="stat-value wrong">{{ wrongCount }}</text>
				</view>
				<view class="stat-item">
					<text class="stat-label">正确率</text>
					<text class="stat-value">{{ accuracy }}%</text>
				</view>
			</view>
			
			<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>
		</view>
		
		<view v-else-if="gameState === 'finished'" class="result-screen">
			<view class="result-card">
				<text class="result-title">答题结束</text>
				<view class="result-stats">
					<view class="result-stat-item">
						<text class="result-stat-label">答题总数</text>
						<text class="result-stat-value">{{ totalCount }}</text>
					</view>
					<view class="result-stat-item">
						<text class="result-stat-label">正确</text>
						<text class="result-stat-value correct">{{ correctCount }}</text>
					</view>
					<view class="result-stat-item">
						<text class="result-stat-label">错误</text>
						<text class="result-stat-value wrong">{{ wrongCount }}</text>
					</view>
					<view class="result-stat-item">
						<text class="result-stat-label">正确率</text>
						<text class="result-stat-value">{{ accuracy }}%</text>
					</view>
				</view>
				<button class="restart-btn" @click="restartGame">再来一次</button>
			</view>
		</view>
	</view>
</template>

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

export default {
	data() {
		return {
			gameState: 'prepare',
			prepareCountdown: 5,
			countdown: 60,
			timerProgress: 100,
			question: null,
			answered: false,
			correctAnswer: '',
			selectedAnswer: '',
			correctCount: 0,
			wrongCount: 0,
			totalCount: 0,
			prepareTimer: null,
			gameTimer: null
		}
	},
	
	computed: {
		accuracy() {
			if (this.totalCount === 0) return 0
			return Math.round((this.correctCount / this.totalCount) * 100)
		}
	},
	
	onLoad() {
		this.startPrepare()
	},
	
	onUnload() {
		this.clearTimers()
	},
	
	methods: {
		startPrepare() {
			this.gameState = 'prepare'
			this.prepareCountdown = 5
			this.prepareTimer = setInterval(() => {
				this.prepareCountdown--
				if (this.prepareCountdown <= 0) {
					this.clearTimers()
					this.startGame()
				}
			}, 1000)
		},
		
		startGame() {
			this.gameState = 'playing'
			this.countdown = 60
			this.timerProgress = 100
			this.correctCount = 0
			this.wrongCount = 0
			this.totalCount = 0
			this.loadQuestion()
			
			this.gameTimer = setInterval(() => {
				this.countdown--
				this.timerProgress = (this.countdown / 60) * 100
				if (this.countdown <= 0) {
					this.clearTimers()
					this.finishGame()
				}
			}, 1000)
		},
		
		async loadQuestion() {
			try {
				const res = await api.getQuestion()
				if (res.data) {
					this.question = res.data
					this.resetAnswer()
				}
			} catch (error) {
				console.error('获取题目失败:', error)
			}
		},
		
		resetAnswer() {
			this.answered = false
			this.correctAnswer = ''
			this.selectedAnswer = ''
		},
		
		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
			this.answered = true
			this.totalCount++
			
			try {
				const res = await api.answerQuestion(this.question.sn, answer)
				if (res.data) {
					this.correctAnswer = res.data.answer || answer
					
					if (this.correctAnswer === answer) {
						this.correctCount++
					} else {
						this.wrongCount++
					}
					
					setTimeout(() => {
						this.loadQuestion()
					}, 500)
				}
			} catch (error) {
				console.error('提交答案失败:', error)
				this.wrongCount++
				setTimeout(() => {
					this.loadQuestion()
				}, 500)
			}
		},
		
		finishGame() {
			this.gameState = 'finished'
		},
		
		restartGame() {
			this.startPrepare()
		},
		
		clearTimers() {
			if (this.prepareTimer) {
				clearInterval(this.prepareTimer)
				this.prepareTimer = null
			}
			if (this.gameTimer) {
				clearInterval(this.gameTimer)
				this.gameTimer = null
			}
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	padding: 40rpx;
}

.prepare-screen {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
}

.countdown-circle {
	width: 300rpx;
	height: 300rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 60rpx;
}

.countdown-text {
	font-size: 120rpx;
	font-weight: bold;
	color: #ffffff;
}

.prepare-text {
	font-size: 40rpx;
	color: #333;
	font-weight: bold;
}

.game-screen {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
}

.timer-bar {
	position: relative;
	height: 80rpx;
	background: #e0e0e0;
	border-radius: 40rpx;
	overflow: hidden;
}

.timer-progress {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
	transition: width 0.3s;
}

.timer-text {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	z-index: 1;
}

.stats-bar {
	display: flex;
	justify-content: space-around;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10rpx;
}

.stat-label {
	font-size: 24rpx;
	color: #999;
}

.stat-value {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.stat-value.correct {
	color: #28a745;
}

.stat-value.wrong {
	color: #dc3545;
}

.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-text {
	font-size: 28rpx;
	color: #333;
	flex: 1;
}

.result-screen {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 80vh;
}

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

.result-title {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	color: #333;
	text-align: center;
	margin-bottom: 60rpx;
}

.result-stats {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
	margin-bottom: 60rpx;
}

.result-stat-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
	background: #f8f9fa;
	border-radius: 12rpx;
}

.result-stat-label {
	font-size: 28rpx;
	color: #666;
}

.result-stat-value {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.result-stat-value.correct {
	color: #28a745;
}

.result-stat-value.wrong {
	color: #dc3545;
}

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