import type { ReactNode } from "react";

/**
 * RequirePermission - L3 组件级视口控制
 *
 * 用途：根据当前用户权限点决定是否渲染 children。
 * 无权限时不渲染 children（返回 null 或自定义 fallback）。
 *
 * 权限点命名遵循 F7 裁决：`<RESOURCE>_<ACTION>`（如 `EXAM_READ`、`GRADE_READ_CHILD`）。
 * 数据范围用后缀 `_OWN`/`_CHILD`（如 `GRADE_READ_CHILD`）。
 *
 * 注意：本组件依赖 `@edu/hooks` 的 `usePermission()`。为避免循环依赖，
 * 权限检查函数通过 props 注入，由调用方（apps/*）从 usePermission() 获取后传入。
 *
 * @example
 * import { usePermission } from "@edu/hooks";
 * const { hasPermission } = usePermission();
 *
 * <RequirePermission perm="EXAM_CREATE" hasPermission={hasPermission}>
 *   <Button>新建考试</Button>
 * </RequirePermission>
 */

export interface RequirePermissionProps {
  /** 权限点（F7 规范：<RESOURCE>_<ACTION>） */
  perm: string;
  /**
   * 权限检查函数（由 @edu/hooks 的 usePermission().hasPermission 注入）
   * 返回 true 渲染 children，false 渲染 fallback。
   */
  hasPermission: (perm: string) => boolean;
  /** 子节点（有权限时渲染） */
  children: ReactNode;
  /** 无权限时的降级 UI；未提供时返回 null */
  fallback?: ReactNode;
}

export function RequirePermission({
  perm,
  hasPermission,
  children,
  fallback = null,
}: RequirePermissionProps): ReactNode {
  if (!hasPermission(perm)) {
    return fallback;
  }
  return children;
}