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

test.describe('Trainer Login', () => {
  test('should allow a registered trainer to log in', async ({ page }) => {
    // Navigate to the community login page
    await page.goto('/community-login/');

    // Log current URL and take a screenshot
    console.log('Navigated to:', page.url());
    await page.screenshot({ path: 'login-page.png', fullPage: true });

    // Check if the login form fields are visible and enabled
    const usernameField = page.locator('#user_login');
    const passwordField = page.locator('#user_pass');
    const loginButton = page.locator('#wp-submit'); // Common ID for WordPress login submit button

    await expect(usernameField).toBeVisible();
    await expect(usernameField).toBeEnabled();
    await expect(passwordField).toBeVisible();
    await expect(passwordField).toBeEnabled();
    await expect(loginButton).toBeVisible();
    await expect(loginButton).toBeEnabled();

    // Fill in login credentials (using the test user from README)
    const username = 'test_trainer';
    const password = 'Test123!';

    await usernameField.fill(username);
    console.log(`Filled in username field with: ${username}`);

    await passwordField.fill(password);
    console.log('Filled in password field.');

    // Click the login button
    await loginButton.click();
    console.log('Clicked login button.');

    // Assert successful login (e.g., redirection to the dashboard page)
    // The MVP plan mentions /hvac-dashboard/ as the trainer dashboard page
    await page.waitForURL('/hvac-dashboard/', { timeout: 15000 }); // Wait for redirection to dashboard
    console.log('Successfully logged in and redirected to dashboard.');

    // Optional: Add an assertion to check for a specific element on the dashboard page
    // const dashboardTitle = page.locator('h1'); // Example selector for a main title
    // await expect(dashboardTitle).toHaveText('Trainer Dashboard'); // Adjust expected text as needed

    await page.screenshot({ path: 'login-successful.png', fullPage: true });
  });
});