import React, { useEffect } from 'react';
import { useAppSelector, useAppDispatch } from '../store/hooks'; // 导入 hooks
import { useNavigate } from 'react-router';
import { refreshToken } from '../feature/auth/authSlice'; // 导入刷新 token 的 thunk

interface ProtectedRouteProps {
  children: React.ReactNode;
}

const ProtectedRoute: React.FC<ProtectedRouteProps> = ({ children }) => {
  const { isAuth, token } = useAppSelector((state) => state.auth);
  const navigate = useNavigate();
  const dispatch = useAppDispatch();

  useEffect(() => {
    const tryRefreshToken = async () => {
      if (!token) {
        navigate('/login'); // 如果没有 token，跳转到登录页
      }
      if (!isAuth && token) {
        try {
          await dispatch(refreshToken(token)).unwrap(); // 尝试刷新 token
        } catch {
          navigate('/login');
        }
      }
    };

    tryRefreshToken(); // 执行 token 刷新
  }, [isAuth, token, dispatch, navigate]);

  // 如果已认证则渲染 children，否则返回 null
  return isAuth ? <>{children}</> : null;
};

export default ProtectedRoute;