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

test.describe('@p0 Priorities modal — save & persist (current UI)', () => {
  test.setTimeout(15000);

  test('open → choose answers → Save Answers → reload → same answers present', async ({ page }) => {
    const user = loadTestUser();

    // --- helpers -------------------------------------------------------------
    async function openExplorer() {
      await page.context().clearCookies();
      await page.goto('/signin', { waitUntil: 'networkidle' });
      await page.getByPlaceholder('Username', { exact: true }).fill(user.username);
      await page.getByPlaceholder('Password', { exact: true }).fill(user.password);
      await page.getByRole('button', { name: /^Sign In$/ }).click();
      await page.waitForURL('**/signin-landing**', { timeout: 15000 });
      await page.goto('/career-explorer', { waitUntil: 'networkidle' });
      await expect(page.getByRole('heading', { name: /Explore Careers - use these tools/i })).toBeVisible();
    }

    async function openPrioritiesModal() {
      const overlay = page.locator('div.fixed.inset-0');
      // If it’s already up (gate), just use it
      if (await overlay.isVisible({ timeout: 500 }).catch(() => false)) return overlay;
      // Otherwise click "Edit priorities"
      const edit = page.getByRole('button', { name: /Edit priorities/i }).or(page.getByText(/Edit priorities/i));
      await expect(edit).toBeVisible({ timeout: 5000 });
      await edit.click();
      await expect(overlay).toBeVisible({ timeout: 3000 });
      return overlay;
    }

    // choose valid option in each select (prefer "Very important", then "Yes, very important", etc.)
    async function chooseAnswers(overlay) {
      const dlg = overlay.locator('div[role="dialog"], div.bg-white').first();
      const selects = dlg.locator('select');
      const n = await selects.count();
      const chosen = [];
      for (let i = 0; i < n; i++) {
        const sel = selects.nth(i);
        await expect(sel).toBeVisible();
        const opts = sel.locator('option');
        const m = await opts.count();
        const cand = [];
        for (let j = 0; j < m; j++) {
          const val = (await opts.nth(j).getAttribute('value')) || '';
          if (!val) continue; // skip "Select an answer"
          const txt = ((await opts.nth(j).textContent()) || '').trim();
          cand.push({ val, txt });
        }
        const pickOrder = [/^Very important$/i, /^Yes, very important$/i, /^Somewhat important$/i, /^Not as important$/i];
        let pick = cand.find(c => pickOrder[0].test(c.txt))
               ||  cand.find(c => pickOrder[1].test(c.txt))
               ||  cand.find(c => pickOrder[2].test(c.txt))
               ||  cand.find(c => pickOrder[3].test(c.txt))
               ||  cand[0];
        await sel.selectOption(pick.val);         // select by VALUE (robust)
        chosen.push(pick.txt);                    // remember chosen text
      }
      return chosen;
    }

    async function readSelected(overlay) {
      const dlg = overlay.locator('div[role="dialog"], div.bg-white').first();
      const selects = dlg.locator('select');
      const n = await selects.count();
      const out = [];
      for (let i = 0; i < n; i++) {
        const txt = await selects.nth(i).locator('option:checked').first().textContent();
        out.push((txt || '').trim());
      }
      return out;
    }

    // --- flow ----------------------------------------------------------------
    await openExplorer();

    // 1) Open modal (gate or via "Edit priorities")
    let overlay = await openPrioritiesModal();

    // 2) Make selections and save
    const chosen = await chooseAnswers(overlay);
    await expect(overlay.getByRole('button', { name: /^Save Answers$/i })).toBeEnabled({ timeout: 5000 });
    await overlay.getByRole('button', { name: /^Save Answers$/i }).click();
    await overlay.waitFor({ state: 'hidden', timeout: 5000 }).catch(() => {});

    // 3) Reload page and re-open modal
    await page.reload({ waitUntil: 'networkidle' });
    overlay = await openPrioritiesModal();

    // 4) Verify persistence (same number and same labels)
    const persisted = await readSelected(overlay);
    expect(persisted.length).toBe(chosen.length);
    for (let i = 0; i < persisted.length; i++) {
      expect(persisted[i]).toBe(chosen[i]);
    }

    // Optional: close (re-using Save Answers keeps state)
    const saveAgain = overlay.getByRole('button', { name: /^Save Answers$/i });
    if (await saveAgain.isVisible().catch(() => false)) {
      await saveAgain.click();
      await overlay.waitFor({ state: 'hidden', timeout: 3000 }).catch(() => {});
    }
  });
});