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

export async function runMeldungenTest(page: Page) {
  await page.goto("/meldungen");
  // Warte gezielt auf das Logo, um Server-Latenz abzufangen
  await page.waitForSelector('img[alt="Logo"]', { timeout: 15000 });

  // Logo
  const logo = page.getByRole("img", { name: "Logo", exact: true });
  await highlightAndExpectVisible(page, logo);
  await logo.click();
  await page.waitForTimeout(100);

  // TALAS Logo
  const talasLogo = page.getByRole("img", { name: "TALAS Logo" });
  await highlightAndExpectVisible(page, talasLogo);
  await talasLogo.click();
  await page.waitForTimeout(100);

  // Meldestation Heading
  const meldestation = page.getByRole("heading", { name: "Meldestation" });
  await highlightAndExpectVisible(page, meldestation);
  await meldestation.click();
  await page.waitForTimeout(100);

  // CPLV4 Ismail Rastede
  const cplv4Text = page.getByText("CPLV4 Ismail Rastede");
  await highlightAndExpectVisible(page, cplv4Text);
  await cplv4Text.click();
  await page.waitForTimeout(100);

  // Dark Mode Button sichtbar
  const darkModeBtn = page.getByRole("button", { name: "Dark Mode" });
  await highlightAndExpectVisible(page, darkModeBtn);
  await expect(darkModeBtn).toBeVisible();
  await page.waitForTimeout(100);

  // Sidebar Links sichtbar (wie in den anderen Tests, kein explizites Sidebar-Handling)
  const sidebarLinks = [
    { role: "link", name: "Übersicht" },
    { role: "link", name: "Kabelüberwachung" },
    { role: "link", name: "Meldungseingänge" },
    { role: "link", name: "Schaltausgänge" },
    { role: "link", name: "Messwerteingänge" },
    { role: "link", name: "Berichte" },
    { role: "link", name: "System" },
    { role: "link", name: "Einstellungen" },
  ];
  for (const link of sidebarLinks) {
    const locator = page.getByRole(link.role as any, { name: link.name });
    await highlightAndExpectVisible(page, locator);
    await expect(locator).toBeVisible();
    await page.waitForTimeout(50);
  }

  for (const link of sidebarLinks) {
    const locator = page.getByRole(link.role as any, { name: link.name });
    await highlightAndExpectVisible(page, locator);
    await expect(locator).toBeVisible();
    await page.waitForTimeout(50);
  }

  // Berichte Heading
  const berichteHeading = page.getByRole("heading", { name: "Berichte" });
  await highlightAndExpectVisible(page, berichteHeading);
  await berichteHeading.click();
  await page.waitForTimeout(100);

  // Von
  const vonText = page.getByText("Von");
  await highlightAndExpectVisible(page, vonText);
  await vonText.click();
  await page.waitForTimeout(50);

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

  /*   const julyDate = page
    .getByLabel("Choose Date")
    .locator("div")
    .filter({ hasText: "July" })
    .first();
  await highlightAndExpectVisible(page, julyDate);
  await expect(julyDate).toBeVisible(); */
  await page.waitForTimeout(50);

  await vonTextbox.click();
  await page.waitForTimeout(50);

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

  /*   const augustDate = page
    .getByLabel("Choose Date")
    .locator("div")
    .filter({ hasText: "August" })
    .first();
  await highlightAndExpectVisible(page, augustDate);
  await expect(augustDate).toBeVisible();
  await page.waitForTimeout(50); */

  await bisTextbox.click();
  await page.waitForTimeout(50);

  await highlightAndExpectVisible(page, berichteHeading);
  await berichteHeading.click();
  await page.waitForTimeout(50);

  // Buttons sichtbar
  const anzeigenBtn = page.getByRole("button", { name: "Anzeigen" });
  await highlightAndExpectVisible(page, anzeigenBtn);
  await expect(anzeigenBtn).toBeVisible();
  await page.waitForTimeout(50);

  const alleQuellenBtn = page.getByRole("button", { name: "Alle Quellen" });
  await highlightAndExpectVisible(page, alleQuellenBtn);
  await expect(alleQuellenBtn).toBeVisible();
  await alleQuellenBtn.click();
  await page.waitForTimeout(50);
  await alleQuellenBtn.click();
  await page.waitForTimeout(50);

  // Tabellenzellen
  const tableCells = [
    page.getByRole("cell", { name: "Prio" }),
    page.getByRole("cell", { name: "Zeitstempel" }),
    page.getByRole("cell", { name: "Quelle" }),
    page.getByRole("cell", { name: "Meldung" }),
    page.getByRole("cell", { name: "Status" }),
  ];
  for (const cell of tableCells) {
    await highlightAndExpectVisible(page, cell);
    await cell.click();
    await page.waitForTimeout(30);
  }

  // Dynamische Zeilen und Zellen (Beispiel für mehrere Zeitstempel)
  const zeiten = [
    "11.08.2025, 11:52:44",
    "11.08.2025, 11:51:14",
    "11.08.2025, 11:44:19",
    "11.08.2025, 11:43:44",
    "11.08.2025, 11:36:42",
    "11.08.2025, 11:35:45",
    "11.08.2025, 11:21:16",
    "11.08.2025, 11:21:05",
    "11.08.2025, 11:14:01",
  ];
  for (const zeit of zeiten) {
    const row = page.getByRole("row", { name: zeit });
    await highlightAndExpectVisible(page, row.getByRole("cell").first());
    await row.getByRole("cell").first().click();
    await page.waitForTimeout(20);

    const timeCell = page.getByRole("cell", { name: zeit.split(", ")[1] });
    await highlightAndExpectVisible(page, timeCell);
    await timeCell.click();
    await page.waitForTimeout(20);

    for (let i = 2; i <= 4; i++) {
      const cell = row.getByRole("cell").nth(i);
      await highlightAndExpectVisible(page, cell);
      await cell.click();
      await page.waitForTimeout(20);
    }
  }
}

//---------------------------------------------------------------------