import { useForm } from '@inertiajs/react'
import { toast } from 'sonner'
import { Button } from '@ui/components/ui/button'
import { Label } from '@ui/components/ui/label'
import { Checkbox } from '@ui/components/ui/checkbox'
import { Textarea } from '@ui/components/ui/textarea'
import { Input } from '@ui/components/ui/input'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'

interface Option {
    id: number
    code: string
    name: string
}

interface CalculationItem {
    id: number
    sample_type_id: number
    quantity?: number | null
    sample_pickup_duration_unit?: 'day' | 'hour_minute' | null
    sample_pickup_duration_value?: number | null
    factor_x?: number | null
    factor_x_duration_minutes?: number | null
    moving_location_duration_minutes?: number | null
    notes?: string | null
    is_active: boolean
}

interface Props {
    item?: CalculationItem
    sampleTypeOptions: Option[]
    onSuccess: () => void
    onCancel: () => void
}

export function SampleCollectionCalculationForm({ item, sampleTypeOptions, onSuccess, onCancel }: Props) {
    const toTimeInput = (minutes?: number | null): string => {
        if (minutes == null || minutes <= 0) {
            return ''
        }

        const h = String(Math.floor(minutes / 60)).padStart(2, '0')
        const m = String(minutes % 60).padStart(2, '0')
        return `${h}:${m}`
    }

    const fromTimeInput = (value: string): number | null => {
        if (!value) {
            return null
        }

        const [hh, mm] = value.split(':')
        const h = Number(hh)
        const m = Number(mm)

        if (!Number.isFinite(h) || !Number.isFinite(m)) {
            return null
        }

        return (h * 60) + m
    }

    const { data, setData, post, put, processing, errors } = useForm({
        sample_type_id: item?.sample_type_id ? String(item.sample_type_id) : '',
        quantity: item?.quantity != null ? String(item.quantity) : '',
        sample_pickup_duration_unit: item?.sample_pickup_duration_unit ?? 'day',
        sample_pickup_duration_day_value:
            item?.sample_pickup_duration_unit === 'day' && item?.sample_pickup_duration_value != null
                ? String(item.sample_pickup_duration_value)
                : '',
        sample_pickup_duration_time_value:
            item?.sample_pickup_duration_unit === 'hour_minute'
                ? toTimeInput(item?.sample_pickup_duration_value)
                : '',
        factor_x: item?.factor_x != null ? String(item.factor_x) : '',
        factor_x_duration_time: toTimeInput(item?.factor_x_duration_minutes),
        moving_location_duration_time: toTimeInput(item?.moving_location_duration_minutes),
        notes: item?.notes ?? '',
        is_active: item?.is_active ?? true,
    })

    function submit(e: React.FormEvent) {
        e.preventDefault()
        const path = item ? `/master-data/sample-collection-calculations/${item.id}` : '/master-data/sample-collection-calculations'
        const method = item ? put : post
        const pickupDurationValue = data.sample_pickup_duration_unit === 'day'
            ? (data.sample_pickup_duration_day_value ? Number(data.sample_pickup_duration_day_value) : null)
            : fromTimeInput(data.sample_pickup_duration_time_value)

        method(path, {
            data: {
                sample_type_id: Number(data.sample_type_id),
                quantity: data.quantity ? Number(data.quantity) : null,
                sample_pickup_duration_unit: data.sample_pickup_duration_unit,
                sample_pickup_duration_value: pickupDurationValue,
                factor_x: data.factor_x ? Number(data.factor_x) : null,
                factor_x_duration_minutes: fromTimeInput(data.factor_x_duration_time),
                moving_location_duration_minutes: fromTimeInput(data.moving_location_duration_time),
                notes: data.notes || null,
                is_active: data.is_active,
            },
            onSuccess: () => {
                toast.success(item ? 'Kalkulasi ambil sampel diperbarui.' : 'Kalkulasi ambil sampel ditambahkan.')
                onSuccess()
            },
            onError: (bag) => toast.error(Object.values(bag)[0] ?? 'Terjadi kesalahan.'),
        })
    }

    return (
        <form onSubmit={submit} className='space-y-4'>
            <div className='space-y-1.5'>
                <Label>Jenis Sampel *</Label>
                <ComboboxDropdown
                    value={data.sample_type_id || undefined}
                    onValueChange={(value) => setData('sample_type_id', value ?? '')}
                    placeholder='Pilih sample type...'
                    options={sampleTypeOptions.map((o) => ({ value: String(o.id), label: `${o.code} - ${o.name}` }))}
                    searchPlaceholder='Cari sample type...'
                    emptyText='Sample type tidak ditemukan.'
                />
                {errors.sample_type_id && <p className='text-xs text-destructive'>{errors.sample_type_id}</p>}
            </div>
            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
                <div className='space-y-1.5'>
                    <Label>Jumlah</Label>
                    <Input type='number' min='0' step='0.01' value={data.quantity} onChange={(e) => setData('quantity', e.target.value)} />
                    {errors.quantity && <p className='text-xs text-destructive'>{errors.quantity}</p>}
                </div>
                <div className='space-y-1.5'>
                    <Label>Durasi Pengambilan Sampel *</Label>
                    <div className='flex items-center gap-2'>
                        <select
                            className='h-9 rounded-md border border-input bg-transparent px-3 py-1 text-sm'
                            value={data.sample_pickup_duration_unit}
                            onChange={(e) => setData('sample_pickup_duration_unit', e.target.value as 'day' | 'hour_minute')}
                        >
                            <option value='day'>Hari</option>
                            <option value='hour_minute'>Jam:Menit</option>
                        </select>
                        {data.sample_pickup_duration_unit === 'day' ? (
                            <Input
                                type='number'
                                min='1'
                                step='1'
                                value={data.sample_pickup_duration_day_value}
                                onChange={(e) => setData('sample_pickup_duration_day_value', e.target.value)}
                                placeholder='Jumlah hari'
                            />
                        ) : (
                            <Input
                                type='time'
                                step={60}
                                value={data.sample_pickup_duration_time_value}
                                onChange={(e) => setData('sample_pickup_duration_time_value', e.target.value)}
                            />
                        )}
                        <Button
                            type='button'
                            variant='ghost'
                            size='icon'
                            className='h-8 w-8'
                            onClick={() => {
                                setData('sample_pickup_duration_day_value', '')
                                setData('sample_pickup_duration_time_value', '')
                            }}
                        >
                            x
                        </Button>
                    </div>
                    {errors.sample_pickup_duration_unit && <p className='text-xs text-destructive'>{errors.sample_pickup_duration_unit}</p>}
                    {errors.sample_pickup_duration_value && <p className='text-xs text-destructive'>{errors.sample_pickup_duration_value}</p>}
                </div>
            </div>
            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
                <div className='space-y-1.5'>
                    <Label>Faktor X</Label>
                    <Input
                        type='number'
                        min='0'
                        step='0.01'
                        value={data.factor_x}
                        onChange={(e) => setData('factor_x', e.target.value)}
                    />
                    {errors.factor_x && <p className='text-xs text-destructive'>{errors.factor_x}</p>}
                </div>
                <div className='space-y-1.5'>
                    <Label>Durasi Faktor X</Label>
                    <div className='flex items-center gap-2'>
                        <Input
                            type='time'
                            step={60}
                            value={data.factor_x_duration_time}
                            onChange={(e) => setData('factor_x_duration_time', e.target.value)}
                        />
                        <Button
                            type='button'
                            variant='ghost'
                            size='icon'
                            className='h-8 w-8'
                            onClick={() => setData('factor_x_duration_time', '')}
                        >
                            x
                        </Button>
                    </div>
                    {errors.factor_x_duration_minutes && <p className='text-xs text-destructive'>{errors.factor_x_duration_minutes}</p>}
                </div>
            </div>
            <div className='space-y-1.5'>
                <Label>Durasi Moving Lokasi *</Label>
                <div className='flex items-center gap-2'>
                    <Input
                        type='time'
                        step={60}
                        value={data.moving_location_duration_time}
                        onChange={(e) => setData('moving_location_duration_time', e.target.value)}
                    />
                    <Button
                        type='button'
                        variant='ghost'
                        size='icon'
                        className='h-8 w-8'
                        onClick={() => setData('moving_location_duration_time', '')}
                    >
                        x
                    </Button>
                </div>
                {errors.moving_location_duration_minutes && <p className='text-xs text-destructive'>{errors.moving_location_duration_minutes}</p>}
            </div>
            <div className='space-y-1.5'>
                <Label>Catatan</Label>
                <Textarea value={data.notes} onChange={(e) => setData('notes', e.target.value)} rows={3} />
                {errors.notes && <p className='text-xs text-destructive'>{errors.notes}</p>}
            </div>
            <div className='flex items-center gap-2'>
                <Checkbox checked={data.is_active} onCheckedChange={(v) => setData('is_active', !!v)} id='scc-active' />
                <Label htmlFor='scc-active' className='cursor-pointer font-normal'>Aktif</Label>
            </div>
            <div className='flex justify-end gap-2'>
                <Button type='button' variant='outline' onClick={onCancel} disabled={processing}>Batal</Button>
                <Button type='submit' disabled={processing}>{processing ? 'Menyimpan...' : 'Simpan'}</Button>
            </div>
        </form>
    )
}