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);

  // System Spannungen &
  const systemSpannung = page.getByRole("heading", {
    name: "System Spannungen &",
  });
  await highlightAndExpectVisible(page, systemSpannung);
  await systemSpannung.click();
  await page.waitForTimeout(100);

  // +15V
  const plus15V = page.getByRole("heading", { name: "+15V" });
  await highlightAndExpectVisible(page, plus15V);
  await plus15V.click();
  await page.waitForTimeout(100);

  // 15.06 VDetailansicht
  const v15Detail = page.getByText("15.06 VDetailansicht");
  await highlightAndExpectVisible(page, v15Detail);
  await v15Detail.click();
  await page.waitForTimeout(100);

  // +5V
  const plus5V = page.getByRole("heading", { name: "+5V" });
  await highlightAndExpectVisible(page, plus5V);
  await plus5V.click();
  await page.waitForTimeout(100);

  // 4.98 VDetailansicht
  const v5Detail = page.getByText("4.98 VDetailansicht");
  await highlightAndExpectVisible(page, v5Detail);
  await v5Detail.click();
  await page.waitForTimeout(100);

  // -15V
  const minus15V = page.getByRole("heading", { name: "-15V" });
  await highlightAndExpectVisible(page, minus15V);
  await minus15V.click();
  await page.waitForTimeout(100);

  // -15.09 VDetailansicht
  const vMinus15Detail = page.getByText("-15.09 VDetailansicht");
  await highlightAndExpectVisible(page, vMinus15Detail);
  await vMinus15Detail.click();
  await page.waitForTimeout(100);

  // -98V
  const minus98V = page.getByRole("heading", { name: "-98V" });
  await highlightAndExpectVisible(page, minus98V);
  await minus98V.click();
  await page.waitForTimeout(100);

  // -96.48 VDetailansicht
  const vMinus98Detail = page.getByText("-96.48 VDetailansicht");
  await highlightAndExpectVisible(page, vMinus98Detail);
  await vMinus98Detail.click();
  await page.waitForTimeout(100);

  // ADC Temp
  const adcTemp = page.getByRole("heading", { name: "ADC Temp" });
  await highlightAndExpectVisible(page, adcTemp);
  await adcTemp.click();
  await page.waitForTimeout(100);

  // 59.78 °CDetailansicht
  const adcTempDetail = page.getByText("59.78 °CDetailansicht");
  await highlightAndExpectVisible(page, adcTempDetail);
  await adcTempDetail.click();
  await page.waitForTimeout(100);

  // CPU Temp
  const cpuTemp = page.getByRole("heading", { name: "CPU Temp" });
  await highlightAndExpectVisible(page, cpuTemp);
  await cpuTemp.click();
  await page.waitForTimeout(100);
  await highlightAndExpectVisible(page, cpuTemp);
  await cpuTemp.click();
  await page.waitForTimeout(100);

  // 56.92 °CDetailansicht
  const cpuTempDetail = page.getByText("56.92 °CDetailansicht");
  await highlightAndExpectVisible(page, cpuTempDetail);
  await cpuTempDetail.click();
  await page.waitForTimeout(100);

  // img nth(2)
  const img2 = page.getByRole("img").nth(2);
  await highlightAndExpectVisible(page, img2);
  await img2.click({ position: { x: 72, y: 53 } });
  await page.waitForTimeout(100);

  // img nth(3)
  const img3 = page.getByRole("img").nth(3);
  await highlightAndExpectVisible(page, img3);
  await img3.click({ position: { x: 272, y: 93 } });
  await page.waitForTimeout(100);

  // Sidebar Links sichtbar
  const sidebarLinks2 = [
    { 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 sidebarLinks2) {
    const locator = page.getByRole(link.role as any, { name: link.name });
    await highlightAndExpectVisible(page, locator);
    await expect(locator).toBeVisible();
    await page.waitForTimeout(50);
  }
}

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

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();
}