/**
 * Test for Dashboard Event Filter Functionality
 * 
 * This test verifies that the dashboard filter buttons correctly filter
 * events without page reload
 */

import { test, expect } from '@playwright/test';

test.describe('Trainer Dashboard Event Filtering', () => {
  test('should filter events dynamically without page reload', async ({ page }) => {
    // Login Steps
    await page.goto('/community-login/');
    
    const usernameField = page.locator('#user_login');
    const passwordField = page.locator('#user_pass');
    const loginButton = page.locator('#wp-submit');
    
    // Use environment variables or default test credentials
    const username = process.env.TEST_USERNAME || 'test_trainer';
    const password = process.env.TEST_PASSWORD || 'Test123!';
    
    await usernameField.fill(username);
    await passwordField.fill(password);
    await loginButton.click();
    
    // Wait for dashboard to load
    await page.waitForURL('/hvac-dashboard/', { timeout: 15000 });
    console.log('Successfully logged in and redirected to dashboard.');
    
    // Save initial URL for comparison
    const initialUrl = page.url();
    
    // Wait for events table to be visible
    const eventsTable = page.locator('.hvac-events-table, .events-table');
    await expect(eventsTable).toBeVisible();
    
    // Get filter buttons
    const filterButtons = page.locator('.hvac-event-filters a');
    await expect(filterButtons).toHaveCount(5); // all, publish, draft, pending, private
    
    // Test filtering functionality
    
    // 1. Click on "Draft" filter
    const draftFilter = page.locator('.hvac-event-filters a').filter({ hasText: 'Draft' });
    await draftFilter.click();
    
    // Wait for AJAX to complete (we can look for the loading state)
    const loadingIndicator = page.locator('.hvac-loading');
    if (await loadingIndicator.isVisible()) {
      await loadingIndicator.waitFor({ state: 'hidden', timeout: 10000 });
    }
    
    // Verify URL updated but page didn't reload entirely
    const draftUrl = page.url();
    expect(draftUrl).not.toEqual(initialUrl);
    expect(draftUrl).toContain('event_status=draft');
    
    // Verify filter button has active styling
    await expect(draftFilter).toHaveClass(/hvac-filter-active|ast-button-primary/);
    
    // 2. Click on "All" filter to restore initial state
    const allFilter = page.locator('.hvac-event-filters a').filter({ hasText: 'All' });
    await allFilter.click();
    
    // Wait for AJAX to complete
    if (await loadingIndicator.isVisible()) {
      await loadingIndicator.waitFor({ state: 'hidden', timeout: 10000 });
    }
    
    // Verify URL restored (should not have event_status parameter)
    const finalUrl = page.url();
    expect(finalUrl).not.toContain('event_status=');
    
    // Verify "All" filter button now has active styling
    await expect(allFilter).toHaveClass(/hvac-filter-active|ast-button-primary/);
    
    console.log('Successfully tested dynamic event filtering without page reload');
  });
});