import { useCallback, useRef, useState } from 'react';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
    InputGroupText,
} from '@/components/ui/input-group';

type RupiahInputProps = {
    name?: string;
    defaultValue?: number;
    placeholder?: string;
    disabled?: boolean;
    min?: number;
    max?: number;
    className?: string;
};

function formatRupiah(value: number): string {
    return value.toLocaleString('id-ID');
}

function parseRupiah(value: string): number {
    const cleaned = value.replace(/[^0-9]/g, '');
    return cleaned === '' ? 0 : parseInt(cleaned, 10);
}

export function RupiahInput({
    name,
    defaultValue = 0,
    placeholder = '0',
    disabled = false,
    min,
    max,
    className,
}: RupiahInputProps) {
    const [displayValue, setDisplayValue] = useState(formatRupiah(defaultValue));
    const lastValidRef = useRef(defaultValue);

    const handleChange = useCallback(
        (e: React.ChangeEvent<HTMLInputElement>) => {
            const raw = parseRupiah(e.target.value);
            let clamped = raw;

            if (min !== undefined && raw < min) {
                clamped = min;
            }
            if (max !== undefined && raw > max) {
                clamped = max;
            }

            lastValidRef.current = clamped;
            setDisplayValue(formatRupiah(clamped));
        },
        [min, max],
    );

    const handleBlur = useCallback(() => {
        setDisplayValue(formatRupiah(lastValidRef.current));
    }, []);

    return (
        <InputGroup className={className}>
            <InputGroupAddon>
                <InputGroupText>Rp</InputGroupText>
            </InputGroupAddon>
            <InputGroupInput
                name={name}
                type="text"
                inputMode="numeric"
                value={displayValue}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder={placeholder}
                disabled={disabled}
                autoComplete="off"
            />
        </InputGroup>
    );
}