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

export type ServicePageProcessStep = {
    step: string;
    title: string;
    description: string;
    image: string;
};

type ServicePageProcessStepsFieldsProps = {
    steps: ServicePageProcessStep[];
    errors: Partial<
        Record<
            | 'process_steps'
            | `process_steps.${number}.step`
            | `process_steps.${number}.title`
            | `process_steps.${number}.description`
            | `process_steps.${number}.image`,
            string
        >
    >;
    onChangeStep: (index: number, field: keyof ServicePageProcessStep, value: string) => void;
};

const stepLabels = ['Step 1', 'Step 2', 'Step 3', 'Step 4'] as const;

export function ServicePageProcessStepsFields({ steps, errors, onChangeStep }: ServicePageProcessStepsFieldsProps) {
    return (
        <div className="mt-2">
            <p className="mb-4 text-sm font-semibold text-gray-700 dark:text-white">Process steps</p>

            {steps.map((step, index) => (
                <div
                    key={stepLabels[index]}
                    className={index < steps.length - 1 ? 'mb-6 border-b border-gray-200 pb-6 dark:border-white/10' : 'mb-2'}
                >
                    <p className="mb-4 text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-white/70">
                        {stepLabels[index]}
                    </p>

                    <FormGroup
                        label="Step label"
                        helpText="e.g. Step 01"
                        error={errors[`process_steps.${index}.step` as keyof typeof errors] ?? (index === 0 ? errors.process_steps : undefined)}
                        inputProps={{
                            value: step.step,
                            onChange: (event) => onChangeStep(index, 'step', event.target.value),
                            required: true,
                        }}
                    />

                    <FormGroup
                        label="Title"
                        error={errors[`process_steps.${index}.title` as keyof typeof errors]}
                        inputProps={{
                            value: step.title,
                            onChange: (event) => onChangeStep(index, 'title', event.target.value),
                            required: true,
                        }}
                    />

                    <FormGroup
                        as="textarea"
                        label="Description"
                        error={errors[`process_steps.${index}.description` as keyof typeof errors]}
                        inputProps={{
                            value: step.description,
                            rows: 3,
                            onChange: (event) => onChangeStep(index, 'description', event.target.value),
                            required: true,
                        }}
                    />

                    <FileUploadInput
                        label="Step image (150×150 px recommended)"
                        inputId={`service-page-process-step-image-${index}`}
                        uploadUrl="/admin/api/sections/service-page/upload_process_step_image"
                        accept="image/jpeg,image/png,image/jpg,image/webp"
                        previewUrl={step.image ? `/storage/${step.image}` : ''}
                        previewType="image"
                        error={errors[`process_steps.${index}.image` as keyof typeof errors]}
                        onSuccess={(filename) => onChangeStep(index, 'image', filename)}
                    />
                </div>
            ))}
        </div>
    );
}