<template>
  <!-- 底部弹窗：训练日历 -->
  <up-popup
    :show="showPopup"
    mode="bottom"
    round="24rpx"
    :safeAreaInsetBottom="true"
    @close="close"
  >
    <view class="calendar-popup-content">
      <!-- 标题 + 月份导航 -->
      <view class="popup-header">
        <text class="header-title">训练日历</text>
        <view class="month-navigator">
          <u-icon name="arrow-left" size="24" @click="prevMonth" />
          <text class="month-label">{{ currentYearMonth }}</text>
          <u-icon name="arrow-right" size="24" @click="nextMonth" />
        </view>
      </view>

      <!-- 日历主体 -->
      <view class="calendar-body">
        <!-- 星期行 -->
        <view class="week-header">
          <text
            v-for="(day, idx) in WEEK_DAYS"
            :key="idx"
            class="week-item"
            :class="{ weekend: idx === 0 || idx === 6 }"
          >
            {{ day }}
          </text>
        </view>

        <!-- 日期网格 -->
        <view class="date-grid">
          <view
            v-for="(item, idx) in calendarDays"
            :key="idx"
            class="date-cell"
            :class="getDateCellClass(item)"
            @click="toggleDate(item)"
          >
            <text class="date-text">{{ item.day }}</text>
          </view>
        </view>
      </view>

      <!-- 底部操作 -->
      <view class="popup-footer">
        <view class="selected-hint" v-if="selectedDates.length">
          已选 {{ selectedDates.length }} 天
        </view>
        <u-button
          type="primary"
          size="large"
          :disabled="!selectedDates.length"
          @click="confirmAdd"
        >
          添加到以上日程
        </u-button>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
import { ref, computed } from 'vue';
import dayjs from 'dayjs';
import QueryPlanApi from '@/sheep/api/plan/queryplan';
import dailytemplateApi from '@/sheep/api/Template/Dailytemplate';

// ==================== 常量 ====================
const DATE_FORMAT = 'YYYY-MM-DD';
const WEEK_DAYS = ['日', '一', '二', '三', '四', '五', '六'];
const TOTAL_GRID_CELLS = 42; // 6 行 × 7 列

// ==================== Props & Emits ====================
const props = defineProps({
  planId: { type: [String, Number], required: false },
  templateId: { type: [String, Number], required: true, default: 0 },
  isMove: { type: Boolean, default: false },
  isCopy: { type: Boolean, default: false },
  dailyTemplateId: { type: Number, default: 0 },
});

const emit = defineEmits(['success', 'clearCopyFlag']);

// ==================== 工具函数 ====================
/** 格式化 dayjs 实例为 YYYY-MM-DD 字符串 */
const fmtDate = (d) => d.format(DATE_FORMAT);

/** 获取当天的 YYYY-MM-DD */
const getTodayStr = () => fmtDate(dayjs());

// ==================== 响应式状态 ====================
const showPopup = ref(false);

// 当前视图的年月（用 dayjs 驱动）
const viewDate = ref(dayjs());

// 已选日期集合
const selectedDates = ref([]);

// 最小可选日期（今天）
const minDateStr = getTodayStr();

// ==================== 计算属性 ====================
/** 当前显示的年-月文本 */
const currentYearMonth = computed(() => viewDate.value.format('YYYY年MM月'));

/** 生成日历网格数据 */
const calendarDays = computed(() => {
  const vd = viewDate.value;
  const year = vd.year();
  const month = vd.month(); // 0-11

  // 当月第一天 & 当月天数
  const firstDay = dayjs(new Date(year, month, 1));
  const startWeekday = firstDay.day(); // 0=周日
  const daysInMonth = firstDay.daysInMonth();

  // 上个月补位
  const prevMonthDays = [];
  const prevLastDay = firstDay.subtract(1, 'day');
  const prevDaysInMonth = prevLastDay.date();
  for (let i = startWeekday - 1; i >= 0; i--) {
    const d = dayjs(new Date(year, month - 1, prevDaysInMonth - i));
    prevMonthDays.push({ day: d.date(), fullDate: fmtDate(d), isCurrentMonth: false });
  }

  // 当月
  const curMonthDays = [];
  for (let i = 1; i <= daysInMonth; i++) {
    const d = dayjs(new Date(year, month, i));
    curMonthDays.push({ day: i, fullDate: fmtDate(d), isCurrentMonth: true });
  }

  // 下个月补位
  const nextMonthDays = [];
  const remaining = TOTAL_GRID_CELLS - prevMonthDays.length - curMonthDays.length;
  for (let i = 1; i <= remaining; i++) {
    const d = dayjs(new Date(year, month + 1, i));
    nextMonthDays.push({ day: i, fullDate: fmtDate(d), isCurrentMonth: false });
  }

  return [...prevMonthDays, ...curMonthDays, ...nextMonthDays];
});

// ==================== 方法 ====================
/** 判断日期是否被选中 */
const isDateSelected = (fullDate) => selectedDates.value.includes(fullDate);

/** 判断是否为今天 */
const isToday = (fullDate) => fullDate === getTodayStr();

/** 获取日期格子的样式类 */
const getDateCellClass = (item) => ({
  'other-month': !item.isCurrentMonth,
  selected: isDateSelected(item.fullDate),
  disabled: item.fullDate < minDateStr,
  today: isToday(item.fullDate),
});

/** 切换日期选中状态 */
const toggleDate = (item) => {
  if (item.fullDate < minDateStr) {
    uni.showToast({ title: '不能选择过去的日期', icon: 'none' });
    return;
  }
  // 移动模式：单选
  if (props.isMove) {
    selectedDates.value = [item.fullDate];
    return;
  }
  // 普通模式：多选切换
  const idx = selectedDates.value.indexOf(item.fullDate);
  if (idx === -1) {
    selectedDates.value.push(item.fullDate);
  } else {
    selectedDates.value.splice(idx, 1);
  }
};

/** 上一月 */
const prevMonth = () => {
  viewDate.value = viewDate.value.subtract(1, 'month');
};

/** 下一月 */
const nextMonth = () => {
  viewDate.value = viewDate.value.add(1, 'month');
};

/** 重置到当前月份 */
const resetToToday = () => {
  viewDate.value = dayjs();
};

/** 关闭弹窗 */
const close = () => {
  showPopup.value = false;
  selectedDates.value = [];
  resetToToday();
  emit('clearCopyFlag');
};

/** 打开弹窗 */
const open = () => {
  showPopup.value = true;
  selectedDates.value = [];
  resetToToday();
};

/** 确认添加 */
const confirmAdd = async () => {
  if (!selectedDates.value.length) {
    uni.showToast({ title: '请选择训练日期', icon: 'none' });
    return;
  }
  try {
    if (props.isCopy) {
      await dailytemplateApi.copyTempleteDailyTemplate(
        props.dailyTemplateId,
        selectedDates.value,
      );
      uni.showToast({ title: '复制成功', icon: 'success' });
    } else if (props.isMove) {
      await QueryPlanApi.updateDailyTemplateDate({
        id: props.templateId,
        trainingDate: selectedDates.value[0] || '',
      });
      uni.showToast({ title: '移动成功', icon: 'success' });
    } else {
      await QueryPlanApi.addPlanToCalendar({
        id: props.templateId,
        planId: props.planId,
        trainDateList: selectedDates.value,
      });
      uni.showToast({ title: '添加到日历成功', icon: 'success' });
    }
    close();
    emit('success');
  } catch (err) {
    uni.showToast({ title: '操作日历失败，请重试', icon: 'none' });
    console.error('操作日历失败:', err);
  }
};

defineExpose({ open, close });
</script>

<style scoped lang="scss">
/* ==================== 弹窗内容容器 ==================== */
.calendar-popup-content {
  padding: 30rpx;
  min-height: 50vh;
  background: #fff;
}

/* ==================== 头部 ==================== */
.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28rpx;

  .header-title {
    font-size: 34rpx;
    font-weight: 700;
    color: #1a1a1a;
  }

  .month-navigator {
    display: flex;
    align-items: center;
    gap: 24rpx;

    .month-label {
      font-size: 30rpx;
      font-weight: 500;
      color: #333;
      min-width: 140rpx;
      text-align: center;
    }
  }
}

/* ==================== 日历主体 ==================== */
.calendar-body {
  flex: 1;
}

.week-header {
  display: flex;
  margin-bottom: 16rpx;
  padding: 0 4rpx;

  .week-item {
    flex: 1;
    text-align: center;
    font-size: 26rpx;
    color: #999;
    padding: 8rpx 0;

    &.weekend {
      color: #e6a23c;
    }
  }
}

.date-grid {
  display: flex;
  flex-wrap: wrap;
}

.date-cell {
  width: calc(100% / 7);
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  position: relative;
  transition: background-color 0.2s, transform 0.15s;

  .date-text {
    font-size: 28rpx;
    color: #333;
    position: relative;
    z-index: 1;
  }

  /* 非当月 */
  &.other-month {
    opacity: 0;
    pointer-events: none;
  }

  /* 今天 */
  &.today {
    .date-text {
      color: #409eff;
      font-weight: 600;
      &::after {
        content: '';
        position: absolute;
        bottom: -4rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 8rpx;
        height: 8rpx;
        border-radius: 50%;
        background: #409eff;
      }
    }
  }

  /* 已选中 */
  &.selected {
    background: linear-gradient(135deg, #ffd700, #ffb800);

    .date-text {
      color: #1a1a1a;
      font-weight: 700;
    }

    &.today .date-text::after {
      background: #1a1a1a;
    }
  }

  /* 不可选（过去日期） */
  &.disabled {
    opacity: 0.3;
    pointer-events: none;
  }

  /* 可点击态 */
  &:not(.disabled):not(.other-month):active {
    transform: scale(0.9);
    background-color: #f0f0f0;
  }
}

/* ==================== 底部 ==================== */
.popup-footer {
  margin-top: 24rpx;
  padding-top: 20rpx;
  border-top: 1rpx solid #f0f0f0;

  .selected-hint {
    text-align: center;
    font-size: 24rpx;
    color: #999;
    margin-bottom: 16rpx;
  }

  .u-button {
    background-color: #ffd700 !important;
    color: #1a1a1a;
    font-weight: 700;
    font-size: 30rpx;
    border-radius: 44rpx;
    letter-spacing: 2rpx;

    &.u-button--disabled {
      background-color: #e8e8e8 !important;
      color: #bbb !important;
    }
  }
}
</style>