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

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

test.describe('Convert default reward', () => {
  test.beforeEach(async ({ page }, testInfo) => {
    test.skip(testInfo.project.name === 'chromium-no-pin', 'Requires parent-authenticated mode')
  })

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

  test('Convert a default reward to a user item', async ({ page }) => {
    await page.goto('/parent/rewards')

    // remove any row that has a delete button (covers custom copies and renamed originals)
    const allRows = page.locator('text=Choose meal')
    const total = await allRows.count()
    for (let i = 0; i < total; i++) {
      const r = allRows.nth(i)
      const delBtn = r.locator('..').getByRole('button', { name: 'Delete' })
      if ((await delBtn.count()) > 0) {
        await delBtn.click()
        await expect(page.locator('text=Are you sure you want to delete')).toBeVisible()
        await page.locator('button.btn-danger:has-text("Delete")').click()
      }
    }

    // locate the remaining default reward (exact text)
    const row = page.getByText('Choose meal', { exact: true }).first()
    await expect(row).toBeVisible()
    // delete button should not exist initially on default
    await expect(row.locator('..').getByRole('button', { name: 'Delete' })).toHaveCount(0)

    // open edit form
    await row.click()
    await expect(page.locator('input#name')).toHaveValue('Choose meal')

    // change fields
    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('#name', 'Choose meal (custom)')
      setVal('#cost', '35')
    })
    await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
    await page.click('button:has-text("Save")')

    // after save, ensure row now has delete control
    const updated = page.locator('text=Choose meal (custom)').first()
    await expect(updated).toBeVisible()
    await expect(updated.locator('..').getByRole('button', { name: 'Delete' })).toBeVisible()
  })
})