describe("contextmenuTest", () => {
  it("contetmenu Station öffnen (Tab)", () => {
    cy.log("Test startet jetzt");

    // 1. Viewport einstellen
    cy.viewport(1920, 1080);
    cy.log("Viewport eingestellt auf 1920x1080");

    // 2. Seite besuchen
    cy.visit("http://10.10.0.13:3000/?m=12&u=484");
    cy.wait(5000); // Wartezeit nach dem Laden
    cy.log("Seite geöffnet");

    // 3. Sicherstellen, dass die Karte geladen ist
    cy.get("#map", { timeout: 15000 }).should("be.visible");
    cy.log("Karte geladen");

    // 4. Wartezeit zum Stabilisieren der Karte
    cy.wait(2000);

    // 5. Marker suchen und Rechtsklick simulieren
    cy.get('img[src*="img/icons/marker-icon-20.svg"]') // Marker suchen
      .filter(":visible") // Nur sichtbare Marker
      .first() // Ersten Marker auswählen
      .scrollIntoView() // Marker in den sichtbaren Area scrollen
      .should("be.visible") // Sicherstellen, dass Marker sichtbar ist
      .trigger("mouseover") // Mouseover simulieren
      .wait(500) // Wartezeit nach Mouseover
      .rightclick({ force: true }); // Rechtsklick auf den Marker
    cy.log("Rechtsklick auf Marker ausgeführt");

    // Screenshot nach Rechtsklick zum Debugging
    // cy.screenshot("nach-rechtsklick");

    // 6. Kontextmenü prüfen mit explizitem Selektor
    cy.get(".leaflet-contextmenu-item") // Suche alle Menüeinträge mit der Klasse
      .contains("Station öffnen (Tab)", { timeout: 5000 }) // Prüfe Text innerhalb des Eintrags
      .should("be.visible"); // Sichtbarkeit sicherstellen
    cy.log("Menüeintrag gefunden");

    // 7. URL abfangen und testen, bevor der Tab geöffnet wird
    const targetUrl = "http://10.10.0.13/talas5/devices/cpl.aspx?ver=35&kue=24&id=50922";

    // HTTP-Anfrage zur Überprüfung des Status
    cy.request(targetUrl).then((response) => {
      expect(response.status).to.eq(200); // Erwartet HTTP 200 OK
      cy.log("URL ist erreichbar, Status 200");
    });

    // 8. Menüeintrag auswählen (öffnet den neuen Tab)
    cy.get(".leaflet-contextmenu-item") // Explizit Menüeintrag mit Klasse auswählen
      .contains("Station öffnen (Tab)")
      .click(); // Menüeintrag anklicken
    cy.log("Menüeintrag ausgewählt");

    // 9. Klick auf die Karte, um Kontextmenü zu schließen
    cy.get("#map").click(100, 100); // Klick auf eine leere Stelle
    cy.log("Kontextmenü geschlossen");

    // 10. Optionaler Screenshot nach Abschluss
    // cy.screenshot("test-abgeschlossen");
  });
});