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

test.describe("Visual regression @visual", () => {
  test.beforeEach(async ({ page }) => {
    await page.addStyleTag({
      content: `
        body {
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
      `,
    })
  })

  // ── Block-level blurred state screenshots ────────────────────────────

  test("heading block blurred @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true")
    const pm = page.locator('[role="textbox"][data-block-id]').first()
    await pm.focus()
    await page.keyboard.type("# Heading One")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("heading-blurred.png")
  })

  test("bold text blurred @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("bold-blurred.png")
  })

  test("inline formatting blurred @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    const blockIds = await page.evaluate(() =>
      window.__testUtils__?.getBlockIds(),
    )
    // Text formatting block (index 2): italic, code, strikethrough, highlight
    await page.evaluate(
      (bid: string) => window.__testUtils__?.focusAtEnd(bid),
      blockIds?.[2],
    )
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("inline-formatting-blurred.png")
  })

  test("page ref chip blurred @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("page-ref-chips.png")
  })

  test("tag styling blurred @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("tag-styling.png")
  })

  test("task states blurred @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("task-states.png")
  })

  test("table as HTML blurred @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("table-blurred.png")
  })

  test("code block rendered @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("code-block.png")
  })

  test("callout block blurred @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("callout-blurred.png")
  })

  test("properties rendered @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await expect(page).toHaveScreenshot("properties.png")
  })

  // ── Focused state screenshots ────────────────────────────────────────

  test("bold markers visible focused @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true")
    const pm = page.locator('[role="textbox"][data-block-id]').first()
    await pm.focus()
    await page.keyboard.type("**visible markers**")
    await expect(page).toHaveScreenshot("bold-focused.png")
  })

  test("table raw pipes focused @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true")
    const blockIds = await page.evaluate(() =>
      window.__testUtils__?.getBlockIds(),
    )
    // Table block is at index 6
    await page.evaluate(
      (bid: string) => window.__testUtils__?.focusAtEnd(bid),
      blockIds?.[6],
    )
    await page.keyboard.type("| ")
    await expect(page).toHaveScreenshot("table-focused.png")
  })

  test("code block focused @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true")
    const blockIds = await page.evaluate(() =>
      window.__testUtils__?.getBlockIds(),
    )
    // Code block is at index 7
    await page.evaluate(
      (bid: string) => window.__testUtils__?.focusAtEnd(bid),
      blockIds?.[7],
    )
    await expect(page).toHaveScreenshot("code-focused.png")
  })

  test("callout block focused @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true")
    const blockIds = await page.evaluate(() =>
      window.__testUtils__?.getBlockIds(),
    )
    // Callout block is at index 8
    await page.evaluate(
      (bid: string) => window.__testUtils__?.focusAtEnd(bid),
      blockIds?.[8],
    )
    await expect(page).toHaveScreenshot("callout-focused.png")
  })

  // ── Theme screenshots ────────────────────────────────────────────────

  test("default theme @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&theme=default")
    await page.waitForTimeout(300)
    await expect(page).toHaveScreenshot("theme-default.png")
  })

  test("dark theme @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&theme=dark")
    await page.waitForTimeout(300)
    await expect(page).toHaveScreenshot("theme-dark.png")
  })

  test("orange monochrome theme @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&theme=orange")
    await page.waitForTimeout(300)
    await expect(page).toHaveScreenshot("theme-orange.png")
  })

  // ── Full editor state screenshots ────────────────────────────────────

  test("full editor initial load @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true")
    await page.waitForTimeout(300)
    await expect(page).toHaveScreenshot("editor-initial.png")
  })

  test("full editor after typing @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true")
    const blockIds = await page.evaluate(() =>
      window.__testUtils__?.getBlockIds(),
    )
    await page.evaluate(
      (bid: string) => window.__testUtils__?.focusAtEnd(bid),
      blockIds?.[blockIds?.length - 1],
    )
    await page.keyboard.type("\n\n# New Content\n\nTyped by the user.")
    await page.waitForTimeout(300)
    await expect(page).toHaveScreenshot("editor-after-typing.png")
  })

  // ── Marker mode comparison ───────────────────────────────────────────

  test("always-visible mode shows markers @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=always-visible")
    await page.waitForTimeout(300)
    await expect(page).toHaveScreenshot("markers-always-visible.png")
  })

  test("live-preview mode hides markers on blur @visual", async ({ page }) => {
    await page.goto("/editor?e2e=true&marker-mode=live-preview")
    await page.evaluate(() => window.__testUtils__?.toggleBlur())
    await page.waitForTimeout(100)
    await expect(page).toHaveScreenshot("live-preview-blurred.png")
  })
})
