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

async function dismissAudioUnlock(page: any) {
  const btn = page.getByRole("button", { name: /tocá/i })
  if (await btn.isVisible({ timeout: 2000 }).catch(() => false)) {
    await btn.click()
    await page.waitForTimeout(1200)
  }
}

test.describe("Pairing flow", () => {

  test("pairing page loads form with code input", async ({ page }) => {
    await page.goto("/child/pairing", { waitUntil: "networkidle", timeout: 15000 })
    await dismissAudioUnlock(page)
    await expect(page.getByPlaceholder("Código")).toBeVisible({ timeout: 10000 })
  })

  test("pairing page has submit button", async ({ page }) => {
    await page.goto("/child/pairing", { waitUntil: "networkidle", timeout: 15000 })
    await dismissAudioUnlock(page)
    await expect(page.getByRole("button", { name: "Listo" })).toBeVisible({ timeout: 10000 })
  })

  test("pairing code input accepts text", async ({ page }) => {
    await page.goto("/child/pairing", { waitUntil: "networkidle", timeout: 15000 })
    await dismissAudioUnlock(page)
    const input = page.getByPlaceholder("Código")
    await input.fill("ABCD1234")
    await expect(input).toHaveValue("ABCD1234")
  })

  test("lectura page shows pairing message when not paired", async ({ page }) => {
    await page.goto("/child/lectura", { waitUntil: "networkidle", timeout: 15000 })
    await dismissAudioUnlock(page)
    await expect(page.getByText("emparejar", { exact: false }).first()).toBeVisible({ timeout: 10000 })
  })

  test("numeros page shows pairing message when not paired", async ({ page }) => {
    await page.goto("/child/numeros", { waitUntil: "networkidle", timeout: 15000 })
    await dismissAudioUnlock(page)
    await expect(page.getByText("emparejar", { exact: false }).first()).toBeVisible({ timeout: 10000 })
  })

  test("lectura page has ir a emparejar button", async ({ page }) => {
    await page.goto("/child/lectura", { waitUntil: "networkidle", timeout: 15000 })
    await dismissAudioUnlock(page)
    await expect(page.getByRole("button", { name: /emparejar/i })).toBeVisible({ timeout: 10000 })
  })
})