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

type AboutImageFieldsProps = {
    data: {
        about_image: string;
        about_image_secondary: string;
        breadcrumb_image: string;
        video_image: string;
        video_url: string;
    };
    errors: Partial<Record<keyof AboutImageFieldsProps['data'], string>>;
    setData: (key: string, value: unknown) => void;
};

export function AboutImageFields({ data, errors, setData }: AboutImageFieldsProps) {
    return (
        <FormSection title="About page images">
            <FileUploadInput
                label="About photo (767×767 px recommended)"
                helpText="The photo under the heading on the home page."
                inputId="about-us-image"
                uploadUrl="/admin/api/about/upload_about_image?slot=primary"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.about_image ? `/storage/${data.about_image}` : ''}
                previewType="image"
                error={errors.about_image}
                onSuccess={(filename) => setData('about_image', filename)}
            />

            <FileUploadInput
                label="Second about photo (767×520 px recommended)"
                helpText="The photo above the tabs on the home page."
                inputId="about-us-image-secondary"
                uploadUrl="/admin/api/about/upload_about_image?slot=secondary"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.about_image_secondary ? `/storage/${data.about_image_secondary}` : ''}
                previewType="image"
                error={errors.about_image_secondary}
                onSuccess={(filename) => setData('about_image_secondary', filename)}
            />

            <FileUploadInput
                label="Breadcrumb background (1920×495 px recommended)"
                helpText="The wide image behind the About Us page title."
                inputId="about-breadcrumb-image"
                uploadUrl="/admin/api/about/upload_about_image?slot=breadcrumb"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.breadcrumb_image ? `/storage/${data.breadcrumb_image}` : ''}
                previewType="image"
                error={errors.breadcrumb_image}
                onSuccess={(filename) => setData('breadcrumb_image', filename)}
            />

            <FileUploadInput
                label="Video background (1920×1080 px recommended)"
                helpText="The full-width image behind the play button."
                inputId="about-video-image"
                uploadUrl="/admin/api/about/upload_about_image?slot=video"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.video_image ? `/storage/${data.video_image}` : ''}
                previewType="image"
                error={errors.video_image}
                onSuccess={(filename) => setData('video_image', filename)}
            />
            <FormGroup
                label="Play button video"
                helpText="YouTube or other video URL opened by the play button."
                error={errors.video_url}
                inputProps={{
                    type: 'url',
                    value: data.video_url,
                    placeholder: 'https://www.youtube.com/watch?v=…',
                    onChange: (event) => setData('video_url', event.target.value),
                }}
            />
        </FormSection>
    );
}