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

/**
 * PWA 端到端验证。
 *
 * 这些用例跑在 preview（生产构建）上，因为 Service Worker 只在构建产物中生成。
 * 每个用例拥有独立的浏览器上下文，因此 Service Worker 也是各自安装的。
 */

/** 等待 Service Worker 激活并接管当前页面 */
async function waitForServiceWorker(page: import('@playwright/test').Page): Promise<void> {
  await page.waitForFunction(
    async () => {
      const registration = await navigator.serviceWorker.ready
      return registration.active?.state === 'activated' && navigator.serviceWorker.controller !== null
    },
    undefined,
    { timeout: 30_000 },
  )
}

test('manifest 被链接且包含安装所需字段', async ({ page, request }) => {
  await page.goto('/')

  await expect(page.locator('link[rel="manifest"]')).toHaveAttribute('href', '/manifest.webmanifest')

  const response = await request.get('/manifest.webmanifest')
  expect(response.status()).toBe(200)

  const manifest = (await response.json()) as {
    name: string
    short_name: string
    start_url: string
    display: string
    theme_color: string
    icons: Array<{ sizes: string; purpose?: string }>
    shortcuts?: Array<{ url: string }>
  }

  expect(manifest.name).toBe('看板 · 个人任务管理')
  expect(manifest.display).toBe('standalone')
  expect(manifest.start_url).toBe('/')
  expect(manifest.theme_color).toBe('#0284c7')

  const sizes = manifest.icons.map((icon) => icon.sizes)
  expect(sizes).toContain('192x192')
  expect(sizes).toContain('512x512')
  expect(manifest.icons.some((icon) => icon.purpose === 'maskable')).toBe(true)

  // PWA 快捷方式指向今日视图
  expect(manifest.shortcuts?.some((shortcut) => shortcut.url === '/today')).toBe(true)
})

test('图标资源均可访问', async ({ request }) => {
  const icons = [
    '/pwa-192x192.png',
    '/pwa-512x512.png',
    '/maskable-512x512.png',
    '/apple-touch-icon.png',
    '/favicon.svg',
  ]

  for (const path of icons) {
    const response = await request.get(path)
    expect(response.status(), `${path} 应可访问`).toBe(200)
  }
})

test('Service Worker 注册并激活', async ({ page }) => {
  await page.goto('/')
  await waitForServiceWorker(page)

  const state = await page.evaluate(async () => {
    const registration = await navigator.serviceWorker.ready
    return registration.active?.state ?? null
  })

  expect(state).toBe('activated')
})

test('离线后仍可打开看板，且本地数据完好', async ({ page, context }) => {
  await page.goto('/')
  await waitForServiceWorker(page)

  const input = page.getByLabel('添加任务').first()
  await input.fill('离线也要看到我')
  await input.press('Enter')
  await expect(page.locator('article')).toHaveCount(1)

  // 断网后刷新：页面与数据都必须还在
  await context.setOffline(true)
  await page.reload()

  await expect(page.getByText('共 1 个任务')).toBeVisible()
  await expect(page.locator('article').filter({ hasText: '离线也要看到我' })).toBeVisible()

  // 恢复网络，避免影响后续用例
  await context.setOffline(false)
})

test('离线时深链 /today 也能打开（navigateFallback 生效）', async ({ page, context }) => {
  await page.goto('/')
  await waitForServiceWorker(page)

  await context.setOffline(true)
  await page.goto('/today')

  await expect(page.getByRole('heading', { name: '今日' })).toBeVisible()
  await expect(page.getByText('本周完成')).toBeVisible()

  await context.setOffline(false)
})

test('静态资源被预缓存（sw.js 含 precache 清单）', async ({ request }) => {
  const response = await request.get('/sw.js')
  expect(response.status()).toBe(200)

  const source = await response.text()
  // workbox 生成的是压缩过的清单，这里只确认关键资源确实进了预缓存
  expect(source).toContain('index.html')
  expect(source).toContain('manifest.webmanifest')
})