import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';
import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';

type OfferFormFieldsProps = {
    data: {
        title: string;
        description: string;
        image: string;
        price: string;
        expiry_label: string;
        tag: string;
        highlights: string;
        link: string;
        sort_order: number;
        status: boolean;
    };
    errors: Partial<Record<keyof OfferFormFieldsProps['data'], string>>;
    setData: (key: string, value: unknown) => void;
    imageInputId?: string;
    statusId?: string;
};

export function OfferFormFields({
    data,
    errors,
    setData,
    imageInputId = 'offer-image',
    statusId = 'offer-status',
}: OfferFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Title"
                helpText="Offer name shown on the About Us page."
                error={errors.title}
                inputProps={{
                    value: data.title,
                    onChange: (event) => setData('title', event.target.value),
                    required: true,
                }}
            />

            <FileUploadInput
                label="Image (767×767 px recommended)"
                helpText="Square photo used on the offer card."
                inputId={imageInputId}
                uploadUrl="/admin/api/offer/upload_image"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.image ? `/storage/${data.image}` : ''}
                previewType="image"
                error={errors.image}
                onSuccess={(filename) => setData('image', filename)}
            />

            <FormGroup
                as="textarea"
                label="Description"
                error={errors.description}
                inputProps={{
                    value: data.description,
                    rows: 4,
                    onChange: (event) => setData('description', event.target.value),
                }}
            />

            <FormGroup
                label="Tag"
                helpText="Small label above the title. Defaults to Offer."
                error={errors.tag}
                inputProps={{
                    value: data.tag,
                    onChange: (event) => setData('tag', event.target.value),
                }}
            />

            <FormGroup
                label="Price"
                helpText="Optional. Leave blank to hide the price on the card."
                error={errors.price}
                inputProps={{
                    value: data.price,
                    onChange: (event) => setData('price', event.target.value),
                }}
            />

            <FormGroup
                label="Expiry label"
                helpText="Optional. For example, Expiry: 21 Aug."
                error={errors.expiry_label}
                inputProps={{
                    value: data.expiry_label,
                    onChange: (event) => setData('expiry_label', event.target.value),
                }}
            />

            <FormGroup
                as="textarea"
                label="Highlights"
                helpText="One highlight per line. These appear as the checklist on the card."
                error={errors.highlights}
                inputProps={{
                    value: data.highlights,
                    rows: 4,
                    onChange: (event) => setData('highlights', event.target.value),
                }}
            />

            <FormGroup
                label="Link"
                helpText="Where View Offer goes. Use /book or a full web address."
                error={errors.link}
                inputProps={{
                    value: data.link,
                    onChange: (event) => setData('link', event.target.value),
                }}
            />

            <FormNumberInput
                label="Display order"
                helpText="Lower numbers appear first on the About Us page."
                min={0}
                value={data.sort_order}
                error={errors.sort_order}
                required
                onChange={(value) => setData('sort_order', value)}
            />

            <FormSwitch
                id={statusId}
                label="Published"
                checked={data.status}
                onChange={(event) => setData('status', event.target.checked)}
            />
        </>
    );
}