import AxeBuilder from "@axe-core/playwright";
import { expect, test as base, type APIRequestContext, type Page, type TestInfo } from "@playwright/test";
import { translations } from "../src/i18n/translations";

const apiUrl = "http://localhost:5302/api";
const password = "E2ePassword123!";
async function login(api: APIRequestContext, email: string) {
  expect((await api.post(`${apiUrl}/auth/login`, { data: { email, password } })).status()).toBe(200);
  const me = await (await api.get(`${apiUrl}/auth/me`)).json();
  const csrf = (await api.storageState()).cookies.find(c => c.name === "XSRF-TOKEN")!.value;
  return { "X-CSRF-TOKEN": csrf, "X-Session-Context": me.sessionContext as string };
}

const test = base.extend<{ headers: Record<string, string> }>({
  headers: async ({ playwright, page, context }, provide) => {
    const admin = await playwright.request.newContext();
    try {
      const adminHeaders = await login(admin, "e2e@example.test");
      const email = `p404-${Date.now()}-${Math.random().toString(36).slice(2)}@example.test`;
      expect((await admin.post(`${apiUrl}/users`, { headers: adminHeaders, data: { email, password, roles: [] } })).status()).toBe(200);
      const headers = await login(page.request, email);
      await context.route("**/*", route => {
        const url = new URL(route.request().url());
        return ["localhost", "127.0.0.1"].includes(url.hostname) || ["data:", "blob:", "about:"].includes(url.protocol) ? route.continue() : route.abort();
      });
      await provide(headers);
    } finally { await admin.dispose(); }
  },
});

async function capture(page: Page, info: TestInfo, name: string) {
  const path = process.env.P4_04_CAPTURE === "true" ? `../docs/redesign/phase-4/p4-04/visual/${name}.png` : info.outputPath(`${name}.png`);
  await page.screenshot({ path, fullPage: false });
  await info.attach(name, { path, contentType: "image/png" });
}

async function scan(page: Page, info: TestInfo, name: string) {
  const result = await new AxeBuilder({ page }).withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"]).analyze();
  await info.attach(`${name}-axe`, { body: JSON.stringify({ violations: result.violations, incomplete: result.incomplete }, null, 2), contentType: "application/json" });
  expect(result.violations).toEqual([]);
}

async function reflow(page: Page, info: TestInfo, name: string) {
  // Test actual descendants, not body.scrollWidth: the inherited body overflow rule
  // must not disguise a child/action extending beyond the available reading area.
  const outside = await page.locator("main").evaluate(main => {
    const bounds = main.getBoundingClientRect();
    return Array.from(main.querySelectorAll("h1,h2,h3,p,button,[role='combobox'],.MuiFormControlLabel-root,a"))
      .filter(node => node.getClientRects().length && getComputedStyle(node).visibility !== "hidden")
      .map(node => ({ text: node.textContent?.slice(0, 90), left: node.getBoundingClientRect().left, right: node.getBoundingClientRect().right }))
      .filter(rect => rect.left < bounds.left - 1 || rect.right > Math.min(bounds.right, innerWidth) + 1);
  });
  await info.attach(`${name}-reflow`, { body: JSON.stringify(outside), contentType: "application/json" });
  expect(outside).toEqual([]);
}

for (const mode of ["light", "dark"] as const) for (const language of ["en", "nb"] as const) {
  test(`[PRES-E07 E08 E09 S03 S04 S05 J05 J10 M06 W11] ${mode}/${language} Settings headings, reflow and retained actions`, async ({ page, headers }, info) => {
    test.setTimeout(180_000);
    const t = translations[language];
    const suffix = `${mode}-${language}`;
    await page.emulateMedia({ reducedMotion: "reduce" });
    await page.addInitScript(({ mode, language }) => { localStorage.setItem("jobtracker.themeMode", mode); localStorage.setItem("uiLanguage", language); }, { mode, language });
    expect((await page.request.put(`${apiUrl}/auth/preferences/language`, { headers, data: { language: language === "nb" ? "nb-NO" : "en" } })).ok()).toBe(true);
    await page.setViewportSize({ width: 1440, height: 900 });
    await page.goto(language === "nb" ? "/settings/?source=preservation" : "/settings");
    const main = page.getByRole("main");
    await expect(page.locator("html")).toHaveAttribute("data-color-scheme", mode);
    await expect(main.getByRole("heading", { level: 1 })).toHaveText(t.settings);
    await expect(main.getByRole("switch", { name: t.settingsAiEnabled, exact: true })).toBeVisible();
    await expect(main.getByText(t.settingsUsageNoAi, { exact: true })).toBeVisible();
    await expect(main.getByRole("switch", { name: t.settingsAiExternalAllowed, exact: true })).toBeDisabled();
    for (const title of [t.settingsAppearance, t.settingsLanguageTitle, t.settingsJobs, t.settingsAiPrivacyTitle, t.settingsUsageTitle, t.settingsQuickCaptureTitle, t.connectedAccounts]) {
      await expect(main.getByRole("heading", { level: 2, name: title, exact: true })).toHaveCount(1);
    }
    await scan(page, info, `general-${suffix}`);
    for (const width of [1920, 1440, 1024, 768, 767, 390, 320]) {
      await page.setViewportSize({ width, height: 900 });
      await reflow(page, info, `general-${width}-${suffix}`);
      if ([1440, 390, 320].includes(width)) {
        await page.evaluate(() => scrollTo(0, 0));
        await capture(page, info, `general-${width}-${suffix}`);
      }
    }
    await scan(page, info, `phone-${suffix}`);
    // Synthetic long localized title, with no CSS injection or hidden controls.
    await main.getByRole("heading", { level: 1 }).evaluate((node, title) => { node.textContent = title; }, language === "nb"
      ? "Innstillinger for jobbpreferanser, oppfølginger og tilkoblede innbokser"
      : "Settings for job preferences, follow-up reminders and connected inboxes");
    await reflow(page, info, `long-heading-${suffix}`);
    await capture(page, info, `long-heading-${suffix}`);

    const chooseSection = async (name: string) => {
      if (page.viewportSize()!.width < 768) {
        const selector = main.getByRole("combobox", { name: t.settingsNavigation, exact: true });
        await selector.focus();
        await selector.press("Enter");
        await page.getByRole("option", { name, exact: true }).focus();
        await page.keyboard.press("Enter");
        await expect(selector).toBeFocused();
      } else await main.getByRole("tab", { name, exact: true }).click();
    };

    // Initial rules failure retains heading/error; existing section re-entry reloads.
    await page.route(`${apiUrl}/rules`, route => route.fulfill({ status: 503, contentType: "application/json", body: JSON.stringify({ message: "Synthetic rules unavailable" }) }));
    await chooseSection(t.settingsTabFollowUps);
    await expect(main.getByRole("alert")).toContainText("Synthetic rules unavailable");
    await expect(main.getByRole("heading", { level: 2, name: t.rulesTitle })).toBeVisible();
    await capture(page, info, `rules-error-${suffix}`);
    await scan(page, info, `rules-error-${suffix}`);
    await page.unroute(`${apiUrl}/rules`);
    await chooseSection(t.settingsTabGeneral);
    await chooseSection(t.settingsTabFollowUps);
    const rule = main.getByRole("spinbutton", { name: t.rulesAppliedFollowUpDays, exact: true });
    await rule.fill("5");
    for (const width of [320, 390, 768, 1024, 1440]) {
      await page.setViewportSize({ width, height: 900 });
      await expect(rule).toHaveValue("5");
      await reflow(page, info, `rules-${width}-${suffix}`);
    }
    const response = page.waitForResponse(r => r.url() === `${apiUrl}/rules` && r.request().method() === "PUT");
    await main.getByRole("button", { name: t.rulesSave, exact: true }).click();
    expect((await response).status()).toBe(204);
    expect((await (await page.request.get(`${apiUrl}/rules`)).json()).appliedFollowUpDays).toBe(5);

    // Hold only the local notification read to exercise loading in the same layout.
    let release!: () => void;
    const held = new Promise<void>(resolve => { release = resolve; });
    await page.route(`${apiUrl}/notification-settings`, async route => { await held; await route.continue(); });
    await page.reload();
    await page.setViewportSize({ width: 320, height: 900 });
    await chooseSection(t.settingsTabNotifications);
    await expect(main.locator(".MuiSkeleton-root")).toBeVisible();
    await capture(page, info, `notifications-loading-${suffix}`);
    release();
    const pref = main.getByRole("checkbox", { name: t.settingsNotificationsFollowUpReminders, exact: true });
    await expect(pref).toBeChecked();
    await page.unroute(`${apiUrl}/notification-settings`);
    await pref.uncheck();
    let fail = true;
    await page.route(`${apiUrl}/notification-settings`, route => {
      if (route.request().method() === "PUT" && fail) { fail = false; return route.fulfill({ status: 503, contentType: "application/json", body: JSON.stringify({ message: "Synthetic notification save failure" }) }); }
      return route.continue();
    });
    const save = main.getByRole("button", { name: t.settingsNotificationsSave, exact: true });
    await save.focus();
    const savedNotification = page.waitForResponse(r => r.url() === `${apiUrl}/notification-settings` && r.request().method() === "PUT");
    await save.press("Enter");
    expect((await savedNotification).status()).toBe(503);
    await expect(main.getByRole("alert")).toContainText("Synthetic notification save failure");
    await expect(pref).not.toBeChecked();
    await reflow(page, info, `notifications-error-${suffix}`);
    await capture(page, info, `notifications-error-${suffix}`);
    await scan(page, info, `notifications-error-${suffix}`);
    const retriedNotification = page.waitForResponse(r => r.url() === `${apiUrl}/notification-settings` && r.request().method() === "PUT");
    await save.press("Enter");
    expect((await retriedNotification).status()).toBe(200);
    await expect(main.getByRole("alert")).toHaveCount(0);
    expect((await (await page.request.get(`${apiUrl}/notification-settings`)).json()).emailFollowUpRemindersEnabled).toBe(false);
    await page.reload();
    await chooseSection(t.settingsTabNotifications);
    await expect(pref).not.toBeChecked();

    await chooseSection(t.settingsTabBackup);
    await expect(main.getByText(t.accountDeleteDisabled, { exact: true })).toBeVisible();
    await expect(main.getByRole("button", { name: t.accountDeleteButton, exact: true })).toHaveCount(0);
    await reflow(page, info, `backup-${suffix}`);
    await capture(page, info, `backup-${suffix}`);
    await scan(page, info, `backup-${suffix}`);
    const download = page.waitForEvent("download");
    await main.getByRole("button", { name: t.accountExportDownload, exact: true }).click();
    expect((await download).suggestedFilename()).toMatch(/\.zip$/);
    // The existing fixed toast can temporarily cover bottom-of-page actions.
    // Let it dismiss normally before certifying/capturing the focused action.
    await expect(page.getByRole("alert").filter({ hasText: t.accountExportDownloaded })).toHaveCount(0, { timeout: 15_000 });
    await chooseSection(t.settingsTabGeneral);
    const manage = main.getByRole("button", { name: t.settingsManageConnectedAccounts, exact: true });
    await manage.focus();
    await page.keyboard.press("Shift+Tab");
    await page.keyboard.press("Tab");
    await expect(manage).toBeFocused();
    expect(await manage.evaluate(node => getComputedStyle(node).outlineStyle)).toBe("solid");
    await manage.scrollIntoViewIfNeeded();
    await expect.poll(() => manage.evaluate(node => {
      const rect = node.getBoundingClientRect();
      const hit = document.elementFromPoint(rect.x + rect.width / 2, rect.y + rect.height / 2);
      return node.contains(hit) ? "visible" : `${hit?.tagName}: ${hit?.getAttribute("class")} at ${rect.x},${rect.y},${rect.width},${rect.height}`;
    })).toBe("visible");
    await capture(page, info, `connected-action-${suffix}`);
    await manage.press("Enter");
    await expect(page).toHaveURL(/\/settings\/connected-accounts$/);
    expect((await page.request.get(`${apiUrl}/users`)).status()).toBe(403);
  });
}