import { test, expect, openContentCollection, openNewContentEntry } from "./fixtures"

test.describe("Admin content collection config", () => {
    test("renders a meaningful content list with configured columns and pagebuilder summaries", async ({ page }) => {
        await openContentCollection(page)

        const main = page.locator("main")
        const table = page.getByRole("table")
        const homeRow = page.getByRole("row", { name: /Startseite\s+\// }).first()

        await expect(table).toBeVisible()
        await expect(main).toContainText("Sprache")
        await expect(main).toContainText("Pfad")
        await expect(main).toContainText("Inhaltsblöcke")
        await expect(homeRow).toContainText("Startseite")
        await expect(homeRow).toContainText("Hero")
        await expect(homeRow).toContainText("Features")
        await expect(table.locator("tbody img").first()).toBeVisible()
    })

    test("shows the configured content widgets in the new entry form", async ({ page }) => {
        await openNewContentEntry(page)

        await expect(page.getByLabel("Name")).toBeVisible()
        await expect(page.getByLabel("Pfad")).toBeVisible()
        await expect(page.getByLabel("Teasertext")).toBeVisible()
        await expect(page.getByText("Alternative Pfade")).toBeVisible()
        await expect(page.getByText("Inhaltsblöcke").first()).toBeVisible()
        await expect(page.getByRole("button", { name: /Desktop \(1280px\)/ })).toBeVisible()
        await expect(page.getByRole("button", { name: /Tablet \(768px\)/ })).toBeVisible()
        await expect(page.getByRole("button", { name: /Mobil \(375px\)/ })).toBeVisible()
        await expect(page.getByRole("button", { name: /Block hinzufügen/ }).first()).toBeVisible()
    })

    test("loads the pagebuilder block chooser and renders the hero preview live", async ({ page }) => {
        await openNewContentEntry(page)

        await page
            .getByRole("button", { name: /Block hinzufügen/ })
            .first()
            .click()

        await expect(page.getByRole("button", { name: /Hero .*Call-to-Action\./ })).toBeVisible()
        await expect(page.getByRole("button", { name: /Features .*strukturierten Boxen\./ })).toBeVisible()
        await expect(page.getByRole("button", { name: /Richtext .*Bild\./ })).toBeVisible()
        await expect(page.getByRole("button", { name: /Akkordeon .*Fragen und Antworten\./ })).toBeVisible()
        await expect(page.getByRole("button", { name: /Kontaktformular .*Intro-Text\./ })).toBeVisible()

        await page.getByRole("button", { name: /Hero .*Call-to-Action\./ }).click()

        const dialog = page.getByRole("dialog", { name: /Hero #1 bearbeiten/ })
        await expect(dialog).toBeVisible()
        await expect(dialog.getByLabel("Blocktyp")).toBeVisible()
        await expect(dialog.getByLabel("Unterzeile")).toBeVisible()
        await expect(dialog.getByLabel("Containerbreite")).toBeVisible()
        await expect(dialog.getByRole("button", { name: /Vorhandene durchsuchen/ })).toBeVisible()

        await dialog.getByLabel("Überschrift").fill("Admin Preview Test")
        await dialog.getByLabel("Unterzeile").fill("Pagebuilder Vorschau aktualisiert")

        await expect(dialog.getByRole("heading", { name: "Admin Preview Test" })).toBeVisible()
        await expect(dialog).toContainText("Pagebuilder Vorschau aktualisiert")
        await expect(page.getByRole("button", { name: /Admin Preview Test/ })).toBeVisible()
    })
})