<template>
  <div class="event-calendar-container">
    <div class="header">
      <h2>이벤트 캘린더</h2>
      <Button label="이벤트 관리" icon="pi pi-cog" @click="navigateToEventManagement" />
    </div>
    
    <FullCalendar 
      :options="calendarOptions" 
      class="calendar-wrapper"
    />
    
    <!-- 이벤트 상세 다이얼로그 -->
    <EventDetailsDialog 
      v-model:visible="eventDetailsDialog" 
      :event="selectedEvent"
      :getEventTypeLabel="getEventTypeLabel"
      :getEventTypeSeverity="getEventTypeSeverity"
      :getEventStatusLabel="getEventStatusLabel"
      :getStatusSeverity="getStatusSeverity"
      :formatDate="formatDate"
      @edit="navigateToEventManagement"
      @remove-participant="removeParticipant"
    />
    
  </div>
</template>

<script setup>
// getEventTypeLabel 중복 import 제거. eventUtils.js의 getEventTypeLabel만 사용.
import { ref, onMounted, computed } from 'vue';
import { useGtag } from 'vue-gtag-next';
import { useRouter } from 'vue-router';
import { useToast } from 'primevue/usetoast';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import koLocale from '@fullcalendar/core/locales/ko';
import EventDetailsDialog from '@/components/event/EventDetailsDialog.vue';
import eventService from '@/services/eventService';
import { 
  getEventTypeSeverity, 
  getStatusSeverity, 
  formatDate 
} from '@/utils/eventUtils';
import { getEventTypeLabel, getEventStatusLabel } from '@/utils/enumMappings';
// getEventTypeLabel, getEventStatusLabel은 enumMappings.js에서만 import, eventUtils.js에서는 import/export하지 않음

const router = useRouter();
const toast = useToast();

// 상태 변수
const events = ref([]);
const selectedEvent = ref({});
const eventDetailsDialog = ref(false);
const loading = ref(false);
const clubId = ref(localStorage.getItem('clubId') || null);

// 페이지 로드 시 데이터 가져오기
// 페이지 진입 시 Google Analytics 페이지뷰 추적
onMounted(async () => {
  const gtag = useGtag();
  gtag.pageview({
    page_title: '이벤트캘린더',
    page_path: window.location.pathname,
    page_location: window.location.href
  });
  await fetchEvents();
});

// 이벤트 목록 가져오기
const fetchEvents = async () => {
  loading.value = true;
  try {
    const eventData = await eventService.getEvents(clubId.value);
    console.log('eventData', eventData);
    events.value = eventData.map(event => ({
      id: event.id,
      title: event.title,
      start: event.startDate,
      end: event.endDate,
      extendedProps: {
        ...event
      },
      backgroundColor: getEventColor(event.eventType),
      borderColor: getEventColor(event.eventType),
      textColor: '#ffffff'
    }));
  } catch (error) {
    console.error('이벤트 목록을 가져오는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '이벤트 목록을 가져오는 중 오류가 발생했습니다.', life: 3000 });
  } finally {
    loading.value = false;
  }
};

// 이벤트 타입에 따른 색상 지정
const getEventColor = (eventType) => {
  switch (eventType) {
    case 'regular':
      return '#FF5722'; // 주황색
    case 'lightning':
      return '#2196F3'; // 파란색
    case 'practice':
      return '#4CAF50'; // 초록색
    case 'exchange':
      return '#9C27B0'; // 보라색
    case 'event':
      return '#FFC107'; // 노란색
    case 'other':
      return '#607D8B'; // 회색
    default:
      return '#3f51b5'; // 기본색
  }
};

// 캘린더 이벤트 클릭 핸들러
// 캘린더 이벤트 클릭 시 GA 이벤트 추적
const handleEventClick = (info) => {
  const gtag = useGtag();
  gtag.event('calendar_event_click', {
    event_category: '이벤트캘린더',
    event_label: '캘린더 이벤트 클릭',
    value: info.event.id
  });
  const eventId = info.event.id;
  viewEventDetails(eventId);
};

// 이벤트 상세 보기
// 이벤트 상세보기 클릭 시 GA 이벤트 추적
const viewEventDetails = async (eventId) => {
  const gtag = useGtag();
  gtag.event('view_event_details', {
    event_category: '이벤트캘린더',
    event_label: '이벤트 상세보기',
    value: eventId
  });
  try {
    selectedEvent.value = await eventService.getEventById(eventId);
    eventDetailsDialog.value = true;
  } catch (error) {
    console.error('이벤트 상세 정보를 가져오는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '이벤트 상세 정보를 가져오는 중 오류가 발생했습니다.', life: 3000 });
  }
};

// 참가자 제거
const removeParticipant = async (participant) => {
  try {
    await eventService.removeParticipant(selectedEvent.value.id, participant.id);
    
    // 참가자 목록에서 제거
    selectedEvent.value.participants = selectedEvent.value.participants.filter(p => p.id !== participant.id);
    
    toast.add({ severity: 'success', summary: '성공', detail: '참가자가 제거되었습니다.', life: 3000 });
  } catch (error) {
    console.error('참가자 제거 중 오류 발생:', error);
    const errorMessage = error.response?.data?.message || '참가자 제거 중 오류가 발생했습니다.';
    toast.add({ severity: 'error', summary: '오류', detail: errorMessage, life: 3000 });
  }
};

// 이벤트 관리 페이지로 이동
// 이벤트관리 이동 버튼 클릭 시 GA 이벤트 추적
const navigateToEventManagement = () => {
  const gtag = useGtag();
  gtag.event('go_to_event_management', {
    event_category: '이벤트캘린더',
    event_label: '이벤트관리 이동'
  });
  router.push('/club/events');
};

// 캘린더 옵션
const calendarOptions = computed(() => ({
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: 'dayGridMonth',
  headerToolbar: {
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth,dayGridWeek'
  },
  events: events.value,
  eventClick: handleEventClick,
  locale: 'ko',
  height: 'auto',
  eventTimeFormat: {
    hour: '2-digit',
    minute: '2-digit',
    meridiem: false,
    hour12: false
  },
  dayMaxEvents: true
}));
</script>

<style scoped>
.event-calendar-container {
  padding: 1rem;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.calendar-wrapper {
  height: calc(100vh - 200px);
  margin-bottom: 2rem;
}

:deep(.fc-event) {
  cursor: pointer;
}

:deep(.fc-toolbar-title) {
  font-size: 1.5rem !important;
}

:deep(.fc-daygrid-day-number) {
  font-size: 1rem;
}

:deep(.fc-col-header-cell-cushion) {
  font-weight: 600;
}
</style>
