import { useId } from 'react';
import {
    Field,
    FieldLabel,
} from '@/components/ui/field';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { cn } from '@/lib/utils';
import { useSectionForm } from '../lib/section-form-context';

type BooleanRadioFieldProps = {
    name: string;
    label: string;
    required?: boolean;
    trueLabel?: string;
    falseLabel?: string;
};

export function BooleanRadioField({
    name,
    label,
    required,
    trueLabel = 'Sí',
    falseLabel = 'No',
}: BooleanRadioFieldProps) {
    const { data, setData, errors } = useSectionForm();
    const id = useId();
    const value = data[name];
    const error = errors[name];

    const stringValue =
        value === true ? 'true' : value === false ? 'false' : '';

    return (
        <Field
            orientation="horizontal"
            data-invalid={!!error}
            className="items-center justify-between border-b border-border/60 px-1 py-3 last:border-b-0"
        >
            <FieldLabel htmlFor={id}>
                {label}
                {required && (
                    <span className="ml-0.5 text-destructive">*</span>
                )}
            </FieldLabel>

            <RadioGroup
                id={id}
                value={stringValue}
                onValueChange={(v) => setData(name, v === 'true')}
                className="flex shrink-0 items-center gap-2"
            >
                <Label
                    className={cn(
                        'flex cursor-pointer items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors',
                        stringValue === 'true'
                            ? 'border-primary bg-primary/5 text-primary'
                            : 'text-muted-foreground hover:bg-muted/50',
                    )}
                >
                    <RadioGroupItem value="true" />
                    {trueLabel}
                </Label>
                <Label
                    className={cn(
                        'flex cursor-pointer items-center gap-2 rounded-md border px-3 py-1.5 text-sm transition-colors',
                        stringValue === 'false'
                            ? 'border-primary bg-primary/5 text-primary'
                            : 'text-muted-foreground hover:bg-muted/50',
                    )}
                >
                    <RadioGroupItem value="false" />
                    {falseLabel}
                </Label>
            </RadioGroup>
        </Field>
    );
}