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

test.describe("Live preview markers", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("/editor?e2e=true")
  })

  test("bold markers visible when block is focused", async ({ page }) => {
    const pm = page.locator('[role="textbox"][data-block-id]').first()
    await pm.focus()

    const boldMarker = pm.locator(".md-strong")
    await expect(boldMarker.first()).toBeVisible()
  })

  test("page ref chip rendered after blur", async ({ page }) => {
    const blockIds = await page.evaluate(() =>
      window.__testUtils__?.getBlockIds(),
    )
    expect(blockIds).toBeDefined()
    const id = blockIds?.[2] // block with "References" content

    await page.evaluate(
      ({ bid }) => window.__testUtils__?.insertText(bid, " [[Test Page]]"),
      { bid: id },
    )

    // Blur triggers live-preview decoration rendering
    await page.evaluate(() => window.__testUtils__?.toggleBlur())

    // The ref chip renders within the modified block
    const refBlock = page.locator(`[role="textbox"][data-block-id="${id}"]`)
    await expect(
      refBlock.locator('.md-page-ref[data-page-name="Test Page"]'),
    ).toBeVisible()
  })

  test("bold markers persist after blur in always-visible mode", async ({
    page,
  }) => {
    const pm = page.locator('[role="textbox"][data-block-id]').first()
    await pm.focus()

    await expect(pm.locator(".md-strong").first()).toBeVisible()

    await page.evaluate(() => window.__testUtils__?.toggleBlur())

    // always-visible mode keeps markers rendered regardless of focus
    await expect(pm.locator(".md-strong").first()).toBeVisible()
  })
})
