<template>
  <view class="calendar-page">
    <!-- 顶部操作栏 -->
    <view class="top-bar">
      <!-- 年月选择胶囊 -->
      <picker mode="date" fields="month" :value="currentMonth" @change="onMonthChange">
        <view class="month-picker-pill">
          <text class="month-text">{{ displayMonthText }}</text>
          <up-icon name="arrow-down-fill" color="#333333" size="10"></up-icon>
        </view>
      </picker>

      <!-- 说明按钮 -->
      <view class="action-buttons">
        <up-button text="说明" type="info" plain shape="circle" size="mini"
          customStyle="padding: 0 24rpx; height: 56rpx; font-size: 24rpx; border-color: #dcdfe6; color: #606266;"
          @click="showExplainPopup = true" />
      </view>
    </view>

    <!-- 日历卡片容器 -->
    <view class="calendar-card">
      <!-- 星期表头 -->
      <view class="week-header">
        <text v-for="(day, index) in weekDays" :key="index" class="week-day">
          {{ day }}
        </text>
      </view>

      <!-- 日期网格 (动态 5行 或 6行) -->
      <view class="date-grid">
        <view v-for="(date, index) in dates" :key="index" class="date-cell" :class="{

          'has-data': date.planList.length || date.noteList.length || (date.weight && date.weight > 0)
        }" :style="{ backgroundColor: getCellBgColor(date) }" @tap="selectDate(date)">
          <!-- 日期数字 / 今日徽章 -->
          <view class="date-header">
            <text v-if="date.today" class="today-badge">今</text>
            <text v-else class="date-number">
              {{ date.day }}
            </text>
          </view>

          <!-- 计划/容量数据列表 -->
          <view class="plan-list"
            v-if="date.planList.length || date.noteList.length || (date.weight && date.weight > 0)">
            <template v-for="(item, idx) in getCellVisibleItems(date).items" :key="idx">
              <view class="plan-tag" :class="`tag-type-${item.type}`"
                :style="item.bg ? { backgroundColor: item.bg } : {}">
                <text class="tag-text">{{ item.text }}</text>
              </view>
            </template>

            <!-- 溢出剩余条数 -->
            <view v-if="getCellVisibleItems(date).remaining > 0" class="plan-extra">
              +{{ getCellVisibleItems(date).remaining }}
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 单元格详情弹窗 -->
    <GridCellContentPopup ref="gridPopupRef" :date="selectedDate" @refreshCalendar="handleRefreshCalendar" />

    <!-- 日历图标说明弹窗 -->
    <up-popup :show="showExplainPopup" mode="bottom" round="24rpx" :safeAreaInsetBottom="true"
      @close="showExplainPopup = false">
      <view class="explain-popup-content">
        <view class="explain-header">
          <text class="explain-title">日历图标说明</text>
          <up-icon name="close" color="#909399" size="18" @click="showExplainPopup = false" />
        </view>

        <view class="explain-list">
          <view class="explain-item">
            <view class="color-block blue"></view>
            <view class="item-info">
              <text class="item-label">时长</text>
              <text class="item-desc">在场馆的实际运动时长</text>
            </view>
          </view>

          <view class="explain-item">
            <view class="color-block green"></view>
            <view class="item-info">
              <text class="item-label">容量</text>
              <text class="item-desc">力量训练累计产生的总负重重量</text>
            </view>
          </view>

          <view class="explain-item">
            <view class="color-block yellow"></view>
            <view class="item-info">
              <text class="item-label">课程</text>
              <text class="item-desc">训记完成或已结课的线下课程</text>
            </view>
          </view>

          <view class="explain-item">
            <view class="color-block gray"></view>
            <view class="item-info">
              <text class="item-label">排课</text>
              <text class="item-desc">训记排课计划或待上课的课程</text>
            </view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>

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

// 常量定义
const MAX_CELL_LINES = 3;
const weekDays = ref(['一', '二', '三', '四', '五', '六', '日']);

// 响应式状态
const dates = ref([]);
const showExplainPopup = ref(false);
const selectedDate = ref('');
const gridPopupRef = ref(null);

const currentMonth = ref(dayjs().format('YYYY-MM-DD'));

// 顶部年月显示
const displayMonthText = computed(() => {
  return dayjs(currentMonth.value).format('YYYY年M月');
});

// 年月 Picker 触发
const onMonthChange = (e) => {
  if (e.detail && e.detail.value) {
    currentMonth.value = dayjs(e.detail.value).startOf('month').format('YYYY-MM-DD');
  }
};

// ====== 计算每个日期格子的背景颜色 ======
const getCellBgColor = (date) => {


  // 2. 如果存在训练计划/备注/重量，优先采用训练本身的背景色
  if (date.planList && date.planList.length > 0 && date.planList[0].bg) {
    return date.planList[0].bg;
  }
  if (date.noteList && date.noteList.length > 0 && date.noteList[0].backgroundColor) {
    return date.noteList[0].backgroundColor;
  }

  // 3. 有容量负重但无特定背景色：赋予柔和浅绿
  if (date.weight && date.weight > 0) {
    return '#f0fdf4';
  }

  // 4. 有计划但未指定背景色：赋予柔和浅黄
  if (date.planList && date.planList.length > 0) {
    return '#fefce8';
  }



  // 6. 普通无训练的本月休息日：基础卡片白色/浅灰
  return '#ededed';
};


const generateCalendar = (monthStr) => {
  const current = dayjs(monthStr);
  const startOfMonth = current.startOf('month');
  const daysInMonth = current.daysInMonth();

  const dayOfWeek = startOfMonth.day(); // 0 表示周日
  const startOffset = dayOfWeek === 0 ? 6 : dayOfWeek - 1;

  // 动态计算总单元格：35（5行）或 42（6行）
  const totalCellsNeeded = startOffset + daysInMonth;
  const totalGridSize = totalCellsNeeded > 35 ? 42 : 35;

  const gridStartDate = startOfMonth.subtract(startOffset, 'day');
  const todayStr = dayjs().format('YYYY-MM-DD');

  const calendarDates = [];
  for (let i = 0; i < totalGridSize; i++) {
    const cellDate = gridStartDate.add(i, 'day');
    const dateKey = cellDate.format('YYYY-MM-DD');

    calendarDates.push({
      day: cellDate.date(),
      today: dateKey === todayStr,
      isCurrentMonth: cellDate.month() === current.month(),
      dateKey,
    });
  }

  return calendarDates;
};

// ====== 加载计划数据 ======
const loadPlans = async (monthStr) => {
  try {
    const curr = dayjs(monthStr);
    const prev = curr.subtract(1, 'month');
    const next = curr.add(1, 'month');

    // 并行请求 3 个月数据
    const [prevRes, currRes, nextRes] = await Promise.all([
      DailyTemplateApi.getCalendarPlans(prev.year(), prev.month() + 1).catch(() => ({ data: [] })),
      DailyTemplateApi.getCalendarPlans(curr.year(), curr.month() + 1).catch(() => ({ data: [] })),
      DailyTemplateApi.getCalendarPlans(next.year(), next.month() + 1).catch(() => ({ data: [] })),
    ]);

    const allPlans = [
      ...(prevRes.data || []),
      ...(currRes.data || []),
      ...(nextRes.data || []),
    ];

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

    allPlans.forEach((plan) => {
      let dateStr = null;
      if (Array.isArray(plan.trainDate)) {
        const [y, m, d] = plan.trainDate;
        dateStr = dayjs(`${y}-${m}-${d}`).format('YYYY-MM-DD');
      } else if (typeof plan.trainDate === 'string') {
        dateStr = dayjs(plan.trainDate).format('YYYY-MM-DD');
      }

      if (!dateStr || dateStr === 'Invalid Date') return;

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

      // 训练计划与容量处理
      planMap[dateStr] = planMap[dateStr] || [];
      if (Array.isArray(plan.templates)) {
        let totalWeightForDay = 0;
        // 按 sourceType + sourceName 分组
        const sourceMap = new Map();
        plan.templates.forEach((template) => {
          if (!template || !template.name) return;
          const sourceKey = template.sourceType
            ? `src_${template.sourceType}_${template.sourceName || ''}`
            : `tpl_${template.dailyTemplateId}`;
          if (!sourceMap.has(sourceKey)) {
            sourceMap.set(sourceKey, {
              name: template.sourceName || template.name,
              bg: template.backgroundColor || '#fef08a',
              sourceType: template.sourceType || 4,
              sourceName: template.sourceName || template.name,
              dailyTemplateId: template.dailyTemplateId,
              totalWeight: 0,
            });
          }
          const group = sourceMap.get(sourceKey);
          if (template && typeof template.totalWeight === 'number') {
            group.totalWeight += template.totalWeight;
            totalWeightForDay += template.totalWeight;
          }
        });
        sourceMap.forEach((group) => {
          planMap[dateStr].push(group);
        });
        if (totalWeightForDay > 0) {
          weightMap[dateStr] = totalWeightForDay;
        }
      }
    });

    dates.value = generateCalendar(monthStr).map((date) => ({
      ...date,
      planList: planMap[date.dateKey] || [],
      noteList: noteMap[date.dateKey] || [],
      weight: weightMap[date.dateKey] || null,
    }));
  } catch (err) {
    console.error('加载日历数据失败:', err);
    dates.value = generateCalendar(monthStr);
  }
};

// ====== 视图格子显示控制 ======
const getCellVisibleItems = (date) => {
  const items = [];
  let remaining = 0;

  if (date.weight && date.weight > 0) {
    items.push({ type: 'weight', text: `${date.weight}kg` });
  }

  for (const plan of date.planList) {
    if (items.length < MAX_CELL_LINES) {
      items.push({ type: 'plan', text: plan.name, bg: plan.bg });
    } else {
      remaining++;
    }
  }

  for (const note of date.noteList) {
    if (items.length < MAX_CELL_LINES) {
      items.push({ type: 'note', text: note.content, bg: note.backgroundColor });
    } else {
      remaining++;
    }
  }

  return { items, remaining };
};

const handleRefreshCalendar = () => {
  loadPlans(currentMonth.value);
};

watch(
  currentMonth,
  (newVal) => {
    if (newVal) {
      loadPlans(newVal);
    }
  },
  { immediate: true }
);

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

<style lang="scss" scoped>
.calendar-page {
  height: 100%;
  padding: 30rpx 15rpx 20rpx;
  background-color: #fff;
  box-sizing: border-box;

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

    .month-picker-pill {
      display: flex;
      align-items: center;
      gap: 12rpx;
      background-color: #ececec;
      padding: 12rpx 28rpx;
      border-radius: 40rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.04);
      border: 1rpx solid #fff;

      .month-text {
        font-size: 30rpx;
        font-weight: 600;
        color: #1a1a1a;
      }
    }

    .action-buttons {
      display: flex;
      align-items: center;
    }
  }

  .calendar-card {
    background-color: #ffffff;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);

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

      .week-day {
        flex: 1;
        text-align: center;
        font-size: 26rpx;
        font-weight: 550;

      }
    }

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

    /* 日期格子基础样式：保证每个格子都有独立背景与微细边框 */
    .date-cell {
      min-width: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      border-radius: 12rpx;
      height: 200rpx;
      padding: 8rpx 4rpx;
      box-sizing: border-box;
      transition: all 0.2s ease;

      &:active {
        filter: brightness(0.96);
      }

      &.other-month {
        opacity: 0.5;
        border-color: #f9fafc;
      }

      &.is-today {
        border: 2rpx solid #3b82f6;
      }

      &.has-data {
        box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.02);
      }

      .date-header {
        height: 36rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 6rpx;

        .date-number {
          font-size: 26rpx;
          font-weight: 600;
          color: #1f2937;


        }

        .today-badge {

          font-weight: 600;

        }
      }

      .plan-list {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 6rpx;

        .plan-tag {
          width: 100%;
          border-radius: 6rpx;
          padding: 2rpx 4rpx;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgba(255, 255, 255, 0.85);
          /* 使 Tag 悬浮于彩色格子之上 */

          .tag-text {
            font-size: 18rpx;
            line-height: 22rpx;
            color: #111827;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
            width: 100%;
          }

          &.tag-type-weight {
            background-color: #bbf7d0 !important;

            .tag-text {
              color: #14532d;
              font-weight: 700;
            }
          }

          &.tag-type-note {
            background-color: #ffffff;

            .tag-text {
              color: #374151;
            }
          }
        }

        .plan-extra {
          font-size: 16rpx;
          color: #4b5563;
          text-align: center;
          line-height: 20rpx;
          font-weight: 600;
        }
      }
    }
  }
}

.explain-popup-content {
  padding: 36rpx 32rpx 48rpx 32rpx;
  background-color: #ffffff;

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

    .explain-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #111827;
    }
  }

  .explain-list {
    display: flex;
    flex-direction: column;
    gap: 28rpx;

    .explain-item {
      display: flex;
      align-items: center;

      .color-block {
        width: 36rpx;
        height: 36rpx;
        border-radius: 8rpx;
        margin-right: 24rpx;

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

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

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

        &.gray {
          background-color: #e5e7eb;
        }
      }

      .item-info {
        display: flex;
        align-items: center;
        gap: 16rpx;

        .item-label {
          font-size: 28rpx;
          font-weight: 600;
          color: #1f2937;
          width: 72rpx;
        }

        .item-desc {
          font-size: 26rpx;
          color: #6b7280;
        }
      }
    }
  }
}
</style>