import { test } from '@playwright/test';
import { DashboardPage } from './pages/DashboardPage';
import { LoginPage } from './pages/LoginPage';

test.describe('Debug Dashboard Stats', () => {
  test('Check dashboard stats display', async ({ page }) => {
    // Login first
    const loginPage = new LoginPage(page);
    const dashboardPage = new DashboardPage(page);
    
    await loginPage.goto();
    await loginPage.login('test_trainer', 'Test123!');
    
    // Navigate to dashboard
    await dashboardPage.goto();
    
    // Wait for dashboard to load
    await page.waitForLoadState('networkidle');
    
    // Capture the dashboard content
    const pageContent = await page.content();
    console.log('Dashboard HTML content captured');
    
    // 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:', statSections);
    
    // Check for script tags that might be rendering the data
    const scriptContent = await page.$$eval('script', scripts => 
      scripts.map(script => script.textContent || '').filter(content => 
        content.includes('total_events') || 
        content.includes('hvac_dashboard') ||
        content.includes('dashboard_data')
      )
    );
    
    console.log('Relevant scripts:', scriptContent);
    
    // Check for data attributes
    const dataAttributes = await page.$$eval('[data-stat-count], [data-event-count], [data-total-events]', elements => 
      elements.map(el => ({
        tag: el.tagName,
        classes: el.className,
        dataAttrs: Object.keys(el.dataset).reduce((acc, key) => {
          acc[key] = el.dataset[key];
          return acc;
        }, {} as Record<string, string>),
        text: el.textContent
      }))
    );
    
    console.log('Data attributes:', dataAttributes);
    
    // Take a screenshot for visual inspection
    await page.screenshot({ path: 'test-results/dashboard-stats-debug.png', fullPage: true });
    
    // Also check network requests for API calls
    const apiCalls: string[] = [];
    page.on('request', request => {
      if (request.url().includes('admin-ajax.php') || request.url().includes('wp-json')) {
        apiCalls.push(request.url());
      }
    });
    
    // Reload the page to capture network requests
    await page.reload();
    await page.waitForLoadState('networkidle');
    
    console.log('API calls made:', apiCalls);
  });
});