<template>
    <view class="scroll-container theme-light">
        <view class="bt-page">
            <PageHeader title="我的课程" subtitle="" :show-back="true">
                <template #right>
                    <view class="header-scan-btn" @click="handleScan">
                        <text class="header-scan-icon">📷</text>
                    </view>
                </template>
            </PageHeader>
            <view class="bt-page__body">
                <!-- 子标签：进行中 / 已完成 -->
                <view class="mi-mod-subtabs">
                    <text
                        class="mi-mod-subtab"
                        :class="{ 'mi-mod-subtab--on': activeTab === 'ongoing' }"
                        @tap="activeTab = 'ongoing'"
                    >进行中</text>
                    <text
                        class="mi-mod-subtab"
                        :class="{ 'mi-mod-subtab--on': activeTab === 'completed' }"
                        @tap="activeTab = 'completed'"
                    >已完成</text>
                </view>

                <!-- 骨架屏 -->
                <ListSkeleton v-if="loading" :count="4" layout="card" />

                <!-- 预约列表 -->
                <view
                    v-for="item in displayedBookings"
                    :key="item.id"
                    class="mi-mod-course-card"
                    hover-class="mi-tap-card--hover"
                >
                    <image
                        class="mi-mod-course-card__banner"
                        :src="item.coverImage"
                        mode="aspectFill"
                    />
                    <view class="mi-mod-course-card__content">
                        <view class="mi-mod-course-card__header">
                            <text class="mi-mod-course-card__title">{{ item.title }}</text>
                            <text class="mi-mod-course-card__status" :class="'mi-mod-course-card__status--' + item.statusClass">{{ item.statusLabel }}</text>
                        </view>
                        <text class="mi-mod-course-card__meta">{{ item.schedule }} · {{ item.location }}</text>
                        <!-- 仅已预约状态显示取消按钮 -->
                        <view v-if="activeTab === 'ongoing' && item.statusClass === 'booked'" class="mi-mod-course-card__cancel" @tap.stop="handleCancel(item)">
                            <text>取消预约</text>
                        </view>
                    </view>
                </view>

                <!-- 无数据 -->
                <view v-if="!displayedBookings.length" class="bt-empty">
                    <text class="bt-empty__text">
                        {{ activeTab === 'ongoing' ? '暂无进行中的预约' : '暂无历史预约' }}
                    </text>
                </view>
            </view>
        </view>
    </view>

</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import PageHeader from '@/components/index/PageHeader.vue'
import ListSkeleton from '@/components/Skeleton/ListSkeleton.vue'
import { getMemberId } from '@/utils/request.js'
import { getCourseCoverUrl } from '@/utils/request.js'
import { getMemberBookings, qrSignInGroupCourse } from '@/api/groupCourse.js'
import { cancelBooking as cancelBookingApi } from '@/api/groupCourse.js'

const activeTab = ref('ongoing')
const ongoingBookings = ref([])
const completedBookings = ref([])
const loading = ref(false)

const displayedBookings = computed(() => {
    return activeTab.value === 'ongoing'
        ? ongoingBookings.value
        : completedBookings.value
})

async function fetchBookings() {
    if (loading.value) return
    loading.value = true
    console.log('[myCourses] 开始获取预约记录')

    const memberId = getMemberId()
    if (!memberId) {
        console.warn('[myCourses] 未登录')
        loading.value = false
        return
    }

    try {
        const res = await getMemberBookings(memberId)
        const bookings = Array.isArray(res) ? res : (res?.data || res?.content || [])
        console.log('[myCourses] 预约记录:', bookings.length, '条', JSON.stringify(bookings))

        if (Array.isArray(bookings)) {
            const mapped = bookings.map(mapBooking)
            ongoingBookings.value = mapped.filter(b => b.status === 'ongoing')
            completedBookings.value = mapped.filter(b => b.status === 'completed')
        } else {
            ongoingBookings.value = []
            completedBookings.value = []
        }
    } catch (e) {
        console.error('[myCourses] 获取预约记录失败:', e)
        ongoingBookings.value = []
        completedBookings.value = []
    } finally {
        loading.value = false
    }
}

function mapBooking(b) {
    const courseStartTime = b.courseStartTime || b.startTime || ''
    const bookStatus = String(b.status || '0')

    // status: 0-已预约，1-已取消，2-已出席，3-缺席
    let status = 'ongoing'
    let statusLabel = '已预约'
    let statusClass = 'booked'
    
    if (bookStatus === '1') {
        status = 'completed'
        statusLabel = '已取消'
        statusClass = 'cancelled'
    } else if (bookStatus === '2') {
        // 已签到保留在进行中，方便用户查看签到结果
        status = 'ongoing'
        statusLabel = '已签到'
        statusClass = 'attended'
    } else if (bookStatus === '3') {
        status = 'ongoing'
        statusLabel = '缺席'
        statusClass = 'absent'
    } else if (bookStatus === '0') {
        status = 'ongoing'
        statusLabel = '已预约'
        statusClass = 'booked'
    }

    return {
        id: b.id,
        courseId: b.courseId,
        title: b.courseName || '预约课程',
        status: status,
        originalStatus: bookStatus,
        statusLabel: statusLabel,
        statusClass: statusClass,
        schedule: formatBookingTime(courseStartTime),
        location: b.location || '',
        coverImage: getCourseCoverUrl(b.coverImage) || 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/default-course.png'
    }
}

function formatBookingTime(timeStr) {
    if (!timeStr) return ''
    try {
        const d = new Date(timeStr)
        const month = d.getMonth() + 1
        const day = d.getDate()
        const hour = d.getHours().toString().padStart(2, '0')
        const minute = d.getMinutes().toString().padStart(2, '0')
        return `${month}月${day}日 ${hour}:${minute}`
    } catch {
        return timeStr
    }
}

async function handleCancel(item) {
    uni.showModal({
        title: '取消预约',
        content: `确定要取消「${item.title}」吗？`,
        success: async (res) => {
            if (!res.confirm) return
            
            uni.showLoading({ title: '取消中...' })
            try {
                const result = await cancelBookingApi(Number(item.id), { 
                    memberId: getMemberId()
                })
                uni.hideLoading()
                if (result.success) {
                    uni.showToast({ title: '已取消', icon: 'success' })
                    fetchBookings()
                } else {
                    uni.showToast({ title: result.message || '取消失败', icon: 'none', duration: 3000 })
                }
            } catch (e) {
                uni.hideLoading()
                console.error('[myCourses] 取消预约失败:', e)
                const errMsg = e?.message || '取消失败'
                uni.showToast({ title: errMsg, icon: 'none', duration: 3000 })
            }
        }
    })
}

// ===== 扫码签到 =====
function handleScan() {
    uni.scanCode({
        success: async (res) => {
            const qrContent = res.result
            console.log('[myCourses] 扫码结果:', qrContent)
            
            // 解析二维码内容获取 courseId
            let courseId = null
            try {
                const parsed = JSON.parse(qrContent)
                courseId = Number(parsed.id || parsed.courseId)
            } catch {
                const num = Number(qrContent)
                if (!isNaN(num)) {
                    courseId = num
                }
            }

            if (!courseId) {
                uni.showToast({ title: '无效的签到二维码', icon: 'none' })
                return
            }

            const memberId = getMemberId()
            if (!memberId) {
                uni.showToast({ title: '请先登录', icon: 'none' })
                return
            }

            uni.showLoading({ title: '签到中...' })
            try {
                const result = await qrSignInGroupCourse(courseId, memberId)
                uni.hideLoading()
                if (result.success) {
                    uni.showToast({ title: '签到成功', icon: 'success' })
                    // 签到成功后刷新列表
                    await fetchBookings()
                } else {
                    uni.showToast({ title: result.message || '签到失败', icon: 'none', duration: 3000 })
                }
            } catch (e) {
                uni.hideLoading()
                console.error('[myCourses] 扫码签到失败:', e)
                const errMsg = e?.message || e?.data?.message || '签到失败'
                uni.showToast({ title: errMsg, icon: 'none', duration: 3000 })
            }
        },
        fail: (err) => {
            console.log('[myCourses] 扫码取消或失败:', err)
        }
    })
}

onMounted(() => {
    fetchBookings()
})
</script>

<style>
@import '@/common/style/base.css';
@import '@/common/style/memberInfo/pages/page-reset.css';
@import '@/common/style/memberInfo/pages/sub-page-base.css';
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-tap.css';
@import '@/common/style/memberInfo/pages/body-test-common.css';
@import '@/common/style/memberInfo/pages/module-pages-common.css';

.mi-mod-subtabs {
    display: flex;
    flex-direction: row;
    gap: 16px;
    margin-bottom: 12px;
}

.mi-mod-subtab {
    font-size: 14px;
    color: var(--text-muted, #5E6F8D);
}

.mi-mod-subtab--on {
    color: var(--primary-dark, #0B2B4B);
    font-weight: 700;
}

.mi-mod-course-card__cancel {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8rpx 24rpx;
    border-radius: 16rpx;
    background: rgba(255, 107, 53, 0.1);
    border: 2rpx solid var(--accent-orange, #FF6B35);
}

.mi-mod-course-card__cancel text {
	font-size: 24rpx;
	font-weight: 700;
	color: var(--accent-orange, #FF6B35);
}

/* 状态标签 */
.mi-mod-course-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16rpx;
}

.mi-mod-course-card__status {
	font-size: 22rpx;
	font-weight: 600;
	padding: 4rpx 16rpx;
	border-radius: 12rpx;
	flex-shrink: 0;
	white-space: nowrap;
}

.mi-mod-course-card__status--booked {
	background: rgba(24, 144, 255, 0.1);
	color: #1890ff;
	border: 2rpx solid rgba(24, 144, 255, 0.2);
}

.mi-mod-course-card__status--attended {
	background: rgba(82, 196, 26, 0.1);
	color: #389e0d;
	border: 2rpx solid rgba(82, 196, 26, 0.2);
}

.mi-mod-course-card__status--cancelled {
	background: rgba(153, 153, 153, 0.1);
	color: #999;
	border: 2rpx solid rgba(153, 153, 153, 0.2);
}

.mi-mod-course-card__status--absent {
	background: rgba(250, 173, 20, 0.1);
	color: #d48806;
	border: 2rpx solid rgba(250, 173, 20, 0.2);
}

/* 头部扫码按钮 */
.header-scan-btn {
	width: 64rpx;
	height: 64rpx;
	background: rgba(24, 144, 255, 0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.header-scan-btn:active {
	background: rgba(24, 144, 255, 0.2);
}

.header-scan-icon {
	font-size: 32rpx;
}
</style>
