import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormSection } from '@admin/components/ui/forms/form-section';
import { FormSelect } from '@admin/components/ui/forms/form-select';
import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';
import { statisticCounterSymbolOptions } from '@admin/lib/statistic-counter-symbols';
import { HomeProcessStepsFields, type ProcessStep } from '@admin/pages/sections/home/home-process-steps-fields';

export type HomeSectionFormData = {
    about_heading: string;
    counter_number: string;
    counter_symbol: string;
    counter_text: string;
    counter_large_image: string;
    counter_small_image: string;
    services_eyebrow: string;
    services_title: string;
    process_heading: string;
    process_title: string;
    process_summary: string;
    process_steps: ProcessStep[];
    process_image: string;
    testimonials_title: string;
    contact_us_title: string;
};

type HomeSectionFormFieldsProps = {
    data: HomeSectionFormData;
    errors: Partial<Record<keyof HomeSectionFormData | `process_steps.${number}.heading` | `process_steps.${number}.text`, string>>;
    setData: (key: string, value: unknown) => void;
};

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

    return (
        <>
            <FormSection title="About & counter">
                <FormGroup
                    label="About heading"
                    helpText="Eyebrow label above the about section on the home page."
                    error={errors.about_heading}
                    inputProps={{
                        value: data.about_heading,
                        onChange: (event) => setData('about_heading', event.target.value),
                        required: true,
                    }}
                />

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

                <FormSelect
                    label="Counter symbol"
                    value={data.counter_symbol}
                    options={statisticCounterSymbolOptions}
                    placeholder="No symbol"
                    error={errors.counter_symbol}
                    onChange={(value) => setData('counter_symbol', value)}
                />

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

                <FileUploadInput
                    label="Counter large image (551×414 px recommended)"
                    inputId="home-counter-large-image"
                    uploadUrl="/admin/api/sections/home/upload_counter_large_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.counter_large_image ? `/storage/${data.counter_large_image}` : ''}
                    previewType="image"
                    error={errors.counter_large_image}
                    onSuccess={(filename) => setData('counter_large_image', filename)}
                />

                <FileUploadInput
                    label="Counter small image (551×567 px recommended)"
                    inputId="home-counter-small-image"
                    uploadUrl="/admin/api/sections/home/upload_counter_small_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.counter_small_image ? `/storage/${data.counter_small_image}` : ''}
                    previewType="image"
                    error={errors.counter_small_image}
                    onSuccess={(filename) => setData('counter_small_image', filename)}
                />
            </FormSection>

            <FormSection title="Services header">
                <FormGroup
                    label="Eyebrow"
                    helpText="Small label above the services heading."
                    error={errors.services_eyebrow}
                    inputProps={{
                        value: data.services_eyebrow,
                        onChange: (event) => setData('services_eyebrow', event.target.value),
                    }}
                />

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

            <FormSection title="Our process">
                <FormGroup
                    label="Heading"
                    helpText="How it's done — eyebrow above the process section."
                    error={errors.process_heading}
                    inputProps={{
                        value: data.process_heading,
                        onChange: (event) => setData('process_heading', event.target.value),
                        required: true,
                    }}
                />

                <FormGroup
                    label="Title"
                    helpText="Main process section title, e.g. Solution Process."
                    error={errors.process_title}
                    inputProps={{
                        value: data.process_title,
                        onChange: (event) => setData('process_title', event.target.value),
                        required: true,
                    }}
                />

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

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

                <FileUploadInput
                    label="Process image (696×473 px recommended)"
                    inputId="home-process-image"
                    uploadUrl="/admin/api/sections/home/upload_process_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.process_image ? `/storage/${data.process_image}` : ''}
                    previewType="image"
                    error={errors.process_image}
                    onSuccess={(filename) => setData('process_image', filename)}
                />
            </FormSection>

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

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