// gigityOutputsTest.ts
import type { Locator, Page } from "@playwright/test";
import { expect } from "@playwright/test";

export async function runSystemTest(page: Page) {
  await page.goto("/system");

  // Logo
  const logo = page.getByRole("img", { name: "Logo", exact: true });
  await highlightAndExpectVisible(page, logo);
  await logo.click();
  await page.waitForTimeout(100);

  // TALAS Logo
  const talasLogo = page.getByRole("img", { name: "TALAS Logo" });
  await highlightAndExpectVisible(page, talasLogo);
  await talasLogo.click();
  await page.waitForTimeout(100);

  // Meldestation Heading
  const meldestation = page.getByRole("heading", { name: "Meldestation" });
  await highlightAndExpectVisible(page, meldestation);
  await meldestation.click();
  await page.waitForTimeout(100);

  // CPLV4 Ismail Rastede
  const cplv4Text = page.getByText("CPLV4 Ismail Rastede");
  await highlightAndExpectVisible(page, cplv4Text);
  await cplv4Text.click();
  await page.waitForTimeout(100);

  // Dark Mode Button sichtbar
  const darkModeBtn = page.getByRole("button", { name: "Dark Mode" });
  await highlightAndExpectVisible(page, darkModeBtn);
  await expect(darkModeBtn).toBeVisible();
  await page.waitForTimeout(100);

  // Sidebar Links sichtbar
  const sidebarLinks = [
    { role: "link", name: "Übersicht" },
    { role: "link", name: "Kabelüberwachung" },
    { role: "link", name: "Meldungseingänge" },
    { role: "link", name: "Schaltausgänge" },
    { role: "link", name: "Messwerteingänge" },
    { role: "link", name: "Berichte" },
    { role: "link", name: "System" },
    { role: "link", name: "Einstellungen" },
  ];
  for (const link of sidebarLinks) {
    const locator = page.getByRole(link.role as any, { name: link.name });
    await highlightAndExpectVisible(page, locator);
    await expect(locator).toBeVisible();
    await page.waitForTimeout(50);
  }

  // Berichte Heading
  const berichteHeading = page.getByRole("heading", { name: "Berichte" });
  await highlightAndExpectVisible(page, berichteHeading);
  await berichteHeading.click();
  await page.waitForTimeout(100);
}

//---------------------------------------------------------------------

export async function highlightAndExpectVisible(
  page: Page,
  locator: Locator,
  durationMs = 800
) {
  // CSS nur einmal pro Page injizieren
  const alreadyInjected = await page.evaluate(
    () => (window as any).__pwForceCssInjected === true
  );

  if (!alreadyInjected) {
    await page.addStyleTag({
      content: `
        .pw-force-outline {
          outline: 3px solid #ff1744 !important;
          outline-offset: 2px !important;
          box-shadow: 0 0 0 3px rgba(224,0,43,.35) !important;
        }
      `,
    });
    await page.evaluate(() => {
      (window as any).__pwForceCssInjected = true;
    });
  }

  const els = await locator.elementHandles();
  for (const el of els) {
    await el.evaluate((node: unknown, ms: number) => {
      const n = node as HTMLElement;
      n.classList.add("pw-force-outline");
      window.setTimeout(() => n.classList.remove("pw-force-outline"), ms);
    }, durationMs);
  }

  await expect(locator).toBeVisible();
}