<template>
	<view class="course-container">
		<!-- 表单区域 -->
		<view class="form-section">
			<!-- 项目名称 -->
			<view class="form-card">
				<view class="form-title">项目信息</view>
				<view class="form-group">
					<text class="form-label">项目名称</text>
					<input class="form-input" v-model="courseData.projectName" placeholder="请输入项目名称" placeholder-class="input-placeholder" />
				</view>
			</view>

			<!-- 出发方式 -->
			<view class="form-card">
				<view class="form-title">出发方式</view>
				<view class="radio-group">
					<view class="radio-item" :class="{ active: courseData.startType === 'together' }" @click="courseData.startType = 'together'">
						<view class="radio-icon">
							<view v-if="courseData.startType === 'together'" class="radio-inner"></view>
						</view>
						<text>一起出发</text>
					</view>
					<view class="radio-item" :class="{ active: courseData.startType === 'interval' }" @click="courseData.startType = 'interval'">
						<view class="radio-icon">
							<view v-if="courseData.startType === 'interval'" class="radio-inner"></view>
						</view>
						<text>间隔出发</text>
					</view>
				</view>
				<view v-if="courseData.startType === 'interval'" class="interval-input-wrapper">
					<text class="interval-label">间隔时间</text>
					<view class="interval-input">
						<input class="number-input" v-model="courseData.intervalSeconds" type="digit" placeholder="请输入秒数" />
						<text class="unit-text">秒</text>
					</view>
				</view>
			</view>

			<!-- 泳道设置 -->
			<view class="form-card">
				<view class="form-title">泳道设置</view>
				<view class="radio-group">
					<view class="radio-item" :class="{ active: courseData.laneType === 'single' }" @click="selectSingleLane">
						<view class="radio-icon">
							<view v-if="courseData.laneType === 'single'" class="radio-inner"></view>
						</view>
						<text>一个泳道</text>
					</view>
					<view class="radio-item" :class="{ active: courseData.laneType === 'multi' }" @click="selectMultiLane">
						<view class="radio-icon">
							<view v-if="courseData.laneType === 'multi'" class="radio-inner"></view>
						</view>
						<text>多个泳道</text>
					</view>
				</view>
				<view v-if="courseData.laneType === 'multi'" class="multi-lane-options">
					<view class="sub-option-item" :class="{ active: courseData.multiLaneMode === 'onePerson' }" @click="courseData.multiLaneMode = 'onePerson'">
						<view class="sub-option-icon">
							<view v-if="courseData.multiLaneMode === 'onePerson'" class="option-inner"></view>
						</view>
						<text>一个泳道一个人</text>
					</view>
					<view class="sub-option-item" :class="{ active: courseData.multiLaneMode === 'multiPerson' }" @click="courseData.multiLaneMode = 'multiPerson'">
						<view class="sub-option-icon">
							<view v-if="courseData.multiLaneMode === 'multiPerson'" class="option-inner"></view>
						</view>
						<text>一个泳道几个人</text>
					</view>
					<view v-if="courseData.multiLaneMode === 'multiPerson'" class="multi-person-input-wrapper">
						<text class="multi-label">每个泳道人数</text>
						<view class="multi-input">
							<input class="number-input" v-model="courseData.lanePersonCount" type="number" placeholder="请输入人数" />
							<text class="unit-text">人</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 学生列表 -->
			<view class="form-card">
				<view class="student-header">
					<view class="header-left">
						<text class="form-title">选择学生</text>
						<text class="student-count">已选({{ selectedStudentIds.length }}/{{ allStudents.length }})</text>
					</view>
					<view class="header-actions">
						<view class="select-all-btn" @click="toggleSelectAll">
							<view class="checkbox-icon" :class="{ checked: allSelected }">
								<u-icon v-if="allSelected" name="checkmark" size="14" color="#fff"></u-icon>
							</view>
							<text class="select-all-text">{{ allSelected ? '取消全选' : '全选' }}</text>
						</view>
					</view>
				</view>

				<view v-if="loading" class="loading-state">
					<view class="loading-spinner"></view>
					<text class="loading-text">加载中...</text>
				</view>

				<view v-else-if="allStudents.length === 0" class="empty-student-state">
					<view class="empty-icon">
						<u-icon name="account" size="48" color="#ddd"></u-icon>
					</view>
					<text class="empty-text">暂无学生</text>
					<text class="empty-desc">请先在学员管理中添加学生</text>
				</view>

				<view v-else class="student-list">
					<view v-for="student in allStudents" :key="student.id" class="student-item" @click="toggleStudentSelect(student.id)">
						<view class="student-checkbox" :class="{ checked: selectedStudentIds.includes(student.id) }">
							<u-icon v-if="selectedStudentIds.includes(student.id)" name="checkmark" size="14" color="#fff"></u-icon>
						</view>
						<view class="student-avatar">
							<text class="avatar-text">{{ student.name.charAt(0) }}</text>
						</view>
						<view class="student-info">
							<view class="student-name">{{ student.name }}</view>
							<view class="student-meta">
								<text class="gender-badge" :class="student.gender === '男' ? 'male' : 'female'">
									{{ student.gender }}
								</text>
								<text class="age-text">{{ student.age }}岁</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 已选学生预览 -->
				<view v-if="selectedStudents.length > 0" class="selected-preview">
					<view class="preview-header">
						<text class="preview-title">已选学生</text>
					</view>
					<view class="preview-list">
						<view v-for="(student, index) in selectedStudents" :key="student.id" class="preview-item">
							<text class="preview-index">{{ index + 1 }}</text>
							<text class="preview-name">{{ student.name }}</text>
							<view class="preview-remove" @click.stop="removeSelectedStudent(student.id)">
								<u-icon name="close" size="14" color="#ff4d4f"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部按钮区域 -->
		<view class="bottom-actions">
			<view class="action-buttons">
				<button class="cancel-btn" @click="goBack">取消</button>
				<button class="confirm-btn" @click="confirmCreate">创建项目</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted } from 'vue'
	import { Service } from '@/Service/Service'

	// 学生类型
	interface Student {
		id: string
		name: string
		gender: string
		age: string
		school?: string
		address?: string
	}

	// 课程数据
	const courseData = ref({
		projectName: '',
		startType: 'together', // together | interval
		intervalSeconds: '',
		intervalSeconds: '',
		laneType: 'single', // single | multi
		multiLaneMode: 'onePerson', // onePerson | multiPerson
		lanePersonCount: ''
	})

	// 所有学生列表
	const allStudents = ref<Student[]>([])

	// 已选学生ID列表
	const selectedStudentIds = ref<string[]>([])

	// 加载状态
	const loading = ref(false)

	// 是否全选
	const allSelected = computed(() => {
		return allStudents.value.length > 0 && allStudents.value.every(s => selectedStudentIds.value.includes(s.id))
	})

	// 已选学生列表
	const selectedStudents = computed(() => {
		return allStudents.value.filter(s => selectedStudentIds.value.includes(s.id))
	})

	// 选择单泳道
	const selectSingleLane = () => {
		courseData.value.laneType = 'single'
		courseData.value.multiLaneMode = 'onePerson'
	}

	// 选择多泳道
	const selectMultiLane = () => {
		courseData.value.laneType = 'multi'
	}

	// 获取学生列表（模拟接口）
	const getStudentList = async () => {
		loading.value = true
		try {
			// TODO: 实际项目中应从接口获取
			// const res = await Service.Request('/api/students', 'GET', {})
			// allStudents.value = res.data

			// 模拟接口延迟
			await new Promise(resolve => setTimeout(resolve, 500))

			// 假数据
			allStudents.value = [
				{ id: '001', name: '张三', gender: '男', age: '12', school: '第一小学' },
				{ id: '002', name: '李四', gender: '女', age: '13', school: '第二小学' },
				{ id: '003', name: '王五', gender: '男', age: '11', school: '第一小学' },
				{ id: '004', name: '赵六', gender: '女', age: '12', school: '第三小学' },
				{ id: '005', name: '钱七', gender: '男', age: '14', school: '第二小学' },
				{ id: '006', name: '孙八', gender: '女', age: '10', school: '第一小学' },
				{ id: '007', name: '周九', gender: '男', age: '13', school: '第四小学' },
				{ id: '008', name: '吴十', gender: '女', age: '12', school: '第二小学' }
			]
		} catch (error) {
			Service.Msg('获取学生列表失败')
			console.error(error)
		} finally {
			loading.value = false
		}
	}

	// 切换学生选中状态
	const toggleStudentSelect = (id: string) => {
		const index = selectedStudentIds.value.indexOf(id)
		if (index > -1) {
			selectedStudentIds.value.splice(index, 1)
		} else {
			selectedStudentIds.value.push(id)
		}
	}

	// 全选/取消全选
	const toggleSelectAll = () => {
		if (allSelected.value) {
			// 取消全选
			selectedStudentIds.value = []
		} else {
			// 全选
			selectedStudentIds.value = allStudents.value.map(s => s.id)
		}
	}

	// 移除已选学生
	const removeSelectedStudent = (id: string) => {
		const index = selectedStudentIds.value.indexOf(id)
		if (index > -1) {
			selectedStudentIds.value.splice(index, 1)
		}
	}

	// 返回
	const goBack = () => {
		Service.GoPageBack()
	}

	// 创建项目
	const confirmCreate = () => {
		if (!courseData.value.projectName.trim()) {
			Service.Msg('请输入项目名称')
			return
		}

		if (courseData.value.startType === 'interval' && !courseData.value.intervalSeconds.trim()) {
			Service.Msg('请输入间隔秒数')
			return
		}

		if (courseData.value.laneType === 'multi' && courseData.value.multiLaneMode === 'multiPerson' && !courseData.value.lanePersonCount.trim()) {
			Service.Msg('请输入每个泳道人数')
			return
		}

		if (selectedStudentIds.value.length === 0) {
			Service.Msg('请至少选择一位学生')
			return
		}

		// TODO: 调用API创建项目
		console.log('创建项目数据:', {
			course: courseData.value,
			studentIds: selectedStudentIds.value,
			students: selectedStudents.value
		})

		Service.Msg('创建成功', 'success')
		setTimeout(() => {
			Service.GoPageBack()
		}, 1500)
	}

	// 页面加载时获取学生列表
	onMounted(() => {
		getStudentList()
	})
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.course-container {
		min-height: 100vh;
		padding-bottom: 140rpx;
	}

	/* 表单区域 */
	.form-section {
		padding: 20rpx;
	}

	.form-card {
		background-color: #fff;
		border-radius: 24rpx;
		padding: 32rpx 28rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);

		.form-title {
			font-size: 32rpx;
			font-weight: 700;
			color: #333;
			margin-bottom: 28rpx;
			display: block;
		}
	}

	/* 表单输入 */
	.form-group {
		margin-bottom: 32rpx;

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

		.form-label {
			display: block;
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 14rpx;
		}

		.form-input {
			width: 100%;
			height: 88rpx;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			padding: 0 24rpx;
			font-size: 28rpx;
			color: #333;
			transition: all 0.2s ease;

			&:focus {
				background-color: #fff;
				box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.15);
			}
		}
	}

	/* 单选按钮组 */
	.radio-group {
		display: flex;
		gap: 20rpx;
		margin-bottom: 24rpx;

		.radio-item {
			flex: 1;
			height: 88rpx;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 12rpx;
			font-size: 28rpx;
			color: #666;
			transition: all 0.25s ease;
			border: 2rpx solid transparent;

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

			&.active {
				font-weight: 600;
				background-color: #e6f7ff;
				border-color: #1890ff;
				color: #1890ff;
			}

			.radio-icon {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
				border: 3rpx solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
			}

			&.active .radio-icon {
				border-color: #1890ff;
				background-color: #1890ff;
			}

			.radio-inner {
				width: 12rpx;
				height: 12rpx;
				background-color: #fff;
				border-radius: 50%;
			}
		}
	}

	/* 间隔时间输入 */
	.interval-input-wrapper {
		background-color: #f5f5f5;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.interval-label {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}

		.interval-input {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 0 20rpx;
			height: 72rpx;

			.number-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.unit-text {
				font-size: 24rpx;
				color: #999;
				margin-left: 12rpx;
			}
		}
	}

	/* 多泳道选项 */
	.multi-lane-options {
		padding-top: 20rpx;

		.sub-option-item {
			padding: 20rpx 24rpx;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			display: flex;
			align-items: center;
			gap: 12rpx;
			font-size: 26rpx;
			color: #666;
			margin-bottom: 16rpx;
			transition: all 0.2s ease;
			border: 2rpx solid transparent;

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

			&.active {
				font-weight: 600;
				background-color: #e6f7ff;
				border-color: #1890ff;
				color: #1890ff;
			}

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

			.sub-option-icon {
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
				border: 2rpx solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;
			}

			&.active .sub-option-icon {
				border-color: #1890ff;
				background-color: #1890ff;
			}

			.option-inner {
				width: 10rpx;
				height: 10rpx;
				background-color: #fff;
				border-radius: 50%;
			}
		}
	}

	/* 多泳道人数输入 */
	.multi-person-input-wrapper {
		margin-top: 20rpx;
		background-color: #f5f5f5;
		border-radius: 16rpx;
		padding: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.multi-label {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}

		.multi-input {
			flex: 1;
			margin-left: 24rpx;
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 12rpx;
			padding: 0 20rpx;
			height: 72rpx;

			.number-input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
			}

			.unit-text {
				font-size: 24rpx;
				color: #999;
				margin-left: 12rpx;
			}
		}
	}

	/* 学生列表头部 */
	.student-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.header-left {
			display: flex;
			align-items: center;
			gap: 8rpx;

			.student-count {
				font-size: 26rpx;
				color: #999;
				font-weight: 500;
			}
		}

		.header-actions {
			.select-all-btn {
				display: flex;
				align-items: center;
				gap: 8rpx;
				padding: 8rpx 16rpx;
				border-radius: 12rpx;
				transition: all 0.2s ease;

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

				.checkbox-icon {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #d9d9d9;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: all 0.2s ease;

					&.checked {
						border-color: #1890ff;
						background-color: #1890ff;
					}
				}

				.select-all-text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	/* 加载状态 */
	.loading-state {
		padding: 80rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.loading-spinner {
			width: 60rpx;
			height: 60rpx;
			border: 4rpx solid #f0f0f0;
			border-top-color: #1890ff;
			border-radius: 50%;
			animation: spin 1s linear infinite;
			margin-bottom: 20rpx;
		}

		.loading-text {
			font-size: 26rpx;
			color: #999;
		}
	}

	/* 空状态 */
	.empty-student-state {
		padding: 60rpx 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.empty-icon {
			margin-bottom: 20rpx;
			opacity: 0.6;
		}

		.empty-text {
			font-size: 28rpx;
			font-weight: 600;
			color: #666;
			margin-bottom: 10rpx;
		}

		.empty-desc {
			font-size: 24rpx;
			color: #999;
		}
	}

	/* 学生列表 */
	.student-list {
		display: flex;
		flex-direction: column;
		gap: 12rpx;

		.student-item {
			display: flex;
			align-items: center;
			gap: 16rpx;
			padding: 20rpx;
			background-color: #f5f5f5;
			border-radius: 16rpx;
			transition: all 0.2s ease;

			&:active {
				transform: scale(0.98);
				background-color: #e8e8e8;
			}

			.student-checkbox {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				border: 2rpx solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				transition: all 0.2s ease;

				&.checked {
					border-color: #1890ff;
					background-color: #1890ff;
				}
			}

			.student-avatar {
				width: 64rpx;
				height: 64rpx;
				background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;

				.avatar-text {
					color: #fff;
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.student-info {
				flex: 1;
				min-width: 0;

				.student-name {
					font-size: 28rpx;
					font-weight: 600;
					color: #333;
					margin-bottom: 6rpx;
					display: block;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.student-meta {
					display: flex;
					align-items: center;
					gap: 12rpx;

					.gender-badge {
						font-size: 22rpx;
						padding: 4rpx 10rpx;
						border-radius: 8rpx;
						font-weight: 500;

						&.male {
							color: #1890ff;
							background-color: #e6f7ff;
						}

						&.female {
							color: #fa8c16;
							background-color: #fff7e6;
						}
					}

					.age-text {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
	}

	/* 已选学生预览 */
	.selected-preview {
		margin-top: 32rpx;
		padding-top: 24rpx;
		border-top: 1rpx solid #f0f0f0;

		.preview-header {
			margin-bottom: 16rpx;

			.preview-title {
				font-size: 26rpx;
				font-weight: 600;
				color: #666;
			}
		}

		.preview-list {
			display: flex;
			flex-wrap: wrap;
			gap: 12rpx;
		}

		.preview-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 10rpx 16rpx;
			background-color: #e6f7ff;
			border-radius: 12rpx;

			.preview-index {
				width: 24rpx;
				height: 24rpx;
				background-color: #1890ff;
				color: #fff;
				font-size: 18rpx;
				font-weight: 600;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.preview-name {
				font-size: 26rpx;
				color: #1890ff;
				font-weight: 500;
			}

			.preview-remove {
				width: 32rpx;
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: all 0.2s ease;

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

	/* 底部操作按钮 */
	.bottom-actions {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		border-top: 1rpx solid #f0f0f0;
		box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
		z-index: 99;

		.action-buttons {
			display: flex;
			gap: 16rpx;
		}
	}

	.cancel-btn,
	.confirm-btn {
		flex: 1;
		height: 88rpx;
		border-radius: 16rpx;
		border: none;
		font-size: 30rpx;
		font-weight: 600;
		transition: all 0.25s ease;
	}

	.cancel-btn {
		background-color: #f5f5f5;
		color: #666;

		&:active {
			background-color: #e8e8e8;
			transform: scale(0.96);
		}
	}

	.confirm-btn {
		background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
		color: #fff;
		box-shadow: 0 6rpx 16rpx rgba(24, 144, 255, 0.35);

		&:active {
			transform: scale(0.96);
			box-shadow: 0 3rpx 8rpx rgba(24, 144, 255, 0.25);
		}
	}

	/* 动画 */
	@keyframes spin {
		from {
			transform: rotate(0deg);
		}
		to {
			transform: rotate(360deg);
		}
	}
</style>
