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

const runtime = {
  id: 'container-a',
  alias: 'account-a',
  name: 'account-a',
  state: 'running',
  status: 'Up',
  image_version: '148.0.0.1',
  fingerprint: { seed: 1000 },
  profile: 'creatorhub-profile-account-a',
  endpoint: 'http://account-a:9222',
}

test('keeps the create form inside a 900px viewport', async ({ page }) => {
  await page.route('**/api/browsers', route => route.fulfill({ json: [] }))
  await page.route('**/api/gateways', route => route.fulfill({ json: [] }))
  await page.route('**/api/browser-images', route => route.fulfill({ json: [] }))
  await page.route('**/api/phase-a/accounts', route => route.fulfill({ json: [] }))
  await page.route('**/api/network-exits', route => route.fulfill({ json: [] }))
  await page.setViewportSize({ width: 900, height: 800 })
  await page.goto('/#/browsers')

  await expect(page.getByRole('button', { name: '收起导航' }).first()).toBeVisible()
  const createButton = page.getByRole('button', { name: '创建环境' })
  await expect(createButton).toBeVisible()
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(900)
  const box = await createButton.boundingBox()
  expect(box).not.toBeNull()
  expect(box.x + box.width).toBeLessThanOrEqual(900)
})

test('shows the CDP endpoint only in the active branch at 900px and 599px', async ({ page }) => {
  await page.route('**/api/browsers', route => route.fulfill({ json: [runtime] }))
  await page.route('**/api/gateways', route => route.fulfill({ json: [] }))
  await page.route('**/api/browser-images', route => route.fulfill({ json: [] }))
  await page.route('**/api/phase-a/accounts', route => route.fulfill({ json: [] }))
  await page.route('**/api/network-exits', route => route.fulfill({ json: [] }))
  const endpoint = page.getByText('http://account-a:9222')

  await page.setViewportSize({ width: 900, height: 800 })
  await page.goto('/#/browsers')
  await expect(page.getByRole('cell', { name: 'http://account-a:9222' })).toBeVisible()
  await expect(endpoint.filter({ visible: true })).toHaveCount(1)

  await page.setViewportSize({ width: 599, height: 800 })
  await expect(page.getByRole('cell', { name: 'http://account-a:9222' })).toBeHidden()
  await expect(endpoint.filter({ visible: true })).toHaveCount(1)
})

test('keeps account and network-exit pages inside 599px, 900px and 1280px', async ({ page }) => {
  const accountKey = 'a'.repeat(128)
  const credentialID = 'c'.repeat(128)
  const hostname = [63, 63, 63, 61].map(length => 'h'.repeat(length)).join('.')
  const account = { id: 'account-a', platform: 'mock', platform_account_key: accountKey, authorization_kind: 'owned', authorization_status: 'authorized', runtime_status: 'paused', version: 1, credential_reference: { id: credentialID, provider: 'os_keyring' } }
  const binding = { alias: 'env-a', name: '店铺环境', account_id: 'account-a', network_exit_id: 'exit-a', network_exit_health: 'healthy', binding_version: 1, schedule_status: 'blocked', schedule_block_reason: 'account_paused' }
  const networkExit = { id: 'exit-a', protocol: 'socks5', host: hostname, port: 1080, health_status: 'healthy', credential_reference: { id: credentialID, provider: 'os_keyring' } }
  await page.route('**/api/phase-a/accounts', route => route.fulfill({ json: [account] }))
  await page.route('**/api/phase-a/accounts/account-a', route => route.fulfill({ json: account }))
  await page.route('**/api/phase-a/drafts?account_id=account-a', route => route.fulfill({ json: [] }))
  await page.route('**/api/browsers', route => route.fulfill({ json: [binding] }))
  await page.route('**/api/network-exits', route => route.fulfill({ json: [networkExit] }))

  for (const path of ['/#/accounts', '/#/accounts/account-a', '/#/network-exits']) {
    for (const width of [599, 900, 1280]) {
      await page.setViewportSize({ width, height: 900 })
      await page.goto(path)
      await expect(page.getByRole('heading', { level: 1 })).toBeVisible()
      expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width)
    }
  }
})

test('opens account detail at the phase A route', async ({ page }) => {
  const account = { id: 'account-a', platform: 'mock', platform_account_key: 'shop-a', authorization_kind: 'owned', authorization_status: 'authorized', runtime_status: 'paused', version: 1, credential_reference: { id: 'credential-a', provider: 'os_keyring' } }
  await page.route('**/api/phase-a/accounts', route => route.fulfill({ json: [account] }))
  await page.route('**/api/phase-a/accounts/account-a', route => route.fulfill({ json: account }))
  await page.route('**/api/browsers', route => route.fulfill({ json: [] }))
  await page.route('**/api/phase-a/drafts?account_id=account-a', route => route.fulfill({ json: [] }))
  await page.setViewportSize({ width: 599, height: 900 })
  await page.goto('/#/accounts')

  await page.getByRole('link', { name: '查看账号' }).click()
  await expect(page).toHaveURL(/#\/accounts\/account-a$/)
  await expect(page.getByRole('heading', { level: 1, name: 'shop-a' })).toBeVisible()
  expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(599)
})

test('keeps draft review responsive and restores focus after dialog close and successful save', async ({ page }) => {
  const account = { id: 'account-a', platform: 'mock', platform_account_key: 'shop-a', authorization_status: 'authorized', runtime_status: 'active', version: 2 }
  const draft = {
    id: 'draft-a', account_id: 'account-a', version: 1, content: 'x'.repeat(1000), account,
    versions: [{ id: 'draft-a', account_id: 'account-a', version: 1, content: 'x'.repeat(1000) }],
    confirmations: [], tasks: [],
  }
  const binding = { alias: 'env-a', name: '店铺环境', account_id: 'account-a', network_exit_id: 'exit-a', network_exit_health: 'healthy', binding_version: 4, schedule_status: 'ready', schedule_block_reason: '' }
  await page.route('**/api/phase-a/drafts/draft-a', route => route.fulfill({ json: draft }))
  await page.route('**/api/browsers', route => route.fulfill({ json: [binding] }))
  await page.route('**/api/phase-a/confirmations', route => route.fulfill({ json: { id: 'confirmation-a' } }))

  for (const width of [599, 900, 1280]) {
    await page.setViewportSize({ width, height: 900 })
    await page.goto('/#/drafts/draft-a')
    await expect(page.getByRole('heading', { level: 1, name: '草稿核对' })).toBeVisible()
    expect(await page.evaluate(() => document.documentElement.scrollWidth)).toBeLessThanOrEqual(width)
  }

  await page.setViewportSize({ width: 599, height: 900 })
  await page.getByRole('checkbox', { name: /我已核对当前账号/ }).check()
  const trigger = page.getByRole('button', { name: '确认当前快照' })
  await trigger.click()
  await expect(page.getByRole('dialog', { name: '确认草稿版本' })).toBeVisible()
  await page.keyboard.press('Escape')
  await expect(page.getByRole('dialog')).toBeHidden()
  await expect(trigger).toBeFocused()

  await trigger.click()
  await page.getByRole('button', { name: '保存确认' }).click()
  await expect(page.getByRole('dialog')).toBeHidden()
  await expect(trigger).toBeFocused()
})