import { createFormField } from '@blukavantui/community/form-field'
import '@blukavantui/community/theme.css'
import '@blukavantui/community/form-field.css'

export function mount(host: HTMLElement) {
  const root = document.createElement('section')
  const target = document.createElement('div')
  const check = document.createElement('button')
  check.type = 'button'; check.textContent = 'Validate reference'
  const status = document.createElement('p'); status.setAttribute('role', 'status')
  const input = document.createElement('input')
  input.type = 'text'; input.name = 'reference'; input.required = true
  input.className = 'blu-input'
  const existingHelp = document.createElement('p')
  existingHelp.id = `reference-help-${crypto.randomUUID()}`
  existingHelp.textContent = 'Use your customer reference.'
  input.setAttribute('aria-describedby', existingHelp.id)
  root.append(target, existingHelp, check, status); host.append(root)
  const instance = createFormField(target, {
    Control: input, Label: 'Customer reference', Required: true,
    Description: 'At least three characters, for example ABC.',
  })
  const listeners = new AbortController()
  input.addEventListener('input', () => {
    input.setCustomValidity(''); instance.update({ Error: '' })
    status.textContent = `Draft: ${input.value}`
  }, { signal: listeners.signal })
  check.addEventListener('click', () => {
    const error = input.value.trim().length < 3 ? 'Enter at least three characters.' : ''
    // FormField supplies presentation/ARIA; the consumer owns constraints.
    input.setCustomValidity(error); instance.update({ Error: error })
    status.textContent = input.reportValidity() ? 'Reference ready.' : error
  }, { signal: listeners.signal })
  return { instance, input, destroy() {
    listeners.abort(); input.setCustomValidity(''); instance.destroy(); root.remove()
  } }
}