import { expect, test } from "@playwright/test";
import { DESKTOP } from "./helpers";

/**
 * (c) Do topo da home, o Tab chega ao campo de nome do contato em no máximo 30 toques.
 * O teste continua apertando Tab (até 120) depois do limite só para dizer, na falha, quantos toques faltavam.
 */

const MAX_TABS = 30;
const GIVE_UP_AFTER = 120;

test.use({ viewport: DESKTOP });

test(`Tab do topo da home chega ao campo de nome do contato em até ${MAX_TABS} toques`, async ({
  page,
}) => {
  await page.goto("/", { waitUntil: "load" });
  await page.waitForTimeout(800);
  // o foco começa no documento, como numa visita nova
  await page.evaluate(() => (document.activeElement as HTMLElement)?.blur());
  await page.evaluate(() => window.scrollTo({ top: 0, behavior: "instant" }));

  const visited: string[] = [];
  let reached = 0;
  for (let tab = 1; tab <= GIVE_UP_AFTER; tab++) {
    await page.keyboard.press("Tab");
    const where = await page.evaluate(() => {
      const element = document.activeElement as HTMLElement | null;
      if (!element) return { isName: false, label: "(nada)" };
      const label = (
        element.getAttribute("aria-label") ||
        element.textContent ||
        element.getAttribute("name") ||
        element.tagName
      )
        .trim()
        .replace(/\s+/g, " ")
        .slice(0, 40);
      return {
        isName:
          element.getAttribute("name") === "name" &&
          Boolean(element.closest("#contact")),
        label: `${element.tagName.toLowerCase()} "${label}"`,
      };
    });
    visited.push(`${tab}. ${where.label}`);
    if (where.isName) {
      reached = tab;
      break;
    }
  }

  expect(
    reached,
    `o campo de nome não apareceu nem em ${GIVE_UP_AFTER} Tabs`,
  ).toBeGreaterThan(0);
  expect(
    reached,
    `o campo de nome só foi alcançado no Tab ${reached} (limite ${MAX_TABS}); passou por:\n${visited.join("\n")}`,
  ).toBeLessThanOrEqual(MAX_TABS);
  await expect(page.locator("#contact input[name='name']")).toBeFocused();
});