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'

interface AssetGroupItem {
    id: number
    code: string
    name: string
    description: string | null
    is_active: boolean
}

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

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

    const form = useForm({
        code: item?.code ?? '',
        name: item?.name ?? '',
        description: item?.description ?? '',
        is_active: item?.is_active ?? true,
    })

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault()
        const url = isEditing ? `/master-data/asset-groups/${item!.id}` : '/master-data/asset-groups'
        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.toUpperCase())}
                        placeholder='GA-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 Group Aset <span className='text-destructive'>*</span></Label>
                    <Input
                        id='name'
                        value={form.data.name}
                        onChange={(e) => form.setData('name', e.target.value)}
                        placeholder='Contoh: Instrument Utama'
                        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 singkat group aset (opsional)'
                />
            </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'>Group nonaktif tidak tampil di pilihan master aset</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 Group Aset'}
                </Button>
            </div>
        </form>
    )
}