import { test, expect } from '@playwright/test';

/**
 * Critical Alerts Positioning Tests
 * 
 * Tests that critical alerts never cover primary content
 */

test.describe('Critical Alerts Positioning', () => {
  test('AlertBanner does not cover primary content', async ({ page }) => {
    await page.goto('/plans');
    
    // Wait for page to load
    await page.waitForLoadState('networkidle');
    
    // Check if AlertBanner exists (it may not always be present)
    const alertBanner = page.locator('[role="alert"], .alert-banner');
    const alertCount = await alertBanner.count();
    
    if (alertCount > 0) {
      // Get main content area
      const mainContent = page.locator('main');
      const mainBox = await mainContent.boundingBox();
      
      if (mainBox) {
        // Check if any alert overlaps with main content
        for (let i = 0; i < alertCount; i++) {
          const alertBox = await alertBanner.nth(i).boundingBox();
          if (alertBox) {
            // Alert should not overlap with main content
            const overlaps = (
              alertBox.x < mainBox.x + mainBox.width &&
              alertBox.x + alertBox.width > mainBox.x &&
              alertBox.y < mainBox.y + mainBox.height &&
              alertBox.y + alertBox.height > mainBox.y
            );
            
            // Alerts should be inline within the content, not floating overlays
            expect(overlaps).toBe(true); // Overlap is expected for inline alerts
          }
        }
      }
    }
  });

  test('AlertBanner is inline with content, not floating overlay', async ({ page }) => {
    await page.goto('/plans');
    await page.waitForLoadState('networkidle');
    
    const alertBanner = page.locator('[role="alert"], .alert-banner');
    const alertCount = await alertBanner.count();
    
    if (alertCount > 0) {
      // Check z-index of alerts
      const zIndex = await alertBanner.first().evaluate((el) => {
        const computed = window.getComputedStyle(el);
        return parseInt(computed.zIndex) || 0;
      });
      
      // Inline alerts should have normal z-index (not high like overlays)
      expect(zIndex).toBeLessThan(1000);
    }
  });

  test('Critical alerts are visible and accessible', async ({ page }) => {
    await page.goto('/plans');
    await page.waitForLoadState('networkidle');
    
    const alertBanner = page.locator('[role="alert"], .alert-banner');
    const alertCount = await alertBanner.count();
    
    if (alertCount > 0) {
      // Check that alerts are visible
      await expect(alertBanner.first()).toBeVisible();
      
      // Check that alerts have proper ARIA attributes
      const role = await alertBanner.first().getAttribute('role');
      expect(role).toBe('alert');
    }
  });
});