/**
 * UX-MOBILE-1: FilterPanel — einklappbare Filter auf Smartphone, inline auf Desktop.
 *
 * Telefon (390px): Filter-Button sichtbar, Drawer eingeklappt; Tippen öffnet/schliesst.
 * Desktop (1280px): Alle Controls direkt sichtbar, kein Toggle-Button.
 */
import { de, expect, gotoSection, skipUnlessMock, test } from './fixtures'

const t = de.pages.gerbils

test.describe('FilterPanel – Rennmäuse-Liste', () => {
  test('Phone: Filter-Drawer standardmäßig eingeklappt, Toggle-Button sichtbar', async ({
    page,
  }, testInfo) => {
    skipUnlessMock()
    if (testInfo.project.name !== 'phone') return

    await gotoSection(page, de.nav.gerbils)
    await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()

    // Toggle-Button sichtbar.
    const toggle = page.locator('.filter-panel__toggle')
    await expect(toggle).toBeVisible()

    // Status-Beschriftung im Drawer ist noch verborgen.
    await expect(page.getByText(t.filters.status, { exact: true }).first()).not.toBeVisible()
  })

  test('Phone: Toggle öffnet und schließt den Filter-Drawer', async ({
    page,
  }, testInfo) => {
    skipUnlessMock()
    if (testInfo.project.name !== 'phone') return

    await gotoSection(page, de.nav.gerbils)
    const toggle = page.locator('.filter-panel__toggle')

    // Öffnen → Status-Feld wird sichtbar.
    await toggle.click()
    await expect(page.getByText(t.filters.status, { exact: true }).first()).toBeVisible()

    // Schließen → wieder verborgen.
    await toggle.click()
    await expect(page.getByText(t.filters.status, { exact: true }).first()).not.toBeVisible()
  })

  test('Phone: Badge zählt aktive Filter korrekt', async ({
    page,
  }, testInfo) => {
    skipUnlessMock()
    if (testInfo.project.name !== 'phone') return

    await gotoSection(page, de.nav.gerbils)
    const toggle = page.locator('.filter-panel__toggle')

    // Initial: Status='Active' ist Default → Badge zeigt kein „(N)".
    await expect(toggle).toHaveText('Filter')

    // Filter-Drawer öffnen und Geschlecht setzen → 1 aktiver Filter.
    await toggle.click()
    await page.locator('.filter-panel__drawer select').nth(1).selectOption('male')
    await expect(toggle).toHaveText('Filter (1)')

    // Zurücksetzen → Badge weg.
    await page.getByRole('button', { name: de.filterPanel.resetButton }).click()
    await expect(toggle).toHaveText('Filter')
  })

  test('Desktop: Toggle-Button nicht sichtbar, alle Controls inline', async ({
    page,
  }, testInfo) => {
    skipUnlessMock()
    if (testInfo.project.name !== 'desktop') return

    await gotoSection(page, de.nav.gerbils)
    await expect(page.getByRole('heading', { name: t.title, exact: true })).toBeVisible()

    // Kein Toggle-Button auf Desktop (display:none via Media Query).
    const toggle = page.locator('.filter-panel__toggle')
    await expect(toggle).toBeHidden()

    // Status-Beschriftung direkt sichtbar.
    await expect(page.getByText(t.filters.status, { exact: true }).first()).toBeVisible()
  })
})