import { test, expect } from '@playwright/test';
import * as fs from 'fs';
import * as path from 'path';

test.describe('Master Dashboard CSS Verification', () => {
  const baseUrl = 'https://upskill-staging.measurequick.com';
  
  test('Master Dashboard CSS loads correctly', async ({ page }) => {
    console.log('🔍 Testing Master Dashboard CSS loading...');
    
    // Navigate to master dashboard
    await page.goto(`${baseUrl}/master-trainer/dashboard/`, {
      waitUntil: 'networkidle'
    });
    
    // Check if redirected to login
    if (page.url().includes('training-login')) {
      console.log('📝 Redirected to login page - this is expected behavior');
    }
    
    // Take screenshot for visual verification
    const screenshotDir = path.join(process.cwd(), 'test-results', 'screenshots');
    if (!fs.existsSync(screenshotDir)) {
      fs.mkdirSync(screenshotDir, { recursive: true });
    }
    
    const screenshotPath = path.join(screenshotDir, 'master-dashboard-css-verification.png');
    await page.screenshot({ 
      path: screenshotPath,
      fullPage: true 
    });
    console.log(`📸 Screenshot saved: ${screenshotPath}`);
    
    // Check for CSS files in network
    const stylesheets = await page.evaluate(() => {
      const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
      return links.map(link => ({
        href: link.href,
        loaded: link.sheet !== null
      }));
    });
    
    console.log('\n📋 Loaded Stylesheets:');
    const dashboardCssFound = stylesheets.some(sheet => {
      const isDashboardCss = sheet.href.includes('hvac-dashboard.css');
      if (isDashboardCss) {
        console.log(`✅ Found hvac-dashboard.css: ${sheet.href}`);
      }
      return isDashboardCss;
    });
    
    // Check for WordPress header output
    const hasWpHead = await page.evaluate(() => {
      const hasGenerator = document.querySelector('meta[name="generator"][content*="WordPress"]');
      const hasWpScripts = document.querySelector('script[src*="wp-includes"]');
      return !!(hasGenerator || hasWpScripts);
    });
    
    console.log(`\n🔍 WordPress Integration:`);
    console.log(`${hasWpHead ? '✅' : '❌'} WordPress header output detected`);
    
    // Check for master dashboard specific elements
    if (!page.url().includes('training-login')) {
      const elements = {
        '.dashboard-section': 'Dashboard sections',
        '.section-title': 'Section titles',
        '.events-filters': 'Event filters',
        '.trainers-table': 'Trainers table',
        '.pagination-container': 'Pagination'
      };
      
      console.log('\n📋 Master Dashboard Elements:');
      for (const [selector, description] of Object.entries(elements)) {
        const exists = await page.locator(selector).first().isVisible().catch(() => false);
        console.log(`${exists ? '✅' : '❌'} ${description} (${selector})`);
      }
      
      // Check CSS variables
      const cssVars = await page.evaluate(() => {
        const styles = getComputedStyle(document.documentElement);
        return {
          spacing6: styles.getPropertyValue('--hvac-spacing-6'),
          radiusMd: styles.getPropertyValue('--hvac-radius-md'),
          themeText: styles.getPropertyValue('--hvac-theme-text'),
          themePrimary: styles.getPropertyValue('--hvac-theme-primary')
        };
      });
      
      console.log('\n🎨 CSS Variables:');
      console.log(`--hvac-spacing-6: ${cssVars.spacing6 || 'NOT DEFINED'}`);
      console.log(`--hvac-radius-md: ${cssVars.radiusMd || 'NOT DEFINED'}`);
      console.log(`--hvac-theme-text: ${cssVars.themeText || 'NOT DEFINED'}`);
      console.log(`--hvac-theme-primary: ${cssVars.themePrimary || 'NOT DEFINED'}`);
    }
    
    // Overall assessment
    console.log('\n📊 Overall Assessment:');
    if (dashboardCssFound && hasWpHead) {
      console.log('✅ CSS is loading correctly!');
      console.log('✅ WordPress integration working!');
      console.log('🎉 Master Dashboard CSS fix successful!');
    } else {
      console.log('❌ CSS loading issues detected');
      if (!dashboardCssFound) console.log('  → hvac-dashboard.css not found');
      if (!hasWpHead) console.log('  → WordPress header missing (check get_header())');
    }
    
    // Assertions
    expect(hasWpHead).toBe(true);
    if (!page.url().includes('training-login')) {
      expect(dashboardCssFound).toBe(true);
    }
  });
});