/**
 * QA-LIVE-DATA: Tiefe Begehung mit echten Import-Daten (325 Tiere, 865 Würfe, 138 Fotos).
 * Läuft ausschließlich im LIVE-Modus (E2E_BASE_URL gesetzt).
 *
 * Bekannte Datengrundlage (Stand Re-Import #2.5):
 * - Vance von den Kleinen Chaoten   id=afdaff89-0274-4778-8f2f-3957a81bf58e (Resident, Stammbaum)
 * - Girasol of Topolino             id=bf20f105-2ea9-475f-89b7-d50e59fb7d3b (9 Fotos)
 * - Litter 2026-02-10               id=a1db02cf-48ff-4f3a-8eab-33f2360c27f0 (beide Eltern gesetzt)
 * - 204 Residents, 121 Externe, 15 namenlose Einträge
 */
import { de, expect, gotoSection, openFilterPanel, skipUnlessLive, test } from './fixtures'

const t = de.pages.gerbils
const tl = de.pages.litters
const td = t.detail

// ── 1. RENNMÄUSE-LISTE ───────────────────────────────────────────────────────

test('Live-Data: Tiere-Liste lädt 325 Einträge (Bestand-Default-Filter inklusive externe)', async ({
  page,
}) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.gerbils)
  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
  const rows = page.locator('.gerbil-row')
  await expect(rows.first()).toBeVisible()
  const count = await rows.count()
  // Alle 325 oder zumindest Paginierung der ersten Seite (>=20)
  expect(count).toBeGreaterThanOrEqual(20)
  // Count-Label sichtbar ("204 Tiere" für Bestand-Default-Filter oder "325 Tiere")
  await expect(page.locator('p.muted').filter({ hasText: t.countLabel })).toBeVisible()
})

test('Live-Data: Bestand-Filter sichtbar + umschaltbar (Resident vs. Alle)', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.gerbils)
  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
  await openFilterPanel(page)
  // Filter-Panel oder mindestens der "Nur Bestand"-Toggle ist sichtbar
  const filterSection = page.locator('.filter-panel, [aria-label*="Filter"], .filter-panel__content')
  await expect(filterSection.first()).toBeVisible({ timeout: 5_000 })
})

test('Live-Data: Suche nach "Vance" findet mindestens einen Treffer', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.gerbils)
  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
  await page.getByPlaceholder(t.searchPlaceholder).first().fill('Vance')
  const rows = page.locator('.gerbil-row')
  await expect(rows.first()).toBeVisible({ timeout: 10_000 })
  expect(await rows.count()).toBeGreaterThanOrEqual(1)
  // Name "Vance" soll in einem Ergebnis auftauchen
  await expect(page.locator('.gerbil-row').filter({ hasText: 'Vance' }).first()).toBeVisible()
})

test('Live-Data: Suche nach "von den" (Namensmuster) liefert Treffer', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.gerbils)
  await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()
  await page.getByPlaceholder(t.searchPlaceholder).first().fill('von den')
  const rows = page.locator('.gerbil-row')
  await expect(rows.first()).toBeVisible({ timeout: 10_000 })
  expect(await rows.count()).toBeGreaterThanOrEqual(5)
})

test('Live-Data: Genotyp-Tabelle scrollt horizontal (kein Page-Overflow bei 390px)', async ({
  page,
}) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.gerbils)
  await expect(page.locator('.gerbil-row').first()).toBeVisible()
  // Kein horizontaler Scroll auf body/html
  const bodyOverflow = await page.evaluate(() => {
    const body = document.body
    const html = document.documentElement
    return {
      bodyScrollWidth: body.scrollWidth,
      htmlScrollWidth: html.scrollWidth,
      viewportWidth: window.innerWidth,
    }
  })
  expect(bodyOverflow.bodyScrollWidth).toBeLessThanOrEqual(bodyOverflow.viewportWidth + 2)
  expect(bodyOverflow.htmlScrollWidth).toBeLessThanOrEqual(bodyOverflow.viewportWidth + 2)
})

// ── 2. TIER-DETAIL ────────────────────────────────────────────────────────────

test('Live-Data: Girasol of Topolino Detail zeigt Fotos-Tab mit mindestens 9 Fotos', async ({
  page,
}) => {
  skipUnlessLive()
  await page.goto('/rennmaeuse/bf20f105-2ea9-475f-89b7-d50e59fb7d3b')
  await expect(page.getByRole('heading', { name: 'Girasol of Topolino' })).toBeVisible()
  // Fotos-Tab anklicken
  await page.getByRole('tab', { name: td.tabs.photos }).click()
  // Mindestens ein Foto-Img sichtbar (9 Fotos importiert)
  const photos = page.locator('img.photo-thumb, img[src*="/photos/files/"], .photo-item img, .photo-list img')
  await expect(photos.first()).toBeVisible({ timeout: 8_000 })
  expect(await photos.count()).toBeGreaterThanOrEqual(1)
})

test('Live-Data: Vance von den Kleinen Chaoten Detail rendert korrekt', async ({ page }) => {
  skipUnlessLive()
  await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e')
  await expect(page.getByRole('heading', { name: 'Vance von den Kleinen Chaoten' })).toBeVisible()
  // Gesundheits-Tab (leer OK, soll aber nicht crashen)
  await page.getByRole('tab', { name: td.tabs.health }).click()
  await expect(page).not.toHaveURL('/error')
  // Gewicht-Tab
  await page.getByRole('tab', { name: td.tabs.weight }).click()
  await expect(page).not.toHaveURL('/error')
})

test('Live-Data: Stammbaum-Link von Tier-Detail navigiert zu StammbaumPage', async ({ page }) => {
  skipUnlessLive()
  await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e')
  await expect(page.getByRole('heading', { name: 'Vance von den Kleinen Chaoten' })).toBeVisible()
  // Stammbaum-Link suchen
  const stammbaumLink = page.getByRole('link', { name: /Stammbaum/i }).first()
  if (await stammbaumLink.isVisible()) {
    await stammbaumLink.click()
    await expect(page).toHaveURL(/stammbaum/)
  } else {
    // Direkt navigieren
    await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e/stammbaum')
  }
  // Stammbaum-SVG oder rd3t-Knoten sichtbar
  await expect(page.locator('[data-testid="rd3t-svg"], svg.rd3t-svg, .stammbaum-page, svg').first()).toBeVisible({ timeout: 10_000 })
})

// ── 3. STAMMBAUM-SEITE ───────────────────────────────────────────────────────

test('Live-Data: Stammbaum rendert ohne Page-Overflow (390px)', async ({ page }) => {
  skipUnlessLive()
  await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e/stammbaum')
  // Irgendein SVG-Element muss sichtbar sein
  await expect(page.locator('svg').first()).toBeVisible({ timeout: 12_000 })
  const overflow = await page.evaluate(() => ({
    bodyScrollWidth: document.body.scrollWidth,
    viewportWidth: window.innerWidth,
  }))
  expect(overflow.bodyScrollWidth).toBeLessThanOrEqual(overflow.viewportWidth + 2)
})

test('Live-Data: Stammbaum hat Druck-Button', async ({ page }) => {
  skipUnlessLive()
  await page.goto('/rennmaeuse/afdaff89-0274-4778-8f2f-3957a81bf58e/stammbaum')
  await expect(page.locator('svg').first()).toBeVisible({ timeout: 12_000 })
  const printBtn = page.locator('button, a').filter({ hasText: /Drucken|Print|Ahnentafel/i })
  await expect(printBtn.first()).toBeVisible()
})

// ── 4. WÜRFE-LISTE ───────────────────────────────────────────────────────────

test('Live-Data: Würfe-Liste zeigt mindestens 20 Einträge (865 Würfe importiert)', async ({
  page,
}) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.litters)
  await expect(page.getByRole('heading', { name: tl.title, exact: true })).toBeVisible()
  const rows = page.locator('.litter-row, .gerbil-card, li a').filter({ hasText: /Wurf/i })
  await expect(rows.first()).toBeVisible()
  expect(await rows.count()).toBeGreaterThanOrEqual(20)
})

test('Live-Data: Wurf-Detail mit beiden Eltern rendert "Elterntiere"', async ({ page }) => {
  skipUnlessLive()
  // Direkt zu einem Wurf mit beiden Eltern navigieren (2026-02-10)
  await page.goto('/wuerfe/a1db02cf-48ff-4f3a-8eab-33f2360c27f0')
  // Elterntiere-Section immer sichtbar
  await expect(page.getByText(tl.detail.parents, { exact: true })).toBeVisible({ timeout: 8_000 })
  // Vater-Link zu einem Tier
  await expect(page.locator('a[href*="/rennmaeuse/"]').first()).toBeVisible({ timeout: 5_000 })
})

test('Live-Data: Wurf-Detail ohne Eltern rendert "Elterntiere" als "unbekannt"', async ({
  page,
}) => {
  skipUnlessLive()
  // Wurf A (2010-02-18) hat weder Vater noch Mutter
  await page.goto('/wuerfe/34852596-2bd7-48ad-9175-4223d3d99229')
  await expect(page.getByText(tl.detail.parents, { exact: true })).toBeVisible({ timeout: 8_000 })
  // "unbekannt" Platzhalter soll sichtbar sein (kein Link)
  await expect(page.getByText(tl.detail.unknownParent ?? 'unbekannt')).toBeVisible()
})

// ── 5. BECKEN / KONTAKTE (leere Zustände) ────────────────────────────────────

test('Live-Data: Becken-Seite zeigt Leer-Zustand (keine Becken importiert)', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.enclosures)
  await expect(page.getByRole('heading', { name: de.pages.becken.title, exact: true })).toBeVisible({ timeout: 8_000 })
  // Leer-Meldung oder "Neues Becken"-Button
  const emptyOrNew = page.locator('*').filter({ hasText: de.pages.becken.empty }).or(
    page.getByRole('link', { name: de.pages.becken.newButton })
  )
  await expect(emptyOrNew.first()).toBeVisible()
})

test('Live-Data: Kontakte-Seite zeigt Leer-Zustand (keine Kontakte importiert)', async ({
  page,
}) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.contacts)
  await expect(page.getByRole('heading', { name: de.pages.kontakte.title, exact: true })).toBeVisible({ timeout: 8_000 })
  await expect(page.getByText(de.pages.kontakte.empty)).toBeVisible()
})

// ── 6. GENETIK / PROBEVERPAARUNG ─────────────────────────────────────────────

test('Live-Data: Genetik-Seite lädt mit echten Genotypen', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.genetics)
  await expect(page.getByRole('heading', { name: de.pages.genetik.title, exact: true })).toBeVisible({ timeout: 8_000 })
  // Probeverpaarung-UI sichtbar
  await expect(page.getByText(de.pages.genetik.subtitle)).toBeVisible()
  // Tier-Auswahl Vater/Mutter sichtbar
  await expect(page.locator('select, input[type="search"], [placeholder]').first()).toBeVisible()
})

// ── 7. STATISTIK ─────────────────────────────────────────────────────────────

test('Live-Data: Statistik-Seite rendert Charts ohne Crash', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.statistics)
  await expect(page.getByRole('heading', { name: de.pages.statistik.title, exact: true })).toBeVisible({ timeout: 8_000 })
  // Mindestens ein Chart-Canvas oder SVG (865 Würfe = Charts vorhanden)
  const chart = page.locator('canvas, svg.bar-chart, svg.line-chart, .chart-wrapper, .bar-chart, .line-chart')
  await expect(chart.first()).toBeVisible({ timeout: 12_000 })
})

// ── 8. EINSTELLUNGEN ─────────────────────────────────────────────────────────

test('Live-Data: Einstellungen-Seite lädt Züchterprofil', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.settings)
  await expect(page.getByRole('heading', { name: de.pages.einstellungen.title, exact: true })).toBeVisible({ timeout: 8_000 })
  await expect(page.getByText(de.pages.einstellungen.zuchtprofil.title)).toBeVisible()
})

// ── 9. WEBSEITE (CMS) ────────────────────────────────────────────────────────

test('Live-Data: Webseite-Seite lädt ohne Crash', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.website)
  await expect(page.getByRole('heading', { name: de.pages.webseite.title, exact: true })).toBeVisible({ timeout: 8_000 })
  // Seitenliste mit Seeds vorhanden (8 Seiten aus dem Seed)
  await expect(page.locator('.gerbil-card, li').first()).toBeVisible({ timeout: 5_000 })
})

// ── 10. ANFRAGEN ─────────────────────────────────────────────────────────────

test('Live-Data: Anfragen-Seite zeigt Leer-Zustand (0 Anfragen)', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.requests)
  await expect(page.getByRole('heading', { name: de.pages.anfragen.title, exact: true })).toBeVisible({ timeout: 8_000 })
  // Leer-Text soll sichtbar sein (keine Anfragen live)
  await expect(page.getByText(de.pages.anfragen.empty)).toBeVisible()
})

// ── 11. KONSOLEN-FEHLER-MONITOR ───────────────────────────────────────────────

test('Live-Data: Keine unhandled-rejection-Fehler beim Durchlauf aller Hauptseiten', async ({
  page,
}) => {
  skipUnlessLive()
  const errors: string[] = []
  page.on('pageerror', (err) => errors.push(err.message))
  page.on('console', (msg) => {
    if (msg.type() === 'error') errors.push(`[console.error] ${msg.text()}`)
  })

  // Navigiere direkt per URL statt gotoSection — gotoSection benutzt getByRole('navigation')
  // welches bei Seiten mit Pager-Navigation (>1 Page) in strict-mode fehlschlägt (Infra-Bug).
  for (const path of ['/', '/rennmaeuse', '/statistik', '/genetik', '/einstellungen']) {
    await page.goto(path)
    await page.waitForTimeout(800)
  }
  // Keine unkritischen Errors (ignoriere CORS-Warnungen, die im Dev-Modus normal sind)
  const criticalErrors = errors.filter(
    (e) =>
      !e.includes('CORS') &&
      !e.includes('favicon') &&
      !e.includes('DevTools') &&
      !e.includes('Warning:'),
  )
  expect(criticalErrors).toHaveLength(0)
})

// ── 12. DESKTOP-OVERFLOW-CHECK ───────────────────────────────────────────────
// (dieses Projekt-File läuft in beiden Viewports dank playwright.config.ts)

test('Live-Data: Rennmäuse-Liste kein horizontal Overflow (Desktop 1280px)', async ({ page }) => {
  skipUnlessLive()
  await gotoSection(page, de.nav.gerbils)
  await expect(page.locator('.gerbil-row').first()).toBeVisible()
  const overflow = await page.evaluate(() => ({
    scrollWidth: document.documentElement.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }))
  expect(overflow.scrollWidth).toBeLessThanOrEqual(overflow.clientWidth + 2)
})