import { test, expect, type Page, type Locator } from '@playwright/test'
import { captureGuide, captureHero, beat, typeInto, settle, VIEWPORT, type GuideScript } from './guide'
import { seededTrip, ensureListsFixtures } from './fixtures'
import { openTrip, modal } from './trip-shared'
import { tripListsContext, tripListsGuides } from '../../src/help/contexts/tripLists'
import type { HelpGuide } from '../../src/help/types'

/**
 * Actions for the Lists tab of a trip, keyed by the ids in
 * `src/help/contexts/tripLists.ts`. They run on the seeded "Autumn in Japan"
 * with the fixtures' packing template and two extra tasks in place, so Apply
 * template exists and the to-do sidebar has more than one filled filter; what
 * a guide creates it takes away again in `cleanup`, so the next one starts the
 * same.
 */

const guide = (id: string): HelpGuide => {
  const g = tripListsGuides.find(x => x.id === id)
  if (!g) throw new Error(`no registered guide "${id}"`)
  return g
}

/** What the guides make and unmake. Nothing here is in the seed. */
const NEW_LIST = 'Toiletries'
const FIRST_ITEM = 'Toothbrush'
const RENAMED_ITEM = 'Toothbrush and paste'
const MEMBER = 'mira'
const SHARED_ITEM = 'Camera'
const BAG_ITEM = 'Rain jacket'
const BAG = 'Cabin bag'
const SAVED_TEMPLATE = 'Autumn in Japan'
const NEW_TASK = 'Pick up the pocket wifi'
const NEW_TASK_NOTE = 'Counter is past customs, on the right, open until 22:00.'
const TASK_LIST = 'On arrival'
const OTHER_TASK_LIST = 'Before departure'
const EDITED_TASK = 'Activate JR Pass'
const ASSIGNEE = 'jonas'
/** The date picker labels a day cell with the whole date, in the run's English. */
const DUE_DAY = 'September 25, 2026'
/** The fixtures' template, and the lists it brings with it. */
const TEMPLATE = { name: 'Japan autumn basics', category: 'Rain kit', items: ['Umbrella', 'Quick-dry towel', 'Dry bag', 'SIM card', 'Plug adapter'] }
const IMPORT_LINES = 'Toiletries, Toothbrush\nToiletries, Sunscreen, 90\nHealth, Plasters, 30'
const IMPORTED = ['Toothbrush', 'Sunscreen', 'Plasters']
/** The seed's packing items, in the order it created them. */
const SEED_ORDER = ['Passport', 'JR Pass voucher', 'Travel insurance', 'Rain jacket', 'Walking shoes', 'Light layers', 'Type-A adapter', 'Power bank', 'Camera']
const DOCUMENTS = ['Passport', 'JR Pass voucher', 'Travel insurance']
/** The count in the label moves with what is ticked, so it is matched, not spelled. */
const CLEAR_CHECKED = /^Remove \d+ checked$/

// ── Locators ─────────────────────────────────────────────────────────────────

/** A category card: the list's name is a span in the card's header row. */
const cat = (page: Page, name: string): Locator =>
  page.getByText(name, { exact: true }).first().locator('xpath=ancestor::div[2]')
/**
 * The header row of a card. The ⋯ has to be taken from here: every item row
 * carries a phone-only twin of it that `display:none` hides but CSS still
 * matches, so the card as a whole holds four of them.
 */
const catHeader = (page: Page, name: string): Locator => cat(page, name).locator('> div').first()
const catMenu = (page: Page, name: string): Locator =>
  catHeader(page, name).locator('button:has(svg.lucide-more-horizontal)')
/** The open ⋯ menu is a fixed popover with no class of its own; its last entry names it. */
const catMenuCard = (page: Page): Locator => page.getByRole('button', { name: 'Delete List' }).locator('xpath=..')
const item = (page: Page, name: string): Locator =>
  page.locator('.packing-item-row').filter({ hasText: name }).first()
/** The only item of the list the first guide builds; its name changes mid-guide. */
const onlyRow = (page: Page): Locator => cat(page, NEW_LIST).locator('.packing-item-row').first()
/** The sharing dropdown is portalled to <body>, so the hint's parent is the card itself. */
const shareMenu = (page: Page): Locator =>
  page.getByText('In the group pool, visible to everyone').locator('xpath=ancestor::div[1]')
/** Its click-catcher, the only way back out of the menu once a name is ticked. */
const shareOverlay = (page: Page): Locator => page.locator('div[role="presentation"][style*="z-index: 1099"]').last()
/** The bulk-import dialog: its own portal, with none of the shared backdrop classes. */
const importCard = (page: Page): Locator =>
  page.getByText('Import Packing List', { exact: true }).locator('xpath=..')
/** The bags column. Total weight is a span two divs inside it, under the rule. */
const bagSidebar = (page: Page): Locator =>
  page.getByText('Total weight', { exact: true }).locator('xpath=ancestor::div[3]')
/** The detail pane on the right; its header reads Task. */
const todoPane = (page: Page): Locator => page.getByText('Task', { exact: true }).locator('xpath=ancestor::div[2]')
/** A task row is a div with role=button whose name starts with the task's own. */
const task = (page: Page, name: string): Locator =>
  page.getByRole('button', { name: new RegExp(`^${name}`) }).first()
const sidebarFilter = (page: Page, name: string): Locator =>
  page.getByRole('button', { name: new RegExp(`^${name}`) })

const only = (target: (p: Page) => Locator) => ({ target })

// ── Getting there ────────────────────────────────────────────────────────────

/** The tab id in the address is the legacy 'listen'; the tab itself reads Lists. */
async function openLists(page: Page): Promise<void> {
  await openTrip(page, { tab: 'listen' })
  await expect(page.getByRole('button', { name: /^Packing List/ })).toBeVisible({ timeout: 30_000 })
  await settle(page)
}

/**
 * The sub-tab is remembered in sessionStorage, which Playwright never restores,
 * so every guide opens on Packing List and the to-do ones switch over.
 */
async function openTodos(page: Page): Promise<void> {
  await openLists(page)
  await page.getByRole('button', { name: /^To-Do/ }).click()
  await expect(page.getByRole('button', { name: 'Add new task' })).toBeVisible({ timeout: 15_000 })
  await settle(page)
}

// ── Putting the seed back ────────────────────────────────────────────────────

interface PackingRow {
  id: number
  name: string
  category: string | null
}

async function packingItems(page: Page): Promise<PackingRow[]> {
  const { tripId } = seededTrip()
  const res = await page.request.get(`/api/trips/${tripId}/packing`)
  const body = (await res.json()) as { items?: PackingRow[] }
  return body.items ?? []
}

async function deleteItems(page: Page, match: (row: PackingRow) => boolean): Promise<void> {
  const { tripId } = seededTrip()
  for (const row of (await packingItems(page)).filter(match)) {
    await page.request.delete(`/api/trips/${tripId}/packing/${row.id}`)
  }
}

/**
 * Re-creates the three Documents items the guide really deleted, then writes
 * the seed's order back: without it the re-created rows sort last, the
 * Documents card slides to the end of the two-column grid, and every later
 * guide's picture changes.
 */
async function restoreDocuments(page: Page): Promise<void> {
  const { tripId } = seededTrip()
  const present = await packingItems(page)
  for (const name of DOCUMENTS) {
    if (present.some(row => row.name === name)) continue
    await page.request.post(`/api/trips/${tripId}/packing`, { data: { name, category: 'Documents', visibility: 'common' } })
  }
  const after = await packingItems(page)
  const orderedIds = SEED_ORDER.map(name => after.find(row => row.name === name)?.id).filter((id): id is number => id !== undefined)
  await page.request.put(`/api/trips/${tripId}/packing/reorder`, { data: { orderedIds } })
}

async function deleteTemplate(page: Page, name: string): Promise<void> {
  const res = await page.request.get('/api/admin/packing-templates')
  const body = (await res.json()) as { templates?: { id: number; name: string }[] }
  for (const template of (body.templates ?? []).filter(row => row.name === name)) {
    await page.request.delete(`/api/admin/packing-templates/${template.id}`)
  }
}

async function deleteTodo(page: Page, name: string): Promise<void> {
  const { tripId } = seededTrip()
  const res = await page.request.get(`/api/trips/${tripId}/todo`)
  const body = (await res.json()) as { items?: { id: number; name: string }[] }
  for (const row of (body.items ?? []).filter(x => x.name === name)) {
    await page.request.delete(`/api/trips/${tripId}/todo/${row.id}`)
  }
}

async function unassignTodo(page: Page, name: string): Promise<void> {
  const { tripId } = seededTrip()
  const res = await page.request.get(`/api/trips/${tripId}/todo`)
  const body = (await res.json()) as { items?: { id: number; name: string }[] }
  const row = (body.items ?? []).find(x => x.name === name)
  if (row) await page.request.put(`/api/trips/${tripId}/todo/${row.id}`, { data: { assigned_user_id: null } })
}

// ── Scripts ──────────────────────────────────────────────────────────────────

const SCRIPTS: Record<string, GuideScript> = {
  'packing-categories': {
    guide: guide('packing-categories'),
    start: openLists,
    steps: [
      {
        target: p => p.getByRole('button', { name: 'Add list' }),
        act: async p => {
          await p.getByRole('button', { name: 'Add list' }).click()
          const field = p.getByPlaceholder('List name (e.g. Clothing)')
          await typeInto(p, field, NEW_LIST)
          await field.locator('xpath=..').locator('button:has(svg.lucide-check)').click()
          await expect(cat(p, NEW_LIST)).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => cat(p, NEW_LIST).getByRole('button', { name: 'Add item' }),
        act: async p => {
          await cat(p, NEW_LIST).getByRole('button', { name: 'Add item' }).click()
          const field = p.getByPlaceholder('Item name...')
          await typeInto(p, field, FIRST_ITEM)
          // Enter renames the list's '...' row rather than adding a second one,
          // and leaves the field open; Escape is how it closes.
          await field.press('Enter')
          await expect(item(p, FIRST_ITEM)).toBeVisible({ timeout: 20_000 })
          await field.press('Escape')
          await settle(p)
        },
      },
      {
        prepare: async p => { await onlyRow(p).hover() },
        target: p => onlyRow(p).getByRole('button', { name: 'Rename' }),
        act: async p => {
          await onlyRow(p).getByRole('button', { name: 'Rename' }).click()
          // While editing, the name is the row's first input; the quantity and
          // the weight come after it.
          const field = onlyRow(p).locator('input').first()
          await typeInto(p, field, RENAMED_ITEM)
          await field.press('Enter')
          await expect(item(p, RENAMED_ITEM)).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => catHeader(p, NEW_LIST).locator('button:has(svg.lucide-user-plus)'),
        act: async p => {
          const plus = catHeader(p, NEW_LIST).locator('button:has(svg.lucide-user-plus)')
          await plus.click()
          await catHeader(p, NEW_LIST).getByRole('button', { name: MEMBER }).click()
          await expect(catHeader(p, NEW_LIST).locator('.assignee-chip')).toHaveCount(1, { timeout: 20_000 })
          await plus.click()
          await settle(p)
        },
      },
      {
        prepare: async p => {
          await catMenu(p, NEW_LIST).click()
          await expect(p.getByRole('button', { name: 'Delete List' })).toBeVisible()
          await beat(p, 300)
        },
        target: catMenuCard,
        act: async p => {
          // The menu sits over a full-viewport catcher; a click in the corner
          // closes it without deleting the list the picture was just taken of.
          await p.mouse.click(20, VIEWPORT.height - 40)
          await expect(p.getByRole('button', { name: 'Delete List' })).toHaveCount(0)
          await settle(p)
        },
      },
    ],
    cleanup: async p => {
      const { tripId } = seededTrip()
      await deleteItems(p, row => row.category === NEW_LIST)
      await p.request.put(`/api/trips/${tripId}/packing/category-assignees/${encodeURIComponent(NEW_LIST)}`, { data: { user_ids: [] } })
    },
  },
  'check-off-packing': {
    guide: guide('check-off-packing'),
    start: openLists,
    steps: [
      {
        // The grip is a div, so the tick box is the row's first button.
        target: p => item(p, 'Passport').getByRole('button').first(),
        act: async p => {
          await item(p, 'Passport').getByRole('button').first().click()
          // Both box SVGs stay in the DOM and cross-fade, so the assertion is on
          // the name instead: a checked row renders it as a span, not a button.
          await expect(item(p, 'Passport').getByRole('button', { name: 'Passport' })).toHaveCount(0, { timeout: 20_000 })
          await settle(p)
        },
      },
      only(p => p.getByText('/9', { exact: true }).locator('xpath=ancestor::div[2]')),
      {
        prepare: async p => {
          await catMenu(p, 'Documents').click()
          await expect(p.getByRole('button', { name: 'Check All', exact: true })).toBeVisible()
          await beat(p, 300)
        },
        target: p => p.getByRole('button', { name: 'Check All', exact: true }),
        act: async p => {
          await p.getByRole('button', { name: 'Check All', exact: true }).click()
          await expect(cat(p, 'Documents').getByText('3/3', { exact: true })).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => p.getByRole('button', { name: 'Open', exact: true }),
        act: async p => {
          await p.getByRole('button', { name: 'Open', exact: true }).click()
          await expect(p.getByText('Documents', { exact: true })).toHaveCount(0, { timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => p.getByRole('button', { name: CLEAR_CHECKED }),
        act: async p => {
          // A native window.confirm, which Playwright dismisses unless something
          // accepts it first. The browser's own dialog cannot be pictured, so
          // the step shows the button and the state it leaves behind.
          p.once('dialog', d => { void d.accept() })
          await p.getByRole('button', { name: CLEAR_CHECKED }).click()
          await expect(p.getByRole('button', { name: CLEAR_CHECKED })).toHaveCount(0, { timeout: 30_000 })
          await settle(p)
        },
      },
    ],
    cleanup: restoreDocuments,
  },
  'apply-packing-template': {
    guide: guide('apply-packing-template'),
    start: openLists,
    steps: [
      {
        target: p => p.getByRole('button', { name: 'Apply template' }),
        act: async p => {
          await p.getByRole('button', { name: 'Apply template' }).click()
          await expect(p.locator('.trek-menu-enter').last()).toBeVisible()
          await settle(p)
        },
      },
      {
        target: p => p.locator('.trek-menu-enter').last(),
        act: async p => {
          await p.locator('.trek-menu-enter').last().getByRole('button', { name: new RegExp(`^${TEMPLATE.name}`) }).click()
          await expect(cat(p, TEMPLATE.category)).toBeVisible({ timeout: 30_000 })
          await settle(p)
        },
      },
      only(p => p.getByRole('button', { name: /^Shared/ })),
      {
        target: p => p.getByRole('button', { name: 'Save as template' }),
        act: async p => {
          await p.getByRole('button', { name: 'Save as template' }).click()
          const field = p.getByPlaceholder('Template name')
          await typeInto(p, field, SAVED_TEMPLATE)
          await field.locator('xpath=..').locator('button:has(svg.lucide-check)').click()
          await expect(p.getByText('Packing list saved as template')).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
    ],
    cleanup: async p => {
      await deleteItems(p, row => TEMPLATE.items.includes(row.name))
      await deleteTemplate(p, SAVED_TEMPLATE)
    },
  },
  'import-packing-list': {
    guide: guide('import-packing-list'),
    start: openLists,
    steps: [
      {
        target: p => p.getByRole('button', { name: 'Import', exact: true }),
        act: async p => {
          await p.getByRole('button', { name: 'Import', exact: true }).click()
          await expect(importCard(p)).toBeVisible()
          await settle(p)
        },
      },
      {
        // The step's text points at the grey sample, which is the textarea's
        // placeholder: it is only on screen while the box is empty, so the lines
        // are typed after the picture, not before it.
        target: importCard,
        act: async p => {
          await typeInto(p, importCard(p).locator('textarea'), IMPORT_LINES)
          await expect(importCard(p).locator('textarea')).toHaveValue(IMPORT_LINES, { timeout: 20_000 })
          await settle(p)
        },
      },
      // Clicking it would open the operating system's file chooser, which is
      // not part of the picture; the button is shown, not pressed.
      only(p => importCard(p).getByRole('button', { name: 'Load CSV/TXT' })),
      {
        target: p => importCard(p).getByRole('button', { name: /^Import \d+$/ }),
        act: async p => {
          await importCard(p).getByRole('button', { name: /^Import \d+$/ }).click()
          await expect(p.getByText('Import Packing List', { exact: true })).toHaveCount(0, { timeout: 30_000 })
          await expect(item(p, 'Sunscreen')).toBeVisible({ timeout: 30_000 })
          await settle(p)
        },
      },
    ],
    cleanup: p => deleteItems(p, row => IMPORTED.includes(row.name)),
  },
  'share-packing-item': {
    guide: guide('share-packing-item'),
    start: openLists,
    steps: [
      {
        target: p => p.getByRole('button', { name: /^My list/ }),
        act: async p => {
          await p.getByRole('button', { name: /^My list/ }).click()
          await expect(p.getByText('No items match this filter')).toBeVisible({ timeout: 20_000 })
          await p.getByRole('button', { name: /^Shared/ }).click()
          await expect(item(p, SHARED_ITEM)).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        prepare: async p => { await item(p, SHARED_ITEM).hover() },
        target: p => item(p, SHARED_ITEM).getByRole('button', { name: 'Sharing' }),
        act: async p => {
          await item(p, SHARED_ITEM).getByRole('button', { name: 'Sharing' }).click()
          await expect(shareMenu(p)).toBeVisible()
          await settle(p)
        },
      },
      {
        target: shareMenu,
        act: async p => {
          await shareMenu(p).getByRole('button', { name: /^Personal/ }).click()
          await expect(item(p, SHARED_ITEM)).toHaveCount(0, { timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => p.getByRole('button', { name: /^My list/ }),
        act: async p => {
          await p.getByRole('button', { name: /^My list/ }).click()
          await expect(item(p, SHARED_ITEM)).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        prepare: async p => {
          await item(p, SHARED_ITEM).hover()
          await item(p, SHARED_ITEM).getByRole('button', { name: 'Sharing' }).click()
          await expect(shareMenu(p)).toBeVisible()
          await beat(p, 300)
        },
        target: p => shareMenu(p).getByRole('button', { name: MEMBER }),
        act: async p => {
          await shareMenu(p).getByRole('button', { name: MEMBER }).click()
          // Ticking a name leaves the menu open on purpose; its catcher closes it.
          await shareOverlay(p).click({ position: { x: 5, y: 5 } })
          await expect(item(p, SHARED_ITEM).getByText('shared with 1')).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
    ],
    cleanup: async p => {
      const { tripId } = seededTrip()
      const row = (await packingItems(p)).find(x => x.name === SHARED_ITEM)
      if (row) {
        await p.request.put(`/api/trips/${tripId}/packing/${row.id}/sharing`, { data: { visibility: 'common', recipient_ids: [] } })
      }
    },
  },
  'packing-bags': {
    guide: guide('packing-bags'),
    start: openLists,
    steps: [
      {
        // The weight field's placeholder really is a dash: it is the app's own
        // string, not prose, so it is matched exactly as rendered.
        target: p => item(p, BAG_ITEM).getByPlaceholder('\u2014'),
        act: async p => {
          const field = item(p, BAG_ITEM).getByPlaceholder('\u2014')
          await typeInto(p, field, '620')
          await expect(field).toHaveValue('620', { timeout: 20_000 })
          await settle(p)
        },
      },
      {
        prepare: async p => { await item(p, BAG_ITEM).hover() },
        // The circle is dashed with a parcel in it while the item is in no bag.
        target: p => item(p, BAG_ITEM).locator('button:has(svg.lucide-package)'),
        act: async p => {
          await item(p, BAG_ITEM).locator('button:has(svg.lucide-package)').click()
          await expect(item(p, BAG_ITEM).getByRole('button', { name: 'Add bag' })).toBeVisible()
          await settle(p)
        },
      },
      {
        target: p => item(p, BAG_ITEM).getByRole('button', { name: 'Add bag' }),
        act: async p => {
          await item(p, BAG_ITEM).getByRole('button', { name: 'Add bag' }).click()
          const field = item(p, BAG_ITEM).getByPlaceholder('Bag name...')
          await typeInto(p, field, BAG)
          await field.press('Enter')
          await expect(bagSidebar(p)).toBeVisible({ timeout: 30_000 })
          await settle(p)
        },
      },
      only(bagSidebar),
      {
        target: p => bagSidebar(p).getByRole('button', { name: 'Set limit' }),
        act: async p => {
          await bagSidebar(p).getByRole('button', { name: 'Set limit' }).click()
          // Entered in kilograms, stored in grams.
          const field = bagSidebar(p).locator('input[aria-label="Weight limit"]')
          await typeInto(p, field, '8')
          await field.press('Enter')
          await expect(bagSidebar(p).getByText('/ 8.0 kg')).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        // The card's member picker; the column's other plus is Add bag, below it.
        target: p => bagSidebar(p).locator('button:has(svg.lucide-plus)').first(),
        act: async p => {
          await bagSidebar(p).locator('button:has(svg.lucide-plus)').first().click()
          await bagSidebar(p).getByRole('button', { name: MEMBER }).click()
          await bagSidebar(p).getByRole('button', { name: 'Close' }).click()
          await expect(bagSidebar(p).getByRole('button', { name: MEMBER })).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
    ],
    cleanup: async p => {
      const { tripId } = seededTrip()
      const res = await p.request.get(`/api/trips/${tripId}/packing/bags`)
      const body = (await res.json()) as { bags?: { id: number; name: string }[] }
      for (const bag of (body.bags ?? []).filter(x => x.name === BAG)) {
        // bag_id is ON DELETE SET NULL, so the item is freed with it.
        await p.request.delete(`/api/trips/${tripId}/packing/bags/${bag.id}`)
      }
      const row = (await packingItems(p)).find(x => x.name === BAG_ITEM)
      if (row) await p.request.put(`/api/trips/${tripId}/packing/${row.id}`, { data: { weight_grams: null } })
    },
  },
  'create-todo': {
    guide: guide('create-todo'),
    start: openTodos,
    steps: [
      {
        target: p => p.getByRole('button', { name: 'Add new task' }),
        act: async p => {
          await p.getByRole('button', { name: 'Add new task' }).click()
          await expect(modal(p).getByPlaceholder('Task name')).toBeVisible()
          await settle(p)
        },
      },
      {
        prepare: async p => {
          await typeInto(p, modal(p).getByPlaceholder('Task name'), NEW_TASK)
          await typeInto(p, modal(p).getByPlaceholder('Description (optional)'), NEW_TASK_NOTE)
          await settle(p)
        },
        target: p => modal(p).getByPlaceholder('Task name'),
      },
      {
        target: p => modal(p).getByRole('button', { name: 'No list' }),
        act: async p => {
          await modal(p).getByRole('button', { name: 'No list' }).click()
          // The select's list is portalled to <body>, outside the dialog.
          await p.getByRole('button', { name: TASK_LIST, exact: true }).click()
          await expect(modal(p).getByRole('button', { name: TASK_LIST })).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => modal(p).getByRole('button', { name: 'P1', exact: true }).locator('xpath=..'),
        act: async p => {
          await modal(p).getByRole('button', { name: 'P2', exact: true }).click()
          await settle(p)
        },
      },
      {
        prepare: async p => {
          // Exact: the keyboard button beside it is "Enter date manually", which a
          // loose name match also finds.
          await modal(p).getByRole('button', { name: 'Date', exact: true }).click()
          await expect(p.getByRole('button', { name: DUE_DAY })).toBeVisible()
          await beat(p, 300)
        },
        target: p => p.getByRole('dialog').last(),
        act: async p => {
          await p.getByRole('button', { name: DUE_DAY }).click()
          await modal(p).getByRole('button', { name: 'Unassigned' }).click()
          await p.getByRole('button', { name: ASSIGNEE }).click()
          await expect(modal(p).getByRole('button', { name: ASSIGNEE })).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => modal(p).getByRole('button', { name: 'Create task' }),
        act: async p => {
          await modal(p).getByRole('button', { name: 'Create task' }).click()
          await expect(p.locator('.trek-modal-backdrop')).toHaveCount(0, { timeout: 30_000 })
          await expect(task(p, NEW_TASK)).toBeVisible({ timeout: 30_000 })
          await settle(p)
        },
      },
    ],
    cleanup: p => deleteTodo(p, NEW_TASK),
  },
  'todo-filters': {
    guide: guide('todo-filters'),
    start: openTodos,
    steps: [
      {
        target: p => sidebarFilter(p, 'Overdue'),
        act: async p => {
          await sidebarFilter(p, 'Overdue').click()
          await expect(p.getByRole('heading', { name: 'Overdue' })).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => sidebarFilter(p, OTHER_TASK_LIST),
        act: async p => {
          await sidebarFilter(p, OTHER_TASK_LIST).click()
          await expect(p.getByRole('heading', { name: OTHER_TASK_LIST })).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        prepare: async p => {
          await sidebarFilter(p, 'All').click()
          await settle(p)
        },
        target: p => p.getByRole('button', { name: 'Priority', exact: true }),
        act: async p => {
          await p.getByRole('button', { name: 'Priority', exact: true }).click()
          await expect(p.locator('div[role="button"][data-no-press]').first()).toContainText(EDITED_TASK, { timeout: 20_000 })
          await settle(p)
        },
      },
      {
        target: p => task(p, EDITED_TASK),
        act: async p => {
          await task(p, EDITED_TASK).click()
          await expect(todoPane(p)).toBeVisible({ timeout: 20_000 })
          await settle(p)
        },
      },
      {
        prepare: async p => {
          await todoPane(p).getByRole('button', { name: 'Unassigned' }).click()
          await p.getByRole('button', { name: ASSIGNEE }).click()
          await settle(p)
        },
        target: p => todoPane(p).getByRole('button', { name: 'Save changes' }),
        act: async p => {
          await todoPane(p).getByRole('button', { name: 'Save changes' }).click()
          await expect(task(p, EDITED_TASK)).toContainText(ASSIGNEE, { timeout: 20_000 })
          await settle(p)
        },
      },
    ],
    cleanup: p => unassignTodo(p, EDITED_TASK),
  },
}

// ── Run ───────────────────────────────────────────────────────────────────────

test.describe.configure({ mode: 'serial' })

test.beforeAll(async ({ request }) => {
  await ensureListsFixtures(request)
})

test('every registered lists guide has a script, and only those', async () => {
  expect(Object.keys(SCRIPTS).sort()).toEqual([...tripListsContext.guides].sort())
})

test('hero: trip-lists', async ({ page }) => {
  await page.setViewportSize(VIEWPORT)
  await captureHero(page, tripListsContext.id, openLists)
})

for (const id of tripListsContext.guides) {
  test(`pictures: ${id}`, async ({ page }) => {
    await page.setViewportSize(VIEWPORT)
    await captureGuide(page, SCRIPTS[id])
  })
}