import CompanySelectInput from '@/Components/CompanySelectInput';
import FormInput from '@/Components/FormInput';
import PatientSelectInput from '@/Components/PatientSelectInput';
import SelectInput from '@/Components/SelectInput';
import SidebarForm from '@/Components/SidebarForm';
import TextInput from '@/Components/TextInput';
import { capitalize, t } from '@/lib/utils';
import {
    Company,
    Device,
    FormErrors,
    IntervalUnit,
    SidebarFormBodyProps,
    User,
} from '@/types';
import React from 'react';

interface DeviceEditFormProps {
    device: Device;
    availableTypes: string[];
    children: React.ReactNode;
    availableManufacturers: string[];
    canEdit: boolean;
}

type DeviceEditFormData = {
    manufacturer: string;
    model: string;
    type: string;
    serial_number: string;
    company: Company | null;
    user: User | null;
    sync_alert_after_value: number | null;
    sync_alert_after_unit: IntervalUnit;
};

export default function DeviceEditForm({
    device,
    availableTypes,
    availableManufacturers,
    children: trigger,
    canEdit,
}: DeviceEditFormProps) {
    const initialData = {
        manufacturer: device.manufacturer,
        model: device.model,
        type: device.type,
        serial_number: device.serial_number,
        company: device.company,
        user: device.user ?? null,

        sync_alert_after_value: device.sync_alert_after_value ?? null,
        sync_alert_after_unit: device.sync_alert_after_unit ?? 'minutes',
    };

    const availableTypesOptions = availableTypes.map((type) => ({
        value: type,
        label: t(type),
    }));

    const availableManufacturersOptions = availableManufacturers.map(
        (manufacturer) => ({
            value: manufacturer,
            label: manufacturer,
        }),
    );

    const syncAlertUnitOptions = [
        { value: 'minutes', label: 'Minuti' },
        { value: 'hours', label: 'Ore' },
        { value: 'days', label: 'Giorni' },
    ];

    const Body = (
        bodyProps: Partial<SidebarFormBodyProps<DeviceEditFormData>>,
    ) => {
        const { data, setData, errors, transform } =
            bodyProps as SidebarFormBodyProps<DeviceEditFormData>;
        const formErrors = errors as FormErrors;

        transform((d) => ({
            ...d,
            company_id: d.company ? d.company.id : null,
            user_id: d.user ? d.user.id : null,

            // ✅ normalizza: se value vuoto => null, e se null allora unit => null
            sync_alert_after_value:
                d.sync_alert_after_value === null
                    ? null
                    : parseInt(String(d.sync_alert_after_value)),
            sync_alert_after_unit:
                d.sync_alert_after_value === null
                    ? null
                    : d.sync_alert_after_unit,
        }));

        return (
            <>
                <FormInput
                    label={t('manufacturer')}
                    id="manufacturer"
                    className="mt-8 block w-full"
                    error={errors.manufacturer}
                >
                    <SelectInput
                        value={data.manufacturer}
                        options={availableManufacturersOptions}
                        readOnly={!canEdit}
                        onChange={(value) => setData('manufacturer', value)}
                    />
                </FormInput>

                <FormInput
                    label={t('model')}
                    id="model"
                    className="my-4 block w-full"
                    error={errors.model}
                >
                    <TextInput
                        readOnly={!canEdit}
                        value={data.model}
                        onChange={(e) => setData('model', e.target.value)}
                    />
                </FormInput>

                <FormInput
                    label={t('type')}
                    id="type"
                    className="my-4 block w-full"
                    error={errors.type}
                >
                    <SelectInput
                        options={availableTypesOptions}
                        value={data.type}
                        readOnly={!canEdit}
                        onChange={(value) => setData('type', value)}
                    />
                </FormInput>

                <FormInput
                    label={t('serial number')}
                    id="serial_number"
                    className="my-4 block w-full"
                    error={errors.serial_number}
                >
                    <TextInput
                        readOnly={!canEdit}
                        value={data.serial_number}
                        onChange={(e) =>
                            setData('serial_number', e.target.value)
                        }
                    />
                </FormInput>

                <FormInput
                    label="Azienda"
                    id="company"
                    className="my-4 block w-full"
                    error={errors.company_id}
                >
                    <CompanySelectInput
                        value={data.company}
                        readOnly={!canEdit}
                        onChange={(company) => setData('company', company)}
                    />
                </FormInput>

                <FormInput
                    label={capitalize(t('patient'))}
                    id="user"
                    className="my-4 block w-full"
                    error={formErrors.user_id}
                >
                    <div>
                        <PatientSelectInput
                            value={data.user}
                            readOnly={!canEdit}
                            companyId={data.company?.id ?? null}
                            onChange={(user) => setData('user', user)}
                        />
                        {canEdit && data.user && (
                            <button
                                type="button"
                                className="mt-2 text-sm text-zinc-500 underline"
                                onClick={() => setData('user', null)}
                            >
                                {capitalize(t('unassign'))}
                            </button>
                        )}
                    </div>
                </FormInput>

                {/* soglia alert sync */}
                <div className="mt-8 text-black">
                    <div>Alert se non sincronizza</div>

                    <div className="mt-3 flex items-baseline justify-between gap-4">
                        <FormInput
                            label="Dopo"
                            id="sync_alert_after_value"
                            className="w-full"
                            error={formErrors.sync_alert_after_value}
                        >
                            <TextInput
                                type="number"
                                min={1}
                                readOnly={!canEdit}
                                value={data.sync_alert_after_value ?? ''}
                                onChange={(e) =>
                                    setData(
                                        'sync_alert_after_value',
                                        e.target.value === ''
                                            ? null
                                            : parseInt(e.target.value),
                                    )
                                }
                                placeholder="(vuoto = disabilitato)"
                            />
                        </FormInput>

                        <FormInput
                            label="Unità"
                            id="sync_alert_after_unit"
                            className="w-full"
                            error={formErrors.sync_alert_after_unit}
                        >
                            <SelectInput
                                value={data.sync_alert_after_unit ?? 'minutes'}
                                options={syncAlertUnitOptions}
                                readOnly={
                                    !canEdit || !data.sync_alert_after_value
                                }
                                onChange={(value) =>
                                    setData('sync_alert_after_unit', value)
                                }
                                disabled={
                                    !canEdit || !data.sync_alert_after_value
                                }
                            />
                        </FormInput>
                    </div>
                </div>
            </>
        );
    };

    return (
        <SidebarForm
            title={canEdit ? 'Modifica dispositivo' : 'Dettagli dispositivo'}
            trigger={trigger}
            submitMethod={'put'}
            submitRoute={route('admin-devices.update', { device: device.id })}
            initialData={initialData}
            canSubmit={canEdit}
        >
            <Body />
        </SidebarForm>
    );
}