import { test, expect, Page, Locator } from "@playwright/test";

// Helpers
function cardByCableName(page: Page, name: string): Locator {
  // Find a module card that contains the visible cable name text
  return page.locator("div.relative.bg-gray-300", { hasText: name }).first();
}

function slotOverlayIn(card: Locator): Locator {
  // Slot overlay is the only element with absolute inset-0 inside the card
  return card.locator("div.absolute.inset-0");
}

async function setDeviceEvents(
  page: Page,
  { ksx, ksy, ksz }: { ksx?: number[]; ksy?: number[]; ksz?: number[] }
) {
  await page.evaluate(
    ({ ksx, ksy, ksz }) => {
      interface W {
        loopMeasurementEvent?: number[];
        tdrMeasurementEvent?: number[];
        alignmentEvent?: number[];
      }
      const w = window as unknown as W;
      if (ksx) w.loopMeasurementEvent = ksx;
      if (ksy) w.tdrMeasurementEvent = ksy;
      if (ksz) w.alignmentEvent = ksz;
    },
    { ksx, ksy, ksz }
  );
}

// Notes:
// - On /kabelueberwachung, the global overlay is hidden and each module shows its own overlay when active.
// - DeviceEventsBridge polls the window arrays every 2 seconds.
// - Dev mode serves /api/cpl/kabelueberwachungAPIHandler which initializes those arrays from mocks.

test.describe("Kabelüberwachung per-slot overlays", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("http://localhost:3000/kabelueberwachung");
    // Ensure page has rendered modules
    await expect(page.getByText("Rack 1")).toBeVisible();
    // Wait a moment for initial device arrays and first poll
    await page.waitForTimeout(2500);
  });

  test("only active slot is blocked; others remain usable", async ({
    page,
  }) => {
    const card1 = cardByCableName(page, "Kabel 1"); // slot 1 (index 0) has events in mock
    const card2 = cardByCableName(page, "Kabel 2"); // slot 2 (index 1) is inactive in mock

    // 1) Initial: overlay visible on Kabel 1, not on Kabel 2
    await expect(slotOverlayIn(card1)).toBeVisible();
    await expect(slotOverlayIn(card2)).toHaveCount(0);

    // 2) Interact with Kabel 2 while Kabel 1 is blocked
    await expect(card2.getByRole("button", { name: "ISO" })).toBeVisible();
    await card2.getByRole("button", { name: "ISO" }).click();

    // ISO modal should open
    await expect(page.getByText("Isolationswiderstand")).toBeVisible();

    // Close modal with Escape
    await page.keyboard.press("Escape");
    await expect(page.getByText("Isolationswiderstand")).toHaveCount(0);

    // 3) Dynamically switch overlay from Kabel 1 to Kabel 2
    const zero = new Array(32).fill(0);
    const ksx = zero.slice();
    ksx[1] = 1; // activate Schleife for slot 2
    await setDeviceEvents(page, { ksx });

    // Wait for bridge poll and UI update
    await page.waitForTimeout(2500);

    await expect(slotOverlayIn(card1)).toHaveCount(0);
    await expect(slotOverlayIn(card2)).toBeVisible();

    // Percentage text should show in the overlay (e.g., "12%")
    await expect(slotOverlayIn(card2).getByText(/%$/)).toBeVisible();
  });

  test("global overlay is not shown on kabelueberwachung page", async ({
    page,
  }) => {
    // A full-screen overlay would be fixed inset-0 at document level; ensure none
    const globalOverlay = page.locator(
      'div.fixed.inset-0:has-text("Bitte warten…")'
    );
    await expect(globalOverlay).toHaveCount(0);
  });
});