import { FeatureListInput } from '@admin/components/ui/forms/feature-list-input';
import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';
import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { formHelpClassName } from '@admin/components/ui/field-styles';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';
import { cn } from '@admin/lib/utils';
import { MultiFileUploadInput } from '@admin/components/ui/forms/multi-file-upload-input';

type ServiceFormFieldsProps = {
    data: {
        name: string;
        tag: string;
        icon: string;
        is_featured: boolean;
        featured_image: string;
        cover_image: string;
        summary: string;
        description: string;
        feature_list: string[];
        gallery: string[];
        brochure: string;
        status: boolean;
        sort_order: number;
    };
    errors: Partial<
        Record<
            | 'name'
            | 'tag'
            | 'icon'
            | 'is_featured'
            | 'featured_image'
            | 'cover_image'
            | 'summary'
            | 'description'
            | 'feature_list'
            | 'gallery'
            | 'brochure'
            | 'status'
            | 'sort_order',
            string
        >
    >;
    setData: (key: string, value: unknown) => void;
    iconInputId?: string;
    featuredInputId?: string;
    coverInputId?: string;
    galleryInputId?: string;
    brochureInputId?: string;
};

export function ServiceFormFields({
    data,
    errors,
    setData,
    iconInputId = 'service-icon',
    featuredInputId = 'service-featured-image',
    coverInputId = 'service-cover-image',
    galleryInputId = 'service-gallery',
    brochureInputId = 'service-brochure',
}: ServiceFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Name"
                error={errors.name}
                inputProps={{
                    value: data.name,
                    onChange: (event) => setData('name', event.target.value),
                    required: true,
                }}
            />

            <FormGroup
                label="Tag"
                helpText="Short label shown on cards, e.g. Cloud, Security."
                error={errors.tag}
                inputProps={{
                    value: data.tag,
                    onChange: (event) => setData('tag', event.target.value),
                }}
            />

            <FileUploadInput
                label="Card icon (130×130 px recommended)"
                inputId={iconInputId}
                uploadUrl="/admin/api/service/upload_icon"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.icon ? `/storage/${data.icon}` : ''}
                previewType="image"
                error={errors.icon}
                onSuccess={(filename) => setData('icon', filename)}
            />

            <FormSwitch
                id="service-is-featured"
                label="Featured on services page"
                checked={data.is_featured}
                onChange={(event) => setData('is_featured', event.target.checked)}
            />
            <p className={cn('mb-4 -mt-2', formHelpClassName)}>Highlights this service in featured listings.</p>

            <FileUploadInput
                label="Featured image (551×419 px recommended)"
                inputId={featuredInputId}
                uploadUrl="/admin/api/service/upload_featured_image"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.featured_image ? `/storage/${data.featured_image}` : ''}
                previewType="image"
                error={errors.featured_image}
                onSuccess={(filename) => setData('featured_image', filename)}
            />

            <FileUploadInput
                label="Cover image (856×450 px recommended)"
                inputId={coverInputId}
                uploadUrl="/admin/api/service/upload_cover_image"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.cover_image ? `/storage/${data.cover_image}` : ''}
                previewType="image"
                error={errors.cover_image}
                onSuccess={(filename) => setData('cover_image', filename)}
            />

            <FormGroup
                as="textarea"
                label="Summary"
                helpText="Brief intro shown on listing cards."
                error={errors.summary}
                inputProps={{
                    value: data.summary,
                    rows: 3,
                    onChange: (event) => setData('summary', event.target.value),
                    required: true,
                }}
            />

            <FormGroup
                as="textarea"
                label="Description"
                helpText="Full detail page body copy."
                error={errors.description}
                inputProps={{
                    value: data.description,
                    rows: 6,
                    onChange: (event) => setData('description', event.target.value),
                    required: true,
                }}
            />

            <FeatureListInput
                items={data.feature_list}
                onChange={(items) => setData('feature_list', items)}
                error={errors.feature_list}
            />

            <MultiFileUploadInput
                label="Gallery (551×300 px recommended, optional)"
                inputId={galleryInputId}
                uploadUrl="/admin/api/service/upload_gallery_image"
                paths={data.gallery}
                onChange={(paths) => setData('gallery', paths)}
                error={errors.gallery}
                helpText="Add one or more images. Optional."
            />

            <FileUploadInput
                label="Brochure (PDF, optional)"
                inputId={brochureInputId}
                uploadUrl="/admin/api/service/upload_brochure"
                accept="application/pdf"
                previewUrl={data.brochure ? `/storage/${data.brochure}` : ''}
                previewType="file"
                error={errors.brochure}
                onSuccess={(filename) => setData('brochure', filename)}
            />

            <FormNumberInput
                label="Display order"
                helpText="Lower numbers appear first on the website and in admin lists."
                min={0}
                value={data.sort_order}
                error={errors.sort_order}
                onChange={(value) => setData('sort_order', value)}
            />

            <FormSwitch
                id="service-status"
                label="Active"
                checked={data.status}
                onChange={(event) => setData('status', event.target.checked)}
            />
        </>
    );
}