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

function uniq() {
  const t = new Date().toISOString().replace(/[-:.TZ]/g, '').slice(0, 14);
  return `u${t}${Math.floor(Math.random() * 1e4)}`;
}

test.describe('@p0 SignUp → Journey select → Route', () => {
  test.setTimeout(12000); // allow for slower first load + areas fetch

  test('create a new user via UI and persist creds for later specs', async ({ page }) => {
    const u = uniq();
    const user = {
      username: `test_${u}`,
      password: `P@ssw0rd!${u.slice(-4)}`,
      firstname: 'Test',
      lastname: 'User',
      email: `jcoakley@aptivaai.com`,
      phone: '+16787696633',
      zipcode: '30301',
      stateVal: 'GA', // Georgia (has areas)
      journeyTitle: 'Planning Your Career', // safe non-premium
      journeyRoute: '/planning',
    };

    // Start clean
    await page.context().clearCookies();
    await page.goto('/signup', { waitUntil: 'networkidle' });

    // Make sure the Sign Up form is visible
    await expect(page.getByRole('heading', { name: /Sign Up/i })).toBeVisible();

    // Fill form
    await page.getByPlaceholder('Username').fill(user.username);
    await page.getByPlaceholder('Password', { exact: true }).fill(user.password);
    await page.getByPlaceholder('Retype Password', { exact: true }).fill(user.password);
    await page.getByPlaceholder('First Name').fill(user.firstname);
    await page.getByPlaceholder('Last Name').fill(user.lastname);
    await page.getByPlaceholder('Email', { exact: true }).fill(user.email);
    await page.getByPlaceholder('Retype Email', { exact: true }).fill(user.email);
    await page.getByPlaceholder('+15555555555').fill(user.phone);
    await page.getByPlaceholder('Zip Code').fill(user.zipcode);

    // Select State (the dropdown that has “Select State” as its placeholder option)
    const stateSelect = page.locator('select').filter({
      has: page.locator('option', { hasText: 'Select State' }),
    });
    await expect(stateSelect).toBeVisible();
    await stateSelect.selectOption(user.stateVal);

       // Areas: MUST select one (validateFields requires area)
    const areaSelect = page.locator('select#area');
    await expect(areaSelect).toBeVisible();
    // wait for the debounced / aborted fetch chain to complete for this state
    const stateParam = encodeURIComponent(user.stateVal);
    await page.waitForResponse(
      r => r.url().includes(`/api/areas?state=${stateParam}`) && r.request().method() === 'GET',
      { timeout: 20000 }
    );
    // the select is disabled while loading; wait until it's enabled and populated
    await expect(areaSelect).toBeEnabled({ timeout: 10000 });
    await expect(async () => {
      const count = await areaSelect.locator('option').count();
      expect(count).toBeGreaterThan(1); // placeholder + at least one real option
    }).toPass({ timeout: 10000 });
    // choose first non-empty option
    let choseArea = false;
    const options = areaSelect.locator('option');
    const n = await options.count();
    for (let i = 0; i < n; i++) {
      const val = await options.nth(i).getAttribute('value');
      if (val) { await areaSelect.selectOption(val); choseArea = true; break; }
    }
    expect(choseArea).toBeTruthy(); // fail fast if areas didn’t load

    // Next → shows situation cards
    await page.getByRole('button', { name: /^Next$/ }).click();

    // Pick journey card (Planning Your Career)
    await page.getByRole('heading', { name: /Where are you in your career journey/i }).waitFor();
    // Click the journey card by its visible text (cards are not role=button)
    const journeyCard = page.getByText(user.journeyTitle, { exact: true });
    await expect(journeyCard).toBeVisible();
    await journeyCard.click();

    // Confirm modal → Confirm
       await expect(page.getByRole('button', { name: /^Confirm$/ })).toBeVisible({ timeout: 5000 });
       await page.getByRole('button', { name: /^Confirm$/ }).click();

    // Expect navigation to journey route (e.g., /planning)
    await page.waitForURL(`**${user.journeyRoute}**`, { timeout: 10000 });

    // Persist credentials for later specs
    saveTestUser({ ...user, choseArea });

    // Sanity: cookie session (if register logs-in server-side)
    const cookies = await page.context().cookies();
    expect(cookies.some((c) => /jwt|session/i.test(c.name))).toBeTruthy();

    // No console errors
    /** @type {string[]} */
    const errors = [];
    page.on('console', (m) => {
      if (m.type() === 'error') errors.push(m.text());
    });
    expect(errors).toEqual([]);
  });
});