<template>
  <view class="paike-container">
    <!-- 1. 自定义顶部导航栏 (uview-plus) -->
    <u-navbar
      title="排课日历"
      :auto-back="true"
      placeholder
      bg-color="#121212"
      title-style="color: #FFFFFF; font-size: 34rpx; font-weight: 600;"
      left-icon-color="#FFFFFF"
    />

    <!-- 2. 星期吸顶头部 -->
    <view class="week-header-sticky">
      <view class="week-grid">
        <view v-for="item in WEEK_TEXTS" :key="item" class="week-cell">
          {{ item }}
        </view>
      </view>
    </view>

    <!-- 3. 加载中状态 -->
    <view v-if="loading" class="state-box">
      <u-loading-icon
        mode="semicircle"
        color="#E9EE50"
        text="正在加载排课数据..."
        text-color="#999999"
        vertical
      />
    </view>

    <!-- 4. 日历主体列表 -->
    <view v-else-if="monthList.length > 0" class="calendar-content">
      <view
        v-for="monthItem in monthList"
        :key="`${monthItem.year}-${monthItem.month}`"
        class="month-card"
      >
        <!-- 月份标题 -->
        <view class="month-header">
          <text class="month-title">{{ monthItem.year }}年 {{ monthItem.month }}月</text>
        </view>

        <!-- 日期 7 列网格 -->
        <view class="date-grid">
          <!-- 开头空白填充格 -->
          <view
            v-for="emptyIdx in monthItem.emptyCount"
            :key="`empty-${emptyIdx}`"
            class="date-cell cell-empty"
          />

          <!-- 有效日期格 -->
          <view
            v-for="day in monthItem.dayList"
            :key="`${day.year}-${day.month}-${day.day}`"
            class="date-cell"
            :class="{ 'has-schedule': day.trainName }"
            @tap="handleDateClick(day)"
          >
            <!-- 日期数 -->
            <text class="day-number">{{ day.day }}</text>

            <!-- 排课标签/未排课点位 -->
            <view class="schedule-box">
              <view v-if="day.trainName" class="schedule-label">
                {{ day.trainName }}
              </view>
              <view v-else class="schedule-placeholder">
                <view class="dot" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部提示 -->
      <view class="bottom-tip">
        <text>最多仅可设置到未来 {{ MONTHS_AHEAD }} 个月哦~</text>
      </view>
    </view>

    <!-- 5. 空数据状态 -->
    <view v-else class="state-box">
      <u-empty mode="data" text="暂无排课计划数据" icon-size="160rpx" />
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import QueryPlanApi from '@/sheep/api/plan/queryplan'

// ==================== 常量定义 ====================
const WEEK_TEXTS = ['一', '二', '三', '四', '五', '六', '日']
const MONTHS_AHEAD = 2 // 最多展示未来月份数（当前月 + 2个月）

// ==================== 响应式状态 ====================
const planId = ref(0)
const loading = ref(true)
const monthList = ref([])

// ==================== 生命周期 ====================
onLoad((options) => {
  planId.value = Number(options?.planid) || 0
})

onMounted(() => {
  fetchPlanCalendar()
  uni.$on('calendarDataRefresh', fetchPlanCalendar)
})

onUnmounted(() => {
  uni.$off('calendarDataRefresh', fetchPlanCalendar)
})

// ==================== 工具函数（数据解耦） ====================

/**
 * 根据基础日期与月份偏移量，计算目标的年、月
 */
const getTargetYearMonth = (baseDate, offsetMonth) => {
  const d = new Date(baseDate.getFullYear(), baseDate.getMonth() + offsetMonth, 1)
  return {
    year: d.getFullYear(),
    month: d.getMonth() + 1,
  }
}

/**
 * 计算某月某日是周几，并转换为“以周一为每周第一天”的前置空白格数量
 */
const calcEmptySlots = (year, month, day = 1) => {
  const dayOfWeek = new Date(year, month - 1, day).getDay()
  const isoWeekDay = dayOfWeek === 0 ? 7 : dayOfWeek // 周日转为7
  return isoWeekDay - 1
}

/**
 * 将后端排课接口数组构建成映射 Map，Key: `${year}-${month}`, Value: { [day]: { trainName, DailyTemplateId } }
 */
const buildTrainMap = (rawList = []) => {
  const map = {}
  if (!Array.isArray(rawList)) return map

  rawList.forEach((item) => {
    if (!item?.trainingDate || !Array.isArray(item.trainingDate)) return
    const [y, m, d] = item.trainingDate
    const template = item.templates?.[0]
    const key = `${y}-${m}`

    if (!map[key]) map[key] = {}
    map[key][d] = {
      trainName: template?.templateName || '',
      DailyTemplateId: template?.id || null,
    }
  })
  return map
}

/**
 * 生成多月份日历完整渲染结构
 */
const generateCalendarList = (apiData) => {
  const now = new Date()
  const today = now.getDate()
  const trainMap = buildTrainMap(apiData)
  const result = []

  for (let i = 0; i <= MONTHS_AHEAD; i++) {
    const { year, month } = getTargetYearMonth(now, i)
    const isCurrentMonth = i === 0
    const startDay = isCurrentMonth ? today : 1
    const totalDaysInMonth = new Date(year, month, 0).getDate()
    const mapKey = `${year}-${month}`

    const dayList = []
    for (let d = startDay; d <= totalDaysInMonth; d++) {
      const scheduleInfo = trainMap[mapKey]?.[d] || {}
      dayList.push({
        year,
        month,
        day: d,
        trainName: scheduleInfo.trainName || '',
        DailyTemplateId: scheduleInfo.DailyTemplateId || null,
      })
    }

    result.push({
      year,
      month,
      emptyCount: calcEmptySlots(year, month, startDay),
      dayList,
    })
  }

  return result
}

// ==================== 接口交互 & 事件处理 ====================

/** 加载排课数据 */
const fetchPlanCalendar = async () => {
  if (!planId.value) {
    loading.value = false
    return
  }

  loading.value = true
  try {
    const res = await QueryPlanApi.getPlanArrangeCalendar(planId.value)
    // 根据后端统一响应结构兜底处理
    const data = res?.data || res
    monthList.value = generateCalendarList(Array.isArray(data) ? data : [])
  } catch (err) {
    console.error('[PlanCalendar] 获取排课日历失败:', err)
    uni.showToast({ title: '加载排课失败', icon: 'none' })
  } finally {
    loading.value = false
  }
}

/** 日期卡片点击事件 */
const handleDateClick = (dayItem) => {
  const { DailyTemplateId, year, month, day } = dayItem
  if (!DailyTemplateId) return

  const formattedMonth = String(month).padStart(2, '0')
  const formattedDay = String(day).padStart(2, '0')
  const dateStr = `${year}-${formattedMonth}-${formattedDay}`

  uni.navigateTo({
    url: `/pages4/pages/xunji/xunji-moban-xiangqing?id=${DailyTemplateId}&date=${dateStr}&isOffice=false&isMyPlan=true&isDailytemplateId=true`,
  })
}
</script>

<style scoped lang="scss">
// ==================== 主题色系与变量 ====================
$bg-main: #121212;
$bg-card: #1e1e1e;
$bg-cell: #262626;

$text-primary: #ffffff;
$text-secondary: #8c8c8c;

$theme-yellow: #e9ee50;
$theme-yellow-light: rgba(233, 238, 80, 0.15);
$theme-yellow-border: rgba(233, 238, 80, 0.35);

$cell-height: 116rpx;

// ==================== 容器根样式 ====================
.paike-container {
  min-height: 100vh;
  background-color: $bg-main;
  padding-bottom: calc(40rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
}

// ==================== 星期头吸顶 ====================
.week-header-sticky {
  position: sticky;
  /* #ifdef H5 */
  top: 44px;
  /* #endif */
  /* #ifndef H5 */
  top: 0;
  /* #endif */
  z-index: 10;
  background-color: $bg-main;
  padding: 20rpx 16rpx 12rpx;
  border-bottom: 1rpx solid rgba(255, 255, 255, 0.06);

  .week-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    .week-cell {
      text-align: center;
      font-size: 24rpx;
      font-weight: 500;
      color: $text-secondary;
    }
  }
}

// ==================== 状态容器 (Loading/Empty) ====================
.state-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 500rpx;
}

// ==================== 日历主体 ====================
.calendar-content {
  padding: 20rpx 16rpx 0;
}

.month-card {
  margin-bottom: 32rpx;
  background: $bg-card;
  border-radius: 24rpx;
  padding: 20rpx 12rpx 16rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);

  .month-header {
    text-align: center;
    padding-bottom: 20rpx;

    .month-title {
      font-size: 30rpx;
      font-weight: 600;
      color: $text-primary;
      letter-spacing: 1rpx;
    }
  }

  .date-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8rpx;
  }

  .date-cell {
    height: $cell-height;
    background-color: $bg-cell;
    border-radius: 12rpx;
    padding: 8rpx 6rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;

    /* 点击效果 */
    &:active {
      transform: scale(0.95);
      opacity: 0.8;
    }

    /* 空白填补格 */
    &.cell-empty {
      background-color: transparent !important;
      pointer-events: none;
    }

    /* 有排课状态 */
    &.has-schedule {
      background-color: $theme-yellow-light;
      border: 1rpx solid $theme-yellow-border;

      .day-number {
        color: $theme-yellow;
        font-weight: 700;
      }
    }

    .day-number {
      font-size: 26rpx;
      color: $text-primary;
      font-weight: 500;
      line-height: 1;
    }

    /* 排课内容展示区 */
    .schedule-box {
      width: 100%;
      height: 56rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .schedule-label {
        width: 100%;
        height: 100%;
        background-color: $theme-yellow;
        color: #000000;
        font-size: 20rpx;
        font-weight: 600;
        border-radius: 6rpx;
        padding: 4rpx;
        box-sizing: border-box;
        text-align: center;
        line-height: 1.25;

        /* 超出两行省略 */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        word-break: break-all;
      }

      /* 无排课时的精致小点，替代原本突兀的大灰块 */
      .schedule-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;

        .dot {
          width: 8rpx;
          height: 8rpx;
          border-radius: 50%;
          background-color: rgba(255, 255, 255, 0.15);
        }
      }
    }
  }
}

// ==================== 底部提示 ====================
.bottom-tip {
  text-align: center;
  padding: 24rpx 0 10rpx;

  text {
    font-size: 24rpx;
    color: $text-secondary;
  }
}
</style>