<!-- src/pages/service/calender/EventModal.vue -->
<template>
  <div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
    <div class="relative bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
      
      <div class="text-left">
        <h3 class="text-2xl leading-6 font-bold text-gray-900 mb-2">{{ event?.title }}</h3>
        <div class="mt-4">
          <p class="text-sm text-gray-600 whitespace-pre-wrap">{{ event?.extendedProps.description }}</p>
          <p class="text-sm text-gray-500 mt-4">
            <strong>When:</strong> {{ formatEventDate(event?.start) }}
          </p>
        </div>
      </div>
      
      <button @click="$emit('close-modal')" type="button" class="absolute top-0 right-0 mt-4 mr-4 text-gray-400 hover:text-gray-600 focus:outline-none" aria-label="Close modal">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
      </button>

      <div class="mt-6 flex justify-between items-center">
        <button @click="confirmDelete" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-700">
          Delete Event
        </button>
        <button @click="$emit('close-modal')" class="px-4 py-2 bg-gray-200 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-300">
          Close
        </button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { EventApi } from '@fullcalendar/core';
import dayjs from 'dayjs';

export default defineComponent({
  name: 'EventModal',
  // This modal correctly expects a prop named 'event' of type 'EventApi'
  props: {
    event: {
      type: Object as PropType<EventApi | null>,
      required: true,
    },
  },
  methods: {
    confirmDelete() {
      if (this.event && window.confirm(`Are you sure you want to delete "${this.event.title}"?`)) {
        this.$emit('delete-event', this.event.id);
      }
    },
    formatEventDate(date: Date | string | null | undefined): string {
      if (!date) return 'N/A';
      // Format the date and time from the FullCalendar event object
      return dayjs(date).format('MMMM D, YYYY [at] h:mm A');
    }
  },
});
</script>