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 Supplier } from '@/types/gwin'

interface Props {
    supplier?: Supplier
    supplierTypeOptions: { value: string; label: string }[]
    onSuccess?: () => void
}

export function SupplierForm({ supplier, supplierTypeOptions, onSuccess }: Props) {
    const isEditing = !!supplier

    const form = useForm({
        code:           supplier?.code ?? '',
        name:           supplier?.name ?? '',
        supplier_type:  supplier?.supplier_type ?? 'REGULAR',
        contact_person: supplier?.contact_person ?? '',
        phone:          supplier?.phone ?? '',
        email:          supplier?.email ?? '',
        address:        supplier?.address ?? '',
        notes:          supplier?.notes ?? '',
        is_active:      supplier?.is_active ?? true,
    })

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

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

        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='SUP-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 Pemasok <span className='text-destructive'>*</span></Label>
                    <Input
                        id='name'
                        value={form.data.name}
                        onChange={(e) => form.setData('name', e.target.value)}
                        placeholder='Nama pemasok'
                        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>Tipe Pemasok <span className='text-destructive'>*</span></Label>
                <ComboboxDropdown
                    value={form.data.supplier_type}
                    onValueChange={(value) => form.setData('supplier_type', value ?? 'REGULAR')}
                    placeholder='Pilih tipe pemasok'
                    options={supplierTypeOptions}
                    searchPlaceholder='Cari tipe pemasok...'
                    emptyText='Tipe tidak ditemukan.'
                />
                {form.errors.supplier_type && <p className='text-xs text-destructive'>{form.errors.supplier_type}</p>}
            </div>

            <div className='grid grid-cols-3 gap-4'>
                <div className='space-y-1'>
                    <Label htmlFor='contact_person'>Contact Person</Label>
                    <Input id='contact_person' value={form.data.contact_person ?? ''} onChange={(e) => form.setData('contact_person', e.target.value)} placeholder='Nama PIC' />
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='phone'>Telepon</Label>
                    <Input id='phone' value={form.data.phone ?? ''} onChange={(e) => form.setData('phone', e.target.value)} placeholder='08xx / 021-xxxx' />
                </div>
                <div className='space-y-1'>
                    <Label htmlFor='email'>Email</Label>
                    <Input id='email' value={form.data.email ?? ''} onChange={(e) => form.setData('email', e.target.value)} placeholder='email@domain.com' />
                </div>
            </div>

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

            <div className='space-y-1'>
                <Label htmlFor='notes'>Catatan</Label>
                <Textarea id='notes' value={form.data.notes ?? ''} onChange={(e) => form.setData('notes', e.target.value)} rows={2} placeholder='Catatan tambahan (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'>Pemasok nonaktif tidak muncul saat pemilihan di form 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 Pemasok'}
                </Button>
            </div>
        </form>
    )
}