import { STAGING_URL, PATHS, TIMEOUTS } from './config/staging-config';
/**
 * Tests for Dashboard UI improvements including:
 * - Row layout for stats section
 * - Dynamic filtering of events without page reload
 */
import { test, expect } from '@playwright/test';
import { LoginPage } from './pages/LoginPage';
import { DashboardPage } from './pages/DashboardPage';

test.describe('Dashboard UI improvements', () => {
    let dashboardPage: DashboardPage;
    let loginPage: LoginPage;

    // Set up for each test - login and navigate to dashboard
    test.beforeEach(async ({ page }) => {
        // STAGING_URL is now imported from config
        loginPage = new LoginPage(page);
        dashboardPage = new DashboardPage(page);

        // Login as trainer
        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');
        
        // Verify we're on the dashboard
        await expect(page).toHaveURL(/.*\/hvac-dashboard\/.*/);
    });
    
    // Test the new row layout for stats
    test('Stats section should display in a row layout', async ({ page }) => {
        // Verify stats section is visible
        await expect(page.locator('.hvac-stats-row')).toBeVisible();
        
        // Verify multiple stat columns exist
        const columnCount = await page.locator('.hvac-stat-col').count();
        expect(columnCount).toBeGreaterThanOrEqual(4);
        
        // Take a screenshot for visual verification
        await page.screenshot({ path: 'test-results/dashboard-stats-row.png' });
        
        // Success!
        console.log('✅ Stats section is displayed in a row layout');
    });
    
    // Test dynamic filtering functionality
    test('Event filters should dynamically update events table without page reload', async ({ page }) => {
        // Verify filter buttons exist
        const filterButtons = await page.locator('.hvac-event-filters a').count();
        expect(filterButtons).toBeGreaterThanOrEqual(2); // At least a couple filter buttons 
        
        // Click Draft filter and wait for table to update
        console.log('Clicking Draft filter');
        await page.click('a:has-text("Draft")');
        await page.waitForTimeout(1000); // Wait for AJAX to complete
        
        // Take a screenshot showing filtered content
        await page.screenshot({ path: 'test-results/dashboard-filter-draft.png' });
        
        // Verify filter button shows active state (either by class or style)
        const isDraftActive = await page.evaluate(() => {
            const activeButton = document.querySelector('a.hvac-filter-active, a.ast-button-primary');
            return activeButton ? activeButton.textContent.includes('Draft') : false;
        });
        
        console.log('Is Draft filter active:', isDraftActive);
        
        // Click All filter to go back
        console.log('Clicking All filter');
        await page.click('a:has-text("All")');
        await page.waitForTimeout(1000); // Wait for AJAX to complete
        
        // Take final screenshot
        await page.screenshot({ path: 'test-results/dashboard-filter-all.png' });
        
        // Success!
        console.log('✅ Filter functionality works without page reload');
    });
    
    // Test filtering with multiple statuses
    test('Multiple filter buttons should be clickable', async ({ page }) => {
        // Array of statuses to test (subset for quicker tests)
        const statuses = ['Draft', 'Publish', 'All'];
        
        // For each status, check if clickable
        for (const status of statuses) {
            // Click the filter
            console.log(`Testing ${status} filter`);
            await page.click(`a:has-text("${status}")`);
            await page.waitForTimeout(500);
            
            // Take a screenshot for each filter
            await page.screenshot({ path: `test-results/dashboard-filter-${status.toLowerCase()}.png` });
        }
        
        // Success!
        console.log('✅ All filter buttons are clickable');
    });
});