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

export async function runAnalogInputsTest(page: Page) {
  // Kombinierte Helper-Funktion: injiziert CSS (nur einmal), hebt hervor und prüft Sichtbarkeit
  async function highlightAndExpectVisible(
    page: Page,
    locator: Locator,
    durationMs = 800
  ) {
    // CSS nur einmal pro Page injizieren
    if (!(await page.evaluate(() => (window as any).__pwForceCssInjected))) {
      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();
  }

  /*
    import { test, expect } from "../fixtures";
     npx playwright codegen http://localhost:3000/analogInputs --target=ts -o tests/e2e/analog-inputs.spec.ts
     ob ein Element sichtbar ist dann Auge Icon klicken
     ansonsten nimmt automatich die klicks auf
     //----------------------------------------------
     Zum ausführen
    
     alle Test datei , je nach dem wie in package.json definiert ist
     npm run test:e2e:ui
    
     bestimmte datei
     npm run test:e2e:ui -- tests/analogInputs.spec.ts
    npm run test:e2e:ui -- tests/e2e/analog-inputs.spec.ts
    */

  test.slow();
  test("Messwerteingänge", async ({ page }) => {
    await page.goto("/analogInputs");

    await highlightAndExpectVisible(
      page,
      page.getByRole("heading", { name: "Messwerteingänge" }).nth(1)
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "Eingang" })
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "Messwert" })
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "Einheit" })
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "Bezeichnung" })
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "Einstellungen" })
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "Messkurve", exact: true })
    );

    await highlightAndExpectVisible(page, page.getByText("1", { exact: true }));

    await highlightAndExpectVisible(page, page.getByText("2", { exact: true }));

    await highlightAndExpectVisible(page, page.getByText("3", { exact: true }));

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "4", exact: true }).locator("path")
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "5", exact: true })
    );

    await highlightAndExpectVisible(page, page.getByText("6", { exact: true }));

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "7", exact: true })
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page.getByRole("cell", { name: "8", exact: true })
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page.locator(".border.p-2.text-center").first()
    );
    // Markiere die gesamte erste Datenzeile (Row mit "AE 1" falls vorhanden)

    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page
        .getByRole("row", { name: "2 5.67 °C Temperatur" })
        .getByRole("button")
        .first()
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page.locator("tr:nth-child(3) > td:nth-child(5)")
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page
        .getByRole("row", { name: "0.01 V AE 4 Messkurve anzeigen" })
        .getByRole("button")
        .first()
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page
        .getByRole("row", { name: "8 -0.00 mA AE 8 Messkurve" })
        .getByLabel("Messkurve anzeigen")
    );
    await page.waitForTimeout(3000);

    await page.getByRole("cell", { name: "1", exact: true }).click();

    await page.locator(".border.p-2.text-center").first().click();

    await highlightAndExpectVisible(
      page,
      page.getByRole("heading", { name: "Einstellungen Messwerteingang" })
    );

    await highlightAndExpectVisible(page, page.getByText("Bezeichnung:"));
    await highlightAndExpectVisible(page, page.getByText("Offset:"));
    await highlightAndExpectVisible(page, page.getByText("Faktor:"));
    await highlightAndExpectVisible(page, page.getByText("Einheit:"));
    await highlightAndExpectVisible(page, page.getByText("Speicherintervall:"));

    await highlightAndExpectVisible(
      page,
      page.getByRole("button", { name: "Speichern" })
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page.getByRole("button", { name: "Modal schließen" })
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page.getByText(
        "Einstellungen Messwerteingang 1Bezeichnung:Offset:Faktor:Einheit:"
      )
    );
    await page.waitForTimeout(3000);

    await page.getByRole("button", { name: "Modal schließen" }).click();

    await page
      .getByRole("row", { name: "1 126.63 V AE 1 Messkurve" })
      .getByLabel("Messkurve anzeigen")
      .click();

    await highlightAndExpectVisible(
      page,
      page.getByText(
        "Messkurve Messwerteingang 1Eingang 1VonBisAlle MesswerteDaten laden"
      )
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("heading", { name: "Messkurve Messwerteingang" })
    );

    await highlightAndExpectVisible(page, page.locator("canvas"));

    await highlightAndExpectVisible(
      page,
      page.getByText("Eingang 1VonBisAlle")
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("button", { name: "Daten laden" })
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("button", { name: "Alle Messwerte " })
    );

    await highlightAndExpectVisible(page, page.getByText("Von"));

    await highlightAndExpectVisible(page, page.getByText("Bis"));

    await highlightAndExpectVisible(
      page,
      page.locator("div").filter({ hasText: /^Von$/ })
    );

    await highlightAndExpectVisible(
      page,
      page.locator("div").filter({ hasText: /^Von$/ }).getByRole("textbox")
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page.locator("div").filter({ hasText: /^Bis$/ })
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page.locator("div").filter({ hasText: /^Bis$/ }).getByRole("textbox")
    );
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(page, page.getByRole("img"));
    await page.waitForTimeout(3000);

    await highlightAndExpectVisible(
      page,
      page.getByRole("button", { name: "Alle Messwerte " })
    );
    await page.getByRole("button", { name: "Alle Messwerte " }).click();
    await page.waitForTimeout(3000);

    await page.getByRole("option", { name: "Stündlich" }).click();
    await page.waitForTimeout(3000);

    await page.getByRole("button", { name: "Stündlich" }).click();
    await page.waitForTimeout(3000);

    await page.getByRole("option", { name: "Täglich" }).click();
    await page.waitForTimeout(3000);

    await page.getByRole("button", { name: "Fullscreen" }).click();

    await page.getByRole("button", { name: "Exit fullscreen" }).click();

    await highlightAndExpectVisible(
      page,
      page.getByRole("button", { name: "Fullscreen" })
    );

    await highlightAndExpectVisible(
      page,
      page.getByRole("button", { name: "Modal schließen" })
    );
    await page.waitForTimeout(3000);

    await page.getByRole("button", { name: "Modal schließen" }).click();
  });

  // ...dein AnalogInputs-Testcode...
}