/**
 * Role Permissions Management Test
 * 
 * Tags: @user_mgmt @p2 @regression @ui
 * 
 * Comprehensive functional testing of role permissions:
 * - Permission checkbox toggling
 * - Permission state persistence
 * - Bulk permission changes
 * - Permission verification across reloads
 * - Access control validation
 */

import { test, expect } from '@playwright/test';
import { printTestCase, printSuccess, printWarning, ensureAuthenticated } from '../../helpers/test-helpers';

test.describe('03_User_Management - Role Permissions', () => {
  // Use authenticated state for all tests in this suite
  test.use({ storageState: 'auth.json' });

  let testRoleId: string;
  let originalPermissionStates: Map<string, boolean[]> = new Map();

  test.beforeEach(async ({ page }) => {
    // Ensure we're authenticated before navigating anywhere
    await ensureAuthenticated(page);
    
    console.log('\n🚀 Navigating to roles & permissions page to get role...');
    await page.goto('/roles-permissions');
    await page.waitForLoadState('load');
    
    // Get first role ID
    const rolesTable = page.locator('#rolesTable');
    const firstRoleLink = rolesTable.locator('tbody tr').first().locator('a:has-text("Access Menu")');
    
    if (await firstRoleLink.count() > 0) {
      const href = await firstRoleLink.getAttribute('href');
      const roleIdMatch = href?.match(/role=(\d+)/);
      testRoleId = roleIdMatch ? roleIdMatch[1] : '2';
      console.log(`✓ Using role ID: ${testRoleId}`);
      
      // Navigate to role permissions page
      await page.goto(`/roles-permissions/roleAccess?role=${testRoleId}`);
      await page.waitForLoadState('load');
      console.log('✅ Role permissions page loaded');
      
      // Store original permission states for restoration
      await capturePermissionStates(page);
    } else {
      printWarning('No roles found, using default role ID 2');
      testRoleId = '2';
      await page.goto(`/roles-permissions/roleAccess?role=${testRoleId}`);
      await page.waitForLoadState('load');
    }
  });

  test.afterEach(async ({ page }) => {
    // Restore original permission states if they were captured
    if (originalPermissionStates.size > 0) {
      try {
        await page.goto(`/roles-permissions/roleAccess?role=${testRoleId}`);
        await page.waitForLoadState('load');
        await restorePermissionStates(page);
        console.log('✅ Original permission states restored');
      } catch (e) {
        console.log(`⚠ Could not restore permissions: ${e}`);
      }
    }
  });

  async function capturePermissionStates(page: any) {
    const permissionsTable = page.locator('#accessMenuTable');
    const rowCount = await permissionsTable.locator('tbody tr').count();
    
    for (let i = 0; i < Math.min(rowCount, 5); i++) {
      const row = permissionsTable.locator('tbody tr').nth(i);
      const menuName = await row.locator('td').first().textContent();
      const checkboxes = row.locator('input[type="checkbox"]');
      const checkboxCount = await checkboxes.count();
      
      const states: boolean[] = [];
      for (let j = 0; j < checkboxCount; j++) {
        const isChecked = await checkboxes.nth(j).isChecked();
        states.push(isChecked);
      }
      
      if (menuName) {
        originalPermissionStates.set(menuName, states);
      }
    }
    console.log(`✓ Captured ${originalPermissionStates.size} permission states`);
  }

  async function restorePermissionStates(page: any) {
    const permissionsTable = page.locator('#accessMenuTable');
    
    for (const [menuName, states] of originalPermissionStates.entries()) {
      const row = permissionsTable.locator(`tr:has-text("${menuName}")`).first();
      if (await row.count() > 0) {
        const checkboxes = row.locator('input[type="checkbox"]');
        const checkboxCount = await checkboxes.count();
        
        for (let i = 0; i < Math.min(checkboxCount, states.length); i++) {
          const checkbox = checkboxes.nth(i);
          const currentState = await checkbox.isChecked();
          const originalState = states[i];
          
          if (currentState !== originalState) {
            await checkbox.click();
            await page.waitForTimeout(200);
          }
        }
      }
    }
  }

  test('Test Case 1: Navigate to role permissions page', async ({ page }) => {
    printTestCase(1, 'Navigate to Role Permissions Page');
    
    const currentUrl = page.url();
    expect(currentUrl).toContain('/roles-permissions/roleAccess');
    expect(currentUrl).toContain(`role=${testRoleId}`);
    expect(currentUrl).not.toContain('/login');
    printSuccess('Role permissions page accessible');
    
    const heading = page.locator('h1.h3:has-text("Access Menu Permissions")');
    await expect(heading).toBeVisible();
    
    const headingText = await heading.textContent();
    console.log(`✓ Page heading: ${headingText}`);
    printSuccess('Permission management interface loaded');
  });

  test('Test Case 2: Verify permissions table structure', async ({ page }) => {
    printTestCase(2, 'Verify Permissions Table Structure');
    
    const permissionsTable = page.locator('#accessMenuTable');
    await expect(permissionsTable).toBeVisible();
    printSuccess('Permissions table visible');
    
    // Verify headers
    const headers = await permissionsTable.locator('thead th').allTextContents();
    console.log(`✓ Headers: ${headers.join(', ')}`);
    
    const expectedColumns = ['menu', 'url', 'view', 'new', 'edit', 'delete'];
    let foundCount = 0;
    for (const col of expectedColumns) {
      if (headers.some(h => h.toLowerCase().includes(col))) {
        foundCount++;
        console.log(`  ✓ ${col}`);
      }
    }
    
    expect(foundCount).toBeGreaterThanOrEqual(4);
    printSuccess(`Found ${foundCount} expected permission columns`);
    
    // Count rows
    const dataRows = await permissionsTable.locator('tbody tr').count();
    console.log(`✓ Permissions table has ${dataRows} menu items`);
    expect(dataRows).toBeGreaterThan(0);
  });

  test('Test Case 3: Test permission checkbox interaction', async ({ page }) => {
    printTestCase(3, 'Test Permission Checkbox Interaction');
    
    const permissionsTable = page.locator('#accessMenuTable');
    const firstRow = permissionsTable.locator('tbody tr').first();
    
    // Get menu name
    const menuName = await firstRow.locator('td').first().textContent();
    console.log(`✓ Testing permissions for: ${menuName}`);
    
    // Find checkboxes
    const checkboxes = firstRow.locator('input[type="checkbox"]');
    const checkboxCount = await checkboxes.count();
    
    if (checkboxCount === 0) {
      printWarning('No checkboxes found');
      return;
    }
    
    console.log(`✓ Found ${checkboxCount} permission checkboxes`);
    
    // Test first checkbox
    const firstCheckbox = checkboxes.first();
    const initialState = await firstCheckbox.isChecked();
    console.log(`✓ Initial state: ${initialState ? 'checked' : 'unchecked'}`);
    
    // Toggle checkbox
    await firstCheckbox.click();
    printSuccess('Clicked permission checkbox');
    await page.waitForTimeout(500);
    
    // Verify state changed
    const newState = await firstCheckbox.isChecked();
    expect(newState).toBe(!initialState);
    console.log(`✓ New state: ${newState ? 'checked' : 'unchecked'}`);
    printSuccess('Permission checkbox toggled successfully');
    
    // Toggle back
    await firstCheckbox.click();
    await page.waitForTimeout(500);
    
    const finalState = await firstCheckbox.isChecked();
    expect(finalState).toBe(initialState);
    printSuccess('Permission restored to original state');
  });

  test('Test Case 4: Test multiple permission toggles', async ({ page }) => {
    printTestCase(4, 'Test Multiple Permission Toggles');
    
    const permissionsTable = page.locator('#accessMenuTable');
    const testRows = Math.min(3, await permissionsTable.locator('tbody tr').count());
    
    console.log(`✓ Testing ${testRows} menu items`);
    
    const toggledPermissions: any[] = [];
    
    for (let i = 0; i < testRows; i++) {
      const row = permissionsTable.locator('tbody tr').nth(i);
      const menuName = await row.locator('td').first().textContent();
      const checkboxes = row.locator('input[type="checkbox"]');
      const checkboxCount = await checkboxes.count();
      
      if (checkboxCount > 0) {
        console.log(`\n  Testing row ${i + 1}: ${menuName}`);
        
        const checkbox = checkboxes.first();
        const initialState = await checkbox.isChecked();
        
        // Toggle checkbox
        await checkbox.click();
        await page.waitForTimeout(300);
        
        const newState = await checkbox.isChecked();
        expect(newState).toBe(!initialState);
        console.log(`    ✓ Toggled: ${initialState} -> ${newState}`);
        
        toggledPermissions.push({ row: i, checkbox: 0, originalState: initialState });
      }
    }
    
    printSuccess(`Successfully toggled ${toggledPermissions.length} permissions`);
    
    // Restore all permissions
    for (const perm of toggledPermissions) {
      const row = permissionsTable.locator('tbody tr').nth(perm.row);
      const checkbox = row.locator('input[type="checkbox"]').nth(perm.checkbox);
      const currentState = await checkbox.isChecked();
      
      if (currentState !== perm.originalState) {
        await checkbox.click();
        await page.waitForTimeout(200);
      }
    }
    
    printSuccess('All permissions restored to original state');
  });

  test('Test Case 5: Test permission types coverage', async ({ page }) => {
    printTestCase(5, 'Test Permission Types Coverage');
    
    const permissionsTable = page.locator('#accessMenuTable');
    const firstRow = permissionsTable.locator('tbody tr').first();
    
    const checkboxes = firstRow.locator('input[type="checkbox"]');
    const checkboxCount = await checkboxes.count();
    
    console.log(`✓ Each menu has ${checkboxCount} permission types`);
    
    // Typically: View, New, Edit, Delete = 4 permissions
    const expectedPermissions = 4;
    if (checkboxCount >= expectedPermissions) {
      printSuccess('All expected permission types present (View, New, Edit, Delete)');
    } else {
      printWarning(`Expected ${expectedPermissions} permissions, found ${checkboxCount}`);
    }
    
    // Test each permission type
    const permissionTypes = ['View', 'New', 'Edit', 'Delete'];
    for (let i = 0; i < Math.min(checkboxCount, permissionTypes.length); i++) {
      const checkbox = checkboxes.nth(i);
      const isEnabled = await checkbox.isEnabled();
      const isChecked = await checkbox.isChecked();
      
      console.log(`  ${permissionTypes[i]}: ${isEnabled ? 'enabled' : 'disabled'}, ${isChecked ? 'granted' : 'denied'}`);
    }
    
    printSuccess('Permission types verified');
  });

  test('Test Case 6: Test permission persistence across rows', async ({ page }) => {
    printTestCase(6, 'Test Permission Persistence Across Rows');
    
    const permissionsTable = page.locator('#accessMenuTable');
    const rowCount = await permissionsTable.locator('tbody tr').count();
    
    // Sample 3 different rows
    const sampleIndices = [0, Math.floor(rowCount / 2), rowCount - 1];
    
    for (const index of sampleIndices) {
      if (index >= rowCount) continue;
      
      const row = permissionsTable.locator('tbody tr').nth(index);
      const menuName = await row.locator('td').first().textContent();
      const checkboxes = row.locator('input[type="checkbox"]');
      const checkboxCount = await checkboxes.count();
      
      console.log(`\n  Row ${index + 1}: ${menuName} (${checkboxCount} permissions)`);
      
      // Count checked permissions
      let checkedCount = 0;
      for (let i = 0; i < checkboxCount; i++) {
        if (await checkboxes.nth(i).isChecked()) {
          checkedCount++;
        }
      }
      
      console.log(`    ${checkedCount}/${checkboxCount} permissions granted`);
    }
    
    printSuccess('Permission states consistent across table');
  });

  test('Test Case 7: Test menu URL information', async ({ page }) => {
    printTestCase(7, 'Test Menu URL Information');
    
    const permissionsTable = page.locator('#accessMenuTable');
    const sampleRows = Math.min(3, await permissionsTable.locator('tbody tr').count());
    
    for (let i = 0; i < sampleRows; i++) {
      const row = permissionsTable.locator('tbody tr').nth(i);
      const menuName = await row.locator('td').nth(0).textContent();
      const menuUrl = await row.locator('td').nth(1).textContent();
      
      console.log(`  ${menuName?.trim()} -> ${menuUrl?.trim() || '(empty)'}`);
      
      expect(menuName).toBeTruthy();
      // URL can be empty for some menu items, so just check it's not null
      expect(menuUrl).not.toBeNull();
    }
    
    printSuccess('Menu URL information verified');
  });

  test('Test Case 8: Test save permissions button', async ({ page }) => {
    printTestCase(8, 'Test Save Permissions Button');
    
    // Look for save/update/submit button
    const saveButton = page.locator('button:has-text("Save"), button:has-text("Update"), button[type="submit"]').first();
    
    if (await saveButton.count() > 0) {
      await expect(saveButton).toBeVisible();
      const buttonText = await saveButton.textContent();
      console.log(`✓ Save button found: "${buttonText}"`);
      printSuccess('Save permissions button present');
      
      // Verify button is enabled
      const isEnabled = await saveButton.isEnabled();
      expect(isEnabled).toBe(true);
      printSuccess('Save button is enabled');
    } else {
      printWarning('Save button not found - permissions may auto-save');
    }
  });

  test('Test Case 9: Test back navigation', async ({ page }) => {
    printTestCase(9, 'Test Back Navigation');
    
    // Look for back link or breadcrumb
    const backLink = page.locator('a:has-text("Back"), a:has-text("Users"), .breadcrumb a').first();
    
    if (await backLink.count() > 0) {
      const linkText = await backLink.textContent();
      const href = await backLink.getAttribute('href');
      
      console.log(`✓ Back link: "${linkText}" -> ${href}`);
      
      if (href) {
        // Accept any valid navigation link (not just /users)
        expect(href).toMatch(/^https?:\/\//);
        printSuccess('Back navigation link present');
        
        // Test navigation
        await backLink.click();
        await page.waitForLoadState('load');
        
        const currentUrl = page.url();
        console.log(`✓ Navigated to: ${currentUrl}`);
        printSuccess('Successfully navigated via back link');
        
        // Navigate back to permissions
        await page.goto(`/roles-permissions/roleAccess?role=${testRoleId}`);
        await page.waitForLoadState('load');
      }
    } else {
      printWarning('Back link not found - using browser back may be required');
    }
  });

  test('Test Case 10: Test responsive design', async ({ page }) => {
    printTestCase(10, 'Test Responsive Design');
    
    const viewports = [
      { width: 1280, height: 720, name: 'Desktop' },
      { width: 768, height: 1024, name: 'Tablet' },
      { width: 375, height: 667, name: 'Mobile' }
    ];
    
    for (const viewport of viewports) {
      await page.setViewportSize({ width: viewport.width, height: viewport.height });
      console.log(`\n📱 Testing ${viewport.name} (${viewport.width}x${viewport.height})`);
      await page.waitForTimeout(500);
      
      const permissionsTable = page.locator('#accessMenuTable');
      const tableVisible = await permissionsTable.isVisible();
      
      if (tableVisible) {
        console.log(`  ✓ Permissions table visible`);
        
        // Verify checkboxes are still accessible
        const firstCheckbox = permissionsTable.locator('input[type="checkbox"]').first();
        if (await firstCheckbox.count() > 0) {
          const isVisible = await firstCheckbox.isVisible();
          console.log(`  ${isVisible ? '✓' : '⚠'} Checkboxes ${isVisible ? 'accessible' : 'may require scrolling'}`);
        }
      } else {
        console.log(`  ⚠ Permissions table may require horizontal scrolling`);
      }
      
      // Check for responsive wrapper
      const tableWrapper = page.locator('.table-responsive');
      if (await tableWrapper.count() > 0) {
        console.log(`  ✓ Table has responsive wrapper`);
      }
    }
    
    // Reset viewport
    await page.setViewportSize({ width: 1280, height: 720 });
    printSuccess('All viewports tested successfully');
  });
});