<script setup>
const model = defineModel({ type: String, default: '' })

function onInput(e) {
  let val = e.target.value

  // alles in Großbuchstaben
  val = val.toUpperCase()

  // nur Buchstaben, Ziffern und Leerzeichen erlauben
  val = val.replace(/[^A-Z0-9 ]/g, '')

  // ohne Leerzeichen prüfen
  const compact = val.replace(/\s+/g, '')

  // max 2 Buchstaben + 20 Ziffern
  const letters = compact.slice(0, 2).replace(/[^A-Z]/g, '')
  const digits = compact.slice(2).replace(/[^0-9]/g, '').slice(0, 20)

  // neu zusammensetzen (z. B. alle 4 Zeichen ein Leerzeichen für Lesbarkeit)
  const formatted = (letters + digits).replace(/(.{4})/g, '$1 ').trim()

  model.value = formatted
}

function onKeypress(e) {
  const key = e.key

  // immer erlaubt: Leerzeichen
  if (key === ' ') return

  const compact = model.value.replace(/\s+/g, '')

  if (compact.length < 2) {
    // in den ersten 2 Stellen nur Buchstaben
    if (/[A-Za-z]/.test(key)) return
    e.preventDefault()
    return
  }

  // danach nur Ziffern bis 20 erlaubt
  if (/[0-9]/.test(key) && compact.length < 22) return

  e.preventDefault()
}
</script>

<template>
  <input
      maxlength="27"
      type="text"
      :value="model"
      @input="onInput"
      @keypress="onKeypress"
  />
</template>
