/**
 * UX-MOBILE-2: Genotyp-Tabellen-Overflow — die Tabelle scrollt horizontal,
 * die Seite selbst bleibt NICHT breiter als der Viewport (kein horizontaler
 * Page-Overflow auf 390px).
 */
import { de, expect, skipUnlessMock, test } from './fixtures'

const tl = de.pages.litters

test('Phone: Genotyp-Detail-Tabelle scrollt im eigenen Wrapper, kein Page-Overflow', async ({
  page,
}, testInfo) => {
  skipUnlessMock()
  if (testInfo.project.name !== 'phone') return

  // Wurf w-kruemel hat beide Eltern mit Genotypen → BreedingResultView rendert.
  await page.goto('/wuerfe/w-kruemel')
  await expect(page.getByRole('heading', { name: 'Wurf K' })).toBeVisible()
  await expect(page.getByText(tl.detail.expectedColors).first()).toBeVisible()

  // Genotyp-Detail-Tabelle ausklappen.
  await page.getByRole('button', { name: de.pages.genetik.showGenotypes }).click()

  // Scroll-Wrapper und Tabelle müssen vorhanden und sichtbar sein.
  const wrapper = page.locator('.genotype-table-scroll').first()
  await expect(wrapper).toBeVisible()
  await expect(wrapper.locator('.genotype-table')).toBeVisible()

  // Wrapper ist selbst scrollbar (Tabelle breiter als der sichtbare Bereich).
  const wrapperScrollable = await wrapper.evaluate(
    (el) => el.scrollWidth > el.clientWidth,
  )
  expect(wrapperScrollable).toBe(true)

  // Die Seite selbst darf NICHT breiter als der Viewport sein.
  const pageOverflow = await page.evaluate(
    () => document.documentElement.scrollWidth > document.documentElement.clientWidth,
  )
  expect(pageOverflow).toBe(false)
})

test('Desktop: Genotyp-Detail-Tabelle zeigt Wrapper auch auf breitem Viewport', async ({
  page,
}, testInfo) => {
  skipUnlessMock()
  if (testInfo.project.name !== 'desktop') return

  await page.goto('/wuerfe/w-kruemel')
  await expect(page.getByText(tl.detail.expectedColors).first()).toBeVisible()
  await page.getByRole('button', { name: de.pages.genetik.showGenotypes }).click()

  await expect(page.locator('.genotype-table-scroll').first()).toBeVisible()
  await expect(page.locator('.genotype-table').first()).toBeVisible()
})