'use client';

import * as React from 'react';
import { useRouter } from 'next/navigation';
import Alert from '@mui/material/Alert';
import { AppLoader } from '@/components/core/app-loader';
import { paths } from '@/paths';
import { logger } from '@/lib/default-logger';

export interface AuthGuardProps {
  children: React.ReactNode;
}

export function AuthGuard({ children }: AuthGuardProps): React.JSX.Element | null {
  const router = useRouter();
  const [isChecking, setIsChecking] = React.useState<boolean>(true);
  const [error, setError] = React.useState<string | null>(null);

  const checkPermissions = async (): Promise<void> => {
    const token = localStorage.getItem("token");

    if (!token) {
      logger.debug('[AuthGuard]: No token found, redirecting to sign-in page');
      router.replace(paths.auth.signIn);
      return;
    }

    setIsChecking(false);
  };

  React.useEffect(() => {
    checkPermissions().catch((err) => {
      setError('Failed to check permissions');
      logger.error('[AuthGuard]: Error while checking permissions', err);
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps -- Expected to not include deps here
  }, []);

  if (isChecking) {
    return <AppLoader size="screen" />;
  }

  if (error) {
    return <Alert color="error">{error}</Alert>;
  }

  return <React.Fragment>{children}</React.Fragment>;
}