<template>
  <view class="calendar-page">
    <!-- 顶部栏：年月选择器和功能按钮 -->
    <view class="top-bar">
      <view class="month-picker">
        <uni-datetime-picker type="date" v-model="currentMonth" :clear-icon="false" />
        <up-icon name="arrow-down" color="#333" size="15"></up-icon>
      </view>
      <view class="action-buttons">
        <button class="action-btn" @click="ShowExplainPopup = true">说明</button>
      </view>
    </view>
    <!-- 日历网格 -->
    <view class="calendar-grid">
      <view class="week-header">
        <text v-for="(day, index) in weekDays" :key="index" class="week-day">
          {{ day }}
        </text>
      </view>
      <view class="date-grid">
        <view v-for="(date, index) in dates" :key="index" class="date-cell" :class="{ today: date.today }"
          @tap="selectDate(date)">
          <text v-if="!date.today" class="date-number">{{ date.day }}</text>
          <text v-else class="today-text">今</text>

          <!-- 内容显示区域 -->
          <view class="plan-list"
            v-if="date.planList.length || date.noteList.length || (date.weight && date.weight > 0)">
            <template v-for="(item, idx) in getVisibleItems(date).items" :key="idx">
              <view class="plan-name" :class="{
                'weight-item': item.type === 'weight',
                'note-item': item.type === 'note'
              }" :style="item.bg ? { backgroundColor: item.bg } : ''">
                {{ item.text }}
              </view>
            </template>

            <!-- 统一只显示一个 + 剩余总数 -->
            <text v-if="getVisibleItems(date).remaining > 0" class="plan-extra">
              +{{ getVisibleItems(date).remaining }}
            </text>
          </view>
        </view>
      </view>
    </view>

    <!-- <view class="gridCellContent" v-if="ShowGridCellPopup && selectedDate">
      <GridCellContentPopup :date="selectedDate" @close="ShowGridCellPopup = false" />
    </view> -->

    <GridCellContentPopup ref="gridPopupRef" :date="selectedDate" @refreshCalendar="handleRefreshCalendar" />

    <!-- 日历说明弹窗 -->
    <view class="explain-popup-overlay" v-if="ShowExplainPopup" @click.self="ShowExplainPopup = false">
      <view class="explain-popup">
        <view class="explain-header">
          <text class="explain-title">日历说明</text>
          <view class="close-btn" @click="ShowExplainPopup = false">
            <text>×</text>
          </view>
        </view>
        <view class="explain-list">
          <view class="explain-item">
            <view class="color-block blue"></view>
            <text class="item-label">分钟</text>
            <text class="item-desc">在场馆的运动时长</text>
          </view>
          <view class="explain-item">
            <view class="color-block green"></view>
            <text class="item-label">容量</text>
            <text class="item-desc">力量训练的总重量</text>
          </view>
          <view class="explain-item">
            <view class="color-block yellow"></view>
            <text class="item-label">课程</text>
            <text class="item-desc">训记或已结课的线下课程</text>
          </view>
          <view class="explain-item">
            <view class="color-block gray"></view>
            <text class="item-label">课程</text>
            <text class="item-desc">训记排课或待上课的线下课程</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, computed, nextTick } from 'vue';
import DailyTemplateApi from '@/sheep/api/calendar/date';
import GridCellContentPopup from '@/pages/xunji/components/rili-components/grid-cell-content-popup.vue'

// ====== 响应式数据 ======
const weekDays = ref(['一', '二', '三', '四', '五', '六', '日']);
const dates = ref([]);
const today = new Date();
const ShowExplainPopup = ref(false)
const selectedDate = ref('');
// const ShowGridCellPopup = ref(false)
const gridPopupRef = ref(null);

// 自动获取当前年月
const now = new Date();
const currentMonth = ref(
  `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
);

// ====== 工具函数 ======
const formatDateKey = (y, m, d) => {
  return `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
};

const arrayToDateStr = (arr) => {
  if (!Array.isArray(arr) || arr.length !== 3) return null;
  const [y, m, d] = arr;
  return `${y}-${String(m).padStart(2, '0')}-${String(d).padStart(2, '0')}`;
};

// ====== 生成日历数据 ======
const generateCalendar = (year, month) => {
  const firstDay = new Date(year, month - 1, 1);
  const lastDay = new Date(year, month, 0).getDate();
  let startWeekDay = firstDay.getDay();
  const adjustedStart = startWeekDay === 0 ? 6 : startWeekDay - 1;

  const calendarDates = [];

  // 上月填充
  const prevMonthLastDay = new Date(year, month - 1, 0).getDate();
  for (let i = adjustedStart; i > 0; i--) {
    const day = prevMonthLastDay - i + 1;
    const y = month === 1 ? year - 1 : year;
    const m = month === 1 ? 12 : month - 1;
    calendarDates.push({
      day,
      today: false,
      dateKey: formatDateKey(y, m, day),
    });
  }

  // 本月
  for (let d = 1; d <= lastDay; d++) {
    const isToday =
      year === today.getFullYear() &&
      month === today.getMonth() + 1 &&
      d === today.getDate();
    calendarDates.push({
      day: d,
      today: isToday,
      dateKey: formatDateKey(year, month, d),
    });
  }

  // 下月填充
  const remaining = 42 - calendarDates.length;
  for (let d = 1; d <= remaining; d++) {
    const y = month === 12 ? year + 1 : year;
    const m = month === 12 ? 1 : month + 1;
    calendarDates.push({
      day: d,
      today: false,
      dateKey: formatDateKey(y, m, d),
    });
  }

  return calendarDates;
};

// ====== 加载计划数据 ======
const loadPlans = async (year, month) => {
  try {
    // 关键：获取 上个月、当前月、下个月 → 保证前后日期都有数据
    const prevMonth = month - 1 < 1 ? 12 : month - 1;
    const prevYear = month - 1 < 1 ? year - 1 : year;

    const nextMonth = month + 1 > 12 ? 1 : month + 1;
    const nextYear = month + 1 > 12 ? year + 1 : year;

    // 并行请求三个月数据
    // const [prevRes, currRes, nextRes] = await Promise.all([
    //   DailyTemplateApi.getCalendarPlans(prevYear, prevMonth),
    //   DailyTemplateApi.getCalendarPlans(year, month),
    //   DailyTemplateApi.getCalendarPlans(nextYear, nextMonth),
    // ]);
    const prevRes = await DailyTemplateApi.getCalendarPlans(prevYear, prevMonth);
    const currRes = await DailyTemplateApi.getCalendarPlans(year, month);
    const nextRes = await DailyTemplateApi.getCalendarPlans(nextYear, nextMonth);

    // 合并三个月数据
    const allPlans = [
      ...(prevRes.data || []),
      ...(currRes.data || []),
      ...(nextRes.data || []),
    ];

    const planMap = {};
    const noteMap = {};
    const weightMap = {};

    allPlans.forEach((plan) => {
      let dateStr;
      if (Array.isArray(plan.trainDate)) {
        dateStr = arrayToDateStr(plan.trainDate);
      } else if (typeof plan.trainDate === 'string') {
        dateStr = plan.trainDate;
      }

      if (!dateStr) return;

      // 处理多条备注
      if (Array.isArray(plan.notes) && plan.notes.length > 0) {
        noteMap[dateStr] = plan.notes.map(note => ({
          content: note.content || '',
          backgroundColor: note.backgroundColor || '#ccc'
        }));
      }

      // 处理计划和重量
      planMap[dateStr] = planMap[dateStr] || [];
      if (Array.isArray(plan.templates)) {
        let totalWeightForDay = 0;
        plan.templates.forEach((template) => {
          if (template && template.name) {
            planMap[dateStr].push({
              name: template.name,
              bg: template.backgroundColor || '#ffdd44'
            });
          }
          if (template && typeof template.totalWeight === 'number') {
            totalWeightForDay += template.totalWeight;
          }
        });
        if (totalWeightForDay > 0) {
          weightMap[dateStr] = totalWeightForDay;
        }
      }
    });

    const newDates = generateCalendar(year, month).map((date) => ({
      ...date,
      planList: planMap[date.dateKey] || [],
      noteList: noteMap[date.dateKey] || [],
      weight: weightMap[date.dateKey] || null,
    }));

    dates.value = newDates;
  } catch (err) {
    console.error('加载日历失败:', err);
    const [y, m] = [
      parseInt(currentMonth.value.split('-')[0]),
      parseInt(currentMonth.value.split('-')[1]),
    ];
    dates.value = generateCalendar(y, m);
  }
  console.log('日历主页面处理的完的是数据：dates', dates);

};
const selectedDateData = computed(() => {
  return dates.value.find(item => item.dateKey === selectedDate.value) || null;
});

// ====================== 核心显示逻辑（已修复）======================
const maxLines = 3; // 一个格子最多显示3行

const getVisibleItems = (date) => {
  const items = [];
  let remaining = 0;

  // 1. 重量优先显示
  if (date.weight && date.weight > 0) {
    items.push({ type: 'weight', text: `${date.weight}kg` });
  }

  // 2. 显示训练计划（已修改）
  for (const plan of date.planList) {
    if (items.length < maxLines) {
      items.push({
        type: 'plan',
        text: plan.name,
        bg: plan.bg
      });
    } else {
      remaining++;
    }
  }

  // 3. 显示备注
  for (const note of date.noteList) {
    if (items.length < maxLines) {
      items.push({ type: 'note', text: note.content, bg: note.backgroundColor });
    } else {
      remaining++;
    }
  }

  return { items, remaining };
};

// 接收子组件通知，刷新整个日历数据
const handleRefreshCalendar = () => {
  const [year, month] = currentMonth.value.split('-').map(Number);
  loadPlans(year, month);
};
// ====================================================================

// ====== 监听月份变化 ======
watch(
  currentMonth,
  (newVal) => {
    const [year, month] = newVal.split('-').map(Number);
    loadPlans(year, month);
  },
  { immediate: true },
);

const selectDate = async (date) => {
  selectedDate.value = date.dateKey;
  // ShowGridCellPopup.value = true;
  await nextTick()
  gridPopupRef.value?.openPopup();
};

</script>

<style lang="scss" scoped>
.calendar-page {
  height: 100%;
  padding: 40rpx;
  background-color: white;
  box-sizing: border-box;

  .top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    margin-top: 35rpx;

    .month-picker {
      height: 40rpx;
      border-radius: 50rpx;
      overflow: hidden;
      padding: 0 20rpx;
      gap: 10rpx;

      :deep(.uni-date-x--border) {
        border: none !important;
      }

      :deep(.uni-date__x-input) {
        height: 40rpx;
        line-height: 40rpx;
      }

      // 微信小程序端样式适配
      // #ifdef MP-WEIXIN
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 200rpx;
      box-sizing: border-box;

      :deep(.uni-date-x) {
        height: 100%;
        min-height: 40rpx;
        border-radius: 50rpx;
        background-color: transparent;
        padding: 0;
        margin: 0;
        border: none !important;
      }

      :deep(.uni-date-editor--x) {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none !important;
      }

      :deep(.uni-date__x-input) {
        height: 40rpx;
        line-height: 40rpx;
        font-size: 24rpx;
        color: #333;
        padding: 0;
        text-align: center;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      :deep(.icon-calendar) {
        display: none !important;
      }

      // #endif
    }
  }

  .action-buttons {
    display: flex;
    justify-content: flex-start;
    gap: 10rpx;

    // .action-btn {
    //   padding: 20rpx 20rpx;
    //   margin: 0;
    //   line-height: 1;
    //   border-radius: 20rpx;
    //   border: 1px solid #666;
    //   font-size: 20rpx;
    // }

    :deep(uni-button),
    :deep(wx-button) {
      padding: 10rpx 20rpx;
      margin: 0;
      line-height: 1;
      border-radius: 20rpx;
      border: 1px solid #666;
      font-size: 20rpx;
    }
  }

  .calendar-grid {
    padding-bottom: 120rpx;
    // #ifdef MP-WEIXIN
    padding-bottom: 140rpx;
    // #endif

    .week-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;

      .week-day {
        flex: 1;
        text-align: center;
        font-size: 28rpx;
        color: #666;
      }
    }

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

    .date-cell {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      border: 1px solid #eee;
      font-size: 30rpx;
      color: #333;
      background-color: #f9fafc;
      padding-top: 10rpx;
      height: 200rpx;
      overflow: hidden;
      box-sizing: border-box;
    }

    .plan-list {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 6rpx;
      margin-top: 10rpx;
      padding: 0;
      box-sizing: border-box;
    }

    .weight,
    .plan-extra,
    .note-item,
    .plan-name {
      font-size: 18rpx;
      background: #ffdd44;
      padding: 4rpx 0;
      text-align: center;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      width: 100%;
      box-sizing: border-box;
    }

    .weight,
    .weight-item {
      background: #b8ff66;
    }
  }
}

/* 日历说明弹窗样式 */
.explain-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 999;

  .explain-popup {
    width: 100%;
    background-color: #ffffff;
    border-radius: 24rpx 24rpx 0 0;
    padding: 40rpx;
    box-sizing: border-box;

    .explain-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40rpx;

      .explain-title {
        font-size: 32rpx;
        font-weight: 60;
        color: #333333;
      }

      .close-btn {
        width: 48rpx;
        height: 48rpx;
        border-radius: 50%;
        background-color: #f5f5f5;
        display: flex;
        justify-content: center;
        align-items: center;

        text {
          font-size: 36rpx;
          color: #666666;
          line-height: 1;
        }
      }
    }

    .explain-list {
      .explain-item {
        display: flex;
        align-items: center;
        margin-bottom: 32rpx;

        .color-block {
          width: 40rpx;
          height: 40rpx;
          border-radius: 8rpx;
          margin-right: 20rpx;

          &.blue {
            background-color: #a8d8ff;
          }

          &.green {
            background-color: #b8ff66;
          }

          &.yellow {
            background-color: #ffdd44;
          }

          &.gray {
            background-color: #f0f0f0;
            border: 1rpx solid #eee;
          }
        }

        .item-label {
          font-size: 28rpx;
          color: #333333;
          width: 80rpx;
          margin-right: 20rpx;
        }

        .item-desc {
          font-size: 28rpx;
          color: #666666;
          flex: 1;
        }
      }
    }
  }
}

// .gridCellContent {
//   position: fixed;
//   top: 0;
//   left: 0;
//   right: 0;
//   bottom: 0;
//   background: rgba(0, 0, 0, 0.5);
//   z-index: 9999;
//   display: flex;
//   align-items: flex-end;
//   padding: 0 !important;
//   margin: 0 !important;
//   width: 100vw !important;
//   box-sizing: border-box;
// }
</style>

<!-- #ifdef MP-WEIXIN -->
<style lang="scss">
.month-picker {

  .uni-date-editor--x.uni-date-x--border,
  .uni-date-x--border {
    border: none !important;
  }

  .uni-date-x,
  .uni-date-editor--x {
    border: none !important;
  }
}
</style>
<!-- #endif -->