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';
import {
    ServicePageProcessStepsFields,
    type ServicePageProcessStep,
} from '@admin/pages/sections/service-page/service-page-process-steps-fields';

export type ServicePageSectionFormData = {
    page_title: string;
    intro: string;
    projects_delivered: string;
    clients_satisfied: string;
    statistic_image: string;
    intro_image: string;
    services_marquee: string;
    service_cards_title: string;
    process_eyebrow: string;
    process_title: string;
    process_steps: ServicePageProcessStep[];
    trusted_prefix: string;
    trusted_count: string;
    trusted_suffix: string;
    faq_title: string;
    faq_cta_title: string;
    faq_cta_body: string;
    faq_cta_button: string;
};

type ServicePageSectionFormFieldsProps = {
    data: ServicePageSectionFormData;
    errors: Partial<
        Record<
            | keyof ServicePageSectionFormData
            | 'process_steps'
            | `process_steps.${number}.step`
            | `process_steps.${number}.title`
            | `process_steps.${number}.description`
            | `process_steps.${number}.image`,
            string
        >
    >;
    setData: (key: string, value: unknown) => void;
};

export function ServicePageSectionFormFields({ data, errors, setData }: ServicePageSectionFormFieldsProps) {
    const updateProcessStep = (index: number, field: keyof ServicePageProcessStep, value: string) => {
        setData(
            'process_steps',
            data.process_steps.map((step, stepIndex) => (stepIndex === index ? { ...step, [field]: value } : step)),
        );
    };

    return (
        <>
            <FormSection title="Page intro">
                <FormGroup
                    label="Page title"
                    error={errors.page_title}
                    inputProps={{
                        value: data.page_title,
                        onChange: (event) => setData('page_title', event.target.value),
                        required: true,
                    }}
                />

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

                <FormGroup
                    label="Projects delivered"
                    helpText="Number shown in the intro stats block."
                    error={errors.projects_delivered}
                    inputProps={{
                        value: data.projects_delivered,
                        onChange: (event) => setData('projects_delivered', event.target.value),
                        required: true,
                    }}
                />

                <FormGroup
                    label="Clients satisfied"
                    helpText="Number shown in the intro stats block."
                    error={errors.clients_satisfied}
                    inputProps={{
                        value: data.clients_satisfied,
                        onChange: (event) => setData('clients_satisfied', event.target.value),
                        required: true,
                    }}
                />

                <FileUploadInput
                    label="Intro image (856×365 px recommended)"
                    inputId="service-page-intro-image"
                    uploadUrl="/admin/api/sections/service-page/upload_intro_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.intro_image ? `/storage/${data.intro_image}` : ''}
                    previewType="image"
                    error={errors.intro_image}
                    onSuccess={(filename) => setData('intro_image', filename)}
                />

                <FileUploadInput
                    label="Statistic image (385×330 px recommended)"
                    inputId="service-page-statistic-image"
                    uploadUrl="/admin/api/sections/service-page/upload_statistic_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.statistic_image ? `/storage/${data.statistic_image}` : ''}
                    previewType="image"
                    error={errors.statistic_image}
                    onSuccess={(filename) => setData('statistic_image', filename)}
                />
            </FormSection>

            <FormSection title="Marquee & service cards">
                <FormGroup
                    label="Services marquee"
                    helpText="Comma-separated labels for the scrolling ticker (include * suffix if desired)."
                    error={errors.services_marquee}
                    inputProps={{
                        as: 'textarea',
                        rows: 3,
                        value: data.services_marquee,
                        onChange: (event) => setData('services_marquee', event.target.value),
                        required: true,
                    }}
                />

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

            <FormSection title="How we work">
                <FormGroup
                    label="Eyebrow"
                    error={errors.process_eyebrow}
                    inputProps={{
                        value: data.process_eyebrow,
                        onChange: (event) => setData('process_eyebrow', event.target.value),
                        required: true,
                    }}
                />

                <FormGroup
                    label="Title"
                    error={errors.process_title}
                    inputProps={{
                        value: data.process_title,
                        onChange: (event) => setData('process_title', event.target.value),
                        required: true,
                    }}
                />

                <ServicePageProcessStepsFields steps={data.process_steps} errors={errors} onChangeStep={updateProcessStep} />

                <FormGroup
                    label="Trusted by — prefix"
                    error={errors.trusted_prefix}
                    inputProps={{
                        value: data.trusted_prefix,
                        onChange: (event) => setData('trusted_prefix', event.target.value),
                        required: true,
                    }}
                />

                <FormGroup
                    label="Trusted by — count"
                    helpText="Digits only (used by the odometer animation)."
                    error={errors.trusted_count}
                    inputProps={{
                        value: data.trusted_count,
                        onChange: (event) => setData('trusted_count', event.target.value),
                        inputMode: 'numeric',
                        pattern: '[0-9]*',
                        required: true,
                    }}
                />

                <FormGroup
                    label="Trusted by — suffix"
                    error={errors.trusted_suffix}
                    inputProps={{
                        value: data.trusted_suffix,
                        onChange: (event) => setData('trusted_suffix', event.target.value),
                        required: true,
                    }}
                />
            </FormSection>

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

                <FormGroup
                    label="CTA title"
                    error={errors.faq_cta_title}
                    inputProps={{
                        value: data.faq_cta_title,
                        onChange: (event) => setData('faq_cta_title', event.target.value),
                        required: true,
                    }}
                />

                <FormGroup
                    label="CTA body"
                    error={errors.faq_cta_body}
                    inputProps={{
                        as: 'textarea',
                        rows: 3,
                        value: data.faq_cta_body,
                        onChange: (event) => setData('faq_cta_body', event.target.value),
                        required: true,
                    }}
                />

                <FormGroup
                    label="CTA button label"
                    helpText="Links to the contact page."
                    error={errors.faq_cta_button}
                    inputProps={{
                        value: data.faq_cta_button,
                        onChange: (event) => setData('faq_cta_button', event.target.value),
                        required: true,
                    }}
                />
            </FormSection>
        </>
    );
}