import { useForm } from '@inertiajs/react'
import { toast } from 'sonner'
import { Button } from '@ui/components/ui/button'
import { Input } from '@ui/components/ui/input'
import { Label } from '@ui/components/ui/label'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { type QualityStandard } from '@/types/glims'

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

interface UnitOption {
    id: number
    name: string
}

interface QualityStandardParamFormProps {
    qualityStandard: QualityStandard
    parameterOptions: OptionSimple[]
    unitOptions: UnitOption[]
    param?: NonNullable<QualityStandard['params']>[number]
    onSuccess: () => void
    onCancel: () => void
}

const COMPARISON_OPTIONS = [
    { value: '<', label: 'Kurang dari (<)' },
    { value: '<=', label: 'Kurang dari / sama dengan (<=)' },
    { value: '>', label: 'Lebih dari (>)' },
    { value: '>=', label: 'Lebih dari / sama dengan (>=)' },
    { value: '=', label: 'Sama dengan (=)' },
    { value: 'range', label: 'Rentang (antara)' },
] as const

function helperTextByOperator(operator: string): string {
    if (operator === 'range') {
        return 'Isi Nilai Minimum dan Nilai Maksimum untuk rentang baku mutu.'
    }

    if (operator === '>' || operator === '>=') {
        return 'Isi Nilai Minimum, Nilai Maksimum boleh dikosongkan.'
    }

    if (operator === '<' || operator === '<=' || operator === '=') {
        return 'Isi Nilai Maksimum, Nilai Minimum boleh dikosongkan.'
    }

    return 'Cara membandingkan hasil uji dengan baku mutu.'
}

export function QualityStandardParamForm({
    qualityStandard,
    parameterOptions,
    unitOptions,
    param,
    onSuccess,
    onCancel,
}: QualityStandardParamFormProps) {
    const { data, setData, post, put, transform, processing, errors } = useForm({
        parameter_id: String(param?.parameter_id ?? ''),
        method_id: param?.method_id ? String(param.method_id) : '',
        unit: param?.unit ?? '',
        min_value: param?.min_value ?? '',
        max_value: param?.max_value ?? '',
        threshold_operator: param?.threshold_operator ?? 'range',
        threshold_display: param?.threshold_display ?? '',
        sort_order: String(param?.sort_order ?? 0),
        description: param?.description ?? '',
    })

    function submit(e: React.FormEvent) {
        e.preventDefault()

        transform((formData) => ({
            ...formData,
            parameter_id: Number(formData.parameter_id),
            method_id: formData.method_id ? Number(formData.method_id) : null,
            unit: formData.unit || null,
            min_value: formData.min_value || null,
            max_value: formData.max_value || null,
            threshold_operator: formData.threshold_operator || null,
            threshold_display: formData.threshold_display || null,
            sort_order: formData.sort_order ? Number(formData.sort_order) : 0,
            description: formData.description || null,
        }))

        const base = `/master-data/quality-standards/${qualityStandard.id}/parameters`

        if (param) {
            put(`${base}/${param.id}`, {
                onSuccess: () => {
                    toast.success('Parameter baku mutu berhasil diperbarui.')
                    onSuccess()
                },
                onError: (errorBag) => toast.error(Object.values(errorBag)[0] ?? 'Terjadi kesalahan.'),
            })
            return
        }

        post(base, {
            onSuccess: () => {
                toast.success('Parameter baku mutu berhasil ditambahkan.')
                onSuccess()
            },
            onError: (errorBag) => toast.error(Object.values(errorBag)[0] ?? 'Terjadi kesalahan.'),
        })
    }

    return (
        <form onSubmit={submit} className='space-y-4'>
            <div className='space-y-4'>
                <div className='space-y-1.5'>
                    <Label htmlFor='qs-param-parameter'>
                        Parameter Uji <span className='text-destructive'>*</span>
                    </Label>
                    <ComboboxDropdown
                        value={data.parameter_id || undefined}
                        onValueChange={(value) => setData('parameter_id', value ?? '')}
                        placeholder='Pilih parameter'
                        options={parameterOptions.map((item) => ({
                            value: String(item.id),
                            label: item.name,
                        }))}
                        searchPlaceholder='Cari parameter...'
                        emptyText='Parameter tidak ditemukan.'
                    />
                    <p className='text-xs text-muted-foreground'>Pilih parameter yang akan ditambahkan ke baku mutu</p>
                    {errors.parameter_id && <p className='text-xs text-destructive'>{errors.parameter_id}</p>}
                </div>

                <div className='space-y-1.5'>
                    <Label htmlFor='qs-param-operator'>Tipe Perbandingan</Label>
                    <ComboboxDropdown
                        value={data.threshold_operator || undefined}
                        onValueChange={(value) => setData('threshold_operator', value ?? '')}
                        placeholder='Pilih tipe perbandingan...'
                        options={COMPARISON_OPTIONS.map((item) => ({ value: item.value, label: item.label }))}
                        searchPlaceholder='Cari tipe...'
                        emptyText='Tipe perbandingan tidak ditemukan.'
                    />
                    <p className='text-xs text-muted-foreground'>{helperTextByOperator(data.threshold_operator)}</p>
                    {errors.threshold_operator && <p className='text-xs text-destructive'>{errors.threshold_operator}</p>}
                </div>

                <div className='space-y-1.5'>
                    <Label htmlFor='qs-param-min'>Nilai Minimum</Label>
                    <Input
                        id='qs-param-min'
                        type='number'
                        step='0.0001'
                        value={data.min_value}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setData('min_value', e.target.value)}
                        placeholder='Contoh: 6.5'
                    />
                    {errors.min_value && <p className='text-xs text-destructive'>{errors.min_value}</p>}
                </div>

                <div className='space-y-1.5'>
                    <Label htmlFor='qs-param-max'>Nilai Maksimum</Label>
                    <Input
                        id='qs-param-max'
                        type='number'
                        step='0.0001'
                        value={data.max_value}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setData('max_value', e.target.value)}
                        placeholder='Contoh: 8.5'
                    />
                    {errors.max_value && <p className='text-xs text-destructive'>{errors.max_value}</p>}
                </div>

                <div className='space-y-1.5'>
                    <Label htmlFor='qs-param-unit'>Satuan</Label>
                    <ComboboxDropdown
                        value={data.unit || undefined}
                        onValueChange={(value) => setData('unit', value ?? '')}
                        placeholder='Pilih satuan...'
                        options={unitOptions.map((item) => ({ value: item.name, label: item.name }))}
                        searchPlaceholder='Cari satuan...'
                        emptyText='Satuan tidak ditemukan.'
                    />
                    <p className='text-xs text-muted-foreground'>Satuan pengukuran parameter</p>
                    {errors.unit && <p className='text-xs text-destructive'>{errors.unit}</p>}
                </div>

                <input type='hidden' value={data.method_id} readOnly />
                <input type='hidden' value={data.threshold_display} readOnly />
                <input type='hidden' value={data.sort_order} readOnly />
                <input type='hidden' value={data.description} readOnly />
            </div>

            <div className='flex justify-end gap-2 pt-2'>
                <Button type='button' variant='outline' onClick={onCancel} disabled={processing}>
                    Batal
                </Button>
                <Button type='submit' disabled={processing}>
                    {processing ? 'Menyimpan...' : param ? 'Simpan Perubahan' : 'Simpan'}
                </Button>
            </div>
        </form>
    )
}