<template>
  <div class="month-grid">
    <!-- Weekday header -->
    <div class="month-grid__weekdays">
      <div v-for="label in weekdayLabels" :key="label" class="month-grid__weekday">
        {{ label }}
      </div>
    </div>

    <!-- Day cells -->
    <div class="month-grid__body">
      <div
        v-for="day in days"
        :key="day.key"
        class="month-grid__cell"
        :class="{
          'month-grid__cell--outside': !day.inCurrentMonth,
          'month-grid__cell--today': day.isToday,
        }"
        @click="$emit('day-click', day.date)"
      >
        <div class="month-grid__cell-number">{{ day.dayNumber }}</div>

        <div class="month-grid__cell-events">
          <ClassEventCard
            v-for="item in day.classes.slice(0, MAX_VISIBLE)"
            :key="item.id"
            :class-item="item"
            compact
            @click="$emit('class-click', item)"
          />

          <button
            v-if="day.classes.length > MAX_VISIBLE"
            type="button"
            class="month-grid__more"
            @click.stop="$emit('day-click', day.date)"
          >
            +{{ day.classes.length - MAX_VISIBLE }} ver mais
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import {
  startOfMonth,
  endOfMonth,
  startOfWeek,
  endOfWeek,
  eachDayOfInterval,
  isSameMonth,
  isSameDay,
  parseISO,
  format,
} from "date-fns";
import { ptBR } from "date-fns/locale";
import ClassEventCard from "./ClassEventCard.vue";

const props = defineProps({
  currentDate: { type: Date, required: true },
  classes: { type: Array, default: () => [] },
});

defineEmits(["day-click", "class-click"]);

// Máximo de aulas exibidas por dia; o excedente vira "+N ver mais"
const MAX_VISIBLE = 1;

const weekdayLabels = ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sáb"];

const days = computed(() => {
  const monthStart = startOfMonth(props.currentDate);
  const monthEnd = endOfMonth(props.currentDate);
  const gridStart = startOfWeek(monthStart, { weekStartsOn: 0 });
  const gridEnd = endOfWeek(monthEnd, { weekStartsOn: 0 });
  const today = new Date();

  return eachDayOfInterval({ start: gridStart, end: gridEnd }).map((date) => ({
    date,
    key: format(date, "yyyy-MM-dd"),
    dayNumber: format(date, "d", { locale: ptBR }),
    inCurrentMonth: isSameMonth(date, props.currentDate),
    isToday: isSameDay(date, today),
    classes: props.classes.filter((c) =>
      isSameDay(parseISO(c.date_time_start), date),
    ),
  }));
});
</script>

<style scoped>
.month-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid #ff8340;
  border-radius: 10px;
  overflow: hidden;
  background: #eaf8f8;
}

.month-grid__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #003e29;
}

.month-grid__weekday {
  text-align: center;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

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

.month-grid__cell {
  position: relative;
  min-height: 116px;
  border-right: 1px solid #ff8340;
  border-bottom: 1px solid #ff8340;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}

/* remove the right border on the last column of each row */
.month-grid__cell:nth-child(7n) {
  border-right: none;
}

.month-grid__cell:hover {
  background: rgba(255, 131, 64, 0.08);
}

.month-grid__cell--outside {
  background: rgba(0, 0, 0, 0.02);
}

.month-grid__cell--outside .month-grid__cell-number {
  color: #b0b0b0;
}

.month-grid__cell--today .month-grid__cell-number {
  background: #ff8340;
  color: #ffffff;
}

.month-grid__cell-number {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: #505050;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.month-grid__cell-events {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.month-grid__more {
  align-self: flex-start;
  border: none;
  background: transparent;
  padding: 2px 4px;
  font-size: 11px;
  font-weight: 600;
  color: #ff8340;
  cursor: pointer;
  border-radius: 4px;
}

.month-grid__more:hover {
  background: rgba(255, 131, 64, 0.12);
}
</style>
