slp-modular-cms/frontend/src/features/offerings/components/OfferingForm.tsx

import { useForm, useWatch } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { useTranslation } from 'react-i18next';
import { Plus, Trash2 } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { FieldError } from '@/components/ui/FieldError';
import { offeringFormSchema, type OfferingFormData } from '../schemas/offering';
import type { OfferingAdminDto } from '../services/types';

interface OfferingFormProps {
    initialValues?: OfferingAdminDto;
    onSubmit: (values: OfferingFormData) => void;
    isSubmitting: boolean;
}

export function OfferingForm({ initialValues, onSubmit, isSubmitting }: OfferingFormProps) {
    const { t } = useTranslation();

    const {
        register,
        control,
        handleSubmit,
        setValue,
        formState: { errors },
    } = useForm<OfferingFormData>({
        resolver: zodResolver(offeringFormSchema),
        mode: 'onTouched',
        defaultValues: initialValues ?? {
            title: '',
            description: '',
            price: '',
            priceNote: '',
            features: [''],
            ctaLabel: '',
            featured: false,
        },
    });

    // useFieldArray requires object-shaped array items — features is a plain string[],
    // so add/remove are handled directly via setValue instead.
    const features = useWatch({ control, name: 'features' });

    function addFeature() {
        setValue('features', [...features, ''], { shouldValidate: true });
    }

    function removeFeature(index: number) {
        setValue('features', features.filter((_, i) => i !== index), { shouldValidate: true });
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)} noValidate className="space-y-4">
            <div className="space-y-2">
                <Label htmlFor="offering-title">{t('offerings.form.titleLabel')}</Label>
                <Input id="offering-title" data-testid="offering-title" aria-invalid={errors.title !== undefined} {...register('title')} />
                {errors.title && <FieldError message={errors.title.message} testId="offering-title-error" />}
            </div>

            <div className="space-y-2">
                <Label htmlFor="offering-description">{t('offerings.form.descriptionLabel')}</Label>
                <textarea
                    id="offering-description"
                    data-testid="offering-description"
                    aria-invalid={errors.description !== undefined}
                    className="flex min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
                    {...register('description')}
                />
                {errors.description && <FieldError message={errors.description.message} testId="offering-description-error" />}
            </div>

            <div className="grid grid-cols-2 gap-4">
                <div className="space-y-2">
                    <Label htmlFor="offering-price">{t('offerings.form.priceLabel')}</Label>
                    <Input id="offering-price" data-testid="offering-price" aria-invalid={errors.price !== undefined} {...register('price')} />
                    {errors.price && <FieldError message={errors.price.message} testId="offering-price-error" />}
                </div>

                <div className="space-y-2">
                    <Label htmlFor="offering-price-note">{t('offerings.form.priceNoteLabel')}</Label>
                    <Input
                        id="offering-price-note"
                        data-testid="offering-price-note"
                        aria-invalid={errors.priceNote !== undefined}
                        {...register('priceNote')}
                    />
                    {errors.priceNote && <FieldError message={errors.priceNote.message} testId="offering-price-note-error" />}
                </div>
            </div>

            <div className="space-y-2">
                <Label>{t('offerings.form.featuresLabel')}</Label>
                {features.map((_, index) => (
                    <div key={index} className="flex items-center gap-2">
                        <Input
                            data-testid={`offering-feature-${index}`}
                            aria-invalid={errors.features?.[index] !== undefined}
                            {...register(`features.${index}` as const)}
                        />
                        <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            data-testid={`offering-feature-${index}-remove`}
                            aria-label={t('offerings.form.removeFeatureButton')}
                            disabled={features.length <= 1}
                            onClick={() => removeFeature(index)}
                        >
                            <Trash2 className="size-4" />
                        </Button>
                    </div>
                ))}
                {errors.features?.message && <FieldError message={errors.features.message} testId="offering-features-error" />}
                <Button
                    type="button"
                    variant="outline"
                    size="sm"
                    data-testid="offering-add-feature"
                    disabled={features.length >= 10}
                    onClick={addFeature}
                >
                    <Plus className="size-4" />
                    {t('offerings.form.addFeatureButton')}
                </Button>
            </div>

            <div className="space-y-2">
                <Label htmlFor="offering-cta-label">{t('offerings.form.ctaLabelLabel')}</Label>
                <Input
                    id="offering-cta-label"
                    data-testid="offering-cta-label"
                    aria-invalid={errors.ctaLabel !== undefined}
                    {...register('ctaLabel')}
                />
                {errors.ctaLabel && <FieldError message={errors.ctaLabel.message} testId="offering-cta-label-error" />}
            </div>

            <div className="flex items-center gap-2">
                <input
                    id="offering-featured"
                    type="checkbox"
                    data-testid="offering-featured"
                    className="size-4 rounded border-input"
                    {...register('featured')}
                />
                <Label htmlFor="offering-featured">{t('offerings.form.featuredLabel')}</Label>
            </div>

            <Button type="submit" disabled={isSubmitting} data-testid="offering-form-submit">
                {isSubmitting ? '…' : t('offerings.form.submitButton')}
            </Button>
        </form>
    );
}