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 SampleTypeController from '@/actions/App/Modules/MasterData/Infrastructure/Controllers/SampleTypeController'
import { ChevronLeft } from 'lucide-react'

export default function SampleTypeCreate() {
    const { data, setData, post, processing, errors } = useForm({
        code:                 '',
        name:                 '',
        category_id:          '',
        item_category:        'sample',
        item_type:            'sample',
        routed_to_department: '',
        description:          '',
        storage_requirement:  '',
        handling_instruction: '',
        handling_time:        '',
        has_dynamic_fields:   false,
        is_active:            true,
    })

    function submit(e: React.FormEvent) {
        e.preventDefault()
        post(SampleTypeController.store().action)
    }

    return (
        <LimsAppLayout>
            <Head title='Tambah Item Sampel' />
            <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'>Tambah Item Sampel</h1>
                            <p className='text-sm text-muted-foreground'>Buat master data item sampel baru</p>
                        </div>
                    </div>
                    <Button type='submit' disabled={processing}>
                        {processing ? 'Menyimpan…' : 'Simpan'}
                    </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 htmlFor='code'>Kode</Label>
                            <p className='text-xs text-muted-foreground'>Opsional. Jika dikosongkan, sistem akan generate kode otomatis.</p>
                            <Input id='code' value={data.code} onChange={e => setData('code', e.target.value.toUpperCase())} placeholder='e.g. AIR_MINUM' />
                            {errors.code && <p className='text-xs text-destructive'>{errors.code}</p>}
                        </div>
                        <div className='space-y-1'>
                            <Label htmlFor='name'>Nama <span className='text-destructive'>*</span></Label>
                            <Input id='name' value={data.name} onChange={e => setData('name', e.target.value)} placeholder='e.g. Air Minum' />
                            {errors.name && <p className='text-xs text-destructive'>{errors.name}</p>}
                        </div>
                        <div className='space-y-1'>
                            <Label htmlFor='item_category'>Item Category <span className='text-destructive'>*</span></Label>
                            <select id='item_category' 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 htmlFor='item_type'>Item Type <span className='text-destructive'>*</span></Label>
                            <select id='item_type' 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 htmlFor='routed_to_department'>Routed To Department</Label>
                            <Input id='routed_to_department' 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 htmlFor='handling_time'>Waktu Handling (menit)</Label>
                            <Input id='handling_time' 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 htmlFor='description'>Deskripsi</Label>
                            <Textarea id='description' rows={2} value={data.description} onChange={e => setData('description', e.target.value)} />
                        </div>
                        <div className='col-span-full space-y-1'>
                            <Label htmlFor='storage_requirement'>Syarat Penyimpanan</Label>
                            <Textarea id='storage_requirement' rows={2} value={data.storage_requirement} onChange={e => setData('storage_requirement', e.target.value)} />
                        </div>
                        <div className='col-span-full space-y-1'>
                            <Label htmlFor='handling_instruction'>Instruksi Penanganan</Label>
                            <Textarea id='handling_instruction' 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>
    )
}
