import type { ReactNode } from 'react'
import { isValidGenotype, previewFarbschlag } from '../format/genotypeText'
import { de } from '../strings/de'

export interface ParentValue {
  /** Free-text genotype (GEN-1 compact string; '?' wildcards allowed). */
  genotype: string
  /** Name of a picked animal, if the genotype came from one (display only). */
  animalName?: string | null
}

export interface ParentSelectorProps {
  label: string
  value: ParentValue
  onChange: (value: ParentValue) => void
  /** Optional animal-picker UI (FEAT-5 increment 3) rendered above the input. */
  picker?: ReactNode
}

export default function ParentSelector({ label, value, onChange, picker }: ParentSelectorProps) {
  const t = de.pages.genetik
  const preview = previewFarbschlag(value.genotype)
  const invalid = value.genotype.trim() !== '' && !isValidGenotype(value.genotype)

  return (
    <fieldset className="parent-selector">
      <legend>{label}</legend>
      {picker}
      {value.animalName && (
        <p className="muted parent-selector__animal">
          {value.animalName}
          <button
            type="button"
            className="link-btn"
            onClick={() => onChange({ genotype: '', animalName: null })}
          >
            {t.clearAnimal}
          </button>
        </p>
      )}
      <label className="field">
        <span>{t.genotypeLabel}</span>
        <input
          className="input"
          value={value.genotype}
          placeholder="Aa CC Dd EE GG Pp Spsp rere"
          onChange={(e) => onChange({ genotype: e.target.value, animalName: null })}
          aria-invalid={invalid}
        />
        {invalid ? (
          <small className="error-text">{t.genotypeInvalid}</small>
        ) : preview ? (
          <small className="muted">
            {t.genotypePreview}: <strong>{preview}</strong>
          </small>
        ) : value.animalName ? (
          <small className="error-text">{t.pickAnimalNoGenotype}</small>
        ) : (
          <small className="muted">{t.genotypeHint}</small>
        )}
      </label>
    </fieldset>
  )
}
