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

// Exercise real Radix portals/focus/scroll locks without a running dashboard.
test.beforeEach(async ({ page }) => {
    await page.addInitScript(() => localStorage.setItem("language", "en"))
    await page.route("**/api/v1/**", async (route) => {
        const path = new URL(route.request().url()).pathname
        let data: unknown = []
        if (path === "/api/v1/profile") data = { id: 1, username: "admin", role: 0 }
        if (path === "/api/v1/setting") {
            data = { config: { site_name: "Test", language: "en_US" }, version: "test" }
        }
        if (path === "/api/v1/server") {
            data = Array.from({ length: 60 }, (_, i) => ({
                id: i + 1,
                name: `Server ${String(i + 1).padStart(2, "0")}`,
                display_index: i,
            }))
        }
        if (path === "/api/v1/server-group") {
            data = [{ group: { id: 1, name: "Test group" }, servers: [] }]
        }
        await route.fulfill({ json: { success: true, data } })
    })
})

test("dashboard buttons advertise clickability", async ({ page }) => {
    await page.goto("/dashboard")
    const row = page.locator("tbody tr").filter({ hasText: "Server 01" })
    const editButton = row.locator('button:not([role="checkbox"])').first()
    await expect(editButton).toHaveCSS("cursor", "pointer")
    await expect(row.getByRole("checkbox")).toHaveCSS("cursor", "pointer")
    await row.getByRole("checkbox").click()
    await expect(row.getByRole("checkbox")).toBeChecked()
})

test("server group picker scrolls, selects, searches and submits inside its dialog", async ({ page }) => {
    await page.goto("/dashboard/server-group")
    const row = page.locator("tbody tr").filter({ hasText: "Test group" })
    await row.locator('button:not([role="checkbox"])').first().click()
    const editor = page.getByRole("dialog", { name: "Edit Server Group", exact: true })
    await editor.getByText("Select options", { exact: true }).click()
    const list = page.locator("[cmdk-list]")
    await expect(list).toBeVisible()
    await expect(list).toHaveCSS("pointer-events", "auto")
    await list.hover()
    await page.mouse.wheel(0, 400)
    await expect.poll(() => list.evaluate((element) => element.scrollTop)).toBeGreaterThan(0)
    await page.getByRole("option", { name: "Server 20", exact: true }).click()
    await expect(editor.getByText("Server 20", { exact: true })).toBeVisible()
    await page.getByPlaceholder("Search...").fill("Server 60")
    await page.getByRole("option", { name: "Server 60", exact: true }).click()
    await page.keyboard.press("Escape")
    await expect(list).not.toBeVisible()
    await expect(editor).toBeVisible()
    await expect(editor.getByText("Server 60", { exact: true })).toBeVisible()
    const saved = page.waitForRequest((request) =>
        request.url().endsWith("/api/v1/server-group/1") && request.method() === "PATCH",
    )
    await editor.getByRole("button", { name: "Confirm", exact: true }).click()
    expect((await saved).postDataJSON()).toEqual({ name: "Test group", servers: [20, 60] })
    await expect(editor).not.toBeVisible()
})