import { test, expect } from '@playwright/test';
import { LoginPage } from './LoginPage';
import { DashboardPage } from './DashboardPage';
import { TEST_USERS } from '../data/test-users';

test.describe('Debug Dashboard Elements', () => {
    test('Check dashboard elements after login', async ({ page }) => {
        const loginPage = new LoginPage(page);
        const dashboardPage = new DashboardPage(page);
        const trainer = TEST_USERS.trainer;
        
        // Login first
        await loginPage.navigateToLogin();
        await loginPage.login(trainer.username, trainer.password);
        
        // Wait for dashboard to load
        await page.waitForTimeout(3000);
        
        console.log(`Current URL: ${page.url()}`);
        
        // Check for events table
        const tableVisible = await page.locator('table').isVisible().catch(() => false);
        console.log(`Events table visible: ${tableVisible}`);
        
        // Get all tables and their text
        const tables = await page.locator('table').all();
        console.log(`Number of tables found: ${tables.length}`);
        
        for (let i = 0; i < tables.length; i++) {
            const tableText = await tables[i].textContent();
            console.log(`Table ${i}: ${tableText?.slice(0, 100)}...`);
        }
        
        // Check for statistics
        const statsSelectors = [
            '.hvac-stat-card:has-text("Total Events")',
            '.hvac-stat-card:has-text("Upcoming Events")',
            '.hvac-stat-card:has-text("Past Events")',
            '.hvac-stat-card:has-text("Total Revenue")',
            '.stats-section',
            '.dashboard-stats',
            '.hvac-stats-grid'
        ];
        
        for (const selector of statsSelectors) {
            const visible = await page.locator(selector).isVisible().catch(() => false);
            if (visible) {
                const text = await page.locator(selector).textContent();
                console.log(`Stats element ${selector}: ${text?.slice(0, 100)}...`);
            }
        }
        
        // Check for create event button
        const createEventSelectors = [
            'a:has-text("Create Event")',
            'button:has-text("Create Event")',
            'a:has-text("Add Event")',
            'button:has-text("Add Event")',
            '.create-event-button',
            '[href*="create-event"]',
            '[href*="add-event"]'
        ];
        
        for (const selector of createEventSelectors) {
            const visible = await page.locator(selector).isVisible().catch(() => false);
            if (visible) {
                const href = await page.locator(selector).getAttribute('href');
                console.log(`Create Event button ${selector}: visible, href=${href}`);
            }
        }
        
        // Take screenshot
        await page.screenshot({ path: 'dashboard-debug.png', fullPage: true });
        console.log('Screenshot saved as dashboard-debug.png');
    });
});