// src/components/ProtectedRoute.js - 弹窗拦截版本
import React, { useEffect } from 'react';
import { Box, VStack, Spinner, Text } from '@chakra-ui/react';
import { useAuth } from '../contexts/AuthContext';
import { useAuthModal } from '../contexts/AuthModalContext';

const ProtectedRoute = ({ children }) => {
  const { isAuthenticated, isLoading, user } = useAuth();
  const { openAuthModal, isAuthModalOpen } = useAuthModal();

  // 记录当前路径，登录成功后可以跳转回来
  const currentPath = window.location.pathname + window.location.search;

  // 未登录时自动弹出认证窗口
  useEffect(() => {
    if (!isLoading && !isAuthenticated && !user && !isAuthModalOpen) {
      openAuthModal(currentPath);
    }
  }, [isAuthenticated, user, isLoading, isAuthModalOpen, currentPath, openAuthModal]);

  // 显示加载状态
  if (isLoading) {
    return (
        <Box
            height="100vh"
            display="flex"
            alignItems="center"
            justifyContent="center"
            bg="gray.50"
        >
          <VStack spacing={4}>
            <Spinner size="xl" color="blue.500" thickness="4px" />
            <Text fontSize="lg" color="gray.600">正在验证登录状态...</Text>
          </VStack>
        </Box>
    );
  }

  // 未登录时，渲染子组件 + 自动打开弹窗（通过 useEffect）
  // 弹窗会在 useEffect 中自动触发，页面正常显示
  if (!isAuthenticated || !user) {
    return children;
  }

  // 已登录，渲染子组件
  return children;
};

export default ProtectedRoute;