import { useForm } from '@inertiajs/react'
import { toast } from 'sonner'
import { Button } from '@ui/components/ui/button'
import { Checkbox } from '@ui/components/ui/checkbox'
import { Input } from '@ui/components/ui/input'
import { Label } from '@ui/components/ui/label'
import { type ParameterAlias } from '@/types/glims'

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

interface ParameterAliasFormProps {
    alias?: ParameterAlias
    parameterOptions: ParameterOption[]
    fixedParameterId?: number
    embedded?: boolean
    onSuccess: () => void
    onCancel: () => void
}

export function ParameterAliasForm({ alias, parameterOptions, fixedParameterId, embedded = false, onSuccess, onCancel }: ParameterAliasFormProps) {
    const { data, setData, post, put, transform, processing, errors } = useForm({
        parameter_id: String(alias?.parameter_id ?? fixedParameterId ?? ''),
        alias_name: alias?.alias_name ?? '',
        source: alias?.source ?? '',
        is_active: alias?.is_active ?? true,
    })

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

        transform((formData) => ({
            ...formData,
            parameter_id: Number(formData.parameter_id),
        }))

        const querySuffix = embedded ? '?embedded=1' : ''

        if (alias) {
            put(`/master-data/parameter-aliases/${alias.id}${querySuffix}`, {
                onSuccess: () => {
                    toast.success('Alias parameter berhasil diperbarui.')
                    onSuccess()
                },
                onError: (errorBag) => toast.error(Object.values(errorBag)[0] ?? 'Terjadi kesalahan.'),
            })
            return
        }

        post(`/master-data/parameter-aliases${querySuffix}`, {
            onSuccess: () => {
                toast.success('Alias parameter berhasil ditambahkan.')
                onSuccess()
            },
            onError: (errorBag) => toast.error(Object.values(errorBag)[0] ?? 'Terjadi kesalahan.'),
        })
    }

    return (
        <form onSubmit={submit} className='space-y-4'>
            <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
                {!fixedParameterId && (
                    <div className='col-span-full space-y-1.5'>
                        <Label htmlFor='alias-parameter'>
                            Parameter <span className='text-destructive'>*</span>
                        </Label>
                        <select
                            id='alias-parameter'
                            value={data.parameter_id}
                            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => setData('parameter_id', e.target.value)}
                            className='w-full rounded-md border bg-background px-3 py-2 text-sm'
                        >
                            <option value=''>Pilih parameter...</option>
                            {parameterOptions.map((option) => (
                                <option key={option.id} value={option.id}>
                                    {option.name}
                                </option>
                            ))}
                        </select>
                        {errors.parameter_id && <p className='text-xs text-destructive'>{errors.parameter_id}</p>}
                    </div>
                )}

                <div className='space-y-1.5'>
                    <Label htmlFor='alias-name'>
                        Nama Alias <span className='text-destructive'>*</span>
                    </Label>
                    <Input
                        id='alias-name'
                        value={data.alias_name}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setData('alias_name', e.target.value)}
                        placeholder='e.g. Dissolved Oxygen'
                    />
                    {errors.alias_name && <p className='text-xs text-destructive'>{errors.alias_name}</p>}
                </div>

                <div className='space-y-1.5'>
                    <Label htmlFor='alias-source'>Sumber</Label>
                    <Input
                        id='alias-source'
                        value={data.source}
                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setData('source', e.target.value)}
                        placeholder='e.g. APHA, SNI, SOP Internal'
                    />
                    {errors.source && <p className='text-xs text-destructive'>{errors.source}</p>}
                </div>

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