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

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

test.describe('Default reward cost edit and restore', () => {
  test.beforeEach(async ({ page }, testInfo) => {
    test.skip(testInfo.project.name === 'chromium-no-pin', 'Requires parent-authenticated mode')
  })

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

  test('Edit default cost and verify restoration on delete', async ({ page }) => {
    await page.goto('/parent/rewards')

    // cleanup any user-copy of "Choose meal"
    // Keep deleting rows until there are none left – avoids DOM-shift race when
    // multiple matching rows exist (e.g. leftovers from previous specs).  Because
    // other workers may modify the list concurrently, we also retry the entire
    // loop once after a short delay if a delete button still shows up.
    async function purge(): Promise<void> {
      while (
        await page
          .getByText('Choose meal', { exact: true })
          .locator('..')
          .getByRole('button', { name: 'Delete' })
          .count()
      ) {
        const btn = page
          .getByText('Choose meal', { exact: true })
          .locator('..')
          .getByRole('button', { name: 'Delete' })
          .first()
        await btn.click()
        await expect(page.locator('text=Are you sure you want to delete')).toBeVisible()
        await page.locator('button.btn-danger:has-text("Delete")').click()
        // give UI a moment to refresh the list
        await page.waitForTimeout(200)
      }
    }
    await purge()
    // if something else sneaks one in (concurrent spec), wait then try again
    if (
      await page
        .getByText('Choose meal', { exact: true })
        .locator('..')
        .getByRole('button', { name: 'Delete' })
        .count()
    ) {
      await page.waitForTimeout(500)
      await purge()
    }
    // reload to make sure the list has settled after all deletions
    await page.reload()
    await page.waitForURL('/parent/rewards')

    // ensure default exists with no delete icon
    const defaultRow = page.getByText('Choose meal', { exact: true }).first()
    await expect(defaultRow).toBeVisible()
    // sometimes concurrent specs race and temporarily re-add a delete icon; give
    // it a moment and retry once
    let deleteCount = await defaultRow.locator('..').getByRole('button', { name: 'Delete' }).count()
    if (deleteCount) {
      await page.waitForTimeout(500)
      deleteCount = await defaultRow.locator('..').getByRole('button', { name: 'Delete' }).count()
    }
    await expect(deleteCount).toBe(0)

    // open edit and change cost
    await defaultRow.click()
    await expect(page.locator('input#name')).toHaveValue('Choose meal')
    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('#cost', '50')
    })
    await expect(page.getByRole('button', { name: 'Save' })).toBeEnabled()
    await page.click('button:has-text("Save")')

    // After save: pick the row wrapper that now shows 50 pts (user copy)
    const customRow = page
      .getByText('Choose meal', { exact: true })
      .locator('..')
      .filter({ has: page.locator('text=50 pts') })
      .first()
    await expect(customRow).toBeVisible({ timeout: 10000 })
    await expect(customRow.getByRole('button', { name: /Delete/ })).toBeVisible()

    // delete and confirm restoration using the same customRow
    await customRow.getByRole('button', { name: /Delete/ }).click()
    await expect(page.locator('text=Are you sure you want to delete')).toBeVisible()
    await page.locator('button.btn-danger:has-text("Delete")').click()

    // wait until the exact 'Choose meal' copy showing the edited cost is gone
    await expect(
      page
        .getByText('Choose meal', { exact: true })
        .locator('..')
        .filter({ has: page.locator('text=50 pts') }),
    ).toHaveCount(0, { timeout: 10000 })

    // reload the list to clear any lingering delete icon artifacts
    await page.reload()
    await page.waitForURL('/parent/rewards')

    // ensure no delete button is visible on the exact default 'Choose meal' row
    await expect(
      page
        .getByText('Choose meal', { exact: true })
        .locator('..')
        .getByRole('button', { name: 'Delete' }),
    ).toHaveCount(0, { timeout: 10000 })

    const finalRow = page.getByText('Choose meal', { exact: true }).first()
    await expect(finalRow).toBeVisible()
    await expect(finalRow).not.toContainText('50 pts')
  })
})