// spec: e2e/plans/create-child.plan.md

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

test.describe('Create Child', () => {
  test('New child appears in list without page reload', async ({ page, context, request }) => {
    // Clean up 'Hannah' before test
    const res = await request.get('/api/child/list')
    const data = await res.json()
    for (const child of data.children ?? []) {
      if (child.name === 'Hannah') {
        await request.delete(`/api/child/${child.id}`)
      }
    }

    // 1. Open two browser tabs both on /parent (children list)
    await page.goto('/')
    await expect(page).toHaveURL('/parent')

    const tab2 = await context.newPage()
    await tab2.goto('/')
    await expect(tab2).toHaveURL('/parent')

    // 2. In Tab 1, create child 'Hannah' age '4'
    await page.getByRole('button', { name: 'Add Child' }).click()
    await page.getByLabel('Name').fill('Hannah')
    await page.getByLabel('Age').fill('4')
    await page.getByRole('button', { name: 'Create' }).click()
    await expect(page).toHaveURL('/parent')
    await expect(page.getByText('Hannah')).toBeVisible()

    // 3. Tab 2 should show 'Hannah' via SSE without a manual refresh
    await expect(tab2.getByText('Hannah')).toBeVisible()

    await tab2.close()
  })
})