import { Head, useForm } from '@inertiajs/react'
import { LimsAppLayout } from '@/layouts/lims-app-layout'
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 { Card, CardContent, CardHeader, CardTitle } from '@ui/components/ui/card'
import { Checkbox } from '@ui/components/ui/checkbox'
import { type SampleType } from '@/types/glims'
import SampleTypeController from '@/actions/App/Modules/MasterData/Infrastructure/Controllers/SampleTypeController'
import { ChevronLeft } from 'lucide-react'

interface Props {
    sampleType: SampleType
}

export default function SampleTypeEdit({ sampleType }: Props) {
    const { data, setData, put, processing, errors } = useForm({
        code:                 sampleType.code,
        name:                 sampleType.name,
        category_id:          String(sampleType.category_id ?? ''),
        item_category:        sampleType.item_category ?? 'sample',
        item_type:            sampleType.item_type ?? 'sample',
        routed_to_department: String(sampleType.routed_to_department ?? ''),
        description:          sampleType.description ?? '',
        storage_requirement:  sampleType.storage_requirement ?? '',
        handling_instruction: sampleType.handling_instruction ?? '',
        handling_time:        String(sampleType.handling_time ?? ''),
        has_dynamic_fields:   sampleType.has_dynamic_fields,
        is_active:            sampleType.is_active,
    })

    function submit(e: React.FormEvent) {
        e.preventDefault()
        put(SampleTypeController.update(sampleType).action)
    }

    return (
        <LimsAppLayout>
            <Head title={`Edit ${sampleType.name}`} />
            <form onSubmit={submit} className='flex h-full flex-1 flex-col gap-6 p-4'>

                <div className='flex items-center justify-between'>
                    <div className='flex items-center gap-3'>
                        <Button variant='outline' size='icon' className='h-8 w-8' asChild>
                            <a href={SampleTypeController.index().url}><ChevronLeft className='h-4 w-4' /></a>
                        </Button>
                        <div>
                            <h1 className='text-xl font-bold tracking-tight'>Edit Item Sampel</h1>
                            <p className='text-sm text-muted-foreground'>{sampleType.name}</p>
                        </div>
                    </div>
                    <Button type='submit' disabled={processing}>
                        {processing ? 'Menyimpan…' : 'Simpan Perubahan'}
                    </Button>
                </div>

                <Card>
                    <CardHeader><CardTitle className='text-base'>Detail</CardTitle></CardHeader>
                    <CardContent className='grid grid-cols-1 gap-4 md:grid-cols-2'>
                        <div className='space-y-1'>
                            <Label>Kode</Label>
                            <Input value={data.code} onChange={e => setData('code', e.target.value.toUpperCase())} />
                            <p className='text-xs text-muted-foreground'>Opsional. Jika dikosongkan, kode akan dibuat otomatis oleh sistem.</p>
                            {errors.code && <p className='text-xs text-destructive'>{errors.code}</p>}
                        </div>
                        <div className='space-y-1'>
                            <Label>Nama <span className='text-destructive'>*</span></Label>
                            <Input value={data.name} onChange={e => setData('name', e.target.value)} />
                            {errors.name && <p className='text-xs text-destructive'>{errors.name}</p>}
                        </div>
                        <div className='space-y-1'>
                            <Label>Item Category <span className='text-destructive'>*</span></Label>
                            <select value={data.item_category} onChange={e => setData('item_category', e.target.value)} className='flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm'>
                                <option value='sample'>sample</option>
                                <option value='additional_cost'>additional_cost</option>
                            </select>
                            {errors.item_category && <p className='text-xs text-destructive'>{errors.item_category}</p>}
                        </div>
                        <div className='space-y-1'>
                            <Label>Item Type <span className='text-destructive'>*</span></Label>
                            <select value={data.item_type} onChange={e => setData('item_type', e.target.value)} className='flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm'>
                                <option value='sample'>sample</option>
                                <option value='officer_fee'>officer_fee</option>
                                <option value='accomodation'>accomodation</option>
                                <option value='transport'>transport</option>
                                <option value='reprint'>reprint</option>
                            </select>
                            {errors.item_type && <p className='text-xs text-destructive'>{errors.item_type}</p>}
                        </div>
                        <div className='space-y-1'>
                            <Label>Routed To Department</Label>
                            <Input type='number' min='1' value={data.routed_to_department} onChange={e => setData('routed_to_department', e.target.value)} />
                            {errors.routed_to_department && <p className='text-xs text-destructive'>{errors.routed_to_department}</p>}
                        </div>
                        <div className='space-y-1'>
                            <Label>Waktu Handling (menit)</Label>
                            <Input type='number' min='1' value={data.handling_time} onChange={e => setData('handling_time', e.target.value)} />
                        </div>
                        <div className='col-span-full space-y-1'>
                            <Label>Deskripsi</Label>
                            <Textarea rows={2} value={data.description} onChange={e => setData('description', e.target.value)} />
                        </div>
                        <div className='col-span-full space-y-1'>
                            <Label>Syarat Penyimpanan</Label>
                            <Textarea rows={2} value={data.storage_requirement} onChange={e => setData('storage_requirement', e.target.value)} />
                        </div>
                        <div className='col-span-full space-y-1'>
                            <Label>Instruksi Penanganan</Label>
                            <Textarea rows={2} value={data.handling_instruction} onChange={e => setData('handling_instruction', e.target.value)} />
                        </div>
                        <div className='flex items-center gap-2'>
                            <Checkbox id='has_dynamic_fields' checked={data.has_dynamic_fields} onCheckedChange={v => setData('has_dynamic_fields', v === true)} />
                            <Label htmlFor='has_dynamic_fields' className='cursor-pointer'>Memiliki field dinamis</Label>
                        </div>
                        <div className='flex items-center gap-2'>
                            <Checkbox id='is_active' checked={data.is_active} onCheckedChange={v => setData('is_active', v === true)} />
                            <Label htmlFor='is_active' className='cursor-pointer'>Aktif</Label>
                        </div>
                    </CardContent>
                </Card>
            </form>
        </LimsAppLayout>
    )
}
