import type { APIRequestContext, Locator, 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 mutate(request: APIRequestContext, baseURL: string, path: string, options: Parameters<APIRequestContext['fetch']>[1]) {
  return request.fetch(path, { ...options, headers: { ...options?.headers, 'x-csrf-token': await csrf(request), origin: baseURL } })
}

function bottomTab(page: Page, name: string) {
  return page.getByRole('navigation', { name: '主要导航' }).getByRole('button', { name, exact: true })
}

async function openSidebarView(page: Page, name: string) {
  await page.getByRole('button', { name: /展开菜单|收起菜单/ }).click()
  await page.locator('.sidebar').getByRole('button', { name, exact: true }).click()
}

async function expectNoHorizontalOverflow(page: Page, label: string, testInfo: { project: { name: string } }) {
  const metrics = await page.evaluate(() => ({
    viewport: { width: innerWidth, height: innerHeight },
    document: { clientWidth: document.documentElement.clientWidth, scrollWidth: document.documentElement.scrollWidth },
    body: { clientWidth: document.body.clientWidth, scrollWidth: document.body.scrollWidth },
  }))
  console.log(`[qa-metrics][${testInfo.project.name}][${label}] ${JSON.stringify(metrics)}`)
  expect(metrics.document.scrollWidth).toBe(metrics.document.clientWidth)
  expect(metrics.body.scrollWidth).toBeLessThanOrEqual(metrics.body.clientWidth)
}

async function taskRow(page: Page, title: string) {
  const row = page.locator('.task-row').filter({ has: page.locator('.task-main strong', { hasText: title }) })
  await expect(row).toHaveCount(1)
  return row
}

async function createTask(request: APIRequestContext, baseURL: string, title: string, listId: string, dueAt?: string) {
  const response = await mutate(request, baseURL, '/api/v1/tasks', {
    method: 'POST',
    data: { title, list_id: listId, ...(dueAt ? { due_at: dueAt, due_has_time: false } : {}) },
  })
  expect(response.ok(), await response.text()).toBeTruthy()
  return response.json() as Promise<{ id: string }>
}

async function createCountdown(request: APIRequestContext, baseURL: string, title: string, eventDate: string, pinned = false) {
  const response = await mutate(request, baseURL, '/api/v1/countdowns', {
    method: 'POST',
    data: { title, event_date: eventDate, kind: 'countdown', repeat_rule: 'none', calendar_mode: 'solar', ignore_year: false, pinned },
  })
  expect(response.ok(), await response.text()).toBeTruthy()
  return response.json() as Promise<{ id: string }>
}

async function box(locator: Locator) {
  const value = await locator.boundingBox()
  expect(value).not.toBeNull()
  return value!
}

test('task rows use the body for detail and Trash keeps distinct actions', async ({ page, request, baseURL }, testInfo) => {
  const suffix = testInfo.project.name
  const bootstrap = await request.get('/api/v1/bootstrap')
  const inbox = (await bootstrap.json()).lists.find((item: { is_inbox: boolean }) => item.is_inbox)
  expect(inbox).toBeTruthy()
  const todayTitle = `验收今天超长任务标题-${suffix}-用于确认正文获得更多实际可用宽度`
  const inboxTitle = `验收清单任务-${suffix}`
  const trashTitle = `验收回收站任务-${suffix}`
  await createTask(request, baseURL!, inboxTitle, inbox.id)
  const trash = await createTask(request, baseURL!, trashTitle, inbox.id)
  expect((await mutate(request, baseURL!, `/api/v1/tasks/${trash.id}`, { method: 'DELETE' })).ok()).toBeTruthy()

  await page.goto('/')
  await page.getByRole('button', { name: '添加任务' }).click()
  await page.getByLabel('任务名称').fill(todayTitle)
  await page.getByRole('button', { name: '添加任务', exact: true }).click()
  const todayRow = await taskRow(page, todayTitle)
  expect(await todayRow.locator('.task-detail-trigger').count()).toBe(0)
  const todayGeometry = await todayRow.evaluate(element => {
    const row = element.getBoundingClientRect()
    const main = element.querySelector<HTMLElement>('.task-main')!.getBoundingClientRect()
    return { row: { x: row.x, width: row.width, right: row.right }, main: { x: main.x, width: main.width, right: main.right }, scrollWidth: (element as HTMLElement).scrollWidth, clientWidth: (element as HTMLElement).clientWidth }
  })
  console.log(`[qa-metrics][${suffix}][today-task] ${JSON.stringify(todayGeometry)}`)
  expect(todayGeometry.main.width).toBeGreaterThan(200)
  expect(todayGeometry.scrollWidth).toBeLessThanOrEqual(todayGeometry.clientWidth)
  await todayRow.locator('.task-main').click()
  await expect(page.getByRole('dialog', { name: '任务详情' })).toBeVisible()
  await page.getByRole('button', { name: '关闭详情' }).click()

  await openSidebarView(page, '收集箱')
  const inboxRow = await taskRow(page, inboxTitle)
  expect(await inboxRow.locator('.task-detail-trigger').count()).toBe(0)
  await inboxRow.locator('.task-main').click()
  await expect(page.getByRole('dialog', { name: '任务详情' })).toBeVisible()
  await page.getByRole('button', { name: '关闭详情' }).click()

  await openSidebarView(page, '回收站')
  const deletedRow = await taskRow(page, trashTitle)
  await expect(deletedRow.getByRole('button', { name: '恢复' })).toBeVisible()
  await expect(deletedRow.getByRole('button', { name: '永久删除' })).toBeVisible()
  expect(await deletedRow.locator('.task-detail-trigger').count()).toBe(0)
  await expectNoHorizontalOverflow(page, 'tasks-trash', testInfo)
})

test('Settings removes intro/empty danger and places mode-specific restore risk copy correctly', async ({ page }, testInfo) => {
  await page.goto('/')
  await bottomTab(page, '设置').click()
  expect(await page.locator('.view-intro').count()).toBe(0)
  await expect(page.locator('.settings-group')).toHaveCount(4)
  expect(await page.locator('.settings-danger').count()).toBe(0)

  const input = page.locator('input[type=file]')
  await input.setInputFiles({ name: 'acceptance.zip', mimeType: 'application/zip', buffer: Buffer.from('zip-placeholder') })
  await page.getByLabel('恢复方式').selectOption('replace')
  const warning = page.locator('.restore-replace-warning')
  await expect(warning).toBeVisible()
  const restoreRow = page.getByText('恢复方式', { exact: true }).locator('..').locator('..')
  const zipGeometry = { row: await box(restoreRow), warning: await box(warning) }
  console.log(`[qa-metrics][${testInfo.project.name}][settings-zip] ${JSON.stringify(zipGeometry)}`)
  expect(Math.abs(zipGeometry.warning.y - zipGeometry.row.y)).toBeLessThan(zipGeometry.row.height)

  await input.setInputFiles({ name: 'legacy.csv', mimeType: 'text/csv', buffer: Buffer.from('\ufefftitle\nlegacy') })
  await expect(page.getByLabel('恢复方式')).toHaveValue('merge')
  await expect(page.getByLabel('恢复方式')).toBeDisabled()
  await expect(page.locator('.restore-replace-warning')).toHaveCount(0)
  await expect(page.locator('.backup-preflight.legacy')).not.toContainText(/替换现有数据|替换并恢复/)
  await expectNoHorizontalOverflow(page, 'settings', testInfo)
})

test('Habits and Countdowns use reduced headers, compact rows, and continuous archive styling', async ({ page, request, baseURL }, testInfo) => {
  const suffix = testInfo.project.name
  const day = new Date().toLocaleDateString('sv-SE')
  const focus = await createCountdown(request, baseURL!, `置顶倒数-${suffix}`, day, true)
  await createCountdown(request, baseURL!, `普通倒数-${suffix}`, day)
  const archived = await createCountdown(request, baseURL!, `归档倒数-${suffix}`, day)
  expect((await mutate(request, baseURL!, `/api/v1/countdowns/${archived.id}`, { method: 'DELETE' })).ok()).toBeTruthy()
  expect(focus.id).toBeTruthy()

  await page.goto('/')
  await bottomTab(page, '习惯').click()
  expect(await page.locator('.view-intro').count()).toBe(0)
  await expectNoHorizontalOverflow(page, 'habits', testInfo)

  await bottomTab(page, '倒数日').click()
  await expect(page.locator('.countdown-summary')).toContainText(/\d+ 个重要日子/)
  expect(await page.locator('.countdown-hero').count()).toBe(0)
  const activeRow = page.locator('.countdown-row').filter({ hasText: `普通倒数-${suffix}` })
  await expect(activeRow).toHaveCount(1)
  expect(await activeRow.locator('.countdown-main > small').count()).toBe(1)
  expect(await activeRow.locator('.countdown-badges, .pinned-icon').count()).toBe(0)
  const rowText = await activeRow.innerText()
  expect(rowText).not.toMatch(/农历|不重复|每周|每月|每年/)

  const toggle = page.getByRole('button', { name: /已归档（1）/ })
  await expect(toggle).toHaveAttribute('aria-expanded', 'false')
  await expect(toggle).toHaveAttribute('aria-controls', 'archived-countdowns')
  const toggleBox = await box(toggle)
  expect(toggleBox.height).toBeGreaterThanOrEqual(44)
  await toggle.click()
  await expect(toggle).toHaveAttribute('aria-expanded', 'true')
  const archive = page.locator('#archived-countdowns')
  const archiveMetrics = await archive.evaluate(element => {
    const style = getComputedStyle(element)
    const articles = [...element.querySelectorAll<HTMLElement>('article')].map(article => {
      const itemStyle = getComputedStyle(article)
      return { borderRadius: itemStyle.borderRadius, boxShadow: itemStyle.boxShadow, borderTop: itemStyle.borderTopWidth, borderBottom: itemStyle.borderBottomWidth }
    })
    const buttons = [...element.querySelectorAll<HTMLElement>('button')].map(button => ({ text: button.innerText, ...button.getBoundingClientRect().toJSON() }))
    return { container: { borderRadius: style.borderRadius, boxShadow: style.boxShadow }, articles, buttons }
  })
  console.log(`[qa-metrics][${testInfo.project.name}][countdown-archive] ${JSON.stringify(archiveMetrics)}`)
  expect(archiveMetrics.container.boxShadow).toBe('none')
  expect(archiveMetrics.articles.every(item => item.borderRadius === '0px' && item.boxShadow === 'none')).toBeTruthy()
  expect(archiveMetrics.buttons.every(item => item.width >= 44 && item.height >= 44)).toBeTruthy()
  await expectNoHorizontalOverflow(page, 'countdowns', testInfo)
})

test('Memo mobile search is one-row, focus-safe, persistent when collapsed, and desktop-wide', async ({ page }, testInfo) => {
  await page.goto('/')
  await openSidebarView(page, '备忘录')
  const toolbar = page.locator('.memo-toolbar')
  const scope = page.locator('.memo-scope')
  const toggle = page.getByRole('button', { name: '展开搜索备忘录' })
  const collapsedGeometry = { toolbar: await box(toolbar), scope: await box(scope), toggle: await box(toggle) }
  console.log(`[qa-metrics][${testInfo.project.name}][memo-mobile-collapsed] ${JSON.stringify(collapsedGeometry)}`)
  expect(collapsedGeometry.toggle.width).toBeGreaterThanOrEqual(44)
  expect(collapsedGeometry.toggle.height).toBeGreaterThanOrEqual(44)
  expect(Math.abs(collapsedGeometry.scope.y - collapsedGeometry.toggle.y)).toBeLessThanOrEqual(4)
  expect(collapsedGeometry.toolbar.height).toBeLessThanOrEqual(52)
  await expect(toggle).toHaveAttribute('aria-expanded', 'false')

  await toggle.click()
  const closeToggle = page.getByRole('button', { name: '收起搜索备忘录' })
  const input = page.getByRole('textbox', { name: '搜索备忘录' })
  await expect(closeToggle).toHaveAttribute('aria-expanded', 'true')
  await expect(input).toBeFocused()
  await input.fill(`保留查询-${testInfo.project.name}`)
  const openPanel = page.locator('#memo-search-panel')
  const openMetrics = await openPanel.evaluate(element => {
    const rect = element.getBoundingClientRect()
    return { x: rect.x, right: rect.right, width: rect.width, scrollWidth: (element as HTMLElement).scrollWidth, clientWidth: (element as HTMLElement).clientWidth }
  })
  console.log(`[qa-metrics][${testInfo.project.name}][memo-mobile-open] ${JSON.stringify(openMetrics)}`)
  expect(openMetrics.x).toBeGreaterThanOrEqual(0)
  expect(openMetrics.right).toBeLessThanOrEqual(page.viewportSize()!.width + 1)
  expect(openMetrics.scrollWidth).toBeLessThanOrEqual(openMetrics.clientWidth)

  await closeToggle.click()
  await expect(openPanel).toBeHidden()
  await expect(toggle).toBeFocused()
  await expect(toggle).toHaveAttribute('aria-expanded', 'false')
  await toggle.click()
  await expect(input).toHaveValue(`保留查询-${testInfo.project.name}`)
  await expect(input).toBeFocused()
  await expectNoHorizontalOverflow(page, 'memo-mobile', testInfo)

  await page.setViewportSize({ width: 1440, height: 900 })
  await expect(openPanel).toBeVisible()
  const desktopMetrics = await openPanel.evaluate(element => {
    const rect = element.getBoundingClientRect()
    const style = getComputedStyle(element)
    return { viewport: { width: innerWidth, height: innerHeight }, x: rect.x, y: rect.y, width: rect.width, display: style.display, hidden: (element as HTMLElement).hidden, documentOverflow: document.documentElement.scrollWidth - document.documentElement.clientWidth }
  })
  console.log(`[qa-metrics][${testInfo.project.name}][memo-desktop] ${JSON.stringify(desktopMetrics)}`)
  expect(desktopMetrics.hidden).toBeFalsy()
  expect(desktopMetrics.width).toBeGreaterThanOrEqual(320)
  expect(desktopMetrics.documentOverflow).toBe(0)
  await expect(toggle).toBeHidden()
})