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

test.describe('Quick CSS Verification', () => {
  test('check CSS loading and styling', async ({ page }) => {
    // Navigate to dashboard
    await page.goto('https://staging.upskillhvac.com/trainer/dashboard/');
    
    // Wait for page to load
    await page.waitForLoadState('networkidle');
    
    // Get all loaded stylesheets
    const stylesheets = await page.evaluate(() => {
      return Array.from(document.styleSheets).map(sheet => {
        try {
          return {
            href: sheet.href,
            rules: sheet.cssRules ? sheet.cssRules.length : 0
          };
        } catch (e) {
          return {
            href: sheet.href,
            rules: 'cross-origin'
          };
        }
      });
    });
    
    console.log('Loaded stylesheets:');
    stylesheets.forEach(sheet => {
      if (sheet.href && sheet.href.includes('hvac')) {
        console.log(`✓ ${sheet.href} (${sheet.rules} rules)`);
      }
    });
    
    // Check specific elements for styling
    const dashboardStyling = await page.evaluate(() => {
      const dashboard = document.querySelector('.hvac-dashboard, #hvac-dashboard, [class*="hvac"]');
      if (!dashboard) return { found: false };
      
      const styles = window.getComputedStyle(dashboard);
      return {
        found: true,
        display: styles.display,
        width: styles.width,
        maxWidth: styles.maxWidth,
        margin: styles.margin,
        padding: styles.padding,
        backgroundColor: styles.backgroundColor,
        color: styles.color
      };
    });
    
    console.log('\nDashboard element styling:', dashboardStyling);
    
    // Take screenshots
    await page.screenshot({ path: 'test-results/dashboard-full.png', fullPage: true });
    
    // Check for CSS debug logs in console
    const consoleLogs = [];
    page.on('console', msg => {
      if (msg.text().includes('HVAC CSS Debug')) {
        consoleLogs.push(msg.text());
      }
    });
    
    // Reload to capture logs
    await page.reload();
    await page.waitForLoadState('networkidle');
    
    if (consoleLogs.length > 0) {
      console.log('\nCSS Debug logs:');
      consoleLogs.forEach(log => console.log(log));
    }
    
    // Visual comparison - check if page looks styled
    const hasVisualStyling = await page.evaluate(() => {
      // Check for non-default styling
      const body = document.body;
      const bodyStyles = window.getComputedStyle(body);
      
      // Look for custom fonts, colors, or layouts
      const hasCustomFont = !bodyStyles.fontFamily.includes('Times New Roman');
      const hasCustomColors = bodyStyles.backgroundColor !== 'rgba(0, 0, 0, 0)' && 
                             bodyStyles.backgroundColor !== 'rgb(255, 255, 255)';
      const hasLayout = document.querySelector('[class*="container"], [class*="wrapper"], [class*="hvac"]');
      
      return {
        customFont: hasCustomFont,
        customColors: hasCustomColors,
        hasLayout: !!hasLayout,
        isStyled: hasCustomFont || hasCustomColors || !!hasLayout
      };
    });
    
    console.log('\nVisual styling check:', hasVisualStyling);
    
    expect(hasVisualStyling.isStyled).toBe(true);
  });
});