'use client';

import { usePermissions } from '@/src/context/admin/PermissionContext';
import { useRouter } from 'next/navigation';
import { useEffect, ComponentType } from 'react';

export function withPageAccess<P extends object>(
  Component: ComponentType<P>,
  pageSlug: string
) {
  return function ProtectedPage(props: P) {
    const { hasPageAccess, isLoading } = usePermissions();
    const router = useRouter();

    useEffect(() => {
      if (!isLoading && !hasPageAccess(pageSlug)) {
        router.push('/admin/unauthorized');
      }
    }, [isLoading, hasPageAccess, router]);

    if (isLoading) {
      return (
        <div className="flex items-center justify-center min-h-screen">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
        </div>
      );
    }

    if (!hasPageAccess(pageSlug)) {
      return null;
    }

    return <Component {...props} />;
  };
}

export function usePageAccess(pageSlug: string) {
  const { hasPageAccess, isLoading } = usePermissions();
  const router = useRouter();

  useEffect(() => {
    if (!isLoading && !hasPageAccess(pageSlug)) {
      router.push('/admin/unauthorized');
    }
  }, [isLoading, hasPageAccess, pageSlug, router]);

  return { hasAccess: hasPageAccess(pageSlug), isLoading };
}