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

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

test('Edit default chore "Take out trash" and verify system chore restoration on delete', async ({
  page,
}) => {
  await page.goto('/parent/tasks/chores')

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

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

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

  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', '5')
  })

  // 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 'Take out trash' is in the list and it now has a delete icon
  await expect(page.getByText('Take out trash', { exact: true })).toHaveCount(1)
  await expect(
    page
      .getByText('Take out trash', { exact: true })
      .locator('..')
      .locator('button[aria-label="Delete item"]'),
  ).toBeVisible()
  // expect: points display reflects the updated value
  await expect(
    page.getByText('Take out trash', { exact: true }).locator('..').locator('.value'),
  ).toHaveText('5 pts')

  // 4. Delete the modified 'Take out trash' and verify the system default is restored
  await page
    .getByText('Take out trash', { 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: 'Take out trash' is still on the list (system default restored)
  await expect(page.getByText('Take out trash', { exact: true })).toBeVisible()
  // expect: no delete icon (it's a system default again)
  await expect(
    page
      .getByText('Take out trash', { exact: true })
      .locator('..')
      .locator('button[aria-label="Delete item"]'),
  ).toHaveCount(0)
  // expect: original points (20 pts) are restored
  await expect(
    page.getByText('Take out trash', { exact: true }).locator('..').locator('.value'),
  ).toHaveText('20 pts')
})