// @ts-check
import { test, expect } from '@playwright/test';
import { loadTestUser } from '../utils/testUser.js';

test.describe('@p0 Profile — Areas load on State change', () => {
  test.setTimeout(20000);

  test('changing State fetches Areas and enables Area select', async ({ page }) => {
    const u = loadTestUser();

    // Stub /api/areas?state=GA to return 2 areas
    await page.route('**/api/areas?state=GA', async (route) => {
      await route.fulfill({
        status: 200, contentType: 'application/json',
        body: JSON.stringify({ areas: ['Atlanta-Sandy Springs-Roswell, GA', 'Augusta-Richmond County, GA-SC'] })
      });
    });

    await page.context().clearCookies();
    await page.goto('/signin', { waitUntil: 'networkidle' });
    await page.getByPlaceholder('Username', { exact: true }).fill(u.username);
    await page.getByPlaceholder('Password', { exact: true }).fill(u.password);
    await page.getByRole('button', { name: /^Sign In$/ }).click();
    await page.waitForURL('**/signin-landing**', { timeout: 15000 });

    await page.goto('/profile', { waitUntil: 'networkidle' });
    // Change State to GA (select identified by its placeholder option)
    const stateSel = page.locator('select').filter({
      has: page.locator('option', { hasText: 'Select a State' }),
    }).first();
    await expect(stateSel).toBeVisible({ timeout: 8000 });
    await stateSel.selectOption('GA');

    // Loading… may appear briefly
    await page.getByText(/Loading areas\.\.\./i).isVisible({ timeout: 1000 }).catch(() => {});

   // Area select should appear with our stubbed options (identified by its placeholder option)
    const areaSel = page.locator('select').filter({
      has: page.locator('option', { hasText: 'Select an Area' }),
    }).first();
    await expect(areaSel).toBeVisible({ timeout: 8000 });
    // Pick the first non-placeholder option
    const firstReal = areaSel.locator('option').nth(1);
    await areaSel.selectOption(await firstReal.getAttribute('value'));
  });
});