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

for (const width of [320, 390, 1280, 1440]) test("OSPF: CIDR целиком помещается в закреплённой ячейке " + width, async ({ page }) => {
  await page.setViewportSize({ width, height: 1000 })
  const destinations = ["198.18.190.2/32", "255.255.255.255/32"]
  const host = { serverId: 1, serverName: "CHR", serverSite: "", serverCountry: "RU" }
  let writes = 0
  await page.route("**/health", r => r.fulfill({ json: { ok: true } }))
  await page.route("**/api/**", r => {
    const path = new URL(r.request().url()).pathname
    if (r.request().method() !== "GET") writes++
    return r.fulfill({ json: path === "/api/auth/config" ? { required: false } : path === "/api/servers" ? [{ id: 1, name: "CHR", host: "192.0.2.1", enabled: true, country: "RU", status: null }] : path === "/api/ospf/catalog" ? {
      neighbors: [], interfaces: [], instances: [], bfdSessions: [], failures: [],
      routes: destinations.map((destination, i) => ({ ...host, id: "route-" + i, destination, type: "Unknown", cost: null, nextHop: "198.18.91.2", via: "GRE-reserve", area: "" })),
    } : {} })
  })
  await page.goto("/ospf?server=1&tab=routes")
  await expect(page.locator("tr[data-row-id]")).toHaveCount(2)
  await page.evaluate(() => document.fonts.ready)
  for (const destination of destinations) {
    const text = page.getByText(destination, { exact: true })
    await text.scrollIntoViewIfNeeded()
    const bounds = await text.evaluate(element => {
      const cell = element.closest("td")!, cellRect = cell.getBoundingClientRect(), style = getComputedStyle(cell)
      const range = document.createRange(); range.selectNodeContents(element)
      const rects = Array.from(range.getClientRects())
      return { cell: { left: cellRect.left + parseFloat(style.paddingLeft), right: cellRect.right - parseFloat(style.paddingRight), top: cellRect.top, bottom: cellRect.bottom }, text: rects.map(r => ({ left: r.left, right: r.right, top: r.top, bottom: r.bottom })) }
    })
    // Splitting /32 into /3 + 2 makes the prefix visually ambiguous.
    expect(bounds.text).toHaveLength(1)
    for (const rect of bounds.text) {
      expect(rect.left).toBeGreaterThanOrEqual(bounds.cell.left - 1)
      expect(rect.right).toBeLessThanOrEqual(bounds.cell.right + 1)
      expect(rect.top).toBeGreaterThanOrEqual(bounds.cell.top)
      expect(rect.bottom).toBeLessThanOrEqual(bounds.cell.bottom)
    }
  }
  expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth)).toBe(true)
  await page.getByRole("button", { name: "Назначение", exact: true }).click()
  await expect(page.locator("tr[data-row-id]")).toHaveCount(2)
  expect(writes).toBe(0)
})