<template>
  <div class="page-header">
    <h1>Calendar</h1>
  </div>

  <div ref="calendarContainer" class="calendar-container card">
    <FullCalendar :options="calendarOptions" />
  </div>

  <!-- Event details modal -->
  <div v-if="selectedEvent" class="modal-overlay" @click.self="closeEventModal">
    <div class="modal">
      <!-- Employee-photo event (recognition/recertification) with highlight -->
      <div v-if="selectedEvent.extendedProps?.showemployeephoto" class="recognition-header">
        <div class="recognition-badge">
          <span class="recognition-icon"><Trophy :size="24" /></span>
        </div>
        <div class="recognition-info">
          <div class="recognition-label">{{ selectedEvent.extendedProps?.typename || 'Recognition' }}</div>
          <h2 class="recognition-title">{{ selectedEvent.extendedProps?.message || selectedEvent.title }}</h2>
          <div v-if="selectedEvent.extendedProps?.employeename || selectedEvent.extendedProps?.employeesso" class="recognition-employee">
            <span class="employee-icon"><User :size="16" /></span>
            <span class="employee-name">{{ selectedEvent.extendedProps.employeename || selectedEvent.extendedProps.employeesso }}</span>
          </div>
        </div>
      </div>

      <!-- Regular event header -->
      <h2 v-else>{{ selectedEvent.title }}</h2>

      <div class="event-details">
        <p v-if="selectedEvent.extendedProps?.typename && !selectedEvent.extendedProps?.showemployeephoto">
          <strong>Type:</strong> {{ selectedEvent.extendedProps.typename }}
        </p>
        <p>
          <strong>Start:</strong> {{ formatDate(selectedEvent.start) }}
        </p>
        <p v-if="selectedEvent.end">
          <strong>End:</strong> {{ formatDate(selectedEvent.end) }}
        </p>
        <p v-if="selectedEvent.extendedProps?.message && !selectedEvent.extendedProps?.showemployeephoto" class="message-block">
          <strong>Details:</strong>
          <span class="message-text">{{ selectedEvent.extendedProps.message }}</span>
        </p>
        <p v-if="selectedEvent.extendedProps?.ticketnumber">
          <strong>Ticket:</strong> {{ selectedEvent.extendedProps.ticketnumber }}
        </p>
        <p v-if="selectedEvent.extendedProps?.linkurl">
          <a :href="selectedEvent.extendedProps.linkurl" target="_blank" class="btn btn-link">
            More Info
          </a>
        </p>
      </div>
      <div class="modal-actions">
        <router-link
          v-if="selectedEvent.extendedProps?.notificationid"
          :to="`/notifications/${selectedEvent.extendedProps.notificationid}`"
          class="btn btn-secondary"
        >
          View Notification
        </router-link>
        <button class="btn btn-primary" @click="closeEventModal">Close</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import FullCalendar from '@fullcalendar/vue3'
import dayGridPlugin from '@fullcalendar/daygrid'
import { Trophy, User } from 'lucide-vue-next'
import { notificationsApi } from '@/api'

const events = ref([])
const selectedEvent = ref(null)
const calendarRef = ref(null)
const calendarContainer = ref(null)

// Store events by date for hover lookup

const calendarOptions = ref({
  plugins: [dayGridPlugin],
  initialView: 'dayGridMonth',
  events: [],
  eventClick: (info) => {
    selectedEvent.value = info.event
  },
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,dayGridWeek'
  },
  // Measured at mount and on resize (fitHeight), not a viewport calc: the
  // calendar starts below a header and a page title whose heights are not
  // knowable here, and guessing at them is what left the grid either clipped
  // or overflowing. expandRows shares that height across the six weeks so an
  // empty month fills it instead of collapsing into strips.
  height: 600,
  expandRows: true,
  // true = FullCalendar fits as many chips as the row actually has room for and
  // rolls the rest into a '+N more'. That is the only setting that cannot
  // overflow the box: a fixed number outgrows short rows and pushes the last
  // weeks behind the calendar's own scroller. Compact chip styling below buys
  // back a chip or two per day.
  dayMaxEvents: true,
  // FullCalendar's own popover: click '+N more' and it lists that day's events,
  // each still opening the detail modal through eventClick. The custom hover
  // tooltip this replaces sliced the hidden events from a hardcoded index of 3,
  // which was the fixed dayMaxEvents at the time. Now the cap varies with the
  // row height, so that slice pointed at the wrong events - and when a short
  // row showed one chip, at an empty slice, leaving '+2 more' with nothing
  // behind it. A popover has no such bookkeeping, and works on a touch screen.
  moreLinkClick: 'popover'
})

// Height the calendar can have without pushing the page into a scrollbar.
// A first guess from the container's top, then corrected against whatever the
// page actually overflows by - the card's padding, page margins and anything
// else below it are not worth enumerating, and guessing at them is exactly how
// this ended up either clipped or scrolling. Floored so a very short window
// scrolls rather than crushing the grid.
const MIN_CALENDAR_HEIGHT = 460
const FIT_PASSES = 3
async function fitHeight() {
  const el = calendarContainer.value
  if (!el) return
  const available = window.innerHeight - el.getBoundingClientRect().top
  calendarOptions.value.height = Math.max(MIN_CALENDAR_HEIGHT, Math.round(available))
  for (let pass = 0; pass < FIT_PASSES; pass++) {
    await nextTick()
    const overflow = document.documentElement.scrollHeight - window.innerHeight
    if (overflow <= 0) break
    const next = calendarOptions.value.height - overflow
    if (next <= MIN_CALENDAR_HEIGHT) {
      calendarOptions.value.height = MIN_CALENDAR_HEIGHT
      break
    }
    calendarOptions.value.height = next
  }
}

onMounted(async () => {
  await loadEvents()

  await nextTick()
  fitHeight()
  window.addEventListener('resize', fitHeight)
})

onUnmounted(() => {
  window.removeEventListener('resize', fitHeight)
})

onMounted(async () => {
  await loadEvents()
})

async function loadEvents() {
  try {
    const response = await notificationsApi.getCalendar()
    events.value = response.data.data
    calendarOptions.value.events = events.value
  } catch (error) {
    console.error('Error loading calendar events:', error)
  }
}

function closeEventModal() {
  selectedEvent.value = null
}

function formatDate(dateStr) {
  if (!dateStr) return ''
  // allDay events carry a site-local date-only value (YYYY-MM-DD). Build the
  // Date from local parts so it is not shifted a day by UTC-midnight parsing.
  const parts = /^(\d{4})-(\d{2})-(\d{2})$/.exec(dateStr)
  const date = parts
    ? new Date(Number(parts[1]), Number(parts[2]) - 1, Number(parts[3]))
    : new Date(dateStr)
  return date.toLocaleDateString('en-US', {
    weekday: 'short',
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  })
}
</script>

<style scoped>
.calendar-container {
  /* The height itself is measured in fitHeight(); this is only a floor for the
     first paint, before that measurement lands. */
  min-height: 460px;
}

/* FullCalendar's day-grid scroller reports 16px more scrollHeight than the
   table inside it - the last week sits flush with the bottom and nothing is
   hidden, but the browser still paints a scrollbar for the phantom 16px. The
   calendar is sized to fit its six rows (fitHeight), so there is nothing for
   this scroller to reveal; hide the bar rather than shrinking the grid to
   chase a gap that never closes. */
:deep(.fc-scroller-liquid-absolute) {
  overflow-y: hidden !important;
}

/* The popover is FullCalendar's own element, so it ships light-themed. */
:deep(.fc-popover) {
  background: var(--bg-card-solid);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  z-index: 1000;
}
:deep(.fc-popover-header) {
  background: var(--bg);
  color: var(--text);
  padding: 8px 10px;
  font-weight: 600;
}
:deep(.fc-popover-body) {
  color: var(--text);
}

/* Compact chips: the row height decides how many events a day can show before
   they roll into a '+N more', so every pixel saved here is one more visible. */
:deep(.fc-daygrid-event) {
  font-size: 12px;
  line-height: 1.3;
  padding: 1px 4px;
  margin-top: 1px;
}
:deep(.fc-daygrid-more-link) {
  font-size: 12px;
}

/* The day number was tight against the top edge once the cells grew. Kept
   small: this strip is pure overhead in the row-height budget FullCalendar
   uses to decide how many chips fit before a '+N more'. */
:deep(.fc-daygrid-day-top) {
  padding: 1px 4px;
  font-size: 13px;
}
:deep(.fc-daygrid-day-events) {
  margin-bottom: 0;
}
:deep(.fc-daygrid-event-harness) {
  margin-top: 0;
}

.modal {
  padding: 1.5rem;
}

.modal h2 {
  margin: 0 0 1rem 0;
  font-size: 18px;
  color: var(--text);
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.event-details {
  padding: 0.5rem 0;
}

.event-details p {
  margin-bottom: 0.75rem;
  font-size: 14px;
  line-height: 1.5;
}

.event-details p:last-child {
  margin-bottom: 0;
}

.event-details strong {
  color: var(--text-light);
  display: inline-block;
  min-width: 70px;
}

.message-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.message-block strong {
  min-width: auto;
}

.message-text {
  display: block;
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border-radius: 0.25rem;
  white-space: pre-wrap;
  line-height: 1.5;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

/* Recognition event styling */
.recognition-header {
  display: flex;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.recognition-badge {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
}

.recognition-icon {
  font-size: 28px;
}

.recognition-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.recognition-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.recognition-title {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  font-size: 16px !important;
  line-height: 1.4;
  color: var(--text) !important;
}

.recognition-employee {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(65, 129, 255, 0.1);
  border-radius: 0.25rem;
  border-left: 3px solid var(--primary);
}

.employee-icon {
  font-size: 18px;
}

.employee-name {
  font-weight: 600;
  color: var(--text);
  font-size: 15px;
}
</style>
