import type { Page } from "@playwright/test";
import { highlightAndExpectVisible } from "@playwright/utils/highlight";
import { navTest } from "@/playwright/tests/components/navigation/navTest";
import { headerTest } from "@/playwright/tests/components/header/headerTest";
import { footerTest } from "@/playwright/tests/components/footer/footerTest";

export async function runCableMonitoringTest(page: Page) {
  await page.goto("/kabelueberwachung");
  //----------------------
  await headerTest(page);
  await navTest(page);
  await footerTest(page);
  await page.waitForTimeout(400);
  //----------------------

  // Rack Buttons
  for (const rack of [1, 2, 3, 4, 1]) {
    await highlightAndExpectVisible(
      page,
      page.getByRole("button", { name: `Rack ${rack}` })
    );
    await page.waitForTimeout(400);
  }

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

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

  await highlightAndExpectVisible(
    page,
    page
      .locator("div")
      .filter({ hasText: /^1KÜ705-FO⚙$/ })
      .getByRole("heading")
  );
  await page.waitForTimeout(400);

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

  await highlightAndExpectVisible(
    page,
    page
      .locator("div")
      .filter({ hasText: /^1KÜ705-FO⚙$/ })
      .getByRole("button")
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(".flex.flex-col > span").first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(".w-\\[0\\.625rem\\]").first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator("span:nth-child(2)").first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page
      .locator(".w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].rounded-full.bg-red-500")
      .first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(page, page.getByText("Erdschluss").first());
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(".text-center > span:nth-child(2)").first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByText(/^RSL: \d+,\d{3} kOhm$/).first()
  );
  await page.waitForTimeout(400);

  // Use a unique locator to avoid strict mode violation (two elements contain text "Kabel 1").
  // The card exposes a title attribute "Kabel 1", so prefer getByTitle for a single match.
  await highlightAndExpectVisible(page, page.getByTitle("Kabel 1").first());
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(".text-black.text-\\[0\\.625rem\\].font-semibold").first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(".flex > button:nth-child(2)").first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(".bg-littwin-blue.text-white.cursor-pointer").first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(page, page.getByText("V4.20"));
  await page.waitForTimeout(400);

  // Kabel 8
  await highlightAndExpectVisible(page, page.getByText("8", { exact: true }));
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page
      .locator("div")
      .filter({ hasText: /^8KÜ705-FO⚙$/ })
      .getByRole("heading")
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page
      .locator("div")
      .filter({ hasText: /^8KÜ705-FO⚙$/ })
      .getByRole("button")
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page
      .locator(
        "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-start > span"
      )
      .first()
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(
      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-start > span:nth-child(2)"
    )
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(
      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-center > .w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].bg-green-500"
    )
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(
      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .flex.flex-col.mt-\\[0\\.625rem\\] > .flex.items-center.space-x-\\[0\\.25rem\\] > .flex.flex-col.items-center > .w-\\[0\\.625rem\\].h-\\[0\\.625rem\\].rounded-full.bg-red-500"
    )
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(page, page.getByText("Isolationsfehler"));
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(
      "div:nth-child(8) > .relative.bg-gray-300 > .relative.w-\\[7\\.075rem\\] > .relative.mt-\\[3\\.125rem\\] > .text-center > span:nth-child(2)"
    )
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByText(/^RSL: \d+,\d{3} kOhm$/).nth(3)
  );
  await page.waitForTimeout(400);

  // For cable 8 the UI shows a long name and exposes it via title attribute; target it explicitly
  await highlightAndExpectVisible(
    page,
    page.getByTitle("Kabel_8 in Salzgitter bei Hannover").first()
  );
  await page.waitForTimeout(400);

  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
  );
  await page.waitForTimeout(400);

  // ... (weitere Schritte können nach diesem Muster ergänzt werden)

  // Beispiel für weitere Schritte aus dem Kommentar:
  await highlightAndExpectVisible(
    page,
    page.locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]").first()
  );
  await page.waitForTimeout(400);
  await page
    .locator(".bg-littwin-blue.text-white.text-\\[0\\.625rem\\]")
    .first()
    .click();
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByRole("heading", { name: "Isolationswiderstand" })
  );
  await page.waitForTimeout(400);
  await page.getByRole("heading", { name: "Isolationswiderstand" }).click();
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(page, page.getByText("KÜ 1"));
  await page.waitForTimeout(400);
  await page.getByText("KÜ 1").click();
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(page, page.getByText("Von"));
  await page.waitForTimeout(400);
  await page.getByText("Von").click();
  await page.waitForTimeout(400);

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

  await highlightAndExpectVisible(page, page.getByText("Bis"));
  await page.waitForTimeout(400);
  await page.getByText("Bis").click();
  await page.waitForTimeout(400);

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

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

  await highlightAndExpectVisible(
    page,
    page.getByRole("option", { name: "Stündliche Werte" })
  );
  await page.waitForTimeout(400);
  await page.getByRole("option", { name: "Stündliche Werte" }).click();
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByRole("button", { name: "Stündliche Werte" })
  );
  await page.waitForTimeout(400);

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

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

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

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

  await highlightAndExpectVisible(
    page,
    page.getByRole("button", { name: "Messkurve" })
  );
  await page.waitForTimeout(400);
  await page.getByRole("button", { name: "Messkurve" }).click();
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByRole("option", { name: "Meldungen" })
  );
  await page.waitForTimeout(400);
  await page.getByRole("option", { name: "Meldungen" }).click();
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Prio" })
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Zeitstempel" })
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Quelle" })
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Meldung" })
  );
  await page.waitForTimeout(400);

  await highlightAndExpectVisible(
    page,
    page.getByRole("cell", { name: "Status" })
  );
  await page.waitForTimeout(400);
}