// 기본적인 스크롤 위치 저장 및 복구
function setupBasicScrollRestoration() {
  // 페이지를 떠날 때 현재 스크롤 위치를 저장
  window.addEventListener('beforeunload', () => {
    const scrollY = window.scrollY;
    history.pushState({ scrollY }, null, '?page=1');
  });

  // 페이지로 돌아왔을 때 저장된 위치로 스크롤
  window.addEventListener('popstate', (event) => {
    if (event.state && event.state.scrollY) {
      setTimeout(() => {
        window.scrollTo(0, event.state.scrollY);
      }, 100);
    }
  });
}

// 동적 데이터 환경에서의 스크롤 관리
class DynamicScrollManager {
  saveScrollState(pageKey) {
    const scrollY = window.scrollY;
    const visibleItems = this.getVisibleItemsInfo();

    // 스크롤 위치와 보이는 아이템 정보를 함께 저장
    sessionStorage.setItem(pageKey, JSON.stringify({
      scrollY,
      visibleItems,
    }));
  }

  async restoreScrollState(pageKey) {
    const savedData = JSON.parse(sessionStorage.getItem(pageKey) || '{}');
    if (!savedData.visibleItems) return;

    // 데이터 로딩이 완료될 때까지 대기
    await this.waitForDataLoad();

    // 저장된 아이템을 찾아서 기준점으로 사용
    const targetElement = this.findTargetElement(savedData.visibleItems);
    if (targetElement) {
      targetElement.scrollIntoView();
      // 미세 조정을 위해 저장된 정확한 위치로 스크롤
      window.scrollTo(0, savedData.scrollY);
    }
  }

  getVisibleItemsInfo() {
    // 현재 화면에 보이는 아이템들의 ID와 위치 정보 수집
    const items = document.querySelectorAll('[data-item-id]');
    return Array.from(items).map(item => ({
      id: item.dataset.itemId,
      offsetTop: item.offsetTop
    }));
  }

  findTargetElement(savedItems) {
    // 저장된 아이템 중 첫 번째 아이템을 기준점으로 사용
    return document.querySelector(`[data-item-id="${savedItems[0].id}"]`);
  }
}

// 레이지 로딩 환경에서의 스크롤 복구
class LazyLoadScrollManager {
  async restoreScrollWithPreload(pageKey) {
    const savedState = this.getSavedState(pageKey);
    if (!savedState) return;

    // 1단계: 스켈레톤으로 공간 확보
    this.createSkeletonPlaceholders(savedState.totalHeight);
    
    // 2단계: 저장된 지점까지 필요한 데이터를 배치 단위로 미리 로드
    await this.preloadRequiredData(savedState.requiredItemCount);

    // 3단계: 실제 스크롤 위치 복구
    window.scrollTo(0, savedState.scrollY);
    
  }

  async preloadRequiredData(itemCount) {
    const batchSize = 20;
    for (let i = 0; i < itemCount; i += batchSize) {
      const batch = await this.loadDataBatch(i, batchSize);
      this.renderBatch(batch);
      await this.waitForRender(); // DOM 업데이트 대기
    }
  }
}

// 스켈레톤 높이 관리
class SkeletonHeightManager {
  constructor() {
    this.itemHeights = []; // 실제 아이템 높이들을 기록
    this.averageHeight = 200; // 초기 평균 높이
  }

  // 높이 평균값 계산을 위해 각 엘리먼트 순회
  recordItemHeight(element) {
    const height = element.offsetHeight;
    this.itemHeights.push(height);
  }

  // 최근 50개 아이템의 평균 높이 계산
  getItemAverageHeight(element) {
    const recentHeights = this.itemHeights.slice(-50);
    this.averageHeight = recentHeights.reduce((sum, h) => sum + h, 0) / recentHeights.length;
  }

  // 스켈레톤 생성
  createSkeletonWithEstimatedHeight(count) {
    const container = document.createElement('div');
    for (let i = 0; i < count; i++) {
      const skeleton = document.createElement('div');
      skeleton.className = 'skeleton-item';
      skeleton.style.height = `${this.averageHeight}px`;
      container.appendChild(skeleton);
    }
    return container;
  }
  
}

// React Query 환경에서의 스크롤 복구
function useScrollRestorationWithQuery(queryKey) {
  const queryClient = useQueryClient();

  const saveScrollState = () => {
    const scrollData = {
      scrollY: window.scrollY,
      timestamp: Date.now()
    };

    // React Query 캐시에 스크롤 정보도 함께 저장
    queryClient.setQueryData([...queryKey, 'scroll'], scrollData);
  };

  const restoreScrollState = async () => {
    // 1단계: 캐싱된 데이터 가져옴
    const scrollData = queryClient.getQueryData([...queryKey, 'scroll']);
    const cachedData = queryClient.getQueryData(queryKey);

    if (scrollData && cachedData) {
      // 2단계: 캐싱된 데이터를 이용해서 컴포넌트를 화면에 렌더링
      await componentsRendering(cachedData);

      // 3단계: 캐싱된 스크롤값을 이용해서 좌표이동
      window.scrollTo(0, scrollData.scrollY);
    }
  };

  return { saveScrollState, restoreScrollState };
}

// 무한 스크롤과 조합한 경우
function useInfiniteScrollRestoration(queryKey) {
  const infiniteQuery = useInfiniteQuery({
    queryKey,
    queryFn: fetchData,
    staleTime: 5 * 60 * 1000, // 캐시 시간을 길게 설정
  });

  const restoreWithInfiniteData = async () => {
    // 1단계: 저장된 pageCount와 스크롤 위치를 가져옴
    const savedScrollData = getSavedScrollData();

    if (savedScrollData) {
      // 2단계: 저장된 페이지 수만큼 데이터 복구
      while (infiniteQuery.data.pages.length < savedScrollData.pageCount) {
        await infiniteQuery.fetchNextPage();
      }

      // 3단계: 모든 데이터 로딩 완료 후 스크롤 복구
      window.scrollTo(0, savedScrollData.scrollY);
    }
  };

  return { ...infiniteQuery, restoreWithInfiniteData };
}

// 가상화 환경에서의 스크롤 복구
class VirtualizedScrollManager {
  
  saveVirtualizedScrollState(pageKey) {
    const virtualList = getVirtualListInstance();
    // 먼저 로드되는 상황을 고려해서 0부터 시작하는 sequence값을 계산해서 저장
    const listSequence = virtualList.getSequence();
    const pageNumber = virtualList.getPageNumber();
    const pageSize = virtualList.getPageSize();

    // 가상화된 환경에서는 보이는 아이템 순서값과 최신 페이징 데이터값을 저장
    sessionStorage.setItem(pageKey, JSON.stringify({
      listSequence,
      pageNumber,
      pageSize,
    }));
  }

  async restoreVirtualizedScroll(pageKey) {
    const savedState = JSON.parse(sessionStorage.getItem(pageKey) || '{}');
    if (!savedState.listSequence) return;

    // 1단계: 먼저 보이는 아이템 데이터 호출
    await this.loadDataRange(savedState.pageNumber, savedState.pageSize);

    // 2단계: 가상 리스트에 저장된 스크롤 오프셋 적용
    virtualList.scrollTo(savedState.listSequence);
    
    // 3단계: 보이던 아이템 주변 데이터 로드
    await this.preloadAroundVisibleRange(
      savedState.pageNumber,
      savedState.pageSize
    );
    
  }
}