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

/**
 * ISO Modal UI / Behavior Regression Test
 * Covers:
 *  - Opening ISO modal from cable monitoring page
 *  - Verifies modal structure (header, fullscreen + close buttons)
 *  - Dropdown (Messkurve <-> Meldungen) presence & options
 *  - Toolbar elements (KÜ badge, DateRangePicker fields, Mode dropdown, Daten laden button)
 *  - Style smoke checks via class attributes (non brittle, only key tokens)
 *  - Switching to Meldungen hides date + mode controls and shows table headers
 */
test.describe("ISO Modal", () => {
  test("opens and validates core UI + view toggle behavior", async ({
    page,
  }) => {
    await page.goto("/kabelueberwachung");

    const firstChartButton = page
      .locator(".bg-littwin-blue.text-white")
      .first();
    await highlightAndExpectVisible(page, firstChartButton);
    await firstChartButton.click();

    const heading = page.getByRole("heading", { name: "Isolationswiderstand" });
    await highlightAndExpectVisible(page, heading);

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

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

    const viewToggle = dialog.getByRole("button", {
      name: /Messkurve|Meldungen/,
    });
    await highlightAndExpectVisible(page, viewToggle);

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

    await expect(dialog.getByText("Von")).toBeVisible();
    await expect(dialog.getByText("Bis")).toBeVisible();

    const modeBtn = dialog.getByRole("button", {
      name: /Alle Messwerte|Stündlich|Täglich/,
    });
    await modeBtn.click();
    await expect(
      page.getByRole("option", { name: /Alle Messwerte/ })
    ).toBeVisible();
    await expect(page.getByRole("option", { name: /Stündlich/ })).toBeVisible();
    await expect(page.getByRole("option", { name: /Täglich/ })).toBeVisible();
    await page.getByRole("option", { name: "Stündlich" }).click();
    await modeBtn.click();
    await page.getByRole("option", { name: "Alle Messwerte" }).click();

    const loadBtn = dialog.getByRole("button", { name: "Daten laden" });
    await expect(loadBtn).toBeVisible();

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

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

    await expect(dialog.getByText("Von")).not.toBeVisible();
    await expect(dialog.getByText("Bis")).not.toBeVisible();

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