import { useEffect, useRef } from 'react';
import { useLocation } from 'react-router';
import { useQueryClient, type QueryKey } from '@tanstack/react-query';
import { useActivePage } from '../components/routeKeeperContext';

/**
 * 当前页面是否处于激活（可见）状态。
 * RouteKeeper 保活页面始终挂载，只有激活页可见；配合
 * `useVisibleRefetch` 可在切回页面时刷新数据。
 */
export function usePageVisible(): boolean {
  const activePage = useActivePage();
  const location = useLocation();
  return activePage === location.pathname;
}

/**
 * 页面重新变为可见时刷新指定 queryKey 的数据。
 * 解决 RouteKeeper 保活导致的「切回列表页看不到新增/删除数据」问题。
 *
 * 用法：`useVisibleRefetch(['students']);`
 *
 * 注意：queryKey 通过 ref 持有，effect 只依赖 visible，
 * 避免调用方每次渲染传入新数组字面量导致频繁重复请求。
 */
export function useVisibleRefetch(queryKey: QueryKey | undefined): void {
  const visible = usePageVisible();
  const queryClient = useQueryClient();
  const keyRef = useRef(queryKey);
  keyRef.current = queryKey;

  useEffect(() => {
    if (visible && keyRef.current) {
      void queryClient.refetchQueries({ queryKey: keyRef.current });
    }
  }, [visible, queryClient]);
}
