<template>
	<view class="page">
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

		<view class="container">
			<view v-if="pageLoading" class="skeleton">
				<view class="skeleton-card"></view>
				<view class="skeleton-card"></view>
				<view class="skeleton-list">
					<view v-for="i in 3" :key="i" class="skeleton-row"></view>
				</view>
			</view>

			<view v-else>
				<!-- 无计划状态 -->
				<view v-if="!planData" class="no-plan-card">
					<view class="no-plan-icon">📋</view>
					<text class="no-plan-title">暂无戒烟计划</text>
					<text class="no-plan-desc">生成专属30天戒烟计划，按阶段轻松戒烟</text>
					<view class="generate-btn" @tap="handleGenerate">
						<text class="generate-btn-text">生成戒烟计划</text>
					</view>
				</view>

				<!-- 有计划状态 -->
				<view v-else>
					<!-- 计划总览卡片 -->
					<view class="stage-card">
						<view class="stage-badge">第 {{ currentDay }}/30 天</view>
						<text class="stage-label">戒烟计划进度</text>
						<text class="stage-name">{{ stageName }}</text>
						<text class="stage-days">{{ stageDesc }}</text>
						<view class="stage-progress-row">
							<text class="stage-progress-label">计划进度</text>
							<text class="stage-progress-value">{{ Math.round(planProgress * 100) }}%</text>
						</view>
						<view class="stage-progress-bar">
							<view class="stage-progress-fill" :style="{ width: planProgress * 100 + '%' }"></view>
						</view>
					</view>

					<!-- 阶段说明卡片 -->
					<view class="section">
						<view class="section-header">
							<text class="section-title">当前阶段</text>
						</view>
						<view class="stage-info-card">
							<view class="stage-item" :class="{ 'stage-item-active': planData.current_stage === 'recording' }">
								<view class="stage-number">1</view>
								<view class="stage-content">
									<text class="stage-item-title">记录期</text>
									<text class="stage-item-desc">记录每日吸烟情况，了解习惯</text>
								</view>
							</view>
							<view class="stage-line"></view>
							<view class="stage-item" :class="{ 'stage-item-active': planData.current_stage === 'reducing' }">
								<view class="stage-number">2</view>
								<view class="stage-content">
									<text class="stage-item-title">减量期</text>
									<text class="stage-item-desc">逐步减少吸烟数量</text>
								</view>
							</view>
							<view class="stage-line"></view>
							<view class="stage-item" :class="{ 'stage-item-active': planData.current_stage === 'consolidating' }">
								<view class="stage-number">3</view>
								<view class="stage-content">
									<text class="stage-item-title">巩固期</text>
									<text class="stage-item-desc">保持成果，彻底戒烟</text>
								</view>
							</view>
						</view>
					</view>

					<!-- 每日目标和建议 -->
					<view class="section">
						<view class="section-header">
							<text class="section-title">每日目标</text>
							<text class="section-badge">{{ todayTarget }}</text>
						</view>
						<view class="daily-tips-card">
							<text class="daily-tips-title">今日建议</text>
							<text class="daily-tips-text">{{ dailyTip }}</text>
						</view>
					</view>

					<!-- 每日计划列表 -->
					<view class="section">
						<view class="section-header">
							<text class="section-title">每日计划详情</text>
						</view>
						<view v-if="daysLoading" class="days-loading">
							<text class="days-loading-text">加载中...</text>
						</view>
						<view v-else-if="daysList.length > 0" class="days-list">
							<view
								v-for="day in daysList"
								:key="day.day"
								class="day-item"
								:class="{ 'day-item-today': day.isToday, 'day-item-past': day.isPast }"
								@tap="showDayDetail(day)"
							>
								<view class="day-header">
									<text class="day-number">第 {{ day.day }} 天</text>
									<text v-if="day.isToday" class="day-today-badge">今天</text>
									<text v-else-if="day.isPast" class="day-past-badge">已完成</text>
								</view>
								<view class="day-target">
									<text class="day-target-label">目标:</text>
									<text class="day-target-value">{{ day.target_cigs }} 支</text>
								</view>
								<view v-if="day.tip" class="day-tip">
									<text class="day-tip-text">{{ day.tip }}</text>
								</view>
							</view>
						</view>
						<view v-else class="days-empty">
							<text class="days-empty-text">暂无计划详情</text>
						</view>
					</view>

					<!-- 操作按钮 -->
					<view class="actions">
						<view class="reset-btn" @tap="handleReset">
							<text class="reset-btn-text">重置计划</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 每日详情弹窗 -->
		<view v-if="showDayModal" class="modal-mask" @tap="closeDayModal">
			<view class="modal-content" @tap.stop>
				<view class="modal-header">
					<text class="modal-title">第 {{ selectedDay.day }} 天计划</text>
					<text class="modal-close" @tap="closeDayModal">×</text>
				</view>
				<view class="modal-body">
					<view class="modal-item">
						<text class="modal-label">目标吸烟量</text>
						<text class="modal-value">{{ selectedDay.target_cigs }} 支</text>
					</view>
					<view v-if="selectedDay.tip" class="modal-item">
						<text class="modal-label">建议</text>
						<text class="modal-value">{{ selectedDay.tip }}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { onShareAppMessage } from '@dcloudio/uni-app'
import { useLogin } from '@/hooks/useLogin'
import * as api from '@/api'

const { waitForLogin } = useLogin()

const statusBarHeight = ref(0)
const pageLoading = ref(true)
const daysLoading = ref(false)
const generating = ref(false)

const planData = ref(null)
const daysList = ref([])

const showDayModal = ref(false)
const selectedDay = ref({})

// 阶段名称映射
const stageNames = {
	recording: '记录期',
	reducing: '减量期',
	consolidating: '巩固期'
}

const stageDescs = {
	recording: '记录每日吸烟情况，了解您的吸烟习惯',
	reducing: '按计划逐步减少吸烟数量',
	consolidating: '保持戒烟成果，彻底摆脱烟瘾'
}

// 计算当前是第几天
const currentDay = computed(() => {
	if (!planData.value?.plan_start_date) return 1
	const start = new Date(planData.value.plan_start_date)
	const now = new Date()
	const diff = Math.floor((now - start) / (24 * 60 * 60 * 1000))
	return Math.min(Math.max(diff + 1, 1), 30)
})

// 计划进度
const planProgress = computed(() => {
	return currentDay.value / 30
})

// 当前阶段名称
const stageName = computed(() => {
	if (!planData.value) return ''
	return stageNames[planData.value.current_stage] || '记录期'
})

// 阶段描述
const stageDesc = computed(() => {
	if (!planData.value) return ''
	return stageDescs[planData.value.current_stage] || ''
})

// 今日目标
const todayTarget = computed(() => {
	const today = daysList.value.find(d => d.isToday)
	return today ? `${today.target_cigs} 支` : '--'
})

// 每日建议
const dailyTip = computed(() => {
	const today = daysList.value.find(d => d.isToday)
	return today?.tip || '按计划执行，保持决心！'
})

// 获取戒烟计划
async function fetchQuitPlan() {
	try {
		const res = await api.getQuitPlan()
		planData.value = res?.data || null
		if (planData.value?.id) {
			await fetchDays()
		}
	} catch (e) {
		console.error('fetchQuitPlan error:', e)
		planData.value = null
	}
}

// 获取每日计划
async function fetchDays() {
	if (!planData.value?.id) return
	
	daysLoading.value = true
	try {
		const res = await api.getQuitPlanDays(planData.value.id)
		const days = res?.data || []
		
		// 计算今天的日期
		const today = new Date()
		today.setHours(0, 0, 0, 0)
		
		daysList.value = days.map(day => {
			const dayDate = new Date(planData.value.plan_start_date)
			dayDate.setDate(dayDate.getDate() + day.day - 1)
			dayDate.setHours(0, 0, 0, 0)
			
			return {
				...day,
				isToday: dayDate.getTime() === today.getTime(),
				isPast: dayDate.getTime() < today.getTime()
			}
		})
	} catch (e) {
		console.error('fetchDays error:', e)
		daysList.value = []
	} finally {
		daysLoading.value = false
	}
}

// 生成计划
async function handleGenerate() {
	if (generating.value) return
	
	generating.value = true
	try {
		await api.generateQuitPlan()
		uni.showToast({
			title: '计划生成成功',
			icon: 'success'
		})
		await fetchQuitPlan()
	} catch (e) {
		uni.showToast({
			title: e?.message || '生成失败',
			icon: 'none'
		})
	} finally {
		generating.value = false
	}
}

// 重置计划
function handleReset() {
	uni.showModal({
		title: '确认重置',
		content: '重置后将清除当前计划，重新开始，确定要重置吗？',
		success: async (res) => {
			if (res.confirm) {
				try {
					await api.resetQuitPlan()
					uni.showToast({
						title: '计划已重置',
						icon: 'success'
					})
					planData.value = null
					daysList.value = []
				} catch (e) {
					uni.showToast({
						title: e?.message || '重置失败',
						icon: 'none'
					})
				}
			}
		}
	})
}

// 显示每日详情
function showDayDetail(day) {
	selectedDay.value = day
	showDayModal.value = true
}

// 关闭弹窗
function closeDayModal() {
	showDayModal.value = false
}

// 初始化页面
async function initPage() {
	pageLoading.value = true
	try {
		const sys = uni.getSystemInfoSync()
		statusBarHeight.value = sys.statusBarHeight || 0

		await waitForLogin()
		await fetchQuitPlan()
	} catch (e) {
		console.error('initPage error:', e)
	} finally {
		pageLoading.value = false
	}
}

onMounted(() => {
	initPage()
})

onShareAppMessage(() => {
	return {
		title: '戒烟助手 - 30天戒烟计划',
		path: 'pages/index/index'
	}
})
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: linear-gradient(to bottom, #D1FAE5 0%, #F0FDF4 45%, #FFFFFF 100%);
	box-sizing: border-box;
}

.status-bar {
	background: linear-gradient(to bottom, #D1FAE5, #E9FDF2);
}

.container {
	padding: 24rpx 32rpx 180rpx;
}

.skeleton {
	display: flex;
	flex-direction: column;
	gap: 24rpx;
}

.skeleton-card,
.skeleton-row {
	background: linear-gradient(90deg, #E5E7EB 25%, #F3F4F6 50%, #E5E7EB 75%);
	background-size: 200% 100%;
	animation: shimmer 1.6s infinite;
}

.skeleton-card {
	height: 260rpx;
	border-radius: 24rpx;
}

.skeleton-list {
	padding: 24rpx;
	background-color: #FFFFFF;
	border-radius: 24rpx;
}

.skeleton-row {
	height: 92rpx;
	border-radius: 18rpx;
	margin-bottom: 16rpx;
}

.skeleton-row:last-child {
	margin-bottom: 0;
}

@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* 无计划状态 */
.no-plan-card {
	background-color: #FFFFFF;
	border-radius: 28rpx;
	padding: 60rpx 40rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 10rpx 28rpx rgba(16, 185, 129, 0.12);
	border: 2rpx solid #ECFDF3;
}

.no-plan-icon {
	font-size: 80rpx;
	margin-bottom: 24rpx;
}

.no-plan-title {
	font-size: 36rpx;
	font-weight: 700;
	color: #111827;
	margin-bottom: 16rpx;
}

.no-plan-desc {
	font-size: 26rpx;
	color: #6B7280;
	text-align: center;
	margin-bottom: 40rpx;
	line-height: 1.6;
}

.generate-btn {
	background: linear-gradient(135deg, #10B981, #059669);
	padding: 24rpx 60rpx;
	border-radius: 48rpx;
	box-shadow: 0 8rpx 20rpx rgba(16, 185, 129, 0.3);
}

.generate-btn-text {
	font-size: 32rpx;
	font-weight: 600;
	color: #FFFFFF;
}

/* 阶段卡片 */
.stage-card {
	background: #FFFFFF;
	border-radius: 28rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	position: relative;
	box-shadow: 0 10rpx 28rpx rgba(16, 185, 129, 0.12);
	border: 2rpx solid #ECFDF3;
}

.stage-badge {
	position: absolute;
	top: 24rpx;
	right: 24rpx;
	background-color: #10B981;
	color: #FFFFFF;
	padding: 8rpx 20rpx;
	border-radius: 20rpx;
	font-size: 24rpx;
	font-weight: 600;
}

.stage-label {
	font-size: 24rpx;
	color: #059669;
	display: block;
	margin-bottom: 8rpx;
}

.stage-name {
	font-size: 42rpx;
	font-weight: 700;
	color: #111827;
	display: block;
	margin-bottom: 8rpx;
}

.stage-days {
	font-size: 24rpx;
	color: #6B7280;
	display: block;
	margin-bottom: 24rpx;
}

.stage-progress-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12rpx;
}

.stage-progress-label {
	font-size: 24rpx;
	color: #6B7280;
}

.stage-progress-value {
	font-size: 24rpx;
	font-weight: 600;
	color: #10B981;
}

.stage-progress-bar {
	height: 12rpx;
	background-color: #E5E7EB;
	border-radius: 6rpx;
	overflow: hidden;
}

.stage-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, #10B981, #34D399);
	border-radius: 6rpx;
}

/* 阶段信息 */
.section {
	margin-bottom: 32rpx;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16rpx;
}

.section-title {
	font-size: 30rpx;
	font-weight: 600;
	color: #111827;
}

.section-badge {
	font-size: 24rpx;
	color: #059669;
	background-color: #ECFDF3;
	padding: 8rpx 16rpx;
	border-radius: 16rpx;
}

.stage-info-card {
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 28rpx;
	border: 2rpx solid #ECFDF3;
	box-shadow: 0 8rpx 22rpx rgba(16, 185, 129, 0.08);
}

.stage-item {
	display: flex;
	align-items: flex-start;
	gap: 20rpx;
}

.stage-item-active .stage-number {
	background-color: #10B981;
	color: #FFFFFF;
	border-color: #10B981;
}

.stage-item-active .stage-item-title {
	color: #10B981;
}

.stage-number {
	width: 48rpx;
	height: 48rpx;
	border-radius: 50%;
	border: 3rpx solid #D1D5DB;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	font-weight: 600;
	color: #6B7280;
	flex-shrink: 0;
}

.stage-content {
	flex: 1;
}

.stage-item-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #111827;
	display: block;
	margin-bottom: 6rpx;
}

.stage-item-desc {
	font-size: 24rpx;
	color: #6B7280;
	line-height: 1.4;
}

.stage-line {
	width: 2rpx;
	height: 32rpx;
	background-color: #E5E7EB;
	margin: 16rpx 0 16rpx 22rpx;
}

/* 每日目标 */
.daily-tips-card {
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 28rpx;
	border: 2rpx solid #ECFDF3;
	box-shadow: 0 8rpx 22rpx rgba(16, 185, 129, 0.08);
}

.daily-tips-title {
	font-size: 26rpx;
	font-weight: 600;
	color: #059669;
	display: block;
	margin-bottom: 12rpx;
}

.daily-tips-text {
	font-size: 28rpx;
	color: #111827;
	line-height: 1.6;
}

/* 每日计划列表 */
.days-list {
	display: flex;
	flex-direction: column;
	gap: 16rpx;
}

.day-item {
	background-color: #FFFFFF;
	border-radius: 20rpx;
	padding: 24rpx;
	border: 2rpx solid #ECFDF3;
	box-shadow: 0 6rpx 16rpx rgba(16, 185, 129, 0.08);
}

.day-item-today {
	border-color: #10B981;
	background: linear-gradient(135deg, #ECFDF5, #F0FDF4);
}

.day-item-past {
	opacity: 0.7;
}

.day-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12rpx;
}

.day-number {
	font-size: 28rpx;
	font-weight: 600;
	color: #111827;
}

.day-today-badge {
	font-size: 22rpx;
	color: #FFFFFF;
	background-color: #10B981;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
}

.day-past-badge {
	font-size: 22rpx;
	color: #6B7280;
	background-color: #F3F4F6;
	padding: 4rpx 12rpx;
	border-radius: 12rpx;
}

.day-target {
	display: flex;
	align-items: center;
	gap: 8rpx;
	margin-bottom: 8rpx;
}

.day-target-label {
	font-size: 24rpx;
	color: #6B7280;
}

.day-target-value {
	font-size: 28rpx;
	font-weight: 600;
	color: #10B981;
}

.day-tip {
	padding-top: 12rpx;
	border-top: 1rpx solid #F3F4F6;
}

.day-tip-text {
	font-size: 24rpx;
	color: #6B7280;
	line-height: 1.4;
}

.days-loading,
.days-empty {
	background-color: #FFFFFF;
	border-radius: 24rpx;
	padding: 40rpx;
	text-align: center;
}

.days-loading-text,
.days-empty-text {
	font-size: 26rpx;
	color: #6B7280;
}

/* 操作按钮 */
.actions {
	margin-top: 32rpx;
	padding-bottom: 40rpx;
}

.reset-btn {
	background-color: #FFFFFF;
	border: 2rpx solid #EF4444;
	padding: 24rpx;
	border-radius: 24rpx;
	text-align: center;
}

.reset-btn-text {
	font-size: 28rpx;
	color: #EF4444;
}

/* 弹窗 */
.modal-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

.modal-content {
	background-color: #FFFFFF;
	border-radius: 28rpx;
	width: 600rpx;
	max-height: 70vh;
	overflow: hidden;
}

.modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 32rpx 28rpx 24rpx;
	border-bottom: 1rpx solid #F3F4F6;
}

.modal-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #111827;
}

.modal-close {
	font-size: 40rpx;
	color: #9CA3AF;
	line-height: 1;
}

.modal-body {
	padding: 28rpx;
}

.modal-item {
	margin-bottom: 24rpx;
}

.modal-item:last-child {
	margin-bottom: 0;
}

.modal-label {
	font-size: 24rpx;
	color: #6B7280;
	display: block;
	margin-bottom: 8rpx;
}

.modal-value {
	font-size: 28rpx;
	color: #111827;
	line-height: 1.5;
}
</style>
