<template>
  <div class="event-management-container">
    <div class="header">
      <h2>이벤트 관리</h2>
      <div class="header-buttons">
        <Button label="캘린더 보기" icon="pi pi-calendar" class="p-button-outlined mr-2" @click="navigateToCalendar" />
        <Button label="파일에서 생성" icon="pi pi-file-import" class="p-button-outlined mr-2" @click="openFileUploadDialog" />
        <Button label="이벤트 추가" icon="pi pi-plus" @click="openNewEventDialog" />
      </div>
    </div>
    
    <!-- 이벤트 목록 -->
    <DataTable 
      :value="events" 
      :loading="loading"
      :paginator="true" 
      :rows="10"
      :rowsPerPageOptions="[5, 10, 20, 50]"
      paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
      currentPageReportTemplate="{first}에서 {last}까지 {totalRecords} 중"
      responsiveLayout="scroll"
      stripedRows
      filterDisplay="menu"
      v-model:filters="filters"
      sort-field="startDate"
      :sort-order="-1"
      class="mt-4"
    >
      <Column field="eventType" header="유형" sortable style="width: 10%">
        <template #body="slotProps">
          <Badge :value="getEventTypeLabel(slotProps.data.eventType)" :severity="getEventTypeSeverity(slotProps.data.eventType)" />
        </template>
        <template #filter="{ filterModel, filterCallback }">
          <Select v-model="filterModel.value" @change="filterCallback()" :options="eventTypeOptions" optionLabel="name" optionValue="value" placeholder="유형 선택" class="p-column-filter" />
        </template>
      </Column>
      <Column field="title" header="제목" sortable>
        <template #filter="{ filterModel, filterCallback }">
          <InputText v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="제목으로 검색" />
        </template>
      </Column>
      
      <Column field="startDate" header="시작일" sortable style="width: 12%">
        <template #body="slotProps">
          {{ formatDate(slotProps.data.startDate) }}
        </template>
        <template #filter="{ filterModel, filterCallback }">
          <DatePicker v-model="filterModel.value" @date-select="filterCallback()" dateFormat="yy-mm-dd" placeholder="날짜 선택" />
        </template>
      </Column>
      <Column field="location" header="장소" sortable style="width: 15%"></Column>
      <Column field="maxParticipants" header="최대 인원" sortable style="width: 8%"></Column>
      <Column field="status" header="상태" sortable style="width: 8%">
        <template #body="slotProps">
          <Badge :value="getEventStatusLabel(slotProps.data.status)" :severity="getStatusSeverity(slotProps.data.status)" />
        </template>
      </Column>
      <Column header="작업" style="width: 10%">
        <template #body="slotProps">
          <div class="flex gap-2">
            <Button icon="pi pi-eye" class="p-button-rounded p-button-text" @click="viewEventDetails(slotProps.data)" />
            <Button icon="pi pi-pencil" class="p-button-rounded p-button-text" @click="editEvent(slotProps.data)" />
            <Button icon="pi pi-trash" class="p-button-rounded p-button-text p-button-danger" @click="confirmDeleteEvent(slotProps.data)" />
          </div>
        </template>
      </Column>
    </DataTable>

    <!-- 이벤트 다이얼로그 -->
    <EventDialog
      v-model:visible="eventDialog"
      :event="event || {}"
      :isNew="!event?.id"
      :submitted="submitted"
      @save="saveEvent"
      @hide="hideDialog"
    />

    <!-- 이벤트 상세 정보 다이얼로그 -->
    <EventDetailsDialog
      v-model:visible="detailsDialog"
      :event="event || {}"
      :getEventTypeLabel="getEventTypeLabel"
      :getEventTypeSeverity="getEventTypeSeverity"
      :getEventStatusLabel="getEventStatusLabel"
      :getStatusSeverity="getStatusSeverity"
      :formatDate="formatDate"
      :availableMembers="clubMembers"
      :hasTeamFeature="hasTeamFeature"
      @edit="editFromDetails"
      @hide="hideDialog"
      @participant-updated="fetchEvents"
      @score-updated="fetchEvents"
    />

    <!-- 삭제 확인 다이얼로그 -->
    <Dialog
      v-model:visible="deleteEventDialog"
      :style="{ width: '450px' }"
      header="이벤트 삭제"
      :modal="true"
    >
      <div class="confirmation-content">
        <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
        <span>정말 이 이벤트를 삭제하시겠습니까?</span>
      </div>
      <template #footer>
        <Button label="아니오" icon="pi pi-times" class="p-button-text" @click="deleteEventDialog = false" />
        <Button label="예" icon="pi pi-check" class="p-button-danger" @click="deleteEvent" />
      </template>
    </Dialog>
    
    <!-- 파일 업로드 다이얼로그 -->
    <FileUploadDialog
      v-model:visible="fileUploadDialog"
      :clubId="clubId"
      @event-created="onEventCreated"
    />
  </div>
</template>

<script setup>
import { getEventTypeLabel, getEventStatusLabel, getStatusSeverity } from '@/utils/enumMappings';
import { ref, onMounted, computed } from 'vue';
import { useGtag } from 'vue-gtag-next';
import { useToast } from 'primevue/usetoast';
import { useRoute } from 'vue-router';
import { useClubStore } from '@/stores/clubStore';
import FileUploadDialog from '@/components/event/FileUploadDialog.vue';
import eventService from '@/services/eventService';
import clubService from '@/services/clubService';
import EventDialog from '@/components/event/EventDialog.vue';
import EventDetailsDialog from '@/components/event/EventDetailsDialog.vue';

const toast = useToast();
const route = useRoute();
const clubStore = useClubStore();

// 상태 관리
const events = ref([]);
const event = ref({});
const eventDialog = ref(false);
const detailsDialog = ref(false);
const deleteEventDialog = ref(false);
const fileUploadDialog = ref(false);
const loading = ref(false);
const submitted = ref(false);
// localStorage에서 가져온 clubId를 숫자로 변환 시도
const clubId = ref(localStorage.getItem('clubId') || null);

// 필터 상태
const filters = ref({
  title: { value: null, matchMode: 'contains' },
  eventType: { value: null, matchMode: 'equals' },
  startDate: { value: null, matchMode: 'equals' }
});

// 팀 기능 사용 권한 여부
const hasTeamFeature = computed(() => clubStore.hasFeature('team_create'));

// 클럽 멤버 목록
const clubMembers = ref([]);

// 이벤트 목록 가져오기
const fetchEvents = async () => {
  try {
    loading.value = true;
    const data = await eventService.getEvents(clubId.value);
    events.value = data;
  } catch (error) {
    console.error('이벤트 목록 로드 실패:', error);
    
    // 403 오류는 중앙에서 처리하민로 여기서는 기타 오류만 처리
    if (!error.response) {
      toast.add({
        severity: 'error',
        summary: '오류',
        detail: '이벤트 목록을 불러오는 데 실패했습니다.',
        life: 3000
      });
    }
  } finally {
    loading.value = false;
  }
};

// 클럽 멤버 목록 가져오기
const fetchClubMembers = async () => {
  try {
    const response = await clubService.getClubMembers(clubId.value);
    clubMembers.value = response.data.map(member => ({
      id: member.memberId || member.id,  // memberId 또는 id 필드 사용
      name: member.name,
      memberType: member.memberType
    }));
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '클럽 멤버 목록을 가져오는 중 오류가 발생했습니다.',
      life: 3000
    });
  }
};

// 컴포넌트 마운트 시 데이터 로드
// 페이지 진입 시 Google Analytics 페이지뷰 추적
onMounted(async () => {
  const gtag = useGtag();
  gtag.pageview({
    page_title: '이벤트관리',
    page_path: window.location.pathname,
    page_location: window.location.href
  });
  if (!clubId.value) {
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '클럽 정보가 없습니다.',
      life: 3000
    });
    return;
  }
  await Promise.all([
    fetchEvents(),
    fetchClubMembers()
  ]);
});

// 날짜 포맷 함수
const formatDate = (date) => {
  if (!date) return '';
  return dayjs(date).format('YYYY. MM. DD. HH:mm');
};

// 이벤트 유형에 따른 Badge 스타일
const getEventTypeSeverity = (type) => {
  switch (type) {
    case 'regular': return 'success';
    case 'tournament': return 'warning';
    case 'practice': return 'info';
    case 'friendly': return 'primary';
    default: return 'secondary';
  }
};

// 새 이벤트 다이얼로그 열기
const openNewEventDialog = () => {
  event.value = {
    clubId: clubId.value,
    status: '준비',
    eventType: 'regular',
    title: '',
    description: '',
    startDate: null,
    endDate: null,
    location: '',
    maxParticipants: 0,
    teamCount: 1,
    gameCount: 1,
    laneCount: 0,
    participantFee: 0
  };
  submitted.value = false;
  eventDialog.value = true;
};

// 이벤트 수정 다이얼로그 열기
const editEvent = (eventData) => {
  event.value = { ...eventData };
  submitted.value = false;
  eventDialog.value = true;
};

// 이벤트 상세 정보 보기
// 이벤트 상세보기 클릭 시 GA 이벤트 추적
const viewEventDetails = async (eventData) => {
  const gtag = useGtag();
  gtag.event('view_event_details', {
    event_category: '이벤트관리',
    event_label: '이벤트 상세보기',
    value: eventData.id
  });
  try {
    const response = await eventService.getEventById(eventData.id);
    event.value = response;
    detailsDialog.value = true;
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '이벤트 상세 정보를 가져오는데 실패했습니다.',
      life: 3000
    });
  }
};

// 상세 보기에서 수정으로 전환
const editFromDetails = () => {
  detailsDialog.value = false;
  eventDialog.value = true;
};

// 다이얼로그 닫기
const hideDialog = () => {
  eventDialog.value = false;
  detailsDialog.value = false;
  deleteEventDialog.value = false;
  event.value = {};
  submitted.value = false;
};

// 이벤트 삭제 확인
const confirmDeleteEvent = (eventData) => {
  event.value = eventData;
  deleteEventDialog.value = true;
};

// 이벤트 저장
// 이벤트 저장(생성/수정) 시 GA 이벤트 추적
const saveEvent = async (eventData) => {
  const gtag = useGtag();
  try {
    if (eventData.id) {
      gtag.event('edit_event', {
        event_category: '이벤트관리',
        event_label: '이벤트 수정',
        value: eventData.id
      });
      // 이벤트 수정
      const response = await eventService.updateEvent({
        ...eventData,
        clubId: clubId.value
      });
      await fetchEvents(); // 목록 갱신
    } else {
      gtag.event('create_event', {
        event_category: '이벤트관리',
        event_label: '이벤트 생성'
      });
      // 이벤트 생성
      const response = await eventService.createEvent({
        ...eventData,
        clubId: clubId.value
      });
      await fetchEvents(); // 목록 갱신
    }
    toast.add({
      severity: 'success',
      summary: '성공',
      detail: eventData.id ? '이벤트가 수정되었습니다.' : '이벤트가 생성되었습니다.',
      life: 3000
    });
    hideDialog();
  } catch (error) {
    gtag.event('event_save_fail', {
      event_category: '이벤트관리',
      event_label: eventData.id ? '이벤트 수정 실패' : '이벤트 생성 실패'
    });
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: eventData.id ? '이벤트 수정에 실패했습니다.' : '이벤트 생성에 실패했습니다.',
      life: 3000
    });
  }
};

// 이벤트 삭제
// 이벤트 삭제 시 GA 이벤트 추적
const deleteEvent = async () => {
  const gtag = useGtag();
  try {
    await eventService.deleteEvent(clubId.value, event.value.id);
    gtag.event('delete_event', {
      event_category: '이벤트관리',
      event_label: '이벤트 삭제',
      value: event.value.id
    });
    toast.add({
      severity: 'success',
      summary: '성공',
      detail: '이벤트가 삭제되었습니다.',
      life: 3000
    });
    deleteEventDialog.value = false;
    const index = events.value.findIndex(e => e.id === event.value.id);
    if (index > -1) {
      events.value.splice(index, 1);
    }
    event.value = {};
  } catch (error) {
    gtag.event('delete_event_fail', {
      event_category: '이벤트관리',
      event_label: '이벤트 삭제 실패',
      value: event.value.id
    });
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '이벤트 삭제에 실패했습니다.',
      life: 3000
    });
  }
};

// 참가자 제거
const removeParticipant = async (participant) => {
  try {
    await eventService.removeParticipant(event.value.id, participant.id);
    
    toast.add({
      severity: 'success',
      summary: '성공',
      detail: '참가자가 제거되었습니다.',
      life: 3000
    });

    // 참가자 목록 업데이트
    const index = event.value.participants.findIndex(p => p.id === participant.id);
    if (index > -1) {
      event.value.participants.splice(index, 1);
    }
  } catch (error) {
    toast.add({
      severity: 'error',
      summary: '오류',
      detail: '참가자 제거에 실패했습니다.',
      life: 3000
    });
  }
};

// 점수 입력 페이지로 이동
const goToScoreEntry = () => {
  const url = `/club/events/${event.value.id}/scores?clubId=${clubId.value}`;
  window.location.href = url;
};

// 이벤트 캘린더 페이지로 이동
// 캘린더 이동 버튼 클릭 시 GA 이벤트 추적
const navigateToCalendar = () => {
  const gtag = useGtag();
  gtag.event('go_to_calendar', {
    event_category: '이벤트관리',
    event_label: '캘린더 이동'
  });
  const url = `/club/calendar?clubId=${clubId.value}`;
  window.location.href = url;
};

// 파일 업로드 다이얼로그 열기
const openFileUploadDialog = () => {
  fileUploadDialog.value = true;
};

// 파일 업로드로 이벤트 생성 완료 처리
const onEventCreated = async (eventData) => {
  toast.add({
    severity: 'success',
    summary: '성공',
    detail: '파일에서 이벤트가 생성되었습니다.',
    life: 3000
  });
  await fetchEvents();
};
</script>

<style scoped>
.event-management-container {
  padding: 2rem;
}

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

.header h2 {
  margin: 0;
}

.header-buttons {
  display: flex;
  gap: 0.5rem;
}

.confirmation-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.flex {
  display: flex;
}

.gap-2 {
  gap: 0.5rem;
}

:deep(.p-datatable) {
  margin-top: 1rem;
}

:deep(.p-column-filter) {
  width: 100%;
}

/* 테이블 헤더(정렬/필터 버튼) 한 줄 정렬 및 공간 최소화 */
:deep(.p-column-header-content) {
  white-space: nowrap;
  align-items: center;
}
:deep(.p-sortable-column-icon),
:deep(.p-column-filter-menu-button) {
  margin-left: 2px !important;
  margin-right: 2px !important;
  padding: 0 !important;
  font-size: 13px !important;
  vertical-align: middle;
}
:deep(.p-column-title) {
  vertical-align: middle;
}

</style>
