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

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

test('Convert a default chore to a user item by editing', async ({ page }) => {
  // 1. Locate a default chore such as 'Clean your mess' in the chores list
  await page.goto('/parent/tasks/chores')
  await expect(page.locator('text=Clean your mess')).toBeVisible()
  // expect: Item is visible and has no delete button
  await expect(
    page.locator('text=Clean your mess >> .. >> button[aria-label="Delete item"]'),
  ).toHaveCount(0)

  // 2. Click the default chore itself to edit
  await page.click('text=Clean your mess')
  // expect: Edit form opens with the default values
  await expect(page.locator('input#name').inputValue()).resolves.toBe('Clean your mess')

  // 3. Change some properties (name and points) so Save becomes enabled
  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', 'Clean your mess (custom)')
    setVal('#points', '20')
  })
  // expect: Save button is enabled because form is dirty
  await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()

  // 4. Save the update
  await page.click('button:has-text("Save")')
  // expect: The chore now shows as editable and includes a delete option
  await expect(
    page.locator('text=Clean your mess >> .. >> button[aria-label="Delete item"]'),
  ).toBeVisible()
  // expect: Item behaves like a custom chore
})