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 { Textarea } from '@ui/components/ui/textarea'
import { Checkbox } from '@ui/components/ui/checkbox'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { type Parameter } from '@/types/glims'
import ParameterController from '@/actions/App/Modules/MasterData/Infrastructure/Controllers/ParameterController'

interface ParameterFormProps {
    parameter?: Parameter
    categoryOptions: Array<{ id: number; code: string; name: string }>
    onSuccess: () => void
    onCancel: () => void
}

export function ParameterForm({ parameter, categoryOptions, onSuccess, onCancel }: ParameterFormProps) {
    const { data, setData, post, put, processing, errors } = useForm({
        name: parameter?.name ?? '',
        category_id: String(parameter?.category_id ?? ''),
        handling_time: String(parameter?.handling_time ?? ''),
        description: parameter?.description ?? '',
        is_active: parameter?.is_active ?? true,
    })

    function submit(e: React.FormEvent) {
        e.preventDefault()
        if (parameter) {
            put(ParameterController.update(parameter).url, {
                onSuccess: () => { toast.success('Parameter berhasil diperbarui.'); onSuccess() },
                onError: (bag) => toast.error(Object.values(bag)[0] ?? 'Terjadi kesalahan.'),
            })
        } else {
            post(ParameterController.store().url, {
                onSuccess: () => { toast.success('Parameter berhasil ditambahkan.'); onSuccess() },
                onError: (bag) => toast.error(Object.values(bag)[0] ?? 'Terjadi kesalahan.'),
            })
        }
    }

    return (
        <form onSubmit={submit} className='space-y-4'>
            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
                <div className='space-y-1.5'>
                    <Label htmlFor='p-name'>
                        Nama Parameter <span className='text-destructive'>*</span>
                    </Label>
                    <Input
                        id='p-name'
                        value={data.name}
                        onChange={(e) => setData('name', e.target.value)}
                        placeholder='e.g. Biochemical Oxygen Demand'
                    />
                    {errors.name && <p className='text-xs text-destructive'>{errors.name}</p>}
                </div>

                <div className='space-y-1.5'>
                    <Label htmlFor='p-category'>Kategori</Label>
                    <ComboboxDropdown
                        value={data.category_id || undefined}
                        onValueChange={(value) => setData('category_id', value ?? '')}
                        placeholder='Pilih kategori...'
                        options={categoryOptions.map((item) => ({ value: String(item.id), label: `${item.code} - ${item.name}` }))}
                        searchPlaceholder='Cari kategori...'
                        emptyText='Kategori tidak ditemukan.'
                    />
                    {errors.category_id && <p className='text-xs text-destructive'>{errors.category_id}</p>}
                </div>

                <div className='space-y-1.5'>
                    <Label htmlFor='p-time'>Waktu Penanganan (menit)</Label>
                    <Input
                        id='p-time'
                        type='number'
                        min='1'
                        value={data.handling_time}
                        onChange={(e) => setData('handling_time', e.target.value)}
                        placeholder='e.g. 30'
                    />
                    {errors.handling_time && <p className='text-xs text-destructive'>{errors.handling_time}</p>}
                </div>

                <div className='col-span-full space-y-1.5'>
                    <Label htmlFor='p-desc'>Deskripsi</Label>
                    <Textarea
                        id='p-desc'
                        rows={3}
                        value={data.description}
                        onChange={(e) => setData('description', e.target.value)}
                        placeholder='Deskripsi parameter pengujian...'
                    />
                    {errors.description && <p className='text-xs text-destructive'>{errors.description}</p>}
                </div>

                <div className='col-span-full flex items-center gap-2'>
                    <Checkbox id='p-active' checked={data.is_active} onCheckedChange={(v) => setData('is_active', !!v)} />
                    <Label htmlFor='p-active' className='cursor-pointer font-normal'>Parameter aktif</Label>
                </div>
            </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...' : parameter ? 'Simpan Perubahan' : 'Simpan'}</Button>
            </div>
        </form>
    )
}