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 { Switch } from '@ui/components/ui/switch'
import { Textarea } from '@ui/components/ui/textarea'
import { ComboboxDropdown } from '@ui/components/combobox-dropdown'
import { type MasterItem } from '@/types/finance'

interface Props {
    item?: MasterItem
    itemTypeOptions: { value: string; label: string }[]
    onSuccess?: () => void
}

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

    const form = useForm({
        code: item?.code ?? '',
        name: item?.name ?? '',
        item_type: item?.item_type ?? '',
        description: item?.description ?? '',
        unit: item?.unit ?? '',
        is_sellable: item?.is_sellable ?? true,
        is_purchasable: item?.is_purchasable ?? false,
        is_inventoried: item?.is_inventoried ?? false,
        revenue_account_id: item?.revenue_account_id?.toString() ?? '',
        cogs_account_id: item?.cogs_account_id?.toString() ?? '',
        inventory_account_id: item?.inventory_account_id?.toString() ?? '',
        tax_code: item?.tax_code ?? '',
        accurate_id: item?.accurate_id ?? '',
        accurate_code: item?.accurate_code ?? '',
        item_id_old: item?.item_id_old?.toString() ?? '',
        is_active: item?.is_active ?? true,
    })

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

        const url = isEditing
            ? `/department/finance/items/${item!.id}`
            : '/department/finance/items'

        const method = isEditing ? form.put : form.post
        method(url, { preserveScroll: true, onSuccess: () => onSuccess?.() })
    }

    return (
        <form onSubmit={handleSubmit} className='flex flex-col gap-5 p-4'>
            <div className='grid grid-cols-2 gap-4'>
                <div className='space-y-1'>
                    <Label htmlFor='code'>Kode Item <span className='text-destructive'>*</span></Label>
                    <Input
                        id='code'
                        value={form.data.code}
                        onChange={(e) => form.setData('code', e.target.value)}
                        placeholder='ITEM-001'
                        className={form.errors.code ? 'border-destructive' : ''}
                    />
                    {form.errors.code && <p className='text-xs text-destructive'>{form.errors.code}</p>}
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='name'>Nama Item <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='grid grid-cols-2 gap-4'>
                <div className='space-y-1'>
                    <Label>Tipe Item <span className='text-destructive'>*</span></Label>
                    <ComboboxDropdown
                        value={form.data.item_type || undefined}
                        onValueChange={(value) => form.setData('item_type', value ?? '')}
                        placeholder='Pilih tipe item'
                        options={itemTypeOptions}
                        searchPlaceholder='Cari tipe item...'
                        emptyText='Tipe item tidak ditemukan.'
                    />
                    {form.errors.item_type && <p className='text-xs text-destructive'>{form.errors.item_type}</p>}
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='unit'>Unit</Label>
                    <Input id='unit' value={form.data.unit} onChange={(e) => form.setData('unit', e.target.value)} placeholder='PAKET / PCS / KG' />
                </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 item (opsional)'
                />
            </div>

            <div className='grid grid-cols-3 gap-4'>
                <div className='space-y-1'>
                    <Label htmlFor='revenue_account_id'>Revenue Account ID</Label>
                    <Input
                        id='revenue_account_id'
                        type='number'
                        value={form.data.revenue_account_id}
                        onChange={(e) => form.setData('revenue_account_id', e.target.value)}
                        placeholder='Opsional'
                    />
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='cogs_account_id'>COGS Account ID</Label>
                    <Input
                        id='cogs_account_id'
                        type='number'
                        value={form.data.cogs_account_id}
                        onChange={(e) => form.setData('cogs_account_id', e.target.value)}
                        placeholder='Opsional'
                    />
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='inventory_account_id'>Inventory Account ID</Label>
                    <Input
                        id='inventory_account_id'
                        type='number'
                        value={form.data.inventory_account_id}
                        onChange={(e) => form.setData('inventory_account_id', e.target.value)}
                        placeholder='Opsional'
                    />
                </div>
            </div>

            <div className='grid grid-cols-2 gap-4'>
                <div className='space-y-1'>
                    <Label htmlFor='tax_code'>Tax Code</Label>
                    <Input id='tax_code' value={form.data.tax_code} onChange={(e) => form.setData('tax_code', e.target.value)} placeholder='PPN11 / NON-TAX' />
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='item_id_old'>Item ID Old (Jenis Sampel Lama)</Label>
                    <Input id='item_id_old' type='number' value={form.data.item_id_old} onChange={(e) => form.setData('item_id_old', e.target.value)} placeholder='Contoh: 1234' />
                </div>
            </div>

            <div className='grid grid-cols-2 gap-4'>
                <div className='space-y-1'>
                    <Label htmlFor='accurate_id'>Accurate ID</Label>
                    <Input id='accurate_id' value={form.data.accurate_id} onChange={(e) => form.setData('accurate_id', e.target.value)} placeholder='ID dari Accurate' />
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='accurate_code'>Accurate Code</Label>
                    <Input id='accurate_code' value={form.data.accurate_code} onChange={(e) => form.setData('accurate_code', e.target.value)} placeholder='Kode dari Accurate' />
                </div>
            </div>

            <div className='grid grid-cols-1 gap-2 rounded-lg border p-3'>
                <div className='flex items-center justify-between'>
                    <Label htmlFor='is_sellable' className='cursor-pointer'>Bisa dijual</Label>
                    <Switch id='is_sellable' checked={form.data.is_sellable} onCheckedChange={(value) => form.setData('is_sellable', value)} />
                </div>
                <div className='flex items-center justify-between'>
                    <Label htmlFor='is_purchasable' className='cursor-pointer'>Bisa dibeli</Label>
                    <Switch id='is_purchasable' checked={form.data.is_purchasable} onCheckedChange={(value) => form.setData('is_purchasable', value)} />
                </div>
                <div className='flex items-center justify-between'>
                    <Label htmlFor='is_inventoried' className='cursor-pointer'>Termasuk stok persediaan</Label>
                    <Switch id='is_inventoried' checked={form.data.is_inventoried} onCheckedChange={(value) => form.setData('is_inventoried', value)} />
                </div>
                <div className='mt-2 border-t pt-2'>
                    <div className='flex items-center justify-between'>
                        <Label htmlFor='is_active' className='cursor-pointer'>Status aktif</Label>
                        <Switch id='is_active' checked={form.data.is_active} onCheckedChange={(value) => form.setData('is_active', value)} />
                    </div>
                </div>
            </div>

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