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

test.describe('@p1 CareerSearch — ArrowDown + Enter commit', () => {
  test.setTimeout(20000);

  test('type → ArrowDown → Enter commits first suggestion and opens modal', async ({ page }) => {
    const u = loadTestUser();

    // Stub search endpoint
    await page.route('**/api/careers/search**', async (route) => {
      const res = [
        { title: 'Curators', soc_code: '25-4012.00', cip_codes: ['50.0703','30.1401'], limited_data: false, ratings: {} },
        { title: 'Data Analyst', soc_code: '15-2051.00', cip_codes: ['11.0802'], limited_data: false, ratings: {} },
      ];
      await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(res) });
    });

    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('/career-explorer', { waitUntil: 'networkidle' });

    const input = page.getByPlaceholder('Start typing a career...');
    await expect(input).toBeVisible();

    await input.fill('cu');
    await input.press('ArrowDown');
    await input.press('Enter');

    // CareerModal opens → "Add to Comparison"
    await expect(page.getByRole('button', { name: /Add to Comparison/i })).toBeVisible({ timeout: 8000 });

    // Close modal to keep state clean
    const closeBtn = page.getByRole('button', { name: /^Close$/i });
    if (await closeBtn.isVisible().catch(() => false)) await closeBtn.click();
    else await page.keyboard.press('Escape');
  });
});