/** BESTAND-FILTER: die Tiere-Liste zeigt standardmäßig nur den eigenen Bestand. */
import { de, expect, gotoSection, skipUnlessMock, test } from './fixtures'

const t = de.pages.gerbils

test('Tiere-Liste blendet externe Ahnen standardmäßig aus', async ({ page }) => {
  skipUnlessMock()
  await gotoSection(page, de.nav.gerbils)
  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()

  // Bestand ist sichtbar …
  await expect(page.locator('.gerbil-row', { hasText: 'Krümel' })).toBeVisible()
  // … aber die externe Ahne „Max“ (isResident=false) nicht.
  await expect(page.locator('.gerbil-row', { hasText: 'Max' })).toHaveCount(0)
})

test('Toggle „Externe Ahnen einblenden” zeigt externe Tiere mit Extern-Markierung', async ({ page }) => {
  skipUnlessMock()
  await gotoSection(page, de.nav.gerbils)
  await expect(page.locator('.gerbil-row', { hasText: 'Krümel' })).toBeVisible()

  // DESIGN (Rennmaus Filter): „Externe Ahnen" ist ein Toggle-Chip (Button), kein Checkbox.
  await page.getByRole('button', { name: t.filters.showExternalShort }).click()

  const maxRow = page.locator('.gerbil-row', { hasText: 'Max' })
  await expect(maxRow).toBeVisible()
  await expect(maxRow.getByText(t.externalBadge, { exact: true })).toBeVisible()
  // Der Bestand bleibt weiterhin sichtbar.
  await expect(page.locator('.gerbil-row', { hasText: 'Krümel' })).toBeVisible()
})

test('Bearbeiten-Formular kann ein Tier als extern markieren (Bestand-Häkchen)', async ({ page }) => {
  skipUnlessMock()
  // Krümel gehört zum Bestand -> Häkchen entfernen und speichern.
  await page.goto('/rennmaeuse/kruemel/bearbeiten')
  const check = page.getByRole('checkbox', { name: t.form.isResidentLabel })
  await expect(check).toBeChecked()
  await check.uncheck()
  await page.getByRole('button', { name: t.form.save }).click()

  // Auf der Detailseite ist Krümel jetzt als „Extern“ markiert.
  await expect(page.getByRole('heading', { name: 'Krümel' })).toBeVisible()
  await expect(page.getByText(t.externalBadge, { exact: true })).toBeVisible()
})