'use client';

import type { ReactNode } from 'react';
import { usePermissions } from '@/hooks/usePermissions';

interface CanProps {
  /** 单个权限码；与 permissions 二选一 */
  permission?: string;
  /** 多权限：默认任一即可；配合 requireAll 可改为全部 */
  permissions?: string[];
  /** 是否需要所有权限（默认 false） */
  requireAll?: boolean;
  /** 允许的角色列表；任一匹配即通过 */
  roles?: string[];
  /** 无权限时渲染此内容（默认 null） */
  fallback?: ReactNode;
  children: ReactNode;
}

/**
 * 元素级权限保护（规则 §6.2）
 *
 * 包裹操作按钮、菜单项等，无权限不渲染。
 * 规则要求：所有业务按钮必须包裹 <Can>，不做例外。
 *
 * @example
 *   <Can permission="purchase_order:create">
 *     <Button onClick={create}>新建</Button>
 *   </Can>
 */
export function Can({
  permission,
  permissions,
  requireAll = false,
  roles,
  fallback = null,
  children,
}: CanProps) {
  const { hasPermission, hasAnyPermission, hasAllPermissions, hasAnyRole, isAdmin, loading } =
    usePermissions();

  if (loading) return <>{fallback}</>;
  if (isAdmin) return <>{children}</>;

  const perms = permission ? [permission] : permissions || [];
  if (perms.length > 0) {
    const ok = requireAll ? hasAllPermissions(perms) : hasAnyPermission(perms);
    if (!ok) return <>{fallback}</>;
  }

  if (roles && roles.length > 0 && !hasAnyRole(roles)) {
    return <>{fallback}</>;
  }

  return <>{children}</>;
}