import type { InputHTMLAttributes } from 'react';

/**
 * Isian yang hanya menerima angka (NIK, NISN, RT, RW, nomor WhatsApp).
 *
 * `pattern` baru dicek saat tombol lanjut ditekan, jadi tanpa penyaring ini
 * huruf tetap bisa diketik dan pendaftar baru tahu salahnya belakangan.
 * Karakter bukan angka dibuang saat diketik maupun ditempel (mis. "0812-3456"
 * atau "+62 812…"). Server tetap sumber kebenaran: pemisah dibuang oleh
 * `wa()` dan aturan `digits` di Form Request.
 *
 * Tetap tak terkendali (uncontrolled) supaya pemulihan sessionStorage dan
 * FormData tidak berubah, sama seperti InputKapital.
 */
export function InputAngka(props: InputHTMLAttributes<HTMLInputElement>) {
    return (
        <input
            {...props}
            type={props.type ?? 'text'}
            inputMode="numeric"
            data-angka
            onPaste={(acara) => {
                /*
                 * maxLength memotong teks tempelan sebelum onInput sempat
                 * membuang pemisah: "+62 812-3456-7890" (17 karakter) terpotong
                 * jadi 13 karakter lalu disaring menjadi "628123456". Karena
                 * itu tempelan dibersihkan lebih dulu, baru dimasukkan.
                 */
                const el = acara.currentTarget;
                const angka = acara.clipboardData.getData('text').replace(/\D+/g, '');

                acara.preventDefault();

                const awal = el.selectionStart ?? el.value.length;
                const akhir = el.selectionEnd ?? awal;
                const baru = (el.value.slice(0, awal) + angka + el.value.slice(akhir)).slice(
                    0,
                    el.maxLength > 0 ? el.maxLength : undefined,
                );

                el.value = baru;
                const kursor = Math.min(awal + angka.length, baru.length);
                el.setSelectionRange(kursor, kursor);

                // Penghitung digit dan penyimpan otomatis mendengarkan 'input'.
                el.dispatchEvent(new Event('input', { bubbles: true }));
            }}
            onInput={(acara) => {
                const el = acara.currentTarget;
                const bersih = el.value.replace(/\D+/g, '');

                if (el.value !== bersih) {
                    // Karakter dibuang, jadi kursor digeser sebanyak yang terbuang
                    // di depannya supaya mengetik di tengah angka tidak melompat.
                    const kursor = el.selectionStart ?? el.value.length;
                    const dibuang = el.value.slice(0, kursor).replace(/\d+/g, '').length;
                    el.value = bersih;
                    el.setSelectionRange(Math.max(0, kursor - dibuang), Math.max(0, kursor - dibuang));
                }

                props.onInput?.(acara);
            }}
        />
    );
}