// Frontend Permission Fix Script
console.log('🔧 Frontend Permission Fix Analysis...\n');

// Test the exact logic from Directory.tsx
const testDirectoryLogic = () => {
  console.log('📁 Directory.tsx Logic Test:');
  
  // Mock user with role 16
  const user = {
    id: 4,
    name: 'NHQ Admin',
    role_id: 16,
    role: 'navy_admin'
  };
  
  // Mock functions
  const hasRole = (roleName) => {
    return user.role === roleName;
  };
  
  const isSuperAdmin = () => {
    return user.role_id >= 100;
  };
  
  // Test the exact logic from Directory.tsx
  const isAdmin = hasRole('Admin') || user?.role_id === 16;
  const isSuperAdminResult = isSuperAdmin();
  
  console.log(`   User: ${user.name}`);
  console.log(`   Role ID: ${user.role_id}`);
  console.log(`   hasRole('Admin'): ${hasRole('Admin')}`);
  console.log(`   user?.role_id === 16: ${user?.role_id === 16}`);
  console.log(`   isAdmin: ${isAdmin}`);
  console.log(`   isSuperAdmin: ${isSuperAdminResult}`);
  
  return { isAdmin, isSuperAdminResult };
};

// Test ContactCard logic
const testContactCardLogic = () => {
  console.log('\n📱 ContactCard Logic Test:');
  
  const { isAdmin, isSuperAdminResult } = testDirectoryLogic();
  
  // Mock user data
  const currentUser = {
    id: 4,
    name: 'NHQ Admin',
    role_id: 16,
    role: 'navy_admin',
    permissions: [
      'contact.create',
      'contact.update',
      'contact.delete',
      'directory.contact.create',
      'directory.contact.edit',
      'directory.contact.delete'
    ]
  };
  
  // Mock permission check
  const hasPermission = (permissionName) => {
    return currentUser.permissions.includes(permissionName);
  };
  
  // Test the exact logic from ContactCard.tsx
  const canCreate = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                   hasPermission('contact.create') || hasPermission('directory.contact.create');
  const canEdit = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                  hasPermission('contact.update') || hasPermission('directory.contact.edit');
  const canDelete = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                    hasPermission('contact.delete') || hasPermission('directory.contact.delete');
  
  console.log(`   currentUser?.role_id === 16: ${currentUser?.role_id === 16}`);
  console.log(`   hasPermission('contact.create'): ${hasPermission('contact.create')}`);
  console.log(`   hasPermission('directory.contact.create'): ${hasPermission('directory.contact.create')}`);
  console.log(`   canCreate: ${canCreate}`);
  console.log(`   canEdit: ${canEdit}`);
  console.log(`   canDelete: ${canDelete}`);
  
  return { canCreate, canEdit, canDelete };
};

// Test OrganizationalStructureView logic
const testOrganizationalStructureLogic = () => {
  console.log('\n🌳 OrganizationalStructureView Logic Test:');
  
  const { isAdmin, isSuperAdminResult } = testDirectoryLogic();
  
  // Mock user data
  const currentUser = {
    id: 4,
    name: 'NHQ Admin',
    role_id: 16,
    role: 'navy_admin',
    permissions: [
      'contact.create',
      'contact.update',
      'contact.delete',
      'directory.contact.create',
      'directory.contact.edit',
      'directory.contact.delete',
      'department.create',
      'department.update',
      'department.delete',
      'unit.create',
      'unit.update',
      'unit.delete',
      'designation.create',
      'designation.update',
      'designation.delete'
    ]
  };
  
  // Mock permission check
  const hasPermission = (permissionName) => {
    return currentUser.permissions.includes(permissionName);
  };
  
  // Test the exact logic from OrganizationalStructureView.tsx
  const canCreateContact = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                          hasPermission('contact.create') || hasPermission('directory.contact.create');
  const canEditContact = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                         hasPermission('contact.update') || hasPermission('directory.contact.edit');
  const canDeleteContact = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                           hasPermission('contact.delete') || hasPermission('directory.contact.delete');
  
  const canCreateDepartment = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                              hasPermission('department.create');
  const canEditDepartment = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                            hasPermission('department.update');
  const canDeleteDepartment = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                              hasPermission('department.delete');
  
  const canCreateUnit = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                        hasPermission('unit.create');
  const canEditUnit = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                      hasPermission('unit.update');
  const canDeleteUnit = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                        hasPermission('unit.delete');
  
  const canCreateDesignation = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                               hasPermission('designation.create');
  const canEditDesignation = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                             hasPermission('designation.update');
  const canDeleteDesignation = isAdmin || isSuperAdminResult || currentUser?.role_id === 16 || 
                               hasPermission('designation.delete');
  
  console.log(`   Contact - Create: ${canCreateContact}`);
  console.log(`   Contact - Edit: ${canEditContact}`);
  console.log(`   Contact - Delete: ${canDeleteContact}`);
  console.log(`   Department - Create: ${canCreateDepartment}`);
  console.log(`   Department - Edit: ${canEditDepartment}`);
  console.log(`   Department - Delete: ${canDeleteDepartment}`);
  console.log(`   Unit - Create: ${canCreateUnit}`);
  console.log(`   Unit - Edit: ${canEditUnit}`);
  console.log(`   Unit - Delete: ${canDeleteUnit}`);
  console.log(`   Designation - Create: ${canCreateDesignation}`);
  console.log(`   Designation - Edit: ${canEditDesignation}`);
  console.log(`   Designation - Delete: ${canDeleteDesignation}`);
  
  return {
    canCreateContact, canEditContact, canDeleteContact,
    canCreateDepartment, canEditDepartment, canDeleteDepartment,
    canCreateUnit, canEditUnit, canDeleteUnit,
    canCreateDesignation, canEditDesignation, canDeleteDesignation
  };
};

// Test button visibility
const testButtonVisibility = () => {
  console.log('\n🎭 Button Visibility Test:');
  
  const { canCreate, canEdit, canDelete } = testContactCardLogic();
  const treePermissions = testOrganizationalStructureLogic();
  
  const showActions = true;
  
  // Test ContactCard button visibility
  const shouldShowContactActions = showActions && (canCreate || canEdit || canDelete);
  
  // Test OrganizationalStructureView button visibility
  const shouldShowTreeActions = showActions && (
    treePermissions.canCreateContact || treePermissions.canEditContact || treePermissions.canDeleteContact ||
    treePermissions.canCreateDepartment || treePermissions.canEditDepartment || treePermissions.canDeleteDepartment ||
    treePermissions.canCreateUnit || treePermissions.canEditUnit || treePermissions.canDeleteUnit ||
    treePermissions.canCreateDesignation || treePermissions.canEditDesignation || treePermissions.canDeleteDesignation
  );
  
  console.log(`   showActions: ${showActions}`);
  console.log(`   Contact Actions Visible: ${shouldShowContactActions}`);
  console.log(`   Tree Actions Visible: ${shouldShowTreeActions}`);
  
  return { shouldShowContactActions, shouldShowTreeActions };
};

// Run all tests
const runAllTests = () => {
  console.log('🧪 Running All Frontend Permission Tests...\n');
  
  const { shouldShowContactActions, shouldShowTreeActions } = testButtonVisibility();
  
  console.log('\n🎉 Final Results:');
  
  if (shouldShowContactActions && shouldShowTreeActions) {
    console.log('✅ SUCCESS! All buttons should be visible!');
    console.log('   🎯 Grid View: Add, Edit, Delete buttons will show');
    console.log('   🌳 Tree View: All Add, Edit, Delete buttons will show');
    console.log('   📞 Contact Details: All operations available');
  } else {
    console.log('❌ ISSUE: Some buttons may not show');
    if (!shouldShowContactActions) {
      console.log('   - Contact buttons issue');
    }
    if (!shouldShowTreeActions) {
      console.log('   - Tree view buttons issue');
    }
  }
  
  console.log('\n📋 Summary:');
  console.log(`   Grid View Success: ${shouldShowContactActions ? '✅' : '❌'}`);
  console.log(`   Tree View Success: ${shouldShowTreeActions ? '✅' : '❌'}`);
  console.log(`   Overall Success: ${shouldShowContactActions && shouldShowTreeActions ? '✅' : '❌'}`);
  
  return { shouldShowContactActions, shouldShowTreeActions };
};

// Execute tests
const results = runAllTests();

console.log('\n🔍 Debugging Information:');
console.log('   If buttons are not showing, check:');
console.log('   1. User is logged in with role_id = 16');
console.log('   2. showActions prop is true');
console.log('   3. User has the required permissions');
console.log('   4. Component is receiving correct props');
console.log('   5. No JavaScript errors in browser console');
