import { useState } from 'react'
import { format, parseISO } from 'date-fns'
import { id as localeId } from 'date-fns/locale'
import { CalendarIcon } from 'lucide-react'
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 { Textarea } from '@ui/components/ui/textarea'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/ui/popover'
import { Calendar } from '@ui/components/ui/calendar'
import { cn } from '@ui/lib/utils'
import { type ParameterAccreditation } from '@/types/glims'

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

interface Props {
    accreditation?: ParameterAccreditation
    parameterOptions: OptionItem[]
    sampleTypeOptions: OptionItem[]
    methodOptions: OptionItem[]
    fixedParameterId?: number
    embedded?: boolean
    onSuccess: () => void
    onCancel: () => void
}

const STATUS_OPTIONS = [
    { value: 'ACCREDITED', label: 'Terakreditasi' },
    { value: 'NOT_ACCREDITED', label: 'Belum Terakreditasi' },
    { value: 'IN_PROCESS', label: 'Dalam Proses' },
    { value: 'EXPIRED', label: 'Kedaluwarsa' },
] as const

function DatePickerField({
    label,
    value,
    placeholder,
    onChange,
    error,
}: {
    label: string
    value: string
    placeholder: string
    onChange: (value: string) => void
    error?: string
}) {
    const [open, setOpen] = useState(false)

    return (
        <div className='space-y-1.5'>
            <Label>{label}</Label>
            <Popover open={open} onOpenChange={setOpen}>
                <PopoverTrigger asChild>
                    <Button
                        variant='outline'
                        className={cn('w-full justify-start text-left font-normal', !value && 'text-muted-foreground')}
                    >
                        <CalendarIcon className='mr-2 h-4 w-4' />
                        {value ? format(parseISO(value), 'd MMMM yyyy', { locale: localeId }) : placeholder}
                    </Button>
                </PopoverTrigger>
                <PopoverContent className='w-auto p-0' align='start'>
                    <Calendar
                        mode='single'
                        captionLayout='dropdown'
                        selected={value ? parseISO(value) : undefined}
                        onSelect={(date) => {
                            onChange(date ? format(date, 'yyyy-MM-dd') : '')
                            setOpen(false)
                        }}
                        fromYear={1945}
                        toYear={new Date().getFullYear() + 20}
                        locale={localeId}
                    />
                </PopoverContent>
            </Popover>
            {error && <p className='text-xs text-destructive'>{error}</p>}
        </div>
    )
}

export function ParameterAccreditationForm({ accreditation, parameterOptions, sampleTypeOptions, methodOptions, fixedParameterId, embedded = false, onSuccess, onCancel }: Props) {
    const { data, setData, post, put, processing, errors } = useForm({
        parameter_id:         String(accreditation?.parameter_id ?? fixedParameterId ?? ''),
        sample_type_id:       String(accreditation?.sample_type_id ?? ''),
        method_id:            String(accreditation?.method_id ?? ''),
        accreditation_status: accreditation?.accreditation_status ?? 'NOT_ACCREDITED',
        certificate_no:       accreditation?.certificate_no ?? '',
        valid_from:           accreditation?.valid_from ?? '',
        valid_until:          accreditation?.valid_until ?? '',
        notes:                accreditation?.notes ?? '',
        is_active:            accreditation?.is_active ?? true,
    })

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

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

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

        post(`/master-data/parameter-accreditations${querySuffix}`, {
            onSuccess: () => { toast.success('Akreditasi 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'>
                <div className='space-y-1.5'>
                    <Label htmlFor='pa-sample-type'>Jenis Sampel <span className='text-destructive'>*</span></Label>
                    <ComboboxDropdown
                        value={data.sample_type_id || undefined}
                        onValueChange={(value) => setData('sample_type_id', value ?? '')}
                        placeholder='Pilih jenis sampel...'
                        options={sampleTypeOptions.map((item) => ({ value: String(item.id), label: `${item.code} - ${item.name}` }))}
                        searchPlaceholder='Cari jenis sampel...'
                        emptyText='Jenis sampel tidak ditemukan.'
                    />
                    {errors.sample_type_id && <p className='text-xs text-destructive'>{errors.sample_type_id}</p>}
                </div>

                {!fixedParameterId && (
                    <div className='space-y-1.5'>
                        <Label htmlFor='pa-parameter'>Parameter <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.'
                        />
                        {errors.parameter_id && <p className='text-xs text-destructive'>{errors.parameter_id}</p>}
                    </div>
                )}

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

                <div className='space-y-1.5'>
                    <Label htmlFor='pa-status'>Status Akreditasi <span className='text-destructive'>*</span></Label>
                    <ComboboxDropdown
                        value={data.accreditation_status || undefined}
                        onValueChange={(value) => setData('accreditation_status', (value ?? 'NOT_ACCREDITED') as typeof data.accreditation_status)}
                        placeholder='Pilih status...'
                        options={STATUS_OPTIONS.map((item) => ({ value: item.value, label: item.label }))}
                        searchPlaceholder='Cari status...'
                        emptyText='Status tidak ditemukan.'
                    />
                    {errors.accreditation_status && <p className='text-xs text-destructive'>{errors.accreditation_status}</p>}
                </div>

                <div className='space-y-1.5'>
                    <Label htmlFor='pa-cert'>Nomor Sertifikat</Label>
                    <Input
                        id='pa-cert'
                        value={data.certificate_no}
                        onChange={(e) => setData('certificate_no', e.target.value)}
                        placeholder='e.g. KAN-LP-123-IDN'
                    />
                    {errors.certificate_no && <p className='text-xs text-destructive'>{errors.certificate_no}</p>}
                </div>

                <DatePickerField
                    label='Tanggal Berlaku Awal'
                    value={data.valid_from}
                    placeholder='Pilih tanggal awal...'
                    onChange={(v) => setData('valid_from', v)}
                    error={errors.valid_from}
                />

                <DatePickerField
                    label='Tanggal Berlaku Sampai'
                    value={data.valid_until}
                    placeholder='Pilih tanggal sampai...'
                    onChange={(v) => setData('valid_until', v)}
                    error={errors.valid_until}
                />

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

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