import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { useAuth } from '../contexts/AuthContext';

const ProtectedRoute = ({ children }) => {
  const { isAuthenticated, loading } = useAuth();
  const location = useLocation();

  useEffect(() => {
    if (loading) return;
    if (!isAuthenticated) {
      const redirectUrl = `/login?returnUrl=${encodeURIComponent(location.pathname + location.search)}`;
      window.location.replace(redirectUrl);
    }
  }, [isAuthenticated, loading, location.pathname, location.search]);

  if (loading) {
    return <div className="auth-loading">Checking authentication...</div>;
  }

  if (!isAuthenticated) {
    return <div className="auth-redirecting">Not authenticated — redirecting to login...</div>;
  }

  return children;
};

export default ProtectedRoute;