import { useId } from 'react';
import {
    Field,
    FieldDescription,
    FieldError,
    FieldLabel,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import {
    InputGroup,
    InputGroupAddon,
    InputGroupInput,
    InputGroupText,
} from '@/components/ui/input-group';
import { cn } from '@/lib/utils';
import { useSectionForm } from '../lib/section-form-context';

type NumberFieldProps = {
    name: string;
    label: string;
    required?: boolean;
    step?: number;
    min?: number;
    max?: number;
    suffix?: string;
    hint?: string;
    placeholder?: string;
    readOnly?: boolean;
};

export function NumberField({
    name,
    label,
    required,
    step,
    min,
    max,
    suffix,
    hint,
    placeholder,
    readOnly,
}: NumberFieldProps) {
    const { data, setData, errors } = useSectionForm();
    const id = useId();
    const raw = data[name];
    const value = raw == null ? '' : String(raw);
    const error = errors[name];

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const v = e.target.value;
        setData(name, v === '' ? null : Number(v));
    };

    const control = (
        <InputGroupInput
            id={id}
            type="number"
            value={value}
            onChange={handleChange}
            step={step}
            min={min}
            max={max}
            placeholder={placeholder}
            readOnly={readOnly}
            aria-invalid={!!error}
        />
    );

    return (
        <Field data-invalid={!!error}>
            <FieldLabel htmlFor={id}>
                {label}
                {required && (
                    <span className="ml-0.5 text-destructive">*</span>
                )}
            </FieldLabel>

            {suffix ? (
                <InputGroup
                    className={cn(
                        readOnly && 'cursor-default bg-muted/50',
                    )}
                >
                    {control}
                    <InputGroupAddon align="inline-end">
                        <InputGroupText>{suffix}</InputGroupText>
                    </InputGroupAddon>
                </InputGroup>
            ) : (
                <Input
                    id={id}
                    type="number"
                    value={value}
                    onChange={handleChange}
                    step={step}
                    min={min}
                    max={max}
                    placeholder={placeholder}
                    readOnly={readOnly}
                    aria-invalid={!!error}
                    className={cn(readOnly && 'cursor-default bg-muted/50')}
                />
            )}

            {error ? (
                <FieldError>{error}</FieldError>
            ) : hint ? (
                <FieldDescription>{hint}</FieldDescription>
            ) : null}
        </Field>
    );
}