import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
import { test } from '@playwright/test';

test.describe('Debug Dashboard Stats Simple', () => {
  test('Check dashboard stats display directly', async ({ page }) => {
    // Login directly
    await page.goto('https://upskill-staging.measurequick.com/community-login/');
    await page.fill('#user_login', 'test_trainer');
    await page.fill('#user_pass', 'Test123!');
    await page.click('#wp-submit');
    
    // Wait for login to complete
    await page.waitForURL('**/hvac-dashboard/');
    
    // Wait for dashboard to load
    await page.waitForLoadState('networkidle');
    
    // Take screenshot for debugging
    await page.screenshot({ path: 'test-results/dashboard-initial.png', fullPage: true });
    
    // Look for stats in the HTML
    const statSections = await page.$$eval('.hvac-stat-card', cards => 
      cards.map(card => ({
        title: card.querySelector('h3')?.textContent || '',
        value: card.querySelector('p')?.textContent || ''
      }))
    );
    
    console.log('Dashboard stats found:', statSections);
    
    // Get all inline scripts
    const inlineScripts = await page.$$eval('script:not([src])', scripts => 
      scripts.map(script => script.textContent || '')
    );
    
    console.log('Number of inline scripts:', inlineScripts.length);
    
    // Check specifically for data in the rendered HTML
    const totalEventsText = await page.locator('.hvac-stat-card:has(h3:text("Total Events")) p').textContent();
    console.log('Total Events displayed:', totalEventsText);
    
    const upcomingEventsText = await page.locator('.hvac-stat-card:has(h3:text("Upcoming Events")) p').textContent();
    console.log('Upcoming Events displayed:', upcomingEventsText);
    
    const totalRevenueText = await page.locator('.hvac-stat-card:has(h3:text("Total Revenue")) p').textContent();
    console.log('Total Revenue displayed:', totalRevenueText);
    
    // Check if there's any JavaScript that might be updating the values
    const hasJavaScriptUpdates = await page.evaluate(() => {
      // Check if there are any data attributes or JavaScript variables
      const statCards = document.querySelectorAll('.hvac-stat-card');
      const results: any[] = [];
      
      statCards.forEach(card => {
        const title = card.querySelector('h3')?.textContent || '';
        const valueElement = card.querySelector('p');
        
        results.push({
          title,
          innerText: valueElement?.innerText || '',
          innerHTML: valueElement?.innerHTML || '',
          textContent: valueElement?.textContent || '',
          hasDataAttributes: Object.keys(valueElement?.dataset || {}).length > 0,
          dataAttributes: valueElement?.dataset || {}
        });
      });
      
      return results;
    });
    
    console.log('JavaScript evaluation results:', JSON.stringify(hasJavaScriptUpdates, null, 2));
    
    // Check the network tab for any AJAX requests
    const apiRequests: string[] = [];
    
    page.on('request', request => {
      if (request.url().includes('admin-ajax.php') || request.url().includes('wp-json')) {
        apiRequests.push(`${request.method()} ${request.url()}`);
      }
    });
    
    // Reload the page to capture network requests
    await page.reload();
    await page.waitForLoadState('networkidle');
    
    console.log('API requests made:', apiRequests);
    
    // Check for any console errors
    page.on('console', msg => {
      if (msg.type() === 'error') {
        console.log('Console error:', msg.text());
      }
    });
    
    // Final screenshot
    await page.screenshot({ path: 'test-results/dashboard-after-reload.png', fullPage: true });
  });
});