import { BenefitListInput, type BenefitItem } from '@admin/components/ui/forms/benefit-list-input';
import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormSection } from '@admin/components/ui/forms/form-section';
import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';

export type ServiceDetailSectionFormData = {
    header_image: string;
    helper_title: string;
    helper_phone: string;
    helper_email: string;
    cta_image: string;
    service_benefit_title: string;
    service_benefit_summary: string;
    benefits: BenefitItem[];
};

type ServiceDetailSectionFormFieldsProps = {
    data: ServiceDetailSectionFormData;
    errors: Partial<
        Record<
            keyof ServiceDetailSectionFormData | `benefits.${number}.label` | `benefits.${number}.percentage`,
            string
        >
    >;
    setData: (key: string, value: unknown) => void;
};

export function ServiceDetailSectionFormFields({ data, errors, setData }: ServiceDetailSectionFormFieldsProps) {
    return (
        <>
            <FormSection title="Header">
                <FileUploadInput
                    label="Header image (1920×450 px recommended)"
                    inputId="service-detail-header-image"
                    uploadUrl="/admin/api/sections/service-details/upload_header_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.header_image ? `/storage/${data.header_image}` : ''}
                    previewType="image"
                    error={errors.header_image}
                    onSuccess={(filename) => setData('header_image', filename)}
                />
            </FormSection>

            <FormSection title="Service details helpers">
                <FormGroup
                    label="Helper title"
                    helpText="Sidebar heading, e.g. How Can We Help?"
                    error={errors.helper_title}
                    inputProps={{
                        value: data.helper_title,
                        onChange: (event) => setData('helper_title', event.target.value),
                        required: true,
                    }}
                />

                <FormGroup
                    label="Helper phone"
                    error={errors.helper_phone}
                    inputProps={{
                        value: data.helper_phone,
                        onChange: (event) => setData('helper_phone', event.target.value),
                    }}
                />

                <FormGroup
                    label="Helper email"
                    error={errors.helper_email}
                    inputProps={{
                        type: 'email',
                        value: data.helper_email,
                        onChange: (event) => setData('helper_email', event.target.value),
                    }}
                />

                <FileUploadInput
                    label="CTA image (736×601 px recommended)"
                    inputId="service-detail-cta-image"
                    uploadUrl="/admin/api/sections/service-details/upload_cta_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.cta_image ? `/storage/${data.cta_image}` : ''}
                    previewType="image"
                    error={errors.cta_image}
                    onSuccess={(filename) => setData('cta_image', filename)}
                />
            </FormSection>

            <FormSection title="Service benefits">
                <FormGroup
                    label="Service benefit title"
                    error={errors.service_benefit_title}
                    inputProps={{
                        value: data.service_benefit_title,
                        onChange: (event) => setData('service_benefit_title', event.target.value),
                        required: true,
                    }}
                />

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

                <BenefitListInput
                    items={data.benefits}
                    onChange={(items) => setData('benefits', items)}
                    error={errors.benefits}
                />
            </FormSection>
        </>
    );
}