<template>
  <view class="available-page">
    <view v-if="isLoading" class="load-more-tip">加载中...</view>

    <view v-else-if="sessions.length" class="session-list">
      <view v-for="session in sessions" :key="session.id" class="card session-card">
        <image :src="session.cover_image" mode="aspectFill" class="session-cover" />
        <view class="session-info">
          <text class="session-title">{{ session.title }}</text>
          <text class="time-line">{{ formatTimeRange(session.start_at, session.end_at) }}</text>
          <text class="meta">{{ session.coach_name }}</text>
          <view class="session-bottom">
            <text class="meta">剩余 {{ session.remaining_count }}/{{ session.capacity }}</text>
            <text class="session-price">¥{{ session.price }}</text>
          </view>
        </view>
      </view>
      <view v-if="!hasMore && sessions.length >= pageSize" class="load-more-tip">已加载全部</view>
    </view>

    <view v-else class="empty-state">暂无可约课程</view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { membershipApi } from '@/modules/comprehensive/api/membership'
import { formatTimeRange } from '@/modules/comprehensive/utils/date'

const sessions = ref([])
const page = ref(1)
const pageSize = 20
const total = ref(0)
const isLoading = ref(false)
const isLoadingMore = ref(false)

const hasMore = computed(() => sessions.value.length < total.value)

const loadSessions = async (reset) => {
  if (reset) {
    page.value = 1
    isLoading.value = true
  } else {
    isLoadingMore.value = true
  }
  try {
    const data = await membershipApi.getAvailableSessions({ page: page.value, pageSize })
    sessions.value = reset ? data.items : [...sessions.value, ...data.items]
    total.value = data.total
  } finally {
    isLoading.value = false
    isLoadingMore.value = false
  }
}

onPullDownRefresh(() => {
  loadSessions(true).finally(() => uni.stopPullDownRefresh())
})

onReachBottom(() => {
  if (!hasMore.value || isLoadingMore.value) return
  page.value += 1
  loadSessions(false)
})

loadSessions(true)
</script>

<style lang="scss" scoped>
.available-page {
  min-height: 100vh;
  background: $bg-color-soft;
}

.session-list {
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
  padding: $spacing-md;
}

.session-card {
  display: flex;
  gap: $spacing-md;
}

.session-cover {
  width: 180rpx;
  height: 172rpx;
  flex-shrink: 0;
  border-radius: $border-radius-base;
  background: $bg-color-hover;
}

.session-info {
  flex: 1;
  min-width: 0;
}

.session-title {
  color: $text-color-main;
  font-size: 30rpx;
  font-weight: 900;
  line-height: 1.35;
  display: block;
}

.time-line {
  display: block;
  margin-top: $spacing-sm;
  color: $color-primary;
  font-size: 24rpx;
  font-weight: 800;
}

.meta {
  display: block;
  margin-top: 6rpx;
  color: $text-color-muted;
  font-size: 23rpx;
}

.session-bottom {
  display: flex;
  justify-content: space-between;
  gap: $spacing-sm;
  margin-top: 6rpx;
}

.session-price {
  color: $text-color-main;
  font-size: 28rpx;
  font-weight: 900;
}
</style>
