'use client';

import {forwardRef,useLayoutEffect,useRef,type InputHTMLAttributes} from 'react';
import type {Locale} from '@/lib/catalog';
import {deleteLocalizedNumber,editLocalizedNumber,formatLocalizedNumberInput,type LocalizedNumberEdit} from '@/lib/localized-number-input';

export interface LocalizedNumberInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,'value'|'defaultValue'|'onChange'|'type'> {
 value:string;
 onValueChange:(value:string)=>void;
 locale?:Locale;
}

/** A text input with localized display and an exact, ASCII decimal model. */
export const LocalizedNumberInput=forwardRef<HTMLInputElement,LocalizedNumberInputProps>(function LocalizedNumberInput({value,onValueChange,locale='fa',maxLength=80,inputMode='decimal',dir='ltr',onFocus,onKeyDown,onBeforeInput,...props},ref){
 const input=useRef<HTMLInputElement|null>(null);
 const pendingCaret=useRef<number|null>(null);
 const formatted=formatLocalizedNumberInput(value,locale);
 useLayoutEffect(()=>{
  const node=input.current,caret=pendingCaret.current;
  if(node&&caret!==null&&node.ownerDocument.activeElement===node)node.setSelectionRange(caret,caret);
  pendingCaret.current=null;
 });
 function commit(node:HTMLInputElement,edit:LocalizedNumberEdit|null){
  if(!edit){node.value=formatted;return;}
  node.value=edit.formatted;
  pendingCaret.current=edit.caret;
  onValueChange(edit.value);
  node.setSelectionRange(edit.caret,edit.caret);
 }
 function remove(node:HTMLInputElement,direction:'backward'|'forward'){
  commit(node,deleteLocalizedNumber(value,locale,node.selectionStart??0,node.selectionEnd??0,direction,maxLength));
 }
 return <input {...props} ref={node=>{input.current=node;if(typeof ref==='function')ref(node);else if(ref)ref.current=node;}} type="text" inputMode={inputMode} dir={dir} value={formatted} onChange={event=>commit(event.currentTarget,editLocalizedNumber(event.currentTarget.value,event.currentTarget.selectionStart??0,locale,maxLength))} onFocus={event=>{onFocus?.(event);if(!event.defaultPrevented&&(value===''||value==='0'))event.currentTarget.select();}} onKeyDown={event=>{
  onKeyDown?.(event);
  if(event.defaultPrevented||props.readOnly||props.disabled||event.altKey||event.metaKey||event.ctrlKey||event.nativeEvent.isComposing)return;
  if(event.key==='Backspace'||event.key==='Delete'){event.preventDefault();remove(event.currentTarget,event.key==='Backspace'?'backward':'forward');}
 }} onBeforeInput={event=>{
  onBeforeInput?.(event);
  if(event.defaultPrevented||props.readOnly||props.disabled)return;
  const kind=(event.nativeEvent as InputEvent).inputType;
  if(kind==='deleteContentBackward'||kind==='deleteContentForward'){event.preventDefault();remove(event.currentTarget,kind==='deleteContentBackward'?'backward':'forward');}
 }}/>;
});