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

test.beforeEach(async ({ page }) => {
    await page.goto("/berater.html");
});

test("Navigation öffnet die separate Beraterseite und Profile werden geladen", async ({
    page,
}) => {
    const profileLink = page.locator('.navbar__link[href="/berater.html"]');
    if (!(await profileLink.isVisible())) {
        await page.getByRole("button", { name: "Menü öffnen" }).click();
    }
    await expect(profileLink).toBeVisible();
    await expect(
        page.getByRole("heading", { name: /Ernährungsberater/ }),
    ).toBeVisible();

    const cards = page.locator(".advisor-card");
    await expect(cards).toHaveCount(2);
    await expect(cards.nth(0)).toContainText("Relindis Agethen (Lilli)");
    await expect(cards.nth(0)).toContainText("Kurzbiografie");
    await expect(cards.nth(0)).toContainText("Qualifikationen");
    await expect(cards.nth(0)).toContainText("Schwerpunkte");
    const roleBackground = await cards
        .nth(0)
        .locator(".advisor-role")
        .evaluate((element) => getComputedStyle(element).backgroundColor);
    const detailsBackground = await cards
        .nth(0)
        .locator(".package-details-box")
        .evaluate((element) => getComputedStyle(element).backgroundColor);
    expect(roleBackground).toBe("rgba(0, 0, 0, 0)");
    expect(detailsBackground).not.toBe("rgba(0, 0, 0, 0)");
    await expect(
        cards.nth(0).getByRole("button", { name: "Lilli kontaktieren" }),
    ).toBeVisible();
    await expect(
        cards.nth(1).getByRole("button", { name: "Maren kontaktieren" }),
    ).toBeVisible();

    await cards
        .nth(0)
        .getByRole("button", { name: "Lilli kontaktieren" })
        .click();
    const contactDialog = page.getByRole("dialog");
    await expect(contactDialog).toBeVisible();
    await expect(contactDialog).toContainText("Lilli");
});

test("Beraterbilder sind präsent und lassen sich mit Karussell-Pfeilen wechseln", async ({
    page,
}) => {
    const lilli = page
        .locator(".advisor-card")
        .filter({ hasText: "Relindis Agethen" });
    const image = lilli.locator(
        '.advisor-gallery__slide[aria-hidden="false"] .advisor-gallery__image',
    );
    const track = lilli.locator(".advisor-gallery__track");
    const previous = lilli.getByRole("button", {
        name: "Vorheriges Bild von Relindis Agethen (Lilli)",
    });
    const next = lilli.getByRole("button", {
        name: "Nächstes Bild von Relindis Agethen (Lilli)",
    });
    const portraitDot = lilli.getByRole("button", { name: "Bild 1: Porträt" });
    const actionDot = lilli.getByRole("button", {
        name: "Bild 2: Aktionsbild",
    });

    await expect(image).toBeVisible();
    await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
    const bounds = await image.boundingBox();
    expect(bounds.width).toBeGreaterThan(150);
    expect(bounds.height).toBeGreaterThan(150);
    await expect(portraitDot).toHaveAttribute("aria-current", "true");
    await expect(actionDot).toHaveAttribute("aria-current", "false");

    await next.click();
    await expect(track).toHaveCSS("transform", /matrix\(1, 0, 0, 1, -/);
    await expect(image).toHaveAttribute("src", "/images/Lilli2.jpeg");
    await expect(image).toHaveAttribute(
        "alt",
        "Relindis Agethen (Lilli) – Aktionsbild",
    );
    await expect(actionDot).toHaveAttribute("aria-current", "true");
    await expect(portraitDot).toHaveAttribute("aria-current", "false");

    await previous.click();
    await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
    await expect(portraitDot).toHaveAttribute("aria-current", "true");

    await portraitDot.click();
    await expect(image).toHaveAttribute("src", "/images/Lilli1.jpeg");
});

test("Maren hat ebenfalls ein umschaltbares Porträt- und Aktionsbild", async ({
    page,
}) => {
    const maren = page
        .locator(".advisor-card")
        .filter({ hasText: "Maren Hoffmann" });
    const image = maren.locator(
        '.advisor-gallery__slide[aria-hidden="false"] .advisor-gallery__image',
    );

    await expect(image).toHaveAttribute("src", "/images/Maren1.jpeg");
    await maren
        .getByRole("button", { name: "Nächstes Bild von Maren Hoffmann" })
        .click();
    await expect(image).toHaveAttribute("src", "/images/Maren2.jpeg");
});