import { useForm } from '@inertiajs/react'
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 { Switch } from '@ui/components/ui/switch'
import { type ItemCategory } from '@/types/gwin'

interface Props {
    item?: ItemCategory
    onSuccess?: () => void
}

export function ItemCategoryForm({ item, onSuccess }: Props) {
    const isEditing = !!item

    const form = useForm({
        code:               item?.code ?? '',
        name:               item?.name ?? '',
        is_asset_category:  item?.is_asset_category ?? false,
        description:        item?.description ?? '',
        icon:               item?.icon ?? '',
        display_order:      item?.display_order ?? 0,
        is_active:          item?.is_active ?? true,
    })

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

        const url = isEditing
            ? `/master-data/item-categories/${item!.id}`
            : '/master-data/item-categories'

        const method = isEditing ? form.put : form.post

        method(url, {
            preserveScroll: true,
            onSuccess: () => onSuccess?.(),
        })
    }

    return (
        <form onSubmit={handleSubmit} className='flex flex-col gap-4 p-4'>
            <div className='grid grid-cols-2 gap-4'>
                <div className='space-y-1'>
                    <Label htmlFor='code'>Kode</Label>
                    <Input
                        id='code'
                        value={form.data.code}
                        onChange={(e) => form.setData('code', e.target.value)}
                        placeholder='CTG-001'
                        className={form.errors.code ? 'border-destructive' : ''}
                    />
                    <p className='text-xs text-muted-foreground'>Opsional. Jika dikosongkan, kode akan dibuat otomatis oleh sistem.</p>
                    {form.errors.code && <p className='text-xs text-destructive'>{form.errors.code}</p>}
                </div>

                <div className='space-y-1'>
                    <Label htmlFor='name'>Nama <span className='text-destructive'>*</span></Label>
                    <Input
                        id='name'
                        value={form.data.name}
                        onChange={(e) => form.setData('name', e.target.value)}
                        placeholder='Nama kategori'
                        className={form.errors.name ? 'border-destructive' : ''}
                    />
                    {form.errors.name && <p className='text-xs text-destructive'>{form.errors.name}</p>}
                </div>
            </div>

            <div className='space-y-1'>
                <Label htmlFor='description'>Deskripsi</Label>
                <Textarea
                    id='description'
                    value={form.data.description ?? ''}
                    onChange={(e) => form.setData('description', e.target.value)}
                    rows={3}
                    placeholder='Deskripsi kategori (opsional)'
                />
            </div>

            <div className='grid grid-cols-2 gap-4'>
                <div className='space-y-1'>
                    <Label htmlFor='icon'>Ikon</Label>
                    <Input
                        id='icon'
                        value={form.data.icon ?? ''}
                        onChange={(e) => form.setData('icon', e.target.value)}
                        placeholder='e.g. package'
                    />
                </div>

                <div className='space-y-1'>
                    <Label htmlFor='display_order'>Urutan Tampil</Label>
                    <Input
                        id='display_order'
                        type='number'
                        min={0}
                        value={form.data.display_order}
                        onChange={(e) => form.setData('display_order', parseInt(e.target.value) || 0)}
                    />
                </div>
            </div>

            <div className='flex items-center justify-between rounded-lg border p-3'>
                <div>
                    <Label>Kategori Aset</Label>
                    <p className='text-xs text-muted-foreground'>Tandai jika kategori ini digunakan untuk aset</p>
                </div>
                <Switch
                    checked={form.data.is_asset_category}
                    onCheckedChange={(v) => form.setData('is_asset_category', v)}
                />
            </div>

            <div className='flex items-center justify-between rounded-lg border p-3'>
                <div>
                    <Label>Status Aktif</Label>
                    <p className='text-xs text-muted-foreground'>Kategori nonaktif tidak bisa dipilih saat input</p>
                </div>
                <Switch
                    checked={form.data.is_active}
                    onCheckedChange={(v) => form.setData('is_active', v)}
                />
            </div>

            <div className='flex justify-end gap-2 border-t pt-4'>
                <Button type='submit' disabled={form.processing} className='bg-amber-600 hover:bg-amber-700'>
                    {form.processing ? 'Menyimpan...' : isEditing ? 'Simpan Perubahan' : 'Tambah Kategori'}
                </Button>
            </div>
        </form>
    )
}