import { useRef } from 'react';
import { Navigate, Outlet } from 'react-router';
import { useLogto } from '@logto/react';
import { Spinner } from '@cameleer/design-system';

export function ProtectedRoute({ children }: { children?: React.ReactNode }) {
  const { isAuthenticated, isLoading } = useLogto();
  // The Logto SDK sets isLoading=true for EVERY async method (getAccessToken, etc.),
  // not just initial auth. Only gate on the initial load — once isLoading is false
  // for the first time, never show the spinner again.
  const initialLoadDone = useRef(false);

  if (!isLoading) {
    initialLoadDone.current = true;
  }

  if (!initialLoadDone.current) {
    return (
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
        <Spinner />
      </div>
    );
  }

  if (!isAuthenticated) return <Navigate to="/login" replace />;
  return children ? <>{children}</> : <Outlet />;
}