<template>
	<view class="home-page">
		<view class="header-wrap" :style="headerStyle">
			<view class="nav-bar" :style="navStyle">
				<text class="nav-title">◆ Novalon 教练端</text>
			</view>
		</view>

		<scroll-view class="content" scroll-y :style="{ height: 'calc(100vh - ' + totalHeaderHeight + 'px)' }">
			<view class="content-inner">
				<!-- 教练欢迎卡片 -->
				<view class="greeting-card" :style="{ backgroundColor: brandConfig.secondaryColor }">
					<view class="greeting-text">
						<text class="greeting-label">{{ greetingLabel }}</text>
						<text class="coach-name" :style="{ color: brandConfig.primaryColor }">{{ coachName }} 教练</text>
					</view>
					<view class="greeting-desc">
						<text>祝您今日授课顺利</text>
					</view>
				</view>

				<!-- 今日统计 -->
				<view class="stats-card">
					<view class="stat-item">
						<text class="stat-number" :style="{ color: brandConfig.primaryColor }">{{ todayStats.pending }}</text>
						<text class="stat-label">待开课</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number" :style="{ color: brandConfig.primaryColor }">{{ todayStats.inProgress }}</text>
						<text class="stat-label">进行中</text>
					</view>
					<view class="stat-divider"></view>
					<view class="stat-item">
						<text class="stat-number" :style="{ color: brandConfig.primaryColor }">{{ todayStats.ended }}</text>
						<text class="stat-label">已结束</text>
					</view>
				</view>

				<!-- 功能入口 -->
				<view class="section-header">
					<text class="section-title">快捷功能</text>
				</view>
				<view class="entry-grid">
					<view class="entry-card" @click="goToCourseList">
						<view class="entry-icon-wrap green-bg" :style="{ backgroundColor: 'rgba(' + brandConfig.primaryColorRgb + ',0.15)' }">
							<text class="entry-icon" :style="{ color: brandConfig.primaryColor }">&#9776;</text>
						</view>
						<text class="entry-name">我的团课</text>
						<text class="entry-desc">查看和管理课程</text>
					</view>
					<view class="entry-card" @click="goToProfile">
						<view class="entry-icon-wrap dark-bg" :style="{ backgroundColor: 'rgba(' + brandConfig.secondaryColorRgb + ',0.1)' }">
							<text class="entry-icon" :style="{ color: brandConfig.primaryColor }">&#9786;</text>
						</view>
						<text class="entry-name">个人中心</text>
						<text class="entry-desc">信息与违规记录</text>
					</view>
				</view>

				<view class="bottom-safe"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	const store = require('../../store/index')
	const coachApi = require('../../api/coach')
	const brandStore = require('../../store/brand')

	export default {
		data() {
			return {
				statusBarHeight: 0,
				navBarHeight: 44,
				totalHeaderHeight: 44,
				coachName: '加载中...',
				todayStats: {
					pending: 0,
					inProgress: 0,
					ended: 0
				},
				brandConfig: brandStore.config
			}
		},
		computed: {
		headerStyle() { return 'padding-top:' + this.statusBarHeight + 'px;background-color:' + this.brandConfig.secondaryColor },
		navStyle() { return 'height:' + this.navBarHeight + 'px;background-color:' + this.brandConfig.secondaryColor },
			greetingLabel() {
				const hour = new Date().getHours()
				if (hour < 6) return '夜深了，'
				if (hour < 12) return '早上好，'
				if (hour < 18) return '下午好，'
				return '晚上好，'
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			const statusBarHeight = systemInfo.statusBarHeight || 20
			let navBarHeight = 44
			// #ifdef MP-WEIXIN
			const menuButton = uni.getMenuButtonBoundingClientRect()
			if (menuButton) {
				navBarHeight = (menuButton.top - statusBarHeight) * 2 + menuButton.height
			}
			// #endif
			this.statusBarHeight = statusBarHeight
			this.navBarHeight = navBarHeight
			this.totalHeaderHeight = statusBarHeight + navBarHeight

			uni.$on('brand:updated', (config) => { this.brandConfig = config })
		},
		onUnload() {
			uni.$off('brand:updated')
		},
		onShow() {
			if (!store.isLoggedIn) {
				uni.reLaunch({ url: '/pages/login/login' })
				return
			}
			this.coachName = store.getUsername() || '教练'
			this.loadStats()
		},
		onPullDownRefresh() {
			Promise.all([this.loadStats(), brandStore.fetchConfig()])
				.finally(() => { uni.stopPullDownRefresh() })
		},
		methods: {
			goToCourseList() {
				uni.navigateTo({ url: '/pages/course-list/course-list' })
			},
			goToProfile() {
				uni.navigateTo({ url: '/pages/profile/profile' })
			},
			async loadStats() {
				try {
					const coachId = store.getCoachId()
					if (!coachId) return
					const courses = await coachApi.getCoachCourses(coachId)
					const list = Array.isArray(courses) ? courses : (courses && courses.content ? courses.content : [])
					this.todayStats = {
						pending: list.filter(c => c.status == 0).length,
						inProgress: list.filter(c => c.status == 3 || c.status == 7).length,
						ended: list.filter(c => c.status == 2 || c.status == 6).length
					}
				} catch (e) {
					console.error('加载统计失败:', e)
				}
			}
		}
	}
</script>

<style scoped>
	.home-page {
		min-height: 100vh;
		background: #F5F7FA;
		overflow-x: hidden;
	}
	.header-wrap {
		background: #1A1A1A;
	}
	.nav-bar {
		background: #1A1A1A;
		padding: 0 20px;
		display: flex;
		align-items: center;
	}
	.nav-title {
		font-size: 18px;
		font-weight: 700;
		color: #FFFFFF;
	}
	.content-inner {
		padding: 16px;
	}

	/* 欢迎卡片 */
	.greeting-card {
		background: #1A1A1A;
		border-radius: 20px;
		padding: 20px;
		color: #FFFFFF;
		margin-bottom: 16px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	}
	.greeting-text {
		display: flex;
		align-items: baseline;
	}
	.greeting-label {
		font-size: 16px;
		color: rgba(255,255,255,0.7);
	}
	.coach-name {
		font-size: 22px;
		font-weight: 700;
		color: #00E676;
	}
	.greeting-desc {
		margin-top: 6px;
		font-size: 13px;
		color: rgba(255,255,255,0.5);
	}

	/* 统计卡片 */
	.stats-card {
		background: #FFFFFF;
		border-radius: 20px;
		padding: 18px 20px;
		display: flex;
		justify-content: space-around;
		margin-bottom: 20px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	}
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.stat-number {
		font-size: 28px;
		font-weight: 700;
		color: #00C853;
	}
	.stat-label {
		font-size: 12px;
		color: #7A7E84;
		margin-top: 4px;
	}
	.stat-divider {
		width: 1px;
		background: #EEEEEE;
	}

	/* 功能入口 */
	.section-header {
		margin-bottom: 14px;
	}
	.section-title {
		font-size: 18px;
		font-weight: 700;
		color: #1E1E1E;
	}
	.entry-grid {
		display: flex;
		justify-content: space-between;
	}
	.entry-card {
		width: calc(50% - 6px);
		background: #FFFFFF;
		border-radius: 20px;
		padding: 20px 16px;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	}
	.entry-icon-wrap {
		width: 56px;
		height: 56px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}
	.entry-icon-wrap.green-bg {
		background: rgba(0,230,118,0.15);
	}
	.entry-icon-wrap.dark-bg {
		background: rgba(26,26,26,0.1);
	}
	.entry-icon {
		font-size: 24px;
		color: #00C853;
	}
	.entry-name {
		font-size: 16px;
		font-weight: 600;
		color: #1E1E1E;
		margin-bottom: 4px;
	}
	.entry-desc {
		font-size: 12px;
		color: #7A7E84;
	}
	.bottom-safe {
		height: 20px;
	}
</style>
