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 { FormSwitch } from '@admin/components/ui/forms/form-switch';
import { MultiFileUploadInput } from '@admin/components/ui/forms/multi-file-upload-input';

type PortfolioFormFieldsProps = {
    data: {
        title: string;
        tag: string;
        featured_image: string;
        cover_image: string;
        gallery: string[];
        project_link: string;
        description: string;
        sort_order: number;
        status: boolean;
    };
    errors: Partial<
        Record<
            | 'title'
            | 'tag'
            | 'featured_image'
            | 'cover_image'
            | 'gallery'
            | 'project_link'
            | 'description'
            | 'sort_order'
            | 'status',
            string
        >
    >;
    setData: (key: string, value: unknown) => void;
    featuredInputId?: string;
    coverInputId?: string;
    galleryInputId?: string;
};

export function PortfolioFormFields({
    data,
    errors,
    setData,
    featuredInputId = 'portfolio-featured-image',
    coverInputId = 'portfolio-cover-image',
    galleryInputId = 'portfolio-gallery',
}: PortfolioFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Title"
                error={errors.title}
                inputProps={{
                    value: data.title,
                    onChange: (event) => setData('title', event.target.value),
                    required: true,
                }}
            />

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

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

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

            <FormGroup
                label="Project link"
                helpText="Optional URL to the live project or case study."
                error={errors.project_link}
                inputProps={{
                    type: 'url',
                    value: data.project_link,
                    placeholder: 'https://example.com',
                    onChange: (event) => setData('project_link', event.target.value),
                }}
            />

            <FormGroup
                as="textarea"
                label="Description"
                helpText="Project overview shown on the portfolio detail page."
                error={errors.description}
                inputProps={{
                    value: data.description,
                    rows: 6,
                    onChange: (event) => setData('description', event.target.value),
                    required: true,
                }}
            />

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

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