// 옵저버 생성
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      // 요소가 뷰포트에 진입했을 때
      console.log('보인다:', entry.target);
    }
  });
}, {
  root: null,          // 기본값: 뷰포트
  rootMargin: '0px',   // 뷰포트 마진 (CSS margin 형식)
  threshold: 0         // 0~1 사이, 또는 배열
});

// 관찰 대상 등록
observer.observe(document.querySelector('.target'));

// 뷰포트 진입 200px 전에 미리 감지 — 이미지 프리로딩에 유용
const observer = new IntersectionObserver(callback, {
  rootMargin: '200px 0px',
  threshold: 0
});

<img data-src="heavy-image.jpg" class="lazy" alt="설명">

const lazyObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;  // 실제 이미지 로드
      img.classList.remove('lazy');
      observer.unobserve(img);    // 로드 후 관찰 해제
    }
  });
}, {
  rootMargin: '100px 0px'  // 100px 전에 미리 로드 시작
});

// 모든 lazy 이미지 등록
document.querySelectorAll('img.lazy').forEach((img) => {
  lazyObserver.observe(img);
});

// 리스트 마지막에 센티널(감시용) 요소 배치
const sentinel = document.querySelector('.scroll-sentinel');

const scrollObserver = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    loadMoreItems();  // 다음 페이지 데이터 로드
  }
});

scrollObserver.observe(sentinel);

// worker.js — 별도 파일
self.addEventListener('message', (e) => {
  const { numbers } = e.data;

  // 무거운 연산 (예: 대량 데이터 정렬)
  const sorted = numbers.sort((a, b) => a - b);

  // 결과를 메인 스레드로 전달
  self.postMessage({ sorted });
});

// main.js — 메인 스레드
const worker = new Worker('worker.js');

// 워커에 데이터 전달
worker.postMessage({
  numbers: [5, 3, 8, 1, 9, 2, 7, 4, 6]
});

// 워커로부터 결과 수신
worker.addEventListener('message', (e) => {
  console.log('정렬 완료:', e.data.sorted);
});

// 에러 처리
worker.addEventListener('error', (e) => {
  console.error('워커 에러:', e.message);
});

// 더 이상 필요 없으면 종료
// worker.terminate();

// Blob URL로 인라인 워커 생성 (별도 파일 없이)
const workerCode = `
  self.onmessage = (e) => {
    const result = e.data * 2;
    self.postMessage(result);
  };
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));

// shared-worker.js
const connections = [];

self.addEventListener('connect', (e) => {
  const port = e.ports[0];
  connections.push(port);

  port.addEventListener('message', (event) => {
    // 모든 연결된 탭에 메시지 브로드캐스트
    connections.forEach((conn) => {
      conn.postMessage(`브로드캐스트: ${event.data}`);
    });
  });

  port.start();
});

// 각 탭에서
const shared = new SharedWorker('shared-worker.js');
shared.port.start();
shared.port.postMessage('안녕하세요');
shared.port.onmessage = (e) => console.log(e.data);

// main.js — 등록
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then((reg) => console.log('SW 등록 성공:', reg.scope))
    .catch((err) => console.error('SW 등록 실패:', err));
}

// sw.js — 설치 단계에서 캐시 준비
const CACHE_NAME = 'v1';
const PRECACHE_URLS = [
  '/',
  '/styles/main.css',
  '/scripts/app.js',
  '/offline.html'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(PRECACHE_URLS))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((cached) => cached || fetch(event.request))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .then((response) => {
        // 응답을 캐시에도 저장
        const clone = response.clone();
        caches.open(CACHE_NAME).then((cache) => cache.put(event.request, clone));
        return response;
      })
      .catch(() => caches.match(event.request))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.open(CACHE_NAME).then((cache) =>
      cache.match(event.request).then((cached) => {
        // 백그라운드에서 캐시 갱신
        const fetchPromise = fetch(event.request).then((response) => {
          cache.put(event.request, response.clone());
          return response;
        });
        // 캐시가 있으면 즉시 반환, 없으면 네트워크 대기
        return cached || fetchPromise;
      })
    )
  );
});

self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then((keys) =>
      Promise.all(
        keys
          .filter((key) => key !== CACHE_NAME)  // 현재 버전이 아닌 캐시 삭제
          .map((key) => caches.delete(key))
      )
    )
  );
});

// 한 번 위치 가져오기
navigator.geolocation.getCurrentPosition(
  (position) => {
    console.log('위도:', position.coords.latitude);
    console.log('경도:', position.coords.longitude);
    console.log('정확도:', position.coords.accuracy, '미터');
  },
  (error) => {
    // 에러 처리
    switch (error.code) {
      case error.PERMISSION_DENIED:
        console.log('사용자가 위치 접근을 거부했습니다');
        break;
      case error.POSITION_UNAVAILABLE:
        console.log('위치 정보를 사용할 수 없습니다');
        break;
      case error.TIMEOUT:
        console.log('위치 요청이 시간 초과되었습니다');
        break;
    }
  },
  {
    enableHighAccuracy: true,  // GPS 우선 (배터리 소모 증가)
    timeout: 10000,            // 10초 제한
    maximumAge: 0              // 캐시된 위치 사용 안 함
  }
);

// 위치가 변할 때마다 콜백 호출
const watchId = navigator.geolocation.watchPosition(
  (position) => {
    updateMap(position.coords.latitude, position.coords.longitude);
  },
  handleError,
  { enableHighAccuracy: true }
);

// 추적 중단
navigator.geolocation.clearWatch(watchId);

// localStorage 기본 사용
localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');  // 'dark'
localStorage.removeItem('theme');

// 객체를 저장하려면 직렬화 필요
localStorage.setItem('user', JSON.stringify({ name: '홍길동' }));
const user = JSON.parse(localStorage.getItem('user'));

// 1. 권한 요청
Notification.requestPermission().then((permission) => {
  if (permission === 'granted') {
    // 2. 알림 생성
    const notification = new Notification('새 메시지', {
      body: '홍길동님이 메시지를 보냈습니다.',
      icon: '/icons/message.png',
      tag: 'message-1'  // 같은 tag의 알림은 하나만 표시
    });

    // 3. 알림 클릭 이벤트
    notification.onclick = () => {
      window.focus();
      notification.close();
    };
  }
});

// Service Worker에서 push 이벤트 수신
self.addEventListener('push', (event) => {
  const data = event.data.json();

  event.waitUntil(
    self.registration.showNotification(data.title, {
      body: data.body,
      icon: data.icon,
      data: { url: data.url }  // 클릭 시 이동할 URL
    })
  );
});

// 알림 클릭 처리
self.addEventListener('notificationclick', (event) => {
  event.notification.close();
  event.waitUntil(
    clients.openWindow(event.notification.data.url)
  );
});

// LCP (Largest Contentful Paint) 측정
const lcpObserver = new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const lastEntry = entries[entries.length - 1];
  console.log('LCP:', lastEntry.startTime, 'ms');
});

lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true });

// Long Task 감지 — 50ms 이상 걸리는 작업
const longTaskObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.warn('Long Task 감지:', entry.duration, 'ms');
    // 모니터링 서비스로 전송
  });
});

longTaskObserver.observe({ type: 'longtask', buffered: true });

// 리소스 로딩 시간 측정
const resourceObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 1000) {
      console.warn('느린 리소스:', entry.name, entry.duration, 'ms');
    }
  });
});

resourceObserver.observe({ type: 'resource', buffered: true });