<template>
  <div class="activity-log-container">
    <div class="header">
      <h2>활동 로그</h2>
    </div>
    
    <DataTable 
      :value="logs" 
      :loading="loading"
      :paginator="true" 
      :rows="rowsPerPage"
      :rowsPerPageOptions="[10, 20, 50, 100]"
      paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
      currentPageReportTemplate="{first}에서 {last}까지 {totalRecords} 중"
      responsiveLayout="scroll"
      stripedRows
      :sortField="'createdAt'"
      :sortOrder="-1"
      :totalRecords="totalRecords"
      :lazy="true"
      @page="onPageChange"
    >
      <Column field="id" header="ID" sortable style="width: 5%"></Column>
      <Column field="user.name" header="사용자" sortable style="width: 15%">
        <template #body="slotProps">
          {{ slotProps.data.user ? slotProps.data.user.name : '-' }}
        </template>
      </Column>
      <Column field="type" header="활동 유형" sortable style="width: 15%">
        <template #body="slotProps">
          <Badge :value="getActionTypeName(slotProps.data.type)" :severity="getActionTypeSeverity(slotProps.data.type)" />
        </template>
      </Column>
      <Column field="description" header="설명" style="width: 50%"></Column>
      <Column field="createdAt" header="시간" sortable style="width: 15%">
        <template #body="slotProps">
          {{ formatDate(slotProps.data.createdAt) }}
        </template>
      </Column>
    </DataTable>
    
    <Toast />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useGtag } from 'vue-gtag-next';
import { useToast } from 'primevue/usetoast';
import adminService from '@/services/adminService';

const toast = useToast();

// 상태 변수
const logs = ref([]);
const loading = ref(false);
const totalRecords = ref(0);
const currentPage = ref(1);
const rowsPerPage = ref(20);

// 페이지 로드 시 활동 로그 목록 가져오기
// 페이지 진입 시 Google Analytics 페이지뷰 추적
onMounted(async () => {
  const gtag = useGtag();
  gtag.pageview({
    page_title: '활동로그관리',
    page_path: window.location.pathname,
    page_location: window.location.href
  });
  await fetchLogs();
});

// 활동 로그 목록 가져오기
const fetchLogs = async () => {
  loading.value = true;
  try {
    const response = await adminService.getActivityLogs(currentPage.value, rowsPerPage.value);
    logs.value = response.data.logs || [];
    totalRecords.value = response.data.totalItems || 0;
  } catch (error) {
    console.error('활동 로그 목록을 가져오는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '활동 로그 목록을 가져오는 중 오류가 발생했습니다.', life: 3000 });
  } finally {
    loading.value = false;
  }
};

// 페이지 변경 이벤트 핸들러
const onPageChange = (event) => {
  // PrimeVue DataTable은 0부터 시작하는 페이지 인덱스를 사용하므로 1을 더해줍니다
  currentPage.value = event.page + 1;
  rowsPerPage.value = event.rows;
  fetchLogs();
};

// 활동 유형 이름 가져오기
const getActionTypeName = (actionType) => {
  switch (actionType) {
    case 'LOGIN':
      return '로그인';
    case 'LOGOUT':
      return '로그아웃';
    case 'CREATE_USER':
      return '사용자 생성';
    case 'UPDATE_USER':
      return '사용자 수정';
    case 'DELETE_USER':
      return '사용자 삭제';
    case 'CREATE_CLUB':
      return '클럽 생성';
    case 'UPDATE_CLUB':
      return '클럽 수정';
    case 'DELETE_CLUB':
      return '클럽 삭제';
    case 'ADD_CLUB_MEMBER':
      return '클럽 회원 추가';
    case 'UPDATE_CLUB_MEMBER':
      return '클럽 회원 수정';
    case 'DELETE_CLUB_MEMBER':
      return '클럽 회원 삭제';
    case 'CREATE_EVENT':
      return '이벤트 생성';
    case 'UPDATE_EVENT':
      return '이벤트 수정';
    case 'DELETE_EVENT':
      return '이벤트 삭제';
    case 'ADD_EVENT_PARTICIPANT':
      return '이벤트 참가자 추가';
    case 'UPDATE_EVENT_PARTICIPANT':
      return '이벤트 참가자 수정';
    case 'DELETE_EVENT_PARTICIPANT':
      return '이벤트 참가자 삭제';
    case 'VIEW_ACTIVITY_LOGS':
      return '활동 로그 조회';
    default:
      return actionType;
  }
};

// 활동 유형 심각도 가져오기
const getActionTypeSeverity = (actionType) => {
  if (actionType.includes('DELETE')) {
    return 'danger';
  } else if (actionType.includes('CREATE')) {
    return 'success';
  } else if (actionType.includes('UPDATE')) {
    return 'warning';
  } else if (actionType === 'LOGIN') {
    return 'info';
  } else if (actionType === 'LOGOUT') {
    return 'secondary';
  } else if (actionType.includes('VIEW')) {
    return 'info';
  } else {
    return 'info';
  }
};

// 날짜 포맷팅
const formatDate = (date) => {
  return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '-';
};
</script>

<style scoped>
.activity-log-container {
  padding: 1rem;
}

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

/* 테이블 스타일 */
:deep(.p-datatable-wrapper) {
  overflow-x: auto;
}

@media (max-width: 600px) {
  .activity-log-container, .header, .dashboard-card, .subscription-management-container, .user-management-container, .club-management {
    padding: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }
  .dashboard-card {
    padding: 0.7rem !important;
    font-size: 0.95rem;
  }
  .header h2, .dashboard-card h3 {
    font-size: 1.1rem !important;
  }
  .p-datatable-wrapper {
    overflow-x: auto !important;
  }
  /* Dialog 팝업 중앙 정렬 개선 */
  :deep(.p-dialog) {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: 2.5rem !important;
  }
  :deep(.p-dialog .p-dialog-content) {
    margin-top: 0 !important;
  }
}
</style>
