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

export async function runDigitalOutputsTest(page: Page) {
  await page.goto("/digitalOutputs");

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

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

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

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

  // h1
  const h1 = page.locator("h1");
  await highlightAndExpectVisible(page, h1);
  await h1.click();
  await page.waitForTimeout(200);

  // Sidebar Links
  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(100);
  }

  // Footer/Info
  const footerSvgs = [
    page
      .locator("div")
      .filter({ hasText: /^Littwin Systemtechnik GmbH & Co\. KG$/ })
      .locator("svg"),
    page
      .locator("div")
      .filter({ hasText: /^Telefon: 04402 972577-0$/ })
      .locator("path"),
    page
      .locator("div")
      .filter({ hasText: /^kontakt@littwin-systemtechnik\.de$/ })
      .locator("svg"),
    page
      .locator("div")
      .filter({ hasText: /^Handbücher$/ })
      .locator("svg"),
  ];
  for (const svg of footerSvgs) {
    await highlightAndExpectVisible(page, svg);
    await expect(svg).toBeVisible();
    await page.waitForTimeout(100);
  }
  const footerTexts = [
    page.getByText("Littwin Systemtechnik GmbH &"),
    page.getByText("Telefon: 04402 972577-"),
    page.getByText("kontakt@littwin-systemtechnik"),
    page.getByText("Handbücher", { exact: true }),
  ];
  for (const txt of footerTexts) {
    await highlightAndExpectVisible(page, txt);
    await expect(txt).toBeVisible();
    await page.waitForTimeout(100);
  }

  // Handbücher öffnen
  const handbuecher = page.getByText("Handbücher", { exact: true });
  await highlightAndExpectVisible(page, handbuecher);
  await handbuecher.click();
  await page.waitForTimeout(200);

  // PDF Handbücher Heading
  const pdfHandbuecher = page.getByRole("heading", { name: "PDF Handbücher" });
  await highlightAndExpectVisible(page, pdfHandbuecher);
  await pdfHandbuecher.click();
  await page.waitForTimeout(200);

  // KUE705FO.PDF sichtbar
  const kuePdf = page.getByText("KUE705FO.PDF");
  await highlightAndExpectVisible(page, kuePdf);
  await expect(kuePdf).toBeVisible();
  await page.waitForTimeout(100);

  // Footer Button
  const footerButton = page.getByRole("contentinfo").getByRole("button");
  await highlightAndExpectVisible(page, footerButton);
  await expect(footerButton).toBeVisible();
  await footerButton.click();
  await page.waitForTimeout(200);

  // Schaltausgänge Überschrift
  const schaltausgaengeH2 = page
    .locator("h2")
    .filter({ hasText: "Schaltausgänge" });
  await highlightAndExpectVisible(page, schaltausgaengeH2);
  await schaltausgaengeH2.click();
  await page.waitForTimeout(200);

  // Tabellenzellen
  const tableCells = [
    page.getByRole("cell", { name: "Ausgang", exact: true }),
    page.getByRole("cell", { name: "Bezeichnung" }),
    page.getByRole("cell", { name: "Schalter" }),
    page.getByRole("cell", { name: "Aktion" }),
    page.getByRole("cell", { name: "1" }),
    page.getByRole("cell", { name: "2", exact: true }),
    page.getByRole("cell", { name: "3", exact: true }),
    page.getByRole("cell", { name: "4", exact: true }),
    page.getByRole("cell", { name: "Ausgang2" }).first(),
    page.getByRole("cell", { name: "Ausgang2" }).nth(1),
    page.getByRole("cell", { name: "Ausgang3" }),
    page.getByRole("cell", { name: "Ausgang4" }),
  ];
  for (const cell of tableCells) {
    await highlightAndExpectVisible(page, cell);
    await cell.click();
    await page.waitForTimeout(100);
  }

  // Sichtbarkeit von Zellen in Zeilen prüfen
  const rowChecks = [
    { row: "1 Ausgang2", idx: 2 },
    { row: "2 Ausgang2", idx: 2 },
    { row: "Ausgang3", idx: 2 },
    { row: "Ausgang4", idx: 2 },
    { row: "1 Ausgang2", idx: 3 },
    { row: "2 Ausgang2", idx: 3 },
    { row: "Ausgang3", idx: 3 },
    { row: "Ausgang4", idx: 3 },
  ];
  for (const { row, idx } of rowChecks) {
    const cell = page
      .getByRole("row", { name: row })
      .getByRole("cell")
      .nth(idx);
    await highlightAndExpectVisible(page, cell);
    await expect(cell).toBeVisible();
    await page.waitForTimeout(100);
  }

  // SVG-Buttons in Zeilen
  const rowSvgClicks = [
    { row: "1 Ausgang2", nth: 2 },
    { row: "2 Ausgang2", nth: 2 },
    { row: "Ausgang3", nth: 2 },
    { row: "Ausgang4", nth: 2 },
  ];
  for (const { row, nth } of rowSvgClicks) {
    const svg = page.getByRole("row", { name: row }).locator("svg").nth(nth);
    await highlightAndExpectVisible(page, svg);
    await svg.click();
    await page.waitForTimeout(200);

    // Modal: Einstellungen Schaltausgang
    const heading = page.getByRole("heading", {
      name: "Einstellungen Schaltausgang",
    });
    await highlightAndExpectVisible(page, heading);
    await heading.click();
    await page.waitForTimeout(100);

    const bezeichnung = page.getByText("Bezeichnung:");
    await highlightAndExpectVisible(page, bezeichnung);
    await bezeichnung.click();
    await page.waitForTimeout(100);

    const textbox = page.getByRole("textbox", { name: "z. B. Licht Relais" });
    await highlightAndExpectVisible(page, textbox);
    await textbox.click();
    await page.waitForTimeout(100);

    const speichern = page.getByRole("button", { name: "Speichern" });
    await highlightAndExpectVisible(page, speichern);
    await expect(speichern).toBeVisible();
    await page.waitForTimeout(100);

    const modalSchliessen = page.getByRole("button", {
      name: "Modal schließen",
    });
    await highlightAndExpectVisible(page, modalSchliessen);
    await expect(modalSchliessen).toBeVisible();
    await modalSchliessen.click();
    await page.waitForTimeout(200);
  }
}

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

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