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 RoomFormData = {
    name: string;
    summary: string;
    description: string;
    occupancy: number | string;
    bed_configuration: string;
    nightly_rate: string;
    featured_image: string;
    gallery: string[];
    amenities: string;
    house_rules: string;
    units: string;
    sort_order: number;
    status: boolean;
};

type RoomFormFieldsProps = {
    data: RoomFormData;
    errors: Partial<Record<keyof RoomFormData, string>>;
    setData: (key: string, value: unknown) => void;
    tzsPerUsd: string | null;
    imageInputId?: string;
    galleryInputId?: string;
    statusId?: string;
};

function mediaUrl(path: string): string {
    if (path.startsWith('/') || path.startsWith('http')) {
        return path;
    }

    return `/storage/${path}`;
}

function usdEquivalent(amount: string, tzsPerUsd: string | null): string {
    const rate = Number(tzsPerUsd);
    const value = Number(amount);

    if (!rate || !value) {
        return 'Stored in Tanzanian shillings. The dollar figure uses the current exchange rate.';
    }

    const usd = value / rate;

    return `About USD ${usd.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} at the current rate.`;
}

export function RoomFormFields({
    data,
    errors,
    setData,
    tzsPerUsd,
    imageInputId = 'room-featured',
    galleryInputId = 'room-gallery',
    statusId = 'room-status',
}: RoomFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Room type"
                error={errors.name}
                inputProps={{
                    value: data.name,
                    onChange: (event) => setData('name', event.target.value),
                    required: true,
                }}
            />

            <FormGroup
                as="textarea"
                label="Card summary"
                error={errors.summary}
                inputProps={{
                    value: data.summary,
                    rows: 3,
                    onChange: (event) => setData('summary', event.target.value),
                }}
            />

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

            <FormNumberInput
                label="Occupancy"
                helpText="Maximum guests."
                min={1}
                value={data.occupancy}
                error={errors.occupancy}
                onChange={(value) => setData('occupancy', value)}
            />

            <FormGroup
                label="Bed configuration"
                helpText="For example, 1 King bed."
                error={errors.bed_configuration}
                inputProps={{
                    value: data.bed_configuration,
                    onChange: (event) => setData('bed_configuration', event.target.value),
                }}
            />

            <FormGroup
                label="Nightly rate (TZS)"
                helpText={usdEquivalent(data.nightly_rate, tzsPerUsd)}
                error={errors.nightly_rate}
                inputProps={{
                    value: data.nightly_rate,
                    inputMode: 'decimal',
                    onChange: (event) => setData('nightly_rate', event.target.value),
                    required: true,
                }}
            />

            <FileUploadInput
                label="Featured image (575×420 px recommended)"
                helpText="Cover photo on the room card."
                inputId={imageInputId}
                uploadUrl="/admin/api/room/upload_featured"
                accept="image/jpeg,image/png,image/jpg,image/webp"
                previewUrl={data.featured_image ? mediaUrl(data.featured_image) : ''}
                previewType="image"
                error={errors.featured_image}
                onSuccess={(filename) => setData('featured_image', filename)}
            />

            <MultiFileUploadInput
                label="Gallery (830×630 px recommended)"
                helpText="Photos on the room details page. Up to 12."
                inputId={galleryInputId}
                uploadUrl="/admin/api/room/upload_gallery"
                paths={data.gallery}
                error={errors.gallery}
                onChange={(paths) => setData('gallery', paths)}
            />

            <FormGroup
                as="textarea"
                label="Amenities"
                helpText="One amenity per line. Add an icon after a pipe, for example Wi-Fi|fa-solid fa-wifi."
                error={errors.amenities}
                inputProps={{
                    value: data.amenities,
                    rows: 5,
                    onChange: (event) => setData('amenities', event.target.value),
                }}
            />

            <FormGroup
                as="textarea"
                label="House rules"
                helpText="One rule per line."
                error={errors.house_rules}
                inputProps={{
                    value: data.house_rules,
                    rows: 5,
                    onChange: (event) => setData('house_rules', event.target.value),
                }}
            />

            <FormGroup
                as="textarea"
                label="Room numbers"
                helpText="One room per line: number, floor. For example, 101, 1."
                error={errors.units}
                inputProps={{
                    value: data.units,
                    rows: 4,
                    onChange: (event) => setData('units', event.target.value),
                }}
            />

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

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