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

async function csrf(request: APIRequestContext) {
  const state = await request.storageState()
  return state.cookies.find(cookie => cookie.name === 'dodo_csrf')?.value ?? ''
}

async function createTask(request: APIRequestContext, baseURL: string, title: string, listId: string) {
  const response = await request.post('/api/v1/tasks', {
    data: { title, list_id: listId },
    headers: { 'x-csrf-token': await csrf(request), origin: baseURL },
  })
  expect(response.ok(), await response.text()).toBeTruthy()
}

async function createList(request: APIRequestContext, baseURL: string, name: string) {
  const response = await request.post('/api/v1/lists', {
    data: { name },
    headers: { 'x-csrf-token': await csrf(request), origin: baseURL },
  })
  expect(response.ok(), await response.text()).toBeTruthy()
  return response.json() as Promise<{ id: string }>
}

async function openList(page: Page, name: string) {
  if ((await page.viewportSize())!.width <= 930) {
    await page.locator('.topbar').getByRole('button', { name: /展开菜单|收起菜单/ }).click()
  }
  await page.locator('.sidebar').getByRole('button', { name, exact: true }).click()
}

test('inbox and task composer match approved visuals', async ({ page, request, baseURL }, testInfo) => {
  test.skip(testInfo.project.name !== 'mobile-390', 'approved visual baselines are maintained for mobile-390 only')
  await page.clock.install({ time: new Date('2026-09-19T05:00:00.000Z') })

  const listName = '视觉回归清单'
  const list = await createList(request, baseURL!, listName)

  const seededTitles = ['整理本周工作记录', '检查 Dodo 备份', '周末买水果和牛奶'] as const
  for (const title of seededTitles) await createTask(request, baseURL!, title, list.id)

  await page.goto('/')
  await openList(page, listName)
  const seededRows = page.locator('.task-row').filter({ hasText: /整理本周工作记录|检查 Dodo 备份|周末买水果和牛奶/ })
  await expect(seededRows).toHaveCount(3)
  await expect(page).toHaveScreenshot('inbox.png', { fullPage: true })

  await page.getByRole('button', { name: '添加任务' }).click()
  await expect(page.getByRole('dialog', { name: /添加任务/ })).toBeVisible()
  await expect(page).toHaveScreenshot('task-composer.png', { fullPage: true })
})