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 { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { type Item, type ItemCategory } from '@/types/gwin'

interface Props {
    item?: Item
    categoryOptions: Pick<ItemCategory, 'id' | 'code' | 'name' | 'is_asset_category'>[]
    branchOptions: { id: number; code: string; name: string }[]
    unitOptions: { id: number; name: string }[]
    onSuccess?: () => void
}

export function ItemForm({ item, categoryOptions, branchOptions, unitOptions, onSuccess }: Props) {
    const isEditing = !!item

    const form = useForm({
        code:          item?.code ?? '',
        name:          item?.name ?? '',
        category_id:   item?.category_id ? String(item.category_id) : '',
        branch_id:     item?.branch_id ? String(item.branch_id) : '',
        unit:          item?.unit ?? '',
        brand:         item?.brand ?? '',
        model_number:  item?.model_number ?? '',
        specification: item?.specification ?? '',
        description:   item?.description ?? '',
        min_stock:     item?.min_stock ?? 0,
        gramasi:       item?.gramasi ?? '',
        satuan_gramasi: item?.satuan_gramasi ?? 'gram',
        is_asset:      item?.is_asset ?? false,
        is_active:     item?.is_active ?? true,
    })

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault()
        const url = isEditing
            ? `/master-data/items/${item!.id}`
            : '/master-data/items'
        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='ITM-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 item'
                        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>Kategori <span className='text-destructive'>*</span></Label>
                <ComboboxDropdown
                    value={form.data.category_id || undefined}
                    onValueChange={(value) => form.setData('category_id', value ?? '')}
                    placeholder='Pilih kategori...'
                    options={categoryOptions.map((category) => ({
                        value: String(category.id),
                        label: `${category.code} - ${category.name}`,
                    }))}
                    searchPlaceholder='Cari kategori...'
                    emptyText='Kategori tidak ditemukan.'
                    className={form.errors.category_id ? 'border-destructive' : ''}
                />
                {form.errors.category_id && <p className='text-xs text-destructive'>{form.errors.category_id}</p>}
            </div>

            <div className='space-y-1'>
                <Label>Cabang</Label>
                <ComboboxDropdown
                    value={form.data.branch_id || undefined}
                    onValueChange={(value) => form.setData('branch_id', value ?? '')}
                    placeholder='Pilih cabang...'
                    options={branchOptions.map((branch) => ({
                        value: String(branch.id),
                        label: `${branch.code} - ${branch.name}`,
                    }))}
                    searchPlaceholder='Cari cabang...'
                    emptyText='Cabang tidak ditemukan.'
                    className={form.errors.branch_id ? 'border-destructive' : ''}
                />
                {form.errors.branch_id && <p className='text-xs text-destructive'>{form.errors.branch_id}</p>}
            </div>

            <div className='grid grid-cols-3 gap-4'>
                <div className='space-y-1'>
                    <Label>Satuan</Label>
                    <ComboboxDropdown
                        value={form.data.unit || undefined}
                        onValueChange={(value) => form.setData('unit', value ?? '')}
                        placeholder='Pilih satuan...'
                        options={unitOptions.map((u) => ({ value: u.name, label: u.name }))}
                        searchPlaceholder='Cari satuan...'
                        emptyText='Satuan tidak ditemukan.'
                    />
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='brand'>Merek</Label>
                    <Input id='brand' value={form.data.brand ?? ''} onChange={(e) => form.setData('brand', e.target.value)} placeholder='Merek item' />
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='model_number'>Nomor Model</Label>
                    <Input id='model_number' value={form.data.model_number ?? ''} onChange={(e) => form.setData('model_number', e.target.value)} placeholder='Model/SKU' />
                </div>
            </div>

            <div className='space-y-1'>
                <Label htmlFor='specification'>Spesifikasi</Label>
                <Textarea id='specification' value={form.data.specification ?? ''} onChange={(e) => form.setData('specification', e.target.value)} rows={2} placeholder='Spesifikasi teknis (opsional)' />
            </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={2} placeholder='Deskripsi singkat (opsional)' />
            </div>

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

            <div className='grid grid-cols-2 gap-4'>
                <div className='space-y-1'>
                    <Label htmlFor='gramasi'>Gramasi</Label>
                    <Input
                        id='gramasi'
                        type='number'
                        min={0}
                        step='0.0001'
                        value={form.data.gramasi}
                        onChange={(e) => form.setData('gramasi', e.target.value)}
                        placeholder='Contoh: 250'
                        className={form.errors.gramasi ? 'border-destructive' : ''}
                    />
                    {form.errors.gramasi && <p className='text-xs text-destructive'>{form.errors.gramasi}</p>}
                </div>
                <div className='space-y-1'>
                    <Label>Satuan Gramasi</Label>
                    <ComboboxDropdown
                        value={form.data.satuan_gramasi || undefined}
                        onValueChange={(value) => form.setData('satuan_gramasi', value ?? '')}
                        placeholder='Pilih satuan...'
                        options={[
                            { value: 'mg', label: 'mg (miligram)' },
                            { value: 'gram', label: 'gram' },
                            { value: 'kg', label: 'kg (kilogram)' },
                            { value: 'oz', label: 'oz (ounce)' },
                            { value: 'lb', label: 'lb (pound)' },
                        ]}
                        searchPlaceholder='Cari satuan...'
                        emptyText='Satuan tidak ditemukan.'
                    />
                    {form.errors.satuan_gramasi && <p className='text-xs text-destructive'>{form.errors.satuan_gramasi}</p>}
                </div>
            </div>

            <div className='flex items-center justify-between rounded-lg border p-3'>
                <div>
                    <Label>Ini Adalah Aset</Label>
                    <p className='text-xs text-muted-foreground'>Tandai jika item ini akan dilacak sebagai aset individual</p>
                </div>
                <Switch checked={form.data.is_asset} onCheckedChange={(value) => form.setData('is_asset', value)} />
            </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'>Item nonaktif tidak bisa digunakan</p>
                </div>
                <Switch checked={form.data.is_active} onCheckedChange={(value) => form.setData('is_active', value)} />
            </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 Item'}
                </Button>
            </div>
        </form>
    )
}