import React, { type ReactNode } from 'react'
import { useAuth } from '../hooks/useAuth'
import type { RolePermissions } from '../types'

interface RequirePermissionProps {
  children: ReactNode
  permission: keyof RolePermissions
  fallback?: ReactNode
}

export function RequirePermission({ children, permission, fallback }: RequirePermissionProps) {
  const { hasPermission } = useAuth()

  if (!hasPermission(permission)) {
    return fallback || (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
          <p className="text-gray-600">You don't have permission to access this content.</p>
        </div>
      </div>
    )
  }

  return <>{children}</>
}

export function RequireAnyPermission({ 
  children, 
  permissions, 
  fallback 
}: { 
  children: ReactNode
  permissions: (keyof RolePermissions)[]
  fallback?: ReactNode 
}) {
  const { hasPermission } = useAuth()
  
  const hasAnyPermission = permissions.some(permission => hasPermission(permission))

  if (!hasAnyPermission) {
    return fallback || (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
          <p className="text-gray-600">You don't have any of the required permissions.</p>
        </div>
      </div>
    )
  }

  return <>{children}</>
}

export function RequireAllPermissions({ 
  children, 
  permissions, 
  fallback 
}: { 
  children: ReactNode
  permissions: (keyof RolePermissions)[]
  fallback?: ReactNode 
}) {
  const { hasPermission } = useAuth()
  
  const hasAllPermissions = permissions.every(permission => hasPermission(permission))

  if (!hasAllPermissions) {
    return fallback || (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <h2 className="text-2xl font-bold text-gray-900 mb-4">Access Denied</h2>
          <p className="text-gray-600">You don't have all the required permissions.</p>
        </div>
      </div>
    )
  }

  return <>{children}</>
}