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

test.describe('Final Dashboard Verification', () => {
  test('verify dashboard displays with proper login', async ({ page }) => {
    const staging_url = 'https://upskill-staging.measurequick.com';
    
    // Start fresh with dashboard page
    console.log('1. Going to dashboard page...');
    await page.goto(`${staging_url}/hvac-dashboard/`);
    await page.waitForLoadState('networkidle');
    
    // Take initial screenshot
    await page.screenshot({ path: 'dashboard-initial.png' });
    
    // Check if we see login prompt
    const loginPrompt = await page.locator('.hvac-login-notice').count();
    console.log('Login prompt visible:', loginPrompt > 0);
    
    if (loginPrompt > 0) {
      // Click login button if present
      const loginButton = await page.locator('.hvac-login-notice a.button').first();
      if (await loginButton.isVisible()) {
        console.log('2. Clicking login button...');
        await loginButton.click();
        await page.waitForLoadState('networkidle');
      }
    }
    
    // If we're on login page, log in
    const currentUrl = page.url();
    console.log('Current URL:', currentUrl);
    
    if (currentUrl.includes('community-login')) {
      console.log('3. Logging in...');
      await page.fill('#user_login', 'test_trainer');
      await page.fill('#user_pass', 'password123!');
      await page.click('#wp-submit');
      await page.waitForLoadState('networkidle');
      await page.waitForTimeout(3000);
      
      // Navigate back to dashboard
      console.log('4. Returning to dashboard...');
      await page.goto(`${staging_url}/hvac-dashboard/`);
      await page.waitForLoadState('networkidle');
    }
    
    // Check dashboard content
    console.log('5. Checking dashboard content...');
    const content = await page.content();
    
    // Take final screenshot
    await page.screenshot({ path: 'dashboard-final.png', fullPage: true });
    
    // Verify dashboard elements
    const dashboardChecks = {
      'Dashboard wrapper': content.includes('hvac-dashboard-wrapper'),
      'Dashboard stats section': content.includes('hvac-dashboard-stats'),
      'Stat cards': content.includes('hvac-stat-card'),
      'Create Event button': content.includes('Create Event'),
      'My Events button': content.includes('My Events'),
      'Events table': content.includes('hvac-events-table')
    };
    
    console.log('\n=== Dashboard Elements Check ===');
    for (const [element, found] of Object.entries(dashboardChecks)) {
      console.log(`${element}: ${found ? '✓' : '✗'}`);
    }
    
    // Count and display stat cards
    const statCardCount = await page.locator('.hvac-stat-card').count();
    console.log(`\nStat cards found: ${statCardCount}`);
    
    if (statCardCount > 0) {
      console.log('\n=== Dashboard Statistics ===');
      const statCards = await page.locator('.hvac-stat-card').all();
      for (const card of statCards) {
        const title = await card.locator('h3').textContent();
        const value = await card.locator('.metric-value').textContent();
        console.log(`${title}: ${value}`);
      }
    }
    
    // Check events table
    const eventRows = await page.locator('.hvac-events-table tbody tr').count();
    console.log(`\nEvents in table: ${eventRows}`);
    
    // Save full content for analysis
    const fs = require('fs');
    fs.writeFileSync('dashboard-final-content.html', content);
    console.log('\nFull content saved to dashboard-final-content.html');
    
    // Final verification
    const isDashboardWorking = statCardCount > 0 && dashboardChecks['Dashboard wrapper'];
    console.log(`\nDashboard working: ${isDashboardWorking ? 'YES' : 'NO'}`);
    
    expect(isDashboardWorking).toBe(true);
  });
});