import { test, expect } from "@playwright/test";
import { highlightAndExpectVisible } from "@playwright/utils/highlight";

/**
 * TDR Modal UI / Behavior Regression Test
 * Covers:
 *  - Opening TDR-Messung modal
 *  - Header elements (fullscreen + close)
 *  - Toolbar buttons: reference save + start TDR measurement
 *  - Measurement dropdown styling & options list formatting
 *  - View toggle (Messkurve / Meldungen) path reused from ISO
 */

test.describe("TDR Modal", () => {
  test("opens and validates TDR UI + dropdown + actions", async ({ page }) => {
    await page.goto("/kabelueberwachung");

    // Strategy: open a cable card then open TDR via iterative attempts.
    // We look for a heading 'TDR-Messung' after clicking blue buttons.
    const blueButtons = page.locator(".bg-littwin-blue.text-white");
    const count = await blueButtons.count();
    for (let i = 0; i < Math.min(count, 4); i++) {
      await highlightAndExpectVisible(page, blueButtons.nth(i));
      await blueButtons.nth(i).click();
      if (
        await page
          .getByRole("heading", { name: "TDR-Messung" })
          .isVisible()
          .catch(() => false)
      ) {
        break;
      } else {
        // Close and try next if wrong modal
        if (
          await page
            .locator("button:has(i.bi-x-lg)")
            .isVisible()
            .catch(() => false)
        ) {
          await page.locator("button:has(i.bi-x-lg)").click();
        }
      }
    }

    const heading = page.getByRole("heading", { name: "TDR-Messung" });
    await heading.waitFor();

    const dialog = page.getByRole("dialog");
    await expect(dialog).toBeVisible();

    // Header buttons
    await expect(
      dialog
        .locator("button:has(i.bi-arrows-fullscreen, i.bi-fullscreen-exit)")
        .first()
    ).toBeVisible();
    await expect(dialog.locator("button:has(i.bi-x-lg)")).toBeVisible();

    // Toolbar base
    await expect(dialog.locator(".toolbar")).toBeVisible();
    await expect(dialog.locator(".toolbar").getByText("KÜ")).toBeVisible();

    // Reference save & start buttons
    const refBtn = dialog.getByRole("button", {
      name: "TDR-Kurve als Referenz speichern",
    });
    await expect(refBtn).toBeVisible();
    const startBtn = dialog.getByRole("button", {
      name: /TDR-Messung starten|TDR läuft/,
    });
    await expect(startBtn).toBeVisible();

    // Measurement dropdown button: Should contain formatted pattern "Fehlerstelle:" when a selection exists
    const measurementBtn = dialog.getByRole("button", { name: /Fehlerstelle/ });
    await highlightAndExpectVisible(page, measurementBtn);
    await measurementBtn.click();

    // Options list - wait for at least one option containing Fehlerstelle
    const option = page.getByRole("option", { name: /Fehlerstelle/ }).first();
    await option.waitFor();
    await expect(option).toBeVisible();

    // Select first option and verify button text updates (optional assertion already implicit)
    await option.click();
    await expect(measurementBtn).toContainText("Fehlerstelle");

    // Switch to Meldungen view using view dropdown in header
    const viewToggle = dialog.getByRole("button", {
      name: /Messkurve|Meldungen/,
    });
    await viewToggle.click();
    await page.getByRole("option", { name: "Meldungen" }).click();

    // Expect Meldungen columns
    for (const header of [
      "Prio",
      "Zeitstempel",
      "Quelle",
      "Meldung",
      "Status",
    ]) {
      await highlightAndExpectVisible(
        page,
        dialog.getByRole("cell", { name: header })
      );
    }

    // Switch back to Messkurve
    await viewToggle.click();
    await page.getByRole("option", { name: "Messkurve" }).click();
    await expect(dialog.locator("canvas")).toBeVisible();
  });
});