// spec: frontend/vue-app/e2e/plans/parent-item-management.plan.md
// seed: e2e/seed.spec.ts

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

test.describe('Chore creation/edit cancellation', () => {
  test.beforeEach(async ({ page }, testInfo) => {
    test.skip(testInfo.project.name === 'chromium-no-pin', 'Requires parent-authenticated mode')
  })

  test('Cancel chore creation', async ({ page }) => {
    // 1. From /parent/tasks/chores, start creating a chore
    await page.goto('/parent/tasks/chores')
    await page.getByRole('button', { name: 'Create Chore' }).click()
    // expect: Create Chore form appears
    await expect(page.locator('text=Chore Name')).toBeVisible()

    // 2. Fill in 'Test' name and '5' points then cancel
    await page.evaluate(() => {
      const setVal = (sel, val) => {
        const el = document.querySelector(sel)
        if (el) {
          el.value = val
          el.dispatchEvent(new Event('input', { bubbles: true }))
          el.dispatchEvent(new Event('change', { bubbles: true }))
        }
      }
      setVal('#name', 'Test')
      setVal('#points', '5')
    })
    await page.getByRole('button', { name: 'Cancel' }).click()
    // expect: User is returned to the chores list (exact match to avoid custom copy)
    await expect(page.getByText('Clean your mess', { exact: true })).toBeVisible()
    // expect: No chore named 'Test' exists
    await expect(page.locator('text=Test')).toHaveCount(0)
  })

  test('Cancel chore edit', async ({ page }) => {
    // 1. Locate a chore and open its edit form
    await page.goto('/parent/tasks/chores')
    // ensure item exists
    if (!(await page.getByText('Wash dishes', { exact: true }).count())) {
      await page.getByRole('button', { name: 'Create Chore' }).click()
      await page.evaluate(() => {
        const setVal = (sel, val) => {
          const el = document.querySelector(sel)
          if (el) {
            el.value = val
            el.dispatchEvent(new Event('input', { bubbles: true }))
            el.dispatchEvent(new Event('change', { bubbles: true }))
          }
        }
        setVal('#name', 'Wash dishes')
        setVal('#points', '10')
      })
      await page.getByRole('button', { name: 'Create' }).click()
    }
    await page.getByText('Wash dishes', { exact: true }).click()

    // 2. Modify the name then cancel
    await page.evaluate(() => {
      const el = document.querySelector('#name')
      if (el) {
        el.value = 'Should not save'
        el.dispatchEvent(new Event('input', { bubbles: true }))
        el.dispatchEvent(new Event('change', { bubbles: true }))
      }
    })
    await page.getByRole('button', { name: 'Cancel' }).click()
    // expect: Navigation returns to list (exact match)
    await expect(page.getByText('Clean your mess', { exact: true })).toBeVisible()
    // expect: Original values remain unchanged
    await expect(page.getByText('Wash dishes', { exact: true })).toBeVisible()
  })
})