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

type UpdateFormFieldsProps = {
    data: {
        title: string;
        featured_image: string;
        tags: string;
        content: string;
        status: boolean;
    };
    errors: Partial<Record<'title' | 'featured_image' | 'tags' | 'content' | 'status', string>>;
    setData: (key: string, value: unknown) => void;
    featuredInputId?: string;
    contentEditorId?: string;
};

export function UpdateFormFields({
    data,
    errors,
    setData,
    featuredInputId = 'update-featured-image',
    contentEditorId = 'update-content',
}: UpdateFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Title"
                error={errors.title}
                inputProps={{
                    value: data.title,
                    onChange: (event) => setData('title', event.target.value),
                    required: true,
                }}
            />

            <FileUploadInput
                label="Featured image (1296×900 px recommended)"
                inputId={featuredInputId}
                uploadUrl="/admin/api/update/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)}
            />

            <FormGroup
                label="Tags"
                helpText="Comma-separated, e.g. Cloud, Security, Software."
                error={errors.tags}
                inputProps={{
                    value: data.tags,
                    onChange: (event) => setData('tags', event.target.value),
                    placeholder: 'Cloud, Security',
                }}
            />

            <WysiwygEditor
                id={contentEditorId}
                label="Content"
                value={data.content}
                error={errors.content}
                helpText="Full article body shown on the update detail page."
                onChange={(html) => setData('content', html)}
            />

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