<template>
  <div class="permission-example">
    <h2 class="text-xl font-bold mb-4">RBAC Permission System Example</h2>
    
    <!-- Menu Navigation Example -->
    <div class="mb-6">
      <h3 class="text-lg font-medium mb-2">Menu Items (Permission-Based)</h3>
      <nav class="flex space-x-4">
        <NuxtLink 
          v-if="canViewDashboard"
          to="/dashboard" 
          class="px-3 py-2 bg-blue-100 text-blue-800 rounded"
        >
          Dashboard
        </NuxtLink>
        
        <NuxtLink 
          v-if="canViewUsers"
          to="/users" 
          class="px-3 py-2 bg-green-100 text-green-800 rounded"
        >
          Users
        </NuxtLink>
        
        <NuxtLink 
          v-if="canViewRBAC"
          to="/rbac" 
          class="px-3 py-2 bg-purple-100 text-purple-800 rounded"
        >
          RBAC Management
        </NuxtLink>
        
        <span v-if="!canViewDashboard && !canViewUsers && !canViewRBAC" class="text-gray-500">
          No menu items available
        </span>
      </nav>
    </div>
    
    <!-- Component-Level Permissions -->
    <div class="mb-6">
      <h3 class="text-lg font-medium mb-2">User Actions (Component Permissions)</h3>
      <div class="space-y-2">
        <div class="flex items-center space-x-2">
          <span class="text-gray-700">John Doe</span>
          <span class="text-gray-500">john@example.com</span>
          
          <!-- Edit Button -->
          <button 
            v-if="canEditUser"
            @click="editUser"
            class="px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600"
          >
            <Icon name="ph:pencil" class="w-4 h-4 mr-1" />
            Edit
          </button>
          
          <!-- Delete Button -->
          <button 
            v-if="canDeleteUser"
            @click="deleteUser"
            class="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600"
          >
            <Icon name="ph:trash" class="w-4 h-4 mr-1" />
            Delete
          </button>
          
          <!-- Sensitive Info (Conditional Display) -->
          <span 
            v-if="canViewSensitiveInfo"
            class="px-2 py-1 bg-yellow-100 text-yellow-800 text-xs rounded"
          >
            Salary: $75,000
          </span>
        </div>
      </div>
    </div>
    
    <!-- Feature-Level Permissions -->
    <div class="mb-6">
      <h3 class="text-lg font-medium mb-2">Advanced Features</h3>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <!-- Data Export -->
        <div class="p-4 border rounded-lg">
          <h4 class="font-medium mb-2">Data Export</h4>
          <button 
            v-if="canExportData"
            @click="exportData"
            class="w-full px-3 py-2 bg-green-500 text-white rounded hover:bg-green-600"
          >
            <Icon name="ph:download" class="w-4 h-4 mr-1" />
            Export Data
          </button>
          <p v-else class="text-sm text-gray-500">Export not available</p>
        </div>
        
        <!-- Approval Workflow -->
        <div class="p-4 border rounded-lg">
          <h4 class="font-medium mb-2">Approvals</h4>
          <button 
            v-if="canApproveRequests"
            @click="approveRequest"
            class="w-full px-3 py-2 bg-orange-500 text-white rounded hover:bg-orange-600"
          >
            <Icon name="ph:check" class="w-4 h-4 mr-1" />
            Approve Requests
          </button>
          <p v-else class="text-sm text-gray-500">Approval not available</p>
        </div>
        
        <!-- System Backup -->
        <div class="p-4 border rounded-lg">
          <h4 class="font-medium mb-2">System Backup</h4>
          <button 
            v-if="canSystemBackup"
            @click="createBackup"
            class="w-full px-3 py-2 bg-red-500 text-white rounded hover:bg-red-600"
          >
            <Icon name="ph:database" class="w-4 h-4 mr-1" />
            Create Backup
          </button>
          <p v-else class="text-sm text-gray-500">Backup not available</p>
        </div>
      </div>
    </div>
    
    <!-- Reactive Permission Example -->
    <div class="mb-6">
      <h3 class="text-lg font-medium mb-2">Reactive Permission Check</h3>
      <div class="p-4 bg-gray-50 rounded-lg">
        <p class="text-sm mb-2">This demonstrates reactive permission checking:</p>
        
        <div class="space-y-2">
          <div v-if="bulkActionPermission.isLoading" class="text-gray-500">
            <Icon name="ph:spinner" class="w-4 h-4 animate-spin mr-1" />
            Checking bulk action permission...
          </div>
          
          <div v-else-if="bulkActionPermission.isAllowed" class="text-green-600">
            <Icon name="ph:check-circle" class="w-4 h-4 mr-1" />
            Bulk actions are enabled for your role
          </div>
          
          <div v-else class="text-red-600">
            <Icon name="ph:x-circle" class="w-4 h-4 mr-1" />
            Bulk actions are not available for your role
          </div>
        </div>
        
        <button 
          @click="bulkActionPermission.checkPermission()"
          class="mt-2 px-3 py-1 bg-blue-500 text-white text-sm rounded hover:bg-blue-600"
        >
          Recheck Permission
        </button>
      </div>
    </div>
    
    <!-- Permission Summary -->
    <div class="bg-blue-50 p-4 rounded-lg">
      <h3 class="text-lg font-medium mb-2">Your Current Permissions</h3>
      <div class="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm">
        <div :class="canViewDashboard ? 'text-green-600' : 'text-red-600'">
          <Icon :name="canViewDashboard ? 'ph:check' : 'ph:x'" class="w-4 h-4 mr-1" />
          Dashboard Access
        </div>
        <div :class="canEditUser ? 'text-green-600' : 'text-red-600'">
          <Icon :name="canEditUser ? 'ph:check' : 'ph:x'" class="w-4 h-4 mr-1" />
          Edit Users
        </div>
        <div :class="canExportData ? 'text-green-600' : 'text-red-600'">
          <Icon :name="canExportData ? 'ph:check' : 'ph:x'" class="w-4 h-4 mr-1" />
          Export Data
        </div>
        <div :class="canApproveRequests ? 'text-green-600' : 'text-red-600'">
          <Icon :name="canApproveRequests ? 'ph:check' : 'ph:x'" class="w-4 h-4 mr-1" />
          Approve Requests
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { 
  useRbacPermissions, 
  useReactivePermission,
  PERMISSION_KEYS, 
  PERMISSION_ACTIONS 
} from '~/composables/useRbacPermissions'

// Initialize permission composable
const { 
  hasPermission, 
  canAccessMenu, 
  canSeeComponent, 
  canPerformAction,
  preloadPermissions 
} = useRbacPermissions()

// Menu permissions (reactive)
const canViewDashboard = ref(false)
const canViewUsers = ref(false)
const canViewRBAC = ref(false)

// Component permissions (reactive)
const canEditUser = ref(false)
const canDeleteUser = ref(false)
const canViewSensitiveInfo = ref(false)

// Feature permissions (reactive)
const canExportData = ref(false)
const canApproveRequests = ref(false)
const canSystemBackup = ref(false)

// Reactive permission example using composable
const bulkActionPermission = useReactivePermission(PERMISSION_KEYS.COMPONENT.USER_BULK_ACTIONS)

// Preload all required permissions for better performance
const requiredPermissions = [
  PERMISSION_KEYS.MENU.DASHBOARD,
  PERMISSION_KEYS.MENU.USERS,
  PERMISSION_KEYS.MENU.RBAC,
  PERMISSION_KEYS.COMPONENT.USER_EDIT_BUTTON,
  PERMISSION_KEYS.COMPONENT.USER_DELETE_BUTTON,
  PERMISSION_KEYS.COMPONENT.PROFILE_SENSITIVE_INFO,
  PERMISSION_KEYS.FEATURE.EXPORT_DATA,
  PERMISSION_KEYS.FEATURE.APPROVE_REQUESTS,
  PERMISSION_KEYS.FEATURE.SYSTEM_BACKUP
]

// Check all permissions on component mount
onMounted(async () => {
  try {
    // Preload permissions for better performance
    await preloadPermissions(requiredPermissions)
    
    // Check menu permissions
    canViewDashboard.value = await canAccessMenu('/dashboard')
    canViewUsers.value = await canAccessMenu('/users')
    canViewRBAC.value = await canAccessMenu('/rbac')
    
    // Check component permissions
    canEditUser.value = await canSeeComponent(PERMISSION_KEYS.COMPONENT.USER_EDIT_BUTTON)
    canDeleteUser.value = await canSeeComponent(PERMISSION_KEYS.COMPONENT.USER_DELETE_BUTTON)
    canViewSensitiveInfo.value = await canSeeComponent(PERMISSION_KEYS.COMPONENT.PROFILE_SENSITIVE_INFO)
    
    // Check feature permissions
    canExportData.value = await canPerformAction(PERMISSION_KEYS.FEATURE.EXPORT_DATA, PERMISSION_ACTIONS.EXPORT)
    canApproveRequests.value = await canPerformAction(PERMISSION_KEYS.FEATURE.APPROVE_REQUESTS, PERMISSION_ACTIONS.APPROVE)
    canSystemBackup.value = await canPerformAction(PERMISSION_KEYS.FEATURE.SYSTEM_BACKUP, PERMISSION_ACTIONS.CREATE)
  } catch (error) {
    console.error('Failed to load permissions:', error)
  }
})

// Action handlers
const editUser = () => {
  console.log('Edit user action')
  // Implementation here
}

const deleteUser = () => {
  console.log('Delete user action')
  // Implementation here
}

const exportData = () => {
  console.log('Export data action')
  // Implementation here
}

const approveRequest = () => {
  console.log('Approve request action')
  // Implementation here
}

const createBackup = () => {
  console.log('Create backup action')
  // Implementation here
}
</script>

<style scoped>
.permission-example {
  @apply max-w-4xl mx-auto p-6;
}

.animate-spin {
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 