import { useEffect } from 'react';
import { Navigate, Outlet, useLocation } from 'react-router-dom';
import { useAuth } from '@/lib/AuthContext';
import UserNotRegisteredError from '@/components/UserNotRegisteredError';

const DefaultFallback = () => (
  <div className="fixed inset-0 flex items-center justify-center">
    <div className="w-8 h-8 border-4 border-slate-200 border-t-slate-800 rounded-full animate-spin"></div>
  </div>
);

/**
 * `unauthenticatedElement` defaults to the login page.
 *
 * It used to default to `undefined`, which renders nothing. That was invisible
 * while the data client reported the seeded user as permanently signed in and
 * this branch was unreachable; now that `GET /me` can genuinely answer 401, the
 * default is what a signed-out visitor actually sees, and a blank screen is not
 * an acceptable answer to "you are not signed in".
 *
 * The attempted path travels in location state so signing in returns the
 * visitor to where they were going.
 */
interface ProtectedRouteProps {
  fallback?: any;
  unauthenticatedElement?: any;
}

export default function ProtectedRoute({ fallback = <DefaultFallback />, unauthenticatedElement }: ProtectedRouteProps) {
  const location = useLocation();
  const { isAuthenticated, isLoadingAuth, authChecked, authError, checkUserAuth } = useAuth();
  const signedOut = unauthenticatedElement ?? (
    <Navigate to="/admin/login" replace state={{ from: location.pathname }} />
  );

  useEffect(() => {
    if (!authChecked && !isLoadingAuth) {
      checkUserAuth();
    }
  }, [authChecked, isLoadingAuth, checkUserAuth]);

  if (isLoadingAuth || !authChecked) {
    return fallback;
  }

  if (authError) {
    if (authError.type === 'user_not_registered') {
      return <UserNotRegisteredError />;
    }
    return signedOut;
  }

  if (!isAuthenticated) {
    return signedOut;
  }

  return <Outlet />;
}