// Firebase 9 버전 이상
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

// Firebase 구성 정보
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};

// Firebase 초기화
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// firebase-messaging-sw.js
importScripts('https://www.gstatic.com/firebasejs/9.6.10/firebase-app-compat.js');
importScripts('https://www.gstatic.com/firebasejs/9.6.10/firebase-messaging-compat.js');

firebase.initializeApp({
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
});

const messaging = firebase.messaging();

// 백그라운드 메시지 처리
messaging.onBackgroundMessage((payload) => {
  console.log('백그라운드 메시지 수신:', payload);
  
  const notificationTitle = payload.notification.title;
  const notificationOptions = {
    body: payload.notification.body,
    icon: '/firebase-logo.png'
  };

  self.registration.showNotification(notificationTitle, notificationOptions);
});

// 알림 권한 요청 및 토큰 가져오기
async function requestPermissionAndGetToken() {
  try {
    // 알림 권한 요청
    const permission = await Notification.requestPermission();
    
    if (permission === 'granted') {
      // VAPID 키는 Firebase 콘솔의 "웹 구성" 섹션에서 찾을 수 있습니다
      const token = await getToken(messaging, {
        vapidKey: 'your-vapid-key'
      });
      
      console.log('FCM 토큰:', token);
      
      // 토큰을 서버에 등록
      await registerTokenWithServer(token);
      
      return token;
    } else {
      console.log('알림 권한이 거부되었습니다.');
      return null;
    }
  } catch (error) {
    console.error('토큰 얻기 실패:', error);
    return null;
  }
}

// 토큰을 서버에 등록하는 함수
async function registerTokenWithServer(token) {
  try {
    const response = await fetch('/api/register-fcm-token', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ token }),
    });
    
    const data = await response.json();
    console.log('토큰 등록 성공:', data);
  } catch (error) {
    console.error('토큰 등록 실패:', error);
  }
}

// 포그라운드 메시지 처리
onMessage(messaging, (payload) => {
  console.log('포그라운드 메시지 수신:', payload);
  
  // 사용자 인터페이스에 알림 표시
  const title = payload.notification.title;
  const options = {
    body: payload.notification.body,
    icon: '/path/to/icon.png',
  };
  
  // 브라우저 알림 표시
  if ('Notification' in window && Notification.permission === 'granted') {
    new Notification(title, options);
  }
  
  // 또는 커스텀 UI 요소로 알림 표시
  showCustomNotification(title, payload.notification.body);
});

// 커스텀 알림 UI 표시 함수 예시
function showCustomNotification(title, body) {
  // 예: 페이지에 토스트 알림 표시
  const toast = document.createElement('div');
  toast.className = 'notification-toast';
  toast.innerHTML = `
    
${title}
    
${body}
  `;
  
  document.body.appendChild(toast);
  
  // 3초 후 삭제
  setTimeout(() => {
    toast.classList.add('fade-out');
    setTimeout(() => {
      document.body.removeChild(toast);
    }, 300);
  }, 3000);
}

// 데이터 메시지 처리 예시
onMessage(messaging, (payload) => {
  // 데이터 메시지인 경우
  if (payload.data) {
    console.log('데이터 메시지 수신:', payload.data);
    
    // 데이터에 따른 처리
    if (payload.data.type === 'new_message') {
      // 새 메시지 처리
      updateChatUI(payload.data);
    } else if (payload.data.type === 'update_score') {
      // 점수 업데이트 처리
      updateScoreUI(payload.data);
    }
  }
});

// 채팅 UI 업데이트 함수 예시
function updateChatUI(data) {
  const chatContainer = document.getElementById('chat-container');
  const messageElement = document.createElement('div');
  messageElement.className = 'chat-message';
  messageElement.textContent = `${data.sender}: ${data.message}`;
  chatContainer.appendChild(messageElement);
  
  // 스크롤을 최신 메시지로 이동
  chatContainer.scrollTop = chatContainer.scrollHeight;
}

// app.js
import { initializeApp } from 'firebase/app';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';

// Firebase 설정
const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-project.firebaseapp.com",
  projectId: "your-project",
  storageBucket: "your-project.appspot.com",
  messagingSenderId: "your-sender-id",
  appId: "your-app-id"
};

// Firebase 초기화
const app = initializeApp(firebaseConfig);
const messaging = getMessaging(app);

// 앱 초기화 시 호출
async function initializeFirebaseMessaging() {
  try {
    // 알림 권한 확인
    if (Notification.permission === 'default') {
      await Notification.requestPermission();
    }
    
    if (Notification.permission === 'granted') {
      // FCM 토큰 얻기
      const token = await getToken(messaging, {
        vapidKey: 'your-vapid-key'
      });
      
      console.log('FCM 토큰:', token);
      
      // 토큰을 서버에 등록
      await fetch('/api/register-token', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ token }),
      });
      
      // 포그라운드 메시지 수신 리스너 설정
      onMessage(messaging, handleForegroundMessage);
    }
  } catch (error) {
    console.error('FCM 초기화 오류:', error);
  }
}

// 포그라운드 메시지 처리 함수
function handleForegroundMessage(payload) {
  console.log('메시지 수신:', payload);
  
  // 알림이 있는 경우
  if (payload.notification) {
    const { title, body } = payload.notification;
    
    // 커스텀 UI로 알림 표시
    showNotification(title, body);
  }
  
  // 데이터가 있는 경우
  if (payload.data) {
    // 데이터 유형에 따른 처리
    handleDataMessage(payload.data);
  }
}

// 데이터 메시지 처리 함수
function handleDataMessage(data) {
  switch (data.type) {
    case 'new_message':
      updateChatUI(data);
      break;
    case 'update_profile':
      refreshUserProfile();
      break;
    case 'refresh_data':
      reloadPageData();
      break;
    default:
      console.log('알 수 없는 데이터 유형:', data.type);
  }
}

// 화면에 알림 표시 함수
function showNotification(title, body) {
  // 알림 요소 생성
  const notificationEl = document.createElement('div');
  notificationEl.className = 'notification';
  notificationEl.innerHTML = `
    

      
${title}
      ×
    
    

      
${body}
    
  `;
  
  // 닫기 버튼 이벤트 리스너
  const closeBtn = notificationEl.querySelector('.close-btn');
  closeBtn.addEventListener('click', () => {
    notificationEl.classList.add('closing');
    setTimeout(() => {
      document.body.removeChild(notificationEl);
    }, 300);
  });
  
  // 알림 추가
  document.body.appendChild(notificationEl);
  
  // 5초 후 자동 제거
  setTimeout(() => {
    if (document.body.contains(notificationEl)) {
      notificationEl.classList.add('closing');
      setTimeout(() => {
        if (document.body.contains(notificationEl)) {
          document.body.removeChild(notificationEl);
        }
      }, 300);
    }
  }, 5000);
}

// 앱 초기화 시 FCM 설정
document.addEventListener('DOMContentLoaded', initializeFirebaseMessaging);