import React from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { usePermissions } from '@/features/auth/hooks/usePermissions';
import type { PermissionCheck } from '@/features/auth/constants/permissions';
import { ROUTES } from '@/shared/constants/routes';

interface PermissionRouteProps {
  children: React.ReactNode;
  permission?: PermissionCheck;
  superAdminOnly?: boolean;
}

export const PermissionRoute: React.FC<PermissionRouteProps> = ({
  children,
  permission,
  superAdminOnly = false,
}) => {
  const { t } = useTranslation('common');
  const location = useLocation();
  const { can, isSuperAdmin, isReady } = usePermissions();

  if (!isReady) {
    return (
      <div
        style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}
        data-testid="permission-route-loading"
      >
        {t('status.loading')}
      </div>
    );
  }

  const allowed = superAdminOnly ? isSuperAdmin : can(permission);

  if (!allowed) {
    return <Navigate to={ROUTES.DASHBOARD} replace state={{ from: location.pathname, forbidden: true }} />;
  }

  return <>{children}</>;
};