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

// Simple visual smoke test for /kabelueberwachung
// Creates / compares a full-page screenshot (baseline generated on first run with --update-snapshots)
// To update baseline: npx playwright test tests/kabelueberwachung-visual.spec.ts --update-snapshots
// To run in UI mode:  npx playwright test --ui

// Helper to stabilize dynamic UI before screenshot

test.describe("Kabelüberwachung Visual", () => {
  test("test", async ({ page }) => {
    // Globales Auto-Highlight für jeden Klick (nur lokale Debug-Hilfe)
    await page.addInitScript(() => {
      interface HighlightFlagWindow extends Window {
        __PW_CLICK_HIGHLIGHT__?: boolean;
      }
      const w = window as HighlightFlagWindow;
      if (w.__PW_CLICK_HIGHLIGHT__) return; // einmalig
      w.__PW_CLICK_HIGHLIGHT__ = true;
      document.addEventListener(
        "click",
        (ev) => {
          const el = ev.target as HTMLElement | null;
          if (!el || !(el instanceof HTMLElement)) return;
          const prev = el.style.outline;
          el.style.outline = "3px solid #ff00aa";
          setTimeout(() => {
            el.style.outline = prev;
          }, 600);
        },
        true // capture, damit nichts das Event vorher stoppt
      );
    });
    await page.goto("http://localhost:3000/kabelueberwachung");
    await page
      .locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]")
      .first()
      .click();
    //warte 1 Sekunde
    await page.waitForTimeout(2000);
    await page.getByRole("button", { name: "Daten laden" }).click();
    await page.waitForTimeout(2000);
    await page.getByRole("button", { name: "Messkurve" }).click();
    await page.waitForTimeout(2000);
    await page.getByRole("option", { name: "Meldungen" }).click();
    await page.waitForTimeout(2000);
    await page.getByRole("button", { name: "" }).click();
    await page.waitForTimeout(2000);
    page.once("dialog", (dialog) => {
      console.log(`Dialog message: ${dialog.message()}`);
      dialog.dismiss().catch(() => {});
    });
    await page.waitForTimeout(2000);
    await page.locator(".flex > button:nth-child(2)").first().click();
    await page.waitForTimeout(2000);
    await page.getByRole("button", { name: "Messkurve" }).click();
    await page.waitForTimeout(2000);
    await page.getByRole("option", { name: "Meldungen" }).click();
    await page.waitForTimeout(2000);
    await page.getByRole("button", { name: "" }).click();
    await page.waitForTimeout(2000);
    await page
      .locator(".bg-littwin-blue.text-white.cursor-pointer")
      .first()
      .click();
    await page.waitForTimeout(2000);
    await page.getByRole("button", { name: "Messkurve" }).click();
    await page.waitForTimeout(2000);
    await page.getByRole("option", { name: "Meldungen" }).click();
    await page.waitForTimeout(2000);
    await page.getByRole("button", { name: "" }).click();
    await page.waitForTimeout(2000);
  });
});
//zum ausführen
//  npx playwright test kabelueberwachung-visual.spec.ts --project=chromium --headed
//zum aufzeichnen
//  npx playwright codegen http://localhost:3000/kabelueberwachung --channel=chrome