import { expect, test, type Page } from '@playwright/test'

async function captureTransitions(page: Page) {
  await page.evaluate(() => {
    const state = window as typeof window & {
      __nvrEvents?: Array<{ direction: string | null; presentation: string | null }>
      __nvrObserver?: MutationObserver
    }
    state.__nvrObserver?.disconnect()
    state.__nvrEvents = []
    const view = document.querySelector('.nvr-router-view')
    if (!view) throw new Error('Native router view did not render')
    state.__nvrObserver = new MutationObserver(() => {
      if (view.classList.contains('nvr-router-view--interactive')) {
        state.__nvrEvents?.push({
          direction: view.getAttribute('data-native-direction'),
          presentation: view.getAttribute('data-native-presentation'),
        })
      }
    })
    state.__nvrObserver.observe(view, { attributes: true })
  })
}

async function recordedTransitions(page: Page) {
  return await page.evaluate(() => (window as typeof window & {
    __nvrEvents?: Array<{ direction: string | null; presentation: string | null }>
  }).__nvrEvents ?? [])
}

async function waitForTransition(page: Page) {
  await expect(page.locator('.nvr-router-view')).not.toHaveClass(/nvr-router-view--interactive/)
}

async function flickToNextTab(page: Page, leaveSlowSpring = false) {
  // Start on the route header, outside conversation-owned drag targets.
  const surface = await page.locator('.nvr-router-view').boundingBox()
  const header = await page.locator('[data-native-role="active"] .app-header, [data-native-role="to"] .app-header').last().boundingBox()
  if (!surface || !header) throw new Error('Active route header did not render')
  const y = header.y + header.height * 0.5
  await page.mouse.move(surface.x + surface.width * 0.72, y)
  await page.mouse.down()
  if (leaveSlowSpring) {
    await page.mouse.move(surface.x + surface.width * 0.3, y, { steps: 10 })
    await page.waitForTimeout(90)
  }
  await page.mouse.move(surface.x + surface.width * 0.27, y)
  await page.mouse.up()
}

test('navigates a conversation and returns through the native runtime', async ({ page }) => {
  await page.goto('/inbox')
  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
  await page.getByText('Maya Chen').last().click()
  await expect(page).toHaveURL(/\/chat\/maya$/)
  await expect(page.getByRole('heading', { name: 'Maya Chen' })).toBeVisible()
  await page.getByRole('button', { name: 'Back' }).click()
  await expect(page).toHaveURL(/\/inbox$/)
  await waitForTransition(page)
  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
})

test('switches sibling routes without growing the primary history flow', async ({ page }) => {
  await page.goto('/inbox')
  await page.getByRole('link', { name: /Stories/ }).click()
  await expect(page).toHaveURL(/\/stories$/)
  await waitForTransition(page)
  await expect(page.getByRole('heading', { name: 'Stories' })).toBeVisible()
  await page.getByRole('link', { name: /You/ }).click()
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)
  await expect(page.getByRole('heading', { name: 'You' })).toBeVisible()
})

test('uses route order for tab direction and does not animate the active tab', async ({ page }) => {
  await page.goto('/inbox')
  await captureTransitions(page)
  await page.getByRole('link', { name: /Stories/ }).click()
  await expect(page).toHaveURL(/\/stories$/)
  await waitForTransition(page)
  expect(await recordedTransitions(page)).toContainEqual({ direction: 'forward', presentation: 'slide' })

  await captureTransitions(page)
  await page.getByRole('link', { name: /Inbox/ }).click()
  await expect(page).toHaveURL(/\/inbox$/)
  await waitForTransition(page)
  expect(await recordedTransitions(page)).toContainEqual({ direction: 'back', presentation: 'slide' })

  await captureTransitions(page)
  await page.getByRole('link', { name: /Inbox/ }).click()
  await page.waitForTimeout(100)
  expect(await recordedTransitions(page)).toEqual([])
  await expect(page).toHaveURL(/\/inbox$/)
})

test('interrupts an active tab animation when another tab is tapped', async ({ page }) => {
  await page.goto('/inbox')
  const routerView = page.locator('.nvr-router-view')
  await page.getByRole('link', { name: /Stories/ }).click()
  await expect(routerView).toHaveClass(/nvr-router-view--interactive/)
  const firstTransaction = await routerView.getAttribute('data-native-transaction')
  expect(firstTransaction).not.toBeNull()

  await page.getByRole('link', { name: /You/ }).click()
  await expect(routerView).not.toHaveAttribute('data-native-transaction', firstTransaction!, { timeout: 250 })
  await expect(page.locator('[data-native-role="from"]')).toHaveAttribute('data-native-route', '/stories')
  await expect(page.locator('[data-native-role="to"]')).toHaveAttribute('data-native-route', '/profile')
  await expect(page).toHaveURL(/\/profile$/)
})

test('interrupts a settling push animation with an edge-back gesture', async ({ page }) => {
  await page.goto('/inbox')
  await page.getByText('Maya Chen').last().click()
  await expect(page).toHaveURL(/\/chat\/maya$/)
  const routerView = page.locator('.nvr-router-view')
  await expect(routerView).toHaveClass(/nvr-router-view--interactive/)
  const pushTransaction = await routerView.getAttribute('data-native-transaction')

  const frame = await page.locator('.app-frame').boundingBox()
  if (!frame) throw new Error('App frame did not render')
  await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
  await page.mouse.down()
  await page.mouse.move(frame.x + frame.width * 0.34, frame.y + frame.height * 0.5, { steps: 16 })

  await expect(routerView).not.toHaveAttribute('data-native-transaction', pushTransaction!, { timeout: 250 })
  await expect(page.locator('[data-native-role="from"]')).toHaveAttribute('data-native-route', '/chat/maya')
  await expect(page.locator('[data-native-role="to"]')).toHaveAttribute('data-native-route', '/inbox')
  await page.mouse.up()
})

test('moves sibling screens edge-to-edge at one-to-one drag progress', async ({ page }) => {
  await page.goto('/stories')
  const routerView = page.locator('.nvr-router-view')
  const frame = await routerView.boundingBox()
  if (!frame) throw new Error('Native router view did not render')

  await page.mouse.move(frame.x + frame.width * 0.55, frame.y + frame.height * 0.45)
  await page.mouse.down()
  await page.mouse.move(frame.x + frame.width * 0.8, frame.y + frame.height * 0.45, { steps: 18 })
  await expect(routerView).toHaveAttribute('data-native-presentation', 'slide')
  await expect(routerView).toHaveAttribute('data-native-direction', 'back')

  const from = await page.locator('[data-native-role="from"]').boundingBox()
  const to = await page.locator('[data-native-role="to"]').boundingBox()
  if (!from || !to) throw new Error('Both sibling pages must be live during a drag')
  expect(Math.abs(from.x - (to.x + to.width))).toBeLessThan(3)
  await page.mouse.up()
})

test('accepts a second fast tab flick while the first spring is still settling', async ({ page }) => {
  await page.goto('/inbox')
  const routerView = page.locator('.nvr-router-view')

  // Commit by distance with a deliberately slow final sample, leaving enough
  // baseline spring for the second fast gesture to interrupt deterministically.
  await flickToNextTab(page, true)
  await expect(page).toHaveURL(/\/stories$/)
  await expect(routerView).toHaveClass(/nvr-router-view--interactive/)

  await flickToNextTab(page)
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)

  // A stale pointer-up cleanup used to leave an orphaned transaction here,
  // permanently blocking both subsequent swipes and imperative tab links.
  await page.getByRole('link', { name: /Inbox/ }).click()
  await expect(page).toHaveURL(/\/inbox$/)
  await waitForTransition(page)
  await expect(routerView).not.toHaveAttribute('data-native-transaction')
})

test('renders a suspended pushed sibling and evicts it after backing out', async ({ page }) => {
  await page.goto('/profile')
  await page.getByRole('link', { name: /Runtime stress lab/ }).click()

  await expect(page.getByTestId('async-data-loading')).toBeVisible()
  await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
  await expect(page.getByRole('navigation', { name: 'Primary navigation' })).toBeVisible()
  await expect(page.getByRole('link', { name: /You/ })).toHaveAttribute('aria-current', 'page')
  await expect(page.getByTestId('async-data-ready')).toBeVisible({ timeout: 2_000 })

  const lab = page.getByTestId('runtime-lab-view')
  const firstMountId = await lab.getAttribute('data-mount-id')
  await page.getByRole('button', { name: 'Back' }).click()
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)

  // Popping a pushed route removes it after the exit animation. Keeping the
  // descriptor allows browser-forward navigation without retaining its DOM.
  await expect(page.getByTestId('runtime-lab-view')).toHaveCount(0)

  // browser forward exists only because this sibling opted into push history.
  await page.evaluate(() => history.forward())
  await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
  await expect(page.getByTestId('async-data-loading')).toBeVisible()
  await expect(page.getByTestId('async-data-ready')).toBeVisible({ timeout: 2_000 })
  await expect(page.getByTestId('runtime-lab-view')).not.toHaveAttribute('data-mount-id', firstMountId!)
})

test('clicking the root tab from a pushed sibling collapses its back history', async ({ page }) => {
  await page.goto('/profile')
  await page.getByRole('link', { name: /Runtime stress lab/ }).click()
  await expect(page).toHaveURL(/\/profile\/runtime-lab$/)

  await page.getByRole('link', { name: /You/ }).click()
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)

  await expect(page.locator('.nvr-navigator')).toHaveAttribute('data-native-can-go-back', 'false')
  await expect(page.getByTestId('runtime-lab-view')).toHaveCount(0)
})

test('lazily caches a visited sibling and pauses its active work while hidden', async ({ page }) => {
  await page.goto('/stories')
  const stories = page.getByTestId('stories-view')
  const mountId = await stories.getAttribute('data-mount-id')
  await expect.poll(async () => Number(await stories.getAttribute('data-active-ticks'))).toBeGreaterThan(1)

  await page.getByRole('link', { name: /You/ }).click()
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)
  await expect(stories).toHaveCount(1)

  const hiddenTicks = Number(await stories.getAttribute('data-active-ticks'))
  await page.waitForTimeout(600)
  await expect(stories).toHaveAttribute('data-active-ticks', String(hiddenTicks))

  await page.getByRole('link', { name: /Stories/ }).click()
  await expect(page).toHaveURL(/\/stories$/)
  await waitForTransition(page)
  await expect(stories).toHaveAttribute('data-mount-id', mountId!)
  await expect.poll(async () => Number(await stories.getAttribute('data-active-ticks'))).toBeGreaterThan(hiddenTicks)
})

test('evicts a cached sibling when its dynamic entry guard rejects it', async ({ page }) => {
  await page.goto('/stories')
  const stories = page.getByTestId('stories-view')
  const firstMountId = await stories.getAttribute('data-mount-id')

  await page.getByRole('link', { name: /You/ }).click()
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)
  await expect(stories).toHaveCount(1)

  const guardToggle = page.getByRole('button', { name: 'Block Stories re-entry' })
  await guardToggle.click()
  await expect(guardToggle).toHaveAttribute('aria-pressed', 'true')
  await page.getByRole('link', { name: /Stories/ }).click()

  await expect(page).toHaveURL(/\/profile$/)
  await expect(page.getByTestId('story-guard-status')).toHaveText('blocked')
  await waitForTransition(page)
  await expect(page.getByTestId('stories-view')).toHaveCount(0)

  await guardToggle.click()
  await page.getByRole('link', { name: /Stories/ }).click()
  await expect(page).toHaveURL(/\/stories$/)
  await waitForTransition(page)
  await expect(page.getByTestId('stories-view')).not.toHaveAttribute('data-mount-id', firstMountId!)
})

test('manually unloads an inactive route through the public API demo', async ({ page }) => {
  await page.goto('/stories')
  await page.getByRole('link', { name: /You/ }).click()
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)
  await expect(page.getByTestId('stories-view')).toHaveCount(1)

  await page.getByRole('link', { name: /Navigation lab/ }).click()
  await expect(page).toHaveURL(/\/settings$/)
  await waitForTransition(page)
  await page.getByTestId('unload-stories').click()

  await expect(page.getByTestId('unload-stories')).toHaveText('Unloaded 1 Stories view')
  await expect(page.getByTestId('stories-view')).toHaveCount(0)
})

test('records a navigation frame profile across route changes', async ({ page }) => {
  await page.goto('/settings')
  await page.getByTestId('profile-start').click()
  await expect(page.locator('.profiler-badge')).toBeVisible()

  await page.getByRole('button', { name: 'Back' }).click()
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)
  await page.getByRole('link', { name: /Runtime stress lab/ }).click()
  await expect(page).toHaveURL(/\/profile\/runtime-lab$/)
  await page.getByRole('link', { name: /You/ }).click()
  await expect(page).toHaveURL(/\/profile$/)
  await waitForTransition(page)
  await page.getByRole('link', { name: /Navigation lab/ }).click()
  await expect(page).toHaveURL(/\/settings$/)
  await waitForTransition(page)

  await page.getByTestId('profile-stop').click()
  await expect(page.locator('.profiler-badge')).toHaveCount(0)
  await expect(page.getByTestId('profile-status')).toContainText('navigations')
  await expect(page.getByTestId('profile-export')).toBeEnabled()
})

test('opens and dismisses the compose sheet', async ({ page }) => {
  await page.goto('/inbox')
  await page.getByRole('button', { name: 'Compose' }).click()
  await expect(page).toHaveURL(/\/compose$/)
  await expect(page.getByRole('heading', { name: 'New message' })).toBeVisible()
  await page.getByRole('button', { name: 'Cancel' }).click()
  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
})

test('keeps the target live during a held component drag', async ({ page }) => {
  await page.goto('/inbox')
  const row = page.locator('.conversation-row').first()
  const box = await row.boundingBox()
  if (!box) throw new Error('Conversation row did not render')
  await page.mouse.move(box.x + box.width * 0.8, box.y + box.height / 2)
  await page.mouse.down()
  await page.mouse.move(box.x + box.width * 0.35, box.y + box.height / 2, { steps: 12 })
  await expect(page.locator('[data-native-role="to"]')).toBeVisible()
  await page.mouse.up()
  await expect(page.getByRole('heading', { name: 'Maya Chen' })).toBeVisible()
})

test('holds an edge-back preview without committing the URL', async ({ page }) => {
  await page.goto('/inbox')
  await page.getByText('Maya Chen').last().click()
  await expect(page).toHaveURL(/\/chat\/maya$/)
  const frame = await page.locator('.app-frame').boundingBox()
  if (!frame) throw new Error('App frame did not render')
  await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
  await page.mouse.down()
  await page.mouse.move(frame.x + frame.width * 0.55, frame.y + frame.height * 0.5, { steps: 14 })
  await expect(page.locator('[data-native-role="to"]')).toBeVisible()
  await expect(page).toHaveURL(/\/chat\/maya$/)
  await page.mouse.up()
  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
})

test('never previews a stale conversation after a cancelled back gesture', async ({ page }) => {
  await page.goto('/inbox')
  await page.getByText('Maya Chen').last().click()
  await page.getByRole('button', { name: 'Back' }).click()
  await expect(page).toHaveURL(/\/inbox$/)
  await waitForTransition(page)
  await page.getByText('Noah Williams').last().click()
  await expect(page).toHaveURL(/\/chat\/noah$/)
  await waitForTransition(page)

  const frame = await page.locator('.app-frame').boundingBox()
  if (!frame) throw new Error('App frame did not render')
  await page.mouse.move(frame.x + 2, frame.y + frame.height * 0.5)
  await page.mouse.down()
  await page.mouse.move(frame.x + frame.width * 0.055, frame.y + frame.height * 0.5, { steps: 16 })
  await page.mouse.up()
  await waitForTransition(page)
  await expect(page).toHaveURL(/\/chat\/noah$/)

  await page.getByRole('button', { name: 'Back' }).click()
  const backTarget = page.locator('[data-native-role="to"]')
  await expect(backTarget.getByRole('heading', { name: 'Messages' })).toBeVisible()
  await expect(backTarget.getByRole('heading', { name: 'Maya Chen' })).toHaveCount(0)
  await waitForTransition(page)
  await expect(page).toHaveURL(/\/inbox$/)
})

test('always opens compose as a vertical sheet after prior navigation', async ({ page }) => {
  await page.goto('/inbox')
  await page.getByText('Maya Chen').last().click()
  await page.getByRole('button', { name: 'Back' }).click()
  await expect(page).toHaveURL(/\/inbox$/)
  await waitForTransition(page)
  await page.getByRole('link', { name: /Stories/ }).click()
  await expect(page).toHaveURL(/\/stories$/)
  await waitForTransition(page)
  await page.getByRole('link', { name: /Inbox/ }).click()
  await expect(page).toHaveURL(/\/inbox$/)
  await waitForTransition(page)

  await page.getByRole('button', { name: 'Compose' }).click()
  const routerView = page.locator('.nvr-router-view')
  await expect(routerView).toHaveAttribute('data-native-presentation', 'sheet')
  await expect(routerView).toHaveAttribute('data-native-direction', 'up')
  const frame = await routerView.boundingBox()
  const sheet = await page.locator('[data-native-role="to"]').boundingBox()
  if (!frame || !sheet) throw new Error('Sheet transition did not render')
  expect(Math.abs(frame.x - sheet.x)).toBeLessThan(3)
  await waitForTransition(page)
  await page.getByRole('button', { name: 'Cancel' }).click()
})

test('drags a sheet down to dismiss it', async ({ page }) => {
  await page.goto('/inbox')
  await page.getByRole('button', { name: 'Compose' }).click()
  const sheet = await page.locator('.sheet-screen').boundingBox()
  if (!sheet) throw new Error('Sheet did not render')
  await page.mouse.move(sheet.x + sheet.width / 2, sheet.y + 12)
  await page.mouse.down()
  await page.mouse.move(sheet.x + sheet.width / 2, sheet.y + sheet.height * 0.55, { steps: 14 })
  await page.mouse.up()
  await expect(page.getByRole('heading', { name: 'Messages' })).toBeVisible()
})