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

test.describe("System View Tests", () => {
  test.beforeEach(async ({ page }) => {
    // Besuche die System-Seite
    await page.goto("/system");
  });

  test("should display system title", async ({ page }) => {
    // Überprüfe, ob der Titel angezeigt wird
    await expect(page.locator("h1")).toContainText(
      "System Spannungen & Temperaturen"
    );
  });

  test("should show loading state initially", async ({ page }) => {
    // Überprüfe, ob der Ladeindikator angezeigt wird
    await expect(
      page.locator("text=Lade Systemdaten … bitte warten")
    ).toBeVisible();
  });

  test("should display system data after loading", async ({ page }) => {
    // Warte auf das Verschwinden des Ladeindikators
    await page.waitForSelector("text=Lade Systemdaten … bitte warten", {
      state: "hidden",
      timeout: 10000,
    });

    // Überprüfe, ob Systemdaten angezeigt werden
    // Diese Tests müssen an die tatsächliche Implementierung angepasst werden
    await expect(
      page.locator('[data-testid="system-overview-grid"]')
    ).toBeVisible({ timeout: 15000 });
  });

  test("should open detail modal when clicking on voltage card", async ({
    page,
  }) => {
    // Warte auf das Laden der Daten
    await page.waitForSelector("text=Lade Systemdaten … bitte warten", {
      state: "hidden",
      timeout: 10000,
    });

    // Klicke auf eine Spannungskarte (dies muss an die tatsächliche Implementierung angepasst werden)
    await page.locator('[data-testid="voltage-card"]:first-child').click();

    // Überprüfe, ob das Detail-Modal geöffnet wird
    await expect(page.locator('[data-testid="detail-modal"]')).toBeVisible();
  });

  test("should close detail modal when clicking close button", async ({
    page,
  }) => {
    // Warte auf das Laden der Daten
    await page.waitForSelector("text=Lade Systemdaten … bitte warten", {
      state: "hidden",
      timeout: 10000,
    });

    // Öffne das Modal
    await page.locator('[data-testid="voltage-card"]:first-child').click();
    await expect(page.locator('[data-testid="detail-modal"]')).toBeVisible();

    // Schließe das Modal
    await page.locator('[data-testid="modal-close-button"]').click();
    await expect(
      page.locator('[data-testid="detail-modal"]')
    ).not.toBeVisible();
  });
});