import { test, expect } from "./fixtures/console-gate";

// TIRREDESIGN-8: Onlineboard day-tabs must remain unblocked across the
// full -1/+14 window, and must surface out-of-range dates greyed-out
// (matching Angular) so the user can see where the boundary is.
//
// The strip is built with PAGE_SIZE=7 — for daysBefore=1 daysAfter=14
// we get 16 in-range dates (3 pages of 7 + 7 + 2). The third (last)
// page therefore has 2 enabled tabs followed by 5 disabled placeholders
// rendering the next 5 calendar dates.

test.describe("TIRREDESIGN-8 — Onlineboard day-tabs", () => {
  test("strip exposes the full -1/+14 range without blocking enabled tabs", async ({
    page,
    consoleMessages,
  }) => {
    await page.goto("/ru-ru/onlineboard/route/MOW-LED-20260423");
    await expect(page.getByTestId("day-tabs")).toBeVisible({ timeout: 15000 });

    const list = page.locator(".day-tabs__list");
    const tabsOnPage = list.locator('[data-testid^="day-tab-"]');

    // ---- Page 1: today-1 .. today+5 ----
    await expect(tabsOnPage).toHaveCount(7);
    for (const t of await tabsOnPage.all()) {
      await expect(t).toBeEnabled();
    }
    await expect(page.getByTestId("day-tab-20260422")).toBeVisible();
    await expect(page.getByTestId("day-tab-20260428")).toBeVisible();

    // ---- Page 2: today+6 .. today+12 ----
    await page.getByTestId("day-tabs-next").click();
    await expect(page.getByTestId("day-tab-20260429")).toBeVisible();
    await expect(page.getByTestId("day-tab-20260505")).toBeVisible();
    await expect(tabsOnPage).toHaveCount(7);
    for (const t of await tabsOnPage.all()) {
      await expect(t).toBeEnabled();
    }

    // ---- Page 3 (last): 6 May, 7 May enabled; 8–12 May greyed-out ----
    await page.getByTestId("day-tabs-next").click();

    await expect(page.getByTestId("day-tab-20260506")).toBeEnabled();
    await expect(page.getByTestId("day-tab-20260507")).toBeEnabled();
    for (const ymd of [
      "20260508",
      "20260509",
      "20260510",
      "20260511",
      "20260512",
    ]) {
      const tab = page.getByTestId(`day-tab-${ymd}`);
      await expect(tab).toBeVisible();
      await expect(tab).toBeDisabled();
    }
    await expect(tabsOnPage).toHaveCount(7);

    // Right arrow disabled at the +14 boundary
    await expect(page.getByTestId("day-tabs-next")).toBeDisabled();
  });

  test("clicking enabled tabs does not disable siblings", async ({ page, consoleMessages }) => {
    await page.goto("/ru-ru/onlineboard/route/MOW-LED-20260423");
    await expect(page.getByTestId("day-tabs")).toBeVisible({ timeout: 15000 });

    const list = page.locator(".day-tabs__list");
    const tabs = list.locator('[data-testid^="day-tab-"]');

    await page.getByTestId("day-tab-20260425").click();
    await expect(page).toHaveURL(/20260425/);

    await page.getByTestId("day-tab-20260427").click();
    await expect(page).toHaveURL(/20260427/);

    // After two consecutive tab navigations all sibling tabs on the page
    // must remain enabled — TIRREDESIGN-8's original defect was that
    // clicking a tab disabled the others.
    for (const t of await tabs.all()) {
      await expect(t).toBeEnabled();
    }
  });
});
