// spec: frontend/vue-app/e2e/plans/parent-item-management.plan.md
// Merged from kindness-convert-default.spec.ts and kindness-delete-default.spec.ts.
// Both tests touch "Be good for the day" so they MUST run serially.

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

test.describe('Default kindness act management', () => {
  test.describe.configure({ mode: 'serial' })

  test('Convert a default kindness act to a user item by editing', async ({ page }) => {
    await page.goto('/parent/tasks/chores')
    await page.click('text=Kindness Acts')
    // find a default act
    await expect(page.locator('text=Be good for the day')).toBeVisible()
    await expect(
      page.locator('text=Be good for the day >> .. >> button[aria-label="Delete item"]'),
    ).toHaveCount(0)

    // edit it — rename so there is no name collision with the delete-default test
    await page.click('text=Be good for the day')
    await page.locator('#name').fill('Be good today (edited)')
    await page.locator('#points').fill('7')
    await page.getByRole('button', { name: 'Save' }).click()

    // renamed item should now be deletable
    await expect(
      page
        .getByText('Be good today (edited)', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toBeVisible()

    // clean up: delete the user item so the next test sees "Be good for the day" as a system default
    await page
      .getByText('Be good today (edited)', { exact: true })
      .locator('..')
      .locator('button[aria-label="Delete item"]')
      .click()
    await page.getByRole('button', { name: 'Delete', exact: true }).click()
  })

  test('Edit default kindness act "Be good for the day" and verify system act restoration on delete', async ({
    page,
  }) => {
    await page.goto('/parent/tasks/chores')
    await page.getByText('Kindness Acts').click()

    // Cleanup: if a previous run left a modified 'Be good for the day' (with delete icon), remove it first
    while (
      (await page
        .getByText('Be good for the day', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]')
        .count()) > 0
    ) {
      await page
        .getByText('Be good for the day', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]')
        .first()
        .click()
      await page.getByRole('button', { name: 'Delete', exact: true }).click()
    }

    // 1. Verify 'Be good for the day' is the system default (visible, no delete icon)
    await expect(page.getByText('Be good for the day', { exact: true })).toBeVisible()
    await expect(
      page
        .getByText('Be good for the day', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toHaveCount(0)

    // 2. Click 'Be good for the day' to open the edit form and change points
    await page.getByText('Be good for the day', { exact: true }).click()
    await expect(page.locator('input#name').inputValue()).resolves.toBe('Be good for the day')

    await page.evaluate(() => {
      const setVal = (sel: string, val: string) => {
        const el = document.querySelector(sel) as HTMLInputElement | null
        if (el) {
          el.value = val
          el.dispatchEvent(new Event('input', { bubbles: true }))
          el.dispatchEvent(new Event('change', { bubbles: true }))
        }
      }
      setVal('#points', '3')
    })

    // expect: Save button becomes enabled because the form is dirty
    await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
    await page.getByRole('button', { name: 'Save' }).click()

    // 3. Verify exactly one 'Be good for the day' is in the list and it now has a delete icon
    await expect(page.getByText('Be good for the day', { exact: true })).toHaveCount(1)
    await expect(
      page
        .getByText('Be good for the day', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toBeVisible()
    // expect: points display reflects the updated value
    await expect(
      page.getByText('Be good for the day', { exact: true }).locator('..').locator('.value'),
    ).toHaveText('3 pts')

    // 4. Delete the modified 'Be good for the day' and verify the system default is restored
    await page
      .getByText('Be good for the day', { exact: true })
      .locator('..')
      .locator('button[aria-label="Delete item"]')
      .click()
    await expect(page.locator('text=Are you sure')).toBeVisible()
    await page.getByRole('button', { name: 'Delete', exact: true }).click()

    // expect: 'Be good for the day' is still on the list (system default restored)
    await expect(page.getByText('Be good for the day', { exact: true })).toBeVisible()
    // expect: no delete icon (it's a system default again)
    await expect(
      page
        .getByText('Be good for the day', { exact: true })
        .locator('..')
        .locator('button[aria-label="Delete item"]'),
    ).toHaveCount(0)
    // expect: original points (15 pts) are restored
    await expect(
      page.getByText('Be good for the day', { exact: true }).locator('..').locator('.value'),
    ).toHaveText('15 pts')
  })
})