/**
 * Pricing Rules Management Tests
 * 
 * This test suite covers pricing rules management functionality including:
 * - Navigation to pricing rules interface
 * - Rule creation and configuration
 * - Rule application to products
 * - Rule management operations
 * - Rule validation and business logic
 * 
 * Based on Katalon test: Pricing_Rules_Management.tc
 */

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

test.describe('05_Price_Management - Pricing Rules Management', () => {
  // Use authenticated state for all tests in this suite
  test.use({ storageState: 'auth.json' });

  // Track test data for cleanup
  const testData = {
    mappingRuleIds: [] as number[]
  };

  test.beforeEach(async ({ page }) => {
    // Ensure we're authenticated before navigating anywhere
    await ensureAuthenticated(page);
    
    console.log('\n🚀 Navigating to product management page...');
    await page.goto('/productmanagement');
    await page.waitForLoadState('load');
    
    // Navigate to Mapping Rules tab
    await page.locator('#mapping-tab').click();
    await page.waitForTimeout(1000);
    console.log('✅ Mapping Rules tab activated');
  });

  test.afterEach(async ({ page }) => {
    // Clean up test data
    console.log('\n🧹 Cleaning up test data...');
    
    // Clean up mapping rules
    for (const ruleId of testData.mappingRuleIds) {
      try {
        await page.evaluate(async (id) => {
          const response = await fetch(`/productmanagement/mapping/delete/${id}`, {
            method: 'POST',
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
          });
          return response.ok;
        }, ruleId);
      } catch (error) {
        console.warn(`Failed to cleanup mapping rule ${ruleId}:`, error);
      }
    }
    
    // Clear test data arrays
    testData.mappingRuleIds = [];
    
    console.log('✅ Test data cleanup completed');
  });

  test('Test Case 1: Navigate to pricing rules management page', async ({ page }) => {
    printTestCase(1, 'Navigate to Pricing Rules Management Page');
    
    const currentUrl = page.url();
    expect(currentUrl).toContain('/productmanagement');
    expect(currentUrl).not.toContain('/login');
    printSuccess('Product management page accessible');
    
    const heading = page.locator('h1:has-text("Price File Mapping Rules")');
    await expect(heading).toBeVisible();
    printSuccess('Price File Mapping Rules heading visible');
    
    // Note: No breadcrumbs in this system - navigation is via tabs
    
    // Verify we're on the correct tab
    const mappingTab = page.locator('#mapping-tab');
    await expect(mappingTab).toHaveClass(/active/);
    printSuccess('Mapping Rules tab is active');
    
    // Verify the main container and card structure
    const mainContainer = page.locator('.container-fluid.px-4').filter({ hasText: 'Price File Mapping Rules' });
    await expect(mainContainer).toBeVisible();
    
    const cardBody = page.locator('#mapping .bg-white.rounded-4.p-3.mb-3.shadow-sm .card-body');
    await expect(cardBody).toBeVisible();
    printSuccess('Main container and card structure present');
  });

  test('Test Case 2: Test pricing rules table structure', async ({ page }) => {
    printTestCase(2, 'Test Pricing Rules Table Structure');
    
    // Wait for DataTable to initialize
    await waitForDataTable(page, '#mappingRulesTable');
    
    const rulesTable = page.locator('#mappingRulesTable');
    await expect(rulesTable).toBeVisible();
    printSuccess('Mapping rules table visible');
    
    // Check table headers based on actual system structure
    const headers = ['Rule Details', 'Seller', 'Created Info', 'Updated Info', 'Status', 'Actions'];
    for (const header of headers) {
      const headerElement = rulesTable.locator(`th:has-text("${header}")`);
      if (await headerElement.count() > 0) {
        // Check if header is visible, but don't fail if it's hidden due to DataTable sorting
        const isVisible = await headerElement.first().isVisible();
        if (isVisible) {
          console.log(`  ✓ Header "${header}" present`);
        } else {
          console.log(`  ⚠ Header "${header}" present but hidden (likely due to sorting)`);
        }
      } else {
        console.log(`  ⚠ Header "${header}" not found`);
      }
    }
    printSuccess('Table headers verified');
    
    // Check for search functionality
    const searchInput = page.locator('#mappingRulesSearch');
    await expect(searchInput).toBeVisible();
    printSuccess('Search input present');
    
    // Check for filters based on actual system structure
    const companyFilter = page.locator('#companyFilterMapping');
    if (await companyFilter.count() > 0) {
      await expect(companyFilter).toBeVisible();
      printSuccess('Company filter present');
    }
    
    const statusFilter = page.locator('#statusFilterMapping');
    if (await statusFilter.count() > 0) {
      await expect(statusFilter).toBeVisible();
      printSuccess('Status filter present');
    }
    
    // Check for items per page selector (target the main table, not modal table)
    const itemsPerPage = page.locator('#mapping #mappingRulesTable_length').first();
    if (await itemsPerPage.count() > 0) {
      await expect(itemsPerPage).toBeVisible();
      printSuccess('Items per page selector present');
    }
    
    // Check for clear filters button
    const clearFiltersBtn = page.locator('#clearFiltersMapping');
    if (await clearFiltersBtn.count() > 0) {
      await expect(clearFiltersBtn).toBeVisible();
      printSuccess('Clear filters button present');
    }
  });

  test('Test Case 3: Test pricing rules search functionality', async ({ page }) => {
    printTestCase(3, 'Test Pricing Rules Search Functionality');
    
    await waitForDataTable(page, '#mappingRulesTable');
    
    const searchInput = page.locator('#mappingRulesSearch');
    await expect(searchInput).toBeVisible();
    
    // Get initial row count
    const rulesTable = page.locator('#mappingRulesTable');
    const initialRows = await rulesTable.locator('tbody tr').count();
    console.log(`Initial rows: ${initialRows}`);
    
    if (initialRows > 0) {
      // Test search with a term
      await searchInput.fill('test');
      await page.waitForTimeout(2000);
      
      const filteredRows = await rulesTable.locator('tbody tr').count();
      console.log(`Filtered rows: ${filteredRows}`);
      
      expect(filteredRows).toBeLessThanOrEqual(initialRows);
      printSuccess('Search filtering working');
      
      // Clear search
      await searchInput.clear();
      await page.waitForTimeout(2000);
      
      const clearedRows = await rulesTable.locator('tbody tr').count();
      expect(clearedRows).toBe(initialRows);
      printSuccess('Search clear functionality working');
    } else {
      printWarning('No mapping rules to test search functionality');
    }
  });

  test('Test Case 4: Test create pricing rule modal', async ({ page }) => {
    printTestCase(4, 'Test Create Pricing Rule Modal');
    
    // Look for create button based on actual system structure
    const createBtn = page.locator('button[data-bs-target="#createMappingRuleModal"]');
    if (await createBtn.count() > 0) {
      await createBtn.click();
      await page.waitForTimeout(1000);
      
      // Check for create modal
      const createModal = page.locator('#createMappingRuleModal');
      if (await createModal.count() > 0) {
        await expect(createModal).toBeVisible();
        printSuccess('Create mapping rule modal opened');
        
        // Check for modal title
        const modalTitle = createModal.locator('.modal-title');
        await expect(modalTitle).toContainText('Create Mapping Rule');
        printSuccess('Modal title correct');
        
        // Check for required form elements based on actual system structure
        const requiredElements = [
          { selector: 'input[name="mapping_rule_name"], input[id*="name"]', name: 'Mapping rule name input' },
          { selector: 'textarea[name="description"], textarea[id*="description"]', name: 'Description textarea' },
          { selector: 'select[name="seller_id"], select[id*="seller"]', name: 'Seller dropdown' }
        ];
        
        for (const element of requiredElements) {
          const elementLocator = createModal.locator(element.selector);
          if (await elementLocator.count() > 0) {
            await expect(elementLocator).toBeVisible();
            console.log(`  ✓ ${element.name} present`);
          } else {
            console.log(`  ⚠ ${element.name} not found`);
          }
        }
        
        // Check for submit button
        const submitBtn = createModal.locator('button[type="submit"], button:has-text("Create"), button:has-text("Save")');
        if (await submitBtn.count() > 0) {
          await expect(submitBtn).toBeVisible();
          printSuccess('Create submit button present');
        }
        
        // Close modal
        const closeBtn = createModal.locator('button.btn-close, button:has-text("Close")');
        if (await closeBtn.count() > 0) {
          await closeBtn.click();
          await page.waitForTimeout(500);
          printSuccess('Create modal closed');
        }
      } else {
        printWarning('Create mapping rule modal not found');
      }
    } else {
      printWarning('Create mapping rule button not found');
    }
  });

  test('Test Case 5: Test pricing rule form validation', async ({ page }) => {
    printTestCase(5, 'Test Pricing Rule Form Validation');
    
    // Open create modal
    const createBtn = page.locator('button[data-bs-target="#createMappingRuleModal"]');
    if (await createBtn.count() > 0) {
      await createBtn.click();
      await page.waitForTimeout(1000);
      
      const createModal = page.locator('#createMappingRuleModal, .modal:has-text("Create"), .modal:has-text("Add")');
      if (await createModal.count() > 0) {
        // Try to submit form without filling required fields
        const submitBtn = createModal.locator('#createMappingRuleBtn');
        if (await submitBtn.count() > 0) {
          await submitBtn.click();
          await page.waitForTimeout(1000);
          
          // Check for validation errors
          const errorMessages = createModal.locator('.error, .invalid-feedback, .text-danger');
          const errorCount = await errorMessages.count();
          
          if (errorCount > 0) {
            console.log(`Found ${errorCount} validation error messages`);
            printSuccess('Form validation errors displayed');
          } else {
            // Check if form submission was prevented
            const isModalStillOpen = await createModal.isVisible();
            if (isModalStillOpen) {
              printSuccess('Form submission prevented (validation working)');
            } else {
              printWarning('Form validation may not be working properly');
            }
          }
        }
        
        // Close modal using the specific modal's close button
        const closeBtn = page.locator('#createMappingRuleModal .btn-close');
        if (await closeBtn.count() > 0) {
          await closeBtn.click();
          await page.waitForTimeout(500);
        }
      }
    }
  });

  test('Test Case 6: Test pricing rule edit functionality', async ({ page }) => {
    printTestCase(6, 'Test Pricing Rule Edit Functionality');
    
    await waitForDataTable(page, '#mappingRulesTable, table');
    
    // Look for edit buttons in the table
    const rulesTable = page.locator('#mappingRulesTable, table').first();
    const editButtons = rulesTable.locator('tbody tr button:has-text("Edit"), tbody tr a:has-text("Edit")');
    const editButtonCount = await editButtons.count();
    
    if (editButtonCount > 0) {
      console.log(`Found ${editButtonCount} edit buttons`);
      
      // Click first edit button
      await editButtons.first().click();
      await page.waitForTimeout(2000);
      
      // Check for edit modal
      const editModal = page.locator('#editMappingRuleModal, .modal:has-text("Edit")');
      if (await editModal.count() > 0) {
        await expect(editModal).toBeVisible();
        printSuccess('Edit modal opened');
        
        // Check for pre-populated form fields
        const ruleNameInput = editModal.locator('input[name="rule_name"], #rule_name');
        if (await ruleNameInput.count() > 0) {
          const ruleNameValue = await ruleNameInput.inputValue();
          if (ruleNameValue) {
            console.log(`Rule name pre-populated: ${ruleNameValue}`);
            printSuccess('Rule name field pre-populated');
          }
        }
        
        // Close modal
        const closeBtn = editModal.locator('button.btn-close, button:has-text("Close")');
        if (await closeBtn.count() > 0) {
          await closeBtn.click();
          await page.waitForTimeout(500);
          printSuccess('Edit modal closed');
        }
      } else {
        printWarning('Edit modal not found');
      }
    } else {
      printWarning('No edit buttons found in pricing rules table');
    }
  });

  test('Test Case 7: Test pricing rule status toggle', async ({ page }) => {
    printTestCase(7, 'Test Pricing Rule Status Toggle');
    
    await waitForDataTable(page, '#mappingRulesTable, table');
    
    // Look for status toggle buttons
    const rulesTable = page.locator('#mappingRulesTable, table').first();
    const statusButtons = rulesTable.locator('tbody tr button:has-text("Toggle"), tbody tr .toggle-status');
    const statusButtonCount = await statusButtons.count();
    
    if (statusButtonCount > 0) {
      console.log(`Found ${statusButtonCount} status toggle buttons`);
      
      // Get initial status
      const firstRow = rulesTable.locator('tbody tr').first();
      const statusCell = firstRow.locator('td').nth(2); // Assuming status is 3rd column
      const initialStatus = await statusCell.textContent();
      console.log(`Initial status: ${initialStatus}`);
      
      // Click first status toggle button
      await statusButtons.first().click();
      await page.waitForTimeout(2000);
      
      // Check for confirmation modal
      const confirmModal = page.locator('.swal2-popup, .modal:has-text("confirm")');
      if (await confirmModal.count() > 0) {
        await expect(confirmModal).toBeVisible();
        printSuccess('Status toggle confirmation modal appeared');
        
        // Cancel the action
        const cancelBtn = confirmModal.locator('.swal2-cancel, button:has-text("Cancel")');
        if (await cancelBtn.count() > 0) {
          await cancelBtn.click();
          await page.waitForTimeout(1000);
          printSuccess('Status toggle cancelled');
        }
      } else {
        printWarning('Status toggle confirmation modal not found');
      }
    } else {
      printWarning('No status toggle buttons found in pricing rules table');
    }
  });

  test('Test Case 8: Test pricing rule delete functionality', async ({ page }) => {
    printTestCase(8, 'Test Pricing Rule Delete Functionality');
    
    await waitForDataTable(page, '#mappingRulesTable, table');
    
    // Look for delete buttons in the table
    const rulesTable = page.locator('#mappingRulesTable, table').first();
    const deleteButtons = rulesTable.locator('tbody tr button:has-text("Delete"), tbody tr a:has-text("Delete")');
    const deleteButtonCount = await deleteButtons.count();
    
    if (deleteButtonCount > 0) {
      console.log(`Found ${deleteButtonCount} delete buttons`);
      
      // Click first delete button
      await deleteButtons.first().click();
      await page.waitForTimeout(2000);
      
      // Check for confirmation modal
      const confirmModal = page.locator('.swal2-popup, .modal:has-text("Delete")');
      if (await confirmModal.count() > 0) {
        await expect(confirmModal).toBeVisible();
        printSuccess('Delete confirmation modal appeared');
        
        // Cancel the deletion
        const cancelBtn = confirmModal.locator('.swal2-cancel, button:has-text("Cancel")');
        if (await cancelBtn.count() > 0) {
          await cancelBtn.click();
          await page.waitForTimeout(1000);
          printSuccess('Delete action cancelled');
        }
      } else {
        printWarning('Delete confirmation modal not found');
      }
    } else {
      printWarning('No delete buttons found in pricing rules table');
    }
  });

  test('Test Case 9: Test functional mapping rule workflow', async ({ page }) => {
    printTestCase(9, 'Test Functional Mapping Rule Workflow');
    
    // Test creating a mapping rule
    const createBtn = page.locator('button[data-bs-target="#createMappingRuleModal"]');
    if (await createBtn.count() > 0) {
      await createBtn.click();
      await page.waitForTimeout(1000);
      
      const createModal = page.locator('#createMappingRuleModal');
      if (await createModal.count() > 0) {
        await expect(createModal).toBeVisible();
        
        // Fill form fields based on actual system structure
        const nameField = createModal.locator('input[name="mapping_rule_name"], input[id*="name"]');
        if (await nameField.count() > 0) {
          await nameField.fill('Test Mapping Rule');
        }
        
        const descriptionField = createModal.locator('textarea[name="description"], textarea[id*="description"]');
        if (await descriptionField.count() > 0) {
          await descriptionField.fill('Test description for mapping rule');
        }
        
        const sellerField = createModal.locator('select[name="seller_id"], select[id*="seller"]');
        if (await sellerField.count() > 0) {
          // Select first available seller
          const options = await sellerField.locator('option').count();
          if (options > 1) { // More than just the default option
            await sellerField.selectOption({ index: 1 });
          }
        }
        
        // Submit form
        const submitBtn = createModal.locator('button[type="submit"], button:has-text("Create"), button:has-text("Save")');
        if (await submitBtn.count() > 0) {
          await submitBtn.click();
          await page.waitForTimeout(2000);
          
          // Verify success message or table update
          const successMessage = page.locator('.alert-success, .toast-success, .success-message');
          if (await successMessage.count() > 0) {
            await expect(successMessage).toBeVisible();
            printSuccess('Mapping rule created successfully');
          }
          
          // Verify rule appears in table
          const rulesTable = page.locator('#mappingRulesTable');
          const ruleRow = rulesTable.locator('tr:has-text("Test Mapping Rule")').first();
          if (await ruleRow.count() > 0) {
            await expect(ruleRow).toBeVisible();
            printSuccess('Mapping rule appears in table');
            
            // Store the rule ID for cleanup
            const ruleId = await page.evaluate(() => {
              const rows = document.querySelectorAll('tr');
              for (const row of rows) {
                if (row.textContent && row.textContent.includes('Test Mapping Rule')) {
                  const editBtn = row.querySelector('button[onclick*="editMappingRule"]');
                  if (editBtn) {
                    const onclick = editBtn.getAttribute('onclick');
                    const match = onclick?.match(/editMappingRule\((\d+)\)/);
                    return match ? parseInt(match[1]) : null;
                  }
                }
              }
              return null;
            });
            
            if (ruleId) {
              testData.mappingRuleIds.push(ruleId);
              console.log(`  ✓ Stored mapping rule ID ${ruleId} for cleanup`);
            }
          }
        }
      }
    } else {
      printWarning('Create mapping rule button not found');
    }
  });

  test('Test Case 10: Test responsive design', async ({ page }) => {
    printTestCase(10, 'Test Responsive Design');
    
    await waitForDataTable(page, '#mappingRulesTable');
    
    // Test different viewport sizes
    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 });
      await page.waitForTimeout(1000);
      
      console.log(`📱 Testing ${viewport.name} (${viewport.width}x${viewport.height})`);
      
      // Check if table is still visible
      const rulesTable = page.locator('#mappingRulesTable');
      if (await rulesTable.count() > 0) {
        await expect(rulesTable).toBeVisible();
        console.log(`  ✓ Mapping rules table visible`);
      }
      
      // Check if search is still accessible
      const searchInput = page.locator('#mappingRulesSearch');
      if (await searchInput.count() > 0) {
        await expect(searchInput).toBeVisible();
        console.log(`  ✓ Search input visible`);
      }
      
      // Check if create button is still accessible
      const createBtn = page.locator('button[data-bs-target="#createMappingRuleModal"]');
      if (await createBtn.count() > 0) {
        await expect(createBtn).toBeVisible();
        console.log(`  ✓ Create button visible`);
      }
    }
    
    // Reset to desktop view
    await page.setViewportSize({ width: 1280, height: 720 });
    printSuccess('Responsive design test completed');
  });
});