<template>
	<view class="container">
		<view class="header">
			<view class="welcome">
				<text class="welcome-title">趣味答题</text>
				<text class="welcome-subtitle">海量题库，轻松学习</text>
			</view>
			<view v-if="!isNotLoggedIn" class="point-card">
				<view class="point-info">
					<text class="point-label">学识分</text>
					<text class="point-value">{{ point }}</text>
				</view>
				<view class="point-level">
					<text class="level-text">{{ pointLevel }}</text>
				</view>
			</view>
		</view>
		
		<view class="action-section">
			<view class="action-card" @click="handleStartQuiz">
				<view class="action-icon">🎯</view>
				<text class="action-title">开始答题</text>
				<text class="action-desc">选择一种答题模式</text>
			</view>
			
			<view class="feature-section">
				<view class="feature-card" @click="handleRandomQuiz">
					<view class="feature-icon">🎲</view>
					<text class="feature-title">随机答题</text>
					<text class="feature-desc">随机抽取题目</text>
				</view>
				<view class="feature-card" @click="handleCategoryQuiz">
					<view class="feature-icon">📚</view>
					<text class="feature-title">类目答题</text>
					<text class="feature-desc">按分类答题</text>
				</view>
				<view class="feature-card" @click="handleQuickQuiz">
					<view class="feature-icon">⚡</view>
					<text class="feature-title">快速答题</text>
					<text class="feature-desc">限时挑战</text>
				</view>
			</view>
		</view>
		
		<view class="tips-section">
			<view class="tip-item">
				<text class="tip-icon">💡</text>
				<text class="tip-text">每日答题，提升学识分</text>
			</view>
			<view class="tip-item">
				<text class="tip-icon">🏆</text>
				<text class="tip-text">解锁更高等级，展示你的知识水平</text>
			</view>
		</view>
	</view>
</template>

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

export default {
	data() {
		return {
			isNotLoggedIn: false,
			point: 0,
			pointLevel: '',
			pointLoading: false
		}
	},
	
	onLoad() {
		this.loadPointInfo()
	},
	
	onShow() {
		this.loadPointInfo()
	},
	
	methods: {
		async loadPointInfo() {
			this.pointLoading = true
			try {
				const res = await api.getPointInfo()
				if (res.data && res.data.point) {
					this.point = parseInt(res.data.point) || 0
					this.pointLevel = this.getPointLevel(this.point)
				}
			} catch (error) {
				console.error('获取学识分失败:', error)
				// 检查是否是401错误
				if (error.message && error.message.includes('401')) {
					this.isNotLoggedIn = true
				}
			} finally {
				this.pointLoading = false
			}
		},
		
		getPointLevel(point) {
			if (point < 100) return '幼儿园'
			if (point < 300) return '小学生'
			if (point < 600) return '初中生'
			if (point < 1000) return '高中生'
			if (point < 1500) return '大学生'
			if (point < 2000) return '硕士'
			return '博士'
		},
		
		handleStartQuiz() {
			uni.navigateTo({
				url: '/pages/gameplay/gameplay'
			})
		},
		
		handleRandomQuiz() {
			uni.navigateTo({
				url: '/pages/random/random'
			})
		},
		
		handleCategoryQuiz() {
			uni.navigateTo({
				url: '/pages/category/category'
			})
		},
		
		handleQuickQuiz() {
			uni.navigateTo({
				url: '/pages/quick/quick'
			})
		}
	}
}
</script>

<style scoped>
.container {
	min-height: 100vh;
	width: 100%;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 40rpx;
	box-sizing: border-box;
}

.header {
	margin-bottom: 60rpx;
}

.welcome {
	text-align: center;
	margin-bottom: 40rpx;
}

.welcome-title {
	display: block;
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 20rpx;
}

.welcome-subtitle {
	display: block;
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
}

.point-card {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	padding: 30rpx;
	margin: 0 auto;
	width: 90%;
	max-width: 400rpx;
	backdrop-filter: blur(10rpx);
	border: 2rpx solid rgba(255, 255, 255, 0.3);
}

.point-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20rpx;
}

.point-label {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
	font-weight: bold;
}

.point-value {
	font-size: 48rpx;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
}

.point-level {
	display: flex;
	justify-content: center;
}

.level-text {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 10rpx 40rpx;
	border-radius: 30rpx;
	box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.15);
}

.action-section {
	margin-bottom: 60rpx;
}

.action-card {
	background: rgba(255, 255, 255, 0.2);
	border-radius: 20rpx;
	padding: 50rpx;
	margin: 0 auto 40rpx;
	width: 90%;
	max-width: 500rpx;
	backdrop-filter: blur(10rpx);
	border: 2rpx solid rgba(255, 255, 255, 0.3);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
	transition: all 0.3s;
}

.action-card:active {
	transform: scale(0.98);
	background: rgba(255, 255, 255, 0.3);
}

.action-icon {
	font-size: 80rpx;
	margin-bottom: 10rpx;
}

.action-title {
	font-size: 40rpx;
	font-weight: bold;
	color: #ffffff;
	text-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
}

.action-desc {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
}

.feature-section {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin-top: 40rpx;
}

.feature-card {
	background: rgba(255, 255, 255, 0.15);
	border-radius: 16rpx;
	padding: 30rpx;
	backdrop-filter: blur(10rpx);
	border: 2rpx solid rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	gap: 30rpx;
	transition: all 0.3s;
}

.feature-card:active {
	transform: scale(0.98);
	background: rgba(255, 255, 255, 0.25);
}

.feature-icon {
	font-size: 50rpx;
	min-width: 60rpx;
}

.feature-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #ffffff;
	flex: 1;
}

.feature-desc {
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.tips-section {
	margin-top: 60rpx;
}

.tip-item {
	background: rgba(255, 255, 255, 0.1);
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 20rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
	backdrop-filter: blur(10rpx);
	border: 2rpx solid rgba(255, 255, 255, 0.15);
}

.tip-icon {
	font-size: 36rpx;
	min-width: 40rpx;
}

.tip-text {
	font-size: 26rpx;
	color: rgba(255, 255, 255, 0.9);
	flex: 1;
	line-height: 1.6;
}
</style>
