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

test.describe('Final Master Dashboard CSS Verification', () => {
  const baseUrl = 'https://upskill-staging.measurequick.com';
  
  test('Master Dashboard CSS verification after deployment', async ({ page }) => {
    console.log('🔍 Final verification of Master Dashboard CSS after deployment...');
    
    // Navigate to master dashboard
    await page.goto(`${baseUrl}/master-trainer/dashboard/`, {
      waitUntil: 'networkidle'
    });
    
    // Take screenshot for final 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-final-verification.png');
    await page.screenshot({ 
      path: screenshotPath,
      fullPage: true 
    });
    console.log(`📸 Final 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📋 Final CSS Check:');
    const dashboardCssFound = stylesheets.some(sheet => {
      const isDashboardCss = sheet.href.includes('hvac-dashboard.css');
      if (isDashboardCss) {
        console.log(`✅ Dashboard CSS loaded: ${sheet.href}`);
      }
      return isDashboardCss;
    });
    
    // Check for WordPress header output (indicates get_header() working)
    const hasWpHead = await page.evaluate(() => {
      const hasGenerator = document.querySelector('meta[name="generator"][content*="WordPress"]');
      const hasWpScripts = document.querySelector('script[src*="wp-includes"]');
      const hasThemeStyles = document.querySelector('link[href*="themes"]');
      return !!(hasGenerator || hasWpScripts || hasThemeStyles);
    });
    
    // Check if redirected to login (expected behavior)
    const isLoginPage = page.url().includes('training-login');
    
    console.log('\n🔍 Final Integration Check:');
    console.log(`${hasWpHead ? '✅' : '❌'} WordPress header integration working`);
    console.log(`${dashboardCssFound ? '✅' : '❌'} Dashboard CSS file loading`);
    console.log(`${isLoginPage ? '✅' : '⚠️'} ${isLoginPage ? 'Redirected to login (correct)' : 'Direct access (check permissions)'}`);
    
    // Check if we can access the CSS file directly
    const cssResponse = await page.request.get(`${baseUrl}/wp-content/plugins/hvac-community-events/assets/css/hvac-dashboard.css`);
    const cssContent = await cssResponse.text();
    
    const hasNewCssVars = cssContent.includes('--hvac-spacing-6') && cssContent.includes('--hvac-radius-md');
    const hasMasterDashboardStyles = cssContent.includes('dashboard-section') && cssContent.includes('Master Dashboard');
    
    console.log('\n🎨 CSS Content Verification:');
    console.log(`${hasNewCssVars ? '✅' : '❌'} CSS variables defined`);
    console.log(`${hasMasterDashboardStyles ? '✅' : '❌'} Master dashboard styles included`);
    
    // Overall assessment
    console.log('\n📊 FINAL ASSESSMENT:');
    if (hasWpHead && dashboardCssFound && hasNewCssVars && hasMasterDashboardStyles) {
      console.log('🎉 MASTER DASHBOARD CSS FIX SUCCESSFUL!');
      console.log('✅ All components working correctly:');
      console.log('   • WordPress integration (get_header/get_footer)');
      console.log('   • CSS file loading');
      console.log('   • CSS variables defined');
      console.log('   • Master dashboard styles included');
      console.log('   • Authentication redirects working');
    } else {
      console.log('❌ Some issues remain:');
      if (!hasWpHead) console.log('  → WordPress header integration');
      if (!dashboardCssFound) console.log('  → CSS file loading');
      if (!hasNewCssVars) console.log('  → CSS variables missing');
      if (!hasMasterDashboardStyles) console.log('  → Master dashboard styles missing');
    }
    
    // Assertions for test
    expect(hasWpHead).toBe(true);
    expect(hasNewCssVars).toBe(true);
    expect(hasMasterDashboardStyles).toBe(true);
  });
});