/** FARBSCHLAG-GENOTYPE-SYNC: Bidirektionale Sync im Tier-Formular. */
import { de, expect, skipUnlessMock, test } from './fixtures'

const t = de.pages.gerbils

test('Farbschlag-Auswahl füllt Gencode automatisch aus', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')

  const genotypeInput = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
    .locator('input')

  // Vor der Auswahl ist das Gencode-Feld leer.
  await expect(genotypeInput).toHaveValue('')

  // 'Agouti' wählen → Gencode wird automatisch befüllt.
  await page.locator('.color-picker-trigger').click()
  await page.locator('.color-picker-option', { hasText: 'Agouti' }).click()
  await expect(genotypeInput).toHaveValue('AA CC DD EE GG PP spsp rere')
})

test('Gencode-Eingabe aktualisiert die Farbschlag-Auswahl', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')

  const genotypeInput = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
    .locator('input')

  // Gencode für Schwarz eintippen → Farbschlag-Select springt auf 'Schwarz'.
  await genotypeInput.fill('aa CC DD EE GG PP spsp rere')
  await expect(page.locator('.color-picker-trigger')).toHaveText(/Schwarz/)
})

test('Gencode ohne passende Farbschlag-Auswahl leert das Dropdown', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')

  const genotypeInput = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
    .locator('input')

  // Zuerst eine bekannte Farbe wählen, damit das Select belegt ist.
  await page.locator('.color-picker-trigger').click()
  await page.locator('.color-picker-option', { hasText: 'Agouti' }).click()
  await expect(page.locator('.color-picker-trigger')).toHaveText(/Agouti/)

  // Marder-Genotyp: bekannte Farbe im Engine, aber NICHT im Mock-Dropdown
  // → Select wird auf '' (kein Eintrag) zurückgesetzt.
  await genotypeInput.fill('aa cchmcchm DD EE GG PP spsp rere')
  await expect(page.locator('.color-picker-trigger')).toHaveText(/— keine Angabe —/)
})

test('Unbekannter Genotyp leert das Farbschlag-Dropdown (Unbekannt-Fall)', async ({ page }) => {
  skipUnlessMock()
  await page.goto('/rennmaeuse/neu')

  const genotypeInput = page
    .locator('label.field', { has: page.locator(`span:text-is("${t.fields.genotype}")`) })
    .locator('input')

  await page.locator('.color-picker-trigger').click()
  await page.locator('.color-picker-option', { hasText: 'Blau' }).click()
  await expect(page.locator('.color-picker-trigger')).toHaveText(/Blau/)

  // aa CC dd EE gg pp → Unbekannter Farbschlag (nicht im Katalog) → Select leert sich.
  await genotypeInput.fill('aa CC dd EE gg pp spsp rere')
  await expect(page.locator('.color-picker-trigger')).toHaveText(/— keine Angabe —/)
})