/**
 * Test for Dashboard Layout Improvements
 * 
 * This test verifies that the dashboard stats section renders with
 * proper row layout
 */

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

test.describe('Trainer Dashboard Layout', () => {
  test('should display stats section in a row layout', async ({ page }) => {
    // Login Steps
    await page.goto('/community-login/');
    
    const usernameField = page.locator('#user_login');
    const passwordField = page.locator('#user_pass');
    const loginButton = page.locator('#wp-submit');
    
    // Use environment variables or default test credentials
    const username = process.env.TEST_USERNAME || 'test_trainer';
    const password = process.env.TEST_PASSWORD || 'Test123!';
    
    await usernameField.fill(username);
    await passwordField.fill(password);
    await loginButton.click();
    
    // Wait for dashboard to load
    await page.waitForURL('/hvac-dashboard/', { timeout: 15000 });
    console.log('Successfully logged in and redirected to dashboard.');
    
    // Take a screenshot for visual verification
    await page.screenshot({ path: 'dashboard-stats-layout.png', fullPage: false });
    
    // Verify that the stats section exists with row layout
    const statsSection = page.locator('.hvac-stats-row');
    await expect(statsSection).toBeVisible();
    
    // Verify that we have multiple stat columns
    const statColumns = page.locator('.hvac-stat-col');
    const count = await statColumns.count();
    expect(count).toBeGreaterThanOrEqual(4); // We should have at least 4 stat cards
    
    // Check for horizontal layout (desktop view)
    // This test confirms stats are in a row by verifying the second card is to the right of the first
    if (page.viewportSize()?.width && page.viewportSize().width >= 768) {
      const firstCard = await statColumns.nth(0).boundingBox();
      const secondCard = await statColumns.nth(1).boundingBox();
      
      if (firstCard && secondCard) {
        // In row layout, the second card should be to the right of the first
        expect(secondCard.x).toBeGreaterThan(firstCard.x);
        console.log('Stats cards display in a row as expected (second card x-position is to the right of first card)');
      }
    } else {
      console.log('Viewport too narrow for row layout test, cards may be stacked vertically');
    }
    
    // Check that all cards have same height for visual consistency
    const heights = [];
    for (let i = 0; i < Math.min(count, 4); i++) {
      const box = await statColumns.nth(i).boundingBox();
      if (box) {
        heights.push(box.height);
      }
    }
    
    // Check if all heights are approximately the same (within 5px tolerance)
    if (heights.length >= 2) {
      const baseHeight = heights[0];
      for (let i = 1; i < heights.length; i++) {
        expect(Math.abs(heights[i] - baseHeight)).toBeLessThanOrEqual(5);
      }
      console.log('All stat cards have consistent heights');
    }
  });
});