<template>
  <div class="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-soft p-6">
    <!-- 月视图 -->
    <div v-if="view === 'month'" class="month-view" data-aos="fade-up" data-aos-duration="500">
      <div class="grid grid-cols-7 gap-1">
        <div
            v-for="day in ['日', '一', '二', '三', '四', '五', '六']"
            :key="day"
            class="text-center py-3 font-semibold text-gray-700 bg-gray-50 rounded-lg"
        >
          {{ day }}
        </div>
      </div>

      <div class="grid grid-cols-7 gap-2 mt-3">
        <div
            v-for="(day, index) in monthDays"
            :key="index"
            @click="selectDate(day.date)"
            @dragover.prevent="handleDragOver($event, day.date)"
            @dragleave="handleDragLeave"
            @drop="handleDropEvent($event, day.date)"
            :class="{
            'bg-primary-50': selectedDate === day.date,
            'drag-over': isDragOverCell === day.date
          }"
            class="calendar-cell dropzone rounded-xl border border-gray-100 p-3 cursor-pointer transition-all relative min-h-[120px] hover:shadow-md"
        >
          <!-- 日期和工作状态 -->
          <div class="flex justify-between items-start">
            <span
                class="text-lg font-semibold w-8 h-8 flex items-center justify-center rounded-full"
                :class="{
                'bg-primary-600 text-white': isToday(day.date),
                'text-gray-900': day.currentMonth && !isToday(day.date),
                'text-gray-400': !day.currentMonth
              }"
            >
              {{ day.date.split('-')[2] }}
            </span>

            <span v-if="isHoliday(day.date)" class="work-marker day-off">休</span>
            <span v-else-if="isWorkDayOnWeekend(day.date)" class="work-marker work-day">班</span>
          </div>

          <!-- 节假日/节气 -->
          <div class="mt-2">
            <div v-if="getFestival(day.date)" class="flex items-center">
              <span class="holiday-tag">
                <i class="fas fa-star mr-1"></i> {{ getFestival(day.date) }}
              </span>
            </div>

            <div v-if="getSolarTerm(day.date)" class="solar-term mt-1">
              {{ getSolarTerm(day.date) }}
            </div>
          </div>

          <!-- 农历日期 -->
          <div class="lunar-date text-xs text-gray-500 mt-1">
            {{ getLunarDate(day.date) }}
          </div>

          <!-- 事件展示 -->
          <div v-if="hasEvent(day.date)" class="mt-2 text-xs max-w-full overflow-hidden">
            <div
                v-for="(event, idx) in getEventsForDate(day.date).slice(0, 2)"
                :key="idx"
                class="truncate mb-1 flex items-center"
            >
              <span
                  class="event-dot mr-1"
                  :style="{ backgroundColor: event.color }"
              ></span>
              {{ event.title }}
            </div>
            <div v-if="getEventsForDate(day.date).length > 2" class="text-gray-500">
              +{{ getEventsForDate(day.date).length - 2 }}个日程
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 周视图 -->
    <div v-else-if="view === 'week'" class="week-view" data-aos="fade-up" data-aos-duration="500">
      <div class="flex mb-3 bg-gray-50 rounded-lg">
        <div class="w-20"></div>
        <div
            v-for="(day, index) in weekDays"
            :key="index"
            @click="selectDate(day.format('YYYY-MM-DD'))"
            :class="{'bg-primary-100': selectedDate === day.format('YYYY-MM-DD')}"
            class="flex-1 text-center py-3 rounded-lg transition-colors cursor-pointer hover:bg-gray-100"
        >
          <p class="font-medium text-gray-700">{{ day.format('ddd') }}</p>
          <p
              class="mx-auto w-10 h-10 flex items-center justify-center rounded-full mt-1 text-lg"
              :class="{
              'bg-primary-600 text-white': isToday(day.format('YYYY-MM-DD')),
              'text-gray-900': !isToday(day.format('YYYY-MM-DD'))
            }"
          >
            {{ day.date() }}
          </p>
          <div class="text-xs text-gray-500 mt-1">
            {{ getLunarDate(day.format('YYYY-MM-DD')) }}
          </div>
        </div>
      </div>

      <div class="border border-gray-200 rounded-xl overflow-hidden">
        <div
            v-for="hour in 12"
            :key="hour"
            class="flex"
        >
          <div class="w-20 py-3 text-center text-sm text-gray-600 bg-gray-50 flex-shrink-0">
            {{ hour + 8 }}:00
          </div>
          <div
              v-for="(day, index) in weekDays"
              :key="index"
              @dragover.prevent="handleDragOver($event, day.format('YYYY-MM-DD'), (hour + 8) + ':00')"
              @dragleave="handleDragLeave"
              @drop="handleDropEvent($event, day.format('YYYY-MM-DD'), (hour + 8) + ':00')"
              :class="{
              'bg-gray-50': index % 2 === 0,
              'border-l border-gray-200': index > 0,
              'drag-over': isDragOverCell === day.format('YYYY-MM-DD') + '-' + (hour + 8)
            }"
              class="flex-1 min-h-16 p-2 dropzone"
          >
            <div
                v-for="event in getEventsForDate(day.format('YYYY-MM-DD'), (hour + 8) + ':00')"
                :key="event.id"
                @click="showEventDetail(event)"
                class="text-xs p-2 rounded-lg mb-1 truncate cursor-pointer hover:shadow-sm"
                :style="{
                backgroundColor: `${event.color}10`,
                borderLeft: `3px solid ${event.color}`
              }"
            >
              {{ event.title }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 日视图 -->
    <div v-else class="day-view" data-aos="fade-up" data-aos-duration="500">
      <div
          class="flex items-center justify-center py-3 mb-4 rounded-xl day-header"
          @click="selectDate(currentDate)"
      >
        <div class="text-center">
          <h2 class="text-2xl font-bold text-gray-800">
            {{ currentDay.format('YYYY年MM月DD日') }}
          </h2>
          <p class="text-gray-600 mt-1 flex items-center justify-center space-x-2">
            <span>{{ currentDay.format('dddd') }}</span>
            <span v-if="isHoliday(currentDay.format('YYYY-MM-DD'))" class="bg-red-100 text-red-600 px-2 py-1 rounded-full text-sm">休假日</span>
            <span v-else class="bg-green-100 text-green-600 px-2 py-1 rounded-full text-sm">工作日</span>
          </p>
          <div class="text-sm text-gray-500 mt-1">
            {{ getLunarDate(currentDay.format('YYYY-MM-DD')) }}
          </div>
        </div>
      </div>

      <div class="border border-gray-200 rounded-xl overflow-hidden">
        <div
            v-for="hour in 14"
            :key="hour"
            class="flex border-b border-gray-200 last:border-0"
        >
          <div class="w-20 py-4 text-center text-sm text-gray-600 bg-gray-50 flex-shrink-0">
            {{ hour + 7 }}:00
          </div>
          <div
              @dragover.prevent="handleDragOver($event, currentDay.format('YYYY-MM-DD'), (hour + 7) + ':00')"
              @dragleave="handleDragLeave"
              @drop="handleDropEvent($event, currentDay.format('YYYY-MM-DD'), (hour + 7) + ':00')"
              :class="{
              'drag-over': isDragOverCell === currentDay.format('YYYY-MM-DD') + '-' + (hour + 7)
            }"
              class="flex-1 min-h-16 p-3 dropzone"
          >
            <div
                v-for="event in getEventsForDate(currentDay.format('YYYY-MM-DD'), (hour + 7) + ':00')"
                :key="event.id"
                draggable="true"
                @dragstart="handleDragStart($event, event, 'event')"
                @dragend="handleDragEnd"
                class="schedule-item mb-2 p-3 rounded-lg shadow-sm cursor-pointer border-l-4 hover:shadow-md"
                :style="{
                backgroundColor: `${event.color}10`,
                borderLeftColor: event.color
              }"
            >
              <div class="flex justify-between">
                <span class="font-medium">{{ event.title }}</span>
                <span class="text-xs" :style="{ color: event.color }">{{ event.startTime }}</span>
              </div>
              <div v-if="event.location" class="text-xs mt-1 text-gray-500 flex items-center">
                <i class="fas fa-location-dot mr-1 text-xs"></i> {{ event.location }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, defineProps, defineEmits, ref } from 'vue';
import dayjs from 'dayjs';
import { getLunarDate, getFestival, getSolarTerm, isHoliday } from '@/utils/calendarUtils';

const props = defineProps({
  view: String,
  currentDate: String,
  selectedDate: String,
  events: Array,
  commonEvents: Array
});

const emit = defineEmits(['select-date', 'show-event-detail', 'drop-event', 'drag-start', 'drag-end']);

// 拖拽状态
const isDragOverCell = ref(null);

// 计算月视图日期
const monthDays = computed(() => {
  const startDay = dayjs(props.currentDate).startOf('month').startOf('week');
  const endDay = dayjs(props.currentDate).endOf('month').endOf('week');
  const days = [];

  for (let day = startDay; day.isBefore(endDay); day = day.add(1, 'day')) {
    days.push({
      date: day.format('YYYY-MM-DD'),
      currentMonth: day.month() === dayjs(props.currentDate).month()
    });
  }

  return days;
});

// 计算周视图日期
const weekDays = computed(() => {
  const start = dayjs(props.currentDate).startOf('week');
  const days = [];

  for (let i = 0; i < 7; i++) {
    days.push(start.add(i, 'day'));
  }

  return days;
});

// 计算日视图的当前日期
const currentDay = computed(() => {
  return dayjs(props.currentDate);
});

// 检查日期是否有事件
const hasEvent = (date) => {
  return props.events.some(e => e.date === date);
};

// 获取当天的所有事件
const getEventsForDate = (date, time = null) => {
  let filteredEvents = props.events.filter(e => e.date === date);

  if (time) {
    filteredEvents = filteredEvents.filter(e => e.startTime === time);
  }

  return filteredEvents;
};

// 检查是否是今天
const isToday = (date) => {
  return dayjs(date).isSame(dayjs(), 'day');
};

// 是否为调休工作日
const isWorkDayOnWeekend = (date) => {
  return false;
};

const selectDate = (date) => {
  emit('select-date', date);
};

const showEventDetail = (event) => {
  emit('show-event-detail', event);
};

// 处理拖拽开始
const handleDragStart = (event, item, type) => {
  emit('drag-start', event, item, type);
};

// 处理拖拽结束
const handleDragEnd = () => {
  emit('drag-end');
};

// 处理拖拽悬停
const handleDragOver = (event, date, time = null) => {
  // 生成唯一标识，用于标记当前拖拽悬停的单元格
  if (time) {
    isDragOverCell.value = `${date}-${time}`;
  } else {
    isDragOverCell.value = date;
  }
  event.preventDefault();
};

// 处理拖拽离开
const handleDragLeave = (event) => {
  isDragOverCell.value = null;
};

// 处理放置事件
const handleDropEvent = (event, date, time = null) => {
  isDragOverCell.value = null;
  emit('drop-event', event, date, time);
};
</script>

<style scoped>
.calendar-cell {
  transition: all 0.3s ease;
}

.calendar-cell:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.dropzone.drag-over {
  background-color: rgba(100, 94, 255, 0.1);
  box-shadow: inset 0 0 0 2px #645eff;
}

.work-marker {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.75rem;
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

.day-off {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}

.work-day {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.solar-term {
  font-size: 0.75rem;
  color: #059669;
  background: rgba(5, 150, 105, 0.1);
  padding: 2px 8px;
  border-radius: 9999px;
  margin-top: 4px;
  display: inline-block;
}

.event-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin: 0 2px;
}

.holiday-tag {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
}

.schedule-item {
  transition: all 0.3s ease;
  cursor: grab;
}

.schedule-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.day-header {
  background: linear-gradient(to right, #f0f4ff, #e0e7ff);
}
</style>
