<template>
  <div class="user-management-container">
    <div class="header">
      <h2>사용자 관리</h2>
      <Button label="사용자 추가" icon="pi pi-plus" @click="openNewUserDialog" />
    </div>
    
    <DataTable 
      :value="users" 
      :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"
      :sortField="'id'"
      :sortOrder="1"
    >
      <Column field="id" header="ID" sortable style="width: 5%"></Column>
      <Column field="name" header="이름" sortable style="width: 15%">
        <template #filter="{ filterModel, filterCallback }">
          <InputText v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="이름으로 검색" />
        </template>
      </Column>
      <Column field="email" header="이메일" sortable style="width: 20%">
        <template #filter="{ filterModel, filterCallback }">
          <InputText v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="이메일로 검색" />
        </template>
      </Column>
      <Column field="role" header="역할" sortable style="width: 10%">
        <template #body="slotProps">
          <Badge :value="getRoleName(slotProps.data.role)" :severity="getRoleSeverity(slotProps.data.role)" />
        </template>
        <template #filter="{ filterModel, filterCallback }">
          <Select v-model="filterModel.value" @change="filterCallback()" :options="ROLE_OPTIONS" optionLabel="name" optionValue="value" placeholder="역할 선택" class="p-column-filter" />
        </template>
      </Column>
      <Column field="status" header="상태" sortable style="width: 10%">
        <template #body="slotProps">
          <Badge :value="getStatusLabel(slotProps.data.status)" :severity="getStatusSeverity(slotProps.data.status)" />
        </template>
        <template #filter="{ filterModel, filterCallback }">
          <Select v-model="filterModel.value" @change="filterCallback()" :options="STATUS_OPTIONS" optionLabel="name" optionValue="value" placeholder="상태 선택" class="p-column-filter" />
        </template>
      </Column>
      <Column field="createdAt" header="가입일" sortable style="width: 12%">
        <template #body="slotProps">
          {{ formatDate(slotProps.data.createdAt) }}
        </template>
      </Column>
      <Column field="lastLoginAt" header="최근 로그인" sortable style="width: 12%">
        <template #body="slotProps">
          {{ slotProps.data.lastLoginAt ? formatDate(slotProps.data.lastLoginAt) : '-' }}
        </template>
      </Column>
      <Column header="작업" style="width: 8%">
        <template #body="slotProps">
          <div class="action-buttons">
            <Button icon="pi pi-pencil" class="p-button-rounded p-button-text p-button-sm" @click="editUser(slotProps.data)" />
            <Button icon="pi pi-trash" class="p-button-rounded p-button-text p-button-danger p-button-sm" @click="confirmDeleteUser(slotProps.data)" />
          </div>
        </template>
      </Column>
    </DataTable>
    
    <!-- 사용자 추가/수정 다이얼로그 -->
    <Dialog v-model:visible="userDialog" :header="dialogTitle" :style="{ width: '450px' }" :modal="true" class="p-fluid">
      <div class="field mb-3">
        <label for="name">이름</label>
        <InputText id="name" v-model="user.name" :class="{'p-invalid': submitted && !user.name}" required autofocus class="w-full"/>
        <small class="p-error" v-if="submitted && !user.name">이름은 필수입니다.</small>
      </div>
      
      <div class="field mb-3">
        <label for="email">이메일</label>
        <InputText id="email" v-model="user.email" :class="{'p-invalid': submitted && !user.email}" required class="w-full"/>
        <small class="p-error" v-if="submitted && !user.email">이메일은 필수입니다.</small>
      </div>
      
      <div class="field mb-3">
        <label for="password">비밀번호</label>
        <Password id="password" v-model="user.password" :class="{'p-invalid': submitted && isNewUser && !user.password}" toggleMask :feedback="isNewUser" class="w-full" />
        <small class="p-error" v-if="submitted && isNewUser && !user.password">비밀번호는 필수입니다.</small>
        <small v-if="!isNewUser">비밀번호를 변경하지 않으려면 비워두세요.</small>
      </div>
      
      <div class="field mb-3">
        <label for="role">역할</label>
        <Select id="role" v-model="user.role" :options="ROLE_OPTIONS" optionLabel="name" optionValue="value" placeholder="역할 선택" required class="w-full" />
        <small class="p-error" v-if="submitted && !user.role">역할은 필수입니다.</small>
      </div>
      
      <div class="field mb-3">
        <label for="status">상태</label>
        <Select id="status" v-model="user.status" :options="STATUS_OPTIONS" optionLabel="name" optionValue="value" placeholder="상태 선택" required class="w-full" />
        <small class="p-error" v-if="submitted && !user.status">상태는 필수입니다.</small>
      </div>
      
      <template #footer>
        <Button label="취소" icon="pi pi-times" class="p-button-text" @click="hideDialog" />
        <Button label="저장" icon="pi pi-check" class="p-button-text" @click="saveUser" />
      </template>
    </Dialog>
    
    <!-- 삭제 확인 다이얼로그 -->
    <Dialog v-model:visible="deleteUserDialog" :style="{ width: '450px' }" header="확인" :modal="true">
      <div class="confirmation-content">
        <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
        <span v-if="user">{{ user.name }} 사용자를 삭제하시겠습니까?</span>
      </div>
      <template #footer>
        <Button label="아니오" icon="pi pi-times" class="p-button-text" @click="deleteUserDialog = false" />
        <Button label="예" icon="pi pi-check" class="p-button-text" @click="deleteUser" />
      </template>
    </Dialog>
    
    <Toast />
  </div>
</template>

<script setup>
import { getStatusLabel, getRoleName, getRoleSeverity, getStatusSeverity, STATUS_OPTIONS, ROLE_OPTIONS } from '@/utils/enumMappings';
import { ref, onMounted, reactive, computed } from 'vue';
import { useGtag } from 'vue-gtag-next';
import { useToast } from 'primevue/usetoast';
import adminService from '@/services/adminService';

const toast = useToast();

// 상태 변수
const users = ref([]);
const user = ref({});
const userDialog = ref(false);
const deleteUserDialog = ref(false);
const submitted = ref(false);
const loading = ref(false);
const isNewUser = ref(false);

// 필터 설정
const filters = ref({
  name: { value: null, matchMode: 'contains' },
  email: { value: null, matchMode: 'contains' },
  role: { value: null, matchMode: 'equals' },
  status: { value: null, matchMode: 'equals' }
});

// 다이얼로그 제목
const dialogTitle = computed(() => {
  return isNewUser.value ? '사용자 추가' : '사용자 수정';
});

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

// 사용자 목록 가져오기
const fetchUsers = async () => {
  loading.value = true;
  try {
    const response = await adminService.getAllUsers();
    users.value = response.data;
  } catch (error) {
    console.error('사용자 목록을 가져오는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '사용자 목록을 가져오는 중 오류가 발생했습니다.', life: 3000 });
  } finally {
    loading.value = false;
  }
};

// 새 사용자 다이얼로그 열기
const openNewUserDialog = () => {
  user.value = {
    name: '',
    email: '',
    password: '',
    role: 'user',
    status: 'active'
  };
  submitted.value = false;
  isNewUser.value = true;
  userDialog.value = true;
};

// 사용자 수정 다이얼로그 열기
const editUser = async (userData) => {
  try {
    const response = await adminService.getUserById(userData.id);
    user.value = { ...response.data, password: '' };
    isNewUser.value = false;
    submitted.value = false;
    userDialog.value = true;
  } catch (error) {
    console.error('사용자 정보를 가져오는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '사용자 정보를 가져오는 중 오류가 발생했습니다.', life: 3000 });
  }
};

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

// 사용자 저장 (추가 또는 수정)
const saveUser = async () => {
  submitted.value = true;

  if (!user.value.name || !user.value.email || !user.value.role || !user.value.status || (isNewUser.value && !user.value.password)) {
    toast.add({ severity: 'warn', summary: '입력 오류', detail: '모든 필수 항목을 입력해주세요.', life: 3000 });
    return;
  }

  try {
    if (isNewUser.value) {
      await adminService.createUser(user.value);
      toast.add({ severity: 'success', summary: '성공', detail: '사용자가 생성되었습니다.', life: 3000 });
    } else {
      const userData = { ...user.value };
      if (!userData.password) {
        delete userData.password;
      }
      await adminService.updateUser(userData.id, userData);
      toast.add({ severity: 'success', summary: '성공', detail: '사용자 정보가 수정되었습니다.', life: 3000 });
    }

    userDialog.value = false;
    await fetchUsers();
  } catch (error) {
    console.error('사용자 저장 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '사용자 저장 중 오류가 발생했습니다.', life: 3000 });
  }
};

// 사용자 삭제 확인 다이얼로그 열기
const confirmDeleteUser = (userData) => {
  user.value = userData;
  deleteUserDialog.value = true;
};

// 사용자 삭제
const deleteUser = async () => {
  try {
    await adminService.deleteUser(user.value.id);
    deleteUserDialog.value = false;
    toast.add({ severity: 'success', summary: '성공', detail: '사용자가 삭제되었습니다.', life: 3000 });
    await fetchUsers();
  } catch (error) {
    console.error('사용자 삭제 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '사용자 삭제 중 오류가 발생했습니다.', life: 3000 });
  }
};

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

<style scoped>
.user-management-container {
  padding: 1rem;
}

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

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

.confirmation-content {
  display: flex;
  align-items: center;
}

.mr-3 {
  margin-right: 0.75rem;
}

/* Password 컴포넌트 스타일 수정 */
:deep(.p-password) {
  width: 100%;
}

:deep(.p-password-input) {
  width: 100%;
}

@media (max-width: 600px) {
  .user-management-container, .header, .dashboard-card, .activity-log-container, .subscription-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>
