<script setup>
const props = defineProps({
  day: Object,
})

const emit = defineEmits(['event-click'])

const handleEventClick = (eventId) => {
  emit('event-click', eventId)
}
</script>

<template>
  <div
    class="cell"
    :class="[
      props.day.monthClass,
      {
        today: props.day.isToday,
        weekend: props.day.isWeekend,
        firstday: props.day.isFirstDay,
        selected: props.day.isSelected,
      },
    ]"
    :data-date="props.day.date"
  >
    <h1>{{ props.day.displayText }}</h1>
    <span v-if="props.day.lunarPhase" class="lunar-phase">{{ props.day.lunarPhase }}</span>

    <!-- Simple event display for now -->
    <div v-if="props.day.events && props.day.events.length > 0" class="day-events">
      <div
        v-for="event in props.day.events.slice(0, 3)"
        :key="event.id"
        class="event-dot"
        :class="`event-color-${event.colorId}`"
        :title="event.title"
        @click.stop="handleEventClick(event.id)"
      ></div>
      <div v-if="props.day.events.length > 3" class="event-more">
        +{{ props.day.events.length - 3 }}
      </div>
    </div>
  </div>
</template>

<style scoped>
.cell {
  position: relative;
  border-right: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
  user-select: none;
  touch-action: none;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 0.25em;
  overflow: hidden;
  width: 100%;
  height: var(--cell-h);
  font-weight: 700;
  transition: background-color 0.15s ease;
}

.cell h1 {
  margin: 0;
  padding: 0;
  min-width: 1.5em;
  font-size: 1em;
  font-weight: 700;
  color: var(--ink);
  transition: background-color 0.15s ease;
}

.cell.today h1 {
  border-radius: 2em;
  background: var(--today);
  border: 0.2em solid var(--today);
  margin: -0.2em;
  color: white;
  font-weight: bold;
}

.cell:hover h1 {
  text-shadow: 0 0 0.2em var(--shadow);
}

.cell.weekend h1 {
  color: var(--weekend);
}
.cell.firstday h1 {
  color: var(--firstday);
  text-shadow: 0 0 0.1em var(--strong);
}
.cell.selected {
  filter: hue-rotate(180deg);
}
.cell.selected h1 {
  color: var(--strong);
}

.lunar-phase {
  position: absolute;
  top: 0.1em;
  right: 0.1em;
  font-size: 0.8em;
  opacity: 0.7;
}
</style>
