<template>
  <view class="detail-container">
    <StatePanel
      v-if="pageState === 'loading'"
      title="正在加载预约信息"
      description="请稍候"
      type="loading"
    />

    <UnauthLoginPanel
      v-else-if="sessionStatus === SESSION_STATUS.GUEST"
      title="登录后查看预约详情"
      description="请先登录并完善会员资料。"
      :loading="isLoginSubmitting"
      @login="onWechatLogin"
    />

    <UnauthLoginPanel
      v-else-if="sessionStatus === SESSION_STATUS.EXPIRED"
      title="登录状态已过期"
      description="为了保护会员资料，请重新登录后继续查看。"
      primary-text="重新登录"
      :loading="isLoginSubmitting"
      @login="onWechatLogin"
    />

    <StatePanel
      v-else-if="sessionStatus === SESSION_STATUS.PROFILE_REQUIRED"
      title="完善会员资料后查看预约"
      description="请先在会员中心完成姓名和手机号绑定，用于匹配你的预约记录。"
      primary-text="去完善资料"
      type="profile"
      @primary="goProfile"
    />

    <StatePanel
      v-else-if="sessionStatus === SESSION_STATUS.NETWORK_ERROR"
      title="暂时无法连接服务"
      :description="pageMessage || '请检查网络后重试。'"
      primary-text="重试"
      type="error"
      @primary="loadPage"
    />

    <StatePanel
      v-else-if="pageState === 'not_found'"
      title="未找到预约信息"
      :description="pageMessage || '该预约不存在，或你没有查看权限。'"
      primary-text="返回预约列表"
      type="empty"
      @primary="goBookings"
    />

    <StatePanel
      v-else-if="pageState === 'error'"
      title="预约详情加载失败"
      :description="pageMessage"
      primary-text="重试"
      type="error"
      @primary="loadPage"
    />

    <block v-else>
    <!-- 1. 顶部状态横幅 -->
    <view class="status-banner" :class="booking.status">
      <text class="status-text">{{ formatStatus(booking.status) }}</text>
    </view>

    <!-- 2. 课程信息卡片（支持点击跳转到课程详情） -->
    <view class="detail-card clickable-card" @tap="onTapCourse(booking.course?.id)">
      <view class="card-section">
        <text class="section-tag">关联课程</text>
        <view class="title-with-arrow">
          <text class="course-title">{{ booking.course?.title }}</text>
          <text class="nav-arrow">→</text>
        </view>
      </view>

      <view class="divider"></view>

      <view class="info-grid">
        <view class="info-row">
          <text class="info-label">上课时段</text>
          <text class="info-val highlight-blue">时间：{{ formatDateTimeRange(booking.course?.start_time, booking.course?.end_time) }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">预约人数</text>
          <text class="info-val font-semibold">已约 {{ booking.course?.booked_count }}/{{ booking.course?.capacity }} 人</text>
        </view>
      </view>
    </view>

    <!-- 3. 会员卡信息卡片（支持点击跳转到卡片详情） -->
    <view class="detail-card clickable-card" v-if="booking.card" @tap="onTapCard(booking.card?.id)">
      <view class="card-section">
        <text class="section-tag">使用卡项</text>
        <view class="title-with-arrow">
          <text class="card-title">{{ booking.card.card_name }}</text>
          <text class="nav-arrow">→</text>
        </view>
      </view>
    </view>

    <!-- 4. 流程时间节点展示 -->
    <view class="detail-card timeline-card">
      <text class="section-tag">时间节点</text>
      <view class="log-timeline">
        <view class="timeline-item" v-if="booking.created_at">
          <view class="timeline-dot active"></view>
          <view class="timeline-content">
            <text class="log-action">预约时间</text>
            <text class="log-time">{{ formatFullDateTime(booking.created_at) }}</text>
          </view>
        </view>
        <view class="timeline-item" v-if="booking.status === 'checked_in' && booking.checked_in_at">
          <view class="timeline-dot active success"></view>
          <view class="timeline-content">
            <text class="log-action success">核销时间</text>
            <text class="log-time">{{ formatFullDateTime(booking.checked_in_at) }}</text>
          </view>
        </view>
        <view class="timeline-item" v-if="booking.status === 'cancelled' && booking.cancelled_at">
          <view class="timeline-dot active danger"></view>
          <view class="timeline-content">
            <text class="log-action danger">取消时间</text>
            <text class="log-time">{{ formatFullDateTime(booking.cancelled_at) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 5. 温馨提示 -->
    <view class="bottom-disclaimer">
      <text class="disclaimer-title">行程变动须知</text>
      <text class="disclaimer-content">所有的上课行程均由场馆统一排定展示。如需取消或改约，请提前联系场馆前台处理。</text>
    </view>
    </block>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { bookingApi } from '@/modules/ice/api/booking'
import { errorMessage, getMemberSession, loginAndStoreToken, sessionStatusFromError, SESSION_STATUS } from '@/modules/ice/api/session'
import StatePanel from '@/components/ice/StatePanel.vue'
import UnauthLoginPanel from '@/components/UnauthLoginPanel.vue'

const booking = ref({
  id: null,
  status: '',
  created_at: '',
  checked_in_at: null,
  cancelled_at: null,
  course: {
    id: null,
    title: '',
    start_time: '',
    end_time: '',
    capacity: 0,
    booked_count: 0
  },
  card: null
})
const pageState = ref('loading')
const pageMessage = ref('')
const sessionStatus = ref(SESSION_STATUS.CHECKING)
const isLoginSubmitting = ref(false)
const currentBookingId = ref('')

onShow(() => {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  const options = currentPage.options || {}
  currentBookingId.value = options.id || ''
  loadPage()
})

const loadPage = async () => {
  if (!currentBookingId.value) {
    pageState.value = 'not_found'
    pageMessage.value = '未找到要查看的预约记录。'
    return
  }

  pageState.value = 'loading'
  pageMessage.value = ''
  const session = await getMemberSession()
  sessionStatus.value = session.status
  if (session.status !== SESSION_STATUS.MEMBER) {
    pageState.value = 'blocked'
    pageMessage.value = session.message || ''
    return
  }

  try {
    booking.value = await bookingApi.getBookingDetail(currentBookingId.value)
    pageState.value = 'ready'
  } catch (err) {
    const status = sessionStatusFromError(err)
    if (status) {
      sessionStatus.value = status
      pageState.value = 'blocked'
      pageMessage.value = err?.message || ''
      return
    }
    if (err?.type === 'not_found') {
      pageState.value = 'not_found'
      pageMessage.value = '该预约不存在，或你没有查看权限。'
      return
    }
    pageState.value = 'error'
    pageMessage.value = errorMessage(err, '预约详情加载失败，请稍后重试。')
  }
}

const onWechatLogin = async () => {
  if (isLoginSubmitting.value) return
  isLoginSubmitting.value = true
  uni.showLoading({ title: '登录中...' })
  try {
    await loginAndStoreToken()
    await loadPage()
    if (sessionStatus.value === SESSION_STATUS.MEMBER && pageState.value === 'ready') {
      uni.showToast({ title: '登录成功', icon: 'success' })
    }
  } catch (err) {
    uni.showModal({
      title: '登录失败',
      content: errorMessage(err, '微信登录失败，请稍后重试'),
      showCancel: false,
      confirmText: '知道了'
    })
  } finally {
    isLoginSubmitting.value = false
    uni.hideLoading()
  }
}

const formatStatus = (status) => {
  const map = {
    booked: '待核销上课',
    checked_in: '已签到核销',
    cancelled: '行程已取消'
  }
  return map[status] || status
}

const onTapCourse = (courseId) => {
  if (!courseId) return
  uni.navigateTo({
    url: `/pages/ice/courses/detail?id=${courseId}`
  })
}

const onTapCard = (cardId) => {
  if (!cardId) return
  uni.navigateTo({
    url: `/pages/ice/profile/card-history?id=${cardId}`
  })
}

const goProfile = () => {
  uni.reLaunch({ url: '/pages/ice/profile/index' })
}

const goBookings = () => {
  uni.reLaunch({ url: '/pages/ice/bookings/index' })
}

const formatDateTimeRange = (startStr, endStr) => {
  if (!startStr || !endStr) return '-'
  const start = new Date(startStr)
  const end = new Date(endStr)
  const pad = (n) => String(n).padStart(2, '0')
  const mm = pad(start.getMonth() + 1)
  const dd = pad(start.getDate())
  const startHhMm = `${pad(start.getHours())}:${pad(start.getMinutes())}`
  const endHhMm = `${pad(end.getHours())}:${pad(end.getMinutes())}`
  return `${mm}-${dd} ${startHhMm} - ${endHhMm}`
}

const formatFullDateTime = (dateStr) => {
  if (!dateStr) return ''
  const date = new Date(dateStr)
  const pad = (n) => String(n).padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())} ${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`
}
</script>

<style lang="scss" scoped>
.detail-container {
  min-height: 100vh;
  background-color: $bg-color-soft;
  padding: $spacing-md;
  display: flex;
  flex-direction: column;
  gap: $spacing-md;
}

/* 顶部状态横幅 */
.status-banner {
  border-radius: $border-radius-lg;
  padding: $spacing-lg;
  color: #FFFFFF;
  display: flex;
  flex-direction: column;
  gap: $spacing-xs;

  &.booked {
    background-color: $text-color-main;
  }
  &.checked_in {
    background-color: $color-success;
  }
  &.cancelled {
    background-color: $text-color-muted;
  }

  .status-text {
    font-size: 36rpx;
    font-weight: 700;
  }

  .status-desc {
    font-size: 22rpx;
    opacity: 0.9;
  }
}

/* 详情卡片通用 */
.detail-card {
  background-color: $bg-color-main;
  border: 1rpx solid rgba(226, 232, 240, 0.8);
  border-radius: $border-radius-lg;
  padding: $spacing-lg;
  
  &.clickable-card {
    transition: all 0.2s ease;
    
    &:active {
      background-color: $bg-color-hover;
    }
  }

  .card-section {
    display: flex;
    flex-direction: column;
    gap: 6rpx;
  }

  .section-tag {
    font-size: 18rpx;
    font-weight: 700;
    color: $color-primary;
    letter-spacing: 1.5rpx;
    text-transform: uppercase;
    margin-bottom: 4rpx;
    display: block;
  }

  .title-with-arrow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: $spacing-md;
    
    .nav-arrow {
      font-size: 30rpx;
      color: $text-color-light;
      font-weight: bold;
    }
  }

  .course-title, .card-title {
    font-size: 30rpx;
    font-weight: 700;
    color: $text-color-main;
    line-height: 1.35;
    flex: 1;
  }

  .info-grid {
    display: flex;
    flex-direction: column;
    gap: $spacing-md;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
  }

  .info-label {
    color: $text-color-muted;
  }

  .info-val {
    color: $text-color-main;
    font-weight: 500;

    &.font-semibold {
      font-weight: 700;
    }

    &.highlight-blue {
      color: $color-primary;
      font-weight: 700;
    }
  }
}

/* 极简时间轴 */
.log-timeline {
  display: flex;
  flex-direction: column;
  gap: $spacing-lg;
  padding: $spacing-md 0 0 $spacing-xs;
}

.timeline-item {
  display: flex;
  gap: $spacing-md;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    left: 8rpx;
    top: 20rpx;
    bottom: -32rpx;
    width: 2rpx;
    background-color: $bg-color-hover;
  }

  &:last-child::before {
    display: none;
  }

  .timeline-dot {
    width: 18rpx;
    height: 18rpx;
    border-radius: 50%;
    background-color: $border-color;
    margin-top: 8rpx;
    flex-shrink: 0;

    &.active {
      background-color: $text-color-main;

      &.success {
        background-color: $color-success;
      }

      &.danger {
        background-color: $color-danger;
      }
    }
  }

  .timeline-content {
    display: flex;
    flex-direction: column;
    gap: 4rpx;
  }

  .log-action {
    font-size: 24rpx;
    font-weight: 600;
    color: $text-color-regular;

    &.success {
      color: $color-success;
    }

    &.danger {
      color: $color-danger;
    }
  }

  .log-time {
    font-size: 20rpx;
    color: $text-color-light;
  }
}

/* 温馨提示 */
.bottom-disclaimer {
  padding: 0 $spacing-xs;
  display: flex;
  flex-direction: column;
  gap: 8rpx;

  .disclaimer-title {
    font-size: 22rpx;
    font-weight: 700;
    color: $text-color-muted;
    text-transform: uppercase;
  }

  .disclaimer-content {
    font-size: 20rpx;
    color: $text-color-light;
    line-height: 1.5;
  }
}
</style>
