import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormNumberInput } from '@admin/components/ui/forms/form-number-input';
import { FormRadioInInput } from '@admin/components/ui/forms/form-radio-in-input';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';
import { FileUploadInput } from '@admin/components/ui/forms/file-upload-input';

type SliderFormFieldsProps = {
    data: {
        title: string;
        description: string;
        link: string;
        counter_value: string;
        counter_text: string;
        status: boolean;
        sort_order: number;
        image: string;
        video: string;
        media_type: 'image' | 'video';
    };
    errors: Partial<
        Record<
            'title' | 'description' | 'link' | 'counter_value' | 'counter_text' | 'status' | 'sort_order' | 'image' | 'video' | 'media_type',
            string
        >
    >;
    setData: (key: string, value: unknown) => void;
    imageInputId?: string;
    videoInputId?: string;
};

export function SliderFormFields({ data, errors, setData, imageInputId = 'slider-image', videoInputId = 'slider-video' }: SliderFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Title"
                error={errors.title}
                inputProps={{
                    value: data.title,
                    onChange: (event) => setData('title', event.target.value),
                    required: true,
                }}
            />

            <FormRadioInInput
                name="media_type"
                label="Media type"
                value={data.media_type}
                error={errors.media_type}
                options={[
                    { value: 'image', label: 'Image' },
                    { value: 'video', label: 'Video' },
                ]}
                onChange={(type) => {
                    setData('media_type', type);
                    if (type === 'image') {
                        setData('video', '');
                    } else {
                        setData('image', '');
                    }
                }}
            />

            {data.media_type === 'image' ? (
                <FileUploadInput
                    label="Upload image (1920×1000 px recommended)"
                    inputId={imageInputId}
                    uploadUrl="/admin/api/slider/upload_image"
                    accept="image/jpeg,image/png,image/jpg,image/webp"
                    previewUrl={data.image ? `/storage/${data.image}` : ''}
                    previewType="image"
                    error={errors.image}
                    onSuccess={(filename) => {
                        setData('image', filename);
                        setData('video', '');
                    }}
                />
            ) : (
                <FileUploadInput
                    label="Upload video (1920×1000 px recommended)"
                    inputId={videoInputId}
                    uploadUrl="/admin/api/slider/upload_video"
                    accept="video/mp4,video/webm,video/quicktime"
                    previewUrl={data.video ? `/storage/${data.video}` : ''}
                    previewType="video"
                    error={errors.video}
                    onSuccess={(filename) => {
                        setData('video', filename);
                        setData('image', '');
                    }}
                />
            )}

            <FormGroup
                as="textarea"
                label="Description"
                helpText="Optional brief paragraph."
                error={errors.description}
                inputProps={{
                    value: data.description,
                    rows: 4,
                    onChange: (event) => setData('description', event.target.value),
                }}
            />

            <FormGroup
                label="Circle link"
                helpText="Optional URL opened in a new tab when visitors click the logo in the rotating text circle. Leave empty for no link."
                error={errors.link}
                inputProps={{
                    type: 'url',
                    value: data.link,
                    placeholder: 'https://example.com',
                    onChange: (event) => setData('link', event.target.value),
                }}
            />

            <FormGroup
                label="Hero counter value"
                helpText="Optional. Shown in the hero odometer when counter text is also set (e.g. 25)."
                error={errors.counter_value}
                inputProps={{
                    value: data.counter_value,
                    onChange: (event) => setData('counter_value', event.target.value),
                }}
            />

            <FormGroup
                as="textarea"
                label="Hero counter text"
                helpText="Optional. Short line beside the counter. Leave both counter fields empty to hide."
                error={errors.counter_text}
                inputProps={{
                    value: data.counter_text,
                    rows: 3,
                    onChange: (event) => setData('counter_text', event.target.value),
                }}
            />

            <FormNumberInput
                label="Display order"
                helpText="Lower numbers appear first on the homepage hero. Leave empty for 0."
                min={0}
                value={data.sort_order}
                error={errors.sort_order}
                onChange={(value) => setData('sort_order', value)}
            />

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