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

// STAGING_URL is now imported from config

test.describe('Trainer Dashboard Statistics', () => {
    test('Verify dashboard displays correct statistics', async ({ page }) => {
        console.log('Starting dashboard statistics verification...');
        
        // Step 1: Login as test_trainer
        console.log('Step 1: Logging in...');
        await page.goto(PATHS.login);
        await page.fill('#user_login', 'test_trainer');
        await page.fill('#user_pass', 'Test123!');
        await page.click('#wp-submit');
        await page.waitForLoadState('networkidle');
        await expect(page).toHaveURL(/hvac-dashboard/);
        console.log('Login successful');
        
        // Step 2: Navigate to dashboard
        console.log('Step 2: Checking dashboard statistics...');
        await page.goto(PATHS.dashboard);
        await page.waitForLoadState('networkidle');
        
        // Take a screenshot of the dashboard
        await page.screenshot({ path: 'dashboard-stats.png', fullPage: true });
        
        // Check for statistics elements
        const statsSelectors = {
            totalEvents: [
                '.total-events',
                '.events-count',
                '.stat-total-events',
                'text=/total events/i'
            ],
            upcomingEvents: [
                '.upcoming-events',
                '.upcoming-count',
                '.stat-upcoming-events',
                'text=/upcoming events/i'
            ],
            totalTickets: [
                '.total-tickets',
                '.tickets-sold',
                '.stat-total-tickets',
                'text=/tickets sold/i'
            ],
            totalRevenue: [
                '.total-revenue',
                '.revenue-amount',
                '.stat-revenue',
                'text=/revenue/i'
            ]
        };
        
        const statistics = {};
        
        // Try to find each statistic
        for (const [statName, selectors] of Object.entries(statsSelectors)) {
            let found = false;
            for (const selector of selectors) {
                try {
                    const element = page.locator(selector);
                    const count = await element.count();
                    if (count > 0) {
                        const text = await element.first().textContent();
                        statistics[statName] = text;
                        console.log(`${statName}: ${text}`);
                        found = true;
                        break;
                    }
                } catch (e) {
                    // Continue trying other selectors
                }
            }
            if (!found) {
                console.log(`${statName}: Not found`);
            }
        }
        
        // Look for any numeric values on the page that might be statistics
        const numericElements = await page.locator('text=/\\d+/').all();
        console.log('\nNumeric values found on dashboard:');
        for (const element of numericElements) {
            const text = await element.textContent();
            const parent = await element.locator('..').textContent();
            console.log(`- ${text} (context: ${parent})`);
        }
        
        // Check the entire dashboard content
        const dashboardContent = await page.locator('.hvac-dashboard, .dashboard-content, main').textContent();
        console.log('\nDashboard content preview:');
        console.log(dashboardContent.substring(0, 500) + '...');
        
        // Expected values based on our test data
        const expectedStats = {
            totalEvents: 3, // We have 3 events that are showing in queries
            upcomingEvents: 0, // None are in the future relative to current date
            totalTickets: 0, // We haven't created tickets yet
            totalRevenue: 0 // No revenue without tickets
        };
        
        console.log('\nExpected statistics:');
        console.log(JSON.stringify(expectedStats, null, 2));
        
        // Verify we can see at least some events
        const eventListSelectors = [
            '.event-item',
            '.hvac-event-item',
            '.upcoming-event',
            '.tribe-events-list'
        ];
        
        let eventCount = 0;
        for (const selector of eventListSelectors) {
            const elements = page.locator(selector);
            const count = await elements.count();
            if (count > 0) {
                eventCount = count;
                console.log(`\nFound ${count} events using selector: ${selector}`);
                break;
            }
        }
        
        if (eventCount > 0) {
            console.log('Dashboard is displaying events');
        } else {
            console.log('Warning: No events visible on dashboard');
        }
        
        console.log('\nDashboard statistics verification completed');
    });
});