<template>
  <div class="notification-system">
    <Button 
      icon="pi pi-bell" 
      class="p-button-rounded p-button-text notification-button"
      @click="toggleNotificationPanel"
      :badge="unreadCount > 0 ? unreadCount.toString() : undefined"
      badge-class="p-badge-danger"
    />
    
    <Dialog 
      v-model:visible="notificationPanelVisible" 
      header="알림" 
      :style="{ width: '400px' }" 
      :modal="false"
      position="right"
      :draggable="false"
      :closable="true"
      :closeOnEscape="true"
    >
      <div class="notification-panel">
        <div class="notification-actions">
          <Button 
            label="모두 읽음으로 표시" 
            class="p-button-text p-button-sm" 
            @click="markAllAsRead"
            :disabled="notifications.length === 0 || unreadCount === 0"
          />
          <Button 
            icon="pi pi-trash" 
            class="p-button-text p-button-sm p-button-danger" 
            @click="clearAllNotifications"
            :disabled="notifications.length === 0"
          />
        </div>
        
        <div v-if="notifications.length === 0" class="empty-state">
          <i class="pi pi-bell-slash empty-icon"></i>
          <p>알림이 없습니다</p>
        </div>
        
        <div v-else class="notification-list">
          <div 
            v-for="notification in notifications" 
            :key="notification.id" 
            class="notification-item"
            :class="{ 'unread': !notification.read }"
            @click="handleNotificationClick(notification)"
          >
            <div class="notification-icon">
              <i :class="getNotificationIcon(notification.type)"></i>
            </div>
            <div class="notification-content">
              <div class="notification-title">{{ notification.title }}</div>
              <div class="notification-message">{{ notification.message }}</div>
              <div class="notification-time">{{ formatTime(notification.createdAt) }}</div>
            </div>
            <div class="notification-actions">
              <Button 
                icon="pi pi-times" 
                class="p-button-rounded p-button-text p-button-sm" 
                @click.stop="removeNotification(notification.id)"
              />
            </div>
          </div>
        </div>
      </div>
    </Dialog>
    
    <Toast />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useToast } from 'primevue/usetoast';
import axios from 'axios';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import 'dayjs/locale/ko';

dayjs.extend(relativeTime);
dayjs.locale('ko');

const toast = useToast();
const API_URL = 'http://localhost:3030/api';

// 상태 변수
const notifications = ref([]);
const notificationPanelVisible = ref(false);
let notificationPolling = null;

// 읽지 않은 알림 수
const unreadCount = computed(() => {
  return notifications.value.filter(notification => !notification.read).length;
});

// 컴포넌트 마운트 시 알림 가져오기 및 폴링 시작
onMounted(() => {
  fetchNotifications();
  startNotificationPolling();
});

// 컴포넌트 언마운트 시 폴링 중지
onUnmounted(() => {
  stopNotificationPolling();
});

// 알림 패널 토글
const toggleNotificationPanel = () => {
  notificationPanelVisible.value = !notificationPanelVisible.value;
};

// 알림 가져오기
const fetchNotifications = async () => {
  try {
    const token = localStorage.getItem('token');
    if (!token) return;
    
    const response = await axios.get(`${API_URL}/notifications`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    
    notifications.value = response.data;
  } catch (error) {
    console.error('알림을 가져오는 중 오류 발생:', error);
  }
};

// 알림 폴링 시작 (30초마다)
const startNotificationPolling = () => {
  notificationPolling = setInterval(() => {
    fetchNotifications();
  }, 30000);
};

// 알림 폴링 중지
const stopNotificationPolling = () => {
  if (notificationPolling) {
    clearInterval(notificationPolling);
    notificationPolling = null;
  }
};

// 알림 클릭 처리
const handleNotificationClick = async (notification) => {
  // 읽음으로 표시
  if (!notification.read) {
    await markAsRead(notification.id);
  }
  
  // 알림 유형에 따른 처리
  switch (notification.type) {
    case 'club_invitation':
      // 클럽 초대 페이지로 이동
      window.location.href = `/clubs/invitations`;
      break;
    case 'meeting_reminder':
      // 모임 상세 페이지로 이동
      window.location.href = `/meetings/${notification.data.meetingId}`;
      break;
    case 'score_update':
      // 점수 페이지로 이동
      window.location.href = `/scores/${notification.data.scoreId}`;
      break;
    case 'subscription_reminder':
      // 구독 페이지로 이동
      window.location.href = `/subscriptions`;
      break;
    default:
      // 기본적으로 알림 패널 닫기
      notificationPanelVisible.value = false;
      break;
  }
};

// 알림 읽음으로 표시
const markAsRead = async (notificationId) => {
  try {
    const token = localStorage.getItem('token');
    await axios.put(`${API_URL}/notifications/${notificationId}/read`, {}, {
      headers: { Authorization: `Bearer ${token}` }
    });
    
    // 로컬 상태 업데이트
    const index = notifications.value.findIndex(n => n.id === notificationId);
    if (index !== -1) {
      notifications.value[index].read = true;
    }
  } catch (error) {
    console.error('알림을 읽음으로 표시하는 중 오류 발생:', error);
  }
};

// 모든 알림 읽음으로 표시
const markAllAsRead = async () => {
  try {
    const token = localStorage.getItem('token');
    await axios.put(`${API_URL}/notifications/read-all`, {}, {
      headers: { Authorization: `Bearer ${token}` }
    });
    
    // 로컬 상태 업데이트
    notifications.value = notifications.value.map(notification => ({
      ...notification,
      read: true
    }));
    
    toast.add({ severity: 'success', summary: '성공', detail: '모든 알림이 읽음으로 표시되었습니다.', life: 3000 });
  } catch (error) {
    console.error('모든 알림을 읽음으로 표시하는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '알림 상태를 업데이트하는 중 오류가 발생했습니다.', life: 3000 });
  }
};

// 알림 삭제
const removeNotification = async (notificationId) => {
  try {
    const token = localStorage.getItem('token');
    await axios.delete(`${API_URL}/notifications/${notificationId}`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    
    // 로컬 상태 업데이트
    notifications.value = notifications.value.filter(n => n.id !== notificationId);
    
    toast.add({ severity: 'success', summary: '성공', detail: '알림이 삭제되었습니다.', life: 3000 });
  } catch (error) {
    console.error('알림을 삭제하는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '알림을 삭제하는 중 오류가 발생했습니다.', life: 3000 });
  }
};

// 모든 알림 삭제
const clearAllNotifications = async () => {
  try {
    const token = localStorage.getItem('token');
    await axios.delete(`${API_URL}/notifications/clear-all`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    
    // 로컬 상태 업데이트
    notifications.value = [];
    
    toast.add({ severity: 'success', summary: '성공', detail: '모든 알림이 삭제되었습니다.', life: 3000 });
  } catch (error) {
    console.error('모든 알림을 삭제하는 중 오류 발생:', error);
    toast.add({ severity: 'error', summary: '오류', detail: '알림을 삭제하는 중 오류가 발생했습니다.', life: 3000 });
  }
};

// 알림 아이콘 가져오기
const getNotificationIcon = (type) => {
  switch (type) {
    case 'club_invitation':
      return 'pi pi-users';
    case 'meeting_reminder':
      return 'pi pi-calendar';
    case 'score_update':
      return 'pi pi-chart-bar';
    case 'subscription_reminder':
      return 'pi pi-credit-card';
    case 'system':
      return 'pi pi-info-circle';
    default:
      return 'pi pi-bell';
  }
};

// 시간 포맷팅
const formatTime = (timestamp) => {
  return dayjs(timestamp).fromNow();
};
</script>

<style scoped>
.notification-button {
  position: relative;
}

.notification-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.notification-actions {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0f0f0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: #9e9e9e;
}

.empty-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.notification-list {
  overflow-y: auto;
  max-height: 400px;
}

.notification-item {
  display: flex;
  padding: 0.75rem;
  border-radius: 4px;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.notification-item:hover {
  background-color: #f5f5f5;
}

.notification-item.unread {
  background-color: #e3f2fd;
}

.notification-item.unread:hover {
  background-color: #bbdefb;
}

.notification-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #f0f0f0;
  margin-right: 0.75rem;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.notification-message {
  font-size: 0.9rem;
  color: #616161;
  margin-bottom: 0.25rem;
}

.notification-time {
  font-size: 0.8rem;
  color: #9e9e9e;
}
</style>
