import { Input } from '@/components/ui/input'

// PRC-001 — UDT: emoji blocking regex (Unicode Extended_Pictographic)
const EMOJI_REGEX = /\p{Extended_Pictographic}/u

interface SymbolInputProps {
  value: string
  onChange: (value: string) => void
  error?: string
  disabled?: boolean
  placeholder?: string
  id?: string
  'aria-label'?: string
  name?: string
}

/**
 * Controlled text input that blocks emoji characters.
 * Emoji detection via /\p{Extended_Pictographic}/u (spec R4.4).
 * Max length 4 chars. Server-side validation remains authoritative.
 */
export function SymbolInput({ value, onChange, error, disabled, placeholder, id, 'aria-label': ariaLabel, name }: SymbolInputProps) {
  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const v = e.target.value
    // Block emojis
    if (EMOJI_REGEX.test(v)) return
    // Enforce max length
    if (v.length > 4) return
    onChange(v)
  }

  function handlePaste(e: React.ClipboardEvent<HTMLInputElement>) {
    const pasted = e.clipboardData.getData('text')
    if (EMOJI_REGEX.test(pasted)) {
      e.preventDefault()
    }
    // Normal paste proceeds (length clamping happens via onChange)
  }

  return (
    <div className="flex flex-col gap-1">
      <Input
        id={id}
        name={name}
        value={value}
        onChange={handleChange}
        onPaste={handlePaste}
        maxLength={4}
        disabled={disabled}
        placeholder={placeholder ?? 'ej: $'}
        aria-invalid={!!error}
        aria-label={ariaLabel}
        className="font-mono"
      />
      {error && (
        <span className="text-sm text-destructive" role="alert">
          {error}
        </span>
      )}
    </div>
  )
}
